/*
 * Remilia Corporation / Milady NFT Theme
 * ========================================
 * Complete visual override for the AnimeChat portal.
 * Aesthetic: clean white base, bold red accents (#ff0000),
 * serif typography (Times New Roman), pill-shaped buttons,
 * minimal corporate-cute Y2K/Remilia vibes.
 */

/* ─── CSS Variable Override ─────────────────────────────────────── */
:root {
    --green-bg:      #ffffff;
    --green-line:    #ff0000;
    --green-dark:    #cc0000;
    --green-soft:    #fff0f0;
    --panel-bg:      #ffffff;
    --panel-shadow:  0 4px 18px rgba(220, 0, 0, .12);
    --text-dark:     #111111;
    --text-soft:     #555555;
    --white:         #ffffff;
    --border-strong: #ff0000;
    --bubble:        rgba(255,255,255,.98);

    /* Remilia specifics */
    --rem-red:       #ff0000;
    --rem-dark-red:  #cc0000;
    --rem-pink:      #ffe0e0;
    --rem-cream:     #fffafa;
    --rem-border:    1px solid #ff0000;
    --rem-font:      "Nunito", "Segoe UI", "Helvetica Neue", sans-serif;
    --rem-font-sans: "Arial Narrow", "Arial", sans-serif;
}

/* ─── Language Switcher ─────────────────────────────────────────── */
.rem-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-left: auto;
    padding: 4px 8px;
}
.rem-lang-btn {
    color: #ff0000;
    text-decoration: none;
    padding: 2px 6px;
    border: 1px solid rgba(255,0,0,0.25);
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-transform: uppercase;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
.rem-lang-btn:hover,
.rem-lang-btn.active {
    background: #ff0000;
    color: #ffffff;
    border-color: #ff0000;
}
.rem-lang-sep {
    color: rgba(255,0,0,0.4);
    font-size: 10px;
    user-select: none;
}

/* Chat page admin-bar lang switcher positioning */
#wp-admin-bar .rem-lang-switcher {
    padding: 0 8px;
    align-self: center;
}

/* ─── Base ───────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--rem-font);
    background: #ffffff;
    color: #111111;
}

body.theme-anime {
    background: #ffffff !important;
}

/* Kill ALL green anime theme backgrounds, colors, fonts, sizing */
body.theme-anime.portal-page,
body.theme-anime.portal-home {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
/* Allow profile page background image to show through */
body.theme-anime.portal-page.has-profile-bg {
    background-image: var(--profile-page-bg) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #ffffff !important;
}

body.theme-anime.portal-page a,
body.theme-anime.portal-home a {
    color: var(--rem-red) !important;
}

body.theme-anime.portal-page a:hover,
body.theme-anime.portal-home a:hover {
    color: var(--rem-dark-red) !important;
}

body.theme-anime.portal-page .portal-shell,
body.theme-anime.portal-home .portal-shell {
    width: min(1200px, calc(100vw - 32px)) !important;
    margin: 18px auto 28px !important;
    padding: 0 !important;
}

body.theme-anime.portal-page .padder,
body.theme-anime.portal-home .padder {
    padding: 0 !important;
}

body.theme-anime.portal-page #container,
body.theme-anime.portal-home #container {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.theme-anime.portal-page #header,
body.theme-anime.portal-home #header {
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    color: #111111 !important;
    z-index: auto !important;
}

body.theme-anime.portal-page .portal-header,
body.theme-anime.portal-home .portal-header {
    margin: 0 !important;
    background: transparent !important;
}

body.theme-anime.portal-page #navigation,
body.theme-anime.portal-home #navigation {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
}

body.theme-anime.portal-page #nav,
body.theme-anime.portal-home #nav {
    float: none !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.theme-anime.portal-page #nav > li,
body.theme-anime.portal-home #nav > li {
    float: none !important;
    margin: 0 !important;
}

body.theme-anime.portal-page .green-btn,
body.theme-anime.portal-home .green-btn {
    background: #ffffff !important;
    border: 1.5px solid rgba(200,0,0,0.2) !important;
    color: #1a1a1a !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(200,0,0,0.06) !important;
    transition: all 0.2s ease !important;
}

body.theme-anime.portal-page .green-btn:hover,
body.theme-anime.portal-home .green-btn:hover {
    background: #fff0f0 !important;
    border-color: rgba(200,0,0,0.35) !important;
    color: var(--rem-red) !important;
    box-shadow: 0 3px 12px rgba(200,0,0,0.1) !important;
}

a {
    color: var(--rem-red);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ─── Portal Shell ───────────────────────────────────────────────── */
.portal-shell {
    width: min(1200px, calc(100vw - 32px));
    margin: 18px auto 28px;
}

/* ─── Header / Banner ────────────────────────────────────────────── */
.portal-banner {
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 2px solid #ff0000;
    min-height: auto;
    padding: 16px 18px 14px;
    border-radius: 0;
    align-items: center;
}

.portal-banner::before,
.portal-banner::after {
    display: none !important;
}

/* ─── Branding Lockup (logo + smiley) ───────────────────────────── */
.portal-branding-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-remilia-smiley {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.3s ease;
    cursor: default;
}

.portal-remilia-smiley:hover {
    opacity: 1;
    transform: rotate(18deg) scale(1.08);
}

.portal-remilia-smiley svg {
    display: block;
}

/* Site logo / title */
.portal-logo {
    font-family: var(--rem-font);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    color: var(--rem-red) !important;
    text-shadow: none;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.portal-logo:hover {
    text-decoration: underline;
}

.portal-branding h1 {
    margin: 0;
}

.portal-tagline {
    font-family: var(--rem-font);
    font-size: 11px;
    font-style: italic;
    color: #888;
    margin: 2px 0 0;
}

/* ─── Navigation ─────────────────────────────────────────────────── */

/* Reset anime-theme absolute/float positioning */
#navigation {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

#navigation::after {
    display: none !important;
}

#nav {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
}

.portal-mobile-panel-head {
    display: none !important;
}

.portal-nav {
    background: #ffffff;
    border: 1px solid #ff0000;
    gap: 0;
    padding-left: 0;
    flex-wrap: wrap;
    overflow: visible;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.portal-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari: hide nav scrollbar */
}

.portal-nav-link {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111111 !important;
    background: transparent !important;
    padding: 8px 14px 7px;
    border-right: 1px solid #eee;
    transition: background 0.15s, color 0.15s;
}

.portal-nav-link:hover {
    background: var(--rem-pink) !important;
    color: var(--rem-red) !important;
    text-decoration: none;
}

.portal-nav-link.active {
    color: var(--rem-red) !important;
    background: var(--rem-cream) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--rem-red);
}

/* ─── Portal Layout ──────────────────────────────────────────────── */
.portal-content {
    background: #ffffff;
    border-right: 1px solid #f0e0e0;
}

.portal-sidebar {
    background: #ffffff;
}

.portal-section,
.sidebar-box {
    background: #ffffff;
    border-bottom: 1px solid #ffe0e0;
}

.portal-page-title {
    font-family: var(--rem-font);
    font-size: 20px;
    font-weight: 400;
    color: #111;
    letter-spacing: 0.01em;
}

/* ─── Sidebar ────────────────────────────────────────────────────── */
.sidebar-title {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rem-red);
    border-bottom: 1px solid var(--rem-red);
    padding-bottom: 4px;
    margin-bottom: 10px;
}

.sidebar-counter {
    font-family: var(--rem-font);
    font-size: 28px;
    font-weight: 400;
    color: var(--rem-red);
}

.sidebar-links a {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f5e0e0;
    color: #111;
}

.sidebar-links a:hover {
    color: var(--rem-red);
}

.sidebar-intro {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 12px;
    color: #555;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
/* "green-btn" → Remilia pill button */
.green-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    padding: 6px 20px;
    border: 1.5px solid var(--rem-red) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--rem-red) !important;
    font-family: var(--rem-font);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.green-btn:hover,
.send-btn:hover {
    background: var(--rem-red) !important;
    color: #ffffff !important;
}

.green-btn.tiny {
    min-width: auto;
    min-height: auto;
    padding: 5px 16px;
    font-size: 12px;
}

.green-btn.full-btn {
    width: 100%;
    border-radius: 999px !important;
}

/* blue-btn → same pill style with thin red */
.blue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border: 1.5px solid var(--rem-red) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--rem-red) !important;
    font-family: var(--rem-font);
    font-size: 13px;
    font-style: italic;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.blue-btn:hover {
    background: var(--rem-red) !important;
    color: #ffffff !important;
}

.blue-btn.tiny {
    min-width: auto;
    min-height: auto;
    padding: 5px 16px;
    font-size: 12px;
}

/* ─── Inputs / Forms ─────────────────────────────────────────────── */
.header-search-input,
.header-search-scope,
.header-search-button,
.portal-search-input,
.portal-select,
.sidebar-input,
.text-input,
.textarea-input {
    border: 1px solid #ffaaaa !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-family: var(--rem-font);
    font-size: 12px;
    border-radius: 2px;
}

.header-search-input:focus,
.sidebar-input:focus,
.text-input:focus,
.textarea-input:focus {
    outline: none;
    border-color: var(--rem-red) !important;
}

.header-search-button {
    border: 1.5px solid var(--rem-red) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--rem-red) !important;
    cursor: pointer;
    font-family: var(--rem-font);
    font-style: italic;
    padding: 0 12px;
}

.header-search-button:hover {
    background: var(--rem-red) !important;
    color: #fff !important;
}

/* ─── Cards & Sections ───────────────────────────────────────────── */
.news-post-card,
.portal-feature-card {
    background: #ffffff;
    border-top: 1px solid #ffe0e0;
}

.news-post-card h2,
.news-post-card h2 a {
    color: #111;
    font-family: var(--rem-font);
    font-size: 20px;
    font-weight: 400;
}

.news-post-card h2 a:hover {
    color: var(--rem-red);
}

.post .posttitle a,
.post .posttitle a:visited {
    color: #111;
    font-family: var(--rem-font);
    font-weight: 400;
}

.post .posttitle a:hover {
    color: var(--rem-red);
}

.post .date,
.post .postmetadata {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    color: #999;
}

.post .postmetadata a {
    color: var(--rem-red);
}

/* ─── News / Portal Sections ─────────────────────────────────────── */
.news-home-stamp {
    font-family: var(--rem-font);
    font-size: 42px;
    font-weight: 400;
    font-style: italic;
    color: var(--rem-red);
    opacity: 0.25;
    letter-spacing: -1px;
}

