@import url("./base.css");
@import url("./layout.css");
@import url("./chat.css");
@import url("./modal.css");
@import url("./animation.css");
@import url("./utilities.css");

@charset "UTF-8";
/**
 * ==========================================================================
 * NYCHAT OS - MASTER STYLESHEET (ENTERPRISE EDITION - PART 1)
 * Architecture: Scalable Glassmorphism, 3D Spatial Layouts & Motion Physics
 * ==========================================================================
 */

/* ==========================================================================
   01. EXHAUSTIVE DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* --- Primary Color Scale (Brand Blue #4F8CFF) --- */
    --primary-50: #eef4ff;
    --primary-100: #dde9ff;
    --primary-200: #b8d0ff;
    --primary-300: #93b7ff;
    --primary-400: #6fa0ff;
    --primary-500: #4f8cff; /* Brand Primary */
    --primary-600: #3a6fdb;
    --primary-700: #2a55b0;
    --primary-800: #1d3d83;
    --primary-900: #122759;
    --primary-950: #08152f;

    /* --- Secondary Color Scale (Brand Violet #8B5CF6) --- */
    --secondary-50: #f5efff;
    --secondary-100: #ebdfff;
    --secondary-200: #d6bfff;
    --secondary-300: #bfa0ff;
    --secondary-400: #a47cfb;
    --secondary-500: #8b5cf6; /* Brand Secondary */
    --secondary-600: #7341dc;
    --secondary-700: #5b2fb8;
    --secondary-800: #432090;
    --secondary-900: #2d1466;
    --secondary-950: #180a38;

    /* --- Success Color Scale (Green) --- */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* --- Danger Color Scale (Red) --- */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* --- Warning Color Scale (Amber) --- */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* --- Surface & Base Colors (Premium Dark) --- */
    --bg-void: #0a0a0a;
    --bg-surface-0: #0a0a0a;
    --bg-surface-1: #0f1219;
    --bg-surface-2: #111827;
    --bg-surface-3: #1a1c23;
    --bg-surface-4: #23252d;
    --bg-surface-5: #2d303b;
    --bg-surface-6: #383c4a;
    --bg-surface-7: #444859;
    --bg-surface-8: #515669;
    --bg-surface-9: #5e6478;

    /* --- Typography Colors --- */
    --text-pure: #ffffff;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6b6b70;
    --text-quaternary: #4a4a4d;
    --text-disabled: #333336;

    /* --- Spacing Scale --- */
    --space-0: 0px;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;

    /* --- Glassmorphism Engine (Blur & Saturation) --- */
    --glass-blur-none: 0px;
    --glass-blur-sm: 4px;
    --glass-blur-md: 8px;
    --glass-blur-lg: 16px;
    --glass-blur-xl: 24px;
    --glass-blur-2xl: 40px;
    --glass-blur-3xl: 64px;
    --glass-blur-max: 100px;
    
    --glass-sat-none: 100%;
    --glass-sat-low: 120%;
    --glass-sat-mid: 150%;
    --glass-sat-high: 180%;
    --glass-sat-max: 200%;

    /* --- Glass Border & Highlights --- */
    --glass-border-heavy: rgba(255, 255, 255, 0.3);
    --glass-border-mid: rgba(255, 255, 255, 0.15);
    --glass-border-light: rgba(255, 255, 255, 0.08);
    --glass-border-faint: rgba(255, 255, 255, 0.03);
    
    --glass-highlight-strong: inset 0 1px 1px rgba(255, 255, 255, 0.25);
    --glass-highlight-mid: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --glass-highlight-faint: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* --- Box Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    --shadow-glow-primary: 0 0 15px rgba(82, 141, 255, 0.3);
    --shadow-glow-secondary: 0 0 15px rgba(140, 82, 255, 0.3);
    --shadow-glow-danger: 0 0 15px rgba(239, 68, 68, 0.3);

    /* --- Animation Easings --- */
    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --ease-spring-bouncy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* --- Z-Index Hierarchy --- */
    --z-behind: -1;
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-max: 9999;
}

/* ==========================================================================
   02. EXHAUSTIVE CSS RESET & NORMALIZATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
body {
    background-color: var(--bg-void);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    outline: none;
    border: none;
    background: none;
}
button, select {
    text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
    resize: vertical;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
details {
    display: block;
}
summary {
    display: list-item;
}
template {
    display: none;
}
[hidden] {
    display: none !important;
}

/* ==========================================================================
   03. ACCESSIBILITY & CORE STATES
   ========================================================================== */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 4px;
    border-radius: 4px;
}
::selection {
    background-color: rgba(175, 198, 255, 0.3);
    color: var(--primary-100);
    text-shadow: none;
}
::-moz-selection {
    background-color: rgba(175, 198, 255, 0.3);
    color: var(--primary-100);
    text-shadow: none;
}

/* Hardware Accelerated Premium Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ==========================================================================
   04. TYPOGRAPHY SCALES & UTILITIES
   ========================================================================== */
h1, .h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h5, .h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.5; }

p, .p-body { font-size: 1rem; font-weight: 500; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5em; text-wrap: pretty; }
.p-large { font-size: 1.25rem; font-weight: 500; color: var(--text-secondary); line-height: 1.7; text-wrap: pretty; }
.p-small { font-size: 0.875rem; font-weight: 500; color: var(--text-tertiary); line-height: 1.5; }

/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Colors */
.text-pure { color: var(--text-pure); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-disabled { color: var(--text-disabled); }

.text-brand-primary { color: var(--primary-500); }
.text-brand-secondary { color: var(--secondary-500); }
.text-success { color: var(--success-500); }
.text-danger { color: var(--danger-500); }
.text-warning { color: var(--warning-500); }

/* Text Gradients */
.text-gradient-white {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.text-gradient-primary {
    background: linear-gradient(135deg, var(--primary-300) 0%, var(--secondary-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.text-gradient-fire {
    background: linear-gradient(135deg, var(--danger-400) 0%, var(--warning-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Premium Text Glows */
.text-glow-primary { text-shadow: 0 0 20px rgba(175, 198, 255, 0.4), 0 0 40px rgba(175, 198, 255, 0.2); }
.text-glow-secondary { text-shadow: 0 0 20px rgba(208, 188, 255, 0.4), 0 0 40px rgba(208, 188, 255, 0.2); }
.text-glow-danger { text-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2); }

/* Icons */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transition: all 0.3s ease;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 300; }
.icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600; }

/* ==========================================================================
   05. EXHAUSTIVE GLASSMORPHISM ENGINE
   ========================================================================== */
/* Depth 1: Faint Overlay */
.glass-1 {
    background: rgba(20, 20, 25, 0.1);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-faint);
}

/* Depth 2: Standard Base */
.glass-2 {
    background: rgba(20, 20, 25, 0.2);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    border: 1px solid var(--glass-border-faint);
    box-shadow: var(--shadow-sm);
}

/* Depth 3: Standard Panel */
.glass-3 {
    background: rgba(20, 20, 25, 0.3);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--glass-highlight-faint);
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
}

/* Depth 4: Elevated Panel (Cards) */
.glass-4 {
    background: rgba(25, 25, 30, 0.4);
    backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high));
    -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), var(--glass-highlight-subtle);
    transform: translateZ(0);
}

/* Depth 5: Modals & Popovers */
.glass-5 {
    background: rgba(30, 30, 35, 0.6);
    backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max));
    -webkit-backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max));
    border: 1px solid var(--glass-border-light);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), var(--glass-highlight-subtle);
}

/* Depth 6: Heavy Blur (Headers/Navs) */
.glass-6 {
    background: rgba(5, 5, 5, 0.65);
    backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max));
    -webkit-backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max));
    border-bottom: 1px solid var(--glass-border-subtle);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Depth 7: Solid Action Glass */
.glass-7 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--glass-highlight-subtle);
    transition: all 0.3s var(--ease-out);
}
.glass-7:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3), var(--glass-highlight-subtle);
}

/* Base Aliases */
.glass-panel { @extend .glass-4; }
.glass-header { @extend .glass-6; }
.glass-elevated { @extend .glass-5; }
.glass-action { @extend .glass-7; }

/* Abstract Morphing Glow Cards (Mouse Tracking) */
.glow-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.glow-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.25), transparent 40%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.glow-card:hover::before {
    opacity: 1;
}

/* ==========================================================================
   06. AMBIENT BACKGROUNDS & AURORA
   ========================================================================== */
.hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(79, 140, 255, 0.15), transparent 50%),
                radial-gradient(circle at bottom left, rgba(87, 27, 193, 0.15), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.aurora-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--glass-blur-max));
    mix-blend-mode: screen;
}
.aurora-blob-1 {
    background: rgba(79, 140, 255, 0.15);
    width: 60vw; height: 60vw;
    max-width: 800px; max-height: 800px;
    top: -10%; left: -10%;
    animation: blob-float-1 25s infinite alternate ease-in-out;
}
.aurora-blob-2 {
    background: rgba(140, 82, 255, 0.1);
    width: 50vw; height: 50vw;
    max-width: 700px; max-height: 700px;
    bottom: -10%; right: -10%;
    animation: blob-float-2 30s infinite alternate-reverse ease-in-out;
}
.aurora-blob-3 {
    background: rgba(52, 211, 153, 0.05);
    width: 40vw; height: 40vw;
    max-width: 600px; max-height: 600px;
    top: 30%; left: 40%;
    animation: blob-float-3 35s infinite alternate ease-in-out;
}

@keyframes blob-float-1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(5%, 10%) scale(1.1); }
    66% { transform: translate(-5%, 5%) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes blob-float-2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(-10%, -10%) scale(1.2) rotate(180deg); }
    100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}
@keyframes blob-float-3 {
    0% { transform: translate(0, 0) scale(0.8); }
    50% { transform: translate(15%, -15%) scale(1.1); }
    100% { transform: translate(-10%, 10%) scale(0.9); }
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   07. BUTTONS & INTERACTION SURFACES
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: var(--space-4) var(--space-8);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring-soft);
    text-decoration: none;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    user-select: none;
    transform: translateZ(0);
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }
.btn-lg { padding: var(--space-5) var(--space-10); font-size: 1.125rem; }

/* Variants */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-300) 100%);
    color: var(--bg-void);
    box-shadow: 0 0 0 0 rgba(175, 198, 255, 0), 0 4px 15px rgba(175, 198, 255, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 4px rgba(175, 198, 255, 0.1), 0 8px 25px rgba(175, 198, 255, 0.5);
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-300) 100%);
}
.btn-primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(175, 198, 255, 0.2);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-pure);
    box-shadow: var(--glass-highlight-subtle);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), var(--glass-highlight-mid);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger-400);
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
    color: var(--text-pure);
}

/* Shimmer Sweep */
.btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    transition: left 0.7s var(--ease-in-out);
    z-index: 1;
}
.btn-shimmer:hover::after {
    left: 150%;
}

/* Magnetic Interaction Wrapper */
.magnetic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s linear;
}
.magnetic-btn > * {
    transition: transform 0.3s var(--ease-spring-soft), box-shadow 0.3s ease;
    pointer-events: none;
}

/* ==========================================================================
   08. FORM ARCHITECTURE & CUSTOM INPUTS
   ========================================================================== */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    position: relative;
}

.input-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: var(--space-2);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-subtle);
    border-radius: 16px;
    padding: var(--space-4) var(--space-5);
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-pure);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s var(--ease-out);
    outline: none;
    -webkit-appearance: none;
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

input:focus, textarea:focus {
    background: rgba(20, 20, 25, 0.6);
    border-color: var(--primary-500);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 4px rgba(82, 141, 255, 0.15);
}

input:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* iOS Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid var(--glass-border-subtle);
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: var(--text-secondary);
    transition: .4s var(--ease-spring-bouncy);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .toggle-slider {
    background-color: var(--success-500);
    border-color: var(--success-500);
}
input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: #fff;
}
input:focus + .toggle-slider {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   09. CHAT SUB-SYSTEM: LAYOUT & STAGE
   ========================================================================== */
.chat-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: var(--space-3);
    gap: var(--space-3);
    position: relative;
    z-index: var(--z-base);
}

.chat-sidebar {
    width: 320px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: rgba(10, 10, 12, 0.6);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    background: rgba(10, 10, 12, 0.4);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
    overflow: hidden;
}

.chat-panel-right {
    width: 320px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: rgba(10, 10, 12, 0.95);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
    transition: transform 0.5s var(--ease-spring-soft), opacity 0.3s ease;
}
.chat-panel-right.is-closed {
    transform: translateX(120%);
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 6rem 2rem 8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    scroll-behavior: smooth;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   10. CHAT SUB-SYSTEM: BUBBLES & TAILS
   ========================================================================== */
.msg-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    position: relative;
    transition: filter 0.3s ease;
}

.msg-spring {
    animation: spring-up 0.5s var(--ease-spring-bouncy) forwards;
    transform-origin: bottom center;
}

.msg-bubble {
    padding: var(--space-3-5) var(--space-5);
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
}

.msg-wrapper.incoming { align-self: flex-start; align-items: flex-start; }
.msg-bubble.incoming {
    background: rgba(35, 35, 42, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 0.5px solid var(--glass-border-subtle);
    border-radius: 20px 20px 20px 4px;
    color: var(--text-pure);
    box-shadow: var(--shadow-md);
}

.msg-wrapper.outgoing { align-self: flex-end; align-items: flex-end; }
.msg-bubble.outgoing {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
    border: 0.5px solid var(--glass-border-light);
    border-radius: 20px 20px 4px 20px;
    color: var(--text-pure);
    box-shadow: 0 4px 20px rgba(82, 141, 255, 0.25);
}

.msg-meta {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Message Hover Actions (Context) */
.msg-hover-actions {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    display: flex;
    gap: 4px;
}
.msg-wrapper.incoming .msg-hover-actions { right: -50px; }
.msg-wrapper.outgoing .msg-hover-actions { left: -50px; }
.msg-wrapper:hover .msg-hover-actions {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* ==========================================================================
   11. CHAT SUB-SYSTEM: COMPOSER & MEDIA
   ========================================================================== */
.composer-area {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    z-index: var(--z-elevated);
    pointer-events: none; 
}

.composer-box {
    pointer-events: auto; 
    max-width: 900px;
    margin: 0 auto;
    background: rgba(20, 20, 25, 0.85);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--glass-border-subtle);
    border-radius: 28px;
    padding: var(--space-1-5);
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}
.composer-box:focus-within {
    background: rgba(26, 26, 32, 0.95);
    border-color: var(--glass-border-mid);
}

.composer-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-pure);
    font-size: 1rem;
    resize: none;
    max-height: 160px;
    padding: 0.75rem 0.5rem;
    outline: none;
}

