/* ============================================================
   PHANTOM MSG — Theme Style Modes
   Glass, Neumorphism, Cyberpunk, Aurora
   Applied via body class: style-glass, style-neu, style-cyber, style-aurora
   ============================================================ */

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.style-glass {
    --glass-blur: 16px;
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.1);
    --glass-bg-strong: rgba(255,255,255,0.08);
}
.style-glass .app-shell {
    background: linear-gradient(135deg, var(--bg-body), var(--bg-elevated), var(--bg-body));
}
.style-glass .chat-messages {
    background-image: none;
    background: linear-gradient(160deg, var(--bg-body) 0%, var(--bg-elevated) 50%, var(--bg-body) 100%);
}
.style-glass .app-rail {
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right-color: var(--glass-border);
}
.style-glass .sidebar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}
.style-glass .sidebar-header {
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: var(--glass-border);
}
.style-glass .chat-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.style-glass .chat-item.active,
.style-glass .chat-item:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.15);
}
.style-glass .chat-header {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom-color: var(--glass-border);
}
.style-glass .msg-mine {
    background: var(--msg-mine-bg, var(--primary-100));
    border: 1px solid var(--primary-100);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.style-glass .msg-theirs,
.style-glass .msg:not(.msg-mine):not(.msg-system) {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.style-glass .chat-input-area {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top-color: var(--glass-border);
}
.style-glass .chat-input {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}
.style-glass .tool-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.style-glass .card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.style-glass .context-menu {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}
.style-glass .toast {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}
/* Glass — light theme adaptation */
[data-theme="light"] .style-glass {
    --glass-bg: rgba(0,0,0,0.03);
    --glass-border: rgba(0,0,0,0.08);
    --glass-bg-strong: rgba(0,0,0,0.05);
}
[data-theme="light"] .style-glass .app-rail {
    background: rgba(255,255,255,0.6);
}
[data-theme="light"] .style-glass .sidebar-header {
    background: rgba(0,0,0,0.04);
}
[data-theme="light"] .style-glass .chat-header {
    background: rgba(255,255,255,0.5);
}
[data-theme="light"] .style-glass .chat-input-area {
    background: rgba(255,255,255,0.5);
}
[data-theme="light"] .style-glass .msg-mine {
    background: var(--msg-mine-bg, var(--primary-100));
    border: 1px solid var(--primary-100);
}
[data-theme="light"] .style-glass .msg-theirs,
[data-theme="light"] .style-glass .msg:not(.msg-mine):not(.msg-system) {
    background: rgba(255,255,255,0.5) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .style-glass .context-menu {
    background: rgba(255,255,255,0.7);
}
[data-theme="light"] .style-glass .toast {
    background: rgba(255,255,255,0.7);
}

/* ============================================================
   NEUMORPHISM
   ============================================================ */
.style-neu {
    --neu-shadow-dark: rgba(0,0,0,0.25);
    --neu-shadow-light: rgba(255,255,255,0.05);
    --neu-radius: 14px;
}
.style-neu .app-rail {
    box-shadow: 4px 0 12px var(--neu-shadow-dark);
    border-right: none;
}
.style-neu .sidebar {
    box-shadow: inset -2px 0 8px var(--neu-shadow-dark);
}
.style-neu .sidebar-header {
    border-bottom: none;
    box-shadow: 0 4px 8px var(--neu-shadow-dark);
}
.style-neu .chat-item {
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
    margin-bottom: 8px;
}
.style-neu .chat-item.active,
.style-neu .chat-item:hover {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}
.style-neu .chat-header {
    border-bottom: none;
    box-shadow: 0 4px 8px var(--neu-shadow-dark);
}
.style-neu .msg {
    border: none !important;
    border-radius: var(--neu-radius) !important;
}
.style-neu .msg-mine {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}
.style-neu .msg-theirs,
.style-neu .msg:not(.msg-mine):not(.msg-system) {
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light) !important;
    border: none !important;
}
.style-neu .chat-input-area {
    border-top: none;
    box-shadow: 0 -4px 8px var(--neu-shadow-dark);
}
.style-neu .chat-input {
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
}
.style-neu .card {
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
}
.style-neu .tool-panel {
    box-shadow: inset -4px 0 12px var(--neu-shadow-dark);
}
.style-neu button, .style-neu .btn {
    border: none;
    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
}
.style-neu button:active, .style-neu .btn:active {
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
}
.style-neu .context-menu {
    border: none;
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
}
.style-neu .toast {
    border: none;
    box-shadow: 4px 4px 10px var(--neu-shadow-dark), -4px -4px 10px var(--neu-shadow-light);
}
/* Neumorphism — light theme adaptation */
[data-theme="light"] .style-neu {
    --neu-shadow-dark: rgba(0,0,0,0.1);
    --neu-shadow-light: rgba(255,255,255,0.8);
}

/* ============================================================
   CYBERPUNK / NEON
   ============================================================ */
.style-cyber {
    --neon-cyan: var(--primary-500);
    --neon-magenta: var(--accent);
    --neon-green: var(--success);
    --neon-glow-sm: 0 0 4px;
    --neon-glow-md: 0 0 8px;
}
.style-cyber,
.style-cyber .sidebar,
.style-cyber .tool-panel,
.style-cyber .chat-header,
.style-cyber .chat-input-area {
    font-family: 'IBM Plex Mono', monospace;
}
.style-cyber::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--primary-100) 2px, var(--primary-100) 4px);
}
.style-cyber .app-rail {
    border-right: 1px solid var(--primary-100);
    background: rgba(0,0,0,0.95);
}
.style-cyber .rail-btn.active svg { color: var(--neon-cyan); filter: drop-shadow(var(--neon-glow-sm) var(--primary-glow)); }
.style-cyber .sidebar {
    border-right: 1px solid var(--primary-100);
}
.style-cyber .sidebar-header {
    border-bottom: 1px solid var(--primary-100);
}
.style-cyber .chat-item {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
}
.style-cyber .chat-item.active {
    border-color: var(--neon-magenta);
    box-shadow: var(--neon-glow-sm) var(--accent-100), inset var(--neon-glow-sm) var(--accent-100);
}
.style-cyber .chat-item-name {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}
.style-cyber .chat-header {
    border-bottom: 1px solid var(--primary-100);
}
.style-cyber .msg {
    border-radius: 4px !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
}
.style-cyber .msg-mine {
    border: 1px solid var(--accent-100) !important;
    box-shadow: var(--neon-glow-sm) var(--accent-100);
}
.style-cyber .msg-theirs,
.style-cyber .msg:not(.msg-mine):not(.msg-system) {
    border: 1px solid var(--primary-100) !important;
}
.style-cyber .chat-input-area {
    border-top: 1px solid var(--primary-100);
}
.style-cyber .chat-input {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
}
.style-cyber .chat-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: var(--neon-glow-sm) var(--primary-glow);
}
.style-cyber .card {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
}
.style-cyber h2, .style-cyber h3 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'IBM Plex Mono', monospace;
}
.style-cyber .context-menu {
    border: 1px solid var(--primary-100);
    box-shadow: var(--neon-glow-md) var(--primary-glow);
    border-radius: 4px;
}
.style-cyber .toast {
    border: 1px solid var(--primary-100);
    box-shadow: var(--neon-glow-sm) var(--primary-glow);
    font-family: 'IBM Plex Mono', monospace;
    border-radius: 4px;
}
.style-cyber .online-dot.show { box-shadow: 0 0 6px var(--neon-green); }
.style-cyber .chat-item-checks.read { color: var(--neon-cyan); }