.portal-lead {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* ─── Window Panels (Chat) ───────────────────────────────────────── */
.window-panel {
    border: 1.5px solid var(--rem-red) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(255,0,0,.1) !important;
    border-radius: 2px;
}

.window-title {
    background: #fff0f0 !important;
    border-bottom: 1.5px solid var(--rem-red) !important;
    color: var(--rem-dark-red) !important;
    font-family: var(--rem-font);
    font-style: italic;
}

/* ─── Chat Bubbles ───────────────────────────────────────────────── */
:root {
    --user-bubble: #fff8f8;
    --bubble-stroke: #ff0000;
    --bubble-text: #111111;
}

/* ─── Auth Box ───────────────────────────────────────────────────── */
.guest-entry-card {
    border: 1px solid #ffcccc;
    background: #fff8f8;
    border-radius: 2px;
}

.guest-entry-title {
    color: var(--rem-red);
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
}

/* ─── Pagination / Alerts ────────────────────────────────────────── */
.portal-alert {
    border: 1px solid #ffaaaa;
    background: #fff0f0;
    color: var(--rem-dark-red);
    font-family: var(--rem-font);
    border-radius: 2px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.portal-alert.error {
    border-color: var(--rem-red);
    background: #ffe8e8;
    color: #900;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.portal-footer-classic {
    border-top: 1px solid #ffcccc;
    padding: 12px 18px;
    text-align: center;
    background: #ffffff;
}

.portal-footer-classic p,
.portal-footer-classic a {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #bbb;
}

.portal-footer-classic a:hover {
    color: var(--rem-red);
    text-decoration: underline;
}

/* ─── Chat Page ──────────────────────────────────────────────────── */
body[data-page="chat"] {
    background: #ffffff !important;
}

/* Admin bar at top of chat */
#wp-admin-bar,
.chat-admin-bar {
    background: #ffffff !important;
    border-bottom: 2px solid #ff0000 !important;
    box-shadow: none !important;
}

#wp-admin-bar .padder,
.chat-admin-bar .padder {
    background: #ffffff !important;
}

#admin-bar-logo {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 16px !important;
    color: var(--rem-red) !important;
    text-decoration: none !important;
}

#admin-bar-logo:hover {
    text-decoration: underline !important;
}

.chat-admin-bar .main-nav a,
#wp-admin-bar .main-nav a {
    color: #111 !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.chat-admin-bar .main-nav a:hover,
#wp-admin-bar .main-nav a:hover {
    color: var(--rem-red) !important;
}

/* Main scene background */
.app-wrap,
.main-stage {
    background: #ffffff !important;
}

.main-stage {
    padding-left: 90px !important;
}

/* Stage / 2D scene — keep scene visible, just clean the chrome */
#chatStage,
.chat-scene {
    border: 1.5px solid #ffcccc !important;
    box-shadow: 0 4px 24px rgba(255,0,0,.08) !important;
}

/* Room badge */
#roomBadge,
.room-badge {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #ffaaaa !important;
    color: var(--rem-red) !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    box-shadow: none !important;
}

/* Bottom chat bar */
.bottom-bar {
    background: #ffffff !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Chat input */
.chat-line {
    background: #ffffff !important;
    border: 1px solid #ffaaaa !important;
    color: #111 !important;
    font-family: var(--rem-font) !important;
    font-size: 13px !important;
    border-radius: 2px !important;
}

.chat-line:focus {
    border-color: var(--rem-red) !important;
    outline: none !important;
}

/* Send button */
.send-btn {
    background: #ffffff !important;
    border: 1.5px solid var(--rem-red) !important;
    border-radius: 999px !important;
    color: var(--rem-red) !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    box-shadow: none !important;
}

.send-btn:hover {
    background: var(--rem-red) !important;
    color: #ffffff !important;
}

.send-btn.secondary-btn {
    border-color: #ffaaaa !important;
    color: #aaa !important;
}

.send-btn.secondary-btn:hover {
    background: #ffaaaa !important;
    color: #fff !important;
    border-color: #ffaaaa !important;
}

/* ─── Floating Toolbar — Remilia Redesign ─────────────────────────── */
#toolbar,
.floating-sidebar {
    background: #fff8f8 !important;
    border: 2px solid #ffb3b3 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 24px rgba(255,0,0,.13), inset 0 1px 0 #fff !important;
    width: 68px !important;
    min-width: 68px !important;
    overflow: visible !important;
}

.toolbar-handle {
    background: linear-gradient(180deg, #ffe0e0 0%, #ffcccc 100%) !important;
    color: #cc4444 !important;
    border-bottom: 2px solid #ffb3b3 !important;
    border-radius: 8px 8px 0 0 !important;
    cursor: move !important;
    text-align: center !important;
    padding: 5px 2px 4px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    user-select: none !important;
}

.toolbar-list {
    margin: 0 !important;
    padding: 4px 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-items: center !important;
    list-style: none !important;
    border-bottom: none !important;
}

.toolbar-list li {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.toolbar-list::after {
    display: none !important;
}

.side-btn {
    background: #ffffff !important;
    color: #cc3333 !important;
    border: 1.5px solid #ffcccc !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-family: var(--rem-font) !important;
    font-weight: 700 !important;
    transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s !important;
    cursor: pointer !important;
    width: 56px !important;
    height: 54px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    position: relative !important;
    box-shadow: 0 1px 4px rgba(255,0,0,.06) !important;
}

.side-btn:hover,
.side-btn.active {
    background: #fff0f0 !important;
    color: var(--rem-red) !important;
    border-color: #ff8888 !important;
    box-shadow: 0 2px 10px rgba(255,0,0,.16) !important;
}

.side-icon {
    display: block !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.side-icon-text {
    font-family: var(--rem-font) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    color: inherit !important;
}

.side-label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    font-family: var(--rem-font) !important;
    color: inherit !important;
    line-height: 1 !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 52px !important;
    text-overflow: ellipsis !important;
}

/* Side badge (unread DM count) */
.side-badge {
    background: var(--rem-red) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    text-align: center !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}

/* Window panels (chat history, rooms, profile…) */
.window-panel,
.info-panel {
    background: #ffffff !important;
    border: 1.5px solid var(--rem-red) !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 20px rgba(255,0,0,.10) !important;
}

.window-title,
.history-title {
    background: #fff0f0 !important;
    border-bottom: 1.5px solid var(--rem-red) !important;
    color: var(--rem-dark-red) !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.window-close {
    color: var(--rem-red) !important;
    cursor: pointer !important;
    float: right !important;
    font-style: normal !important;
    opacity: 0.6 !important;
}

.window-close:hover {
    opacity: 1 !important;
}

/* Chat history panel */
#chatHistoryPanel .history-body,
#historyBody,
.history-body,
.chatlogcontent {
    background: #ffffff !important;
    font-family: var(--rem-font) !important;
    font-size: 15px !important;
}

/* Override style.css message text (11px !important at line 14475) */
body.theme-anime[data-page="chat"] .history-message .message-head,
body.theme-anime[data-page="chat"] .history-message .message-text,
body.theme-anime[data-page="chat"] .history-message .history-notice-text {
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* Override style.css history-body font-size (12px at line 12327) */
body.theme-anime[data-page="chat"] .history-body {
    font-family: var(--rem-font) !important;
    font-size: 15px !important;
}

#historyBody p,
#chatHistoryPanel .history-body p,
.history-body p {
    font-family: var(--rem-font) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#historyBody p *,
#chatHistoryPanel .history-body p * {
    font-family: var(--rem-font) !important;
}

#historyBody .username,
#chatHistoryPanel .history-body .username,
.history-body .username,
body.theme-anime[data-page="chat"] .history-message .message-head .username {
    font-family: var(--rem-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body[data-page="chat"] .chat-bubble {
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

#historyBody .status,
#historyBody .roomjoin,
#historyBody .roomleave,
#historyBody .namechange,
.history-body .status,
.history-body .roomjoin,
.history-body .roomleave,
.history-body .namechange {
    font-family: var(--rem-font) !important;
    font-size: 13px !important;
}

.history-footer {
    background: #fffafa !important;
    border-top: 1px solid #ffe0e0 !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    padding: 5px 10px !important;
}

.history-footer a,
.text-link {
    color: var(--rem-red) !important;
    font-family: var(--rem-font-sans) !important;
}

/* User corner card (top right) */
.user-corner {
    background: rgba(255,255,255,0.97) !important;
    border: 1.5px solid rgba(200,0,0,0.2) !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 16px rgba(180,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.06) !important;
    padding: 2px !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.user-corner:hover {
    border-color: rgba(200,0,0,0.35) !important;
    box-shadow:
        0 6px 24px rgba(180,0,0,0.12),
        0 2px 6px rgba(0,0,0,0.08) !important;
}

.me-card {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    gap: 12px !important;
}

.me-card img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid var(--rem-red) !important;
    box-shadow: 0 0 8px rgba(200,0,0,0.1) !important;
}

.me-name {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 18px !important;
    color: #1a1a1a !important;
}

.me-meta {
    font-family: var(--rem-font-sans) !important;
    font-size: 12px !important;
    color: var(--rem-red) !important;
    letter-spacing: 0.06em !important;
    opacity: 0.7 !important;
}

.me-meta-sep {
    color: rgba(200,0,0,0.3) !important;
    margin: 0 4px !important;
}

/* Simple list (rooms, online users…) */
.simple-list,
.rooms-list,
.classic-room-list,
.classic-online-list {
    background: #ffffff !important;
}

.classic-rooms-body {
    background: #ffffff !important;
}

.online-section-header {
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #b89 !important;
    padding: 6px 10px 3px !important;
    background: #fff8f8 !important;
    border-top: 1px solid #f5d8d8 !important;
    border-bottom: 1px solid #f5d8d8 !important;
    margin: 0 !important;
    display: block !important;
}

.online-section-header:first-child {
    border-top: none !important;
}

.classic-online-room {
    font-size: 10px !important;
    color: #999 !important;
    font-style: italic !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.classic-room-info {
    background: #fffafa !important;
    border-top: 1px solid #ffe0e0 !important;
    font-family: var(--rem-font) !important;
    font-size: 12px !important;
    font-style: italic !important;
    padding: 8px 10px !important;
    color: #555 !important;
}

/* Panel body */
.panel-body {
    background: #ffffff !important;
}

.panel-label {
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* DM panel */
/* ─── DM Side Panel (chat page integrated) ───────────────────────── */
#dmsPanel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 400px !important;
    max-width: calc(100vw - 74px) !important;
    height: 100vh !important;
    z-index: 1500 !important;
    background: #fff !important;
    border-left: 1.5px solid rgba(200, 0, 60, 0.18) !important;
    box-shadow: -6px 0 32px rgba(200, 0, 60, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1) !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

#dmsPanel:not(.hidden) {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.dm-side-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px 10px !important;
    background: linear-gradient(90deg, #fff0f5 0%, #fff 100%) !important;
    border-bottom: 1.5px solid #ffe0e0 !important;
    flex-shrink: 0 !important;
}

.dm-side-title {
    font-family: var(--rem-font, 'Nunito'), sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    color: var(--rem-red, #c8003c) !important;
    letter-spacing: 0.02em !important;
}

.dm-side-close {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #aaa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transition: color 0.15s, background 0.15s !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.dm-side-close:hover {
    color: var(--rem-red, #c8003c) !important;
    background: #fff0f0 !important;
}

#dmsPanel .dm-panel-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
}

#dmsPanel .dm-sidebar {
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid #ffe0e0 !important;
    background: #fffafa !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

#dmsPanel .dm-thread-shell {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: none !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#dmsPanel .dm-thread-head {
    padding: 8px 10px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

#dmsPanel .dm-message-list {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
}

#dmsPanel .dm-composer {
    flex-shrink: 0 !important;
    padding: 8px !important;
    border-top: 1px solid #ffe0e0 !important;
    gap: 6px !important;
}

#dmsPanel .dm-search-results,
#dmsPanel .dm-conversation-list {
    max-height: 180px !important;
}

/* Dim backdrop when DM panel is open */
#dmSidePanelBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.18);
    z-index: 1499;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s;
}

#dmSidePanelBackdrop.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* DM side panel button overrides */
#dmsPanel .green-btn {
    background: var(--rem-red, #c8003c) !important;
    border-color: var(--rem-red, #c8003c) !important;
    color: #fff !important;
    font-family: var(--rem-font, 'Nunito'), sans-serif !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

#dmsPanel .green-btn:hover {
    background: #a80030 !important;
    border-color: #a80030 !important;
}

#dmsPanel .text-input,
#dmsPanel .textarea-input {
    border: 1px solid #ffc0c0 !important;
    border-radius: 6px !important;
    font-family: var(--rem-font, 'Nunito'), sans-serif !important;
}

#dmsPanel .text-input:focus,
#dmsPanel .textarea-input:focus {
    border-color: var(--rem-red, #c8003c) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(200,0,60,0.1) !important;
}

    background: #fff0f0 !important;
    border-color: #ff8888 !important;
    box-shadow: 0 2px 10px rgba(255,0,0,.18) !important;
}



.dm-section-title {
    font-family: var(--rem-font-sans) !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--rem-red) !important;
    border-bottom: 1px solid #ffe0e0 !important;
    padding: 6px 10px 4px !important;
}

.dm-sidebar {
    background: #fffafa !important;
    border-right: 1px solid #ffe0e0 !important;
}

.dm-thread-head {
    background: #fff0f0 !important;
    border-bottom: 1px solid #ffe0e0 !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    padding: 6px 10px !important;
}

.dm-message-list {
    background: #ffffff !important;
}

/* ── DM chat layout: fixed viewport height with scrollable message area ── */
body[data-page="dm"] .portal-card.dm-page-grid {
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    overflow: hidden !important;
}

body[data-page="dm"] .dm-page-sidebar {
    overflow-y: auto !important;
    min-height: 0 !important;
}

body[data-page="dm"] .dm-page-thread {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body[data-page="dm"] .dm-thread-stack {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body[data-page="dm"] #portalDmMessageList {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body[data-page="dm"] .dm-page-composer {
    flex-shrink: 0 !important;
}

body[data-page="dm"] .dm-page-composer textarea {
    rows: 2 !important;
    max-height: 80px !important;
    resize: none !important;
}

/* Scrollbar styling for DM */
body[data-page="dm"] #portalDmMessageList::-webkit-scrollbar,
body[data-page="dm"] .dm-page-sidebar::-webkit-scrollbar {
    width: 6px;
}
body[data-page="dm"] #portalDmMessageList::-webkit-scrollbar-track,
body[data-page="dm"] .dm-page-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
body[data-page="dm"] #portalDmMessageList::-webkit-scrollbar-thumb,
body[data-page="dm"] .dm-page-sidebar::-webkit-scrollbar-thumb {
    background: rgba(180, 60, 60, 0.25);
    border-radius: 3px;
}
body[data-page="dm"] #portalDmMessageList::-webkit-scrollbar-thumb:hover,
body[data-page="dm"] .dm-page-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 60, 60, 0.45);
}
/* Firefox scrollbar */
body[data-page="dm"] #portalDmMessageList,
body[data-page="dm"] .dm-page-sidebar {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(180, 60, 60, 0.25) transparent !important;
}

.system-line {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 12px !important;
    color: #ccc !important;
    text-align: center !important;
    padding: 10px !important;
}

/* Profile panel */
.legacy-profile-form h4 {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 13px !important;
    color: var(--rem-red) !important;
    border-bottom: 1px solid #ffe0e0 !important;
    padding-bottom: 4px !important;
    margin-bottom: 8px !important;
}

.legacy-color-btn {
    border: 1.5px solid #ffaaaa !important;
    border-radius: 999px !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    font-size: 9px !important;
    font-family: var(--rem-font-sans) !important;
    color: #fff !important;
}

.legacy-color-btn:hover {
    border-color: var(--rem-red) !important;
}

/* Resize handles */
.resize-handle,
.panel-resize-handle {
    background: #ffeeee !important;
    opacity: 0.6 !important;
}

.resize-handle:hover {
    opacity: 1 !important;
    background: #ffcccc !important;
}

/* Status / mini-status lines */
.status-line,
.mini-status {
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: #aaa !important;
}

/* Video control bar */
.video-bottom-control {
    background: #ffffff !important;
    border: 1.5px solid #ffcccc !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 12px rgba(255,0,0,.08) !important;
}

.video-bottom-drag-handle {
    background: #fff0f0 !important;
    border-bottom: 1px solid #ffe0e0 !important;
}

.video-bottom-title {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 13px !important;
    color: #111 !important;
}

.video-bottom-state {
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    color: #aaa !important;
    letter-spacing: 0.06em !important;
}

.video-pill-btn {
    background: #ffffff !important;
    border: 1px solid #ffaaaa !important;
    border-radius: 999px !important;
    color: var(--rem-red) !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 10px !important;
    cursor: pointer !important;
    padding: 3px 10px !important;
    transition: background 0.15s, color 0.15s !important;
}

.video-pill-btn:hover {
    background: var(--rem-red) !important;
    color: #fff !important;
}

/* Video tap-to-unmute overlay */
.video-tap-unmute-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

.video-tap-unmute-overlay .video-tap-unmute-btn {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a2e1a 100%) !important;
    color: #4eff4e !important;
    border: 1px solid #4eff4e !important;
    border-radius: 4px !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    text-shadow: 0 0 8px rgba(78,255,78,0.6) !important;
    box-shadow: 0 0 20px rgba(78,255,78,0.3), 0 0 60px rgba(78,255,78,0.1) !important;
    cursor: pointer !important;
    animation: remilia-unmute-pulse 2s ease-in-out infinite !important;
}

.video-tap-unmute-overlay .video-tap-unmute-btn:hover {
    background: linear-gradient(135deg, #1a2e1a 0%, #2a4e2a 100%) !important;
    box-shadow: 0 0 30px rgba(78,255,78,0.6), 0 0 80px rgba(78,255,78,0.3) !important;
}

@keyframes remilia-unmute-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(78,255,78,0.3), 0 0 60px rgba(78,255,78,0.1); }
    50% { box-shadow: 0 0 30px rgba(78,255,78,0.5), 0 0 80px rgba(78,255,78,0.2); }
}

.native-video-error-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.72);
    pointer-events: none;
}