.composer-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-pure); }
.composer-btn.is-active {
    background: var(--primary-500);
    color: var(--bg-void);
    transform: scale(1);
}

/* Typing & Audio */
.audio-waves { display: flex; align-items: center; gap: 3px; height: 24px; flex: 1; }
.wave-bar {
    width: 3px; background: rgba(255,255,255,0.6); border-radius: 3px;
    animation: wave-simulate 1s ease-in-out infinite alternate;
}
.typing-dots { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px; }
.typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary);
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

/* ==========================================================================
   12. CONTEXT MENUS, MODALS & OVERLAYS
   ========================================================================== */
.context-menu {
    position: fixed;
    background: rgba(25, 25, 30, 0.75);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 0.5px solid var(--glass-border-mid);
    border-radius: 16px;
    padding: var(--space-2);
    min-width: 200px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transform-origin: top left;
    transition: opacity 0.2s ease, transform 0.2s var(--ease-spring-bouncy);
    z-index: var(--z-popover);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}
.context-menu.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }

.context-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border-radius: 8px;
    color: var(--text-pure);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s ease;
    width: 100%;
}
.context-item:hover { background: rgba(255,255,255,0.1); }
.context-item.danger { color: var(--danger-400); }
.context-item.danger:hover { background: rgba(239, 68, 68, 0.2); }

/* ==========================================================================
   13. TELEMETRY & DATA VISUALIZATIONS
   ========================================================================== */
.telemetry-graph {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
}
.telemetry-bar {
    width: 3px;
    background: var(--primary-500);
    border-radius: 2px;
    animation: pulse-telemetry 1s infinite alternate ease-in-out;
}
.cipher-text {
    word-break: break-all;
    opacity: 0.7;
    font-family: 'JetBrains Mono', monospace;
}
.cipher-highlight { color: var(--primary-400); }

/* ==========================================================================
   14. EXTENSIVE KEYFRAME LIBRARY (CORE PHYSICS)
   ========================================================================== */
@keyframes spring-up {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes wave-simulate {
    0% { transform: scaleY(0.2); opacity: 0.5; }
    100% { transform: scaleY(1); opacity: 1; }
}
@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}
@keyframes pulse-telemetry {
    0% { transform: scaleY(0.3); opacity: 0.4; }
    100% { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   08. ADVANCED FORM ARCHITECTURE & INPUTS
   ========================================================================== */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    position: relative;
}

.input-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Premium Text Inputs & Textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    border: 1px solid var(--glass-border-subtle);
    border-radius: 16px;
    padding: var(--space-4) var(--space-5);
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-pure);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s var(--ease-out);
    outline: none;
    -webkit-appearance: none;
}

input::placeholder, textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: 500;
}

input:focus, textarea:focus {
    background: rgba(20, 20, 25, 0.6);
    border-color: var(--primary-500);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 4px rgba(82, 141, 255, 0.15);
}

input:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.2);
}

/* Input Icons / Floating Elements */
.input-icon-left, .input-icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.input-icon-left { left: var(--space-4); }
.input-icon-right { right: var(--space-4); }
.input-group:focus-within .input-icon-left,
.input-group:focus-within .input-icon-right {
    color: var(--primary-400);
}

/* iOS Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.08);
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 34px;
    border: 1px solid var(--glass-border-subtle);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px; width: 22px;
    left: 3px; bottom: 3px;
    background-color: var(--text-secondary);
    transition: 0.4s var(--ease-spring-bouncy);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--success-500);
    border-color: var(--success-400);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 10px rgba(16, 185, 129, 0.2);
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: #ffffff;
}
.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Custom Checkboxes */
.checkbox-custom {
    appearance: none;
    background-color: rgba(255,255,255,0.05);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid var(--glass-border-mid);
    border-radius: 0.35em;
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.checkbox-custom::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--bg-void);
    background-color: var(--bg-void);
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox-custom:checked {
    background-color: var(--primary-500);
    border-color: var(--primary-400);
}
.checkbox-custom:checked::before {
    transform: scale(1);
}

/* ==========================================================================
   09. BENTO GRID ARCHITECTURE (LAYOUTS)
   ========================================================================== */
.bento-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-6);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
    grid-auto-flow: dense;
}

.bento-card {
    position: relative;
    border-radius: 32px;
    padding: var(--space-10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 25, 0.4);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border-subtle);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    transition: transform 0.4s var(--ease-spring-soft), box-shadow 0.4s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Granular Grid Spans */
.span-12 { grid-column: span 12; }
.span-10 { grid-column: span 10; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* Responsive Bento */
@media (max-width: 1024px) {
    .bento-grid { display: flex; flex-direction: column; gap: var(--space-4); }
    .bento-card { padding: var(--space-8); border-radius: 24px; }
}

/* Icon Enclosures */
.bento-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    transition: transform 0.5s var(--ease-spring-bouncy), background 0.3s ease;
    border: 1px solid transparent;
}
.bento-card:hover .bento-icon-wrapper {
    transform: scale(1.1) rotate(-8deg);
}
.icon-blue { background: rgba(82, 141, 255, 0.1); border-color: rgba(82, 141, 255, 0.2); color: var(--primary-400); }
.icon-purple { background: rgba(140, 82, 255, 0.1); border-color: rgba(140, 82, 255, 0.2); color: var(--secondary-400); }
.icon-red { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: var(--danger-400); }
.icon-green { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); color: var(--success-400); }

/* ==========================================================================
   10. CHAT SUB-SYSTEM: SPATIAL STAGE (room.html)
   ========================================================================== */
.chat-app-wrapper {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: var(--space-3);
    gap: var(--space-3);
    position: relative;
    z-index: var(--z-base);
    overflow: hidden;
}

/* Left Nav Pane (Sessions) */
.chat-pane-left {
    width: 320px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: rgba(10, 10, 12, 0.65);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
    backdrop-filter: blur(20px);
    overflow: hidden;
}
@media (max-width: 1024px) {
    .chat-pane-left { display: none; }
}

/* Center Stage (Messages) */
.chat-pane-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    background: rgba(10, 10, 12, 0.4);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Right Pane (Intelligence/Details) */
.chat-pane-right {
    width: 340px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: rgba(10, 10, 12, 0.95);
    border-radius: 16px;
    border: 1px solid var(--glass-border-subtle);
    box-shadow: -20px 0 50px rgba(0,0,0,0.5);
    transition: transform 0.5s var(--ease-spring-soft), opacity 0.4s ease;
    z-index: var(--z-above);
}
.chat-pane-right.is-closed {
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
    position: absolute; /* Frees layout space */
}
@media (max-width: 1280px) {
    .chat-pane-right {
        position: absolute;
        right: var(--space-3);
        top: var(--space-3);
        bottom: var(--space-3);
        z-index: var(--z-modal);
    }
}

/* Chat Header (Sticky Inside Stage) */
.chat-stage-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-bottom: 1px solid var(--glass-border-subtle);
    z-index: var(--z-sticky);
}

/* Message Viewport */
.chat-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 100px var(--space-8) 120px var(--space-8); /* Space for header/footer */
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    scroll-behavior: smooth;
    position: relative;
    z-index: var(--z-base);
}
@media (max-width: 768px) {
    .chat-viewport { padding: 90px var(--space-4) 110px var(--space-4); }
}

/* ==========================================================================
   11. CHAT SUB-SYSTEM: BUBBLES, TAILS & MEDIA
   ========================================================================== */
.msg-container {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    position: relative;
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Alignment */
.msg-container.incoming { align-self: flex-start; align-items: flex-start; }
.msg-container.outgoing { align-self: flex-end; align-items: flex-end; }

/* The Bubble Core */
.msg-bubble {
    padding: var(--space-3-5) var(--space-5);
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
}

.msg-bubble.incoming {
    background: rgba(35, 35, 42, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 0.5px solid var(--glass-border-subtle);
    border-radius: 20px 20px 20px 4px; /* Native iOS iMessage Left Tail */
    color: var(--text-pure);
    box-shadow: var(--shadow-md);
}

.msg-bubble.outgoing {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
    border: 0.5px solid var(--glass-border-light);
    border-radius: 20px 20px 4px 20px; /* Native iOS iMessage Right Tail */
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(82, 141, 255, 0.25);
}

/* Rich Media (Images, Videos) */
.msg-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 0.5px solid var(--glass-border-light);
    box-shadow: var(--shadow-lg);
    display: block;
}
.msg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-expo);
}
.msg-media:hover img {
    transform: scale(1.05);
}
.msg-media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    transition: background 0.3s ease;
    z-index: 1;
}
.msg-media:hover .msg-media-overlay { background: transparent; }

.msg-media-badge {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    padding: var(--space-1) var(--space-2);
    border-radius: 8px;
    border: 1px solid var(--glass-border-subtle);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

/* Audio Player Component */
.msg-audio {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 280px;
    padding: var(--space-3) var(--space-4);
}
.audio-play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--text-pure);
    color: var(--bg-void);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
    transition: transform 0.2s var(--ease-spring-bouncy);
}
.audio-play-btn:active { transform: scale(0.9); }
.audio-waveform {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}
.wave-stick {
    flex: 1;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    animation: wave-play 1s ease-in-out infinite alternate;
    animation-play-state: paused;
}
.msg-audio.is-playing .wave-stick { animation-play-state: running; }

@keyframes wave-play {
    0% { transform: scaleY(0.2); opacity: 0.5; }
    100% { transform: scaleY(1); opacity: 1; }
}

/* Timestamp & Meta */
.msg-footer {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.msg-status-icon {
    font-size: 14px;
    color: var(--primary-300);
}

/* Hover Quick Actions (Context Menus Triggers) */
.msg-hover-actions {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    display: flex;
    gap: 4px;
    background: rgba(20, 20, 25, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 4px;
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--shadow-md);
}
.msg-container.incoming .msg-hover-actions { right: -60px; }
.msg-container.outgoing .msg-hover-actions { left: -60px; flex-direction: row-reverse; }
.msg-container:hover .msg-hover-actions {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.msg-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.msg-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-pure);
}
.msg-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-400);
}

/* System Messages (Security Alerts) */
.msg-system {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
    width: 100%;
}
.msg-system-box {
    background: rgba(82, 141, 255, 0.1);
    border: 1px solid rgba(82, 141, 255, 0.2);
    padding: var(--space-3) var(--space-5);
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ==========================================================================
   12. CHAT COMPOSER (INPUT AREA)
   ========================================================================== */
.composer-dock {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.8) 50%, transparent 100%);
    z-index: var(--z-elevated);
    pointer-events: none; /* Allows scrolling behind */
}
@media (max-width: 768px) {
    .composer-dock { padding: var(--space-3); }
}

.composer-bar {
    pointer-events: auto;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(20, 20, 25, 0.85);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--glass-border-mid);
    border-radius: 32px;
    padding: var(--space-1-5);
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), var(--glass-highlight);
    transition: all 0.3s ease;
}
.composer-bar:focus-within {
    background: rgba(26, 26, 32, 0.98);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), var(--glass-highlight-strong);
}

.composer-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-pure);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    resize: none;
    max-height: 180px;
    padding: 0.85rem 0.5rem;
    outline: none;
}
.composer-textarea::placeholder { color: var(--text-tertiary); }

.composer-action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-action:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-pure);
}

.composer-send {
    background: var(--primary-500);
    color: var(--bg-void);
    box-shadow: 0 4px 15px rgba(82, 141, 255, 0.4);
    transform: scale(0) rotate(-45deg);
    opacity: 0;
    position: absolute;
    right: 6px; bottom: 8px;
    transition: all 0.3s var(--ease-spring-bouncy);
}
.composer-send.is-visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Composer Attachment Popover */
.attach-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 240px;
    background: rgba(25, 25, 30, 0.85);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--glass-border-mid);
    border-radius: 20px;
    padding: var(--space-2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), var(--glass-highlight);
    transform-origin: bottom left;
    transition: opacity 0.2s ease, transform 0.3s var(--ease-spring-soft);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9) translateY(10px);
    z-index: var(--z-popover);
}
.attach-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.attach-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 12px;
    transition: background 0.2s ease;
    text-align: left;
}
.attach-option:hover { background: rgba(255,255,255,0.1); }
.attach-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s var(--ease-spring-bouncy);
}
.attach-option:hover .attach-icon { transform: scale(1.15); }

/* ==========================================================================
   13. GLOBAL MODALS, CONTEXT MENUS & OVERLAYS
   ========================================================================== */

/* App-wide Context Menu (Right Click / Long Press) */
.global-context-menu {
    position: fixed;
    z-index: var(--z-max);
    background: rgba(30, 30, 35, 0.85);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 0.5px solid var(--glass-border-heavy);
    border-radius: 16px;
    padding: var(--space-2);
    min-width: 220px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.2s var(--ease-spring-bouncy);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}
.global-context-menu.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.context-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border-radius: 8px;
    color: var(--text-pure);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
    cursor: pointer;
}
.context-row:hover { background: rgba(255,255,255,0.15); }
.context-row.danger { color: var(--danger-400); }
.context-row.danger:hover { background: rgba(239, 68, 68, 0.25); color: var(--danger-300); }
.context-divider { height: 1px; background: rgba(255,255,255,0.1); margin: var(--space-1) var(--space-2); }