/* ============================================================
   AURORA UI
   ============================================================ */
@keyframes auroraBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.style-aurora .app-shell {
    position: relative;
}
.style-aurora .app-shell::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(135deg,
        var(--aurora-c1, #0f0c29),
        var(--aurora-c2, #302b63),
        var(--aurora-c3, #24243e),
        var(--aurora-c1, #0f0c29));
    background-size: 300% 300%;
    animation: auroraBg 10s ease-in-out infinite;
}
.style-aurora .app-rail {
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right-color: var(--primary-100);
}
.style-aurora .rail-btn.active svg { color: var(--primary-400); }
.style-aurora .sidebar {
    background: var(--primary-100);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.style-aurora .sidebar-header {
    background: rgba(0,0,0,0.15);
    border-bottom-color: var(--primary-100);
}
.style-aurora .chat-item {
    background: var(--primary-100);
    border: 1px solid var(--primary-100);
}
.style-aurora .chat-item.active {
    background: linear-gradient(135deg, var(--primary-glow), var(--accent-100));
    border-color: var(--border-focus);
}
.style-aurora .chat-header {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--primary-100);
}
.style-aurora .msg-mine {
    background: var(--msg-mine-bg, linear-gradient(135deg, var(--primary-glow), var(--accent-100))) !important;
    border: 1px solid var(--primary-glow) !important;
}
.style-aurora .msg-theirs,
.style-aurora .msg:not(.msg-mine):not(.msg-system) {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.style-aurora .chat-input-area {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top-color: var(--primary-100);
}
.style-aurora .chat-input {
    background: var(--primary-100);
    border-color: var(--primary-100);
}
.style-aurora .tool-panel {
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.style-aurora .card {
    background: var(--primary-100);
    border: 1px solid var(--primary-100);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.style-aurora .context-menu {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--primary-100);
}
.style-aurora .toast {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--primary-100);
}
.style-aurora .chat-item-avatar {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
}

/* ============================================================
   NEON SIGN
   Glowing text, neon borders, dark brick background
   ============================================================ */
.style-neon {
    --neon-primary: var(--primary-500, #ff2d95);
    --neon-accent: var(--accent, #00d4ff);
    --neon-glow-sm: 0 0 4px var(--neon-primary), 0 0 8px var(--neon-primary);
    --neon-glow-md: 0 0 6px var(--neon-primary), 0 0 14px var(--neon-primary), 0 0 24px var(--primary-glow);
    --neon-glow-accent: 0 0 4px var(--neon-accent), 0 0 10px var(--neon-accent);
}
.style-neon .app-shell {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='58' height='28' x='1' y='1' rx='1' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 60px 30px;
}
.style-neon .sidebar-header {
    text-shadow: var(--neon-glow-sm);
}
.style-neon .sidebar-header .app-title {
    text-shadow: 0 0 8px var(--neon-primary), 0 0 16px var(--neon-primary), 0 0 32px var(--primary-glow);
}
.style-neon .chat-item.active,
.style-neon .chat-item:hover {
    border: 1px solid var(--neon-primary);
    box-shadow: inset 0 0 12px var(--primary-100), var(--neon-glow-sm);
}
.style-neon .avatar {
    box-shadow: 0 0 6px var(--neon-accent), 0 0 12px var(--accent-100);
    border: 1px solid var(--neon-accent);
}
.style-neon .msg-mine {
    box-shadow: 0 0 6px var(--primary-glow), 0 0 14px var(--primary-100);
    border: 1px solid var(--primary-glow);
}
.style-neon .msg-theirs,
.style-neon .msg:not(.msg-mine):not(.msg-system) {
    box-shadow: 0 0 4px var(--accent-100), 0 0 10px var(--accent-100);
    border: 1px solid var(--accent-100);
}
.style-neon .chat-header {
    border-bottom: 1px solid var(--neon-primary);
    box-shadow: 0 1px 8px var(--primary-100);
}
.style-neon .chat-input-area {
    border-top: 1px solid var(--neon-primary);
    box-shadow: 0 -1px 8px var(--primary-100);
}
.style-neon .chat-input {
    border: 1px solid var(--primary-100);
    box-shadow: inset 0 0 6px var(--primary-100);
}
.style-neon .chat-input:focus {
    border-color: var(--neon-primary);
    box-shadow: var(--neon-glow-sm), inset 0 0 8px var(--primary-100);
}
.style-neon .btn-primary,
.style-neon .send-btn {
    box-shadow: var(--neon-glow-md);
    text-shadow: 0 0 6px currentColor;
    border: 1px solid var(--neon-primary);
}
.style-neon .btn-primary:hover,
.style-neon .send-btn:hover {
    box-shadow: 0 0 8px var(--neon-primary), 0 0 20px var(--neon-primary), 0 0 40px var(--primary-glow);
}
.style-neon .app-rail {
    border-right: 1px solid var(--neon-primary);
    box-shadow: 1px 0 10px var(--primary-100);
}
.style-neon .rail-btn.active svg {
    filter: drop-shadow(0 0 4px var(--neon-primary)) drop-shadow(0 0 8px var(--neon-primary));
}
.style-neon .sidebar {
    border-right: 1px solid var(--primary-100);
}
.style-neon .tool-panel {
    border-left: 1px solid var(--neon-primary);
    box-shadow: -1px 0 10px var(--primary-100);
}
.style-neon .toast {
    border: 1px solid var(--neon-primary);
    box-shadow: var(--neon-glow-sm);
}
.style-neon .modal-content {
    border: 1px solid var(--neon-primary);
    box-shadow: var(--neon-glow-md);
}
.style-neon .context-menu {
    border: 1px solid var(--neon-accent);
    box-shadow: var(--neon-glow-accent);
}
/* Neon flicker animation on app title */
@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
}
.style-neon .app-title {
    animation: neonFlicker 4s infinite;
}
/* Scrollbar neon */
.style-neon ::-webkit-scrollbar-thumb {
    background: var(--neon-primary) !important;
    box-shadow: 0 0 6px var(--neon-primary);
}

/* ============================================================
   1. NEUBRUTALISM
   Heavy black borders, clashing colors, flat blocks, bold type
   ============================================================ */
.style-brutal {
    --brutal-border: 3px solid var(--text-primary);
    --brutal-shadow: 4px 4px 0 var(--text-primary);
    --brutal-radius: 6px;
}
.style-brutal .app-rail {
    border-right: var(--brutal-border);
}
.style-brutal .sidebar {
    border-right: var(--brutal-border);
}
.style-brutal .sidebar-header {
    border-bottom: var(--brutal-border);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.style-brutal .chat-item {
    border: 2px solid var(--text-primary);
    border-radius: var(--brutal-radius);
    box-shadow: 3px 3px 0 var(--text-primary);
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.style-brutal .chat-item:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--text-primary);
}
.style-brutal .chat-item.active {
    background: var(--accent-100);
    border-color: var(--accent);
    box-shadow: 4px 4px 0 var(--accent);
}
.style-brutal .chat-header {
    border-bottom: var(--brutal-border);
    font-weight: 700;
}
.style-brutal .msg {
    border: 2px solid var(--text-primary) !important;
    border-radius: var(--brutal-radius) !important;
    box-shadow: 3px 3px 0 var(--text-primary);
}
.style-brutal .msg-mine {
    border-color: var(--primary) !important;
    box-shadow: 3px 3px 0 var(--primary);
}
.style-brutal .chat-input-area {
    border-top: var(--brutal-border);
}
.style-brutal .chat-input {
    border: 2px solid var(--text-primary);
    border-radius: var(--brutal-radius);
    box-shadow: 2px 2px 0 var(--text-primary);
}
.style-brutal .chat-input:focus {
    border-color: var(--primary);
    box-shadow: 3px 3px 0 var(--primary);
}
.style-brutal .card {
    border: 2px solid var(--text-primary);
    border-radius: var(--brutal-radius);
    box-shadow: var(--brutal-shadow);
}
.style-brutal button, .style-brutal .btn {
    border: 2px solid var(--text-primary);
    border-radius: var(--brutal-radius);
    box-shadow: 3px 3px 0 var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.style-brutal button:hover, .style-brutal .btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--text-primary);
}
.style-brutal button:active, .style-brutal .btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--text-primary);
}
.style-brutal .context-menu {
    border: 2px solid var(--text-primary);
    box-shadow: 5px 5px 0 var(--text-primary);
    border-radius: var(--brutal-radius);
}
.style-brutal .toast {
    border: 2px solid var(--text-primary);
    box-shadow: var(--brutal-shadow);
    border-radius: var(--brutal-radius);
    font-weight: 700;
}
.style-brutal .tool-panel {
    border-left: var(--brutal-border);
}
.style-brutal .avatar,
.style-brutal .chat-item-avatar,
.style-brutal .chat-topbar-avatar {
    border: 2px solid var(--text-primary) !important;
    border-radius: var(--brutal-radius) !important;
    clip-path: none !important;
}
.style-brutal h2, .style-brutal h3 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.style-brutal ::-webkit-scrollbar-thumb {
    background: var(--text-primary) !important;
    border-radius: 0 !important;
}

/* ============================================================
   2. LIQUID GLASS (Apple WWDC 2025)
   Advanced glassmorphism with light refraction, specular highlights
   ============================================================ */
.style-liquid {
    --liquid-blur: 20px;
    --liquid-bg: rgba(255,255,255,0.06);
    --liquid-border: rgba(255,255,255,0.15);
    --liquid-specular: rgba(255,255,255,0.08);
    --liquid-refract: rgba(255,255,255,0.04);
}
.style-liquid .app-shell {
    background: linear-gradient(160deg, var(--bg-body), var(--bg-elevated), var(--bg-body));
}
.style-liquid .chat-messages {
    background-image: none;
    background: linear-gradient(160deg, var(--bg-body), var(--bg-elevated) 50%, var(--bg-body));
}
.style-liquid .app-rail {
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    border-right: 1px solid var(--liquid-border);
}
.style-liquid .sidebar {
    background: var(--liquid-bg);
    backdrop-filter: blur(var(--liquid-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(1.3);
}
.style-liquid .sidebar-header {
    background: linear-gradient(180deg, var(--liquid-specular), transparent);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-bottom: 1px solid var(--liquid-border);
}
.style-liquid .chat-item {
    background: var(--liquid-bg);
    border: 1px solid var(--liquid-border);
    border-radius: 16px;
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    position: relative;
    overflow: hidden;
}
.style-liquid .chat-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, var(--liquid-specular), transparent);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}
.style-liquid .chat-item.active,
.style-liquid .chat-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.style-liquid .chat-header {
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    border-bottom: 1px solid var(--liquid-border);
}
.style-liquid .msg {
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
}
.style-liquid .msg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, var(--liquid-specular), transparent);
    pointer-events: none;
    border-radius: 18px 18px 0 0;
}
.style-liquid .msg-mine {
    background: var(--msg-mine-bg, rgba(99,102,241,0.18));
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.style-liquid .msg-theirs,
.style-liquid .msg:not(.msg-mine):not(.msg-system) {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--liquid-border) !important;
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.style-liquid .chat-input-area {
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(1.4);
    border-top: 1px solid var(--liquid-border);
}
.style-liquid .chat-input {
    background: var(--liquid-bg);
    border: 1px solid var(--liquid-border);
    border-radius: 20px;
}
.style-liquid .chat-input:focus {
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 12px rgba(255,255,255,0.06);
}
.style-liquid .card {
    background: var(--liquid-bg);
    border: 1px solid var(--liquid-border);
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    position: relative;
    overflow: hidden;
}
.style-liquid .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, var(--liquid-specular), transparent);
    pointer-events: none;
}
.style-liquid .tool-panel {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.style-liquid .context-menu {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--liquid-border);
    border-radius: 14px;
    overflow: hidden;
}
.style-liquid .context-menu::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    pointer-events: none;
}
.style-liquid .toast {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--liquid-border);
    border-radius: 14px;
}
/* Light theme Liquid Glass */
[data-theme="light"] .style-liquid {
    --liquid-bg: rgba(255,255,255,0.45);
    --liquid-border: rgba(255,255,255,0.6);
    --liquid-specular: rgba(255,255,255,0.4);
}
[data-theme="light"] .style-liquid .app-rail { background: rgba(255,255,255,0.4); }
[data-theme="light"] .style-liquid .sidebar-header { background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); }
[data-theme="light"] .style-liquid .chat-header { background: rgba(255,255,255,0.4); }
[data-theme="light"] .style-liquid .chat-input-area { background: rgba(255,255,255,0.4); }
[data-theme="light"] .style-liquid .msg-mine {
    background: var(--msg-mine-bg, rgba(13,115,119,0.15));
    border: 1px solid rgba(255,255,255,0.5);
}
[data-theme="light"] .style-liquid .msg-theirs,
[data-theme="light"] .style-liquid .msg:not(.msg-mine):not(.msg-system) {
    background: rgba(255,255,255,0.55) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
}
[data-theme="light"] .style-liquid .context-menu { background: rgba(255,255,255,0.6); }
[data-theme="light"] .style-liquid .toast { background: rgba(255,255,255,0.6); }