.native-video-error-box {
    text-align: center;
    padding: 20px 28px;
    background: rgba(20,10,10,0.9);
    border: 1px solid rgba(255,100,100,0.3);
    border-radius: 10px;
    max-width: 300px;
}

.native-video-error-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.native-video-error-msg {
    color: #f88;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
}

.native-video-error-sub {
    color: #aaa;
    font-size: 11px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   ROOM WELCOME BAR
   ═══════════════════════════════════════════════════════════════ */

.room-meta-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    pointer-events: none;
    max-width: 600px;
    width: 90%;
}

.room-welcome-bar {
    display: none;
    background: rgba(20, 10, 30, 0.88);
    border: 1px solid rgba(220, 180, 255, 0.4);
    border-radius: 8px;
    color: #e8d8ff;
    font-size: 13px;
    padding: 8px 16px;
    text-align: center;
    transition: opacity 0.6s ease;
    box-shadow: 0 2px 12px rgba(160, 100, 220, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO CONTROLLER — Metallic Silver / Pink Remilia restyle
   Overrides green anime theme from style.css
   ═══════════════════════════════════════════════════════════════ */
/* Main container — metallic silver/pink */
body.theme-anime[data-page="chat"] #videoBottomControl {
    background: linear-gradient(135deg,
        #3a2a3e 0%,
        #4a3550 25%,
        #5c4465 50%,
        #4a3550 75%,
        #3a2a3e 100%) !important;
    border: 1px solid rgba(220,180,200,0.45) !important;
    box-shadow:
        0 0 25px rgba(255,182,193,0.2),
        0 4px 16px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(255,182,193,0.1) !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-main {
    border-color: rgba(192,192,220,0.25) !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
}

/* Background image — replace Yui with new character */
body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-main::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(
            135deg,
            rgba(58,42,62,0.88) 0%,
            rgba(74,53,80,0.78) 30%,
            rgba(92,68,101,0.65) 55%,
            rgba(74,53,80,0.82) 100%
        ),
        url("/images/video-controller-bg.png") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, right -10px center !important;
    background-size: cover, auto 120% !important;
    opacity: 1 !important;
}

/* Title — metallic silver */
body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-title {
    color: #e0e0ee !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    text-shadow: 0 0 8px rgba(192,192,220,0.3) !important;
}

/* State text */
body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-state {
    color: rgba(255,182,193,0.85) !important;
    font-family: var(--rem-font-sans) !important;
}

/* Equalizer bars — silver/pink instead of green */
body.theme-anime[data-page="chat"] #videoBottomControl .video-control-line {
    background: linear-gradient(to top, #c0c0dc, #ffb6c1) !important;
    animation: animechatVideoEqualizer 1s ease-in-out infinite;
}

/* PFP container */
body.theme-anime[data-page="chat"] #videoBottomControl .video-control-pfp {
    background: rgba(192,192,220,0.15) !important;
    border: 1px solid rgba(192,192,220,0.2) !important;
}

/* Pill buttons — metallic silver outline with pink hover */
body.theme-anime[data-page="chat"] #videoBottomControl .video-pill-btn {
    color: #d0d0e8 !important;
    border: 1px solid rgba(192,192,220,0.35) !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(4px) !important;
    font-family: var(--rem-font-sans) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-pill-btn:hover:not(:disabled) {
    color: #ffb6c1 !important;
    border-color: rgba(255,182,193,0.6) !important;
    background: rgba(255,182,193,0.12) !important;
    box-shadow: 0 0 12px rgba(255,182,193,0.2) !important;
    transform: translateY(-1px);
}

/* Primary pill — pink fill */
body.theme-anime[data-page="chat"] #videoBottomControl .video-pill-primary {
    background: linear-gradient(135deg, #ffb6c1 0%, #ff8fa3 100%) !important;
    border-color: #ffb6c1 !important;
    color: #1a1a2e !important;
    font-weight: 700 !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-pill-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffc8d0 0%, #ffb6c1 100%) !important;
    border-color: #ffc8d0 !important;
    color: #1a1a2e !important;
    box-shadow: 0 0 16px rgba(255,182,193,0.4) !important;
}

/* Icon buttons — silver with pink hover */
body.theme-anime[data-page="chat"] #videoBottomControl .video-icon-btn {
    color: #c0c0dc !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-icon-btn:hover:not(:disabled) {
    color: #ffb6c1 !important;
    text-shadow: 0 0 8px rgba(255,182,193,0.4) !important;
}

/* Controls row text */
body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-controls-row {
    color: #c0c0dc !important;
}

/* Progress bar — pink accent */
body.theme-anime[data-page="chat"] #videoBottomControl .video-progress {
    accent-color: #ffb6c1 !important;
}

/* Time label */
body.theme-anime[data-page="chat"] #videoBottomControl .video-time-label {
    color: rgba(192,192,220,0.85) !important;
}

/* Volume panel */
body.theme-anime[data-page="chat"] #videoBottomControl #videoVolumePanel {
    background: rgba(58,42,62,0.95) !important;
    border: 1px solid rgba(255,182,193,0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 12px rgba(255,182,193,0.1) !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-volume-label,
body.theme-anime[data-page="chat"] #videoBottomControl .video-volume-value {
    color: #c0c0dc !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl .video-volume-slider {
    accent-color: #ffb6c1 !important;
}

/* Playlist popup */
body.theme-anime[data-page="chat"] #videoBottomControl .video-playlist-popup {
    background: rgba(58,42,62,0.95) !important;
    border: 1px solid rgba(255,182,193,0.3) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 12px rgba(255,182,193,0.1) !important;
}