/* Cinematic Lightbox (Images / Video) */
.lightbox-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: var(--z-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.lightbox-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    z-index: 2;
}

.lightbox-content {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.5s var(--ease-spring-soft);
}
.lightbox-modal.is-open .lightbox-content {
    transform: scale(1) translateY(0);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-max);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.toast-msg {
    background: rgba(30, 30, 35, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-mid);
    color: var(--text-pure);
    padding: var(--space-3) var(--space-5);
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    animation: toast-in 0.4s var(--ease-spring-bouncy) forwards, toast-out 0.4s ease forwards 3s;
}
@keyframes toast-in {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* ==========================================================================
   14. EXTENDED KEYFRAME & PHYSICS LIBRARY
   ========================================================================== */

/* Boot Sequence Handshake Terminal */
.boot-terminal-line {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--primary-500);
    animation: type-line 1s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes type-line { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--primary-500); } }

/* Destruct / Burn Animation */
.burn-effect {
    animation: burn-out 0.6s var(--ease-in) forwards;
    transform-origin: center;
}
@keyframes burn-out {
    0% { filter: blur(0) sepia(0) hue-rotate(0) saturate(1); opacity: 1; transform: scale(1); }
    50% { filter: blur(4px) sepia(1) hue-rotate(-50deg) saturate(5); opacity: 0.8; transform: scale(1.05) translateY(-5px); }
    100% { filter: blur(10px) sepia(1) hue-rotate(-50deg) saturate(10); opacity: 0; transform: scale(0.9) translateY(-20px); }
}

/* Network Telemetry Graph */
.telemetry-node-ping {
    animation: node-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes node-ping {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}

/* Smooth Skeleton Loader */
.skeleton-block {
    background: rgba(255,255,255,0.05);
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite linear forwards;
    border-radius: 8px;
}

/* ==========================================================================
   15. ADVANCED MEDIA QUERIES & SAFEZONES
   ========================================================================== */

/* PWA Notches & Safe Areas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .composer-dock { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
    .chat-pane-left, .chat-pane-right { padding-bottom: env(safe-area-inset-bottom); }
}

/* High Resolution / 4K monitors */
@media (min-width: 2560px) {
    html { font-size: 20px; } /* Scales up the entire rem-based system */
    .chat-app-layout { max-width: 2200px; }
}

/* Strict Mobile Overrides */
@media (max-width: 768px) {
    .chat-bubble { padding: var(--space-3) var(--space-4); font-size: 0.9rem; }
    .msg-wrapper { max-width: 90%; }
    
    /* Disable expensive blur filters on mobile for battery life */
    .glass-header { backdrop-filter: blur(20px); }
    .glass-panel { backdrop-filter: blur(15px); }
    .chat-pane-center { box-shadow: none; border-radius: 0; border-left: none; border-right: none; }
}

/* ==========================================================================
   16. ACCESSIBILITY (A11Y) & REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .msg-spring {
        opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
    }
    .btn-shimmer::after { display: none; }
}

@media (prefers-contrast: high) {
    .glass-panel, .glass-header, .bubble-incoming, .composer-box {
        background: var(--bg-void) !important;
        border: 2px solid #ffffff !important;
        backdrop-filter: none !important;
    }
    .text-secondary, .text-tertiary { color: #dddddd !important; }
    .btn-primary { background: #ffffff !important; color: #000000 !important; }
}

/* Print Styles (Rare for chat, but necessary for enterprise) */
@media print {
    body { background: #fff; color: #000; }
    .chat-sidebar, .chat-pane-right, .composer-dock, .glass-header { display: none !important; }
    .msg-bubble { background: none; border: 1px solid #000; color: #000; box-shadow: none; }
    .msg-bubble.outgoing { border-style: dashed; }
}
/* ==========================================================================
   17. AVATARS & PRESENCE SUBSYSTEM
   ========================================================================== */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-surface-3);
    color: var(--text-pure);
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1);
    border: 1px solid var(--glass-border-subtle);
    transition: transform 0.3s var(--ease-spring-bouncy), box-shadow 0.3s ease;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Sizes */
.avatar-xs { width: 24px; height: 24px; font-size: 0.65rem; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.875rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-2xl { width: 96px; height: 96px; font-size: 2rem; }

/* Ghost Mode Variant (Anonymous) */
.avatar-ghost {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
}
.avatar-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-pure);
    border-style: solid;
}

/* Presence Indicators (Status Dots) */
.presence-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    background-color: var(--text-disabled);
    border: 2px solid var(--bg-surface-1);
    z-index: 2;
    transition: background-color 0.3s ease;
}
.presence-online { background-color: var(--success-500); box-shadow: 0 0 8px var(--success-glow); }
.presence-offline { background-color: var(--text-disabled); }
.presence-dnd { background-color: var(--danger-500); }
.presence-idle { background-color: var(--warning-500); }

/* Avatar Groups (Overlapping) */
.avatar-group {
    display: flex;
    align-items: center;
}
.avatar-group .avatar {
    margin-left: -0.5rem;
    border: 2px solid var(--bg-surface-1);
}
.avatar-group .avatar:hover {
    transform: translateY(-4px);
    z-index: 10;
}
.avatar-group .avatar:first-child { margin-left: 0; }

/* ==========================================================================
   18. TOOLTIPS & FLOATING ELEMENTS
   ========================================================================== */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border-mid);
    color: var(--text-pure);
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-1-5) var(--space-3);
    border-radius: 8px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: all 0.2s var(--ease-spring-bouncy);
}

/* Tooltip Directions */
.tooltip-top { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(0.95) translateY(5px); }
.tooltip-bottom { top: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(0.95) translateY(-5px); }
.tooltip-left { right: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(0.95) translateX(5px); }
.tooltip-right { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(0.95) translateX(-5px); }

/* Hover Triggers */
.tooltip-wrapper:hover .tooltip-top { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
.tooltip-wrapper:hover .tooltip-bottom { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
.tooltip-wrapper:hover .tooltip-left { opacity: 1; transform: translateY(-50%) scale(1) translateX(0); }
.tooltip-wrapper:hover .tooltip-right { opacity: 1; transform: translateY(-50%) scale(1) translateX(0); }

/* ==========================================================================
   19. INTERACTIVE FORMS, SLIDERS & VALIDATION
   ========================================================================== */
/* Form Validation States */
.input-group.is-error input,
.input-group.is-error textarea {
    border-color: var(--danger-500);
    background: rgba(239, 68, 68, 0.05);
}
.input-group.is-error input:focus,
.input-group.is-error textarea:focus {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.input-error-msg {
    color: var(--danger-400);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: 4px;
    animation: slide-down 0.3s var(--ease-spring-soft);
}

.input-group.is-success input {
    border-color: var(--success-500);
    background: rgba(16, 185, 129, 0.05);
}

/* Custom Range Sliders (Settings Panel) */
.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    outline: none;
    transition: background 0.2s;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-pure);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring-bouncy), background 0.2s;
}
.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.range-slider::-webkit-slider-thumb:active {
    transform: scale(0.9);
    background: var(--primary-300);
}

/* ==========================================================================
   20. SEGMENTED CONTROLS & TABS (SETTINGS UI)
   ========================================================================== */
.segmented-control {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: var(--space-1);
    border-radius: 12px;
    border: 1px solid var(--glass-border-subtle);
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.segmented-btn {
    flex: 1;
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    border-radius: 8px;
}
.segmented-btn:hover { color: var(--text-secondary); }
.segmented-btn.active { color: var(--text-pure); }

/* The sliding active background requires JS to set width/transform, 
   but this is the CSS fallback architecture */
.segmented-indicator {
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: var(--space-1);
    width: calc(33.33% - var(--space-1)); /* Assumes 3 items */
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
    transition: transform 0.4s var(--ease-spring-bouncy);
}

/* ==========================================================================
   21. PROGRESS, SPINNERS & SKELETON STATES
   ========================================================================== */
/* Circular Progress / Spinners */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin-linear 0.8s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }
.spinner-brand { border-top-color: var(--primary-300); }
.spinner-danger { border-top-color: var(--danger-400); }

@keyframes spin-linear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Linear Indeterminate Progress */
.progress-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.progress-bar-indeterminate {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
    border-radius: 4px;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); width: 30%; }
    50% { width: 50%; }
    100% { transform: translateX(400%); width: 30%; }
}

/* Standard Linear Progress (Determinate) */
.progress-bar-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 4px;
    transition: width 0.4s var(--ease-spring-soft);
    box-shadow: 0 0 10px rgba(82, 141, 255, 0.5);
}

/* ==========================================================================
   22. CODE SNIPPETS & SYNTAX HIGHLIGHTING (CHAT MEDIA)
   ========================================================================== */
.code-block-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0d0d12;
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--shadow-lg);
    margin: var(--space-2) 0;
}
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border-faint);
}
.code-language-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.code-copy-btn {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.code-copy-btn:hover { color: var(--text-pure); }

.code-content {
    padding: var(--space-4);
    margin: 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e5e7eb;
}

/* Basic Syntax Highlighting Defaults */
.token.keyword { color: #c678dd; } /* Purple */
.token.string { color: #98c379; } /* Green */
.token.function { color: #61afef; } /* Blue */
.token.comment { color: #5c6370; font-style: italic; } /* Gray */
.token.number { color: #d19a66; } /* Orange */
.token.operator { color: #56b6c2; } /* Cyan */

/* Inline Code Snippet */
code.inline-code {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-200);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   23. DATA TABLES & SETTINGS GRIDS (INTELLIGENCE PANEL)
   ========================================================================== */
.data-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--glass-border-subtle);
    background: rgba(20, 20, 25, 0.3);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}
.data-table th, .data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--glass-border-faint);
}
.data-table th {
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.2);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.2s ease; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Status Badges within Tables */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-success { background: rgba(16, 185, 129, 0.15); color: var(--success-400); border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning-400); border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger-400); border: 1px solid rgba(239, 68, 68, 0.3); }

/* ==========================================================================
   24. CORE UTILITY CLASSES (MINI-FRAMEWORK)
   ========================================================================== */
/* Z-Index Hierarchy Utilities */
.z-behind { z-index: var(--z-behind); }
.z-base { z-index: var(--z-base); }
.z-above { z-index: var(--z-above); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal { z-index: var(--z-modal); }
.z-toast { z-index: var(--z-toast); }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flexbox Utilities */
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }

/* Gap Utilities */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* Border Radius Utilities */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded-md { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-2xl { border-radius: 24px !important; }
.rounded-3xl { border-radius: 32px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Position Utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Interaction Overrides */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.user-select-none { user-select: none !important; }

/* ==========================================================================
   25. ADVANCED PAGE TRANSITIONS & STAGGERED LOADS
   ========================================================================== */
/* Initial Page Load State */
body.is-loading {
    overflow: hidden;
    pointer-events: none;
}

/* Staggered Fade Up Array (For Lists & Grids) */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }

/* Page Wipe Transition */
.page-wipe-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-max);
    background: var(--bg-void);
    transform-origin: top;
    animation: wipe-down 0.8s var(--ease-expo) forwards;
    pointer-events: none;
}
@keyframes wipe-down {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}

/* Split Text Reveal (Requires wrapping words in spans) */
.text-split-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotate(5deg);
    animation: split-up 0.8s var(--ease-spring-soft) forwards;
}
@keyframes split-up {
    0% { opacity: 0; transform: translateY(100%) rotate(5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ==========================================================================
   26. HOLOGRAPHIC & 3D HOVER EFFECTS (PREMIUM TOUCHES)
   ========================================================================== */
/* Holographic Glass Card */
.holo-card {
    position: relative;
    overflow: hidden;
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-subtle);
    border-radius: 24px;
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-spring-soft);
}
.holo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 20%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(82, 141, 255, 0.2) 50%,
        rgba(140, 82, 255, 0.2) 60%,
        transparent 80%
    );
    background-size: 200% 200%;
    background-position: 200% 0;
    opacity: 0;
    transition: opacity 0.3s ease, background-position 0.6s var(--ease-out);
    pointer-events: none;
    z-index: 2;
}
.holo-card:hover {
    transform: translateY(-5px) scale(1.02);
}
.holo-card:hover::after {
    opacity: 1;
    background-position: -50% 100%;
}

/* 3D Tilt Wrapper (Requires JS for precise X/Y, but this is the CSS setup) */
.tilt-wrapper {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.tilt-element {
    transition: transform 0.1s linear;
    will-change: transform;
}
.tilt-element-inner {
    transform: translateZ(30px); /* Pushes content out from background */
}

/* CSS-Only Approximate Tilt */
.css-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale3d(1.02, 1.02, 1.02);
    box-shadow: 15px 15px 30px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.2);
}

/* ==========================================================================
   27. CHAT MICRO-INTERACTIONS (READ RECEIPTS & VOICE)
   ========================================================================== */
/* Read Receipt Morphing (Single tick to Double tick) */
.receipt-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-flex;
    color: var(--text-tertiary);
    transition: color 0.3s ease;
}
.receipt-icon.is-read {
    color: var(--primary-400);
}
.receipt-tick {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s var(--ease-spring-bouncy);
}
.receipt-icon .tick-1 { opacity: 1; transform: scale(1); }
.receipt-icon.is-read .tick-2 {
    opacity: 1; 
    transform: scale(1) translateX(4px); 
    animation: pop-tick 0.4s var(--ease-spring-bouncy) forwards;
}
@keyframes pop-tick {
    0% { transform: scale(0) translateX(0); opacity: 0; }
    50% { transform: scale(1.2) translateX(6px); opacity: 1; }
    100% { transform: scale(1) translateX(4px); opacity: 1; }
}