/* ============================================================
   3. CLAYMORPHISM
   3D clay-like elements, soft rounded blobs, pastel shadows
   ============================================================ */
.style-clay {
    --clay-radius: 20px;
    --clay-shadow-outer: 0 6px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
    --clay-shadow-inner: inset 0 -2px 6px rgba(0,0,0,0.08), inset 0 2px 4px rgba(255,255,255,0.08);
    --clay-highlight: inset 0 1px 0 rgba(255,255,255,0.1);
}
.style-clay .app-rail {
    border-right: none;
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
}
.style-clay .sidebar-header {
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.style-clay .chat-item {
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-outer), var(--clay-highlight);
    margin-bottom: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.style-clay .chat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.12), var(--clay-highlight);
}
.style-clay .chat-item.active {
    box-shadow: var(--clay-shadow-inner), 0 4px 14px rgba(0,0,0,0.1);
}
.style-clay .chat-header {
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.style-clay .msg {
    border: none !important;
    border-radius: var(--clay-radius) !important;
    box-shadow: var(--clay-shadow-outer), var(--clay-highlight);
}
.style-clay .msg-mine {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08), var(--clay-shadow-inner);
}
.style-clay .chat-input-area {
    border-top: none;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.style-clay .chat-input {
    border: none;
    border-radius: 24px;
    box-shadow: var(--clay-shadow-inner), 0 2px 8px rgba(0,0,0,0.08);
}
.style-clay .chat-input:focus {
    box-shadow: var(--clay-shadow-inner), 0 0 0 3px var(--primary-100);
}
.style-clay .card {
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-outer), var(--clay-highlight);
}
.style-clay button, .style-clay .btn {
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), var(--clay-highlight);
}
.style-clay button:hover, .style-clay .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.16), var(--clay-highlight);
}
.style-clay button:active, .style-clay .btn:active {
    transform: translateY(1px);
    box-shadow: var(--clay-shadow-inner);
}
.style-clay .tool-panel {
    box-shadow: -4px 0 16px rgba(0,0,0,0.12);
}
.style-clay .context-menu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), var(--clay-highlight);
}
.style-clay .toast {
    border: none;
    border-radius: 16px;
    box-shadow: var(--clay-shadow-outer), var(--clay-highlight);
}
.style-clay .avatar,
.style-clay .chat-item-avatar,
.style-clay .chat-topbar-avatar {
    box-shadow: 0 3px 10px rgba(0,0,0,0.15), var(--clay-highlight);
}
/* Light theme Claymorphism */
[data-theme="light"] .style-clay {
    --clay-shadow-outer: 0 6px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --clay-shadow-inner: inset 0 -2px 6px rgba(0,0,0,0.04), inset 0 2px 4px rgba(255,255,255,0.5);
    --clay-highlight: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ============================================================
   4. RETRO SYNTHWAVE
   80s aesthetic: perspective grids, purple-pink-orange gradients
   ============================================================ */
@keyframes synthwaveGrid {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}
.style-synthwave .app-shell {
    position: relative;
}
.style-synthwave .chat-messages {
    background-color: var(--bg-body) !important;
    background-image:
        repeating-linear-gradient(90deg, var(--primary-100) 0px, var(--primary-100) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg, var(--primary-100) 0px, var(--primary-100) 1px, transparent 1px, transparent 40px) !important;
    animation: synthwaveGrid 3s linear infinite;
}
.style-synthwave .app-rail {
    background: rgba(0,0,0,0.6);
    border-right: 1px solid var(--primary-100);
}
.style-synthwave .rail-btn.active svg {
    color: var(--primary-500);
    filter: drop-shadow(0 0 4px var(--primary-glow));
}
.style-synthwave .sidebar {
    border-right: 1px solid var(--primary-100);
}
.style-synthwave .sidebar-header {
    border-bottom: 1px solid var(--primary-100);
    text-shadow: 0 0 8px var(--primary-glow);
}
.style-synthwave .chat-item {
    border: 1px solid var(--primary-100);
}
.style-synthwave .chat-item.active {
    border-color: var(--border-focus);
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100));
    box-shadow: 0 0 12px var(--primary-100);
}
.style-synthwave .chat-header {
    border-bottom: 1px solid var(--primary-100);
    background: linear-gradient(90deg, var(--bg-header), transparent);
}
.style-synthwave .msg-mine {
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100)) !important;
    border: 1px solid var(--primary-glow) !important;
    box-shadow: 0 0 8px var(--primary-100);
}
.style-synthwave .msg-theirs,
.style-synthwave .msg:not(.msg-mine):not(.msg-system) {
    border: 1px solid var(--accent-100) !important;
}
.style-synthwave .chat-input-area {
    border-top: 1px solid var(--primary-100);
    background: linear-gradient(0deg, rgba(0,0,0,0.3), transparent);
}
.style-synthwave .chat-input {
    border: 1px solid var(--primary-100);
}
.style-synthwave .chat-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 8px var(--primary-glow);
}
.style-synthwave .context-menu {
    border: 1px solid var(--primary-glow);
    box-shadow: 0 0 16px var(--primary-100), 0 8px 32px rgba(0,0,0,0.4);
}
.style-synthwave .toast {
    border: 1px solid var(--primary-glow);
    box-shadow: 0 0 10px var(--primary-100);
}
.style-synthwave .tool-panel {
    border-left: 1px solid var(--primary-100);
}
.style-synthwave .online-dot.show {
    box-shadow: 0 0 6px var(--primary-500);
}
.style-synthwave ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color, var(--primary-glow)) !important;
}