/* Generic button override */
body.theme-anime[data-page="chat"] #videoBottomControl button,
body.theme-anime[data-page="chat"] #videoBottomControl .green-btn {
    background: rgba(255,182,193,0.1) !important;
    border: 1px solid rgba(255,182,193,0.3) !important;
    color: #f0dce4 !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.2s ease !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl button:hover,
body.theme-anime[data-page="chat"] #videoBottomControl .green-btn:hover {
    background: rgba(255,182,193,0.25) !important;
    border-color: rgba(255,182,193,0.55) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(255,182,193,0.25) !important;
    transform: translateY(-1px) !important;
}

body.theme-anime[data-page="chat"] #videoBottomControl button:active {
    transform: scale(0.97) !important;
}

/* Drag handle — metallic pink strip */
body.theme-anime[data-page="chat"] #videoBottomControl .video-bottom-drag-handle {
    background: linear-gradient(90deg, rgba(220,180,200,0.12) 0%, rgba(255,182,193,0.2) 50%, rgba(220,180,200,0.12) 100%) !important;
    border-bottom: 1px solid rgba(255,182,193,0.2) !important;
}

/* Wrapper elements — clean */
body.theme-anime[data-page="chat"] .room-video-player,
body.theme-anime[data-page="chat"] .room-video-embed,
body.theme-anime[data-page="chat"] .youtube-embed-host {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Queue bar styling */
body.theme-anime[data-page="chat"] .video-queue-bar {
    background: rgba(58,42,62,0.95) !important;
    border: 1px solid rgba(255,182,193,0.25) !important;
    backdrop-filter: blur(8px) !important;
}

body.theme-anime[data-page="chat"] .video-queue-bar .queue-item {
    border-bottom: 1px solid rgba(255,182,193,0.1) !important;
}

body.theme-anime[data-page="chat"] .video-queue-bar .queue-item:hover {
    background: rgba(255,182,193,0.1) !important;
}

/* ─── Experience Video Queue Bar (bottom-left playlist) ─── */
body.theme-anime[data-page="chat"] #experienceVideoQueueBar,
body.theme-anime[data-page="chat"] .experience-video-queue {
    background: linear-gradient(160deg, rgba(42,28,50,0.97) 0%, rgba(58,38,72,0.97) 100%) !important;
    border: 1px solid rgba(255,182,193,0.3) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,182,193,0.08) !important;
    font-family: var(--rem-font, 'Segoe UI', sans-serif) !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-head {
    background: linear-gradient(90deg, rgba(255,182,193,0.12) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(255,182,193,0.2) !important;
    padding: 7px 10px !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-head strong {
    color: #ffb6c1 !important;
    font-family: var(--rem-font, 'Segoe UI', sans-serif) !important;
    font-style: italic !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 0 8px rgba(255,182,193,0.4) !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-actions button {
    background: rgba(255,255,255,0.06) !important;
    color: #d0b8d8 !important;
    border: 1px solid rgba(255,182,193,0.25) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-family: var(--rem-font, 'Segoe UI', sans-serif) !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-actions button:hover {
    background: rgba(255,182,193,0.18) !important;
    color: #ffe0ea !important;
    border-color: rgba(255,182,193,0.55) !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,182,193,0.3) transparent !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-list::-webkit-scrollbar {
    width: 4px !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-list::-webkit-scrollbar-track {
    background: transparent !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-list::-webkit-scrollbar-thumb {
    background: rgba(255,182,193,0.35) !important;
    border-radius: 4px !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-item {
    border-bottom: 1px solid rgba(255,182,193,0.1) !important;
    padding: 6px 8px !important;
    transition: background 0.12s !important;
}

body.theme-anime[data-page="chat"] .experience-video-queue-item:hover {
    background: rgba(255,182,193,0.07) !important;
}

body.theme-anime[data-page="chat"] .experience-queue-thumb img {
    border-radius: 5px !important;
    border: 1px solid rgba(255,182,193,0.2) !important;
}

body.theme-anime[data-page="chat"] .experience-queue-title {
    color: #e8ddf0 !important;
    font-size: 12px !important;
    font-family: var(--rem-font, 'Segoe UI', sans-serif) !important;
}

body.theme-anime[data-page="chat"] .experience-queue-by {
    color: rgba(255,182,193,0.65) !important;
    font-size: 11px !important;
}

body.theme-anime[data-page="chat"] .experience-queue-badge {
    border-radius: 4px !important;
    font-size: 10px !important;
    opacity: 0.9 !important;
}

body.theme-anime[data-page="chat"] .experience-video-now-playing {
    background: linear-gradient(90deg, rgba(76,255,140,0.07) 0%, rgba(255,182,193,0.05) 100%) !important;
    border: 1px solid rgba(76,255,140,0.2) !important;
    border-radius: 7px !important;
    margin: 6px 6px 4px !important;
    padding: 7px 8px !important;
}

body.theme-anime[data-page="chat"] .experience-now-playing-label {
    color: #4cff8c !important;
    text-shadow: 0 0 6px rgba(76,255,140,0.5) !important;
    font-family: var(--rem-font, 'Segoe UI', sans-serif) !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* Jump unread button */
.jump-unread-btn {
    background: var(--rem-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 12px !important;
    padding: 5px 16px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(255,0,0,.2) !important;
}

/* Moderator panel */
.moderator-panel-body {
    background: #ffffff !important;
}

.moderator-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Room call panel */
.room-call-panel-body {
    background: #ffffff !important;
    padding: 10px !important;
}

.room-call-summary strong {
    font-family: var(--rem-font) !important;
    font-style: italic !important;
    font-size: 13px !important;
    color: #111 !important;
}

.room-call-meta {
    font-family: var(--rem-font-sans) !important;
    font-size: 11px !important;
    color: #aaa !important;
    margin-top: 4px !important;
}

.room-call-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

/* Rental options in create room form */
.rental-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 6px 0 !important;
}

.rental-option {
    font-family: var(--rem-font) !important;
    font-size: 13px !important;
    color: #333 !important;
    cursor: pointer !important;
}

.rental-option input[type="radio"] {
    accent-color: var(--rem-red) !important;
    margin-right: 6px !important;
}

/* Field overlay (dark vignette on stage) */
.field-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)) !important;
}

#footer {
    color: var(--rem-red) !important;
    border-top: 1px solid #ffcccc;
}

#footer p {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #ffcccc;
}

/* ─── Room / Members / Avatars ───────────────────────────────────── */
.avatar {
    border: 1px solid #ffcccc;
}

img.avatar:hover {
    border-color: var(--rem-red);
}

/* ─── Profile Page ───────────────────────────────────────────────── */
body.theme-anime.portal-page[data-page="profile"] #object-nav {
    background: #fff0f0 !important;
}

body.theme-anime.portal-page[data-page="profile"] #subnav {
    background: #ffffff !important;
    border-bottom: 1px solid #ffcccc !important;
}

body.theme-anime.portal-page[data-page="profile"] #object-nav a span {
    background: var(--rem-red) !important;
}

body.theme-anime.portal-page[data-page="profile"] #object-nav li.current a,
body.theme-anime.portal-page[data-page="profile"] #object-nav li.selected a {
    color: var(--rem-dark-red) !important;
    background: #fff0f0 !important;
    border-bottom: 2px solid var(--rem-red) !important;
}

body.theme-anime.portal-page[data-page="profile"] #activity-stream .activity-header a:first-child {
    color: var(--rem-red) !important;
}

body.theme-anime.portal-page[data-page="profile"] #activity-stream .activity-header a:first-child:hover {
    background: var(--rem-red) !important;
    color: #fff !important;
}

body.theme-anime.portal-page[data-page="profile"] .profile-edit-panel summary::after {
    color: var(--rem-red) !important;
}

/* ─── Reply / Comment Cards ──────────────────────────────────────── */
.reply-card,
.news-comment-card {
    border-left: 2px solid var(--rem-pink);
    background: #fffafa;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.reply-card:hover,
.news-comment-card:hover {
    border-left-color: var(--rem-red);
}

/* ─── Marquee / Ticker (Remilia scrolling text style) ─────────────── */
.portal-ticker,
.portal-marquee {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 12px;
    color: var(--rem-red);
    border-top: 1px solid var(--rem-red);
    border-bottom: 1px solid var(--rem-red);
    padding: 4px 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ─── Mobile Panel ───────────────────────────────────────────────── */
.portal-mobile-topbar {
    background: #ffffff;
    border-bottom: 1px solid #ffcccc;
}

.portal-mobile-brand-lockup .portal-mobile-home-link {
    color: var(--rem-red);
    font-family: var(--rem-font);
    font-style: italic;
}

.portal-mobile-kicker {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bbb;
}

.portal-mobile-action {
    border: 1px solid #ffaaaa;
    border-radius: 999px;
    background: #fff;
    color: var(--rem-red);
    font-size: 11px;
    font-family: var(--rem-font);
    font-style: italic;
    cursor: pointer;
    padding: 4px 12px;
}

.portal-mobile-action:hover {
    background: var(--rem-red);
    color: #fff;
}

.portal-mobile-hero {
    background: #fff0f0;
    border-bottom: 1px solid #ffcccc;
    padding: 14px 18px;
}

.portal-mobile-title {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 20px;
    font-weight: 400;
    color: #111;
    margin: 0 0 4px;
}

.portal-mobile-subtitle {
    font-size: 11px;
    color: #888;
    font-style: italic;
    font-family: var(--rem-font);
}

.portal-mobile-pill {
    display: inline-block;
    border: 1px solid #ffaaaa;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10px;
    color: var(--rem-red);
    background: #fff;
    font-family: var(--rem-font-sans);
    text-decoration: none;
}

.portal-mobile-pill.is-soft {
    border-color: #ddd;
    color: #888;
}

/* ─── Admin bar ──────────────────────────────────────────────────── */
#wp-admin-bar .padder {
    background: rgba(0,0,0,.85) !important;
}

/* ─── Empty states ───────────────────────────────────────────────── */
.portal-empty-state {
    font-family: var(--rem-font);
    font-style: italic;
    color: #ccc;
    padding: 18px;
    text-align: center;
    font-size: 13px;
}

.portal-empty-state.soft {
    color: #ddd;
}

/* ─── Auth Accordion ─────────────────────────────────────────────── */
.auth-accordion > summary {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 12px;
    color: var(--rem-red);
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
}

.auth-accordion > summary::-webkit-details-marker { display: none; }
.auth-accordion > summary::before { content: "→ "; }
details[open].auth-accordion > summary::before { content: "↓ "; }

/* ─── Sidebar User Block ─────────────────────────────────────────── */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 10px;
}

.sidebar-user strong {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 17px;
    color: #111;
}

.sidebar-user div {
    font-size: 11px;
    color: #888;
    font-family: var(--rem-font-sans);
}

/* ─── Top Chatters Grid ──────────────────────────────────────────── */
.top-chatters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.top-chatter-slot img,
.top-chatter-slot span {
    width: 38px;
    height: 38px;
    border: 1px solid #ffcccc;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    transition: border-color 0.15s;
}

.top-chatter-slot:hover img,
.top-chatter-slot:hover span {
    border-color: var(--rem-red);
}

/* ─── Tag Cloud ──────────────────────────────────────────────────── */
.sidebar-tag-cloud a {
    display: inline-block;
    border: 1px solid #ffaaaa;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10px;
    color: var(--rem-red);
    margin: 2px;
    font-family: var(--rem-font-sans);
}