/* Voice Record Active Pulse */
.mic-recording-active {
    position: relative;
    color: var(--danger-400) !important;
}
.mic-recording-active::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--danger-500);
    opacity: 0.4;
    animation: mic-pulse 1.5s infinite var(--ease-out);
    z-index: -1;
}
@keyframes mic-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

/* Attachment Upload Progress Spinner */
.upload-spinner {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
}
.upload-spinner svg circle {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: dash-fill 2s var(--ease-in-out) forwards;
}
@keyframes dash-fill {
    to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   28. ATTENTION DIRECTORS & BADGES
   ========================================================================== */
/* Ping Rings (For new messages or online status) */
.ping-ring {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    top: 0; left: 0;
}
.ping-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: ping-expand 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping-expand {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}

/* Notification Badge with Spring Pop */
.badge-notification {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger-500);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-surface-2);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.5);
    animation: badge-pop 0.4s var(--ease-spring-bouncy) forwards;
    transform: scale(0);
}
@keyframes badge-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Glowing Border Pulse (For active input fields) */
.border-glow-active {
    position: relative;
}
.border-glow-active::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-400), var(--secondary-400), var(--primary-400));
    background-size: 200% 100%;
    z-index: -1;
    animation: border-flow 3s linear infinite;
    opacity: 0.5;
}
@keyframes border-flow {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   29. EXTENDED SCROLL REVEAL LIBRARY (AOS STYLE)
   ========================================================================== */
/* Zoom In */
.reveal-zoom-in {
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.8s var(--ease-spring-soft);
}
.reveal-zoom-in.is-revealed { opacity: 1; transform: scale(1); }

/* Flip Up (3D) */
.reveal-flip-up {
    opacity: 0;
    transform: perspective(1000px) rotateX(45deg);
    transform-origin: bottom center;
    transition: all 0.8s var(--ease-spring-soft);
}
.reveal-flip-up.is-revealed { opacity: 1; transform: perspective(1000px) rotateX(0deg); }

/* Slide Up Fade */
.reveal-slide-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s var(--ease-out);
}
.reveal-slide-up.is-revealed { opacity: 1; transform: translateY(0); }

/* Rotate In */
.reveal-rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: all 0.8s var(--ease-spring-soft);
}
.reveal-rotate-in.is-revealed { opacity: 1; transform: rotate(0deg) scale(1); }

/* ==========================================================================
   30. CYBERPUNK / GLITCH / DESTRUCTION EFFECTS
   ========================================================================== */
/* Used for the "Vanish" or Room Destruction Sequence */
.glitch-container {
    position: relative;
}
.glitch-active {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8));
    color: var(--danger-400);
}
.glitch-active::before,
.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.glitch-active::before {
    left: 2px;
    text-shadow: -2px 0 var(--danger-500);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-active::after {
    left: -2px;
    text-shadow: -2px 0 var(--primary-500);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-10deg); }
    40% { transform: skew(10deg); }
    60% { transform: skew(-5deg); }
    80% { transform: skew(5deg); }
    100% { transform: skew(0deg); }
}

/* Room Wipe Effect (Visual Deletion) */
.room-wipe-active {
    animation: room-disintegrate 1s var(--ease-in) forwards;
    pointer-events: none;
}
@keyframes room-disintegrate {
    0% { filter: blur(0) contrast(1); opacity: 1; transform: scale(1); }
    40% { filter: blur(4px) contrast(2) hue-rotate(90deg); opacity: 0.8; transform: scale(1.05) skewX(2deg); }
    80% { filter: blur(20px) contrast(3) invert(1); opacity: 0.4; transform: scale(0.9) translateY(-20px); box-shadow: inset 0 0 100px red; }
    100% { filter: blur(40px); opacity: 0; transform: scale(0.8) translateY(-50px); display: none; }
}

/* Static Noise Overlay (For destroyed state) */
.static-noise-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-max);
    opacity: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    transition: opacity 0.5s ease;
}
.static-noise-bg.is-active {
    opacity: 0.15;
    animation: noise-jitter 0.1s infinite;
}
@keyframes noise-jitter {
    0% { transform: translate(0,0); }
    25% { transform: translate(1%, -1%); }
    50% { transform: translate(-1%, 1%); }
    75% { transform: translate(-1%, -1%); }
    100% { transform: translate(1%, 1%); }
}
/* ==========================================================================
   STICKY FOOTER FIX (Forces footer to bottom of short pages)
   ========================================================================== */
html {
    height: 100%; /* Required for body to calculate 100vh correctly */
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

main, 
.flex-grow {
    flex: 1 0 auto !important; /* Forces the main container to stretch and fill all empty space */
    width: 100%;
}

footer {
    flex-shrink: 0 !important; /* Prevents the footer from being compressed */
    margin-top: auto !important; /* Physically pushes the footer to the bottom boundary */
    width: 100%;
}
/* ==========================================================================
   FINAL SCROLL FIX (REMOVES MOUSEWHEEL TRAP)
   ========================================================================== */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* HTML owns the scroll wheel */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* CRITICAL: Must be visible to prevent mouse trap */
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
}

main,
.flex-grow,
section,
.bento-container {
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
    position: static !important;
    flex: 1 0 auto !important; /* Pushes footer to bottom */
}

footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100%;
}

/* Ensure background decor doesn't block clicks/scrolls */
.fixed.inset-0,
.aurora-container,
.aurora-blob,
.aurora-bg {
    pointer-events: none !important;
    user-select: none !important;
}
/* ==========================================================================
   FINAL SCROLL & STICKY SIDEBAR FIX
   ========================================================================== */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* HTML owns the scroll wheel */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: clip !important; /* CRITICAL: 'clip' stops horizontal scrolling WITHOUT breaking sticky sidebars */
    overflow-y: visible !important; 
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
}

main,
.flex-grow,
section,
.bento-container {
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important; /* CRITICAL: Must be visible for sticky to work */
    position: static !important;
    flex: 1 0 auto !important; /* Pushes footer to bottom */
}

footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100%;
}

/* Ensure background decor doesn't block clicks/scrolls */
.fixed.inset-0,
.aurora-container,
.aurora-blob,
.aurora-bg {
    pointer-events: none !important;
    user-select: none !important;
}
/* ==========================================================================
   ULTRA-GLASS & MAX-ROUNDED OVERRIDES (VISION-OS AESTHETIC)
   ========================================================================== */

/* 1. Max-Rounded App Panels with High Transparency */
.chat-pane-left,
.chat-pane-center,
.chat-pane-right,
.chat-main,
aside.glass-panel {
    border-radius: 32px !important;
    background: rgba(10, 10, 12, 0.25) !important; /* Highly transparent */
    backdrop-filter: blur(40px) saturate(180%) !important; /* Heavy glass distortion */
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 2. Ultra-Rounded Message Bubbles */
.bubble-incoming,
.msg-bubble.incoming {
    background: rgba(30, 30, 35, 0.4) !important; /* Dropped opacity from 0.85 to 0.4 */
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    border-radius: 28px 28px 28px 8px !important; /* Smoother, larger curves */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bubble-outgoing,
.msg-bubble.outgoing {
    /* Converted solid gradient to translucent RGBA gradient */
    background: linear-gradient(135deg, rgba(82, 141, 255, 0.55) 0%, rgba(140, 82, 255, 0.55) 100%) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    border-radius: 28px 28px 8px 28px !important; /* Smoother, larger curves */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(82, 141, 255, 0.15) !important;
}

/* 3. The Composer (Perfect Pill Shape & Pure Glass) */
.composer-bar,
.chat-composer,
.flex.items-end.gap-2.bg-\[\#141419\]\/90 {
    border-radius: 99px !important; /* Perfect Pill Shape */
    background: rgba(20, 20, 25, 0.35) !important;
    backdrop-filter: blur(50px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    padding: 0.5rem 0.5rem !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Adjust text area padding to fit inside the new pill shape */
.composer-textarea,
#message-input {
    padding: 0.8rem 1.25rem !important;
}

/* 4. Media & System Alerts */
.msg-media,
.msg-media img,
.relative.rounded-\[16px\] {
    border-radius: 24px !important; /* Softer media corners */
}

.msg-system-box,
.bg-primary\/10.border-primary\/20 {
    border-radius: 28px !important;
    background: rgba(82, 141, 255, 0.08) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* 5. App Headers (More Glassy) */
.chat-stage-header,
.glass-header {
    background: rgba(10, 10, 12, 0.3) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/**
 * ==========================================================================
 * NYCHAT OS - MASTER STYLESHEET (ENTERPRISE GLASSMORPHISM EDITION)
 * Architecture: Scalable Ultra-Glass, 3D Spatial Layouts & Motion Physics
 * ==========================================================================
 */

/* ==========================================================================
   01. EXHAUSTIVE DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* --- Primary Color Scale (Indigo/Blue) --- */
    --primary-50: #f0f5ff;
    --primary-100: #e6eeff;
    --primary-200: #c9dbff;
    --primary-300: #afc6ff;
    --primary-400: #82abff;
    --primary-500: #528dff; /* Brand Primary */
    --primary-600: #2b61d6;
    --primary-700: #004398;
    --primary-800: #002d6c;
    --primary-900: #001a43;
    --primary-950: #000d24;

    /* --- Secondary Color Scale (Purple) --- */
    --secondary-50: #fcfaff;
    --secondary-100: #f2e8ff;
    --secondary-200: #e3cfff;
    --secondary-300: #d0bcff;
    --secondary-400: #b08dff;
    --secondary-500: #8c52ff; /* Brand Secondary */
    --secondary-600: #6b2be0;
    --secondary-700: #571bc1;
    --secondary-800: #420b9e;
    --secondary-900: #2a007a;
    --secondary-950: #1a004d;

    /* --- Success Color Scale (Green) --- */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* --- Danger Color Scale (Red) --- */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* --- Warning Color Scale (Amber) --- */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* --- Surface & Base Colors (True Black / Dark Mode) --- */
    --bg-void: #000000;
    --bg-surface-0: #050505;
    --bg-surface-1: #0a0a0c;
    --bg-surface-2: #11131a;
    --bg-surface-3: #1a1c23;
    --bg-surface-4: #23252d;
    --bg-surface-5: #2d303b;
    --bg-surface-6: #383c4a;
    --bg-surface-7: #444859;
    --bg-surface-8: #515669;
    --bg-surface-9: #5e6478;

    /* --- Typography Colors --- */
    --text-pure: #ffffff;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6b6b70;
    --text-quaternary: #4a4a4d;
    --text-disabled: #333336;

    /* --- Spacing Scale --- */
    --space-0: 0px;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;

    /* --- ENHANCED GLASSMORPHISM ENGINE (BLUR & SATURATION) --- */
    --glass-blur-none: 0px;
    --glass-blur-sm: 8px;
    --glass-blur-md: 16px;
    --glass-blur-lg: 32px;
    --glass-blur-xl: 48px;
    --glass-blur-2xl: 64px;
    --glass-blur-3xl: 80px;
    --glass-blur-max: 120px;
    
    --glass-sat-none: 100%;
    --glass-sat-low: 130%;
    --glass-sat-mid: 160%;
    --glass-sat-high: 190%;
    --glass-sat-max: 220%;

    /* --- Premium Structural Borders & Specular Highlights --- */
    --glass-border-heavy: rgba(255, 255, 255, 0.25);
    --glass-border-mid: rgba(255, 255, 255, 0.14);
    --glass-border-light: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-border-faint: rgba(255, 255, 255, 0.03);
    
    --glass-highlight-strong: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
    --glass-highlight-mid: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
    --glass-highlight-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);

    /* --- Box Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 12px 24px -6px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6);
    --shadow-glow-primary: 0 0 20px rgba(82, 141, 255, 0.25);
    --shadow-glow-secondary: 0 0 20px rgba(140, 82, 255, 0.25);
    --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.25);

    /* --- Animation Easings --- */
    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --ease-spring-bouncy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* --- Z-Index Hierarchy --- */
    --z-behind: -1;
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-max: 9999;
}

/* ==========================================================================
   02. EXHAUSTIVE CSS RESET & NORMALIZATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
body {
    background-color: var(--bg-void);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
}
button, input, textarea {
    font-family: inherit;
    font-size: 100%;
    outline: none;
    border: none;
    background: none;
}
textarea {
    overflow: auto;
    resize: vertical;
}

/* ==========================================================================
   03. ACCESSIBILITY & CORE STATES
   ========================================================================== */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 4px;
    border-radius: 4px;
}
::selection {
    background-color: rgba(175, 198, 255, 0.25);
    color: var(--text-pure);
}

/* Hardware Accelerated Premium Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   04. TYPOGRAPHY SCALES & UTILITIES
   ========================================================================== */
h1, .h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

p, .p-body { font-size: 1rem; font-weight: 500; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5em; text-wrap: pretty; }
.p-small { font-size: 0.875rem; font-weight: 500; color: var(--text-tertiary); line-height: 1.5; }

.text-pure { color: var(--text-pure); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* Text Gradients */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--primary-300) 0%, var(--secondary-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Material Icons Architecture */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transition: all 0.3s ease;
}

/* ==========================================================================
   05. HIGH-INTENSITY GLASSMORPHISM ENGINE (VISION-OS SPEC)
   ========================================================================== */
/* Depth 1: Ultra-Sheer Structural Layer */
.glass-1 {
    background: rgba(10, 10, 12, 0.12);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-faint);
}

/* Depth 2: Balanced Standard Utility Layer */
.glass-2 {
    background: rgba(10, 10, 12, 0.18);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--shadow-sm), var(--glass-highlight-subtle);
}

/* Depth 3: Enhanced Panel Configuration */
.glass-3 {
    background: rgba(10, 10, 12, 0.24);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-md), var(--glass-highlight-mid);
}

/* Depth 4: Master Interface Architecture (App Windows / Main Cards) */
.glass-4, .glass-panel {
    background: rgba(10, 10, 12, 0.25) !important;
    backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    border: 1px solid var(--glass-border-light) !important;
    box-shadow: var(--shadow-lg), var(--glass-highlight-mid) !important;
}

