/* ═══════════════════════════════════════════════════════════════════════
   ✦ GAIBRA MudBlazor Edition - THE SEVENTH MIND ✦
   A Philosophical AI Companion with Unwavering Wisdom
   
   Design Language: Luxury • Depth • Clarity • Wisdom
   Matching Original Site.css Design System
   ═══════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   █ 0. IMPORTS & RESETS
   ───────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 1. DESIGN FOUNDATION - CSS Variables
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* ═══ Deep Space Color Palette (Light Mode Default) ═══ */
    --void-black: #ffffff;
    --deep-space: #fafbfc;
    --cosmic-depth: #f6f8fa;
    --dark-matter: #eef1f5;
    --nebula-gray: #e1e4e8;
    --stellar-surface: #ffffff;
    /* ═══ Luminous Text Colors - DARK TEXT for light mode ═══ */
    --text-brilliant: #0a0d14;
    --text-bright: #13171f;
    --text-normal: #1a1f2b;
    --text-dim: #30363d;
    --text-faint: #484f58;
    --text-subtle: #6e7681;
    /* ═══ Wisdom Blue - The Accent of Intelligence ═══ */
    --wisdom-bright: #0366d6;
    --wisdom-main: #0366d6;
    --wisdom-deep: #044289;
    --wisdom-glow: rgba(3, 102, 214, 0.15);
    --wisdom-subtle: rgba(3, 102, 214, 0.08);
    --wisdom-whisper: rgba(3, 102, 214, 0.05);
    /* ═══ Semantic Colors ═══ */
    --success: #3fb950;
    --success-glow: rgba(63, 185, 80, 0.15);
    --warning: #d29922;
    --warning-glow: rgba(210, 153, 34, 0.15);
    --danger: #f85149;
    --danger-glow: rgba(248, 81, 73, 0.15);
    --info: #58a6ff;
    /* ═══ Borders & Dividers ═══ */
    --border-subtle: #e1e4e8;
    --border-normal: #d1d5da;
    --border-strong: #959da5;
    --border-accent: var(--wisdom-main);
    /* ═══ Layered Shadow System ═══ */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.03);
    --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-dramatic: 0 24px 64px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.12);
    --wisdom-glow-shadow: 0 0 24px var(--wisdom-glow), 0 0 48px rgba(3, 102, 214, 0.1);
    /* ═══ Refined Spacing Scale ═══ */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 28px;
    --space-2xl: 36px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    /* ═══ Border Radius - Smooth & Elegant ═══ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    /* ═══ Typography Scale ═══ */
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    /* ═══ Font Families ═══ */
    --font-primary: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    /* ═══ Fluid Transitions ═══ */
    --transition-swift: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    /* ═══ Z-Index Layers ═══ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* ═══ Dark Theme Override ═══ */
[data-theme="dark"] {
    /* ═══ Deep Space Color Palette ═══ */
    --void-black: #000000;
    --deep-space: #0a0d14;
    --cosmic-depth: #0f1318;
    --dark-matter: #13171f;
    --nebula-gray: #1a1f2b;
    --stellar-surface: #1f2430;
    /* ═══ Luminous Text Colors ═══ */
    --text-brilliant: #f0f6fc;
    --text-bright: #e3eaf2;
    --text-normal: #c9d1d9;
    --text-dim: #8b949e;
    --text-faint: #6e7681;
    --text-subtle: #484f58;
    /* ═══ Wisdom Blue - The Accent of Intelligence ═══ */
    --wisdom-bright: #6b8aff;
    --wisdom-main: #5571e8;
    --wisdom-deep: #4257c9;
    --wisdom-glow: rgba(107, 138, 255, 0.20);
    --wisdom-subtle: rgba(107, 138, 255, 0.10);
    --wisdom-whisper: rgba(107, 138, 255, 0.05);
    /* ═══ Borders & Dividers ═══ */
    --border-subtle: #21262d;
    --border-normal: #30363d;
    --border-strong: #484f58;
    /* ═══ Layered Shadow System ═══ */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-dramatic: 0 24px 64px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5);
    --wisdom-glow-shadow: 0 0 24px var(--wisdom-glow), 0 0 48px rgba(107, 138, 255, 0.1);
}

/* Apply theme based on data-theme attribute */
body[data-theme="light"],
body:not([data-theme]) {
    background: var(--deep-space) !important;
    color: var(--text-normal) !important;
}

body[data-theme="dark"] {
    background: var(--deep-space) !important;
    color: var(--text-normal) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 2. MudBlazor OVERRIDES - Deep Space Theme
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Global MudBlazor Adjustments ═══ */
.mud-main-content {
    background: var(--deep-space) !important;
    font-family: var(--font-primary) !important;
}

.mud-typography {
    font-family: var(--font-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 3. DRAWER (SIDEBAR) - The Navigation Sanctuary
   ───────────────────────────────────────────────────────────────────── */

.gaibra-drawer.mud-drawer {
    width: 320px !important;
    background: linear-gradient(180deg, var(--cosmic-depth) 0%, var(--deep-space) 100%) !important;
    border-right: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-medium) !important;
    transition: all var(--transition-smooth) !important;
}

/* ═══ Drawer Header - Wisdom Brand ═══ */
.gaibra-drawer-header {
    padding: var(--space-xl) var(--space-lg) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

    .gaibra-drawer-header .mud-typography {
        color: var(--text-brilliant) !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
    }

    .gaibra-drawer-header .mud-icon-root {
        color: var(--wisdom-bright) !important;
        filter: drop-shadow(var(--wisdom-glow-shadow)) !important;
    }

/* ═══ Drawer Content - Conversation List ═══ */
.gaibra-drawer-content {
    padding: var(--space-sm) var(--space-md) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

    .gaibra-drawer-content::-webkit-scrollbar {
        width: 6px;
    }

    .gaibra-drawer-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .gaibra-drawer-content::-webkit-scrollbar-thumb {
        background: var(--border-normal);
        border-radius: var(--radius-sm);
    }

        .gaibra-drawer-content::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong);
        }

/* ═══ Drawer Footer ═══ */
.gaibra-drawer-footer {
    padding: var(--space-lg) !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: transparent !important;
}

.drawer-toggle-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--text-dim) !important;
    border: 1px solid var(--border-normal) !important;
    transition: all var(--transition-smooth) !important;
}

    .drawer-toggle-btn:hover {
        color: var(--text-bright) !important;
        border-color: var(--border-strong) !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }

/* ─────────────────────────────────────────────────────────────────────
   █ 4. APP BAR (TOPBAR) - Command Center
   ───────────────────────────────────────────────────────────────────── */

.gaibra-appbar.mud-appbar {
    background: var(--cosmic-depth) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-soft) !important;
    backdrop-filter: blur(20px) !important;
}