.sidebar-tag-cloud a:hover {
    background: var(--rem-red);
    color: #fff;
    text-decoration: none;
}

/* ─── Logout button ──────────────────────────────────────────────── */
.portal-logout-btn {
    background: #fff !important;
    border-color: rgba(150,150,150,0.25) !important;
    color: #999 !important;
}

.portal-logout-btn:hover {
    background: #f5f5f5 !important;
    border-color: rgba(150,150,150,0.4) !important;
    color: #666 !important;
}

/* ─── Scrollbar (Webkit) ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #ffcccc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rem-red);
}

::-webkit-scrollbar-track {
    background: #fff;
}

/* ─── Selection ──────────────────────────────────────────────────── */
::selection {
    background: var(--rem-red);
    color: #fff;
}

/* ─── Remilia decorative star accents ───────────────────────────── */
.sidebar-title::after {
    content: " ✦";
    font-size: 8px;
    color: var(--rem-red);
    opacity: 0.5;
}

.portal-footer-classic::before {
    content: "✦  ✦  ✦";
    display: block;
    font-size: 9px;
    color: #ffcccc;
    letter-spacing: 6px;
    margin-bottom: 6px;
}

/* ─── Marquee / Ticker Bar ───────────────────────────────────────── */
.rem-ticker-bar {
    background: #fff0f0;
    border: 1px solid #ffcccc;
    border-top-color: #ff0000;
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

.rem-ticker-track {
    display: inline-block;
    animation: rem-marquee 38s linear infinite;
    will-change: transform;
}

.rem-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes rem-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.rem-ticker-item {
    display: inline;
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rem-dark-red);
    padding: 0 28px;
}

.rem-ticker-sep {
    display: inline;
    color: var(--rem-red);
    opacity: 0.4;
    font-size: 9px;
}

/* ─── Decorative heading ornament ───────────────────────────────── */
.portal-page-title::before {
    content: "✦ ";
    color: var(--rem-red);
    opacity: 0.4;
    font-size: 0.6em;
    vertical-align: middle;
}

/* ─── News post card enhancements ───────────────────────────────── */
.news-classic-post {
    border-top: 1px solid #ffe0e0;
    padding-top: 20px;
    margin-bottom: 0;
    position: relative;
}

.news-classic-post + .news-classic-post {
    margin-top: 24px;
}

/* Thin red left accent bar on post hover */
.news-classic-post::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 20px;
    width: 2px;
    height: 0;
    background: var(--rem-red);
    transition: height 0.3s ease;
}

.news-classic-post:hover::before {
    height: calc(100% - 20px);
}

/* Post title styling */
.news-classic-post .posttitle {
    font-family: var(--rem-font);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}

/* ─── Author box refinement (social-platform layout) ────────────── */
/* Override the float-left layout from style.css */
body.theme-anime .author-box,
body.theme-anime.portal-page .author-box,
body.theme-anime.portal-home .author-box {
    float: none !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 0 !important;
}

/* Post content no longer needs float-offset margin */
body.theme-anime .news-post-content,
body.theme-anime.portal-page .news-post-content,
body.theme-anime.portal-home .news-post-content {
    margin-left: 0 !important;
}

.author-box p {
    font-family: var(--rem-font-sans);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

.author-box p a {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    text-decoration: none;
}

.author-box p a:hover {
    color: var(--rem-red);
    text-decoration: underline;
}

/* Social-platform author meta row */
.author-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.author-name {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
    color: #111;
    text-decoration: none;
}

.author-name:hover {
    color: var(--rem-red);
}

.author-sep {
    color: #ddd;
    font-size: 12px;
}

.author-date {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    color: #bbb;
    letter-spacing: 0.02em;
}

/* Date line — move to same row as author via CSS, keep it inline */
.news-post-content .date {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    color: #bbb;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}

/* ─── News readmore accordion ────────────────────────────────────── */
.news-readmore > summary {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 12px;
    color: var(--rem-red);
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
}

.news-readmore > summary::-webkit-details-marker { display: none; }
.news-readmore > summary::before { content: "→ "; }
details[open].news-readmore > summary::before { content: "↓ "; }

/* ─── Section divider ────────────────────────────────────────────── */
.rem-section-divider {
    border: none;
    border-top: 1px solid #ffe0e0;
    margin: 0;
    position: relative;
}

.rem-section-divider::after {
    content: "✦";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 8px;
    font-size: 9px;
    color: #ffcccc;
}

/* ─── Y2K blinking cursor accent ────────────────────────────────── */
@keyframes rem-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.rem-blink {
    animation: rem-blink 1.2s step-end infinite;
}

/* ─── Remilia logo subtitle enhancement ─────────────────────────── */
.portal-tagline {
    font-family: var(--rem-font);
    font-size: 11px;
    font-style: italic;
    color: #aaa;
    margin: 2px 0 0;
    letter-spacing: 0.04em;
}

.portal-tagline::before {
    content: "— ";
    color: var(--rem-red);
    opacity: 0.4;
}

/* ─── News home intro enhancement ───────────────────────────────── */
.news-home-intro {
    border-bottom: 1px solid #ffe0e0;
    padding-bottom: 16px;
    margin-bottom: 20px;
    position: relative;
}

.news-home-intro::after {
    content: "REMILIA CORP";
    position: absolute;
    bottom: -8px;
    right: 0;
    font-family: var(--rem-font-sans);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: #ffcccc;
    background: #fff;
    padding: 0 4px;
}

/* ─── Sidebar login section ──────────────────────────────────────── */
.login-box {
    border: 1px solid #ffe0e0 !important;
    background: #fffafa !important;
    position: relative;
    overflow: hidden;
}

.login-box::before {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    color: #ffcccc;
    pointer-events: none;
}

/* ─── Guestbook / comment form ───────────────────────────────────── */
.classic-comment-form textarea {
    border-top: 2px solid #ffe0e0 !important;
    background: #fffafa !important;
    transition: border-color 0.2s;
}

.classic-comment-form textarea:focus {
    border-top-color: var(--rem-red) !important;
}

/* ─── Portal news older/newer link ──────────────────────────────── */
.news-older-link {
    border-top: 1px solid #ffe0e0;
    padding-top: 14px;
    text-align: center;
}

/* ─── Sparkle cursor CSS particles ──────────────────────────────── */
@keyframes rem-sparkle-fade {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(0.3); }
}

.rem-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 11px;
    color: var(--rem-red);
    animation: rem-sparkle-fade 0.7s ease-out forwards;
    user-select: none;
    line-height: 1;
}

/* ─── Top accent stripe ──────────────────────────────────────────── */
body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff0000 20%, #ff0000 80%, transparent);
    z-index: 1000;
    pointer-events: none;
}

/* ─── Nav active indicator dot ───────────────────────────────────── */
.portal-nav-link.active::before {
    content: "◆ ";
    font-size: 7px;
    color: var(--rem-red);
    vertical-align: middle;
}

/* ─── Partner / sidebar box decorations ─────────────────────────── */
.partner-card {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 13px;
    color: #aaa;
    padding: 6px 0;
    letter-spacing: 0.06em;
}

/* ─── News classic placeholder ───────────────────────────────────── */
.news-classic-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #fffafa,
        #fffafa 8px,
        #fff0f0 8px,
        #fff0f0 16px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.news-classic-placeholder span {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 13px;
    color: #ffaaaa;
    letter-spacing: 0.08em;
}

/* ─── Postmetadata read-more link ────────────────────────────────── */
.read-more-inline a,
.postmetadata .comments a {
    font-family: var(--rem-font);
    font-style: italic;
    color: var(--rem-red);
}

/* ─── Remilia Corp stamp watermark ──────────────────────────────── */
.news-home-stamp {
    font-family: var(--rem-font);
    font-size: 48px;
    font-weight: 400;
    font-style: italic;
    color: var(--rem-red);
    opacity: 0.12;
    letter-spacing: -2px;
    user-select: none;
    pointer-events: none;
}

/* ─── Members page ───────────────────────────────────────────────── */
.member-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #ffe0e0;
    transition: background 0.15s;
}

.member-card:hover {
    background: #fffafa;
}

.member-card h3 {
    font-family: var(--rem-font);
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 2px;
}

.member-card h3 a {
    color: #111;
}

.member-card h3 a:hover {
    color: var(--rem-red);
}

.member-quote {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 11px;
    color: #aaa;
}

.member-active {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #ccc;
    text-transform: uppercase;
    margin-top: 2px;
}

.member-preview-link {
    margin-left: auto;
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 11px;
    color: var(--rem-red);
    white-space: nowrap;
    padding: 3px 12px;
    border: 1px solid #ffaaaa;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.member-preview-link:hover {
    background: var(--rem-red);
    color: #fff;
    text-decoration: none;
}

.pagination-line {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* ─── Activity page ──────────────────────────────────────────────── */
.activity-card,
.activity-item {
    border-bottom: 1px solid #ffe0e0;
    padding: 12px 0;
    position: relative;
}

.activity-meta {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.activity-meta a {
    color: var(--rem-red);
}

/* ─── Profile page ───────────────────────────────────────────────── */
.profile-header-box {
    border-bottom: 1px solid #ffe0e0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

/* Twitter-style inline bio in header */
.profile-bio-inline {
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.55 !important;
    margin: 8px 0 6px !important;
    max-width: 480px !important;
}

.profile-bio-inline p {
    margin: 0 !important;
}

.profile-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    align-items: center !important;
    margin: 6px 0 10px !important;
    font-size: 13px !important;
    color: #888 !important;
}

.profile-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 12px !important;
    color: #777 !important;
}

.profile-meta-item strong {
    color: #333 !important;
}

a.profile-meta-link {
    color: var(--rem-red) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 220px !important;
    white-space: nowrap !important;
}

a.profile-meta-link:hover {
    text-decoration: underline !important;
}

/* Compose bar on own profile feed */
.profile-compose-bar {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 14px !important;
    border: 1.5px solid #ffcccc !important;
    border-radius: 10px !important;
    background: #fff8f8 !important;
    margin-bottom: 16px !important;
}

.profile-compose-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 1.5px solid #ffcccc !important;
}

.profile-compose-input {
    flex: 1 !important;
    min-width: 0 !important;
}

.profile-compose-input [contenteditable] {
    width: 100% !important;
    min-height: 60px !important;
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    color: #222 !important;
    outline: none !important;
    border-bottom: 1px solid #ffe0e0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

.profile-compose-input [contenteditable]:empty::before {
    content: attr(placeholder) !important;
    color: #bbb !important;
}

.profile-compose-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ─── Pinned Friend Requests (notifications) ────────────────────── */
.friend-requests-pinned {
    position: sticky !important;
    top: 60px !important;
    z-index: 40 !important;
    background: #fff0f0 !important;
    border: 2px solid #ffb3b3 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(255,0,0,.12) !important;
}

.friend-requests-pinned-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-family: var(--rem-font) !important;
    font-size: 15px !important;
    font-style: italic !important;
    color: #cc2222 !important;
    border-bottom: 1px solid #ffcccc !important;
    padding-bottom: 8px !important;
}

.friend-requests-pin-icon {
    font-size: 18px !important;
}

.friend-requests-count {
    margin-left: auto !important;
    background: var(--rem-red) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-family: var(--rem-font-sans) !important;
    font-weight: 700 !important;
    padding: 1px 8px !important;
    line-height: 20px !important;
    height: 20px !important;
}