/* Depth 5: Heavy Contextual Layer (Modals & Popovers) */
.glass-5, .glass-elevated {
    background: rgba(10, 10, 15, 0.45) !important;
    backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max)) !important;
    border: 1px solid var(--glass-border-mid) !important;
    box-shadow: var(--shadow-xl), var(--glass-highlight-strong) !important;
}

/* Depth 6: Translucent Dock Navigation Layer (App Headers) */
.glass-6, .glass-header {
    background: rgba(10, 10, 12, 0.35) !important;
    backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max)) !important;
    border-bottom: 1px solid var(--glass-border-light) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
}

/* Depth 7: Specular Interactive Surfaces (Buttons / Action States) */
.glass-7, .glass-action {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--glass-highlight-subtle);
    transition: all 0.3s var(--ease-out);
}
.glass-7:hover, .glass-action:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--glass-border-mid);
    box-shadow: var(--shadow-md), var(--glass-highlight-mid);
}

/* Real-time Structural Tracking Gradients */
.glow-card {
    position: relative;
    overflow: hidden;
}
.glow-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.2), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.glow-card:hover::before { opacity: 1; }

/* ==========================================================================
   06. AMBIENT BACKGROUNDS & AURORA
   ========================================================================== */
.aurora-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--glass-blur-max));
    mix-blend-mode: screen;
}
.aurora-blob-1 {
    background: rgba(79, 140, 255, 0.16);
    width: 65vw; height: 65vw;
    top: -10%; left: -10%;
    animation: blob-float-1 25s infinite alternate ease-in-out;
}
.aurora-blob-2 {
    background: rgba(140, 82, 255, 0.12);
    width: 55vw; height: 55vw;
    bottom: -10%; right: -10%;
    animation: blob-float-2 30s infinite alternate-reverse ease-in-out;
}

@keyframes blob-float-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 8%) scale(1.08); }
}
@keyframes blob-float-2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(-8%, -8%) scale(1.15) rotate(180deg); }
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   07. BUTTONS & INTERACTION SURFACES
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 700;
    padding: var(--space-4) var(--space-8);
    border-radius: 9999px;
    transition: all 0.3s var(--ease-spring-soft);
    position: relative;
    overflow: hidden;
    user-select: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-300) 100__);
    color: var(--bg-void);
    box-shadow: 0 4px 15px rgba(175, 198, 255, 0.25);
}
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 4px rgba(175, 198, 255, 0.12), 0 8px 25px rgba(175, 198, 255, 0.45);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-light);
    color: var(--text-pure);
    box-shadow: var(--glass-highlight-subtle);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--glass-border-mid);
    transform: translateY(-2px);
}

/* ==========================================================================
   08. FORM ARCHITECTURE & CUSTOM INPUTS
   ========================================================================== */
input[type="text"], textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(var(--glass-blur-md));
    -webkit-backdrop-filter: blur(var(--glass-blur-md));
    border: 1px solid var(--glass-border-subtle);
    border-radius: 16px;
    padding: var(--space-4) var(--space-5);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-pure);
    box-shadow: var(--shadow-inner);
    transition: all 0.3s var(--ease-out);
}
input:focus, textarea:focus {
    background: rgba(15, 15, 20, 0.6);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-inner), 0 0 0 4px rgba(82, 141, 255, 0.15);
}

/* ==========================================================================
   09. CHAT SUB-SYSTEM: SPATIAL LAYOUTS
   ========================================================================== */
.chat-layout, .chat-app-wrapper {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: var(--space-3);
    gap: var(--space-3);
    position: relative;
    z-index: var(--z-base);
    overflow: hidden;
}

.chat-sidebar, .chat-pane-left {
    width: 320px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    @extend .glass-panel;
}

.chat-main, .chat-pane-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    @extend .glass-panel;
}

.chat-panel-right, .chat-pane-right {
    width: 340px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    @extend .glass-elevated;
    transition: transform 0.5s var(--ease-spring-soft), opacity 0.4s ease;
    z-index: var(--z-above);
}
.chat-panel-right.is-closed, .chat-pane-right.is-closed {
    transform: translateX(115%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.chat-stage-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    @extend .glass-header;
    z-index: var(--z-sticky);
}

.chat-history, .chat-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 104px var(--space-8) 124px var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    scroll-behavior: smooth;
    position: relative;
    z-index: var(--z-base);
}

/* ==========================================================================
   10. CHAT SUB-SYSTEM: BUBBLES, CORES & TAILS
   ========================================================================== */
.msg-wrapper, .msg-container {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    position: relative;
}
.msg-wrapper.incoming, .msg-container.incoming { align-self: flex-start; align-items: flex-start; }
.msg-wrapper.outgoing, .msg-container.outgoing { align-self: flex-end; align-items: flex-end; }

.msg-spring {
    animation: spring-up 0.5s var(--ease-spring-bouncy) forwards;
    transform-origin: bottom center;
}

/* High Refraction Custom Message Bubbles */
.msg-bubble {
    padding: var(--space-3-5) var(--space-5);
    font-size: 0.95rem;
    line-height: 1.55;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
}

.msg-bubble.incoming, .incoming-bubble {
    background: rgba(25, 25, 30, 0.35) !important;
    backdrop-filter: blur(32px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 26px 26px 26px 8px !important;
    color: var(--text-pure);
    box-shadow: var(--shadow-md), var(--glass-highlight-subtle);
}

.msg-bubble.outgoing, .primary-gradient-glass {
    background: linear-gradient(135deg, rgba(82, 141, 255, 0.52) 0%, rgba(140, 82, 255, 0.52) 100__) !important;
    backdrop-filter: blur(32px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 26px 26px 8px 26px !important;
    color: #ffffff;
    box-shadow: 0 12px 32px -4px rgba(82, 141, 255, 0.18), var(--glass-highlight-mid) !important;
}

.msg-meta, .msg-footer {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ==========================================================================
   11. CHAT SUB-SYSTEM: COMPOSER CORE (PILL DOCK)
   ========================================================================== */
.composer-area, .composer-dock {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    z-index: var(--z-sticky);
    pointer-events: none; 
}

.composer-box, .composer-bar {
    pointer-events: auto; 
    max-width: 900px;
    margin: 0 auto;
    background: rgba(18, 18, 22, 0.35) !important;
    backdrop-filter: blur(48px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
    border: 1px solid var(--glass-border-mid) !important;
    border-radius: 99px !important;
    padding: var(--space-1-5) var(--space-3) !important;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    box-shadow: var(--shadow-xl), var(--glass-highlight-mid);
    transition: all 0.3s ease;
}
.composer-box:focus-within, .composer-bar:focus-within {
    background: rgba(22, 22, 28, 0.5) !important;
    border-color: rgba(255,255,255,0.25) !important;
    box-shadow: var(--shadow-2xl), var(--glass-highlight-strong);
}

.composer-input, .composer-textarea {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-pure);
    font-size: 1rem;
    resize: none;
    max-height: 160px;
    padding: 0.75rem var(--space-2) !important;
    outline: none !important;
}

.composer-btn, .composer-action {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-btn:hover, .composer-action:hover { background: rgba(255,255,255,0.1); color: var(--text-pure); }

.composer-send, .composer-send-btn {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(82, 141, 255, 0.35);
    transform: scale(0) rotate(-45deg);
    opacity: 0;
    transition: all 0.3s var(--ease-spring-bouncy);
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-send.is-visible, .composer-send-btn.is-visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Typing Indicator Custom Dots */
.typing-dots { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px; }
.typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary);
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1.1); opacity: 1; }
}

/* ==========================================================================
   12. SYSTEM MESSAGES & PLATFORM ALERTS
   ========================================================================== */
.msg-system {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
    width: 100%;
}
.msg-system-box {
    background: rgba(82, 141, 255, 0.07) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(82, 141, 255, 0.16) !important;
    padding: var(--space-3) var(--space-6);
    border-radius: 99px !important;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   13. BENTO GRID ARCHITECTURE (LAYOUTS)
   ========================================================================== */
.bento-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--space-6); }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.bento-card {
    position: relative;
    border-radius: 32px;
    padding: var(--space-10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    @extend .glass-panel;
}
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), var(--glass-highlight-strong) !important;
}

/* ==========================================================================
   14. METADATA SYSTEMS & CORE PHYSICS
   ========================================================================== */