/* ============================================================
   5. MATERIAL 3 / MATERIAL YOU
   Clean elevation, large rounded corners, tonal surfaces
   ============================================================ */
.style-material {
    --mat-radius: 16px;
    --mat-radius-lg: 28px;
    --mat-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --mat-elevation-2: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    --mat-elevation-3: 0 6px 12px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.08);
    --mat-tonal: var(--primary-100);
}
.style-material .app-rail {
    border-right: none;
    box-shadow: var(--mat-elevation-1);
}
.style-material .sidebar {
    border-right: none;
    box-shadow: var(--mat-elevation-1);
}
.style-material .sidebar-header {
    border-bottom: none;
}
.style-material .chat-item {
    border: none;
    border-radius: var(--mat-radius);
    margin: 2px 8px 2px 8px;
    padding: 12px 16px;
    transition: background 0.2s ease;
}
.style-material .chat-item:hover {
    background: var(--overlay-light);
}
.style-material .chat-item.active {
    background: var(--mat-tonal);
    border-radius: var(--mat-radius-lg);
}
.style-material .chat-header {
    border-bottom: none;
    box-shadow: var(--mat-elevation-1);
}
.style-material .msg {
    border: none !important;
    border-radius: var(--mat-radius) !important;
    box-shadow: var(--mat-elevation-1);
}
.style-material .msg-mine {
    border-radius: 20px 20px 4px 20px !important;
    box-shadow: none;
    background: var(--primary-100);
}
.style-material .msg-theirs,
.style-material .msg:not(.msg-mine):not(.msg-system) {
    border-radius: 20px 20px 20px 4px !important;
}
.style-material .chat-input-area {
    border-top: none;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
}
.style-material .chat-input {
    border: none;
    border-radius: var(--mat-radius-lg);
    background: var(--bg-input);
    box-shadow: none;
}
.style-material .chat-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 0;
}
.style-material .card {
    border: none;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-elevation-1);
}
.style-material button, .style-material .btn {
    border: none;
    border-radius: 20px;
    box-shadow: none;
    font-weight: 500;
}
.style-material button:hover, .style-material .btn:hover {
    box-shadow: var(--mat-elevation-2);
}
.style-material .tool-panel {
    box-shadow: var(--mat-elevation-2);
    border-left: none;
}
.style-material .context-menu {
    border: none;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-elevation-3);
}
.style-material .toast {
    border: none;
    border-radius: var(--mat-radius);
    box-shadow: var(--mat-elevation-3);
}
.style-material .avatar,
.style-material .chat-item-avatar,
.style-material .chat-topbar-avatar {
    border-radius: 50% !important;
}