.friend-requests-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.friend-request-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #ffe0e0 !important;
}

.friend-request-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.friend-request-avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #ffcccc !important;
    display: block !important;
    transition: border-color 0.15s !important;
}

.friend-request-avatar:hover img {
    border-color: var(--rem-red) !important;
}

.friend-request-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.friend-request-name {
    display: block !important;
    font-family: var(--rem-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.friend-request-name:hover {
    color: var(--rem-red) !important;
}

.friend-request-handle {
    font-family: var(--rem-font-sans) !important;
    font-size: 12px !important;
    color: #999 !important;
}

.friend-request-actions {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Fix profile avatar alignment with info box */
.profile-showcase-main {
    align-items: flex-start !important;
}
.profile-showcase-avatar .profile-avatar-large {
    transform: none !important;
}

.profile-name {
    font-family: var(--rem-font);
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #111;
}

.profile-role-badge {
    display: inline-block;
    border: 1px solid #ffaaaa;
    border-radius: 999px;
    padding: 1px 10px;
    font-family: var(--rem-font-sans);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rem-red);
    margin-left: 8px;
    vertical-align: middle;
}

/* ─── Shop / Marketplace page ────────────────────────────────────── */
.shop-item-card,
.market-item-card {
    border: 1px solid #ffe0e0;
    background: #fffafa;
    padding: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.shop-item-card:hover,
.market-item-card:hover {
    border-color: var(--rem-red);
    box-shadow: 0 2px 12px rgba(255,0,0,.08);
}

.shop-item-name,
.market-item-name {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 15px;
    color: #111;
}

.shop-item-price,
.market-item-price {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--rem-red);
    margin-top: 4px;
}

/* ─── Notification / DM page ─────────────────────────────────────── */
.notification-card,
.dm-thread-item {
    border-bottom: 1px solid #ffe0e0;
    padding: 10px 0;
    transition: background 0.15s;
}

.notification-card:hover,
.dm-thread-item:hover {
    background: #fffafa;
}

.notification-card.unread,
.dm-thread-item.unread {
    border-left: 2px solid var(--rem-red);
    padding-left: 10px;
}

/* ─── Room directory ─────────────────────────────────────────────── */
.room-card {
    border: 1px solid #ffe0e0;
    background: #ffffff;
    padding: 12px 16px;
    transition: border-color 0.2s, background 0.2s;
}

.room-card:hover {
    border-color: var(--rem-red);
    background: #fffafa;
}

.room-name {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 16px;
    color: #111;
}

.room-online-count {
    font-family: var(--rem-font-sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rem-red);
}

/* ─── Directory header row ───────────────────────────────────────── */
.directory-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffe0e0;
}

/* ─── Portal card wrapper ────────────────────────────────────────── */
.portal-card {
    background: #fff;
    border: 1px solid #ffe0e0;
    padding: 18px;
}

/* ─── Settings page ──────────────────────────────────────────────── */
.settings-section-title {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 16px;
    color: var(--rem-red);
    border-bottom: 1px solid #ffe0e0;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* ─── Groups page ────────────────────────────────────────────────── */
.group-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #ffe0e0;
}

.group-name {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 15px;
    color: #111;
}

.group-name a {
    color: #111;
    text-decoration: none;
}

.group-name a:hover {
    color: var(--rem-red);
}

/* ─── Forums (to be removed later, styled for now) ───────────────── */
.forum-category-title {
    font-family: var(--rem-font);
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #111;
    border-bottom: 1px solid #ffe0e0;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.forum-topic-row {
    padding: 8px 0;
    border-bottom: 1px solid #ffe0e0;
    font-size: 13px;
}

.forum-topic-row a {
    font-family: var(--rem-font);
    font-style: italic;
    color: #111;
}

.forum-topic-row a:hover {
    color: var(--rem-red);
}

/* ─── Inline-search form ─────────────────────────────────────────── */
.inline-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ─── Mini chat embed ────────────────────────────────────────────── */
body[data-page="mini"] {
    background: #fff;
}

/* ─── Help / Rules page ──────────────────────────────────────────── */
.help-section h2 {
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    color: var(--rem-red);
    border-bottom: 1px solid #ffe0e0;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.help-section p,
.help-section li {
    font-family: var(--rem-font);
    font-size: 13px;
    line-height: 1.7;
    color: #333;
}

/* ─── Bug report page ────────────────────────────────────────────── */
.bugreport-form label {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    display: block;
    margin-bottom: 4px;
}

/* ─── Social Feed ────────────────────────────────────────────────── */
.social-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.social-empty {
    padding: 24px;
    text-align: center;
    color: #999;
    font-family: var(--rem-font);
    font-style: italic;
}

.social-compose {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 0 16px;
    border-bottom: 1px solid #ffe0e0;
    margin-bottom: 12px;
}

.social-compose-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ffcccc;
    flex-shrink: 0;
}

.social-compose-input {
    flex: 1;
    min-width: 0;
}

.social-compose-input .textarea-input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}

.social-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.social-char-counter {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    color: #aaa;
}

.social-post-card {
    background: #ffffff;
    border: 1px solid #ffe0e0;
    border-radius: 2px;
    padding: 14px 16px 10px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
    display: block;
    overflow: hidden;
}

.social-post-card:hover {
    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.08);
    border-color: #ffaaaa;
}

.social-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.social-post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ffcccc;
    flex-shrink: 0;
}

.social-post-author {
    flex: 1;
    min-width: 0;
}

.social-post-author-name {
    font-family: var(--rem-font);
    font-weight: 700;
    font-size: 14px;
    color: #111;
    text-decoration: none;
}
a.social-post-author-name:hover {
    text-decoration: underline;
}
a.social-post-time {
    color: #aaa;
    text-decoration: none;
}
a.social-post-time:hover {
    text-decoration: underline;
}
.social-post-header a {
    text-decoration: none;
    color: inherit;
}

.reply-image-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.social-post-author-handle {
    font-family: var(--rem-font-sans);
    font-size: 12px;
    color: #888;
}

.social-post-time {
    font-family: var(--rem-font-sans);
    font-size: 11px;
    color: #aaa;
}

.social-post-body {
    font-family: var(--rem-font);
    font-size: 14px;
    line-height: 1.6;
    color: #222;
    word-break: break-word;
    margin-bottom: 8px;
    overflow: hidden;
}

.social-post-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    margin: 8px 0;
}

.social-post-image {
    max-width: 100%;
    border-radius: 2px;
    border: 1px solid #ffe0e0;
    margin-bottom: 8px;
    display: block;
}

.social-post-actions {
    display: flex !important;
    gap: 2px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    clear: both !important;
    border-top: 1px solid #f0e4e4 !important;
    padding-top: 8px !important;
}

.social-action-btn {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #aaa !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    min-width: auto !important;
    min-height: auto !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Defeat the portal-page button nuclear rule */
body.theme-anime.portal-page .social-action-btn,
body.theme-anime.portal-home .social-action-btn {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-family: var(--rem-font-sans) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #aaa !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

.social-action-btn:hover,
body.theme-anime.portal-page .social-action-btn:hover,
body.theme-anime.portal-home .social-action-btn:hover {
    background: #fdf0f0 !important;
    background-image: none !important;
    color: var(--rem-red) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.social-action-btn.liked {
    color: var(--rem-red) !important;
    font-weight: 600 !important;
}

.social-action-btn.reposted {
    color: #22a84a !important;
    font-weight: 600 !important;
}

.social-action-btn.delete-btn:hover {
    background: #ffe8e8 !important;
    color: #cc0000 !important;
}

.social-replies-container {
    margin-top: 8px;
    margin-left: 20px;
    padding-left: 14px;
    border-left: 2px solid #ffe0e0;
}

.social-reply-card {
    padding: 10px 0 6px;
    border-bottom: 1px solid #f8f0f0;
}

.social-reply-card:last-of-type {
    border-bottom: none;
}

.social-reply-form {
    padding: 10px 0 4px;
}

.summernote-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-family: var(--rem-font-sans);
    font-size: 12px;
    color: #666;
}

.summernote-color-row input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}

.social-repost-badge {
    font-family: var(--rem-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #22a84a;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    padding: 4px 8px 4px 46px;
    display: block;
    text-decoration: none;
}
.social-repost-badge:hover {
    text-decoration: underline;
}

.social-cited-card {
    border: 1px solid #ffe0e0;
    border-radius: 2px;
    padding: 8px 12px;
    background: #fffafa;
    margin: 8px 0;
    font-size: 13px;
}

.social-cited-card .social-post-author-name {
    font-size: 13px;
}

.social-cited-card .social-post-body {
    font-size: 13px;
    margin-bottom: 0;
    color: #555;
}

.social-reply-form {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ffe0e0;
}

.social-reply-form .textarea-input {
    width: 100%;
    box-sizing: border-box;
    resize: none;
}

.social-load-more {
    text-align: center;
    padding: 12px 0 4px;
}

/* Social modal */
.social-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.social-modal {
    background: #fff;
    border: 1.5px solid var(--rem-red);
    border-radius: 2px;
    padding: 20px 24px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(255,0,0,.15);
}

.social-modal .textarea-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
}

/* Clickable post body */
.social-post-body-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.social-post-body-link:hover .social-post-body {
    background: #fffafa;
    border-radius: 6px;
}

/* Profile feed share button */
.profile-feed-share {
    margin-left: auto !important;
    opacity: 0.5 !important;
    font-size: 14px !important;
    transition: opacity 0.15s !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}
.profile-feed-share:hover {
    opacity: 1 !important;
}

/* Time link inside post header */
a.profile-feed-time-link {
    color: #aaa !important;
    text-decoration: none !important;
    font-size: 13px !important;
}
a.profile-feed-time-link:hover {
    color: var(--rem-red) !important;
    text-decoration: underline !important;
}

/* Replying-to indicator */
.social-replying-to {
    font-family: var(--rem-font-sans);
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    padding-left: 46px;
}
.social-replying-to a {
    color: var(--rem-red);
    text-decoration: none;
}
.social-replying-to a:hover {
    text-decoration: underline;
}

/* Thread chain (parent posts above focused) */
.social-thread-chain .social-post-card {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: 0;
    position: relative;
}
.social-thread-chain .social-post-card::after {
    content: '';
    position: absolute;
    left: 34px;
    bottom: 0;
    width: 2px;
    height: 14px;
    background: #ffcccc;
}

/* Focused post (highlighted) */
.social-focused-post .social-post-card {
    border-color: var(--rem-red);
    border-width: 1.5px;
    box-shadow: 0 2px 12px rgba(255, 0, 0, 0.1);
}

/* Thread replies */
.social-thread-replies {
    border-left: 2px solid #ffe0e0;
    margin-left: 33px;
    padding-left: 16px;
}
.social-thread-replies .social-post-card {
    border-left: none;
    border-radius: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #f8f0f0;
}
.social-thread-replies .social-post-card:last-child {
    border-bottom: 1px solid #ffe0e0;
}

/* Make the whole card cursor pointer for click-through */
.social-post-card {
    cursor: pointer;
}
.social-post-card a,
.social-post-card button {
    cursor: pointer;
}

/* ─── New posts banner ───────────────────────────────────────────── */
.new-posts-banner {
    text-align: center;
    padding: 10px 16px;
    background: #fff8f8;
    border: 1px solid rgba(200,0,0,0.15);
    border-radius: 10px;
    color: var(--rem-red);
    font-family: var(--rem-font);
    font-style: italic;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.15s;
    display: none;
}
.new-posts-banner:hover {
    background: #fff0f0;
}

/* ─── Notification badge ─────────────────────────────────────────── */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rem-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--rem-font-sans);
    font-style: normal;
    margin-left: 6px;
}