@keyframes spring-up {
    0% { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Strict Mobile Environment Resiliency Configuration */
@media (max-width: 768px) {
    .msg-wrapper, .msg-container { max-width: 88%; }
    .chat-viewport { padding: 90px var(--space-4) 112px var(--space-4); }
    
    /* Dynamically throttle performance limits on lower powered devices */
    .glass-header, .chat-stage-header { backdrop-filter: blur(24px) !important; }
    .glass-panel, .chat-pane-center { backdrop-filter: blur(20px) !important; box-shadow: none !important; }
}

/* ==========================================================================
   15. ACCESSIBILITY (A11Y) REDUCED MOTION SYSTEMS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .msg-spring { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* ============================================================
           PAGE-SCOPED PREMIUM ROOM STYLES
           (Tokens come from css/style.css. Nothing here renames or
           overrides classes that the JS layer depends on.)
           ============================================================ */

        :root {
            --room-accent: #4f8cff;
            --room-accent-2: #8b5cf6;
            --room-success: #10b981;
            --room-danger: #ef4444;
            --room-bg: #0a0a0a;
            --room-card: rgba(31, 41, 55, 0.55);
            --room-border: rgba(255, 255, 255, 0.08);
            --room-text-2: #9ca3af;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bot: env(safe-area-inset-bottom, 0px);
        }

        html, body { height: 100%; background: var(--room-bg); }
        body {
            font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #fff;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
        }
        .font-mono { font-family: 'JetBrains Mono', monospace; }

        /* --- Ambient gradient background ----------------------------- */
        .room-stage-bg {
            position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
            background:
              radial-gradient(1200px 700px at 12% -10%, rgba(79,140,255,0.18), transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, rgba(139,92,246,0.16), transparent 60%),
              radial-gradient(900px 600px at 50% 120%, rgba(79,140,255,0.10), transparent 65%),
              #0a0a0a;
        }
        .room-stage-bg::after {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 3px 3px; mix-blend-mode: overlay; opacity: .6;
        }
        .room-aurora {
            position: absolute; border-radius: 50%; filter: blur(120px); opacity: .55;
            animation: room-float 18s ease-in-out infinite;
        }
        .room-aurora.a1 { width: 520px; height: 520px; top: -160px; left: -120px; background: #4f8cff; }
        .room-aurora.a2 { width: 480px; height: 480px; bottom: -180px; right: -140px; background: #8b5cf6; animation-delay: -6s; }
        @keyframes room-float {
            0%, 100% { transform: translate(0,0) scale(1); }
            50%      { transform: translate(40px,-30px) scale(1.08); }
        }

        /* --- Boot screen (cinematic) --------------------------------- */
        #boot-screen {
            position: fixed; inset: 0; z-index: 9999;
            background: radial-gradient(800px 500px at 50% 40%, rgba(79,140,255,0.08), #050507 70%);
            display: flex; align-items: center; justify-content: center; padding: 2rem;
            animation: boot-fade 0.9s ease-in-out 3.6s forwards;
        }
        @keyframes boot-fade { to { opacity: 0; visibility: hidden; pointer-events: none; } }

        .boot-card {
            width: 100%; max-width: 540px;
            background: rgba(15,18,25,0.7);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 24px;
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            padding: 28px;
            box-shadow:
              0 30px 80px -20px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.06);
        }
        .boot-brand {
            display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
            color: var(--room-text-2);
        }
        .boot-brand .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--room-success);
            box-shadow: 0 0 12px rgba(16,185,129,.8);
            animation: pulse 1.6s ease-in-out infinite;
        }
        .boot-text {
            opacity: 0; animation: boot-show 0.4s ease-out forwards;
            font-family: 'JetBrains Mono', monospace; font-size: 13px;
            color: #cbd5e1; line-height: 1.7;
        }
        .boot-text .ok { color: var(--room-success); font-weight: 700; }
        .boot-text .accent { color: var(--room-accent); }
        @keyframes boot-show { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        .delay-1 { animation-delay: 0.4s; }
        .delay-2 { animation-delay: 0.9s; }
        .delay-3 { animation-delay: 1.4s; }
        .delay-4 { animation-delay: 1.9s; }
        .delay-5 { animation-delay: 2.4s; }
        .delay-6 { animation-delay: 2.9s; }

        .boot-progress {
            margin-top: 22px; height: 4px; width: 100%;
            background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden;
        }
        .progress-bar-fill {
            height: 100%; width: 0%; border-radius: 999px;
            background: linear-gradient(90deg, var(--room-accent), var(--room-accent-2));
            box-shadow: 0 0 16px rgba(79,140,255,.5);
            animation: fill-bar 3.1s cubic-bezier(0.4,0,0.2,1) forwards;
        }
        @keyframes fill-bar { to { width: 100%; } }

        /* --- App shell ----------------------------------------------- */
        .chat-app-wrapper {
            position: relative; z-index: 1;
            display: grid;
            grid-template-columns: 1fr;
            height: 100dvh; width: 100vw;
        }
        @media (min-width: 1024px) {
            .chat-app-wrapper { grid-template-columns: 1fr 360px; }
            .chat-app-wrapper.panel-collapsed { grid-template-columns: 1fr 0px; }
        }

        .chat-pane-center {
            position: relative; min-width: 0; height: 100dvh;
            display: flex; flex-direction: column;
        }

        /* --- Header --------------------------------------------------- */
        .chat-stage-header {
            position: relative; z-index: 5;
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
            padding: calc(14px + var(--safe-top)) 18px 14px;
            background: rgba(10,10,10,0.55);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border-bottom: 1px solid var(--room-border);
        }
        .header-id {
            display: flex; align-items: center; gap: 12px; min-width: 0;
        }
        .header-avatar {
            width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
            background: linear-gradient(135deg, rgba(79,140,255,.25), rgba(139,92,246,.25));
            border: 1px solid rgba(255,255,255,.1);
            display: flex; align-items: center; justify-content: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        }
        .header-avatar .material-symbols-outlined {
            font-size: 22px;
            background: linear-gradient(135deg, #4f8cff, #8b5cf6);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .header-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .header-title {
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -0.01em;
        }
        .header-code {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700; font-size: 13px;
            color: #fff; letter-spacing: .08em;
        }
        .header-sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--room-text-2); }
        .live-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--room-success);
            box-shadow: 0 0 0 0 rgba(16,185,129,.6);
            animation: pulse-ring 2s ease-out infinite;
        }
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
            70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
            100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
        }
        .lock-pill {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 3px 8px; border-radius: 999px;
            background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2);
            color: #34d399; font-size: 10px; font-weight: 700;
            font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
        }
        .lock-pill .material-symbols-outlined { font-size: 12px; }
        .header-actions { display: flex; align-items: center; gap: 8px; }
        .icon-btn {
            width: 40px; height: 40px; border-radius: 14px;
            display: inline-flex; align-items: center; justify-content: center;
            color: #d1d5db; background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.06);
            transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
        }
        .icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }
        .icon-btn:active { transform: scale(0.94); }
        .icon-btn.danger:hover { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.3); }

        /* --- Chat viewport ------------------------------------------- */
        .chat-viewport {
            flex: 1; min-height: 0; overflow-y: auto;
            padding: 28px 16px 180px;
            display: flex; flex-direction: column; gap: 14px;
            scroll-behavior: smooth;
        }
        @media (min-width: 768px) { .chat-viewport { padding: 32px 32px 200px; } }
        .chat-viewport::-webkit-scrollbar { width: 6px; }
        .chat-viewport::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }

        /* --- Day divider --------------------------------------------- */
        .msg-day {
            align-self: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
            color: #6b7280;
            padding: 6px 12px; border-radius: 999px;
            background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
        }

        /* --- System message ------------------------------------------ */
        .msg-system { display: flex; justify-content: center; }
        .msg-system-box {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 8px 14px; border-radius: 999px;
            background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.18);
            color: #34d399;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
        }
        .msg-system-box .material-symbols-outlined { font-size: 16px; }

        /* --- Message bubbles ----------------------------------------- */
        .msg-container {
            display: flex; flex-direction: column; max-width: min(680px, 86%);
        }
        .msg-container.outgoing { align-self: flex-end; align-items: flex-end; }
        .msg-container.incoming { align-self: flex-start; align-items: flex-start; }

        .msg-bubble {
            position: relative;
            padding: 11px 15px;
            border-radius: 20px;
            font-size: 14.5px; line-height: 1.5; letter-spacing: -.005em;
            word-wrap: break-word; overflow-wrap: anywhere;
            box-shadow: 0 6px 24px -10px rgba(0,0,0,.5);
        }
        .msg-bubble.incoming {
            background: rgba(31,41,55,.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,.06);
            color: #f5f5f7;
            border-bottom-left-radius: 6px;
        }
        .msg-bubble.outgoing {
            background: linear-gradient(135deg, #4f8cff 0%, #6c7cff 55%, #8b5cf6 100%);
            color: #fff;
            border-bottom-right-radius: 6px;
            box-shadow:
              0 10px 30px -12px rgba(79,140,255,.55),
              0 6px 24px -14px rgba(139,92,246,.5),
              inset 0 1px 0 rgba(255,255,255,.16);
        }
        .msg-bubble.outgoing a { color: #e0e7ff; text-decoration: underline; }
        .msg-footer {
            display: flex; align-items: center; gap: 4px;
            font-size: 11px; color: #6b7280;
            font-family: 'JetBrains Mono', monospace;
            padding: 2px 6px;
        }

        /* Image messages */
        .msg-bubble.has-image { padding: 6px; }
        .msg-bubble.has-image img {
            display: block; max-width: 100%; max-height: 360px;
            border-radius: 14px; object-fit: cover;
        }

        /* Spring-in animation on new messages */
        .msg-spring {
            animation: spring-in .42s cubic-bezier(.2,.9,.3,1.2) both;
        }
        @keyframes spring-in {
            0%   { opacity: 0; transform: translateY(10px) scale(.96); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Typing indicator */
        .typing-dots { display: inline-flex; gap: 5px; padding: 2px 2px; }
        .typing-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: rgba(255,255,255,.55);
            animation: typing-bounce 1.2s ease-in-out infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: .15s; }
        .typing-dot:nth-child(3) { animation-delay: .3s; }
        @keyframes typing-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: .5; }
            30%           { transform: translateY(-5px); opacity: 1; }
        }

        /* --- Empty state --------------------------------------------- */
        #empty-state {
            margin: auto;
            display: flex; flex-direction: column; align-items: center;
            text-align: center; max-width: 420px; padding: 40px 24px;
            opacity: 0; animation: boot-show .6s ease-out 3.9s forwards;
        }
        .empty-orb {
            width: 88px; height: 88px; border-radius: 28px;
            background: linear-gradient(135deg, rgba(79,140,255,.2), rgba(139,92,246,.2));
            border: 1px solid rgba(255,255,255,.08);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 60px rgba(79,140,255,.25), inset 0 1px 0 rgba(255,255,255,.1);
            margin-bottom: 22px;
        }
        .empty-orb .material-symbols-outlined {
            font-size: 42px;
            background: linear-gradient(135deg, #4f8cff, #8b5cf6);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        #empty-state h2 { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
        #empty-state p  { font-size: 14px; color: var(--room-text-2); line-height: 1.6; }
        #empty-state .empty-meta {
            margin-top: 18px;
            display: inline-flex; gap: 8px; align-items: center;
            font-family: 'JetBrains Mono', monospace; font-size: 11px;
            color: #34d399;
            padding: 6px 12px; border-radius: 999px;
            background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2);
        }

        /* --- Composer ------------------------------------------------- */
        .composer-dock {
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
            padding: 16px 14px calc(14px + var(--safe-bot));
            background: linear-gradient(to top, #0a0a0a 0%, #0a0a0a 70%, rgba(10,10,10,0) 100%);
            pointer-events: none;
        }
        .composer-bar {
            pointer-events: auto;
            display: flex; align-items: flex-end; gap: 8px;
            max-width: 920px; margin: 0 auto;
            padding: 8px 10px 8px 8px;
            background: rgba(20,22,30,.7);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 22px;
            box-shadow: 0 20px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
        }
        .composer-action {
            width: 40px; height: 40px; border-radius: 14px;
            display: inline-flex; align-items: center; justify-content: center;
            color: #9ca3af; background: transparent;
            transition: color .18s ease, background .18s ease, transform .18s ease;
            flex-shrink: 0;
        }
        .composer-action:hover { color: #fff; background: rgba(255,255,255,.06); }
        .composer-action:active { transform: scale(0.92); }
        textarea#chat-input.composer-textarea,
        textarea#chat-input.composer-textarea:focus,
        textarea#chat-input.composer-textarea:focus-visible,
        textarea#chat-input.composer-textarea:hover {
            flex: 1; min-width: 0; resize: none;
            -webkit-appearance: none !important;
            appearance: none !important;
            background: none !important;
            background-color: transparent !important;
            background-image: none !important;
            border: 0 !important; border-color: transparent !important;
            outline: 0 !important; outline-color: transparent !important;
            box-shadow: none !important;
            color: #fff !important; font-size: 15px; line-height: 1.45;
            padding: 10px 6px; max-height: 160px;
            font-family: inherit;
            --tw-ring-color: transparent !important;
            --tw-ring-shadow: 0 0 transparent !important;
            --tw-ring-offset-shadow: 0 0 transparent !important;
            --tw-ring-offset-width: 0px !important;
        }
        textarea#chat-input::placeholder { color: #6b7280 !important; }
        .composer-send {
            width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #4f8cff, #8b5cf6);
            box-shadow: 0 8px 24px -8px rgba(79,140,255,.6);
            transition: transform .18s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease;
            transform: scale(.6); opacity: 0; pointer-events: none;
        }
        .composer-send.is-visible { transform: scale(1); opacity: 1; pointer-events: auto; }
        .composer-send:hover { box-shadow: 0 10px 30px -8px rgba(79,140,255,.8); }
        .composer-send:active { transform: scale(.92); }

        /* --- Attachment menu ----------------------------------------- */
        #attachment-menu {
            position: absolute; bottom: calc(72px + var(--safe-bot)); left: 16px;
            z-index: 7;
            min-width: 240px;
            background: rgba(20,22,30,.85);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 20px;
            padding: 8px;
            box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
            transform: translateY(8px) scale(.96); opacity: 0; pointer-events: none;
            transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease;
        }
        #attachment-menu.is-open { transform: none; opacity: 1; pointer-events: auto; }
        .attach-item {
            width: 100%;
            display: flex; align-items: center; gap: 12px;
            padding: 10px 12px; border-radius: 14px;
            color: #e5e7eb; font-size: 14px; font-weight: 500;
            transition: background .15s ease;
            text-align: left;
        }
        .attach-item:hover { background: rgba(255,255,255,.06); }
        .attach-item .swatch {
            width: 36px; height: 36px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .attach-item .swatch.blue   { background: rgba(79,140,255,.15); color: #93b7ff; }
        .attach-item .swatch.violet { background: rgba(139,92,246,.15); color: #bfa0ff; }
        .attach-item .swatch.amber  { background: rgba(245,158,11,.12); color: #fbbf24; }
        .attach-item .meta { display: flex; flex-direction: column; }
        .attach-item .meta small { color: #6b7280; font-size: 11px; }

        /* --- Right security panel ------------------------------------ */
        .chat-pane-right {
            position: relative; z-index: 4;
            height: 100dvh;
            border-left: 1px solid var(--room-border);
            background: rgba(10,10,10,0.6);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            overflow: hidden;
            transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
        }
        /* Desktop: collapse via grid; on mobile: slide-over */
        @media (max-width: 1023.98px) {
            .chat-pane-right {
                position: fixed; top: 0; right: 0;
                width: min(360px, 92vw);
                z-index: 50;
                box-shadow: -30px 0 80px -20px rgba(0,0,0,.7);
                transform: translateX(0);
            }
            .chat-pane-right.is-closed { transform: translateX(105%); }
            #security-backdrop {
                position: fixed; inset: 0; z-index: 49;
                background: rgba(0,0,0,.55);
                backdrop-filter: blur(4px);
                opacity: 1; transition: opacity .25s ease;
            }
            #security-backdrop.is-hidden { opacity: 0; pointer-events: none; }
        }
        @media (min-width: 1024px) {
            .chat-pane-right.is-closed { transform: translateX(0); display: none; }
            #security-backdrop { display: none; }
        }

        .sec-scroll {
            height: 100%; overflow-y: auto;
            padding: calc(18px + var(--safe-top)) 20px calc(24px + var(--safe-bot));
            display: flex; flex-direction: column; gap: 18px;
        }
        .sec-scroll::-webkit-scrollbar { width: 6px; }
        .sec-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }

        .sec-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 4px;
        }
        .sec-eyebrow {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
            color: var(--room-text-2);
        }
        .sec-hero {
            position: relative; overflow: hidden;
            border-radius: 22px;
            padding: 20px;
            background:
              radial-gradient(140% 100% at 0% 0%, rgba(79,140,255,.18), transparent 60%),
              radial-gradient(140% 100% at 100% 100%, rgba(139,92,246,.18), transparent 60%),
              rgba(31,41,55,.55);
            border: 1px solid rgba(255,255,255,.08);
            box-shadow: 0 20px 60px -25px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
        }
        .sec-hero h2 {
            font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.02em;
            margin-bottom: 4px;
        }
        .sec-hero p { font-size: 13px; color: var(--room-text-2); line-height: 1.55; }
        .risk-score {
            display: inline-flex; align-items: center; gap: 8px;
            margin-top: 14px;
            padding: 6px 12px; border-radius: 999px;
            background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25);
            font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
            color: #34d399; letter-spacing: .12em; text-transform: uppercase;
        }
        .risk-score .material-symbols-outlined { font-size: 14px; }

        .sec-card {
            border-radius: 20px;
            background: rgba(31,41,55,.45);
            border: 1px solid rgba(255,255,255,.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .sec-row {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 16px;
        }
        .sec-row + .sec-row { border-top: 1px solid rgba(255,255,255,.05); }
        .sec-row .ico {
            width: 36px; height: 36px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.06);
        }
        .sec-row .ico.blue   { background: rgba(79,140,255,.12); color: #93b7ff; border-color: rgba(79,140,255,.2); }
        .sec-row .ico.violet { background: rgba(139,92,246,.12); color: #bfa0ff; border-color: rgba(139,92,246,.2); }
        .sec-row .ico.green  { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.22); }
        .sec-row .ico.amber  { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.22); }
        .sec-row .ico.red    { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.22); }
        .sec-row .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; font-family: 'JetBrains Mono', monospace; }
        .sec-row .value { font-size: 13.5px; color: #f3f4f6; font-weight: 600; margin-top: 2px; }
        .sec-row .grow  { flex: 1; min-width: 0; }

        .sec-warning {
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(239,68,68,.06);
            border: 1px solid rgba(239,68,68,.18);
            color: #fecaca;
            font-size: 12.5px; line-height: 1.55;
            display: flex; gap: 10px; align-items: flex-start;
        }
        .sec-warning .material-symbols-outlined { color: #fca5a5; font-size: 18px; margin-top: 1px; }

        .sec-leave {
            width: 100%; margin-top: auto;
            padding: 12px 14px; border-radius: 16px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fca5a5; font-weight: 700; font-size: 13.5px;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            transition: background .18s ease, transform .18s ease;
        }
        .sec-leave:hover { background: rgba(239,68,68,.18); color: #fff; }
        .sec-leave:active { transform: scale(.98); }

        /* --- Modals --------------------------------------------------- */
        .modal-backdrop {
            position: fixed; inset: 0; z-index: 80;
            background: rgba(0,0,0,.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            padding: 18px;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.28s ease;
        }

        .modal-backdrop.is-open {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        .modal-card {
            width: 100%; max-width: 440px;
            background: rgba(17,20,28,.92);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 24px;
            padding: 22px;
            box-shadow: 0 40px 100px -30px rgba(0,0,0,.8);
            transform: translateY(12px) scale(.97);
            transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
        }
        .modal-backdrop.is-open .modal-card { transform: none; }
        .modal-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -.01em; }
        .modal-card p  { font-size: 14px; color: var(--room-text-2); line-height: 1.55; }
        .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
        .btn-ghost {
            flex: 1; padding: 11px 14px; border-radius: 14px;
            background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
            color: #e5e7eb; font-weight: 600; font-size: 14px;
            transition: background .18s ease;
        }
        .btn-ghost:hover { background: rgba(255,255,255,.08); }
        .btn-danger {
            flex: 1; padding: 11px 14px; border-radius: 14px;
            background: linear-gradient(135deg, #ef4444, #b91c1c);
            color: #fff; font-weight: 700; font-size: 14px;
            box-shadow: 0 10px 30px -10px rgba(239,68,68,.5);
            transition: transform .18s ease;
        }
        .btn-danger:active { transform: scale(.97); }
        .btn-primary {
            flex: 1; padding: 11px 14px; border-radius: 14px;
            background: linear-gradient(135deg, #4f8cff, #8b5cf6);
            color: #fff; font-weight: 700; font-size: 14px;
            box-shadow: 0 10px 30px -10px rgba(79,140,255,.55);
            transition: transform .18s ease;
        }
        .btn-primary:active { transform: scale(.97); }

        /* Image preview modal */
        #image-preview-modal .modal-card { max-width: 520px; }
        #image-preview-modal .preview-frame {
            border-radius: 16px; overflow: hidden;
            background: rgba(0,0,0,.4);
            border: 1px solid rgba(255,255,255,.06);
            aspect-ratio: 4 / 3;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
        }
        #image-preview-modal #image-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .preview-meta {
            display: flex; justify-content: space-between; align-items: center;
            font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b7280;
            margin-bottom: 14px;
        }
        .preview-meta .limit { color: #34d399; }

        /* Feedback modal textarea */
        #feedback-modal textarea {
            width: 100%; min-height: 110px; resize: vertical;
            background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px; padding: 12px; color: #fff; font-size: 14px;
            outline: none; transition: border-color .18s ease;
        }
        #feedback-modal textarea:focus { border-color: rgba(79,140,255,.5); }

        /* --- Toast --------------------------------------------------- */
        #toast {
            position: fixed; left: 50%; bottom: calc(28px + var(--safe-bot));
            transform: translate(-50%, 12px); z-index: 90;
            padding: 10px 16px; border-radius: 999px;
            background: rgba(17,20,28,.95);
            border: 1px solid rgba(255,255,255,.1);
            color: #fff; font-size: 13px; font-weight: 600;
            box-shadow: 0 20px 50px -15px rgba(0,0,0,.7);
            opacity: 0; pointer-events: none;
            transition: opacity .2s ease, transform .2s ease;
        }
        #toast.is-open { opacity: 1; transform: translate(-50%, 0); }

        /* --- Utility ------------------------------------------------- */
        .text-pure { color: #fff; }
        .text-secondary { color: var(--room-text-2); }
        .text-tertiary { color: #6b7280; }
        .hidden-init { display: none; }

        /* Enhanced Interactive Effects */
        .hover-lift { 
            transition: transform 0.25s cubic-bezier(.34,.69,.46,1.15), box-shadow 0.25s ease;
        }
        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(79,140,255,0.2);
        }

        .glow-on-hover {
            transition: box-shadow 0.3s ease;
        }
        .glow-on-hover:hover {
            box-shadow: 0 0 20px rgba(79,140,255,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
        }

        /* Scroll Reveal Observer-Ready Utility */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(32px);
            transition: all 0.7s cubic-bezier(.34,.69,.46,1.15);
        }
        .scroll-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Smooth Transitions for Interactive Elements */
        button, a, input, select, textarea {
            -webkit-user-select: none;
            user-select: none;
        }

        /* Focus State Accessibility */
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible {
            outline: 2px solid rgba(79,140,255,0.6);
            outline-offset: 2px;
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Mobile Optimization: Safe Area */
        @supports (padding: max(0px)) {
            body {
                padding-left: max(16px, env(safe-area-inset-left));
                padding-right: max(16px, env(safe-area-inset-right));
            }
        }

        /* High Contrast Mode Support */
        @media (prefers-contrast: more) {
            .glass-panel {
                border-width: 2px;
                background: rgba(20, 20, 25, 0.6);
            }
        }

        /* Dark Mode Color Optimization */
        @media (prefers-color-scheme: dark) {
            ::-webkit-scrollbar-thumb {
                background: rgba(255,255,255,0.2);
            }
            ::-webkit-scrollbar-thumb:hover {
                background: rgba(255,255,255,0.4);
            }
        }
/**
 * ==========================================================================
 * NYCHAT OS - MASTER STYLESHEET (ENTERPRISE GLASSMORPHISM EDITION)
 * Architecture: Scalable Ultra-Glass, 3D Spatial Layouts & Motion Physics
 * ==========================================================================
 */

/* ==========================================================================
   01. EXHAUSTIVE DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* --- Primary Color Scale (Indigo/Blue) --- */
    --primary-50: #f0f5ff;
    --primary-100: #e6eeff;
    --primary-200: #c9dbff;
    --primary-300: #afc6ff;
    --primary-400: #82abff;
    --primary-500: #528dff; /* Brand Primary */
    --primary-600: #2b61d6;
    --primary-700: #004398;
    --primary-800: #002d6c;
    --primary-900: #001a43;
    --primary-950: #000d24;

    /* --- Secondary Color Scale (Purple) --- */
    --secondary-50: #fcfaff;
    --secondary-100: #f2e8ff;
    --secondary-200: #e3cfff;
    --secondary-300: #d0bcff;
    --secondary-400: #b08dff;
    --secondary-500: #8c52ff; /* Brand Secondary */
    --secondary-600: #6b2be0;
    --secondary-700: #571bc1;
    --secondary-800: #420b9e;
    --secondary-900: #2a007a;
    --secondary-950: #1a004d;

    /* --- Success Color Scale (Green) --- */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* --- Danger Color Scale (Red) --- */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* --- Warning Color Scale (Amber) --- */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* --- Surface & Base Colors (True Black / Dark Mode) --- */
    --bg-void: #000000;
    --bg-surface-0: #050505;
    --bg-surface-1: #0a0a0c;
    --bg-surface-2: #11131a;
    --bg-surface-3: #1a1c23;
    --bg-surface-4: #23252d;
    --bg-surface-5: #2d303b;
    --bg-surface-6: #383c4a;
    --bg-surface-7: #444859;
    --bg-surface-8: #515669;
    --bg-surface-9: #5e6478;

    /* --- Typography Colors --- */
    --text-pure: #ffffff;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6b6b70;
    --text-quaternary: #4a4a4d;
    --text-disabled: #333336;

    /* --- Spacing Scale --- */
    --space-0: 0px;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;

    /* --- ENHANCED GLASSMORPHISM ENGINE (BLUR & SATURATION) --- */
    --glass-blur-none: 0px;
    --glass-blur-sm: 8px;
    --glass-blur-md: 16px;
    --glass-blur-lg: 32px;
    --glass-blur-xl: 48px;
    --glass-blur-2xl: 64px;
    --glass-blur-3xl: 80px;
    --glass-blur-max: 120px;
    
    --glass-sat-none: 100%;
    --glass-sat-low: 130%;
    --glass-sat-mid: 160%;
    --glass-sat-high: 190%;
    --glass-sat-max: 220%;

    /* --- Premium Structural Borders & Specular Highlights --- */
    --glass-border-heavy: rgba(255, 255, 255, 0.25);
    --glass-border-mid: rgba(255, 255, 255, 0.14);
    --glass-border-light: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-border-faint: rgba(255, 255, 255, 0.03);
    
    --glass-highlight-strong: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
    --glass-highlight-mid: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
    --glass-highlight-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);

    /* --- Box Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 12px 24px -6px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6);
    --shadow-glow-primary: 0 0 20px rgba(82, 141, 255, 0.25);
    --shadow-glow-secondary: 0 0 20px rgba(140, 82, 255, 0.25);
    --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.25);

    /* --- Animation Easings --- */
    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --ease-spring-bouncy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* --- Z-Index Hierarchy --- */
    --z-behind: -1;
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-max: 9999;
}

/* ==========================================================================
   02. EXHAUSTIVE CSS RESET & NORMALIZATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
body {
    background-color: var(--bg-void);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
}
button, input, textarea {
    font-family: inherit;
    font-size: 100%;
    outline: none;
    border: none;
    background: none;
}
textarea {
    overflow: auto;
    resize: vertical;
}

/* ==========================================================================
   03. ACCESSIBILITY & CORE STATES
   ========================================================================== */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 4px;
    border-radius: 4px;
}
::selection {
    background-color: rgba(175, 198, 255, 0.25);
    color: var(--text-pure);
}

/* Hardware Accelerated Premium Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   04. TYPOGRAPHY SCALES & UTILITIES
   ========================================================================== */
h1, .h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

p, .p-body { font-size: 1rem; font-weight: 500; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5em; text-wrap: pretty; }
.p-small { font-size: 0.875rem; font-weight: 500; color: var(--text-tertiary); line-height: 1.5; }

.text-pure { color: var(--text-pure); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* Text Gradients */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--primary-300) 0%, var(--secondary-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Material Icons Architecture */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transition: all 0.3s ease;
}

/* ==========================================================================
   05. HIGH-INTENSITY GLASSMORPHISM ENGINE (VISION-OS SPEC)
   ========================================================================== */
.glass-1 {
    background: rgba(10, 10, 12, 0.12);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-faint);
}

.glass-2 {
    background: rgba(10, 10, 12, 0.18);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-mid));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--shadow-sm), var(--glass-highlight-subtle);
}