.gaibra-title {
    font-weight: 700 !important;
    font-size: var(--text-lg) !important;
    letter-spacing: 0.03em !important;
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.gaibra-subtitle {
    font-size: var(--text-xs) !important;
    color: var(--text-dim) !important;
    font-weight: 500 !important;
}

/* ═══ Status Indicator ═══ */
.mud-chip.mud-chip-text.mud-chip-size-small {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border-radius: var(--radius-full) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 5. MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────────────── */

.gaibra-main-content {
    background: var(--deep-space) !important;
    min-height: 100vh !important;
}

.gaibra-chat-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: var(--space-2xl) var(--space-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 200px) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 6. CHAT THREAD
   ───────────────────────────────────────────────────────────────────── */

.gaibra-chat-thread {
    min-height: calc(100vh - 320px) !important;
    padding: var(--space-xl) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

    .gaibra-chat-thread::-webkit-scrollbar {
        width: 8px;
    }

    .gaibra-chat-thread::-webkit-scrollbar-track {
        background: transparent;
    }

    .gaibra-chat-thread::-webkit-scrollbar-thumb {
        background: var(--border-normal);
        border-radius: var(--radius-sm);
    }

        .gaibra-chat-thread::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong);
        }

/* ─────────────────────────────────────────────────────────────────────
   █ 7. EMPTY STATE - Wisdom Awaits
   ───────────────────────────────────────────────────────────────────── */

.gaibra-empty-state {
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding: var(--space-2xl) !important;
}

.empty-state-icon {
    font-size: 36px !important;
}

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

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.empty-state-title {
    font-size: var(--text-2xl) !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    margin: var(--space-lg) 0 var(--space-md) !important;
    background: linear-gradient(135deg, var(--text-brilliant) 0%, var(--text-bright) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.empty-state-description {
    font-size: var(--text-sm) !important;
    line-height: 1.2 !important;
    max-width: 450px !important;
    margin: 0 auto var(--space-sm) !important;
    color: var(--text-normal) !important;
}

.empty-state-style {
    font-size: var(--text-sm) !important;
    color: var(--text-dim) !important;
    margin-bottom: var(--space-lg) !important;
}

.empty-state-cta {
    font-size: var(--text-xs) !important;
    font-weight: 300 !important;
    color: var(--wisdom-main) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 8. MESSAGES - The Wisdom Exchange
   ───────────────────────────────────────────────────────────────────── */

.message-row {
    margin-bottom: var(--space-lg) !important;
    animation: slideIn var(--transition-elegant) ease-out !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══ Message Bubble - Base ═══ */
.message-bubble.mud-paper {
    max-width: 85% !important;
    padding: var(--space-lg) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-smooth) !important;
    backdrop-filter: blur(10px) !important;
}

    .message-bubble.mud-paper:hover {
        transform: translateY(-2px) !important;
    }

/* ═══ User Message - Wisdom Blue Gradient ═══ */
.message-bubble.user-message {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    border: 1px solid var(--wisdom-main) !important;
    box-shadow: var(--wisdom-glow-shadow) !important;
}

    .message-bubble.user-message .mud-typography,
    .message-bubble.user-message .message-content {
        color: #ffffff !important;
    }

/* ═══ Assistant Message - Dark Surface ═══ */
.message-bubble.assistant-message {
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .message-bubble.assistant-message:hover {
        border-color: var(--border-normal) !important;
        box-shadow: var(--shadow-medium) !important;
    }

    .message-bubble.assistant-message .mud-typography,
    .message-bubble.assistant-message .message-content {
        color: var(--text-normal) !important;
    }

/* ═══ Message Avatar ═══ */
.message-avatar.mud-avatar {
    font-weight: 700 !important;
    font-size: var(--text-base) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.message-avatar.mud-avatar-primary {
    background: linear-gradient(135deg, var(--wisdom-bright), var(--wisdom-deep)) !important;
}

.message-avatar.mud-avatar-secondary {
    background: var(--nebula-gray) !important;
    border: 1px solid var(--border-normal) !important;
}

/* ═══ Message Author ═══ */
.message-author {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    color: var(--wisdom-main) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ═══ Message Content ═══ */
.message-content {
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    color: var(--text-normal) !important;
}

    .message-content code {
        padding: var(--space-2xs) var(--space-xs) !important;
        background: var(--cosmic-depth) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-sm) !important;
        font-family: var(--font-mono) !important;
        font-size: var(--text-sm) !important;
    }

    .message-content pre {
        padding: var(--space-md) !important;
        background: var(--cosmic-depth) !important;
        border: 1px solid var(--border-normal) !important;
        border-radius: var(--radius-md) !important;
        overflow-x: auto !important;
    }

/* ═══ Message Actions ═══ */
.message-actions {
    opacity: 0 !important;
    transition: opacity var(--transition-smooth) !important;
}

.message-bubble:hover .message-actions {
    opacity: 1 !important;
}

.message-actions .mud-icon-button {
    color: var(--text-dim) !important;
    transition: all var(--transition-swift) !important;
}

    .message-actions .mud-icon-button:hover {
        color: var(--text-bright) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

/* ═══ Copy Feedback ═══ */
.copy-feedback.mud-chip {
    animation: fadeIn var(--transition-smooth) ease-out !important;
    font-size: var(--text-2xs) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ═══ Streaming Indicator ═══ */
.streaming-indicator.mud-progress-linear {
    margin-top: var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    height: 3px !important;
}

.streaming-indicator .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--wisdom-bright), var(--wisdom-deep)) !important;
    box-shadow: 0 0 12px var(--wisdom-glow) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 9. TYPING INDICATOR
   ───────────────────────────────────────────────────────────────────── */

.typing-indicator-container {
    padding: var(--space-lg) var(--space-xl) !important;
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .typing-indicator-container .mud-progress-circular {
        animation: rotate 1.5s linear infinite !important;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   █ 10. COMPOSER - The Input Sanctuary
   ───────────────────────────────────────────────────────────────────── */

.gaibra-composer.mud-paper {
    position: relative !important;
    bottom: auto !important;
    margin-top: var(--space-2xl) !important;
    padding: var(--space-xl) !important;
    background: var(--dark-matter) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-strong) !important;
    backdrop-filter: blur(20px) !important;
    z-index: var(--z-sticky) !important;
}

/* ═══ Input Field ═══ */
.composer-input .mud-input {
    font-size: var(--text-base) !important;
    line-height: 1.6 !important;
    color: var(--text-bright) !important;
    background: transparent !important;
}

    .composer-input .mud-input::placeholder {
        color: var(--text-faint) !important;
    }

.composer-input .mud-input-root {
    background: var(--nebula-gray) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth) !important;
}

    .composer-input .mud-input-root:hover {
        border-color: var(--border-normal) !important;
        background: var(--stellar-surface) !important;
    }

    .composer-input .mud-input-root.mud-input-root-focused {
        border-color: var(--wisdom-main) !important;
        box-shadow: 0 0 0 3px var(--wisdom-subtle) !important;
        background: var(--dark-matter) !important;
    }

        .composer-input .mud-input-root.mud-input-root-focused .mud-input {
            color: var(--text-brilliant) !important;
        }

/* ═══ Send Button - Wisdom Glow ═══ */
.send-button.mud-fab {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    box-shadow: var(--wisdom-glow-shadow) !important;
    transition: all var(--transition-smooth) !important;
    width: 48px !important;
    height: 48px !important;
}

    .send-button.mud-fab:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: var(--shadow-strong), var(--wisdom-glow-shadow) !important;
    }

    .send-button.mud-fab:active {
        transform: translateY(0) scale(0.98) !important;
    }

    .send-button.mud-fab:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }

/* ═══ Composer Footer ═══ */
.composer-footer {
    padding-top: var(--space-md) !important;
}

    .composer-footer .mud-typography {
        font-size: var(--text-xs) !important;
        color: var(--text-dim) !important;
    }

    .composer-footer .mud-icon-root {
        font-size: var(--text-sm) !important;
        color: var(--text-dim) !important;
    }

/* ═══ Textarea inside input ═══ */
.composer-input textarea.mud-input {
    color: var(--text-bright) !important;
    caret-color: var(--wisdom-bright) !important;
}

/* ═══ Icon color in input ═══ */
.composer-input .mud-input-root .mud-input-adornment .mud-icon-root {
    color: var(--text-dim) !important;
}

.composer-input .mud-input-root.mud-input-root-focused .mud-input-adornment .mud-icon-root {
    color: var(--wisdom-bright) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 11. DIALOG (MODAL) - Beta Notice
   ───────────────────────────────────────────────────────────────────── */

.mud-dialog {
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-dramatic) !important;
}

.mud-dialog-title {
    font-size: var(--text-xl) !important;
    font-weight: 700 !important;
    color: var(--text-brilliant) !important;
    padding: var(--space-xl) var(--space-2xl) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.mud-dialog-content {
    padding: var(--space-xl) var(--space-2xl) !important;
    color: var(--text-normal) !important;
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
}

.mud-dialog-actions {
    padding: var(--space-lg) var(--space-2xl) var(--space-xl) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 12. BUTTONS
   ───────────────────────────────────────────────────────────────────── */

.mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: var(--text-sm) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth) !important;
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: var(--shadow-medium), var(--wisdom-glow-shadow) !important;
        transform: translateY(-1px) !important;
    }

.mud-button-text {
    color: var(--text-normal) !important;
}

    .mud-button-text:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-bright) !important;
    }

/* ─────────────────────────────────────────────────────────────────────
   █ 13. RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .gaibra-drawer.mud-drawer {
        width: 280px !important;
    }

    .gaibra-chat-container {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .message-bubble.mud-paper {
        max-width: 95% !important;
        padding: var(--space-md) var(--space-lg) !important;
    }

    .gaibra-composer.mud-paper {
        padding: var(--space-lg) !important;
        border-radius: var(--radius-lg) !important;
    }

    .empty-state-title {
        font-size: var(--text-2xl) !important;
    }
}

@media (max-width: 600px) {
    .gaibra-drawer.mud-drawer {
        width: 100% !important;
        max-width: 320px !important;
    }

    .message-bubble.mud-paper {
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   █ 14. RTL SUPPORT
   ───────────────────────────────────────────────────────────────────── */

[dir="rtl"] .gaibra-drawer.mud-drawer {
    border-right: none !important;
    border-left: 1px solid var(--border-subtle) !important;
}

[dir="rtl"] .message-bubble.mud-paper {
    text-align: right !important;
}

[dir="rtl"] .message-content {
    direction: rtl !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 15. ACCESSIBILITY & MOTION
   ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Indicators */
.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-input-root:focus-within {
    outline: 2px solid var(--wisdom-bright) !important;
    outline-offset: 2px !important;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .gaibra-drawer.mud-drawer {
        border-width: 2px !important;
    }

    .message-bubble.mud-paper {
        border-width: 2px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   █ 16. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────── */

.text-brilliant {
    color: var(--text-brilliant) !important;
}

.text-bright {
    color: var(--text-bright) !important;
}

.text-normal {
    color: var(--text-normal) !important;
}

.text-dim {
    color: var(--text-dim) !important;
}

.text-faint {
    color: var(--text-faint) !important;
}

.bg-deep-space {
    background: var(--deep-space) !important;
}

.bg-cosmic-depth {
    background: var(--cosmic-depth) !important;
}

.bg-stellar-surface {
    background: var(--stellar-surface) !important;
}

.wisdom-gradient {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
}

.wisdom-glow {
    box-shadow: var(--wisdom-glow-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 17. THEME TOGGLE BUTTON - Custom Styling
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Theme Toggle Button Base ═══ */
.theme-toggle-button.mud-icon-button {
    transition: all var(--transition-smooth) !important;
    border-radius: var(--radius-full) !important;
}

/* ═══ Dark Mode - Light Icon ═══ */
[data-theme="dark"] .theme-toggle-button .mud-icon-root {
    color: var(--text-bright) !important;
    transition: color var(--transition-smooth) !important;
}

[data-theme="dark"] .theme-toggle-button:hover .mud-icon-root {
    color: var(--text-brilliant) !important;
    transform: rotate(15deg) !important;
}

/* ═══ Light Mode - Dark Icon ═══ */
[data-theme="light"] .theme-toggle-button .mud-icon-root,
body:not([data-theme]) .theme-toggle-button .mud-icon-root {
    color: var(--text-normal) !important;
    transition: color var(--transition-smooth) !important;
}

[data-theme="light"] .theme-toggle-button:hover .mud-icon-root,
body:not([data-theme]) .theme-toggle-button:hover .mud-icon-root {
    color: var(--text-bright) !important;
    transform: rotate(15deg) !important;
}

/* ═══ Hover Effects ═══ */
.theme-toggle-button:hover {
    background: var(--wisdom-subtle) !important;
    transform: scale(1.05) !important;
}

[data-theme="dark"] .theme-toggle-button:hover {
    box-shadow: 0 0 16px rgba(107, 138, 255, 0.2) !important;
}

[data-theme="light"] .theme-toggle-button:hover,
body:not([data-theme]) .theme-toggle-button:hover {
    box-shadow: 0 0 16px rgba(3, 102, 214, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 18. CONVERSATION NAV ITEMS STYLING
   ───────────────────────────────────────────────────────────────────── */

.mud-navmenu .mud-nav-link {
    position: relative !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-xs) !important;
    transition: all var(--transition-smooth) !important;
}

    .mud-navmenu .mud-nav-link:hover {
        background: rgba(107, 138, 255, 0.1) !important;
    }

    .mud-navmenu .mud-nav-link.mud-selected {
        background: var(--wisdom-subtle) !important;
        border-left: 3px solid var(--wisdom-bright) !important;
    }

[dir="rtl"] .mud-navmenu .mud-nav-link.mud-selected {
    border-left: none !important;
    border-right: 3px solid var(--wisdom-bright) !important;
}

/* ═══ Conversation Items Text ═══ */
.conversation-title {
    color: var(--text-bright) !important;
    font-weight: 600 !important;
}

.mud-navmenu .mud-nav-link:hover .conversation-title {
    color: var(--text-brilliant) !important;
}

.mud-navmenu .mud-nav-link.mud-selected .conversation-title {
    color: var(--wisdom-bright) !important;
    font-weight: 700 !important;
}

/* ═══ Conversation Actions - Hidden by default ═══ */
.conversation-actions {
    opacity: 0 !important;
    transition: opacity var(--transition-swift) !important;
}

.mud-nav-link:hover .conversation-actions {
    opacity: 1 !important;
}

.conversation-actions .mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
}

    .conversation-actions .mud-icon-button:hover {
        background: rgba(0, 0, 0, 0.5) !important;
        transform: scale(1.1) !important;
    }

    .conversation-actions .mud-icon-button.mud-error:hover {
        background: rgba(248, 81, 73, 0.2) !important;
    }

/* ═══ MudNavMenu Base Styling ═══ */
.gaibra-drawer-content .mud-navmenu {
    padding: 0 !important;
}

.mud-navmenu .mud-nav-item {
    margin: 0 !important;
}

/* ═══ Empty state in drawer ═══ */
.gaibra-drawer-content .mud-typography.pa-4 {
    margin-top: var(--space-4xl);
    text-align: center;
    color: var(--text-dim) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 19. GAIBRA LOGO
   ───────────────────────────────────────────────────────────────────── */

.gaibra-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(107, 138, 255, 0.25));
}

.gaibra-brand-text {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-brilliant) !important;
}

.gaibra-logo-appbar {
    height: 28px;
    width: auto;
    object-fit: contain;
    margin-right: 4px;
}

.gaibra-empty-logo {
    width: 60px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.15));
    animation: gaibra-breathe 4s ease-in-out infinite;
}

@keyframes gaibra-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   █ 20. SCROLL BEHAVIOR & LAYOUT FIXES
   ───────────────────────────────────────────────────────────────────── */

/* Scroll anchor styling */
.scroll-anchor {
    scroll-margin-top: 20px;
}

/* Auto-scroll behavior */
.gaibra-chat-thread {
    scroll-behavior: smooth;
}

/* Ensure new messages appear at the bottom */
.message-row:last-child {
    margin-bottom: 0 !important;
}

/* Chat layout fixes */
.gaibra-chat-container {
    display: flex !important;
    flex-direction: column !important;
}

.gaibra-chat-thread {
    flex: 1 !important;
    min-height: calc(100vh - 450px) !important;
}

.gaibra-composer.mud-paper {
    margin-top: auto !important;
    position: relative !important;
}

/* Composer يبقى في الأسفل */
.gaibra-composer-container {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: var(--z-sticky) !important;
}

/* التأكد من عدم وجود تداخل */
.mud-container.gaibra-chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}

/* مسافة بين آخر رسالة والـ Composer */
#chatEndAnchor {
    height: 40px !important;
    display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 21. TIMESTAMPS & CAPTIONS
   ───────────────────────────────────────────────────────────────────── */

.mud-typography.mud-typography-caption {
    color: var(--text-dim) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 22. ICON BUTTON COLOR FIXES
   ───────────────────────────────────────────────────────────────────── */

[data-theme="light"] .mud-icon-button.mud-icon-button-color-inherit .mud-icon-root,
body:not([data-theme]) .mud-icon-button.mud-icon-button-color-inherit .mud-icon-root {
    color: var(--text-normal) !important;
}

[data-theme="light"] .mud-icon-button.mud-icon-button-color-inherit:hover .mud-icon-root,
body:not([data-theme]) .mud-icon-button.mud-icon-button-color-inherit:hover .mud-icon-root {
    color: var(--text-bright) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 23. TEXT COLOR UTILITIES FOR MUDTEXT
   ───────────────────────────────────────────────────────────────────── */

[data-theme="light"] .mud-typography.mud-typography-color-default,
body:not([data-theme]) .mud-typography.mud-typography-color-default {
    color: var(--text-normal) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-secondary,
body:not([data-theme]) .mud-typography.mud-typography-color-secondary {
    color: var(--text-dim) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-tertiary,
body:not([data-theme]) .mud-typography.mud-typography-color-tertiary {
    color: var(--text-faint) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-primary,
body:not([data-theme]) .mud-typography.mud-typography-color-primary {
    color: var(--wisdom-main) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   █ 24. SPECIFIC ELEMENT COLOR FIXES
   ───────────────────────────────────────────────────────────────────── */

/* Empty State */
[data-theme="light"] .empty-state-title,
body:not([data-theme]) .empty-state-title {
    color: var(--text-bright) !important;
    background: linear-gradient(135deg, var(--text-bright) 0%, var(--text-normal) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .empty-state-description,
body:not([data-theme]) .empty-state-description {
    color: var(--text-normal) !important;
}

[data-theme="light"] .empty-state-style,
body:not([data-theme]) .empty-state-style {
    color: var(--text-dim) !important;
}

[data-theme="light"] .empty-state-cta,
body:not([data-theme]) .empty-state-cta {
    color: var(--wisdom-main) !important;
    text-shadow: 0 0 12px rgba(3, 102, 214, 0.2);
}

/* Dialog */
[data-theme="light"] .mud-dialog-title,
body:not([data-theme]) .mud-dialog-title {
    color: var(--text-bright) !important;
}

[data-theme="light"] .mud-dialog-content,
body:not([data-theme]) .mud-dialog-content {
    color: var(--text-normal) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   END OF GAIBRA MUDBLAZOR STYLES
   ═══════════════════════════════════════════════════════════════════════ */

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    font-weight: 600;
}

.message-content p {
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.message-content ul,
.message-content ol {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

.message-content code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.message-content pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.5em;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.message-content blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1em;
    margin: 0.5em 0;
    color: #666;
}

.message-content table {
    border-collapse: collapse;
    margin: 0.5em 0;
    width: 100%;
}

.message-content th,
.message-content td {
    border: 1px solid #ddd;
    padding: 0.3em 0.5em;
}

.message-content a {
    color: #007bff;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   IAL - Intervention Authority Layer Styles (Phase 2)
   ═══════════════════════════════════════════════════════════════ */

.gaibra-silent-mode,
.gaibra-observe-mode {
    transition: all 0.3s ease;
}

    .gaibra-silent-mode:hover {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    }

.intervention-badge {
    margin-top: 8px;
    font-family: var(--font-mono);
}

/* Message modifications for different intervention types */
.message-bubble[data-intervention="GoverningStatement"] {
    border-left: 4px solid var(--warning-color);
}

.message-bubble[data-intervention="ExecutiveJudgment"] {
    border-left: 4px solid var(--error-color);
    font-weight: 500;
}

.message-bubble[data-intervention="Observe"] {
    opacity: 0.8;
    font-style: italic;
}
/* ═══════════════════════════════════════════════════════════════════════
   ✦ GAIBRA MudBlazor Edition - THE SEVENTH MIND ✦
   A Philosophical AI Companion with Unwavering Wisdom
   
   Design Language: Luxury • Depth • Clarity • Wisdom
   Matching Original Site.css Design System
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   █ 1. DESIGN FOUNDATION - Imported from Site.css
   ───────────────────────────────────────────────────────────────────── */

/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {*/
    /* ═══ Deep Space Color Palette ═══ */
    /*--void-black: #000000;
    --deep-space: #0a0d14;
    --cosmic-depth: #0f1318;
    --dark-matter: #13171f;
    --nebula-gray: #1a1f2b;
    --stellar-surface: #1f2430;*/
    /* ═══ Luminous Text Colors ═══ */
    /*--text-brilliant: #f0f6fc;
    --text-bright: #e3eaf2;
    --text-normal: #c9d1d9;
    --text-dim: #8b949e;
    --text-faint: #6e7681;
    --text-subtle: #484f58;*/
    /* ═══ Wisdom Blue - The Accent of Intelligence ═══ */
    /*--wisdom-bright: #6b8aff;
    --wisdom-main: #5571e8;
    --wisdom-deep: #4257c9;
    --wisdom-glow: rgba(107, 138, 255, 0.20);
    --wisdom-subtle: rgba(107, 138, 255, 0.10);
    --wisdom-whisper: rgba(107, 138, 255, 0.05);*/
    /* ═══ Semantic Colors ═══ */
    /*--success: #3fb950;
    --success-glow: rgba(63, 185, 80, 0.15);
    --warning: #d29922;
    --warning-glow: rgba(210, 153, 34, 0.15);
    --danger: #f85149;
    --danger-glow: rgba(248, 81, 73, 0.15);
    --info: #58a6ff;*/
    /* ═══ Borders & Dividers ═══ */
    /*--border-subtle: #21262d;
    --border-normal: #30363d;
    --border-strong: #484f58;
    --border-accent: var(--wisdom-main);*/
    /* ═══ Layered Shadow System ═══ */
    /*--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-dramatic: 0 24px 64px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5);
    --wisdom-glow-shadow: 0 0 24px var(--wisdom-glow), 0 0 48px rgba(107, 138, 255, 0.1);*/
    /* ═══ Refined Spacing Scale ═══ */
    /*--space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 28px;
    --space-2xl: 36px;
    --space-3xl: 48px;
    --space-4xl: 64px;*/
    /* ═══ Border Radius - Smooth & Elegant ═══ */
    /*--radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;*/
    /* ═══ Typography Scale ═══ */
    /*--text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;*/
    /* ═══ Font Families ═══ */
    /*--font-primary: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;*/
    /* ═══ Fluid Transitions ═══ */
    /*--transition-swift: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 350ms cubic-bezier(0.4, 0, 0.2, 1);*/
    /* ═══ Z-Index Layers ═══ */
    /*--z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}*/

  
/* ═══ Light Theme (Optional) ═══ */
/*[data-theme="light"] {
    --void-black: #ffffff;
    --deep-space: #fafbfc;
    --cosmic-depth: #f6f8fa;
    --dark-matter: #eef1f5;
    --nebula-gray: #e1e4e8;
    --stellar-surface: #ffffff;*/
    /* ═══ Luminous Text Colors - DARK TEXT for light mode ═══ */
    /*--text-brilliant: #0a0d14 !important;*/ /* Dark deep space color */
    /*--text-bright: #13171f !important;*/ /* Dark matter color */
    /*--text-normal: #1a1f2b !important;*/ /* Nebula gray color */
    /*--text-dim: #30363d !important;*/ /* Border normal color */
    /*--text-faint: #484f58 !important;*/ /* Border strong color */
    /*--text-subtle: #6e7681 !important;*/ /* Text faint inverted */
    /* ═══ Wisdom Blue - The Accent of Intelligence ═══ */
    /*--wisdom-bright: #0366d6;
    --wisdom-main: #0366d6;
    --wisdom-deep: #044289;
    --wisdom-glow: rgba(3, 102, 214, 0.15);
    --wisdom-subtle: rgba(3, 102, 214, 0.08);*/
    /* ═══ Borders & Dividers ═══ */
    /*--border-subtle: #e1e4e8;
    --border-normal: #d1d5da;
    --border-strong: #959da5;*/
    /* ═══ Layered Shadow System ═══ */
    /*--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);
}*/
    /*body.mud-theme-light {*/
    /*--void-black: #ffffff;
    --deep-space: #fafbfc;
    --cosmic-depth: #f6f8fa;
    --dark-matter: #eef1f5;
    --nebula-gray: #e1e4e8;
    --stellar-surface: #ffffff;
    --text-brilliant: #1b1f23;
    --text-bright: #24292e;
    --text-normal: #586069;
    --text-dim: #6a737d;
    --text-faint: #959da5;
    --text-subtle: #c6cbd1;
    --wisdom-bright: #0366d6;
    --wisdom-main: #0366d6;
    --wisdom-deep: #044289;
    --wisdom-glow: rgba(3, 102, 214, 0.15);
    --wisdom-subtle: rgba(3, 102, 214, 0.08);
    --border-subtle: #e1e4e8;
    --border-normal: #d1d5da;
    --border-strong: #959da5;
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);*/
/*}*/

/* Apply dark theme by default */
/*body {
    background: var(--deep-space) !important;
    color: var(--text-normal) !important;
}*/

    /* Light theme styles */
    /*body.mud-theme-light {
        background: var(--deep-space) !important;
        color: var(--text-normal) !important;
    }*/

        /* Update MudBlazor components for light theme */
        /*body.mud-theme-light .mud-main-content {
            background: var(--deep-space) !important;
        }

        body.mud-theme-light .gaibra-drawer.mud-drawer {
            background: linear-gradient(180deg, var(--cosmic-depth) 0%, var(--deep-space) 100%) !important;
        }

        body.mud-theme-light .gaibra-appbar.mud-appbar {
            background: var(--cosmic-depth) !important;
        }*/

        /* Composer styling for light theme */
        /*body.mud-theme-light .gaibra-composer.mud-paper {
            background: var(--dark-matter) !important;
        }

        body.mud-theme-light .composer-input .mud-input-root {
            background: var(--nebula-gray) !important;
        }

        body.mud-theme-light .composer-input .mud-input {
            color: var(--text-bright) !important;
        }*/

/* ─────────────────────────────────────────────────────────────────────
   █ 2. MudBlazor OVERRIDES - Deep Space Theme
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Global MudBlazor Adjustments ═══ */
/*.mud-main-content {
    background: var(--deep-space) !important;
    font-family: var(--font-primary) !important;
}

.mud-typography {
    font-family: var(--font-primary) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 3. DRAWER (SIDEBAR) - The Navigation Sanctuary
   ───────────────────────────────────────────────────────────────────── */

/*.gaibra-drawer.mud-drawer {
    width: 320px !important;
    background: linear-gradient(180deg, var(--cosmic-depth) 0%, var(--deep-space) 100%) !important;
    border-right: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-medium) !important;
    transition: all var(--transition-smooth) !important;
}*/

/*.gaibra-drawer.mud-drawer-open {
    transform: translateX(0) !important;
}

.gaibra-drawer.mud-drawer-close {
    transform: translateX(-100%) !important;
}*/

/* ═══ Drawer Header - Wisdom Brand ═══ */
/*.gaibra-drawer-header {
    padding: var(--space-xl) var(--space-lg) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

    .gaibra-drawer-header .mud-typography {
        color: var(--text-brilliant) !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
    }

    .gaibra-drawer-header .mud-icon-root {
        color: var(--wisdom-bright) !important;
        filter: drop-shadow(var(--wisdom-glow-shadow)) !important;
    }*/

/* ═══ Drawer Content - Conversation List ═══ */
/*.gaibra-drawer-content {
    padding: var(--space-sm) var(--space-md) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

    .gaibra-drawer-content::-webkit-scrollbar {
        width: 6px;
    }

    .gaibra-drawer-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .gaibra-drawer-content::-webkit-scrollbar-thumb {
        background: var(--border-normal);
        border-radius: var(--radius-sm);
    }

        .gaibra-drawer-content::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong);
        }*/

/* ═══ Drawer Footer ═══ */
/*.gaibra-drawer-footer {
    padding: var(--space-lg) !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: transparent !important;
}

.drawer-toggle-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--text-dim) !important;
    border: 1px solid var(--border-normal) !important;
    transition: all var(--transition-smooth) !important;
}

    .drawer-toggle-btn:hover {
        color: var(--text-bright) !important;
        border-color: var(--border-strong) !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }*/

/* ─────────────────────────────────────────────────────────────────────
   █ 4. APP BAR (TOPBAR) - Command Center
   ───────────────────────────────────────────────────────────────────── */

/*.gaibra-appbar.mud-appbar {
    background: var(--cosmic-depth) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-soft) !important;
    backdrop-filter: blur(20px) !important;
}

.gaibra-title {
    font-weight: 700 !important;
    font-size: var(--text-lg) !important;
    letter-spacing: 0.03em !important;
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.gaibra-subtitle {
    font-size: var(--text-xs) !important;
    color: var(--text-dim) !important;
    font-weight: 500 !important;
}*/

/* ═══ Status Indicator ═══ */
/*.mud-chip.mud-chip-text.mud-chip-size-small {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border-radius: var(--radius-full) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 5. MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────────────── */

/*.gaibra-main-content {
    background: var(--deep-space) !important;
    min-height: 100vh !important;
}

.gaibra-chat-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: var(--space-2xl) var(--space-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 200px) !important;*/ /* تكييف مع التخطيط الجديد */
/*}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 6. CHAT THREAD
   ───────────────────────────────────────────────────────────────────── */
/*.gaibra-chat-thread {
    height: calc(100vh - 400px) !important;  ارتفاع ديناميكي 
    display: flex !important;
    align-items: center !important;  توسيط عمودي 
    justify-content: center !important;  توسيط أفقي 
    overflow-y: auto !important;
    padding: var(--space-xl) 0 !important;
}
*/
/*.gaibra-chat-thread {
    min-height: calc(100vh - 320px) !important;
    padding: var(--space-1xl) 0 !important;
    display: flex !important;
    flex-direction: column !important;*/ /* تأكد أنها column وليست column-reverse */
    /*overflow-y: auto !important;
}
    .gaibra-chat-thread::-webkit-scrollbar {
        width: 8px;
    }

    .gaibra-chat-thread::-webkit-scrollbar-track {
        background: transparent;
    }

    .gaibra-chat-thread::-webkit-scrollbar-thumb {
        background: var(--border-normal);
        border-radius: var(--radius-sm);
    }

        .gaibra-chat-thread::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong);
        }*/

/* ─────────────────────────────────────────────────────────────────────
   █ 7. EMPTY STATE - Wisdom Awaits
   ───────────────────────────────────────────────────────────────────── */
/*.gaibra-empty-state {
    max-height: 60vh !important;*/ /* كان 80vh */
    /*overflow-y: auto !important;
    padding: var(--space-1xl) !important;*/ /* كان 2xl */
/*}*/
/*.empty-state-title {
    font-size: var(--text-2xl) !important;*/ /* كان 3xl */
    /*font-weight: 300 !important;*/ /* كان 600 */
    /*letter-spacing: -0.015em !important;
    margin: var(--space-md) 0 var(--space-sm) !important;
}*/


/*.empty-state-icon {
    font-size: 36px !important;*/ /* كان 64px */
/*}

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

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.empty-state-title {
    font-size: var(--text-2xl) !important;*/ /* كان 3xl */
    /*font-weight: 500 !important;*/ /* كان 600 */
    /*letter-spacing: -0.015em !important;
    margin: var(--space-lg) 0 var(--space-md) !important;
    background: linear-gradient(135deg, var(--text-brilliant) 0%, var(--text-bright) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.empty-state-description {
    font-size: var(--text-sm) !important;*/ /* كان md */
    /*line-height: 1.2 !important;*/ /* كان 1.6 */
    /*max-width: 450px !important;*/ /* 520px */
    /*margin: 0 auto var(--space-sm) !important;
}


.empty-state-style {
    font-size: var(--text-sm) !important;
    color: var(--text-dim) !important;
    margin-bottom: var(--space-lg) !important;
}

.empty-state-cta {
    font-size: var(--text-xs) !important;*/ /* كان sm */
    /*font-weight: 300 !important;*/ /* كان 500 */
/*}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 8. MESSAGES - The Wisdom Exchange
   ───────────────────────────────────────────────────────────────────── */

/*.message-row {
    margin-bottom: var(--space-lg) !important;
    animation: slideIn var(--transition-elegant) ease-out !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/

/* ═══ Message Bubble - Base ═══ */
/*.message-bubble.mud-paper {
    max-width: 85% !important;
    padding: var(--space-lg) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-smooth) !important;
    backdrop-filter: blur(10px) !important;
}

    .message-bubble.mud-paper:hover {
        transform: translateY(-2px) !important;
    }*/

/* ═══ User Message - Wisdom Blue Gradient ═══ */
/*.message-bubble.user-message {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    border: 1px solid var(--wisdom-main) !important;
    box-shadow: var(--wisdom-glow-shadow) !important;
}

    .message-bubble.user-message .mud-typography,
    .message-bubble.user-message .message-content {
        color: var(--text-brilliant) !important;
    }*/

/* ═══ Assistant Message - Dark Surface ═══ */
/*.message-bubble.assistant-message {
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .message-bubble.assistant-message:hover {
        border-color: var(--border-normal) !important;
        box-shadow: var(--shadow-medium) !important;
    }

    .message-bubble.assistant-message .mud-typography,
    .message-bubble.assistant-message .message-content {
        color: var(--text-normal) !important;
    }*/

/* ═══ Message Avatar ═══ */
/*.message-avatar.mud-avatar {
    font-weight: 700 !important;
    font-size: var(--text-base) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.message-avatar.mud-avatar-primary {
    background: linear-gradient(135deg, var(--wisdom-bright), var(--wisdom-deep)) !important;
}

.message-avatar.mud-avatar-secondary {
    background: var(--nebula-gray) !important;
    border: 1px solid var(--border-normal) !important;
}*/

/* ═══ Message Author ═══ */
/*.message-author {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    color: var(--text-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}*/

/* ═══ Message Content ═══ */
/*.message-content {
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
}*/

    /* Code blocks within messages */
    /*.message-content code {
        padding: var(--space-2xs) var(--space-xs) !important;
        background: var(--cosmic-depth) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-sm) !important;
        font-family: var(--font-mono) !important;
        font-size: var(--text-sm) !important;
    }

    .message-content pre {
        padding: var(--space-md) !important;
        background: var(--cosmic-depth) !important;
        border: 1px solid var(--border-normal) !important;
        border-radius: var(--radius-md) !important;
        overflow-x: auto !important;
    }*/

/* ═══ Message Actions ═══ */
/*.message-actions {
    opacity: 0 !important;
    transition: opacity var(--transition-smooth) !important;
}

.message-bubble:hover .message-actions {
    opacity: 1 !important;
}

.message-actions .mud-icon-button {
    color: var(--text-dim) !important;
    transition: all var(--transition-swift) !important;
}

    .message-actions .mud-icon-button:hover {
        color: var(--text-bright) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }*/

/* ═══ Copy Feedback ═══ */
/*.copy-feedback.mud-chip {
    animation: fadeIn var(--transition-smooth) ease-out !important;
    font-size: var(--text-2xs) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}*/

/* ═══ Streaming Indicator ═══ */
/*.streaming-indicator.mud-progress-linear {
    margin-top: var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    height: 3px !important;
}

.streaming-indicator .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--wisdom-bright), var(--wisdom-deep)) !important;
    box-shadow: 0 0 12px var(--wisdom-glow) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 9. TYPING INDICATOR
   ───────────────────────────────────────────────────────────────────── */

/*.typing-indicator-container {
    padding: var(--space-lg) var(--space-xl) !important;
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .typing-indicator-container .mud-progress-circular {
        animation: rotate 1.5s linear infinite !important;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 10. COMPOSER - The Input Sanctuary
   ───────────────────────────────────────────────────────────────────── */

/*.gaibra-composer.mud-paper {
    position: relative !important;*/ /* تغيير من sticky إلى relative */
    /*bottom: auto !important;
    margin-top: var(--space-2xl) !important;
    padding: var(--space-xl) !important;
    background: var(--dark-matter) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-strong) !important;
    backdrop-filter: blur(20px) !important;
    z-index: var(--z-sticky) !important;
}*/

/* ═══ Input Field - Dark Mode ═══ */
/*.composer-input .mud-input {
    font-size: var(--text-base) !important;
    line-height: 1.6 !important;
    color: var(--text-bright) !important;*/ /* لون خط فاتح */
    /*background: transparent !important;
}

    .composer-input .mud-input::placeholder {
        color: var(--text-faint) !important;*/ /* لون placeholder خافت */
    /*}

.composer-input .mud-input-root {
    background: var(--nebula-gray) !important;*/ /* خلفية داكنة */
    /*border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth) !important;
}

    .composer-input .mud-input-root:hover {
        border-color: var(--border-normal) !important;
        background: var(--stellar-surface) !important;
    }

    .composer-input .mud-input-root.mud-input-root-focused {
        border-color: var(--wisdom-main) !important;
        box-shadow: 0 0 0 3px var(--wisdom-subtle) !important;
        background: var(--dark-matter) !important;
    }

        .composer-input .mud-input-root.mud-input-root-focused .mud-input {
            color: var(--text-brilliant) !important;*/ /* لون أكثر إشراقاً عند التركيز */
        /*}*/

/* ═══ Send Button - Wisdom Glow ═══ */
/*.send-button.mud-fab {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    box-shadow: var(--wisdom-glow-shadow) !important;
    transition: all var(--transition-smooth) !important;
    width: 48px !important;
    height: 48px !important;
}

    .send-button.mud-fab:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: var(--shadow-strong), var(--wisdom-glow-shadow) !important;
    }

    .send-button.mud-fab:active {
        transform: translateY(0) scale(0.98) !important;
    }

    .send-button.mud-fab:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }*/

/* ═══ Composer Footer ═══ */
/*.composer-footer {
    padding-top: var(--space-md) !important;
}

    .composer-footer .mud-typography {
        font-size: var(--text-xs) !important;
        color: var(--text-dim) !important;
    }

    .composer-footer .mud-icon-root {
        font-size: var(--text-sm) !important;
        color: var(--text-dim) !important;
    }*/

/* ═══ Textarea inside input ═══ */
/*.composer-input textarea.mud-input {
    color: var(--text-bright) !important;
    caret-color: var(--wisdom-bright) !important;*/ /* مؤشر الكتابة بلون أزرق */
/*}*/

/* ═══ Icon color in input ═══ */
/*.composer-input .mud-input-root .mud-input-adornment .mud-icon-root {
    color: var(--text-dim) !important;
}

.composer-input .mud-input-root.mud-input-root-focused .mud-input-adornment .mud-icon-root {
    color: var(--wisdom-bright) !important;
}*/

/*.gaibra-composer.mud-paper {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: var(--space-2xl) !important;
    padding: var(--space-xl) !important;
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-strong) !important;
    backdrop-filter: blur(20px) !important;
    z-index: var(--z-sticky) !important;
}*/

/* ═══ Input Field ═══ */
/*.composer-input .mud-input {
    font-size: var(--text-base) !important;
    line-height: 1.6 !important;
    color: var(--text-normal) !important;
}

.composer-input .mud-input-root {
    background: var(--cosmic-depth) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth) !important;
}

    .composer-input .mud-input-root:hover {
        border-color: var(--border-normal) !important;
    }

    .composer-input .mud-input-root.mud-input-root-focused {
        border-color: var(--wisdom-main) !important;
        box-shadow: 0 0 0 3px var(--wisdom-subtle) !important;
    }

        .composer-input .mud-input-root.mud-input-root-focused .mud-input {
            color: var(--text-bright) !important;
        }*/

/* ═══ Send Button - Wisdom Glow ═══ */
/*.send-button.mud-fab {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    box-shadow: var(--wisdom-glow-shadow) !important;
    transition: all var(--transition-smooth) !important;
    width: 48px !important;
    height: 48px !important;
}

    .send-button.mud-fab:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: var(--shadow-strong), var(--wisdom-glow-shadow) !important;
    }

    .send-button.mud-fab:active {
        transform: translateY(0) scale(0.98) !important;
    }

    .send-button.mud-fab:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }*/

/* ═══ Composer Footer ═══ */
/*.composer-footer {
    padding-top: var(--space-md) !important;
}

    .composer-footer .mud-typography {
        font-size: var(--text-xs) !important;
    }

    .composer-footer .mud-icon-root {
        font-size: var(--text-sm) !important;
    }*/

/* ─────────────────────────────────────────────────────────────────────
   █ 11. DIALOG (MODAL) - Beta Notice
   ───────────────────────────────────────────────────────────────────── */

/*.mud-dialog {
    background: var(--stellar-surface) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-dramatic) !important;
}

.mud-dialog-title {
    font-size: var(--text-xl) !important;
    font-weight: 700 !important;
    color: var(--text-brilliant) !important;
    padding: var(--space-xl) var(--space-2xl) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.mud-dialog-content {
    padding: var(--space-xl) var(--space-2xl) !important;
    color: var(--text-normal) !important;
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
}

.mud-dialog-actions {
    padding: var(--space-lg) var(--space-2xl) var(--space-xl) !important;
    border-top: 1px solid var(--border-subtle) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 12. BUTTONS
   ───────────────────────────────────────────────────────────────────── */

/*.mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: var(--text-sm) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth) !important;
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
    box-shadow: var(--shadow-soft) !important;
}

    .mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: var(--shadow-medium), var(--wisdom-glow-shadow) !important;
        transform: translateY(-1px) !important;
    }

.mud-button-text {
    color: var(--text-normal) !important;
}

    .mud-button-text:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-bright) !important;
    }*/

/* ─────────────────────────────────────────────────────────────────────
   █ 13. RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────────── */

/*@media (max-width: 960px) {
    .gaibra-drawer.mud-drawer {
        width: 280px !important;
    }

    .gaibra-chat-container {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .message-bubble.mud-paper {
        max-width: 95% !important;
        padding: var(--space-md) var(--space-lg) !important;
    }

    .gaibra-composer.mud-paper {
        padding: var(--space-lg) !important;
        border-radius: var(--radius-lg) !important;
    }

    .empty-state-title {
        font-size: var(--text-2xl) !important;
    }
}

@media (max-width: 600px) {
    .gaibra-drawer.mud-drawer {
        width: 100% !important;
        max-width: 320px !important;
    }

    .message-bubble.mud-paper {
        max-width: 100% !important;
    }
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 14. RTL SUPPORT
   ───────────────────────────────────────────────────────────────────── */

/*[dir="rtl"] .gaibra-drawer.mud-drawer {
    border-right: none !important;
    border-left: 1px solid var(--border-subtle) !important;
}

[dir="rtl"] .message-bubble.mud-paper {
    text-align: right !important;
}

[dir="rtl"] .message-content {
    direction: rtl !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 15. ACCESSIBILITY & MOTION
   ───────────────────────────────────────────────────────────────────── */

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

/* Focus Indicators */
/*.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-input-root:focus-within {
    outline: 2px solid var(--wisdom-bright) !important;
    outline-offset: 2px !important;
}*/

/* High Contrast Mode */
/*@media (prefers-contrast: high) {
    .gaibra-drawer.mud-drawer {
        border-width: 2px !important;
    }

    .message-bubble.mud-paper {
        border-width: 2px !important;
    }
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 16. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────── */

/*.text-brilliant {
    color: var(--text-brilliant) !important;
}

.text-bright {
    color: var(--text-bright) !important;
}

.text-normal {
    color: var(--text-normal) !important;
}

.text-dim {
    color: var(--text-dim) !important;
}

.text-faint {
    color: var(--text-faint) !important;
}

.bg-deep-space {
    background: var(--deep-space) !important;
}

.bg-cosmic-depth {
    background: var(--cosmic-depth) !important;
}

.bg-stellar-surface {
    background: var(--stellar-surface) !important;
}

.wisdom-gradient {
    background: linear-gradient(135deg, var(--wisdom-bright) 0%, var(--wisdom-deep) 100%) !important;
}

.wisdom-glow {
    box-shadow: var(--wisdom-glow-shadow) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 17. LIGHT MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Inherit Color in Light Mode - Make icons dark ═══ */
/*[data-theme="light"] .mud-icon-button.mud-icon-button-color-inherit .mud-icon-root {
    color: var(--text-normal) !important;
}

[data-theme="light"] .mud-icon-button.mud-icon-button-color-inherit:hover .mud-icon-root {
    color: var(--text-bright) !important;
}*/

/* ═══ MudText Color Overrides for Light Mode ═══ */
/*[data-theme="light"] .mud-typography.mud-typography-color-default {
    color: var(--text-normal) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-secondary {
    color: var(--text-dim) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-tertiary {
    color: var(--text-faint) !important;
}

[data-theme="light"] .mud-typography.mud-typography-color-primary {
    color: var(--wisdom-main) !important;
}*/

/* ═══ Empty State Text Overrides ═══ */
/*[data-theme="light"] .empty-state-title {
    color: var(--text-bright) !important;
    background: linear-gradient(135deg, var(--text-bright) 0%, var(--text-normal) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .empty-state-description {
    color: var(--text-normal) !important;
}

[data-theme="light"] .empty-state-style {
    color: var(--text-dim) !important;
}

[data-theme="light"] .empty-state-cta {
    color: var(--wisdom-main) !important;
    text-shadow: 0 0 12px rgba(3, 102, 214, 0.2);
}*/

/* ═══ Drawer Header Text ═══ */
/*[data-theme="light"] .gaibra-drawer-header .mud-typography {
    color: var(--text-bright) !important;
}*/

/* ═══ Conversation Items ═══ */
/*[data-theme="light"] .conversation-title {
    color: var(--text-normal) !important;
}

[data-theme="light"] .mud-navmenu .mud-nav-link:hover .conversation-title {
    color: var(--text-bright) !important;
}

[data-theme="light"] .mud-navmenu .mud-nav-link.mud-selected .conversation-title {
    color: var(--wisdom-main) !important;
}*/

/* ═══ Messages ═══ */
/*[data-theme="light"] .message-bubble.user-message .mud-typography,
[data-theme="light"] .message-bubble.user-message .message-content {
    color: #ffffff !important;*/ /* Keep white for user messages */
/*}

[data-theme="light"] .message-bubble.assistant-message .message-content,
[data-theme="light"] .message-bubble.assistant-message .mud-typography {
    color: var(--text-normal) !important;
}

[data-theme="light"] .message-author {
    color: var(--wisdom-main) !important;
}*/

/* ═══ Composer Text ═══ */
/*[data-theme="light"] .composer-input .mud-input {
    color: var(--text-normal) !important;
}

[data-theme="light"] .composer-input .mud-input-root.mud-input-root-focused .mud-input {
    color: var(--text-bright) !important;
}*/

/* ═══ AppBar Text ═══ */
/*[data-theme="light"] .gaibra-title {
    background: linear-gradient(135deg, var(--wisdom-main) 0%, var(--wisdom-deep) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .gaibra-subtitle {
    color: var(--text-dim) !important;
}*/

/* ═══ Dialog Text ═══ */
/*[data-theme="light"] .mud-dialog-title {
    color: var(--text-bright) !important;
}

[data-theme="light"] .mud-dialog-content {
    color: var(--text-normal) !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 18. THEME TOGGLE BUTTON - Custom Styling
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Theme Toggle Button Base ═══ */
/*.theme-toggle-button.mud-icon-button {
    transition: all var(--transition-smooth) !important;
    border-radius: var(--radius-full) !important;
}*/

/* ═══ Dark Mode - Light Icon ═══ */
/*[data-theme="dark"] .theme-toggle-button .mud-icon-root {
    color: var(--text-bright) !important;*/ /* Light color in dark mode */
    /*transition: color var(--transition-smooth) !important;
}

[data-theme="dark"] .theme-toggle-button:hover .mud-icon-root {
    color: var(--text-brilliant) !important;
    transform: rotate(15deg) !important;
}*/

/* ═══ Light Mode - Dark Icon ═══ */
/*[data-theme="light"] .theme-toggle-button .mud-icon-root {
    color: var(--text-normal) !important;*/ /* Dark color in light mode */
    /*transition: color var(--transition-smooth) !important;
}

[data-theme="light"] .theme-toggle-button:hover .mud-icon-root {
    color: var(--text-bright) !important;
    transform: rotate(15deg) !important;
}*/

/* ═══ Hover Effects ═══ */
/*.theme-toggle-button:hover {
    background: var(--wisdom-subtle) !important;
    transform: scale(1.05) !important;
}

[data-theme="dark"] .theme-toggle-button:hover {
    box-shadow: 0 0 16px rgba(107, 138, 255, 0.2) !important;
}

[data-theme="light"] .theme-toggle-button:hover {
    box-shadow: 0 0 16px rgba(3, 102, 214, 0.2) !important;
}*/

/* ═══════════════════════════════════════════════════════════════════════
   END OF GAIBRA MUDBLAZOR STYLES
   ═══════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   █ DARK MODE TEXT IMPROVEMENTS - Vibrant Colors
   ───────────────────────────────────────────────────────────────────── */

/* ═══ Make text inputs ALWAYS black on light background ═══ */
/*.composer-input .mud-input,
.mud-input-root input,
.mud-input-root textarea {
    color: #1a1a1a !important;*/ /* Always black text */
    /*background: rgba(255, 255, 255, 0.95) !important;*/ /* Light background */
/*}*/

    /*.composer-input .mud-input::placeholder,
    .mud-input-root input::placeholder,
    .mud-input-root textarea::placeholder {
        color: #666666 !important;*/ /* Dark gray placeholder */
    /*}*/

/* ═══ Vibrant text colors on dark backgrounds ═══ */
/*.gaibra-drawer-header .mud-typography,
.gaibra-title,
.empty-state-title,
.message-bubble.user-message .mud-typography,
.message-bubble.user-message .message-content {
    color: #ffffff !important;*/ /* Pure white for max contrast */
/*}

.message-bubble.assistant-message .message-content,
.message-bubble.assistant-message .mud-typography {
    color: #f0f6fc !important;*/ /* Brilliant white */
/*}

.message-author {
    color: #6b8aff !important;*/ /* Wisdom bright blue */
/*}

.gaibra-subtitle,
.empty-state-description {
    color: #c9d1d9 !important;*/ /* Bright gray */
/*}

.empty-state-style,
.composer-footer .mud-typography {
    color: #8b949e !important;*/ /* Dim but visible */
/*}

.empty-state-cta {
    color: #6b8aff !important;*/ /* Wisdom bright */
    /*text-shadow: 0 0 12px rgba(107, 138, 255, 0.3);
}*/

/* ═══ Conversation items text ═══ */
/*.conversation-title {
    color: #f0f6fc !important;
    font-weight: 600 !important;
}

.mud-navmenu .mud-nav-link:hover .conversation-title {
    color: #ffffff !important;
}

.mud-navmenu .mud-nav-link.mud-selected .conversation-title {
    color: #6b8aff !important;*/ /* Wisdom bright */
    /*font-weight: 700 !important;
}*/

/* ═══ Timestamps ═══ */
/*.mud-typography.mud-typography-caption {
    color: #8b949e !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ CONVERSATION NAV ITEMS STYLING
   ───────────────────────────────────────────────────────────────────── */

/*.mud-navmenu .mud-nav-link {
    position: relative !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-xs) !important;
    transition: all var(--transition-smooth) !important;
}

    .mud-navmenu .mud-nav-link:hover {
        background: rgba(107, 138, 255, 0.1) !important;
    }

    .mud-navmenu .mud-nav-link.mud-selected {
        background: var(--wisdom-subtle) !important;
        border-left: 3px solid var(--wisdom-bright) !important;
    }

[dir="rtl"] .mud-navmenu .mud-nav-link.mud-selected {
    border-left: none !important;
    border-right: 3px solid var(--wisdom-bright) !important;
}*/

/* ═══ Conversation Actions - Hidden by default ═══ */
/*.conversation-actions {
    opacity: 0 !important;
    transition: opacity var(--transition-swift) !important;
}

.mud-nav-link:hover .conversation-actions {
    opacity: 1 !important;
}

.conversation-actions .mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
}

    .conversation-actions .mud-icon-button:hover {
        background: rgba(0, 0, 0, 0.5) !important;
        transform: scale(1.1) !important;
    }

    .conversation-actions .mud-icon-button.mud-error:hover {
        background: rgba(248, 81, 73, 0.2) !important;
    }*/

/* ═══ MudNavMenu Base Styling ═══ */
/*.gaibra-drawer-content .mud-navmenu {
    padding: 0 !important;
}

.mud-navmenu .mud-nav-item {
    margin: 0 !important;
}*/

/* ═══ Empty state in drawer ═══ */
/*.gaibra-drawer-content .mud-typography.pa-4 {
    margin-top: var(--space-4xl);
    text-align: center;
}*/

/* ─────────────────────────────────────────
   GAIBRA LOGO
   ───────────────────────────────────────── */

/*.gaibra-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(107, 138, 255, 0.25));
}*/

/* نص GAIBRA بجانب الشعار */
/*.gaibra-brand-text {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.gaibra-logo-appbar {
    height: 28px;
    width: auto;
    object-fit: contain;
    margin-right: 4px;
}

.gaibra-empty-logo {
    width: 60px;    
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.15));
    animation: gaibra-breathe 4s ease-in-out infinite;
}

@keyframes gaibra-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 19. SCROLL BEHAVIOR - Scroll to Bottom for New Messages
   ───────────────────────────────────────────────────────────────────── */

/* Scroll anchor styling */
/*.scroll-anchor {
    scroll-margin-top: 20px;
}*/

/* Auto-scroll behavior */
/*.gaibra-chat-thread {
    scroll-behavior: smooth;
}*/

/* Ensure new messages appear at the bottom */
/*.message-row:last-child {
    margin-bottom: 0 !important;
}*/

/* ─────────────────────────────────────────────────────────────────────
   █ 19. CHAT LAYOUT FIXES - Prevent Messages Under Composer
   ───────────────────────────────────────────────────────────────────── */
/* التأكد من وجود مسافة كافية بين الرسائل والـ Composer */
/*.gaibra-chat-container {
    display: flex !important;
    flex-direction: column !important;
}*/

/* توزيع المساحة: الرسائل تأخذ المساحة المتاحة، Composer يبقى في الأسفل */
/*.gaibra-chat-thread {
    flex: 1 !important;*/ /* تأخذ المساحة المتاحة */
    /*min-height: calc(100vh - 450px) !important;*/ /* مساحة مناسبة للرسائل */
/*}*/

/* Composer يبقى في مكانه ولا يتحرك */
/*.gaibra-composer.mud-paper {
    margin-top: auto !important;*/ /* يدفع نفسه إلى الأسفل */
    /*position: relative !important;
}*/
/* Container لتحديد المساحة الصحيحة */
/*.chat-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 240px) !important;*/ /* تعديل حسب احتياجاتك */
    /*min-height: 400px !important;
    position: relative !important;
}*/


/* Composer يبقى في الأسفل */
/*.gaibra-composer-container {
    flex-shrink: 0 !important;*/ /* لا ينكمش */
    /*position: relative !important;
    z-index: var(--z-sticky) !important;
}*/

/* التأكد من عدم وجود تداخل */
/*.mud-container.gaibra-chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}*/

/* مسافة بين آخر رسالة والـ Composer */
/*#chatEndAnchor {
    height: 40px !important;*/ /* مسافة إضافية */
    /*display: block !important;
}*/