.notification-bell-btn {
    position: relative;
}

/* Social activity rows on activity page */
.social-activity-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f5e8e8 !important;
}

.social-activity-row:last-child {
    border-bottom: none !important;
}

.social-activity-avatar {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

.social-activity-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(200,0,0,0.15);
    transition: border-color 0.15s;
}

.social-activity-avatar:hover .social-activity-avatar-img {
    border-color: var(--rem-red);
}

.social-activity-body {
    flex: 1;
    min-width: 0;
}

.social-activity-link {
    text-decoration: none !important;
    color: #555 !important;
    font-family: var(--rem-font-sans);
    font-size: 13px;
    line-height: 1.5;
    display: block;
    transition: color 0.15s;
}

.social-activity-link:hover {
    color: var(--rem-red) !important;
}

.social-activity-name {
    font-weight: 700;
    color: #1a1a1a;
    font-family: var(--rem-font);
    font-style: italic;
}

.social-activity-excerpt {
    display: block;
    color: #aaa;
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fix global activity icons */
.activity-icon {
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    overflow: hidden;
}

/* ─── Retro Media Player (Remilia Radio) ─── */

/* Mini open button */
.rem-music-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(200, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    animation: rem-music-pulse 2.5s ease-in-out infinite;
    padding: 0;
}
.rem-music-btn.hidden { display: none !important; }
.rem-music-btn:hover { transform: scale(1.1); border-color: var(--rem-red); }
.rem-music-icon { font-size: 16px; color: var(--rem-red); line-height: 1; }

/* ── Avatar Opacity Button & Panel ────────────────────── */
.rem-avatar-opacity-btn { right: 70px; }  /* sits to the left of the music btn (right:20px ~44px wide) */
body[data-page="chat"] .rem-avatar-opacity-btn { bottom: 80px; }

/* ── Fullscreen Button ────────────────────────────────── */
.rem-fullscreen-btn { right: 120px; }  /* sits to the left of the avatar opacity btn */
body[data-page="chat"] .rem-fullscreen-btn { bottom: 80px; }

.rem-avatar-opacity-icon { font-size: 14px; filter: none; }

.rem-avatar-opacity-panel {
    position: fixed;
    right: 64px;
    bottom: 118px;
    z-index: 9000;
    background: #0a0a0a;
    border: 1px solid var(--rem-red);
    border-radius: 4px;
    padding: 10px 14px 10px 14px;
    min-width: 200px;
    box-shadow: 0 0 18px rgba(200,0,60,.35), 0 2px 8px rgba(0,0,0,.8);
    font-family: 'Courier New', monospace;
    pointer-events: auto;
    transition: opacity .15s;
}
.rem-avatar-opacity-panel.hidden { display: none !important; }

.rem-aop-title {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rem-red);
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(200,0,60,.5);
}

.rem-aop-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rem-aop-slider {
    flex: 1;
    /* inherits rem-vol-slider track/thumb styling */
}

.rem-aop-value {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--rem-red);
    min-width: 36px;
    text-align: right;
    letter-spacing: 1px;
}

/* Apply CSS-variable-driven opacity to all avatar nodes */
.avatar-item {
    opacity: var(--avatar-opacity, 1);
    transition: opacity .2s;
}
@keyframes rem-music-pulse {
    0%,100% { box-shadow: 0 2px 8px rgba(200,0,0,0.1), 0 0 0 0 rgba(255,0,0,0.06); }
    50% { box-shadow: 0 2px 8px rgba(200,0,0,0.15), 0 0 0 5px rgba(255,0,0,0); }
}
body[data-page="chat"] .rem-music-btn { bottom: 80px; }
body[data-page="chat"] .rem-player { bottom: 80px; }

/* ─── Player Panel ─── */
.rem-player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    width: 260px;
    font-family: 'MS UI Gothic', 'Segoe UI', Tahoma, sans-serif;
    font-size: 10px;
    background: #c0c0c0;
    border: 1px solid #808080;
    border-top-color: #fff;
    border-left-color: #fff;
    box-shadow: 1px 1px 0 #000, inset 1px 1px 0 #dfdfdf;
    user-select: none;
}
.rem-player.hidden { display: none !important; }

/* Titlebar */
.rem-player-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16px;
    padding: 0 2px 0 4px;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
}
.rem-player-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.3px;
}
.rem-player-titlebar-btns { display: flex; gap: 1px; flex-shrink: 0; }
.rem-player-tbtn {
    width: 11px;
    height: 11px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    color: #000;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    min-height: 0 !important;
}
.rem-player-tbtn:active { border-color: #808080 #fff #fff #808080; }

/* LCD Display area */
.rem-player-lcd {
    background: #0a2a1a;
    margin: 2px;
    padding: 4px 5px;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
}
.rem-lcd-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 2px;
}
.rem-lcd-time {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0,255,136,0.4);
    letter-spacing: 1px;
    line-height: 1;
    min-width: 48px;
}
.rem-lcd-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.rem-lcd-track {
    color: #00cc66;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 4px rgba(0,204,102,0.3);
}
.rem-lcd-kbps {
    color: #008844;
    font-size: 8px;
    margin-top: 1px;
}

/* Visualizer */
.rem-lcd-viz {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 16px;
    margin: 3px 0;
}
.rem-viz-bar {
    flex: 1;
    background: linear-gradient(to top, #00ff88, #00cc66, #008844);
    min-height: 1px;
    transition: height 0.08s linear;
}

/* Seek bar inside LCD */
.rem-lcd-seek-row { padding: 2px 0 1px; }
.rem-lcd-seek {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #002a1a;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
}
.rem-lcd-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 8px;
    background: #00ff88;
    border: none;
    cursor: pointer;
}
.rem-lcd-seek::-moz-range-thumb {
    width: 6px;
    height: 8px;
    background: #00ff88;
    border: none;
    cursor: pointer;
    border-radius: 0;
}

/* LCD bottom row */
.rem-lcd-bottom {
    display: flex;
    justify-content: space-between;
    color: #008844;
    font-family: 'Courier New', monospace;
    font-size: 8px;
}

/* ─── Controls ─── */
.rem-player-controls {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    background: #c0c0c0;
}
.rem-btn {
    width: 20px;
    height: 16px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 8px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    color: #333;
    font-family: inherit;
    min-width: 0 !important;
    min-height: 0 !important;
}
.rem-btn:hover { background: #d4d0c8; }
.rem-btn:active { border-color: #808080 #fff #fff #808080; }
.rem-ctrl-spacer { flex: 1; }

/* Volume slider */
.rem-vol-slider {
    width: 50px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #808080;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    outline: none;
    cursor: pointer;
}
.rem-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 10px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
}
.rem-vol-slider::-moz-range-thumb {
    width: 6px;
    height: 10px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    border-radius: 0;
}

/* ─── Playlist ─── */
.rem-player-playlist {
    background: #0a2a1a;
    margin: 0 2px;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    max-height: 90px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00cc66 #0a2a1a;
}
.rem-player-playlist::-webkit-scrollbar { width: 10px; }
.rem-player-playlist::-webkit-scrollbar-track { background: #0a2a1a; }
.rem-player-playlist::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
}

.rem-pl-row {
    display: flex;
    gap: 4px;
    padding: 1px 4px;
    color: #00cc66;
    cursor: pointer;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.rem-pl-row:hover { background: rgba(0,204,102,0.1); color: #00ff88; }
.rem-pl-row.active {
    background: #00cc66;
    color: #0a2a1a;
    font-weight: bold;
}
.rem-pl-num { color: inherit; min-width: 14px; text-align: right; }
.rem-pl-title { overflow: hidden; text-overflow: ellipsis; }

/* ─── Share Button ─── */
.social-post-header {
    position: relative;
}
.post-share-btn {
    position: absolute;
    top: 4px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--rem-muted, #888);
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1;
}
.post-share-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.08);
    color: var(--rem-accent, #ff6b9d);
}
.post-share-btn.copied {
    color: #4caf50;
    opacity: 1;
}

/* ─── DM Friends Marquee ─── */
.dm-friends-marquee-block { padding-bottom: 4px; }
.dm-friends-marquee-outer {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 4px 0;
}
.dm-friends-marquee-track {
    display: flex;
    width: 100%;
    overflow: hidden;
}
.dm-friends-inner {
    display: flex;
    gap: 10px;
    padding: 4px 2px;
    flex-shrink: 0;
}
.dm-friends-animate {
    animation: dm-friends-scroll 18s linear infinite;
}
.dm-friends-marquee-outer:hover .dm-friends-animate {
    animation-play-state: paused;
}
@keyframes dm-friends-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.dm-friend-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 52px;
}
.dm-friend-avatar-btn img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,107,157,0.3);
    transition: border-color 0.2s, transform 0.2s;
}
.dm-friend-avatar-btn:hover img {
    border-color: var(--rem-accent, #ff6b9d);
    transform: scale(1.08);
}
.dm-friend-avatar-btn span {
    font-size: 9px;
    font-family: var(--rem-font, 'Nunito'), sans-serif;
    color: var(--rem-muted, #aaa);
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.dm-friends-empty {
    font-size: 11px;
    color: var(--rem-muted, #888);
    padding: 6px 4px;
    font-family: var(--rem-font, 'Nunito'), sans-serif;
    font-style: italic;
}

/* ─── DM Thread Header Avatar ─── */
.dm-thread-identity img#portalDmThreadAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,107,157,0.4);
    flex-shrink: 0;
}

/* ─── DM Conversation List ─── */
.dm-conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
    margin-bottom: 3px;
    min-width: 0 !important;
    min-height: 0 !important;
}
.dm-conversation-item:hover {
    background: rgba(255,107,157,0.08);
    border-color: rgba(255,107,157,0.2);
}
.dm-conversation-item.active {
    background: rgba(255,107,157,0.12);
    border-color: rgba(255,107,157,0.4);
}
.dm-conversation-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,107,157,0.25);
}
.dm-conversation-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dm-conversation-meta strong {
    font-size: 12px;
    font-family: var(--rem-font, 'Nunito'), sans-serif;
    font-weight: 700;
    color: var(--rem-text, #f0e6ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-conversation-meta span {
    font-size: 10px;
    color: var(--rem-muted, #999);
    font-family: var(--rem-font, 'Nunito'), sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-conversation-time {
    font-size: 9px;
    color: var(--rem-muted, #777) !important;
}
.dm-unread-pill {
    background: var(--rem-accent, #ff6b9d);
    color: #fff;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    flex-shrink: 0;
    font-family: var(--rem-font, 'Nunito'), sans-serif;
}

    display: flex;
    justify-content: space-between;
    padding: 1px 3px;
    background: #c0c0c0;
    border-top: 1px solid;
    border-top-color: #808080;
    color: #333;
    font-size: 8px;
    font-family: 'Courier New', monospace;
    margin: 2px 2px 2px;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 1px 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   REMILIA CORPORATION — AESTHETIC LAYER v1.0
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CRT Scanline Overlay ─────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99998;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.03) 3px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* ─── Crosshair Cursor ─────────────────────────────────────────── */
html, body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='10' y1='0' x2='10' y2='8' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='10' y1='12' x2='10' y2='20' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='0' y1='10' x2='8' y2='10' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='12' y1='10' x2='20' y2='10' stroke='%23ff0000' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='none' stroke='%23ff0000' stroke-width='1'/%3E%3C/svg%3E") 10 10, crosshair;
}
a, button, input, select, textarea, label, [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='10' y1='0' x2='10' y2='8' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='10' y1='12' x2='10' y2='20' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='0' y1='10' x2='8' y2='10' stroke='%23ff0000' stroke-width='1.5'/%3E%3Cline x1='12' y1='10' x2='20' y2='10' stroke='%23ff0000' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ff0000' stroke='%23ff0000' stroke-width='1'/%3E%3C/svg%3E") 10 10, pointer;
}

/* ─── Glitch Keyframes ─────────────────────────────────────────── */
@keyframes rem-glitch-x {
    0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-3px, 0); }
    20%       { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); }
    40%       { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
    60%       { clip-path: inset(10% 0 70% 0); transform: translate(2px, 0); }
    80%       { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 0); }
}
@keyframes rem-glitch-y {
    0%, 100% { clip-path: inset(0 0 92% 0); transform: translate(2px, 0); opacity: 0.7; }
    25%       { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); opacity: 0.5; }
    50%       { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); opacity: 0.8; }
    75%       { clip-path: inset(15% 0 65% 0); transform: translate(-3px, 0); opacity: 0.6; }
}