.glass-3 {
    background: rgba(10, 10, 12, 0.24);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat-high));
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-md), var(--glass-highlight-mid);
}

.glass-4, .glass-panel {
    background: rgba(10, 10, 12, 0.25) !important;
    backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    border: 1px solid var(--glass-border-light) !important;
    box-shadow: var(--shadow-lg), var(--glass-highlight-mid) !important;
}

.glass-5, .glass-elevated {
    background: rgba(10, 10, 15, 0.45) !important;
    backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-2xl)) saturate(var(--glass-sat-max)) !important;
    border: 1px solid var(--glass-border-mid) !important;
    box-shadow: var(--shadow-xl), var(--glass-highlight-strong) !important;
}

.glass-6, .glass-header {
    background: rgba(10, 10, 12, 0.35) !important;
    backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-3xl)) saturate(var(--glass-sat-max)) !important;
    border-bottom: 1px solid var(--glass-border-light) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
}

.glass-7, .glass-action {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-low));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat-low));
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--glass-highlight-subtle);
    transition: all 0.3s var(--ease-out);
}
.glass-7:hover, .glass-action:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--glass-border-mid);
    box-shadow: var(--shadow-md), var(--glass-highlight-mid);
}

.glow-card {
    position: relative;
    overflow: hidden;
}
.glow-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.2), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.glow-card:hover::before { opacity: 1; }

/* ==========================================================================
   06. AMBIENT BACKGROUNDS & AURORA
   ========================================================================== */
.aurora-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--glass-blur-max));
    mix-blend-mode: screen;
}
.aurora-blob-1 {
    background: rgba(79, 140, 255, 0.16);
    width: 65vw; height: 65vw;
    top: -10%; left: -10%;
    animation: blob-float-1 25s infinite alternate ease-in-out;
}
.aurora-blob-2 {
    background: rgba(140, 82, 255, 0.12);
    width: 55vw; height: 55vw;
    bottom: -10%; right: -10%;
    animation: blob-float-2 30s infinite alternate-reverse ease-in-out;
}

@keyframes blob-float-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 8%) scale(1.08); }
}
@keyframes blob-float-2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(-8%, -8%) scale(1.15) rotate(180deg); }
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   07. BUTTONS & INTERACTION SURFACES
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 700;
    padding: var(--space-4) var(--space-8);
    border-radius: 9999px;
    transition: all 0.3s var(--ease-spring-soft);
    position: relative;
    overflow: hidden;
    user-select: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-300) 100__);
    color: var(--bg-void);
    box-shadow: 0 4px 15px rgba(175, 198, 255, 0.25);
}
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 4px rgba(175, 198, 255, 0.12), 0 8px 25px rgba(175, 198, 255, 0.45);
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-light);
    color: var(--text-pure);
    box-shadow: var(--glass-highlight-subtle);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--glass-border-mid);
    transform: translateY(-2px);
}

/* ==========================================================================
   08. FORM ARCHITECTURE & CUSTOM INPUTS
   ========================================================================== */
input[type="text"], textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(var(--glass-blur-md));
    -webkit-backdrop-filter: blur(var(--glass-blur-md));
    border: 1px solid var(--glass-border-subtle);
    border-radius: 16px;
    padding: var(--space-4) var(--space-5);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-pure);
    box-shadow: var(--shadow-inner);
    transition: all 0.3s var(--ease-out);
}
input:focus, textarea:focus {
    background: rgba(15, 15, 20, 0.6);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-inner), 0 0 0 4px rgba(82, 141, 255, 0.15);
}

/* ==========================================================================
   09. BUBBLES, CORES & TAILS
   ========================================================================== */