/* ============================================================
   6. HOLOGRAPHIC / IRIDESCENT
   Prismatic shifting colors, rainbow borders, oil-spill gradients
   ============================================================ */
@keyframes holoShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes holoBorder {
    0%   { border-color: var(--primary-glow, rgba(255,100,200,0.3)); }
    33%  { border-color: var(--accent-100, rgba(100,200,255,0.3)); }
    66%  { border-color: var(--primary-100, rgba(200,255,100,0.3)); }
    100% { border-color: var(--primary-glow, rgba(255,100,200,0.3)); }
}
.style-holo {
    --holo-grad: linear-gradient(135deg,
        var(--primary-100),
        var(--accent-100),
        var(--primary-100),
        var(--accent-100));
}
.style-holo .app-shell {
    background: var(--bg-body);
}
.style-holo .app-rail {
    border-right: 1px solid;
    animation: holoBorder 6s linear infinite;
}
.style-holo .sidebar {
    background: var(--holo-grad), var(--bg-surface);
}
.style-holo .sidebar-header {
    border-bottom: 1px solid;
    animation: holoBorder 6s linear infinite;
}
.style-holo .chat-item {
    border: 1px solid var(--primary-100);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.style-holo .chat-item:hover {
    border-color: var(--accent-100);
    box-shadow: 0 0 12px var(--accent-100), 0 0 24px var(--primary-100);
}
.style-holo .chat-item.active {
    background: var(--holo-grad), var(--bg-card);
    animation: holoBorder 4s linear infinite;
    box-shadow: 0 0 16px var(--primary-100), 0 0 8px var(--accent-100);
}
.style-holo .chat-header {
    background: var(--holo-grad), var(--bg-header);
    border-bottom: 1px solid;
    animation: holoBorder 6s linear infinite;
}
.style-holo .msg-mine {
    background: var(--holo-grad), var(--msg-mine-bg, var(--primary-100)) !important;
    border: 1px solid var(--primary-glow) !important;
    box-shadow: 0 2px 12px var(--primary-100);
}
.style-holo .msg-theirs,
.style-holo .msg:not(.msg-mine):not(.msg-system) {
    border: 1px solid var(--accent-100) !important;
}
.style-holo .chat-input-area {
    border-top: 1px solid;
    animation: holoBorder 6s linear infinite;
}
.style-holo .chat-input {
    border: 1px solid var(--primary-100);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.style-holo .chat-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 8px var(--accent-100), 0 0 16px var(--primary-100);
}
.style-holo .card {
    border: 1px solid var(--primary-100);
    background: var(--holo-grad), var(--bg-card);
}
.style-holo .tool-panel {
    border-left: 1px solid;
    animation: holoBorder 6s linear infinite;
    background: var(--holo-grad), var(--bg-surface);
}
.style-holo .context-menu {
    border: 1px solid;
    animation: holoBorder 4s linear infinite;
    box-shadow: 0 4px 20px var(--primary-100), 0 2px 8px var(--accent-100);
}
.style-holo .toast {
    border: 1px solid;
    animation: holoBorder 4s linear infinite;
}
.style-holo .avatar,
.style-holo .chat-item-avatar,
.style-holo .chat-topbar-avatar {
    box-shadow: 0 0 6px var(--primary-glow), 0 0 12px var(--accent-100);
}

/* ============================================================
   7. VAPORWAVE / Y2K
   Pastel lavender/pink/cyan, nostalgic Windows aesthetic
   ============================================================ */
.style-vapor {
    --vapor-pink: var(--accent-100);
    --vapor-cyan: var(--primary-100);
    --vapor-lavender: var(--primary-100);
    --vapor-grad: linear-gradient(135deg, var(--vapor-pink), var(--vapor-lavender), var(--vapor-cyan));
}
.style-vapor .app-shell {
    background: var(--vapor-grad), var(--bg-body);
}
.style-vapor .chat-messages {
    background-image: none !important;
    background: var(--vapor-grad), var(--bg-body);
}
.style-vapor .app-rail {
    background: rgba(0,0,0,0.25);
    border-right: 1px solid var(--primary-100);
}
.style-vapor .rail-btn.active svg {
    color: var(--primary-500);
    filter: drop-shadow(0 0 4px var(--primary-glow));
}
.style-vapor .sidebar {
    background: var(--vapor-grad), var(--bg-surface);
    border-right: 1px solid var(--primary-100);
}
.style-vapor .sidebar-header {
    border-bottom: 1px solid var(--primary-100);
}
.style-vapor .chat-item {
    border: 1px solid var(--primary-100);
    border-radius: 12px;
}
.style-vapor .chat-item.active {
    background: linear-gradient(135deg, var(--accent-100), var(--primary-100));
    border-color: var(--border-focus);
}
.style-vapor .chat-header {
    background: linear-gradient(90deg, var(--bg-header), var(--primary-100));
    border-bottom: 1px solid var(--primary-100);
}
.style-vapor .msg-mine {
    background: linear-gradient(135deg, var(--accent-100), var(--primary-100)) !important;
    border: 1px solid var(--accent-100) !important;
}
.style-vapor .msg-theirs,
.style-vapor .msg:not(.msg-mine):not(.msg-system) {
    border: 1px solid var(--primary-100) !important;
}
.style-vapor .chat-input-area {
    border-top: 1px solid var(--primary-100);
}
.style-vapor .chat-input {
    border: 1px solid var(--primary-100);
}
.style-vapor .chat-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 8px var(--primary-glow);
}
.style-vapor .context-menu {
    border: 1px solid var(--primary-glow);
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(30,0,40,0.8));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.style-vapor .toast {
    border: 1px solid var(--primary-glow);
}
.style-vapor .tool-panel {
    border-left: 1px solid var(--primary-100);
    background: var(--vapor-grad), var(--bg-surface);
}
.style-vapor .online-dot.show {
    box-shadow: 0 0 6px var(--primary-500);
}
.style-vapor ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color, var(--primary-glow)) !important;
}