/* Avatar glitch on hover */
.member-avatar:hover img,
.top-chatter-slot:hover img,
.sidebar-user:hover img {
    position: relative;
}
.member-avatar:hover img::before,
.top-chatter-slot:hover img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    animation: rem-glitch-x 0.4s steps(1) infinite;
    mix-blend-mode: screen;
    opacity: 0.6;
}

/* ─── CLASSIFIED Spoiler System ───────────────────────────────── */
.rem-classified {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.rem-classified-content {
    filter: blur(5px);
    transition: filter 0.3s ease;
    pointer-events: none;
}
.rem-classified.revealed .rem-classified-content {
    filter: none;
    pointer-events: auto;
}
.rem-classified-stamp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.2s;
}
.rem-classified-stamp::after {
    content: 'CLASSIFIED';
    font-family: 'Times New Roman', Times, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--rem-red);
    border: 2px solid var(--rem-red);
    padding: 3px 8px;
    transform: rotate(-12deg);
    opacity: 0.85;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.7);
}
.rem-classified.revealed .rem-classified-stamp {
    opacity: 0;
    pointer-events: none;
}

/* ─── Badge Frames ─────────────────────────────────────────────── */
.badge-milady img,
.badge-remilio img {
    border-width: 3px !important;
    border-style: solid !important;
}
.badge-milady img {
    border-color: var(--rem-red) !important;
    box-shadow: 0 0 0 1px rgba(255,0,0,0.2), 0 0 10px rgba(255,0,0,0.15) !important;
}
.badge-remilio img {
    border-color: #9b59b6 !important;
    box-shadow: 0 0 0 1px rgba(155,89,182,0.2), 0 0 10px rgba(155,89,182,0.15) !important;
}
.badge-milady::after {
    content: '★';
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 9px;
    background: var(--rem-red);
    color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 14px;
    text-align: center;
}
.top-chatter-slot {
    position: relative;
}

/* ─── Pixel Divider ────────────────────────────────────────────── */
.rem-pixel-divider {
    display: block;
    height: 2px;
    margin: 16px 0;
    background: repeating-linear-gradient(
        to right,
        var(--rem-red) 0px,
        var(--rem-red) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.35;
    border: none;
}

/* ─── Online Dot ◉ (blinking pulse) ───────────────────────────── */
@keyframes rem-dot-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 4px var(--rem-red); }
    50%       { opacity: 0.4; text-shadow: none; }
}
.rem-online-dot {
    display: inline-block;
    color: var(--rem-red);
    font-size: 0.85em;
    margin-right: 4px;
    animation: rem-dot-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}

/* ─── Transmission Toast (flash messages) ─────────────────────── */
.rem-transmission {
    border: 1.5px solid var(--rem-red);
    border-radius: 2px;
    background: #fff;
    box-shadow: 4px 4px 0 rgba(255,0,0,0.12);
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.rem-transmission::before {
    content: '— TRANSMISSION RECEIVED —';
    display: block;
    background: var(--rem-red);
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 9px;
    letter-spacing: 3px;
    text-align: center;
    padding: 3px 8px;
    text-transform: uppercase;
}
.rem-transmission.error::before {
    content: '— TRANSMISSION ERROR —';
    background: #cc0000;
}
.rem-transmission-body {
    padding: 10px 14px 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.5;
}
.rem-transmission .dismiss-hint {
    font-size: 9px;
    color: #aaa;
    letter-spacing: 1px;
    text-align: right;
    padding: 0 10px 6px;
    font-family: 'Courier New', monospace;
}

/* ─── Dispatch Header (news posts) ────────────────────────────── */
.rem-dispatch-header {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rem-red);
    margin-bottom: 4px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0.85;
    border-left: 2px solid var(--rem-red);
    padding-left: 8px;
}
.rem-dispatch-id {
    font-weight: 700;
}
.rem-dispatch-date {
    color: #888;
}

/* ─── Personnel Files (members page) ──────────────────────────── */
.rem-personnel-header {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rem-red);
    border-top: 2px solid var(--rem-red);
    border-bottom: 1px solid rgba(255,0,0,0.2);
    padding: 6px 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rem-personnel-header::before {
    content: '▣ REMILIA CORP';
    font-weight: 700;
}
.rem-personnel-header span {
    color: #aaa;
}
.rem-employee-id {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: #bbb;
    text-transform: uppercase;
    margin-top: 2px;
    display: block;
}
.rem-dept-tag {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255,0,0,0.08);
    color: var(--rem-red);
    border: 1px solid rgba(255,0,0,0.25);
    padding: 1px 5px;
    border-radius: 1px;
    margin-top: 3px;
}

/* ─── Room Status Badges ───────────────────────────────────────── */
.rem-room-status {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 1px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 700;
}
.rem-room-status.occupied {
    background: rgba(255,0,0,0.1);
    color: var(--rem-red);
    border: 1px solid rgba(255,0,0,0.3);
}
.rem-room-status.vacant {
    background: rgba(0,0,0,0.04);
    color: #aaa;
    border: 1px solid rgba(0,0,0,0.1);
}

/* ─── Internal Bulletin Board (forums) ────────────────────────── */
.rem-bulletin-header {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--rem-red);
    color: #fff;
    padding: 6px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.rem-bulletin-header span {
    opacity: 0.7;
    font-size: 8px;
}

/* ─── Corporate Status Page ────────────────────────────────────── */
.rem-status-page {
    font-family: 'Courier New', monospace;
}
.rem-status-page .rem-status-title {
    font-family: 'Times New Roman', Times, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rem-red);
    border-bottom: 2px solid var(--rem-red);
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.rem-status-page .rem-status-subtitle {
    font-size: 9px;
    letter-spacing: 3px;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.rem-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.rem-status-card {
    border: 1px solid rgba(0,0,0,0.12);
    padding: 12px 14px;
    border-radius: 2px;
    background: #fafafa;
}
.rem-status-card-label {
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
}
.rem-status-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 2px;
}
.rem-status-card-sub {
    font-size: 9px;
    color: #aaa;
    letter-spacing: 1px;
}
.rem-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 2px;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 1px;
}
.rem-status-indicator .rem-si-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rem-status-indicator .rem-si-dot.online {
    background: #22a84a;
    box-shadow: 0 0 4px rgba(34,168,74,0.5);
    animation: rem-dot-pulse 1.6s ease-in-out infinite;
}
.rem-status-indicator .rem-si-dot.offline {
    background: var(--rem-red);
}
.rem-status-indicator .rem-si-label { flex: 1; color: #444; text-transform: uppercase; }
.rem-status-indicator .rem-si-status { color: #888; font-size: 9px; }
.rem-status-section-title {
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rem-red);
    border-bottom: 1px solid rgba(255,0,0,0.2);
    padding-bottom: 4px;
    margin: 16px 0 8px;
}

/* ─── 404 FILE NOT FOUND Memo ──────────────────────────────────── */
.rem-404-page {
    max-width: 540px;
    margin: 48px auto;
    font-family: 'Courier New', monospace;
    text-align: center;
}
.rem-404-stamp {
    font-size: 72px;
    font-weight: 900;
    font-family: 'Times New Roman', Times, serif;
    color: var(--rem-red);
    line-height: 1;
    letter-spacing: -2px;
    opacity: 0.85;
}
.rem-404-sub {
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #888;
    margin: 4px 0 24px;
}
.rem-404-memo {
    border: 1.5px solid var(--rem-red);
    background: #fff;
    padding: 20px 28px;
    text-align: left;
    box-shadow: 4px 4px 0 rgba(255,0,0,0.1);
}
.rem-404-memo-header {
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--rem-red);
    color: #fff;
    padding: 4px 8px;
    margin: -20px -28px 16px;
}
.rem-404-memo p {
    font-size: 12px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 10px;
}
.rem-404-memo .rem-404-code {
    font-size: 10px;
    color: #aaa;
    letter-spacing: 2px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 10px;
    margin-top: 10px;
}
.rem-404-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── Incoming Call Card – Remilia Redesign ──────────────────────── */
#incomingCallCard {
    bottom: 28px !important;
    right: 28px !important;
    z-index: 99999 !important;
}

#incomingCallCard .card {
    width: 220px !important;
    height: auto !important;
    padding: 20px 16px 16px !important;
    background: linear-gradient(160deg, #fff 70%, #fff0f5) !important;
    border: 1.5px solid rgba(200, 0, 60, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(200, 0, 60, 0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: center !important;
}

#incomingCallCard .card:hover {
    rotate: 0.5deg !important;
    scale: 1.03 !important;
    box-shadow: 0 12px 40px rgba(200, 0, 60, 0.22), 0 2px 8px rgba(0,0,0,0.08) !important;
}

#incomingCallCard .imgBox {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(200, 0, 60, 0.25) !important;
    box-shadow: 0 0 0 4px rgba(255, 200, 210, 0.35) !important;
    overflow: hidden !important;
    background: #f9e8ec !important;
    flex-shrink: 0 !important;
}

#incomingCallCard .call-card-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

#incomingCallCard .name {
    font-family: var(--rem-font, 'Nunito'), sans-serif !important;
    line-height: 1.3 !important;
}

#incomingCallCard .name .p1 {
    font-size: 1.05em !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    font-style: italic !important;
}

#incomingCallCard .name .p2 {
    font-size: 0.78em !important;
    color: var(--rem-red, #c8003c) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

#incomingCallCard .caller {
    gap: 18px !important;
    margin-top: 4px !important;
}

#incomingCallCard .callerBtn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#incomingCallCard .callerBtn:hover {
    transform: scale(1.12) !important;
    scale: 1 !important;
}

#incomingCallCard #incomingCallPick {
    background: linear-gradient(135deg, #3ae374, #20bf6b) !important;
    box-shadow: 0 4px 14px rgba(32, 191, 107, 0.45) !important;
}

#incomingCallCard #incomingCallEnd {
    background: linear-gradient(135deg, #ff4757, #c8003c) !important;
    box-shadow: 0 4px 14px rgba(200, 0, 60, 0.4) !important;
}