.msg-wrapper, .msg-container {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    position: relative;
}
.msg-wrapper.incoming, .msg-container.incoming { align-self: flex-start; align-items: flex-start; }
.msg-wrapper.outgoing, .msg-container.outgoing { align-self: flex-end; align-items: flex-end; }

.msg-spring {
    animation: spring-up 0.5s var(--ease-spring-bouncy) forwards;
    transform-origin: bottom center;
}

.msg-bubble {
    padding: var(--space-3-5) var(--space-5);
    font-size: 0.95rem;
    line-height: 1.55;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
}

.msg-bubble.incoming, .incoming-bubble {
    background: rgba(25, 25, 30, 0.35) !important;
    backdrop-filter: blur(32px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 26px 26px 26px 8px !important;
    color: var(--text-pure);
    box-shadow: var(--shadow-md), var(--glass-highlight-subtle);
}

.msg-bubble.outgoing, .primary-gradient-glass {
    background: linear-gradient(135deg, rgba(82, 141, 255, 0.52) 0%, rgba(140, 82, 255, 0.52) 100__) !important;
    backdrop-filter: blur(32px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 26px 26px 8px 26px !important;
    color: #ffffff;
    box-shadow: 0 12px 32px -4px rgba(82, 141, 255, 0.18), var(--glass-highlight-mid) !important;
}

.msg-meta, .msg-footer {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ==========================================================================
   10. CHAT COMPOSER CORE (PILL DOCK)
   ========================================================================== */
.composer-area, .composer-dock {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    z-index: var(--z-sticky);
    pointer-events: none; 
}

.composer-box, .composer-bar {
    pointer-events: auto; 
    max-width: 900px;
    margin: 0 auto;
    background: rgba(18, 18, 22, 0.35) !important;
    backdrop-filter: blur(48px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
    border: 1px solid var(--glass-border-mid) !important;
    border-radius: 99px !important;
    padding: var(--space-1-5) var(--space-3) !important;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    box-shadow: var(--shadow-xl), var(--glass-highlight-mid);
    transition: all 0.3s ease;
}
.composer-box:focus-within, .composer-bar:focus-within {
    background: rgba(22, 22, 28, 0.5) !important;
    border-color: rgba(255,255,255,0.25) !important;
    box-shadow: var(--shadow-2xl), var(--glass-highlight-strong);
}

.composer-input, .composer-textarea {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-pure);
    font-size: 1rem;
    resize: none;
    max-height: 160px;
    padding: 0.75rem var(--space-2) !important;
    outline: none !important;
}

.composer-btn, .composer-action {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-btn:hover, .composer-action:hover { background: rgba(255,255,255,0.1); color: var(--text-pure); }

.composer-send, .composer-send-btn {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(82, 141, 255, 0.35);
    transform: scale(0) rotate(-45deg);
    opacity: 0;
    transition: all 0.3s var(--ease-spring-bouncy);
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.composer-send.is-visible, .composer-send-btn.is-visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.typing-dots { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px; }
.typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary);
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1.1); opacity: 1; }
}

/* ==========================================================================
   11. SYSTEM MESSAGES & PLATFORM ALERTS
   ========================================================================== */
.msg-system {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
    width: 100%;
}
.msg-system-box {
    background: rgba(82, 141, 255, 0.07) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(82, 141, 255, 0.16) !important;
    padding: var(--space-3) var(--space-6);
    border-radius: 99px !important;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   12. BENTO GRID ARCHITECTURE (LAYOUTS)
   ========================================================================== */
.bento-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--space-6); }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.bento-card {
    position: relative;
    border-radius: 32px;
    padding: var(--space-10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    @extend .glass-panel;
}
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), var(--glass-highlight-strong) !important;
}

/* ==========================================================================
   13. METADATA SYSTEMS & CORE PHYSICS
   ========================================================================== */
@keyframes spring-up {
    0% { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 768px) {
    .msg-wrapper, .msg-container { max-width: 88%; }
    .chat-viewport { padding: 90px var(--space-4) 112px var(--space-4); }
    .glass-header, .chat-stage-header { backdrop-filter: blur(24px) !important; }
    .glass-panel, .chat-pane-center { backdrop-filter: blur(20px) !important; box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .msg-spring { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   14. ULTRA-GLASS & MAX-ROUNDED OVERRIDES (VISION-OS AESTHETIC)
   ========================================================================== */
.chat-pane-left,
.chat-pane-center,
.chat-pane-right,
.chat-main,
aside.glass-panel {
    border-radius: 32px !important;
    background: rgba(10, 10, 12, 0.25) !important; 
    backdrop-filter: blur(40px) saturate(180%) !important; 
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.msg-media,
.msg-media img,
.relative.rounded-\[16px\] {
    border-radius: 24px !important; 
}

.chat-stage-header,
.glass-header {
    background: rgba(10, 10, 12, 0.3) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   15. ROOM.HTML BULLETPROOF LAYOUT OVERRIDES (THE ULTIMATE FIX)
   ========================================================================== */
/* This block mathematically forces the app wrapper to act as a strict Flex row,
   overriding the CSS Grid defined inside the room.html <style> tags. */

.chat-app-wrapper,
#chat-app-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.chat-pane-center,
#center-pane {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: margin-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Force header to stick flush to the top */
.chat-stage-header {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    top: 0 !important;
    position: absolute !important;
}

/* Desktop Island Side-by-Side View */
@media (min-width: 1024px) {
    .chat-pane-right,
    #security-panel {
        position: relative !important;
        flex: 0 0 360px !important;
        width: 360px !important;
        max-width: 360px !important;
        height: 100dvh !important;
        transform: translateX(0) !important;
        margin-right: 0 !important;
        opacity: 1 !important;
        border-left: 1px solid var(--glass-border-light, rgba(255,255,255,0.1)) !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        transition: margin-right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
    }

    /* Pushes right panel into oblivion and lets the center expand */
    .chat-pane-right.is-closed,
    #security-panel.is-closed {
        margin-right: -360px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border-left: none !important;
    }
    
    #security-backdrop { display: none !important; }
}

/* Mobile Slide-Over View */
@media (max-width: 1023.98px) {
    .chat-pane-right,
    #security-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(360px, 90vw) !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(0) !important;
        border-radius: 24px 0 0 24px !important; 
        box-shadow: -20px 0 60px rgba(0,0,0,0.8) !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
    }

    .chat-pane-right.is-closed,
    #security-panel.is-closed {
        transform: translateX(105%) !important;
    }

    #security-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9998 !important;
        background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
        display: block !important;
    }

    #security-backdrop.is-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
/**
 * ==========================================================================
 * NYCHAT OS - MASTER STYLESHEET (ENTERPRISE GLASSMORPHISM EDITION)
 * Architecture: Scalable Ultra-Glass, 3D Spatial Layouts & Motion Physics
 * ==========================================================================
 */

/* ==========================================================================
   01. EXHAUSTIVE DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* --- Primary Color Scale (Indigo/Blue) --- */
    --primary-50: #f0f5ff;
    --primary-100: #e6eeff;
    --primary-200: #c9dbff;
    --primary-300: #afc6ff;
    --primary-400: #82abff;
    --primary-500: #528dff; /* Brand Primary */
    --primary-600: #2b61d6;
    --primary-700: #004398;
    --primary-800: #002d6c;
    --primary-900: #001a43;
    --primary-950: #000d24;

    /* --- Secondary Color Scale (Purple) --- */
    --secondary-50: #fcfaff;
    --secondary-100: #f2e8ff;
    --secondary-200: #e3cfff;
    --secondary-300: #d0bcff;
    --secondary-400: #b08dff;
    --secondary-500: #8c52ff; /* Brand Secondary */
    --secondary-600: #6b2be0;
    --secondary-700: #571bc1;
    --secondary-800: #420b9e;
    --secondary-900: #2a007a;
    --secondary-950: #1a004d;

    /* --- Success Color Scale (Green) --- */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* --- Danger Color Scale (Red) --- */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* --- Warning Color Scale (Amber) --- */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* --- Surface & Base Colors (True Black / Dark Mode) --- */
    --bg-void: #000000;
    --bg-surface-0: #050505;
    --bg-surface-1: #0a0a0c;
    --bg-surface-2: #11131a;
    --bg-surface-3: #1a1c23;
    --bg-surface-4: #23252d;
    --bg-surface-5: #2d303b;
    --bg-surface-6: #383c4a;
    --bg-surface-7: #444859;
    --bg-surface-8: #515669;
    --bg-surface-9: #5e6478;

    /* --- Typography Colors --- */
    --text-pure: #ffffff;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6b6b70;

    /* --- ENHANCED GLASSMORPHISM ENGINE (BLUR & SATURATION) --- */
    --glass-blur-sm: 8px;
    --glass-blur-md: 16px;
    --glass-blur-lg: 32px;
    --glass-blur-xl: 48px;
    
    --glass-sat-low: 130%;
    --glass-sat-mid: 160%;
    --glass-sat-high: 190%;

    /* --- Premium Structural Borders & Specular Highlights --- */
    --glass-border-heavy: rgba(255, 255, 255, 0.25);
    --glass-border-mid: rgba(255, 255, 255, 0.14);
    --glass-border-light: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-border-faint: rgba(255, 255, 255, 0.03);

    /* --- Box Shadows --- */
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 12px 24px -6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   02. EXHAUSTIVE CSS RESET & NORMALIZATION
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; }
body { background-color: var(--bg-void); color: var(--text-primary); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
a { text-decoration: none; color: inherit; cursor: pointer; background-color: transparent; }
button, input, textarea { font-family: inherit; font-size: 100%; outline: none; border: none; background: none; }

/* ==========================================================================
   03. ACCESSIBILITY & CORE STATES
   ========================================================================== */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; border-radius: 4px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 100px; transition: background 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* ==========================================================================
   04. TYPOGRAPHY SCALES & UTILITIES
   ========================================================================== */
h1, .h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
p, .p-body { font-size: 1rem; font-weight: 500; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5em; text-wrap: pretty; }
.text-pure { color: var(--text-pure); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal; font-size: 24px;
    display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal;
    word-wrap: normal; white-space: nowrap; direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   05. HIGH-INTENSITY GLASSMORPHISM ENGINE
   ========================================================================== */
.glass-panel {
    background: rgba(10, 10, 12, 0.25) !important;
    backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat-high)) !important;
    border: 1px solid var(--glass-border-light) !important;
    box-shadow: var(--shadow-lg) !important;
}

.glow-card { position: relative; overflow: hidden; }
.glow-card::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.2), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 1;
}
.glow-card:hover::before { opacity: 1; }

/* ==========================================================================
   15. ROOM.HTML BULLETPROOF LAYOUT OVERRIDES (THE ULTIMATE GRID KILLER)
   ========================================================================== */

/* This explicitly overrides the inline <style> inside room.html 
   that was using `display: grid; grid-template-columns: 1fr;` 
   and dropping the panel to the bottom row!
*/

body:has(#chat-app-wrapper) {
    overflow: hidden !important;
}

div#chat-app-wrapper, 
.chat-app-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

div#chat-app-wrapper > .chat-pane-center,
div#chat-app-wrapper > div:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: margin-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Force header to stick flush to the top */
.chat-stage-header {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* --- DESKTOP (Side-by-Side Flexbox) --- */
@media (min-width: 1024px) {
    div#chat-app-wrapper > aside#security-panel,
    div#chat-app-wrapper > .chat-pane-right {
        position: relative !important;
        flex: 0 0 360px !important;
        width: 360px !important;
        max-width: 360px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(0) !important;
        margin-right: 0 !important;
        opacity: 1 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-bottom: none !important;
        border-right: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
        transition: margin-right 0.3s ease, opacity 0.2s ease !important;
        z-index: 50 !important;
    }

    /* Pulls panel off-screen via margin, magically expanding the chat area */
    div#chat-app-wrapper > aside#security-panel.is-closed,
    div#chat-app-wrapper > .chat-pane-right.is-closed {
        margin-right: -360px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border-left: none !important;
    }

    /* Ensure text doesn't squish while sliding */
    div#chat-app-wrapper .sec-scroll {
        width: 360px !important;
    }

    div#security-backdrop { display: none !important; }
}

/* --- MOBILE/TABLET (Slide-over overlay) --- */
@media (max-width: 1023.98px) {
    div#chat-app-wrapper > aside#security-panel,
    div#chat-app-wrapper > .chat-pane-right {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 360px !important;
        max-width: 85vw !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(0) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 24px 0 0 24px !important;
        box-shadow: -20px 0 60px rgba(0,0,0,0.8) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
        background: rgba(10,10,10,0.9) !important;
        backdrop-filter: blur(28px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
        border-left: 1px solid rgba(255,255,255,0.08) !important;
    }

    div#chat-app-wrapper > aside#security-panel.is-closed,
    div#chat-app-wrapper > .chat-pane-right.is-closed {
        transform: translateX(105%) !important;
    }
    
    div#chat-app-wrapper .sec-scroll {
        width: 100% !important;
    }
    
    div#security-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 9998 !important;
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
    }
    
    div#security-backdrop.is-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
/* ==========================================================================
   GIF PICKER COMPONENT
   ========================================================================== */
.gif-search-input {
    flex: 1; 
    background: rgba(0, 0, 0, 0.35); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 14px; 
    padding: 10px 14px; 
    color: #fff; 
    font-size: 14px; 
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gif-search-input:focus {
    border-color: rgba(79, 140, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 4px;
}
.gif-grid::-webkit-scrollbar { width: 6px; }
.gif-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 999px; }

.gif-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.46, 1.15), border-color 0.2s ease;
}
.gif-item:hover, .gif-item:focus-visible {
    transform: scale(1.04);
    border-color: rgba(255, 255, 255, 0.2);
    z-index: 2;
    outline: none;
}

.gif-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    background-size: 200% 100%;
    animation: gif-shimmer-anim 2s infinite linear;
}
@keyframes gif-shimmer-anim {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gif-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}