/* ============================================================
   8. PAPER / INK
   Minimalist paper texture, ink-stroke borders, editorial feel
   ============================================================ */
.style-paper {
    --paper-border: 1.5px solid var(--text-dim);
    --paper-shadow: 2px 3px 0 rgba(0,0,0,0.06);
    --paper-radius: 4px;
}
.style-paper .app-shell {
    font-family: 'Georgia', 'Times New Roman', serif;
}
.style-paper .app-rail {
    border-right: var(--paper-border);
}
.style-paper .sidebar {
    border-right: var(--paper-border);
}
.style-paper .sidebar-header {
    border-bottom: 2px solid var(--text-muted);
    font-family: 'Georgia', serif;
    font-style: italic;
    letter-spacing: 0.02em;
}
.style-paper .chat-item {
    border: 1px solid var(--text-dim);
    border-radius: var(--paper-radius);
    box-shadow: var(--paper-shadow);
    margin-bottom: 6px;
}
.style-paper .chat-item.active {
    border-color: var(--text-muted);
    border-width: 2px;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.08);
    background: var(--overlay-subtle);
}
.style-paper .chat-header {
    border-bottom: 2px solid var(--text-dim);
    font-family: 'Georgia', serif;
}
.style-paper .msg {
    border: 1px solid var(--text-dim) !important;
    border-radius: var(--paper-radius) !important;
    box-shadow: var(--paper-shadow);
    font-family: 'Georgia', serif;
    line-height: 1.65;
}
.style-paper .msg-mine {
    border-left: 3px solid var(--primary) !important;
}
.style-paper .msg-theirs,
.style-paper .msg:not(.msg-mine):not(.msg-system) {
    border-left: 3px solid var(--text-muted) !important;
}
.style-paper .chat-input-area {
    border-top: 2px solid var(--text-dim);
}
.style-paper .chat-input {
    border: 1px solid var(--text-dim);
    border-radius: var(--paper-radius);
    font-family: 'Georgia', serif;
    font-size: 15px;
}
.style-paper .chat-input:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 2px var(--overlay-light);
}
.style-paper .card {
    border: 1px solid var(--text-dim);
    border-radius: var(--paper-radius);
    box-shadow: var(--paper-shadow);
}
.style-paper .tool-panel {
    border-left: var(--paper-border);
}
.style-paper button, .style-paper .btn {
    border: 1px solid var(--text-dim);
    border-radius: var(--paper-radius);
    box-shadow: 1px 2px 0 rgba(0,0,0,0.06);
    font-family: 'Georgia', serif;
}
.style-paper button:active, .style-paper .btn:active {
    box-shadow: none;
    transform: translate(1px, 1px);
}
.style-paper .context-menu {
    border: 1.5px solid var(--text-dim);
    border-radius: var(--paper-radius);
    box-shadow: 3px 4px 0 rgba(0,0,0,0.08);
    font-family: 'Georgia', serif;
}
.style-paper .toast {
    border: 1.5px solid var(--text-dim);
    border-radius: var(--paper-radius);
    box-shadow: var(--paper-shadow);
    font-family: 'Georgia', serif;
}
.style-paper h2, .style-paper h3 {
    font-family: 'Georgia', serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.style-paper ::-webkit-scrollbar-thumb {
    background: var(--text-dim) !important;
    border-radius: 0 !important;
}

/* ============================================================
   9. ALIEN COLONY
   Bioluminescent, organic scanlines, toxic glow, extraterrestrial
   ============================================================ */
@keyframes alienScanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}
@keyframes alienPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.style-alien {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.style-alien .chat-messages {
    background-color: var(--bg-body) !important;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, var(--primary-100) 3px, var(--primary-100) 4px) !important;
    animation: alienScanline 0.2s linear infinite;
}
.style-alien .app-rail {
    background: rgba(0,0,0,0.7);
    border-right: 1px solid var(--primary-100);
}
.style-alien .rail-btn.active svg {
    color: var(--primary-500);
    filter: drop-shadow(0 0 6px var(--primary-glow));
    animation: alienPulse 2s ease-in-out infinite;
}
.style-alien .sidebar {
    border-right: 1px solid var(--primary-100);
}
.style-alien .sidebar-header {
    border-bottom: 1px solid var(--primary-100);
    text-shadow: 0 0 10px var(--primary-glow);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.style-alien .chat-item {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.style-alien .chat-item.active {
    border-color: var(--border-focus);
    background: var(--primary-100);
    box-shadow: 0 0 12px var(--primary-100), inset 0 0 20px var(--primary-100);
}
.style-alien .chat-header {
    border-bottom: 1px solid var(--primary-100);
    background: linear-gradient(90deg, var(--bg-header), transparent);
    font-family: 'JetBrains Mono', monospace;
}
.style-alien .msg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    border-radius: 4px !important;
}
.style-alien .msg-mine {
    background: var(--primary-100) !important;
    border: 1px solid var(--primary-glow) !important;
    box-shadow: 0 0 10px var(--primary-100), inset 0 0 8px var(--primary-100);
}
.style-alien .msg-theirs,
.style-alien .msg:not(.msg-mine):not(.msg-system) {
    border: 1px solid var(--accent-100) !important;
    box-shadow: 0 0 6px var(--accent-100);
}
.style-alien .chat-input-area {
    border-top: 1px solid var(--primary-100);
    background: linear-gradient(0deg, rgba(0,0,0,0.4), transparent);
}
.style-alien .chat-input {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.style-alien .chat-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 8px var(--primary-glow), 0 0 20px var(--primary-100);
}
.style-alien .card {
    border: 1px solid var(--primary-100);
    border-radius: 4px;
}
.style-alien .context-menu {
    border: 1px solid var(--primary-glow);
    box-shadow: 0 0 20px var(--primary-100), 0 8px 32px rgba(0,0,0,0.5);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.style-alien .toast {
    border: 1px solid var(--primary-glow);
    box-shadow: 0 0 12px var(--primary-100);
    font-family: 'JetBrains Mono', monospace;
}
.style-alien .tool-panel {
    border-left: 1px solid var(--primary-100);
}
.style-alien .online-dot.show {
    box-shadow: 0 0 8px var(--primary-500), 0 0 16px var(--primary-glow);
    animation: alienPulse 1.5s ease-in-out infinite;
}
.style-alien .chat-item-checks.read {
    color: var(--primary-500);
    text-shadow: 0 0 4px var(--primary-glow);
}
.style-alien ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color, var(--primary-glow)) !important;
}
.style-alien .send-btn {
    box-shadow: 0 0 8px var(--primary-glow);
}