/**
 * Aurion App Styles
 * Modern, sleek design with purple/yellow gradient and smooth animations
 */

/* WHY: Theme transition blur overlay - hides staggered element updates during theme switch */
.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    pointer-events: none;
    background: rgba(128, 128, 128, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 1.6s ease-in-out,
     -webkit-backdrop-filter 1.6s ease-in-out, 
	background 1.6s ease-in-out;
}

.theme-transition-overlay.active {
    background: rgba(128, 128, 128, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* WHY: Import Noto Color Emoji font for newer emoji support (Unicode 15.0+)
   Ensures devices with older system emoji fonts can still display new emojis like 🫷🫸
   font-display: swap = use system emoji first, swap when font loads
   Font only downloads when .emoji-fonts-loaded class is added to body (after onboarding) */
@font-face {
    font-family: 'Noto Color Emoji';
    src: url('../fonts/noto/NotoColorEmoji.ttf') format('truetype');
    font-display: swap;
}

/* WHY: Noto Color Emoji only applied AFTER onboarding via body class
   This defers the 10MB font download until user completes onboarding
   Class is added by early IIFE in app.js
   !important needed to override rules defined later in this file */
body.emoji-fonts-loaded,
body.emoji-fonts-loaded .message-bubble,
body.emoji-fonts-loaded .message-content,
body.emoji-fonts-loaded .message-sender,
body.emoji-fonts-loaded #userInput,
body.emoji-fonts-loaded #messageInput,
body.emoji-fonts-loaded .chat-container {
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif !important;
}

:root {
    /* COMMIT VERSION TRACKING */
    /* WHY: JavaScript reads this to verify CSS file actually loaded (not cached) */
    /* Update after each commit to LIVE */
    --css-commit-ver: "1.7";
    
    /* WHY: Safe-area CSS custom properties for iOS notch/home indicator */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);


    /* Default Theme Colors */
    --theme-primary: #8a2be2;
    --theme-secondary: #ba55d3;
    --theme-input-border: #8a2be2;
    
    --bg-gradient-start: rgba(138, 43, 226, 0.15);
    --bg-gradient-mid: rgba(186, 85, 211, 0.12);
    --bg-gradient-end: rgba(255, 215, 0, 0.15);
    --chat-bg: rgba(255, 255, 255, 0.85);
    --chat-header-bg: rgba(255, 255, 255, 0.95);
    --message-user-bg: rgb(229, 243, 255);
    /* WHY: Consistent active item background for both light/dark modes */
    --current-message: rgb(229, 243, 255);
    --message-ai-bg: rgba(248, 249, 250, 0.95);
    --input-bg: rgba(255, 255, 255, 0.95);
    --text-primary: rgb(13, 13, 13);
    --text-secondary: #6c757d;
    --text-muted: #999;
    --input-placeholder: #b8b8b8;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
    --aurion-logo-bg: linear-gradient(135deg, #8a2be2, #b2f1ff);
    --user-avatar-bg: linear-gradient(135deg, #ffd700, #ffed4e);
    --modal-bg: rgba(255, 255, 255, 0.98);
    --text-inverse: #f5f5f5;
    
    /* Font Size Scale - Default Medium */
    --font-size-multiplier: 1;
}

/* ========================================
   iOS SAFE-AREA UTILITY CLASSES
   WHY: Bootstrap-friendly helpers for iOS notch/home indicator
   ======================================== */

/* Safe-area padding utilities */
.pt-safe { padding-top: var(--safe-top) !important; }
.pb-safe { padding-bottom: var(--safe-bottom) !important; }
.ps-safe { padding-left: var(--safe-left) !important; }
.pe-safe { padding-right: var(--safe-right) !important; }

@media (min-width: 769px) { 
	.pt-safe { padding-top: 20px!important; } 
}

/* WHY: Make main area respect dynamic toolbar height on iOS */
.minh-100dvh { min-height: 100dvh !important; }

[data-theme="dark"] {
	--bg-gradient-start: rgb(138 43 226);
	--bg-gradient-mid: rgb(75 0 130);
	--bg-gradient-end: rgba(0, 0, 0, 0.7);
    /* --chat-bg: rgba(18, 18, 18, 0.85); */
    --chat-bg:  rgb(38 41 46);   
    /* --chat-header-bg: rgba(20, 20, 20, 0.95); */
    --chat-header-bg: #0a0b0c;    
    --message-user-bg: rgba(138, 43, 226, 0.25);
    /* WHY: Consistent active item background - Dark mode uses subtle theme tint */
    --current-message: rgba(138, 43, 226, 0.15);
    --message-ai-bg: rgba(30, 30, 30, 0.95);
   /* --input-bg: rgba(45, 45, 45, 0.95); */
    --input-bg: rgb(40 43 51);    
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --input-placeholder: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.25);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
    --modal-bg: rgba(20, 20, 20, 0.98);
    --text-inverse: #1a1a1a;
}

/* Dark mode specific overrides */
[data-theme="dark"] .message-bubble {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Message sender colors are now handled by theme-specific rules */

/* Dark mode input improvements - WHY: Better contrast and visibility */
[data-theme="dark"] .message-input,
[data-theme="dark"] .onboarding-input,
[data-theme="dark"] .onboarding-textarea,
[data-theme="dark"] .settings-input,
[data-theme="dark"] .settings-textarea {
    background: rgba(50, 50, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .chat-bottom-bar {
	border-top-color: rgba(255, 255, 255, 0.15);
    background: #0a0b0c;
    background-image: linear-gradient(to bottom, #292c33, #282b33 75%);
    transition: all 500ms cubic-bezier(0.06, 0.95, 0.09, 0.95);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

[data-theme="dark"] .message-input::placeholder,
[data-theme="dark"] .onboarding-input::placeholder,
[data-theme="dark"] .onboarding-textarea::placeholder,
[data-theme="dark"] .settings-textarea::placeholder {
    color: #a8a8a8;
    opacity: 0.4;
}

/* Dark mode emoji button - styles now handled in main .btn-emoji block */

/* Dark mode input focus states - WHY: Clear visual feedback */
[data-theme="dark"] .message-input:focus,
[data-theme="dark"] .onboarding-input:focus,
[data-theme="dark"] .onboarding-textarea:focus,
[data-theme="dark"] .settings-input:focus,
[data-theme="dark"] .settings-textarea:focus {
    border-color: var(--theme-primary);
    background: rgba(55, 55, 55, 0.95);
}

[data-theme="dark"] .message.user .message-sender {
    color: var(--text-primary);
}
[data-theme="dark"] .chat-header small {
    color: #d0d0d0 !important;
}

[data-theme="dark"] .text-muted {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .message-input {
    color: #f5f5f5;
    background: var(--input-bg) !important;
}

[data-theme="dark"] .message-input:focus {
    border-color: var(--theme-input-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 10%, transparent);
    background: var(--input-bg) !important;
}

/* ========================================
   THEME VARIATIONS
   ======================================== */

/* Purple Dream Theme (Default) - Light Mode */
[data-aurion-theme="default"]:not([data-theme="dark"]) {
    --theme-primary: #8a2be2;
    --theme-secondary: #91ffff;
    --theme-input-border: #8a2be2;
    --bg-gradient-start: rgba(138, 43, 226, 0.15);
    --bg-gradient-mid: rgba(186, 85, 211, 0.12);
    --bg-gradient-end: rgba(255, 215, 0, 0.15);
    --message-user-bg: rgba(138, 43, 226, 0.12);
    --current-message: rgba(138, 43, 226, 0.18);
    --aurion-logo-bg: linear-gradient(135deg, #8a2be2, #91ffff);
}

/* Purple Dream Theme - Dark Mode */
[data-aurion-theme="default"][data-theme="dark"] {
    --theme-primary: #8a2be2;
    --theme-secondary: #91ffff;
    --theme-input-border: #8a2be2;
    --bg-gradient-start: rgb(0, 0, 0);
    --bg-gradient-mid: rgb(50, 20, 80);
    --bg-gradient-end: rgb(0, 0, 0);
    --message-user-bg: rgba(138, 43, 226, 0.5);
    --current-message: rgba(138, 43, 226, 0.25);
    --aurion-logo-bg: linear-gradient(135deg, #8a2be2, #91ffff);
}

/* Ocean Blue Theme - Light Mode */
[data-aurion-theme="ocean"]:not([data-theme="dark"]) {
    --theme-primary: #0077be;
    --theme-secondary: #00bfff;
    --theme-input-border: #0077be;
    --bg-gradient-start: rgba(0, 80, 150, 0.25);
    --bg-gradient-mid: rgba(0, 150, 255, 0.2);
    --bg-gradient-end: rgba(0, 200, 100, 0.25);
    --message-user-bg: rgba(0, 119, 190, 0.12);
    --current-message: rgba(0, 119, 190, 0.18);
    --aurion-logo-bg: linear-gradient(135deg, #0077be, #00bfff);
}

/* Ocean Blue Theme - Dark Mode */
[data-aurion-theme="ocean"][data-theme="dark"] {
    --theme-primary: #0077be;
    --theme-secondary: #004d7a;
    --theme-input-border: #0077be;
    --bg-gradient-start: rgb(0, 0, 0);
    --bg-gradient-mid: rgb(0, 40, 70);
    --bg-gradient-end: rgb(0, 0, 0);
    --message-user-bg: rgba(0, 119, 190, 0.7);
    --current-message: rgba(0, 119, 190, 0.25);
    --aurion-logo-bg: linear-gradient(135deg, #0077be, #004d7a);
}

/* Sunset Fire Theme - Light Mode */
[data-aurion-theme="sunset"]:not([data-theme="dark"]) {
    --theme-primary: #ff6b35;
    --theme-secondary: #ff8c42;
    --theme-input-border: #ff6b35;
    --bg-gradient-start: rgba(220, 80, 40, 0.25);
    --bg-gradient-mid: rgba(255, 100, 0, 0.2);
    --bg-gradient-end: rgba(220, 0, 120, 0.25);
    --message-user-bg: rgba(255, 107, 53, 0.12);
    --current-message: rgba(255, 107, 53, 0.18);
    --aurion-logo-bg: linear-gradient(135deg, #ff6b35, #ff8c42);
}

/* Sunset Fire Theme - Dark Mode */
[data-aurion-theme="sunset"][data-theme="dark"] {
    --theme-primary: #ff6b35;
    --theme-secondary: #b84a24;
    --theme-input-border: #ff6b35;
    --bg-gradient-start: rgb(0, 0, 0);
    --bg-gradient-mid: rgb(80, 30, 15);
    --bg-gradient-end: rgb(0, 0, 0);
    --message-user-bg: rgba(255, 107, 53, 0.6);
    --current-message: rgba(255, 107, 53, 0.25);
    --aurion-logo-bg: linear-gradient(135deg, #ff6b35, #b84a24);
}

/* Forest Green Theme - Light Mode */
[data-aurion-theme="forest"]:not([data-theme="dark"]) {
    --theme-primary: #2d6a4f;
    --theme-secondary: #52b788;
    --theme-input-border: #2d6a4f;
    --bg-gradient-start: rgba(30, 90, 65, 0.25);
    --bg-gradient-mid: rgba(20, 120, 20, 0.2);
    --bg-gradient-end: rgba(0, 160, 180, 0.25);
    --message-user-bg: rgba(45, 106, 79, 0.12);
    --current-message: rgba(45, 106, 79, 0.18);
    --aurion-logo-bg: linear-gradient(135deg, #2d6a4f, #52b788);
}

/* Forest Green Theme - Dark Mode */
[data-aurion-theme="forest"][data-theme="dark"] {
    --theme-primary: #2d6a4f;
    --theme-secondary: #1b4332;
    --theme-input-border: #2d6a4f;
    --bg-gradient-start: rgb(0, 0, 0);
    --bg-gradient-mid: rgb(15, 45, 30);
    --bg-gradient-end: rgb(0, 0, 0);
    --message-user-bg: rgba(45, 106, 79, 0.8);
    --current-message: rgba(45, 106, 79, 0.25);
    --aurion-logo-bg: linear-gradient(135deg, #2d6a4f, #1b4332);
}

/* Rose Pink Theme - Light Mode */
[data-aurion-theme="rose"]:not([data-theme="dark"]) {
    --theme-primary: #d8345f;
    --theme-secondary: #e85d75;
    --theme-input-border: #d8345f;
    --bg-gradient-start: rgba(200, 40, 85, 0.25);
    --bg-gradient-mid: rgba(230, 20, 130, 0.2);
    --bg-gradient-end: rgba(120, 30, 200, 0.25);
    --message-user-bg: rgba(216, 52, 95, 0.12);
    --current-message: rgba(216, 52, 95, 0.18);
    --aurion-logo-bg: linear-gradient(135deg, #d8345f, #e85d75);
}

/* Rose Pink Theme - Dark Mode */
[data-aurion-theme="rose"][data-theme="dark"] {
    --theme-primary: #d8345f;
    --theme-secondary: #9a2342;
    --theme-input-border: #d8345f;
    --bg-gradient-start: rgb(0, 0, 0);
    --bg-gradient-mid: rgb(70, 20, 40);
    --bg-gradient-end: rgb(0, 0, 0);
    --message-user-bg: rgba(216, 52, 95, 0.7);
    --current-message: rgba(216, 52, 95, 0.25);
    --aurion-logo-bg: linear-gradient(135deg, #d8345f, #9a2342);
}

/* ========================================
   AI Message Sender Colors by Theme
   WHY: Match AI message sender name to theme colors for better visual cohesion
   ======================================== */

/* Purple Dream - AI Sender & Header */
[data-aurion-theme="default"]:not([data-theme="dark"]) .message.ai .message-sender,
[data-aurion-theme="default"]:not([data-theme="dark"]) .message.assistant .message-sender,
[data-aurion-theme="default"]:not([data-theme="dark"]) .aurion-name-header {
    color: #7a40b8 !important;
}

[data-aurion-theme="default"][data-theme="dark"] .message.ai .message-sender,
[data-aurion-theme="default"][data-theme="dark"] .message.assistant .message-sender,
[data-aurion-theme="default"][data-theme="dark"] .aurion-name-header {
    color: #c396ff !important;
}

/* Ocean Blue - AI Sender & Header */
[data-aurion-theme="ocean"]:not([data-theme="dark"]) .message.ai .message-sender,
[data-aurion-theme="ocean"]:not([data-theme="dark"]) .message.assistant .message-sender,
[data-aurion-theme="ocean"]:not([data-theme="dark"]) .aurion-name-header {
    color: #0066a0 !important;
}

[data-aurion-theme="ocean"][data-theme="dark"] .message.ai .message-sender,
[data-aurion-theme="ocean"][data-theme="dark"] .message.assistant .message-sender,
[data-aurion-theme="ocean"][data-theme="dark"] .aurion-name-header {
    color: #5eb8ff !important;
}

/* Sunset Fire - AI Sender & Header */
[data-aurion-theme="sunset"]:not([data-theme="dark"]) .message.ai .message-sender,
[data-aurion-theme="sunset"]:not([data-theme="dark"]) .message.assistant .message-sender,
[data-aurion-theme="sunset"]:not([data-theme="dark"]) .aurion-name-header {
    color: #d65530 !important;
}

[data-aurion-theme="sunset"][data-theme="dark"] .message.ai .message-sender,
[data-aurion-theme="sunset"][data-theme="dark"] .message.assistant .message-sender,
[data-aurion-theme="sunset"][data-theme="dark"] .aurion-name-header {
    color: #ff9b7a !important;
}

/* Forest Green - AI Sender & Header */
[data-aurion-theme="forest"]:not([data-theme="dark"]) .message.ai .message-sender,
[data-aurion-theme="forest"]:not([data-theme="dark"]) .message.assistant .message-sender,
[data-aurion-theme="forest"]:not([data-theme="dark"]) .aurion-name-header {
    color: #256547 !important;
}

[data-aurion-theme="forest"][data-theme="dark"] .message.ai .message-sender,
[data-aurion-theme="forest"][data-theme="dark"] .message.assistant .message-sender,
[data-aurion-theme="forest"][data-theme="dark"] .aurion-name-header {
    color: #70d9a0 !important;
}

/* Rose Pink - AI Sender & Header */
[data-aurion-theme="rose"]:not([data-theme="dark"]) .message.ai .message-sender,
[data-aurion-theme="rose"]:not([data-theme="dark"]) .message.assistant .message-sender,
[data-aurion-theme="rose"]:not([data-theme="dark"]) .aurion-name-header {
    color: #b82d52 !important;
}

[data-aurion-theme="rose"][data-theme="dark"] .message.ai .message-sender,
[data-aurion-theme="rose"][data-theme="dark"] .message.assistant .message-sender,
[data-aurion-theme="rose"][data-theme="dark"] .aurion-name-header {
    color: #ff7a9f !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* WHY: System emoji support - Noto Color Emoji loaded lazily after onboarding
       - System emoji fonts: Apple Color Emoji (macOS/iOS), Segoe UI Emoji (Windows)
       - Noto Color Emoji REMOVED from initial load (10MB!) - added dynamically via loadEmojiAssets()
       - Numbers use Unicode Variation Selector-15 in JS to prevent emoji rendering on Android
       - Ensures all Unicode emojis render correctly across all platforms */
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 32px;
    color: var(--text-primary);
    /* background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%); */
    background-size: 400% 400%;
    background-attachment: fixed;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 10px; /* WHY: Space above header on desktop */
    /* WHY: Animated gradient creates dynamic visual interest */
    animation: gradientShift 8s ease-in-out infinite;
    /* WHY: Optimize text rendering for better emoji display */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* WHY: Disable iOS automatic number styling - prevents different font for numbers */
    font-variant-numeric: normal;
    -webkit-font-variant-numeric: normal;
    /* WHY: Disable ALL automatic font features that iOS applies to numbers */
    font-feature-settings: "tnum" 0, "lnum" 0, "onum" 0, "pnum" 0;
    -webkit-font-feature-settings: "tnum" 0, "lnum" 0, "onum" 0, "pnum" 0;
}

/* WHY: Desktop gradient wrapper - contains animated background on desktop only (>768px) */
.desktop-gradient-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* WHY: Desktop content container - applies old .chat-container rules */
.desktop-content {
    max-width: 85%;
    max-height: 90%;
    width: 1800px;
    height: 90vh;
    margin: 5vh auto;
    border-radius: 24px;
    background: var(--chat-bg);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* WHY: On desktop (>768px), remove body animation since wrapper handles it */
@media (min-width: 769px) {
    body {
        background: white;
        animation: none;
        padding-top: 0;
    }
    
    /* WHY: Fix positioning of three sections inside desktop-content */
    .desktop-content .chat-header {
        position: relative;
        top: 0;
    }
    
    .desktop-content .chat-center-container {
        position: relative;
        top: 0;
        bottom: 0;
        flex: 1;
        overflow-y: auto;
    }
    
    .desktop-content .chat-bottom-bar {
        position: relative;
        bottom: 0;
    }
    
    /* WHY: Fix scroll-to-bottom button to viewport on desktop
     * bottom value is set dynamically by JavaScript based on bottom bar height */
    .scroll-to-bottom-btn {
        position: fixed !important;
        bottom: 140px; /* WHY: Fallback - JS overrides this dynamically */
    }
}

/* Dynamic gradient animation - WHY: Creates visible movement in background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 75%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* WHY: OLD .chat-container removed - using three-section framework instead */

/* ========================================
   THREE-SECTION FRAMEWORK
   WHY: Clean structure like mobile_view - fixes all bottom bar issues
   ======================================== */

/* Top Bar - Header (Fixed) */
.chat-header {
    position: fixed;
    top: 10px; /* WHY: Offset from top to match body padding */
    left: 0;
    right: 0;
    height: auto;
    background: var(--chat-header-bg);
    backdrop-filter: blur(10px);
    padding: 20px 40px 5px 40px;
    padding-top: 20px; /* WHY: Less padding on top, more on sides for desktop */
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 100010; /* WHY: Below sidebar (100020) and modals (100025) */
}

[data-theme="dark"] .chat-header {
    background-image: linear-gradient(to bottom, #292c33, #282b33 75%);
    transition: all 500ms cubic-bezier(0.06, 0.95, 0.09, 0.95);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* WHY: Inner container handles flexbox layout on all screen sizes */
.chat-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Chat Title Row - Integrated into header */
.chat-title-row {
    padding: 0px 0px 10px 0px;
    /* WHY: Smooth fade transitions when switching chats */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.chat-title-row.fade-out {
    opacity: 0;
}

.chat-title-divider {
    height: 1px;
    background: var(--border-color);
    margin: 10px -40px 12px -40px; /* WHY: Negative margin to span full width beyond parent padding */
}

.chat-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* WHY: Allow text truncation */
}

.chat-title-icon {
    font-size: 1.2rem;
    color: var(--theme-primary);
    flex-shrink: 0;
}

.chat-title-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* WHY: Edit button matching sidebar chat-action-btn style */
.chat-title-edit-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 1rem;
}

.chat-title-edit-btn:hover {
    background: var(--input-bg);
    color: var(--theme-primary);
    transform: scale(1.1);
}

/* WHY: Inline editing input for chat title */
.chat-title-text-input {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 2px solid var(--theme-primary);
    border-radius: 8px;
    padding: 4px 10px;
    outline: none;
    width: 100%;
    min-width: 400px;
    max-width: 600px;
    transition: all 0.2s ease;
}

.chat-title-text-input:focus {
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15);
}

/* WHY: Save/cancel action buttons container */
.chat-title-edit-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* WHY: Individual action buttons (save/cancel) */
.chat-title-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: transparent;
    color: var(--text-muted);
}

.chat-title-save-btn {
    color: #10b981;
}

.chat-title-save-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    transform: scale(1.1);
}

.chat-title-cancel-btn {
    color: #ef4444;
}

.chat-title-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.1);
}

/* Center Container - Messages (Scrollable) */
.chat-center-container {
    position: fixed;
    top: 100px; /* WHY: Below header (10px body padding + ~90px header height) */
    bottom: 140px; /* WHY: Above input area */
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background-color: var(--chat-bg); /* WHY: Adapts to light/dark mode */
    /* WHY: Smooth transition when bottom position changes due to textarea expansion */
    transition: bottom 0.15s ease;
}

/* WHY: Scrollbar styling for center container */
.chat-center-container::-webkit-scrollbar {
    width: 8px;
}

.chat-center-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-center-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.chat-center-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Bottom Bar - Input Area (Fixed) */
.chat-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto; 
    border-top: 1px solid var(--border-color);
        background: transparent;
    backdrop-filter: none;
    z-index: 100005; /* WHY: Below sidebar (100020) and modals (100025) */
}

.aurion-logo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* WHY: Gradient background animation like send button */
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary), var(--theme-primary));
    background-size: 200% 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    /* box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3); */
    margin-right: 16px;
    padding: 7px;
    /* WHY: Heartbeat pulse animation - configurable via JS */
    --logo-pulse-speed: 3s;
    --logo-pulse-scale: 1.08;
    /* WHY: Animation is set dynamically via JavaScript based on LogoPulseSettings */
}

.aurion-logo-svg {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1); /* Make SVG white */
    transition: transform 0.3s ease;
    cursor: pointer;
    /* WHY: SVG inherits pulse from container, no extra animation needed */
}

.aurion-logo-svg:hover {
    transform: scale(1.05);
}

/* Logo spin animation */
@keyframes logoSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.aurion-logo-svg.spinning {
    animation: logoSpin 1s ease-in-out;
}

/* Prevent hover scale during spinning */
.aurion-logo-svg.spinning:hover {
    transform: rotate(0deg) scale(1);
}

/* Logo pulse animation - heartbeat effect */
@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(var(--logo-pulse-scale));
    }
}

.chat-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.version-badge {
	font-size: 1.1rem;
	font-weight: 500;
	color: #999696;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	padding: 5px 8px;
	display: inline-block;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	background: rgb(246 246 246 / 50%);
	vertical-align: middle;
	top: -2px;	
    left: 3px;
	position: relative;
}

[data-theme="dark"] .version-badge {
    color: #909090;
    border-color: #505050;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.message-sender .version-badge {
	font-size: 0.95rem;
	padding: 0px 8px;
}

/* Modern Model Selector (DEBUG mode only) */
.model-selector-wrapper {
	display: inline-block;
	vertical-align: middle;
	top: -2px;
	position: relative;
}

.model-selector-trigger {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--theme-primary);
	border: 2px solid var(--theme-primary);
	border-radius: 10px;
	padding: 6px 14px 6px 16px;
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.08), rgba(186, 85, 211, 0.05));
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(138, 43, 226, 0.15);
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
	width: 100%;
}

.model-selector-trigger::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.model-selector-trigger:hover::before {
	opacity: 1;
}

.model-selector-trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(138, 43, 226, 0.3);
	border-color: var(--theme-primary);
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.12), rgba(186, 85, 211, 0.08));
}

.model-selector-trigger:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(138, 43, 226, 0.2);
}

.model-selector-trigger.active {
	border-radius: 10px 10px 0 0;
	box-shadow: 0 6px 20px rgba(138, 43, 226, 0.3);
}

.model-selector-label {
	letter-spacing: 0.3px;
	text-transform: uppercase;
	font-weight: 700;
}

.model-selector-icon {
	font-size: 0.9rem;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.8;
}

.model-selector-trigger.active .model-selector-icon {
	transform: rotate(180deg);
}

/* Dropdown Menu */
.model-selector-menu {
	position: absolute;
	top: calc(100% - 2px);
	left: 0;
	width: max-content;
	min-width: 100%;
	background: var(--message-ai-bg);
	border: 2px solid var(--theme-primary);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 8px 24px rgba(138, 43, 226, 0.25);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px) scale(0.95);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	overflow: hidden;
	max-height: 400px;
	overflow-y: auto;
}

.model-selector-menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.model-selector-option {
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--text-color);
	border-bottom: 1px solid rgba(138, 43, 226, 0.1);
	position: relative;
	overflow: hidden;
}

.model-selector-option:last-child {
	border-bottom: none;
}

.model-selector-option::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--theme-primary), rgba(186, 85, 211, 0.8));
	transform: scaleY(0);
	transition: transform 0.2s ease;
}

.model-selector-option:hover::before {
	transform: scaleY(1);
}

.model-selector-option:hover {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.12), transparent);
	padding-left: 20px;
}

.model-selector-option.selected {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.18), rgba(138, 43, 226, 0.05));
	color: var(--theme-primary);
	font-weight: 700;
}

.model-selector-option.selected::before {
	transform: scaleY(1);
}

.model-selector-option-check {
	color: var(--theme-primary);
	font-size: 1rem;
	font-weight: bold;
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s ease;
}

.model-selector-option.selected .model-selector-option-check {
	opacity: 1;
	transform: scale(1);
    position: relative;
    left: 8px;
}

/* Dark Mode */
[data-theme="dark"] .model-selector-trigger {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(186, 85, 211, 0.08));
	box-shadow: 0 4px 16px rgba(138, 43, 226, 0.25);
}

[data-theme="dark"] .model-selector-trigger:hover {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(186, 85, 211, 0.12));
	box-shadow: 0 6px 24px rgba(138, 43, 226, 0.4);
}

[data-theme="dark"] .model-selector-menu {
	background: rgba(20, 20, 30, 0.95);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(138, 43, 226, 0.3);
}

[data-theme="dark"] .model-selector-option {
	border-bottom-color: rgba(138, 43, 226, 0.15);
}

[data-theme="dark"] .model-selector-option:hover {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), transparent);
}

[data-theme="dark"] .model-selector-option.selected {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.08));
}

/* Scrollbar for menu */
.model-selector-menu::-webkit-scrollbar {
	width: 6px;
}

.model-selector-menu::-webkit-scrollbar-track {
	background: transparent;
}

.model-selector-menu::-webkit-scrollbar-thumb {
	background: var(--theme-primary);
	border-radius: 3px;
}

.model-selector-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(186, 85, 211, 0.8);
}

/* Mobile Model Selector (<768px) - Matches message badge style */
/* WHY: Visibility controlled by JavaScript inline styles, CSS defines appearance only */
.model-selector-mobile {
	font-size: 0.8rem;
	font-weight: 500;
	color: #999696;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	padding: 0px 6px;
	background: rgb(246 246 246 / 50%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	top: -2px;
	left: 0px;
	vertical-align: middle;
	/* WHY: Use flexbox for reliable icon alignment across devices */
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.model-selector-mobile:hover {
	background: rgb(240 240 240 / 60%);
	border-color: #b0b0b0;
}

.model-selector-mobile:active {
	transform: scale(0.98);
}

.model-selector-mobile-label {
	letter-spacing: 0.3px;
	font-weight: 500;
	margin-right: 0px;
}

.model-selector-mobile-icon {
	font-size: 0.7rem;
	opacity: 0.6;
	/* WHY: Parent handles alignment with flexbox, no need for position tricks */
}

/* Model Selector Modal */
.model-selector-modal-dialog {
	max-width: 400px;
}

.model-selector-modal-content {
	border-radius: 20px;
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.model-selector-modal-content .modal-header {
	border-bottom: 2px solid rgba(138, 43, 226, 0.2);
	padding: 20px 24px;
}

.model-selector-modal-content .modal-title {
	font-weight: 700;
	color: var(--theme-primary);
}

.model-selector-modal-content .modal-body {
	padding: 20px 24px;
}

.model-selector-modal-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.model-selector-modal-option {
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 10px;
	border: 1.5px solid transparent;
	background: var(--message-ai-bg);
	position: relative;
	overflow: hidden;
	font-weight: 600;
}

.model-selector-modal-option::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: var(--theme-primary);
	transform: scaleY(0);
	transition: transform 0.2s ease;
}

.model-selector-modal-option:hover::before {
	transform: scaleY(1);
}

.model-selector-modal-option:hover {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.12), transparent);
	padding-left: 20px;
	border-color: rgba(138, 43, 226, 0.2);
}

.model-selector-modal-option.selected {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.18), rgba(138, 43, 226, 0.05));
	color: var(--theme-primary);
	font-weight: 700;
	border-color: var(--theme-primary);
}

.model-selector-modal-option.selected::before {
	transform: scaleY(1);
}

.model-selector-modal-option-check {
	color: var(--theme-primary);
	font-size: 1rem;
	font-weight: bold;
	float: right;
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s ease;
}

.model-selector-modal-option.selected .model-selector-modal-option-check {
	opacity: 1;
	transform: scale(1);
}

/* Dark Mode for Mobile Selector and Modal */
[data-theme="dark"] .model-selector-mobile {
	color: #909090;
	border-color: #505050;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .model-selector-mobile:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #606060;
}

[data-theme="dark"] .model-selector-modal-content {
	background: rgba(20, 20, 30, 0.95);
}

[data-theme="dark"] .model-selector-modal-content .modal-header {
	border-bottom-color: rgba(138, 43, 226, 0.3);
}

[data-theme="dark"] .model-selector-modal-option {
	border-color: rgba(138, 43, 226, 0.15);
}

[data-theme="dark"] .model-selector-modal-option:hover {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), transparent);
	border-color: rgba(138, 43, 226, 0.3);
}

[data-theme="dark"] .model-selector-modal-option.selected {
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.08));
	border-color: var(--theme-primary);
}

/* Show/Hide Desktop vs Mobile based on screen size */
@media (max-width: 768px) {
	/* WHY: Hide desktop dropdown on mobile */
	.model-selector-desktop {
		display: none !important;
	}
}

@media (min-width: 769px) {
	/* WHY: Hide mobile version on desktop */
	.model-selector-mobile {
		display: none !important;
	}
}

.chat-header small {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Header Controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-theme-toggle, .btn-profile {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #ffffff, #f7f7f7);
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0;
    /* WHY: Raised 3D button effect */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.1), /* Drop shadow */
        0 1px 0 rgba(255,255,255,1) inset; /* Top inner highlight */
}

/* WHY: Dark mode raised button - uses light bevels to pop out */
[data-theme="dark"] .btn-theme-toggle,
[data-theme="dark"] .btn-profile {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    /*border: 1px solid rgba(255,255,255,0.1);
     border-bottom-color: rgba(0,0,0,0.3); */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3), /* Drop shadow */
        0 1px 0 rgba(255,255,255,0.1) inset, /* Top inner highlight */
        0 -1px 0 rgba(0,0,0,0.2) inset; /* Bottom inner shadow */
}

.btn-theme-toggle:hover, .btn-profile:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,1) inset;
}

[data-theme="dark"] .btn-theme-toggle:hover, 
[data-theme="dark"] .btn-profile:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.2) inset;
}

/* WHY: Active state uses theme color border in both light and dark modes */
.btn-theme-toggle:active,
.btn-profile:active {
    border-color: var(--theme-primary) !important;
    transform: scale(0.95);
}

.btn-theme-toggle i {
    font-size: 1.8rem;
    color: var(--theme-primary);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* WHY: White sun/moon icon in dark mode for better visibility */
:root[data-theme="dark"] .btn-theme-toggle i {
    color: #ffffff;
}

/* Copy All Icon (DEBUG MODE only - shows when chat has messages) */
.btn-copy-all-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-right: 5px;
}

.btn-copy-all-icon:hover,
.btn-copy-all-icon:active {
    transform: scale(1.15);
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.btn-copy-all-icon i {
    font-size: 1.5rem;
    color: var(--theme-primary);
    transition: all 0.3s ease;
}

.btn-copy-all-icon:hover i {
    color: var(--theme-secondary);
    filter: drop-shadow(0 0 4px var(--theme-primary));
}

/* View Summary Icon (DEBUG MODE only - shows when chat has summary) */
.btn-view-summary-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-right: 5px;
}

.btn-view-summary-icon:hover,
.btn-view-summary-icon:active {
    transform: scale(1.15);
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.btn-view-summary-icon i {
    font-size: 1.5rem;
    color: var(--theme-primary);
    transition: all 0.3s ease;
}

.btn-view-summary-icon:hover i {
    color: var(--theme-secondary);
    filter: drop-shadow(0 0 4px var(--theme-primary));
}

/* Mammoth Icon (shown when chat exceeds token threshold) */
.btn-mammoth-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5);
}

/* WHY: Animated entrance when mammoth icon appears */
.btn-mammoth-icon.show {
    animation: mammothEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mammothEntrance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.btn-mammoth-icon:hover,
.btn-mammoth-icon:active {
    transform: scale(1.15) !important;
}

.btn-mammoth-icon:hover .icon2-mammoth,
.btn-mammoth-icon:active .icon2-mammoth {
    filter: drop-shadow(0 0 4px var(--theme-primary)) drop-shadow(0 0 8px var(--theme-secondary));
}

.btn-mammoth-icon .icon2-mammoth {
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter 0.3s ease;
}

/* WHY: Network Kill Button (DEBUG MODE + ?network only) - simulates network failure */
.btn-network-kill {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: 10px;
}

.btn-network-kill:hover,
.btn-network-kill:active {
    transform: scale(1.15) !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

.btn-network-kill i {
    font-size: 2rem;
    color: white;
    transition: transform 0.3s ease;
}

.btn-network-kill:hover i {
    transform: rotate(90deg);
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px; /* WHY: Prevent text from stretching circle */
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* WHY: Prevent flex container from shrinking circle */
    color: white;
    font-weight: 700;
    font-size: 1.6rem;
    background-size: cover;
    background-position: center;
    overflow: hidden; /* WHY: Clip any overflow to maintain perfect circle */
}

/* Animated SVG spinner for loading avatar */
.avatar-spinner {
    width: 28px;
    height: 28px;
    display: inline-block;
}

.avatar-spinner circle {
    animation: spinDash 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* Larger spinner for onboarding and settings */
.onboarding-avatar .avatar-spinner,
.settings-avatar .avatar-spinner {
    width: 48px;
    height: 48px;
}

@keyframes spinDash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.profile-dropdown-menu {
    position: fixed;
    top: calc(5vh + 55px);
    right: 30px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    min-width: 350px;
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999999;
    pointer-events: none;
}

/* New Chat Header Button (Mobile Only) */
.btn-new-chat-header {
    display: none; /* Hidden on desktop */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #ffffff, #f7f7f7);
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--theme-primary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* WHY: Raised 3D button effect */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.1), /* Drop shadow */
        0 1px 0 rgba(255,255,255,1) inset; /* Top inner highlight */
}

.btn-new-chat-header:hover,
.btn-new-chat-header:focus,
.btn-new-chat-header:active {
    color: var(--theme-primary) !important;
    background-color: transparent !important; /* Reset bootstrap override */
    background: linear-gradient(to bottom, #ffffff, #f7f7f7) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.btn-new-chat-header:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,1) inset;
}

/* WHY: Active state uses theme color border in both light and dark modes */
.btn-new-chat-header:active {
    border-color: var(--theme-primary) !important;
    transform: scale(0.95);
}

[data-theme="dark"] .btn-new-chat-header:hover,
[data-theme="dark"] .btn-new-chat-header:focus {
    color: white !important;
    background-color: transparent !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.08)) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] .btn-new-chat-header:active {
    border-color: var(--theme-primary) !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.08)) !important;
    color: white !important;
}

[data-theme="dark"] .btn-new-chat-header {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    /*border: 1px solid rgba(255,255,255,0.1);
     border-bottom-color: rgba(0,0,0,0.3); */
    color: white;
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3), /* Drop shadow */
        0 1px 0 rgba(255,255,255,0.1) inset, /* Top inner highlight */
        0 -1px 0 rgba(0,0,0,0.2) inset; /* Bottom inner shadow */
}

[data-theme="dark"] .btn-new-chat-header:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.2) inset;
}

/* WHY: Focus state - just remove outline, don't persist any visual changes */
.btn-new-chat-header:focus {
    outline: none;
}

/* Dark mode dropdown background */
[data-theme="dark"] .profile-dropdown-menu {
    background: rgba(20, 20, 20, 0.98);
}

/* Triangle arrow pointing up to avatar */
.profile-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--border-color);
}

.profile-dropdown-menu::after {
    content: '';
    position: absolute;
    top: -9px;
    right: 21px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid rgba(255, 255, 255, 0.98);
}

[data-theme="dark"] .profile-dropdown-menu::after {
    border-bottom-color: rgba(20, 20, 20, 0.98);
}

.profile-dropdown-menu * {
    pointer-events: auto;
}

.profile-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.profile-user-name {
	text-align: left;
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0px 0px 15px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-dropdown-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-dropdown-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-menu-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--message-ai-bg);
   /*  border: 1px solid var(--border-color); */
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.profile-menu-item:hover {
    background: var(--message-user-bg);
    border-color: var(--theme-primary); 
    transform: translateX(3px);
}

.profile-menu-item i {
    font-size: 1.1rem;
}

/* Dropdown Creativity Slider */
.dropdown-creativity-container {
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-creativity-label {
	font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
    text-align: left;
    padding-left: 0;
    margin-top: -10px;
}

.dropdown-creativity-label i {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-right: 4px;
}

.dropdown-creativity-track {
    position: relative;
    padding: 0;    
    margin-bottom: 12px;
}

.dropdown-creativity-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    outline: none;
    cursor: pointer;
    margin: 0;
}

.dropdown-creativity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--theme-primary);
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.dropdown-creativity-slider::-moz-range-thumb {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--theme-primary);
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.dropdown-creativity-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-creativity-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-creativity-thumb-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    pointer-events: none;
    z-index: 10;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-creativity-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-primary);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    /* WHY: Adjust this value to move number up/down inside circle */
    margin-top: -7px; /* Negative = move up, Positive = move down */
}

:root[data-theme="dark"] .dropdown-creativity-slider::-webkit-slider-thumb {
    background: #f5f5f5;
}

:root[data-theme="dark"] .dropdown-creativity-slider::-moz-range-thumb {
    background: #f5f5f5;
}

/* WHY: Number stays theme color in dark mode, matching circle outline */

.theme-and-dark-row {
    /* WHY: No flex on desktop - dark mode toggle is hidden, no need for row layout */
    padding: 16px 0;  
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.theme-selector-compact {
    display: flex;
    gap: 10px;
    justify-content: center; /* WHY: Center on desktop */
    pointer-events: auto;
}

.theme-circle-compact {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer; 
    transition: all 0.3s ease;
    position: relative;
    pointer-events: auto;
    flex-shrink: 0;
}

.theme-circle-compact:hover {
    transform: scale(1.15);
}

.theme-circle-compact.active {
    border-color: var(--theme-primary);
    transform: scale(1.25);
    box-shadow: 0 0 0 2px var(--chat-bg), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-circle-compact[data-theme="default"] {
    background: linear-gradient(135deg, #8a2be2, #ba55d3);
}

.theme-circle-compact[data-theme="ocean"] {
    background: linear-gradient(135deg, #0077be, #00bfff);
}

.theme-circle-compact[data-theme="sunset"] {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
}

.theme-circle-compact[data-theme="forest"] {
    background: linear-gradient(135deg, #2d6a4f, #52b788);
}

.theme-circle-compact[data-theme="rose"] {
    background: linear-gradient(135deg, #d8345f, #e85d75);
}

/* Font Size Selector */
.size-selector-compact {
    display: flex;
    gap: 8px;
    justify-content: center; /* WHY: Center on desktop */
    padding: 16px 0px;
    pointer-events: auto;
}

.size-btn-compact {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: transparent;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    flex-shrink: 0;
    color: var(--text-primary);
}

.size-btn-compact:hover {
    transform: scale(1.1);
    border-color: var(--theme-primary);
    background: var(--message-user-bg);
}

.size-btn-compact.active {
    border-color: var(--theme-primary);
    background: var(--message-user-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 20%, transparent);
}

/* Different icon sizes for each button */
.size-btn-compact[data-size="xs"] i {
    font-size: 0.8rem;
}

.size-btn-compact[data-size="sm"] i {
    font-size: 1rem;
}

.size-btn-compact[data-size="md"] i {
    font-size: 1.2rem;
}
.size-btn-compact[data-size="lg"] i {
    font-size: 1.4rem;
}

.size-btn-compact[data-size="xl"] i {
    font-size: 1.6rem;
}

/* Dark Mode Toggle (Mobile Only in Dropdown) */
.dark-mode-toggle-mobile {
    display: none; /* Hidden on desktop, shown in theme-and-dark-row on mobile */
}

.dark-mode-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.dark-mode-icon {
    font-size: 1.5rem;
    display: none; /* Show on mobile */
    color: var(--theme-primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* WHY: Moon icon white in dark mode, like desktop theme toggle */
:root[data-theme="dark"] .dark-mode-icon {
    color: #ffffff;
}

.dark-mode-label {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dark-mode-label::before {
    content: '🌙';
    font-size: 1.4rem;
}

.dark-mode-checkbox {
    display: none;
}

.dark-mode-slider {
    position: relative;
    width: 60px;
    height: 32px;
    background: var(--border-color);
    border-radius: 32px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dark-mode-slider::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dark-mode-checkbox:checked + .dark-mode-slider {
    background: var(--theme-primary);
}

.dark-mode-checkbox:checked + .dark-mode-slider::before {
    transform: translateX(28px);
}

/* Font Size Classes - WHY: Apply proportional scaling to chat text AND input */
.font-size-xs .message-bubble {
    font-size: 16px !important;
    line-height: 1.6;
}


.font-size-sm .message-bubble {
    font-size: 19px !important;
    line-height: 1.65;
}


textarea.form-control {
	margin-top: 8px!important;
	min-height: 73px;
}

/* Apply MD font size only on desktop */
@media (min-width: 769px) {
    .font-size-md .message-bubble {
        font-size: 23px !important;
        line-height: 1.7;
    }

}

.font-size-lg .message-bubble {
    font-size: 27px !important;
    line-height: 1.75;
}

.font-size-xl .message-bubble {
    font-size: 31px !important;
    line-height: 1.7;
}

/* Scale larger headings (h1, h2) proportionally */
.font-size-xs .message-bubble h1,
.font-size-xs .message-bubble h2 {
    transform: scale(0.85);
    transform-origin: left top;
    /* WHY: Compensate for scale to prevent overflow - scale shrinks so width can be larger */
    width: calc(100% / 0.85);
    max-width: calc(100% / 0.85);
}

.font-size-sm .message-bubble h1,
.font-size-sm .message-bubble h2 {
    transform: scale(0.92);
    transform-origin: left top;
    /* WHY: Compensate for scale to prevent overflow */
    width: calc(100% / 0.92);
    max-width: calc(100% / 0.92);
}

.font-size-lg .message-bubble h1,
.font-size-lg .message-bubble h2 {
    transform: scale(1.15);
    transform-origin: left top;
    /* WHY: Compensate for scale to prevent overflow - scale enlarges so width must be smaller */
    width: calc(100% / 1.15);
    max-width: calc(100% / 1.15);
}

.font-size-xl .message-bubble h1,
.font-size-xl .message-bubble h2 {
    transform: scale(1.3);
    transform-origin: left top;
    /* WHY: Compensate for scale to prevent overflow - scale enlarges so width must be smaller */
    width: calc(100% / 1.3);
    max-width: calc(100% / 1.3);
}

/* Input Textarea Font Size Classes - Applied via parent #chatContainer */
/* Desktop (>768px) - Placeholder scales with input */
@media (min-width: 769px) {
    .font-size-xs .message-input.form-control {
        font-size: 16px;
        padding-top: 25px;
        padding-bottom: 22px;
        padding-left: 26px;
        padding-right: 26px;
        line-height: 1.1;
    }

    .font-size-xs .custom-placeholder {
        font-size: 16px !important;
	   top: 27px;
    }

    .font-size-sm .message-input.form-control {
        font-size: 19px;
        padding-top: 25px;
        padding-bottom: 21px;
        padding-left: 26px;
        padding-right: 26px;
        line-height: 1.15;
    }

    .font-size-sm .custom-placeholder {
        font-size: 19px !important;
	   top: 29px;
    }

    .font-size-md .message-input.form-control {
        font-size: 23px;
        padding-top: 19px;
        padding-bottom: 19px;
        padding-left: 26px;
        padding-right: 26px;
        line-height: 1.2;
    }

    .font-size-md .custom-placeholder {
        font-size: 23px !important;
	   top: 27px;
    }

    .font-size-lg .message-input.form-control {
        font-size: 27px;
        padding: 19px 26px;
        line-height: 1.1;
    }

    .font-size-lg .custom-placeholder {
        font-size: 27px !important;
    }

    .font-size-xl .message-input.form-control {
        font-size: 31px;
        padding: 16px 26px;
        line-height: 1.1; 
    }

    .font-size-xl .custom-placeholder {
        font-size: 31px !important;
    }
}

.messages-container {
    padding: 30px;
    min-height: 100%;
    /* WHY: No overflow here - parent .chat-center-container handles scrolling */
    /* WHY: Solid background fallback prevents loading screen star from showing through
       if CSS variables fail to load. White for light mode, dark fallback via data-theme rule below */
    background-color: #ffffff;
    background-color: var(--chat-bg, #ffffff);
}

/* WHY: Dark mode solid background fallback for messages container */
[data-theme="dark"] .messages-container {
    background-color: #26292e;
    background-color: var(--chat-bg, #26292e);
}

.messages-container::-webkit-scrollbar {
    width: 8px;
}

.messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.message {
    display: flex;
    margin-bottom: 24px;
    width: 100%; /* WHY: Allow messages to use full container width */
    animation: messageSlideIn 0.4s ease;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    justify-content: flex-end;
}

.message.ai {
    justify-content: flex-start;
    width: 100%; /* WHY: Use full chat width for AI messages so tables can expand */
}

.message-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.4rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    padding: 5px;
}

.message.ai .message-avatar {
    background: var(--aurion-logo-bg);
    /* margin-right: 12px; */
    padding: 10px;
}

.aurion-avatar-svg {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1); /* Make SVG white */
}

.message.user .message-avatar {
    background: var(--user-avatar-bg);
    margin-left: 12px;
    margin-right: 15px;
    color: #333;
}

.message-content-wrapper {
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.message.user .message-content-wrapper {
    align-items: flex-end;
}

.message.ai .message-content-wrapper {
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    flex: 1;
}

.message.user .message-sender { 
	color: rgb(13, 13, 13); 
 }

.message-sender {
	font-size: 23px;
	font-weight: 500;
	/* Color set by theme-specific rules */
	margin-top: 15px;
	padding: 0 4px;
	margin-left: 10px;
	padding-bottom: 20px;
 }

.message-bubble {
    padding: 16px 24px;
    border-radius: 24px;
    /* WHY: Default medium font size as fallback when no .font-size-* class applied */
    font-size: 23px;
    line-height: 1.7;
    margin-top: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;   /* WHY: Modern version of word-wrap for long unbroken strings */
    word-break: break-word;      /* WHY: Force break for extremely long words/Unicode strings */
    max-width: 100%;
    /* WHY: Prevent overflow from typing indicator animation - hide both axes to prevent scrollbars */
    overflow: hidden;
    /* WHY: Only transition transform and box-shadow for hover effect
       Removed 'all' to prevent giant flash when content/size changes during streaming */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* WHY: System emoji fonts - Noto Color Emoji added dynamically after onboarding via loadEmojiAssets() */
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif;
    /* WHY: Use unicode (default) to let browser decide emoji vs text presentation
       This prevents asterisks/numbers from being forced into emoji form (✳️ instead of *)
       Actual emojis still render correctly as the font stack includes emoji fonts */
    font-variant-emoji: unicode;
    /* WHY: Normalize number rendering - iOS Safari uses different font features for numbers */
    font-variant-numeric: normal;
    -webkit-font-variant-numeric: normal;
    /* WHY: Disable ALL automatic font features that iOS applies to numbers */
    font-feature-settings: "tnum" 0, "lnum" 0, "onum" 0, "pnum" 0;
    -webkit-font-feature-settings: "tnum" 0, "lnum" 0, "onum" 0, "pnum" 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Markdown content defaults inside message bubbles */

.message.user .message-bubble p {
	margin: 5px 15px;
	margin-top: 1px;
 }

.message-bubble p {
    margin: 0 0 0.6rem 0;
    margin-top: 40px;
}
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 {
    margin: 0.6rem 0 0.4rem;
    line-height: 32px;
    font-weight: 700;
    /* WHY: Ensure headings wrap properly and respect padding boundaries */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* WHY: Heading sizes scale relative to parent bubble font-size */
.message-bubble h1 {
    font-size: 1.25em;
    line-height: 1.2em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.message-bubble h2 {
    font-size: 1.2em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.message-bubble h3 {
	font-size: 1.1em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.message-bubble h4 {
    font-size: 1.15em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.message-bubble h5 {
    font-size: 1.05em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.message-bubble h6 {
    font-size: 0.95em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
}
.message-bubble ul,
.message-bubble ol {
    padding-left: 1.25rem;
    margin: 0.4rem 0 0.6rem;
}
.message-bubble li { 
	margin: 1.1rem 0;
 }

/* WHY: Hide marker for empty list items (blank lines) */
.message-bubble li:has(> br:only-child) {
    list-style: none;
    margin-left: -1.25rem;
}
.message-bubble hr {
    border: none;
    border-top: 1px solid var(--text-secondary);
    border-top-width: 1px;
    margin: 2em 0;
    opacity: 0.5;
}
.message-bubble code { 
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
}
.message-bubble pre {
    background: rgb(143 143 143 / 6%);
    padding: 0.9rem 1rem;
    border-radius: 10px;
    overflow-x: auto;
    max-width: 100%;             /* WHY: Ensures pre block respects container width */
    box-sizing: border-box;      /* WHY: Include padding in width calculation */
    white-space: pre-wrap;       /* TEMP: Wrapping enabled for testing */
    word-wrap: break-word;       /* TEMP: Break long words */
}

/* WHY: Ensure code inside pre is displayed as block */
.message-bubble pre code {
    display: block;
}

/* WHY: Styled horizontal scrollbar for code blocks - matches personalize modal style */
.message-bubble pre::-webkit-scrollbar {
    height: 6px;
}

.message-bubble pre::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.message-bubble pre::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
}

.message-bubble pre::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}

/* WHY: CodeMirror code block wrapper styling */
.message-bubble .code-block-wrapper {
    margin: 1.5em 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-bubble .code-block-wrapper .CodeMirror {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 0.92em;
    line-height: 1.5;
    height: auto !important;
}

.message-bubble .code-block-wrapper .CodeMirror-scroll {
    max-height: none !important;
    overflow: visible !important;
}

.message-bubble .code-block-wrapper .CodeMirror-sizer {
    min-height: auto !important;
}

/* WHY: Dark mode specific adjustments for CodeMirror */
[data-theme="dark"] .message-bubble .code-block-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.message-bubble strong,
.message-bubble b {
    font-weight: 600;
}
.message-bubble em,
.message-bubble i {
    font-style: italic;
}
.message-bubble blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 1rem;
    margin: 0.6rem 0;
    font-style: italic;
    opacity: 0.9;
}

/* Table Wrapper - WHY: Enable horizontal scroll for wide tables without affecting chat container */
.message-bubble .table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 1rem 0;
    border-radius: 8px;
    /* WHY: Custom scrollbar styling to match theme */
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) var(--border-color);
}

/* Webkit scrollbar styling for table wrapper */
.message-bubble .table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.message-bubble .table-wrapper::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 8px;
    margin: 0 8px;
}

.message-bubble .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.message-bubble .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--theme-secondary);
}

/* Table Styling - WHY: Render AI-generated tables with proper formatting and borders */
.message-bubble table {
    width: 100%;
    border-collapse: collapse;
    background: var(--chat-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 50px 0px;
}

/* Table wrapper with copy button - WHY: Position copy button relative to table */
.table-container {
    position: relative;
    margin: 50px 0px;
}

.table-container table {
    margin: 0;
}

/* Copy table button - WHY: Allow users to copy table content */
.copy-table-btn {
    position: absolute;    
    top: -38px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--input-border);
    background: var(--chat-bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    padding: 0;
    opacity: 1.0;
    z-index: 10;
}

.copy-table-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 8%, var(--chat-bg));
    transform: scale(1.05);
    opacity: 1;
}

.copy-table-btn:active {
    transform: scale(0.95);
}

.copy-table-btn.copied {
    border-color: #10b981;
    color: #10b981;
    background: color-mix(in srgb, #10b981 8%, var(--chat-bg));
    opacity: 1;
}

[data-theme="dark"] .copy-table-btn {
    background: rgba(30, 30, 30, 0.8);
}

[data-theme="dark"] .copy-table-btn:hover {
    background: color-mix(in srgb, var(--theme-primary) 8%, rgba(30, 30, 30, 0.8));
}

[data-theme="dark"] .copy-table-btn.copied {
    background: color-mix(in srgb, #10b981 8%, rgba(30, 30, 30, 0.8));
}

.message-bubble thead {
    background: var(--message-user-bg);
    font-weight: 600;
}

.message-bubble th,
.message-bubble td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    min-width: 160px; /* WHY: Ensure columns don't get too narrow */
    white-space: normal;
    word-wrap: break-word;
}

.message-bubble th {
    font-weight: 600;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
}

.message-bubble td {
    border-right: 1px solid var(--border-color);
}

.message-bubble th:last-child,
.message-bubble td:last-child {
    border-right: none;
}

.message-bubble tbody tr:last-child td {
    border-bottom: none;
}

.message-bubble tbody tr:hover {
    background: var(--message-ai-bg);
}

.message-bubble caption {
    padding: 8px;
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary);
}

/* Dark mode table adjustments */
[data-theme="dark"] .message-bubble table {
    background: rgba(30, 30, 30, 0.5);
}

[data-theme="dark"] .message-bubble tbody tr:hover {
    background: rgba(50, 50, 50, 0.5);
}

/* Stacktable.js Responsive Layout - WHY: Show large table on desktop, card layout on mobile */
@media (min-width: 769px) {
    .message-bubble .stacktable.small-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Hide table wrapper horizontal scrollbar on mobile */
    .message-bubble .table-wrapper {
        overflow-x: hidden;
    }

    .message-bubble p {
		margin: 0 0 0.6rem 0;
		margin-top: 10px;
	}

	.message-bubble h4 { 
		margin-top: 1.4em; 
	}
    
    /* WHY: Remove min-width on mobile - card layout doesn't need it */
    .message-bubble th,
    .message-bubble td {
        min-width: unset;
    }
    
    /* WHY: Remove cell borders in dark mode on mobile only */
    [data-theme="dark"] .message-bubble th,
    [data-theme="dark"] .message-bubble td {
        border-bottom: none;
        border-right: none;
    }
    
    .message-bubble .stacktable.large-only {
        display: none !important;
    }
    
    /* WHY: Adjust copy button for mobile card tables */
    .table-container .copy-table-btn {
        top: -35px;
        right: 8px;
        width: 30px;
        height: 30px;
        font-size: 1.3rem;
    }
    
    /* Card table styling - WHY: Each row becomes a card on mobile */
    .message-bubble .stacktable.small-only {
        display: block !important;
        margin-bottom: 25px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        background: var(--chat-bg);
    }
    
    .message-bubble .stacktable.small-only tbody {
        display: block;
    }
    
    .message-bubble .stacktable.small-only tr {
        display: flex;
        padding: 0;
        border-bottom: none;
    }
    
    .message-bubble .stacktable.small-only tr:last-child {
        border-bottom: none;
    }
    
    /* Key column (label) - WHY: Match desktop header background for visual consistency */
    .message-bubble .stacktable.small-only .st-key {
        font-weight: 600;
        color: var(--text-primary);
        background: var(--message-user-bg);
        width: 40%;
        text-align: left;
        padding: 10px 16px; 
        min-width: 0; /* WHY: Allow text to wrap naturally */
    }
    
    /* WHY: Light mode only - add bottom border to first column, but not on last row */
    .message-bubble .stacktable.small-only tr:not(:last-child) .st-key {
        border-bottom: 1px solid rgb(175 175 175 / 50%);
    }
    
    /* Value column */
    .message-bubble .stacktable.small-only .st-val {
        width: 60%;
        text-align: left;
        padding: 10px 16px; 
        min-width: 0; /* WHY: Allow text to wrap naturally */
        word-break: break-word; /* WHY: Break long words to prevent overflow */
    }
    
    /* Dark mode card styling */
    [data-theme="dark"] .message-bubble .stacktable.small-only {
        background: rgba(30, 30, 30, 0.5);
        /* WHY: White border to match row dividers */
        border-color: rgba(255, 255, 255, 0.45);
    }
    
    /* WHY: In dark mode, show whiter divider between all rows (not just first column) */
    [data-theme="dark"] .message-bubble .stacktable.small-only tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    }
    
    [data-theme="dark"] .message-bubble .stacktable.small-only tr:last-child {
        border-bottom: none;
    }
    
    /* WHY: Remove first-column divider in dark mode since we have row dividers */
    [data-theme="dark"] .message-bubble .stacktable.small-only tr .st-key {
        border-bottom: none !important;
    }
}

/* Color swatch circles for hex codes - replaces hex text with just a circle */
.color-swatch-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.2);
    vertical-align: middle;
    margin: 0 2px;
    cursor: help;
}

.message.user .message-bubble {
    background: var(--message-user-bg);
    border-top-right-radius: 4px;
    margin-left: 75px;
}

/* User message action buttons */
.user-message-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
}

.user-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--input-border);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    padding: 0;
}

.user-action-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
    transform: scale(1.05);
}

.user-action-btn:active {
    transform: scale(0.95);
}

.user-action-btn.copied,
.user-action-btn.success {
    border-color: #10b981;
    color: #10b981;
    background: color-mix(in srgb, #10b981 8%, transparent);
}

.retry-btn {
    font-size: 1.8rem;
}

.retry-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.retry-btn i {
    transition: transform 0.3s ease;
    position: relative;
    top: 2px;
    font-size: 1.8rem;
}

.retry-btn:hover i {
    transform: rotate(180deg);
}

.message.ai .message-bubble {
   /* background: var(--message-ai-bg); */
    border-bottom-left-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* WHY: Desktop only - align AI response right edge with user message right edge */
@media (min-width: 769px) {
    .message.ai .message-bubble,
    .message.assistant .message-bubble {
        margin-right: 75px;
    }
}

.message.user .message-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Limit Reached Message Bubble - Pink Alert */
.limit-reached-bubble {
    background: rgba(255, 182, 193, 0.25) !important;
    border: 2px solid rgba(255, 105, 135, 0.5) !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px !important;    
    margin-top: 5px !important;
}

[data-theme="dark"] .limit-reached-bubble {
    background: rgba(255, 105, 135, 0.15) !important;
    border-color: rgba(255, 105, 135, 0.4) !important;
}

.limit-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.limit-reached-bubble strong {
	color: #d81b60;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.4em;
	margin-top: 10px;
}

[data-theme="dark"] .limit-reached-bubble strong {
    color: #ff6b9d;
}

.limit-icon {
    flex-shrink: 0;
    color: #d81b60;
    width: 28px;
    height: 28px;
}

[data-theme="dark"] .limit-icon {
    color: #ff6b9d;
}

.new-invite-code-btn {
    align-self: center;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary), var(--theme-primary));
    background-size: 200% 200%;
    animation: buttonGradientShift 4s ease-in-out infinite;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary) 30%, transparent);
    position: relative;
    overflow: hidden;
}

.new-invite-code-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.3),
        transparent 50%,
        transparent
    );
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.new-invite-code-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.new-invite-code-btn:active {
    transform: translateY(0);
}

.new-invite-code-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.new-invite-code-btn:disabled::before {
    animation: none;
}

.letter-fade {
    display: inline;
    animation: letterFadeIn 0.15s ease;
}

@keyframes letterFadeIn {
    from {
        opacity: 0;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.input-area {
    padding: 26px 39px;
    position: relative;
    /* WHY: No background/backdrop here - parent .chat-bottom-bar handles that */
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    /* WHY: Minimum top padding ensures resize handle always has space above textarea */
    /* padding-top: 8px;*/
}
 

.message-input {
    flex: 1;
    font-size: 1.43rem;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 26px;
    padding-right: 26px;
    border: 1px solid var(--border-color);
    border-radius: 37px;
    background: var(--chat-bg);
    color: var(--text-primary);
    resize: none;
    /* WHY: Remove fixed height - now auto-expands up to 10 rows */
    min-height: auto;
    height: auto;
    line-height: 1.2;
    /* WHY: Smooth height transitions for row-by-row expansion */
    transition: height 0.15s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* WHY: System emoji fonts - Noto Color Emoji added dynamically after onboarding via loadEmojiAssets() */
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif;
    /* WHY: Hide scrollbar until max height (10 rows) is reached */
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
    /* WHY: Clip scrollbar to border-radius by using background-clip */
    background-clip: padding-box;
    /* WHY: 3D Recessed Look - Stronger inner shadow + Crisp white bottom lip */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06), /* Top inner shadow */
        inset 0 1px 2px rgba(0, 0, 0, 0.04), /* Softens the edge */
        0 1px 0 rgba(255, 255, 255, 1.0);    /* Bottom outer highlight (the lip) */
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0)), var(--chat-bg); /* Subtle gradient darkening top */
}

/* WHY: Enhanced futuristic shadows for dark mode - recessed look via inner glow technique */
/* Dark-on-dark shadows don't work, so we use LIGHT inner highlights instead */
[data-theme="dark"] .message-input {
    background: var(--chat-bg);
    border: 1px solid rgba(255,255,255,0.06);
    border-top-color: rgba(0,0,0,0.4);
    border-left-color: rgba(0,0,0,0.3);
    box-shadow: 
        inset 0 1px 2px rgba(0,0,0,0.4),
        inset 0 -1px 1px rgba(255,255,255,0.03),
        0 1px 0 rgba(255,255,255,0.02);
}

[data-theme="dark"] .message-input:focus {
    border-color: color-mix(in srgb, var(--theme-primary) 50%, transparent);
    box-shadow: 
        inset 0 1px 2px rgba(0,0,0,0.4),
        inset 0 -1px 1px rgba(255,255,255,0.03),
        0 0 0 2px color-mix(in srgb, var(--theme-primary) 20%, transparent),
        0 0 12px color-mix(in srgb, var(--theme-primary) 15%, transparent);
}

.message.ai .message-bubble,
.message.assistant .message-bubble {
    box-shadow: none;
}

.message-input.has-overflow {
    padding-right: 30px; /* WHY: Make room for scrollbar positioned 15px from edge */
    overflow-y: auto; /* WHY: Enable scrolling only at max height (10 rows) */
}

/* WHY: Hide scrollbar until max height is reached */
.message-input::-webkit-scrollbar {
    width: 0px;
}

.message-input.has-overflow::-webkit-scrollbar {
    width: 8px;
}

.message-input.has-overflow::-webkit-scrollbar-track {
    background: transparent;
    /* WHY: Large margins to keep scrollbar away from rounded corners (20px = safe zone) */
    margin: 20px 0;
    border-radius: 50px; /* Match textarea border-radius */
}

.message-input.has-overflow::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.message-input.has-overflow::-webkit-scrollbar-thumb:hover {
    background: var(--theme-secondary);
    background-clip: padding-box;
}

.message-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    /* WHY: Clean focus - subtle inset + soft theme glow */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent);
}

/* WHY: Maintain focus shadow even with overflow/scrollbar */
.message-input.has-overflow:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent);
}

/* WHY: Dark mode has-overflow focus - match the main dark mode focus */
[data-theme="dark"] .message-input.has-overflow:focus {
    border-color: color-mix(in srgb, var(--theme-primary) 50%, transparent);
    box-shadow: 
        inset 0 1px 2px rgba(0,0,0,0.4),
        inset 0 -1px 1px rgba(255,255,255,0.03),
        0 0 0 2px color-mix(in srgb, var(--theme-primary) 20%, transparent),
        0 0 12px color-mix(in srgb, var(--theme-primary) 15%, transparent);
}

.message-input::placeholder {
    color: transparent;
}

.custom-placeholder {
    position: absolute;
    left: 118px;
    /* WHY: Align to top where text actually starts typing, not vertically centered */
    top: 25px; /* Match textarea padding-top */
    color: var(--input-placeholder);
    opacity: 0.6;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 195px);
    font-size: 1.43rem;
    transition: opacity 0.2s;
}

.custom-placeholder .placeholder-emoji {
    opacity: 0.4;
}

.btn-emoji, .btn-send {
    width: 73px;
    height: 73px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.69rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.btn-emoji {
    background: linear-gradient(to bottom, #ffffff, #f7f7f7);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.1);
    /* WHY: Raised 3D button effect - opposite of recessed input */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.1), /* Drop shadow */
        0 1px 0 rgba(255,255,255,1) inset; /* Top inner highlight */
}

/* WHY: Dark mode raised button - uses light bevels to pop out */
[data-theme="dark"] .btn-emoji {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.1);
   /*  border-bottom-color: rgba(0,0,0,0.3); */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3), /* Drop shadow */
        0 1px 0 rgba(255,255,255,0.1) inset, /* Top inner highlight */
        0 -1px 0 rgba(0,0,0,0.2) inset; /* Bottom inner shadow */
}

.btn-emoji:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,1) inset;
}

[data-theme="dark"] .btn-emoji:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.2) inset;
}

/* WHY: Active state uses theme color border in both light and dark modes */
.btn-emoji:active {
    border-color: var(--theme-primary) !important;
    transform: scale(0.95);
}

/* WHY: Explicit centering for emoji icon to fix Android rendering */
.btn-emoji i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* WHY: Bootstrap Icons render off-center on Android - nudge into place */
    transform: translate(0px, 1px);
}

.btn-send {
    background: linear-gradient(135deg, var(--theme-primary), #8cd5d5, var(--theme-primary));
    background-size: 200% 200%;
    color: white;
    /* WHY: Light mode 3D Pop-out  */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,1) inset; 
    /* WHY: Subtle gradient animation creates a living, breathing button effect */
    animation: buttonGradientShift 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    z-index: 10;
    pointer-events: auto !important;
}

/* WHY: Dark mode submit button - stronger shadow with theme glow */
[data-theme="dark"] .btn-send {
    box-shadow: 
        0 4px 12px color-mix(in srgb, #000000 70%, transparent),
        0 2px 5px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 -1px 0 rgba(0,0,0,0.1) inset;
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom-color: rgba(0,0,0,0.2);
}

/* Subtle gradient animation for send button - WHY: Adds visual interest and draws attention */
@keyframes buttonGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Optional shimmer effect overlay */
.btn-send::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 70%
    );
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.btn-send:hover  { 
	color: white!important;
 }

.btn-send:hover:not(:disabled) {
    transform: scale(1.1);
    /* WHY: Light mode hover - EXACTLY matches emoji button hover */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,1) inset;
}

/* WHY: Dark mode hover - enhanced glow with theme color */
[data-theme="dark"] .btn-send:hover:not(:disabled) {
    box-shadow: 
        0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent),
        0 4px 8px rgba(0,0,0,0.3),
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 -1px 0 rgba(0,0,0,0.1) inset;
}

/* WHY: Only spin on hover for desktop - mobile doesn't have hover */
@media (min-width: 769px) {
    .btn-send:hover:not(:disabled) i {
        animation: gentleSpin 2s linear infinite;
    }
}

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

/* WHY: Disabled state when input is empty - no hover, no animations */
.btn-send:disabled {
    opacity: 0.4;
    cursor: not-allowed; 
    /* WHY: Grayscale filter makes it look inactive */
    filter: grayscale(40%);
    transform: none !important;
    box-shadow: none;    
    color: #ffffff;
	border-color: #fbfbfb00;
}

.btn-send:disabled::before {
    animation: none;
}

/* WHY: Prevent hover effects on disabled button */
.btn-send:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.btn-send:disabled:hover i {
    animation: none !important;
}

/* WHY: No transition on icon - instant changes */
.btn-send i {
    transition: none;
    pointer-events: none;
    display: flex; /* WHY: Ensure icon is centered properly */
    align-items: center;
    justify-content: center;
    line-height: 1; /* WHY: Prevent line-height from affecting vertical alignment */
}

/* WHY: Optical centering for send icon only - Bootstrap Icons need slight adjustment */
.btn-send:not(.btn-stop) i {
    transform: translate(-1px, 2px);
}

/* WHY: Stop icon needs no offset - reset to centered */
.btn-send.btn-stop i {
    transform: none;
    animation: none !important;
}

/* WHY: Smooth transition when btn-stop class is removed */
.btn-send {
    transition: all 0.5s ease;
}

/* WHY: Rotating arc segment (40 degrees) around button edge when streaming */
.btn-send.btn-stop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* WHY: Create arc segment - transparent background with partial white border */
    border: 5px solid transparent;
    border-top-color: white;
    border-right-color: white;
    /* WHY: Clip to show only ~40 degrees (1/9th of circle) */
    clip-path: polygon(50% 50%, 50% 0%, 75% 5%, 95% 20%, 100% 40%, 100% 50%, 50% 50%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: arcSpin 1.5s linear infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* WHY: Simple rotation animation for arc segment */
@keyframes arcSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Textarea Resize Handle (Desktop Only >768px) */
/* WHY: Allows users to manually drag-resize textarea on desktop */
.textarea-resize-handle {
    position: absolute; 
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 12px;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    /* WHY: Match input border color for consistency, adapts to light/dark mode */
    color: var(--text-secondary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.textarea-resize-handle:hover {
    opacity: 1;
}

.textarea-resize-handle i {
    font-size: 1.2rem;
    pointer-events: none;
}

/* WHY: Show resize handle only on desktop (>768px) */
@media (min-width: 769px) {
    .textarea-resize-handle {
        display: flex;
    }
}

/* WHY: Disable text selection while resizing */
body.textarea-resizing {
    user-select: none;
    cursor: ns-resize;
}

body.textarea-resizing * {
    cursor: ns-resize !important;
}

/* Welcome Message */
.welcome-message {
    position: absolute;
    top: 50%;
    left: 80px;
    right: 80px;
    transform: translateY(-50%);
    z-index: 1; /* WHY: Stay below profile dropdown (z-index: 999999) */
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.welcome-message.hidden {
    opacity: 0;
    transform: translateY(-45%);
}

.welcome-text {
    font-size: 3rem;
    line-height: 3.3rem;
    font-weight: 500;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding: 20px;
    width: 100%;
    animation: welcomePulse 2s ease-in-out infinite;
}

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

[data-theme="dark"] .welcome-text {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scroll to Bottom Button */
.scroll-to-bottom-btn {
	position: absolute;
	bottom: 140px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: transparent;
	backdrop-filter: blur(10px);
	border: 2px solid color-mix(in srgb, var(--theme-primary) 30%, transparent);
	color: var(--theme-primary);
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 100003; /* WHY: Scroll button - above content, below bars */
	box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 30%, transparent);
	transition: all 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

.scroll-to-bottom-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-bottom-btn:hover {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-primary) 50%, transparent);
}

.scroll-to-bottom-btn:active {
    transform: translateX(-50%) scale(0.95);
}

.scroll-to-bottom-btn i {
    font-size: 28px;
}

[data-theme="dark"] .scroll-to-bottom-btn {
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--theme-primary) 40%, transparent);
    color: var(--theme-primary);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 25%, transparent);
}

[data-theme="dark"] .scroll-to-bottom-btn:hover {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}
 

/* Theme-specific button gradients for better contrast - WHY: Sunset and Rose need more distinct color variations */
[data-aurion-theme="sunset"] .btn-send {
    background: linear-gradient(135deg, #ff6b35, #ffbc00, #ff6b35);
    background-size: 200% 200%;
    animation: buttonGradientShift 4s ease-in-out infinite;
}

[data-aurion-theme="rose"] .btn-send {
    background: linear-gradient(135deg, #d8345f, #ff5dc6, #d8345f);
    background-size: 200% 200%;
    animation: buttonGradientShift 4s ease-in-out infinite;
}

/* Tooltipster Custom Styling - WHY: Small, elegant tooltips that match the interface */
/* Base Tooltipster theme overrides */
.tooltipster-noir {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tooltipster-noir.tooltipster-sidetip .tooltipster-box {
    border-radius: 8px;
}

.tooltipster-noir .tooltipster-content {
    font-size: 12px;
    padding: 6px 12px;
    font-weight: 500;
}

/* Arrow (triangle) sizing */
.tooltipster-noir.tooltipster-sidetip .tooltipster-arrow {
    height: 10px;
    width: 18px;
}

/* Light mode: white card with dark text and subtle border */
.tooltipster-noir.tooltipster-sidetip .tooltipster-box {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.18);
}
.tooltipster-noir .tooltipster-content { color: #1a1a1a; }

.tooltipster-noir.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: rgba(255, 255, 255, 0.98); }
.tooltipster-noir.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: rgba(0, 0, 0, 0.18); }
.tooltipster-noir.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { border-top-color: rgba(255, 255, 255, 0.98); }
.tooltipster-noir.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: rgba(0, 0, 0, 0.18); }

/* Dark mode: dark card with light text and subtle light border */
[data-theme="dark"] .tooltipster-noir.tooltipster-sidetip .tooltipster-box {
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .tooltipster-noir .tooltipster-content { color: #ffffff; }

[data-theme="dark"] .tooltipster-noir.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: rgba(30, 30, 30, 0.98); }
[data-theme="dark"] .tooltipster-noir.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .tooltipster-noir.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { border-top-color: rgba(30, 30, 30, 0.98); }
[data-theme="dark"] .tooltipster-noir.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: rgba(255, 255, 255, 0.18); }

/* Invite Code Usage Progress Bar in Profile Dropdown */
.invite-usage-container {
    padding: 12px 0px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.invite-usage-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.invite-usage-count {
    font-weight: 700;
    color: var(--text-primary);
}

.invite-usage-bar {
    height: 15px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

[data-theme="dark"] .invite-usage-bar {
    background: rgba(255, 255, 255, 0.1);
}

.invite-usage-fill {
    height: 100%;
    background: var(--theme-primary);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Invite Code Onboarding Step Styling */
.invite-code-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 20px;
}

/* WHY: Apply theme gradient to key icon */
.invite-code-icon i {
    display: inline-block; /* WHY: Required for background-clip to work on iOS Safari */
    color: var(--theme-primary); /* WHY: Fallback color for browsers that don't support background-clip */
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.7em;
}

.invite-code-input {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: lowercase;
}

.invite-code-feedback {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    display: none;
}

.invite-code-feedback.success {
    display: block;
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.invite-code-feedback.error {
    display: block;
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

[data-theme="dark"] .invite-code-feedback.success {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

[data-theme="dark"] .invite-code-feedback.error {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
}

.emoji-picker-container {
    position: absolute;
    bottom: 117px;
    left: 39px;
    z-index: 100008; /* WHY: Emoji picker - above input bar */
    animation: emojiSlideUp 0.3s ease;
}

@keyframes emojiSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

emoji-picker {
    --border-radius: 10px;
    box-shadow: var(--shadow);
    /* WHY: Use local Noto Color Emoji font for consistent emoji rendering across all devices
       This ensures the picker shows the same emojis as the rest of the app */
    --emoji-font-family: 'Noto Color Emoji';
    /* WHY: Scale emoji picker 30% larger to match input area sizing */
    font-size: 130%;
    transform: scale(1.3);
    transform-origin: bottom left;
    position: relative;
    z-index: 100025; /* WHY: Modals - above sidebar and bars */
}

/* WHY: Custom dark mode background for emoji picker */
emoji-picker.dark {
    --background: rgb(38 41 46);
}

.modal-content {
    background: var(--modal-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-hover);
}

.modal-header {
    padding: 30px 30px 20px;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 30px;
    color: var(--text-primary);
}

.modal-body p {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.modal-footer {
    padding: 20px 30px 30px;
}

/* WHY: Fix settings/personalize modal footer to bottom on mobile - NOT onboarding modal */
@media (max-width: 768px) {
    /* Only apply to settings modal, not onboarding */
    #settingsModal .modal-body {
        padding-bottom: 30px; /* WHY: Minimal space, footer is sticky */
    }
    
    #settingsModal .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--modal-bg);
        z-index: 10;
        padding: 16px 20px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(20px);
    }
}

.disclaimer {
	font-size: 14px!important;
}

.modal-content .form-control {
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.4rem;
    padding: 14px 18px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.modal-content .form-control:focus {
    outline: none;
    border-color: var(--theme-input-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

.modal-content .btn-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    font-size: 1.1rem;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

/* WHY: Alert modal specific styling */
#alertModal .modal-body p {
    white-space: pre-line;
    margin-bottom: 0;
}

/* View Summary Modal (DEBUG MODE only) */
/* WHY: Custom 1200px width for summary modal */
.view-summary-modal-dialog {
    max-width: 1200px;
}

/* WHY: Scrollable body with chat-style scrollbar */
.view-summary-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    /* WHY: Match chat scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) transparent;
}

/* WHY: Webkit scrollbar for Chrome/Safari - match chat style */
.view-summary-modal-body::-webkit-scrollbar {
    width: 8px;
}

.view-summary-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.view-summary-modal-body::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 4px;
}

.view-summary-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--theme-secondary);
}

/* Summary Stats Grid - Inspired by invite-code-stats */
.summary-stats-grid {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(249, 250, 251, 0.8));
    backdrop-filter: blur(20px);
    padding: 32px;
    border-radius: 20px;
    margin-bottom: 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    border: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.summary-stat-card {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(249, 250, 251, 0.6));
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.2);
}

.summary-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.summary-stat-card:hover::before {
    height: 4px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.summary-stat-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 36px rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.5);
}

.summary-stat-card .stat-value {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1.2;
}

.summary-stat-card .stat-label {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.summary-stat-card .stat-label i {
    color: #667eea;
}

/* Summary Content Wrapper */
.summary-content-wrapper {
    padding: 20px;
    background: rgba(var(--theme-primary-rgb), 0.03);
    border-radius: 12px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1);
}

/* WHY: Match chat bubble font size (23px) and line height (1.7) */
#viewSummaryModal .summary-content-wrapper {
    font-size: 23px;
    line-height: 1.7;
    color: var(--text-primary);
}

#viewSummaryModal .summary-content-wrapper ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0.4rem 0 0.6rem;
}

#viewSummaryModal .summary-content-wrapper li {
    margin-bottom: 8px;
    color: var(--text-primary);
}

#viewSummaryModal .summary-content-wrapper p {
    margin: 0 0 0.6rem 0;
    color: var(--text-primary);
}

/* View Summary Modal Header */
.view-summary-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: none;
    padding: 24px 32px;
    border-radius: 20px 20px 0 0;
}

.view-summary-modal-title {
    color: white !important;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.view-summary-modal-title i {
    font-size: 1.3rem;
}

.view-summary-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    opacity: 1;
    transition: all 0.3s ease;
}

.view-summary-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* View Summary Modal Footer */
.view-summary-modal-footer {
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(255, 255, 255, 0.8));
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    padding: 20px 32px;
    gap: 12px;
    border-radius: 0 0 20px 20px;
}

/* View Summary Buttons */
.view-summary-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.view-summary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.view-summary-btn:hover::before {
    left: 100%;
}

.view-summary-btn:hover {
    transform: translateY(-2px);
}

.view-summary-btn:active {
    transform: translateY(0);
}

.view-summary-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.view-summary-btn-danger:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.view-summary-btn-secondary {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3);
}

.view-summary-btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.5);
    background: linear-gradient(135deg, #475569, #334155);
}

#viewSummaryModal .alert-info {
    background: rgba(var(--theme-primary-rgb), 0.1);
    border: 1px solid var(--theme-primary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 18px;
}

/* WHY: Version update modal text styling - theme-aware colors using CSS variables */
.aurion-modal-title {
    color: var(--theme-primary) !important;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 2rem;
}

.aurion-modal-text {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

/* WHY: Retry button on error messages - uses same icon as retry metadata icon */
.retry-error-btn {
    display: inline-block !important;
    margin-top: 16px !important;
    padding: 10px 24px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-primary) 30%, transparent) !important;
}

.retry-error-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent) !important;
}

.retry-error-btn:active {
    transform: translateY(0) !important;
}

.retry-error-btn i {
    margin-right: 6px;
}

/* WHY: Error code badge displayed at end of error messages - matches version badge style */
.error-code-badge {
    font-size: 1.1rem;
    font-weight: 400;
    color: #ff149f;
    border: 1px solid #ff149f;
    border-radius: 6px;
    padding: 0px 8px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(255, 20, 147, 0.15);
    background: rgb(246 246 246 / 50%);
    vertical-align: middle;
    top: -2px;
    left: 3px;
    position: relative;
}

/* WHY: Pink text/border in dark mode for better visibility */
[data-theme="dark"] .error-code-badge {
    color: #ff69b4;
    border-color: #ff1493;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(255, 20, 147, 0.3);
}

#alertModal .modal-dialog {
    max-width: 500px;
}

#alertModal .btn-close {
    filter: var(--bs-btn-close-filter, invert(1) grayscale(100%) brightness(200%));
}

[data-theme="light"] #alertModal .btn-close {
    filter: none;
}

.message.assistant .message-bubble, .message.ai .message-bubble {
	margin-top: -40px;
}

/* Error Message Styling - WHY: Pink color for pure error messages (no partial content) */
.message.error-message:not(.has-partial-content) .message-bubble {
    color: #ff149f !important
}

[data-theme="dark"] .message.error-message:not(.has-partial-content) .message-bubble {
    color: #ff149f !important
}

/* Response Canceled Badge - WHY: Yellow badge at bottom of message */
.response-canceled-badge {
	margin-top: 50px;
	padding: 10px 30px;
	background: rgba(255, 193, 7, 0.15);
	color: #f57c00;
	border: 1px solid rgba(255, 193, 7, 0.3);
	border-radius: 12px;
	font-weight: 400;
	font-size: 1.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
}

.response-canceled-badge i {
    font-size: 1.1em;
}

[data-theme="dark"] .response-canceled-badge {
    background: rgba(255, 193, 7, 0.12);
    color: #ffb74d;
    border: 1px solid rgba(255, 193, 7, 0.25);
}

/* Response Error Badge - WHY: Pink badge for error/partial messages */
.response-error-badge {
	margin-top: 50px;
	padding: 10px 30px;
	background: rgba(255, 20, 159, 0.08);
	color: #ff149f;
	border: 1px solid rgba(255, 20, 159, 0.25);
	border-radius: 12px;
	font-weight: 400;
	font-size: 1.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	flex-wrap: wrap;
}

.response-error-badge i.bi-exclamation-triangle {
    font-size: 1.1em;
}

[data-theme="dark"] .response-error-badge {
    background: rgba(255, 20, 159, 0.1);
    color: #ff149f;
    border: 1px solid rgba(255, 20, 159, 0.3);
}

/* WHY: When retry button is inside badge, make it inline and compact */
.response-error-badge .retry-error-btn {
    display: inline-flex !important;
    margin-top: 0 !important;
    margin-left: 8px !important;
    padding: 6px 16px !important;
    font-size: 1.2rem !important;
}

/* WHY: Inline code color changes with theme */
.cm-s-eclipse span.cm-string, code { 
	color: var(--theme-primary) !important;
}

/* WHY: CodeMirror background adapts to theme - light tinted version */
.CodeMirror-scroll .CodeMirror-lines {
	background: color-mix(in srgb, var(--theme-primary) 5%, var(--chat-bg));
}

/* WHY: Dark mode gets darker background for better contrast */
[data-theme="dark"] .CodeMirror-scroll .CodeMirror-lines {
	background: color-mix(in srgb, var(--theme-primary) 8%, rgba(0, 0, 0, 0.4));
}



.sidebar-toggle {
    position: fixed;
    left: 20px;
    top: calc(5vh + 0px);
    width: 48px;
    height: 48px;
    background: var(--chat-bg);
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100015; /* WHY: Sidebar toggle - above bars but below sidebar */
    box-shadow: var(--shadow);
    color: var(--text-primary);
    font-size: 1.3rem;
}

.sidebar-toggle:hover {
    background: var(--message-user-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.sidebar-toggle:active {
    transform: translateY(3px) scale(1.05);
    box-shadow: none;
}

.sidebar-toggle:focus {
    outline: none;
}

.sidebar-toggle.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Responsive Design - Tablet and below */
@media (max-width: 1100px) {
    /* WHY: Hide pin button below 1100px - sidebar becomes overlay only */
    .btn-pin-sidebar {
        display: none !important;
    }
    
    /* WHY: Sidebar overlays instead of shifting chat container */
    .sidebar.open ~ #chatContainer {
	margin-left: auto !important;
	width: 85% !important;
	min-width: 80% !important;
    }
    
    /* WHY: Keep chat-container centered and properly padded when sidebar overlays */
    .sidebar.open ~ #chatContainer .chat-container {
        width: 85% !important;
        margin: 5vh auto !important;
    }
    
    /* WHY: Prevent transition animation when in overlay mode */
    #chatContainer {
        transition: none !important;
    }
    
    /* WHY: Sidebar should overlay both bars */
    .sidebar {
        z-index: 100020; /* WHY: Above both bars (100010, 100005) but below modals (100025) */
    }
}

/* Responsive Design - Mobile Optimization */
@media (max-width: 768px) {
    /* WHY: Prevent horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* WHY: On mobile, sidebar should NOT affect chat container at all */
    #chatContainer {
        width: 100% !important;
        margin-left: 0 !important;
        min-width: 100% !important;
        overflow-x: hidden !important; /* WHY: Prevent horizontal scrolling */
    }
    
    .sidebar.open ~ #chatContainer {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .sidebar.open ~ #chatContainer .chat-container {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .chat-container {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        position: relative; /* WHY: Position context for absolute children */
        overflow: hidden;
        overflow-x: hidden !important; /* WHY: Explicitly prevent horizontal scrolling */
    }
    
    /* Thinner header bar on mobile - FIXED to top */
    .chat-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 8px 10px;
        padding-top: env(safe-area-inset-top);
        min-height: 50px;
        z-index: 100010; /* WHY: Below sidebar (100020) and modals (100025) */
        background: var(--chat-header-bg);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border-color);
    }
    
    /* WHY: Inner container adds consistent 10px top padding regardless of safe-area */
    .chat-header-inner {
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    /* WHY: Mobile responsive styling for chat title row - compact layout below header */
    .chat-title-row {
        padding: 0 10px 6px 0px;
        position: fixed;
        top: calc(53px + env(safe-area-inset-top, 0px)); /* WHY: Account for device safe area like header does */
        width: 100%;
        overflow-x: hidden; /* WHY: Prevent horizontal scrolling */
    }
    
    .chat-title-divider {
        margin: 6px 0; /* WHY: No negative margins to prevent horizontal scroll */
        position: relative;
        left: -10px; /* WHY: Shift left to span full width */
        width: calc(100% + 20px); /* WHY: Extend to compensate for left shift */
    }
    
    .chat-title-content {
        gap: 6px;
        padding: 0 2px;
        margin-top: -3px;
    }
    
    .chat-title-left {
        gap: 6px;
        min-width: 0;
	   margin-left: 20px;
    }
    
    .chat-title-icon {
        font-size: 0.9rem;
    }
    
    .chat-title-text {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .chat-title-edit-btn {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
    
    .chat-title-text-input {
        font-size: 0.9rem;
        padding: 0px 6px;
        min-width: 200px;
        max-width: 90%;
    }
    
    .chat-title-action-btn {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
    
    .chat-title-edit-actions {
        gap: 4px;
    }
    
     .chat-header-title {
		height:50px;
	}

    .chat-header h1 {
	font-size: 1.3rem;
	margin-top: 2px;
	margin-bottom: -7px !important;
    }
    
    .chat-header .text-muted {
        font-size: 1rem;
    }
    
    .header-subtitle {
        font-size: 0.7rem;
    }
    
    /* WHY: Mobile three-section framework positioning */
    .chat-center-container {
        position: fixed !important;
        top: calc(95px + env(safe-area-inset-top, 0px)) !important; /* WHY: 60px header + ~35px title row */
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important; /* WHY: Prevent horizontal scrolling */
    }
    
    .chat-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box !important;
        background: var(--input-bg) !important;
        backdrop-filter: blur(10px) !important;
        /* WHY: No border on mobile - Android shows it too prominently */
        border-top: none !important;
    }
    
    .header-controls {
        gap: 10px;
    }
    
    /* Hide theme toggle button on mobile */
    .btn-theme-toggle {
        display: none;
    }
    
    /* Copy all icon mobile sizing */
    .btn-copy-all-icon {
        width: 48px;
        height: 48px;
        margin-right: 3px;
    }
    
    .btn-copy-all-icon i {
        font-size: 1.2rem;
    }
    
    /* View summary icon mobile sizing */
    .btn-view-summary-icon {
        width: 48px;
        height: 48px;
        margin-right: 3px;
    }
    
    .btn-view-summary-icon i {
        font-size: 1.2rem;
    }
    
    /* Mammoth icon mobile sizing */
    .btn-mammoth-icon {
        width: 25px;
        height: 25px;
        margin-left: 5px;
    }
    
    .btn-mammoth-icon .icon2-mammoth {
        font-size: 1.6rem;
    }
    
    /* Network kill button mobile sizing */
    .btn-network-kill {
        width: 48px;
        height: 48px;
        margin-left: 5px;
    }
    
    .btn-network-kill i {
        font-size: 1.4rem;
    }
    
    /* Show new chat button in header on mobile */
    .btn-new-chat-header {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide floating new chat button on mobile */
    .new-chat-floating {
        display: none !important;
    }
    
    .btn-profile {
        width: 50px;
        height: 50px;
    }
    
    .profile-avatar {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
        font-size: 1rem;
    }
    
    .logo-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    .aurion-logo {
        width: 50px;
        height: 50px;
    }
    
    /* WHY: Messages container is now a CHILD of .chat-center-container */
    #messagesContainer {
        position: relative !important;
        padding: 15px !important;
        min-height: 100% !important;
        overflow-x: hidden !important; /* WHY: Prevent horizontal scrolling */
        /* WHY: Parent .chat-center-container handles positioning and scrolling */
    }
    
    .message-content-wrapper {
        max-width: 90%;
        min-width: 90%;
    }
    
    /* Message bubble text padding - reduced on mobile */
    .message-bubble {
        padding: 10px 0px;
    }
    
    /* WHY: Input area is now a CHILD of .chat-bottom-bar, not fixed itself */
    .input-area {
        position: relative !important;
        padding: 5px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* WHY: No positioning, background, or z-index - parent handles that */
    }
    
    .input-wrapper {
        position: relative !important;
        display: flex !important;
        /* WHY: Lock emoji/send buttons to bottom when textarea expands */
        align-items: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        flex: 1 !important;
    }
    
    .message-input {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* WHY: Allow flex to shrink below content width */
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 38px !important;
        /* WHY: Remove height override - let JavaScript control it for auto-expansion */
        border-radius: 25px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }
    
    /* WHY: Font size overrides at 768px breakpoint */
    .font-size-xs .message-input.form-control {
        font-size: 14px;
        padding: 11px 12px;
        line-height: 1.1;
    }
    
    .font-size-sm .message-input.form-control {
        font-size: 15px;
        padding: 10px 12px;
        line-height: 1.15;
    }
    
    .font-size-md .message-input.form-control {
        font-size: 16px;
        padding: 10px 12px;
        line-height: 1.2;
    }
    
    .font-size-lg .message-input.form-control {
        font-size: 17px;
        padding: 9px 12px;
        line-height: 1.25;
    }
    
    .font-size-xl .message-input.form-control {
        font-size: 18px;
        padding: 8px 12px;
        line-height: 1.1;
    }
    
    /* WHY: Override desktop placeholder sizes - ALL 14px on mobile @768px */
    .font-size-xs .message-input.form-control::placeholder,
    .font-size-sm .message-input.form-control::placeholder,
    .font-size-md .message-input.form-control::placeholder,
    .font-size-lg .message-input.form-control::placeholder,
    .font-size-xl .message-input.form-control::placeholder {
        font-size: 14px !important;
    }
    
    .message-input::placeholder {
        padding-left: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
    }
    
    .custom-placeholder {
        /* WHY: Match actual text start position */
        left: 63px !important;
        /* WHY: Align with typed text */
        top: 20px !important;
        font-size: 14px !important;
        max-width: calc(100% - 107px);
    }
    
    /* Smaller emoji button on mobile */
    .btn-emoji {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    
    .btn-send {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        display: flex !important; /* WHY: Ensure flexbox for perfect centering */
        align-items: center !important;
        justify-content: center !important;
    }
    
    .btn-send i {
        line-height: 1 !important; /* WHY: Remove line-height offset on mobile */
    }
    
    /* WHY: Thinner spinning arc on mobile - 5px is too thick on small 40px button */
    .btn-send.btn-stop::after {
        border-width: 2px !important;
    }
    
    /* Smaller emoji picker on mobile */
    emoji-picker {
        width: 350px !important;
        max-height: 400px;
        font-size: 100% !important;
        transform: scale(1) !important;
        --emoji-size: 1.6rem !important;
        --category-emoji-size: 1.3rem !important;
        --emoji-padding: 0.35rem !important;
    }
    
    .emoji-picker-container {
        left: 10px;
        bottom: 60px;
    }
    
    .message.user .message-bubble {
	margin-left: 45px;
    }

    /* Optimized font sizes for all 5 settings on mobile - WHY: Better readability on small screens */
    .font-size-xs .message-bubble {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }
    
    .font-size-sm .message-bubble {
        font-size: 0.95rem !important;
        line-height: 1.55;
    }
    
    .font-size-md .message-bubble {
        font-size: 1.05rem !important;
        line-height: 1.6;
    }
    
    .font-size-lg .message-bubble {
        font-size: 1.15rem !important;
        line-height: 1.6;
    }
    
    .font-size-xl .message-bubble {
        font-size: 1.3rem !important;
        line-height: 1.65;
    }
    
    /* Sidebar full width on mobile */
    .sidebar {
        width: 85%;
        max-width: 320px;
        z-index: 100020; /* WHY: Above both bars (100010, 100005) but below modals (100025) */
    }
    
    .sidebar.open ~ #chatContainer {
        margin-left: 0;
        width: 100%;
    }
    
    /* Hide pin button in sidebar on mobile */
    .btn-pin-sidebar {
        display: none !important;
    }
    
    /* Smaller avatars on mobile */
    .message-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;	    
    }
    
    /* Simple margin on avatar only */
    .message.ai .message-avatar,
    .message.assistant .message-avatar {
        margin-left: 15px;
        margin-right: 10px;
    }
    
    .message.ai,
    .message.assistant {
        align-items: flex-start;
    }
    
    .message-sender {
        font-size: 1.2rem;
        margin-top: 0;
        margin-bottom: 4px;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        gap: 5px;	   
        margin-left: 0px;
    }
    
    /* Override negative margin on AI message bubble for mobile */
    .message.assistant .message-bubble,
    .message.ai .message-bubble {
        margin-top: 8px;
        margin-left: -40px;
    }
    
    .version-badge {
        font-size: 0.8rem !important;
        padding: 0px 7px !important;
        line-height: 23px !important;
        top: 1px;
        left: 3px;
    }
    
    .error-code-badge {
        font-size: 0.8rem !important;
        padding: 0px 7px !important;
        line-height: 23px !important;
        top: 1px;
        left: 3px;
    }
    
    /* Hide user sender name on mobile to save space */
    .message.user .message-sender {
        display: none;
    }
    
    /* Extra padding above first user message */
    .message.user:first-of-type {
        padding-top: 20px;
    }
    
    /* User message actions on mobile */
    .user-action-btn {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }
    
    .retry-btn {
        font-size: 1.5rem;
    }
    
    .retry-btn i {
        top: 0px;
        font-size: 1.3rem;
    }
    
    /* Show dark mode toggle on mobile */
    .dark-mode-toggle-mobile {
        display: flex;
    }
    
    /* WHY: On mobile, make row flex to position circles left and toggle right */
    .theme-and-dark-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* WHY: Align theme circles and font sizes to left on mobile when dark mode toggle is visible */
    .theme-selector-compact {
        justify-content: flex-start;
    }
     
    
    .dark-mode-icon {
        display: block !important;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .dark-mode-switch:hover .dark-mode-icon {
        transform: scale(1.15);
        opacity: 0.8;
    }
    
    /* WHY: Icon state shows theme is active */
    :root[data-theme="dark"] .dark-mode-icon {
        color: #ffffff;
    }
    
    .dark-mode-label {
        display: none;
    }
    
    .dark-mode-switch {
        padding: 0;
        background: transparent;
    }
    
    .dark-mode-switch:hover {
        background: transparent;
        transform: none;
    }
    
    /* WHY: Show different icon state when dark mode is active */
    .dark-mode-checkbox:checked ~ .dark-mode-icon {
        opacity: 1;
    }
    
    /* Disable all tooltips on mobile EXCEPT personality sliders */
    .tooltip,
    [data-toggle="tooltip"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Position dropdown higher on mobile */
    .profile-dropdown-menu {
        top: 60px;
        right: 10px;
    }
    
    /* Welcome message on mobile */
    .welcome-message {
        left: 15px;
        right: 15px;
        top: calc(50% + 5px); /* WHY: Center in visible area (accounting for header) */
        transform: translateY(-50%);
    }
    
    .welcome-text {
        font-size: 2rem;
        line-height: 2.3rem;
    }
    
    /* Scroll to bottom button */
    .scroll-to-bottom-btn {
        position: fixed; /* WHY: Fixed to viewport on mobile */
        bottom: 85px; /* WHY: Above fixed input area with visible margin */
        bottom: calc(85px + env(safe-area-inset-bottom));
        width: 48px;
        height: 48px;
        z-index: 100003; /* WHY: Scroll button - above content, below bars */
    }
    

    
    /* Hide floating sidebar toggle on mobile - use in-header toggle instead */
    .sidebar-toggle {
        display: block !important;
        position: static !important;
        width: 42px;
        height: 42px;
        margin-right: 8px;
        font-size: 1.1rem;
        opacity: 1;
        pointer-events: auto;
        transition: none;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    
    .sidebar-toggle.hidden {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .chat-header .d-flex {
        display: flex !important;
        align-items: center;
    }
    
    /* Move toggle into header */
    .chat-header {
        display: flex;
        align-items: center;
    }
    
    .new-chat-floating {
        width: 46px;
        height: 46px;
        left: 10px;
        font-size: 1.2rem;
    }
}

/* ========================================
   iOS-SPECIFIC OVERRIDES - 768px
   WHY: Must come BEFORE 480px breakpoint
   ======================================== */
@media (max-width: 768px) {
    /* WHY: Fix viewport on newer iPhones */
    .ios-device html,
    .ios-device body {
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    .ios-device #chatContainer {
        height: 100vh !important;
    }
    
    .ios-device .chat-container {
        height: 100vh !important;
    }
    
    /* WHY: Default for iPhone 17 and older - works with env() returning actual value */
    .ios-device .chat-header {
        position: fixed !important;
        top: 0 !important;
        padding-top: env(safe-area-inset-top, 10px) !important;
        height: auto !important;
        z-index: 100010 !important; /* WHY: Below sidebar (100020) and modals (100025) */
    }
    
    .ios-device #messagesContainer {
        top: 0 !important;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 15px !important;
        padding-top: calc(70px + env(safe-area-inset-top, 10px)) !important;
        padding-bottom: 15px !important;
    }
    
    .ios-device .input-area {
        position: fixed !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 100005 !important; /* WHY: Below sidebar (100020) and modals (100025) */
    }
    
    .ios-device .scroll-to-bottom-btn {
        bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* WHY: iPhone 16 ALL models */
    .iphone-16.ios-device .chat-header,
    .iphone-16-plus.ios-device .chat-header,
    .iphone-16-pro.ios-device .chat-header,
    .iphone-16-pro-max.ios-device .chat-header {
        position: fixed !important;
        top: 0 !important;
        padding-top: env(safe-area-inset-top, 59px) !important;
        height: auto !important;
        z-index: 100010 !important; /* WHY: Below sidebar (100020) and modals (100025) */
    }
    
    .iphone-16.ios-device #messagesContainer,
    .iphone-16-plus.ios-device #messagesContainer,
    .iphone-16-pro.ios-device #messagesContainer,
    .iphone-16-pro-max.ios-device #messagesContainer {
        padding-top: calc(100px + env(safe-area-inset-top, 59px)) !important;
    }
    
    /* WHY: iPhone 17 ALL models */
    .iphone-17-pro.ios-device .input-area,
    .iphone-17-pro-max.ios-device .input-area {
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .iphone-17-pro.ios-device #messagesContainer,
    .iphone-17-pro-max.ios-device #messagesContainer {
        bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .iphone-17-pro.ios-device .scroll-to-bottom-btn,
    .iphone-17-pro-max.ios-device .scroll-to-bottom-btn {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* WHY: iOS z-index fixes - ensure modals/sidebar stay above bars */
    .ios-device .sidebar.open ~ .chat-container .chat-header,
    .ios-device .sidebar.open ~ #chatContainer .chat-header {
        z-index: 100010 !important; /* WHY: Keep header below sidebar */
    }
    
    .ios-device.modal-open .chat-header,
    .ios-device body.modal-open .chat-header {
        z-index: 100010 !important; /* WHY: Keep header below modals */
    }
    
    .ios-device.modal-open .input-area,
    .ios-device body.modal-open .input-area {
        display: none !important;
    }
    
    .ios-device.modal-open .scroll-to-bottom-btn,
    .ios-device body.modal-open .scroll-to-bottom-btn {
        display: none !important;
    }
    
    /* WHY: Fix sidebar height on iOS */
    .ios-device .sidebar {
        height: 100vh !important;
        height: 100svh !important;
    }
}

/* Extra small mobile devices - 480px */
@media (max-width: 480px) {
    
    #messagesContainer {
        padding: 0px;
        padding-bottom: 100px;
    }
    
	.chat-header {
        padding: 6px 8px;
        min-height: 48px;	   
        padding-bottom: 45px;
    }
    
    .chat-header h1 {
        font-size: 1.1rem;
    }
    

    .sidebar {
		min-width: 100%;
    }
    
    /* Show new chat button in header on mobile */
    .btn-new-chat-header {
        display: flex !important;
        width: 40px;
        height: 40px;	   
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    
    /* Hide floating new chat button on mobile */
    .new-chat-floating {
        display: none !important;
    }
    
    .btn-theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .btn-profile {
        width: 40px;
        height: 40px;
    }
    
    .profile-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        font-size: 0.9rem;
    }
    
    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .message-bubble {
        padding: 8px 0px;
    }
    
    .input-area {
        padding: 6px 8px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        gap: 3px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }
    
    .input-wrapper {
        padding: 6px 0px 3px 0px;
        min-height: 38px;
	   gap: 8px;
        /* WHY: Already inherits align-items: flex-end from 768px rule - buttons stay at bottom */
    }
    
    .message-input {
        font-size: 15px;
        padding: 12px 14px;
        min-height: 40px !important;
        /* WHY: Remove height override - let JavaScript control it for auto-expansion */
        border-radius: 25px;
        line-height: 0.9 !important;
        box-sizing: border-box;
    }

    
    /* WHY: Size-specific vertical centering on mobile for each text size */
    .font-size-xs .message-input.form-control {
        font-size: 14px;
        padding: 13px 14px;
        line-height: 1.1;
    }
    
    .font-size-sm .message-input.form-control {
        font-size: 16px;
        padding: 12px 14px;
        line-height: 1.15;
    }
    
    .font-size-md .message-input.form-control {
        font-size: 17px;
        padding: 12px 14px;
        line-height: 1.1;
    }
    
    .font-size-lg .message-input.form-control {
        font-size: 18px;
        padding: 10px 14px;
        line-height: 1.25;
    }
    
    .font-size-xl .message-input.form-control {
        font-size: 20px;
        padding: 9px 14px;
        line-height: 1.1;
    }
    
    /* WHY: ONE size for ALL placeholders on mobile @480px */
    .message-input.form-control::placeholder {
        font-size: 14px !important;
    }
    
    .message-input::placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
    }
    
    .custom-placeholder {
        /* WHY: Match actual text start position */
        left: 63px !important;
        /* WHY: Align with typed text */
        top: 18px !important;
        font-size: 14px !important;
        max-width: calc(100% - 109px);
    }
    
    .btn-emoji {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .btn-send {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    emoji-picker {
        width: 350px !important;
        max-height: 400px;
        font-size: 100% !important;
        transform: scale(1) !important;
        --emoji-size: 1.5rem !important;
        --category-emoji-size: 1.2rem !important;
        --emoji-padding: 0.3rem !important;
    }
    
    .emoji-picker-container {
        left: 8px;
        bottom: 56px;
    }
    
    /* WHY: Full width emoji picker on very small screens with reduced columns */
    emoji-picker {
        width: 100% !important;
        --num-columns: 7;
        --category-emoji-size: 1.125rem;
    }
    
    .emoji-picker-container {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0 8px;
        box-sizing: border-box;
    }
    
    .aurion-logo {
        width: 40px;
        height: 40px;
        margin-right: 10px;	   
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    .chat-header-inner {
	padding-top: 5px!important;
    }
    
    .sidebar-toggle {
        display: block !important;
        position: static !important;
        width: 40px;
        height: 40px;
        margin-right: 2px;
        margin-left: -6px;
        font-size: 1rem;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .sidebar-toggle.hidden {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Hide pin button in sidebar on mobile */
    .btn-pin-sidebar {
        display: none !important;
    }
    
    .new-chat-floating {
        width: 42px;
        height: 42px;
        left: 8px;
        font-size: 1.1rem;
    }
    
    /* Message avatar adjustments for extra small mobile */
    .message.ai .message-avatar t {
        margin-left: 15px;
        margin-right: 10px;
    }
 
    .message.assistant .message-avatar {
        margin-left: 15px;
        margin-right: 10px;
    }
    
    .message.ai,
    .message.assistant {
        align-items: flex-start;
    }
    
    .message-sender {
        margin-top: 0;
        padding-bottom: 0;
        gap: 5px;	   
        margin-left: -5px;
    }
    
    /* Override negative margin on AI message bubble */
    .message.assistant .message-bubble,
    .message.ai .message-bubble {
        margin-top: -10px;
        /* margin-left: -35px; */
    }
    
    .welcome-text {
        font-size: 1.6rem;
        line-height: 2rem;
    }
    
    /* Disable all tooltips on mobile EXCEPT personality sliders */
    .tooltip,
    [data-toggle="tooltip"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Position dropdown higher on extra small mobile */
    .profile-dropdown-menu {
        top: 75px;
        right: 0px;
        min-width: 100%;
    }
    
    /* Show dark mode icon on extra small mobile */
    .dark-mode-icon {
        display: block !important;
    }
    
    :root[data-theme="dark"] .dark-mode-icon {
        color: #ffffff;
    }
    
    .dark-mode-label {
        display: none;
    }
}

/* WHY: iOS-specific 480px overrides */
@media (max-width: 480px) {
    .ios-device #messagesContainer {
        padding: 8px !important;
        padding-top: calc(64px + env(safe-area-inset-top, 10px)) !important;
        padding-bottom: 8px !important;
    }
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    /* WHY: Use transform instead of position offsets - same visual result, no scrollbar */
    transform: translate(-20px, 20px);
    align-items: center;
    min-height: 32px; /* Contain the bouncing animation height */
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* WHY: Use theme gradient colors instead of gray for better visual cohesion */
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    animation: typingBounce 1.4s infinite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ========================================
   ONBOARDING MODAL STYLES
   ======================================== */

/* Blurred backdrop for onboarding/personalize modal */
#onboardingModal ~ .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100024; /* WHY: Below modal (100025) but above everything else */
}

.modal-backdrop {
    z-index: 100024 !important; /* WHY: Below modal (100025) but above sidebar (100020) and bars */
}

[data-theme="dark"] #onboardingModal ~ .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.3);
}

/* WHY: Hide desktop content when onboarding is active or before onboarding */
body.onboarding-active .desktop-content,
body.pre-onboarding .desktop-content {
    display: none !important;
}

/* WHY: Hide mobile chat UI when onboarding is active or before onboarding (<768px)
 * On mobile, elements are not wrapped in .desktop-content, so we target them directly */
@media (max-width: 767px) {
    body.onboarding-active .chat-header,
    body.onboarding-active .chat-center-container,
    body.onboarding-active .chat-bottom-bar,
    body.onboarding-active .sidebar,
    body.onboarding-active .sidebar-toggle,
    body.onboarding-active .new-chat-floating,
    body.pre-onboarding .chat-header,
    body.pre-onboarding .chat-center-container,
    body.pre-onboarding .chat-bottom-bar,
    body.pre-onboarding .sidebar,
    body.pre-onboarding .sidebar-toggle,
    body.pre-onboarding .new-chat-floating {
        display: none !important;
    }
    
    /* WHY: Apply clean background during onboarding on mobile */
    body.onboarding-active,
    body.pre-onboarding {
        background: radial-gradient(900px 480px at 50% -10%, rgba(178, 75, 243, .18), rgba(178, 75, 243, 0) 60%), 
                    radial-gradient(1200px 680px at -10% 20%, rgba(138, 92, 255, .22), rgba(138, 92, 255, 0) 60%), 
                    linear-gradient(180deg, #0b0f1d 0%, #050a13 100%) !important;
    }
}

/* WHY: Apply welcome page background during onboarding on desktop (>=768px) */
@media (min-width: 768px) {
    body.onboarding-active {
        background: radial-gradient(900px 480px at 50% -10%, rgba(178, 75, 243, .18), rgba(178, 75, 243, 0) 60%), 
                    radial-gradient(1200px 680px at -10% 20%, rgba(138, 92, 255, .22), rgba(138, 92, 255, 0) 60%), 
                    linear-gradient(180deg, #0b0f1d 0%, #050a13 100%) !important;
    }
}

.onboarding-modal-dialog {
    max-width: 780px;
}

.onboarding-modal-content {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--modal-bg) 97%, var(--theme-primary)),
        var(--modal-bg));
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 15%, var(--border-color));
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 8%, transparent) inset;
    overflow: hidden;
    /* WHY: Flex container for sticky footer support */
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* WHY: Prevent header from shrinking in flex layout */
.onboarding-modal-content .modal-header {
    flex-shrink: 0;
}

.onboarding-progress {
    height: 8px;
    background: linear-gradient(90deg, 
        color-mix(in srgb, var(--theme-primary) 8%, var(--border-color)),
        var(--border-color));
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
    /* WHY: Prevent progress bar from shrinking in flex layout */
    flex-shrink: 0;
}

.onboarding-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), var(--theme-primary));
    background-size: 200% 100%;
    width: 25%;
    transition: width 0.4s ease;
    animation: shimmerProgress 6s ease-in-out infinite;
}

@keyframes shimmerProgress {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* WHY: Purple theme keeps gradient, others use bright solid color */
.onboarding-title {
    font-size: 2.34rem;
    font-weight: 700;
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: auto;
}

/* WHY: Icon also uses gradient for purple theme */
.onboarding-title i {
    display: inline-block;
    margin-right: 14px;
    font-size: 2rem;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* WHY: Non-purple dark themes use bright accent color for visibility */
[data-aurion-theme="ocean"][data-theme="dark"] .onboarding-title,
[data-aurion-theme="ocean"][data-theme="dark"] .onboarding-title i {
    color: #00bfff !important;
    -webkit-text-fill-color: #00bfff !important;
}

[data-aurion-theme="sunset"][data-theme="dark"] .onboarding-title,
[data-aurion-theme="sunset"][data-theme="dark"] .onboarding-title i {
    color: #ff8c42 !important;
    -webkit-text-fill-color: #ff8c42 !important;
}

[data-aurion-theme="forest"][data-theme="dark"] .onboarding-title,
[data-aurion-theme="forest"][data-theme="dark"] .onboarding-title i {
    color: #52b788 !important;
    -webkit-text-fill-color: #52b788 !important;
}

[data-aurion-theme="rose"][data-theme="dark"] .onboarding-title,
[data-aurion-theme="rose"][data-theme="dark"] .onboarding-title i {
    color: #e85d75 !important;
    -webkit-text-fill-color: #e85d75 !important;
}

@media (max-width: 480px) {
    .onboarding-title {
        font-size: 1.6rem;
    }
    
    .onboarding-title i {
        margin-right: 10px;
        font-size: 1.4rem;
    }
}

/* WHY: Close button styling for onboarding modal - visible in light/dark modes */
.onboarding-close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.onboarding-close-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* WHY: Ensure close button is visible in dark mode */
[data-theme="dark"] .onboarding-close-btn {
    filter: invert(1);
}

.onboarding-body {
    padding: 26px 39px;
    /* WHY: Remove fixed heights, let content and flex determine size */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* WHY: Prevent body from shrinking when footer is sticky */
    min-height: 0;
}

/* WHY: Modern themed scrollbar matching personalize modal */
.onboarding-body::-webkit-scrollbar {
    width: 8px;
}

.onboarding-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.onboarding-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
    border: none;
}

.onboarding-body::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}

.onboarding-body::-webkit-scrollbar-button {
    display: none !important;
}

/* WHY: Visual scroll indicator for all devices - shows fade + chevron at bottom when content is scrollable */
/* Applies to: onboarding modal, settings/personalize modal, and policy update modals */
.onboarding-modal-content,
.settings-modal-content,
.policy-modal-content {
    position: relative;
}

/* WHY: Policy modal has no sticky footer, so indicator at very bottom */
.policy-modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--modal-bg) 50%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 24px 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}



/* WHY: Settings always has sticky footer ~70px, position indicator above it */
.settings-modal-content::after {
    content: '';
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--modal-bg) 50%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

@media (max-width: 768px) {
	.settings-modal-content::after {
	bottom: 75px;
	}
}

/* WHY: Onboarding without sticky footer - indicator at bottom */
.onboarding-modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--modal-bg) 50%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 24px 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* WHY: Onboarding WITH sticky footer - position indicator above it */
.onboarding-modal-content.has-sticky-footer::after {
    bottom: 110px;
    border-radius: 0;
}

.onboarding-modal-content.has-scroll::after,
.settings-modal-content.has-scroll::after,
.policy-modal-content.has-scroll::after {
    opacity: 1;
}

/* WHY: Bouncing chevron indicator - theme color in light mode, white in dark mode */
.modal-scroll-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    color: var(--theme-primary);
    font-size: 1.2rem;
    animation: scrollBounce 1.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .modal-scroll-indicator {
    color: white;
}

/* WHY: Settings always has sticky footer, position chevron above it */
.settings-modal-content .modal-scroll-indicator {
    bottom: 82px;
}

/* WHY: >768px settings has 250px sidebar, center chevron in right content area only (offset by half sidebar width) */
@media (min-width: 769px) {
    .settings-modal-content .modal-scroll-indicator {
        left: calc(50% + 125px);
    }
}

/* WHY: Onboarding WITH sticky footer - position chevron above it */
.onboarding-modal-content.has-sticky-footer .modal-scroll-indicator {
    bottom: 115px;
}

.onboarding-modal-content.has-scroll .modal-scroll-indicator,
.settings-modal-content.has-scroll .modal-scroll-indicator,
.policy-modal-content.has-scroll .modal-scroll-indicator {
    opacity: 0.8;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 768px) {
    /* WHY: Full height modal on mobile */
    .onboarding-modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 100vh;
        height: 100dvh;
    }
    
    .onboarding-modal-content {
        border-radius: 0;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        /* WHY: Fully opaque on mobile - iOS backdrop-filter + transparency = see-through */
        background: #ffffff !important;
    }
    
    /* WHY: Dark mode needs full opacity too */
    [data-theme="dark"] .onboarding-modal-content {
        background: #141414 !important;
    }
    
    .modal-header {
        flex-shrink: 0; /* WHY: Don't shrink header */
        padding-top: max(16px, env(safe-area-inset-top)); /* WHY: Safe area for iOS */
    }
    
    .onboarding-body {
        padding: 20px 24px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    .onboarding-footer {
        flex-shrink: 0; /* WHY: Don't shrink footer */
        padding: 20px 24px; /* WHY: Match body padding */
        padding-bottom: max(20px, env(safe-area-inset-bottom)); /* WHY: Safe area for iOS */
    }
    
    /* WHY: Sticky footer on mobile too */
    .onboarding-footer.sticky {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        border-top: 1px solid color-mix(in srgb, var(--theme-primary) 8%, var(--border-color));
    }
    
    /* WHY: Dark mode sticky footer on mobile */
    [data-theme="dark"] .onboarding-footer.sticky {
        background: #141414;
        border-top-color: color-mix(in srgb, var(--theme-primary) 12%, rgba(255, 255, 255, 0.1));
    }
}

@media (max-width: 480px) {
    .onboarding-body {
        padding: 18px 20px; /* WHY: Just adjust padding, keep full height from 768px rule */
    }
    
    .onboarding-footer {
        padding: 18px 20px; /* WHY: Match body padding */
        padding-bottom: max(18px, env(safe-area-inset-bottom)); /* WHY: Safe area for iOS */
    }
}

.onboarding-step {
    display: none;
    animation: fadeInStep 0.4s ease;
}

.onboarding-step.active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.onboarding-label {
    font-size: 1.7rem!important;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 35px; 
    text-align: center;
}

@media (max-width: 480px) {
    .onboarding-label {
        font-size: 1.5rem!important;
        margin-bottom: 25px;
    }
}

.onboarding-sublabel {
    font-size: 1.17rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 480px) {
    .onboarding-sublabel {
        font-size: 1.05rem;
        margin-bottom: 15px;
    }
}

.optional {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 400;
}

.onboarding-input {
    font-size: 1.43rem;
    padding: 18px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary) 2%, var(--input-bg)),
        var(--input-bg));
    border: 2px solid color-mix(in srgb, var(--theme-primary) 12%, var(--border-color));
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-input:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 25%, var(--border-color));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.onboarding-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary) 5%, var(--input-bg)),
        color-mix(in srgb, var(--theme-secondary) 2%, var(--input-bg)));
    box-shadow: 
        0 0 0 4px color-mix(in srgb, var(--theme-primary) 20%, transparent),
        0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.onboarding-input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.35;
}

.invite-code-help {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 1.3rem;
    color: var(--text-secondary);
    text-align: center;
}

.invite-code-help a {
    color: var(--theme-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.invite-code-help a:hover {
    color: var(--theme-primary-hover);
    text-decoration: underline;
}

.onboarding-textarea {
    font-size: 1.2rem;
    padding: 18px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary) 2%, var(--input-bg)),
        var(--input-bg));
    border: 2px solid color-mix(in srgb, var(--theme-primary) 12%, var(--border-color));
    color: var(--text-primary);
    resize: vertical;
    min-height: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-textarea:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 25%, var(--border-color));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.onboarding-textarea:focus {
    outline: none;
    border-color: var(--theme-primary);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary) 5%, var(--input-bg)),
        color-mix(in srgb, var(--theme-secondary) 2%, var(--input-bg)));
    box-shadow: 
        0 0 0 4px color-mix(in srgb, var(--theme-primary) 20%, transparent),
        0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.onboarding-textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 0.35;
}

/* WHY: Modern themed scrollbar for textarea matching personalize modal */
.onboarding-textarea::-webkit-scrollbar {
    width: 8px;
}

.onboarding-textarea::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.onboarding-textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
    border: none;
}

.onboarding-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}

.onboarding-textarea::-webkit-scrollbar-button {
    display: none !important;
}

/* Character count styling */
.char-count {
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* WHY: Turn red when character limit is reached */
.char-count.at-limit {
    color: #dc3545;
    font-weight: 600;
}

.legacy-limit-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, 
        color-mix(in srgb, #f59e0b 8%, var(--input-bg)) 0%,
        color-mix(in srgb, #f59e0b 3%, var(--input-bg)) 100%);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border-color));
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    box-shadow: 
        0 2px 8px rgba(245, 158, 11, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

.legacy-limit-warning i {
    font-size: 1.2rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.legacy-limit-warning span {
    flex: 1;
}

@media (max-width: 768px) {
    .legacy-limit-warning {
        font-size: 0.9rem;
        padding: 10px 14px;
        gap: 10px;
    }
}

/* Final Onboarding Step Styling */
.final-step-icon {
    font-size: 5rem;
    text-align: center;
    margin-bottom: 25px;
    animation: bounceIn 0.8s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* WHY: Subtitle uses gradient for purple, lighter color for other themes */
.modal-body .final-step-title {
    font-size: 1.7rem;
    text-align: center; 
    margin-bottom: 35px;
    display: inline-block;
    width: 100%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* WHY: Non-purple dark themes use bright accent color for subtitle */
[data-aurion-theme="ocean"][data-theme="dark"] .modal-body .final-step-title {
    background: none;
    -webkit-text-fill-color: #00bfff;
    color: #00bfff;
}

[data-aurion-theme="sunset"][data-theme="dark"] .modal-body .final-step-title {
    background: none;
    -webkit-text-fill-color: #ff8c42;
    color: #ff8c42;
}

[data-aurion-theme="forest"][data-theme="dark"] .modal-body .final-step-title {
    background: none;
    -webkit-text-fill-color: #52b788;
    color: #52b788;
}

[data-aurion-theme="rose"][data-theme="dark"] .modal-body .final-step-title {
    background: none;
    -webkit-text-fill-color: #e85d75;
    color: #e85d75;
}

.final-step-list {
    list-style: none;
    padding: 0;
    margin: 0 auto; 
}

.final-step-list li {
    font-size: 1.35rem;
    color: var(--text-primary) !important;
    padding: 22px 26px;
    padding-left: 62px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 8%, var(--input-bg)) 0%,
        color-mix(in srgb, var(--theme-secondary) 3%, var(--input-bg)) 100%);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, var(--border-color));
    border-radius: 10px;
    display: block !important;
    position: relative;
    line-height: 1.75;
    box-shadow: 
        0 3px 14px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 12%, transparent) inset;
    cursor: default;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* WHY: Force GPU rendering on iOS Safari to ensure borders paint properly */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.final-step-list li:hover {
    transform: translateX(2px) !important;
    box-shadow: 
        0 4px 18px rgba(0, 0, 0, 0.14),
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 18%, transparent) inset;
}

/* WHY: Removed slide-in animation per user request - points should appear immediately without animation */
.final-step-list.animating li {
    opacity: 1;
    transform: translateX(0);
}

/* WHY: Bullet icons use gradient for purple, lighter color for other themes */
.final-step-list li:before {
    content: '\\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 22px;
    top: 20px;
    font-size: 1.4rem;
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* WHY: Non-purple dark themes use bright accent color for bullet icons */
[data-aurion-theme="ocean"][data-theme="dark"] .final-step-list li:before {
    background: none;
    -webkit-text-fill-color: #00bfff;
    color: #00bfff;
}

[data-aurion-theme="sunset"][data-theme="dark"] .final-step-list li:before {
    background: none;
    -webkit-text-fill-color: #ff8c42;
    color: #ff8c42;
}

[data-aurion-theme="forest"][data-theme="dark"] .final-step-list li:before {
    background: none;
    -webkit-text-fill-color: #52b788;
    color: #52b788;
}

[data-aurion-theme="rose"][data-theme="dark"] .final-step-list li:before {
    background: none;
    -webkit-text-fill-color: #e85d75;
    color: #e85d75;
}

/* WHY: Removed hover effect - these are informational blocks, not interactive elements */

@media (max-width: 768px) {
    .final-step-list {
        max-width: 100%;
    }
    
    .final-step-list li {
        font-size: 1.2rem;
        padding: 16px 20px;
        padding-left: 52px;
    }
    
    .final-step-list li:before {
        left: 18px;
        top: 16px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .final-step-list li {
        font-size: 1.1rem;
        line-height: 1.7;
        padding: 14px 16px;
        padding-left: 48px;
        margin-bottom: 10px;
    }
    
    .final-step-list li:before {
        left: 16px;
        top: 14px;
        font-size: 1.2rem;
    }
}

/* Creativity Tips List (Step 6) */
.creativity-tips-list {
    max-width: 600px;
}

 

.creativity-tips-list li:before {
    content: '\f0eb';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 1.4rem;
    color: var(--theme-primary);
}

/* WHY: Privacy step uses shield icon matching step title */
#privacyStepList li:before {
    content: '\f3ed';
}

/* WHY: TOS step uses file-contract icon matching step title */
#tosStepList li:before {
    content: '\f56c';
}

/* WHY: Final step uses rocket icon matching step title */
#finalStepList li:before {
    content: '\f135';
}

@media (max-width: 768px) {
    .creativity-tips-list li {
        font-size: 1.15rem;
        padding: 14px 16px;
        padding-left: 52px;
    }
    
    .creativity-tips-list li:before {
        left: 18px;
        top: 16px;
        font-size: 1.2rem;
    }
    
    .final-step-title {
	font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    .creativity-tips-list li {
        font-size: 1.1rem;
        line-height: 1.7;
        padding: 14px 16px;
        padding-left: 48px;
        margin-bottom: 10px;
    }
    
    .creativity-tips-list li:before {
        left: 16px;
        top: 14px;
        font-size: 1.2rem;
    }
}

/* Avatar Upload */
.onboarding-avatar-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.onboarding-avatar {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 30%, transparent);
    background-size: cover;
    background-position: center;
}

.onboarding-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.onboarding-avatar-edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.onboarding-avatar-edit:hover {
    transform: scale(1.1);
    background: var(--theme-primary);
    color: white;
}

/* Theme Selection */
.onboarding-themes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .onboarding-themes {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .onboarding-themes {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
}

@media (max-width: 768px) {
    .theme-circle {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .theme-circle {
        width: 60px;
        height: 60px;
    }
}

.theme-option:hover .theme-circle {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.theme-option.active .theme-circle {
	border-color: transparent;
	transform: scale(1.2);
	box-shadow: 0 0 0 5px var(--theme-primary), 0 8px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
    .theme-option.active .theme-circle {
        box-shadow: 0 0 0 3px var(--theme-primary), 0 8px 24px rgba(0, 0, 0, 0.25);
    }
}

.theme-option span {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    .theme-option span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .theme-option span {
        font-size: 0.95rem;
    }
}

.theme-option.active span {
    color: var(--text-primary);
    font-weight: 600;
}

/* Theme Colors */
.theme-option[data-theme="default"] .theme-circle {
    background: linear-gradient(135deg, #8a2be2, #ba55d3);
}

.theme-option[data-theme="ocean"] .theme-circle {
    background: linear-gradient(135deg, #0077be, #00bfff);
}

.theme-option[data-theme="sunset"] .theme-circle {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
}

.theme-option[data-theme="forest"] .theme-circle {
    background: linear-gradient(135deg, #2d6a4f, #52b788);
}

.theme-option[data-theme="rose"] .theme-circle {
    background: linear-gradient(135deg, #d8345f, #e85d75);
}

/* Dark Mode Toggle in Onboarding */
.onboarding-dark-toggle {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: var(--input-bg);
    border-radius: 16px;
    border: 2px solid var(--border-color);
    margin-bottom: 50px;
}

@media (max-width: 480px) {
    .onboarding-dark-toggle {
        padding: 16px;
    }
}

.onboarding-dark-toggle label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .onboarding-dark-toggle label {
        font-size: 1.3rem;
        gap: 10px;
    }
}

.onboarding-dark-toggle input[type="checkbox"] {
    width: 50px;
    height: 26px;
    appearance: none;
    background: var(--border-color);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.onboarding-dark-toggle input[type="checkbox"]:checked {
    background: var(--theme-primary);
}

.onboarding-dark-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.onboarding-dark-toggle input[type="checkbox"]:checked::before {
    left: 26px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer Buttons */
.onboarding-footer {
    padding: 26px 39px 39px;
    display: flex;
    gap: 16px;
    align-items: stretch; /* WHY: Ensure buttons have equal height */
    /* WHY: Flex prevents shrinking */
    flex-shrink: 0;
}

/* WHY: Sticky footer mode - buttons glued to bottom like personalize modal */
.onboarding-footer.sticky {
    position: sticky;
    bottom: 0;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--modal-bg) 97%, var(--theme-primary)),
        var(--modal-bg));
    border-top: 1px solid color-mix(in srgb, var(--theme-primary) 8%, var(--border-color));
    z-index: 10;
}

/* WHY: Dark mode sticky footer - ensure proper background */
[data-theme="dark"] .onboarding-footer.sticky {
    background: linear-gradient(135deg, 
        color-mix(in srgb, #141414 97%, var(--theme-primary)),
        #141414);
    border-top-color: color-mix(in srgb, var(--theme-primary) 12%, rgba(255, 255, 255, 0.1));
}

/* WHY: Hide sticky footer when inline buttons are shown (controlled by JS) */
.onboarding-footer.hidden {
    display: none !important;
}

/* WHY: Inline buttons at end of content for creativity and final steps */
.onboarding-inline-buttons {
    display: none; /* WHY: Hidden by default */
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--border-color);
}

/* WHY: Show inline buttons when parent step is active */
.onboarding-step[data-buttons-inline="true"].active .onboarding-inline-buttons {
    display: flex;
}

.modal-content .onboarding-btn {
    flex: 1 1 0%; /* WHY: Equal widths regardless of content length */
    min-width: 0; /* WHY: Allow shrinking below intrinsic content width */
    display: inline-flex; /* WHY: Consistent centering with icons/text */
    align-items: center;
    justify-content: center;
    gap: 8px; /* WHY: Space between icon and text */
    font-size: 1.43rem;
    padding: 18px;
    min-height: 58px; /* WHY: Force equal height across buttons */
    line-height: 1.1; /* WHY: Avoid line-height affecting overall height */
    white-space: nowrap; /* WHY: Keep label in one line to avoid height jumps */
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.onboarding-btn i {
    font-size: 1.25rem; /* WHY: Normalize icon size */
}

.onboarding-btn.btn-secondary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary) 3%, var(--input-bg)),
        var(--input-bg));
    border: 2px solid color-mix(in srgb, var(--theme-primary) 15%, var(--border-color));
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.onboarding-btn.btn-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    color: white;
    position: relative;
    overflow: hidden;
}

.onboarding-btn.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

/* WHY: Only apply hover effects on devices with real hover capability (mouse/trackpad) */
/* This prevents sticky hover/active states on touch devices (iOS/Android) */
@media (hover: hover) and (pointer: fine) {
    .onboarding-btn.btn-secondary:hover:not(:disabled) {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--border-color));
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--theme-primary) 6%, var(--input-bg)),
            var(--input-bg));
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
    
    .onboarding-btn.btn-primary:hover::before {
        left: 100%;
    }
    
    .onboarding-btn.btn-primary:hover:not(:disabled) {
        transform: translate3d(0, -3px, 0);
        box-shadow: 
            0 12px 32px color-mix(in srgb, var(--theme-primary) 50%, transparent),
            0 0 0 1px color-mix(in srgb, var(--theme-primary) 60%, transparent) inset;
        background: linear-gradient(135deg, 
            color-mix(in srgb, var(--theme-primary) 92%, white),
            color-mix(in srgb, var(--theme-secondary) 92%, white));
    }
    
    .onboarding-btn.btn-primary:active:not(:disabled) {
        transform: translate3d(0, -1px, 0);
    }
}

.onboarding-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

@media (max-width: 480px) {
    .onboarding-btn {
        font-size: 1.2rem;
        padding: 16px 12px;
        white-space: normal;
        word-wrap: break-word;
        min-height: 54px;
    }
    
    .onboarding-btn i {
        font-size: 1.1rem;
    }
    
    /* WHY: iOS-safe gradient - iPhone sometimes fails to render CSS var gradients */
    .onboarding-btn.btn-primary {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
        /* WHY: Solid fallback if gradient fails */
        background-color: var(--theme-primary);
        /* WHY: Force GPU rendering on iOS - multiple hints to ensure gradient paints immediately */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        will-change: transform;
    }
}

/* ========================================
   iOS SAFARI SPECIFIC FIXES
   WHY: iOS Safari has severe rendering issues with CSS var gradients
   Solution: Use hardcoded hex gradients like welcome buttons
   ======================================== */
@supports (-webkit-touch-callout: none) {
    /* WHY: iOS Safari fails to render CSS var gradients - use hardcoded hex per theme */
    /* Maximum specificity with #onboardingModal to override other rules */
    /* Purple (default) */
    html[data-aurion-theme="default"] .onboarding-btn.btn-primary,
    html[data-aurion-theme="default"] .modal-content .onboarding-btn.btn-primary {
        background-color: transparent !important;
        background: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        background-image: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 4px 16px rgba(138, 43, 226, 0.35) !important;
    }
    
    /* Ocean Blue */
    html[data-aurion-theme="ocean"] .onboarding-btn.btn-primary,
    html[data-aurion-theme="ocean"] .modal-content .onboarding-btn.btn-primary {
        background-color: transparent !important;
        background: linear-gradient(135deg, #0077be, #00bfff) !important;
        background-image: linear-gradient(135deg, #0077be, #00bfff) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 4px 16px rgba(0, 119, 190, 0.35) !important;
    }
    
    /* Sunset Fire */
    html[data-aurion-theme="sunset"] .onboarding-btn.btn-primary,
    html[data-aurion-theme="sunset"] .modal-content .onboarding-btn.btn-primary {
        background-color: transparent !important;
        background: linear-gradient(135deg, #ff6b35, #ff8c42) !important;
        background-image: linear-gradient(135deg, #ff6b35, #ff8c42) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35) !important;
    }
    
    /* Forest Green */
    html[data-aurion-theme="forest"] .onboarding-btn.btn-primary,
    html[data-aurion-theme="forest"] .modal-content .onboarding-btn.btn-primary {
        background-color: transparent !important;
        background: linear-gradient(135deg, #2d6a4f, #52b788) !important;
        background-image: linear-gradient(135deg, #2d6a4f, #52b788) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 4px 16px rgba(45, 106, 79, 0.35) !important;
    }
    
    /* Rose Pink */
    html[data-aurion-theme="rose"] .onboarding-btn.btn-primary,
    html[data-aurion-theme="rose"] .modal-content .onboarding-btn.btn-primary {
        background-color: transparent !important;
        background: linear-gradient(135deg, #d8345f, #e85d75) !important;
        background-image: linear-gradient(135deg, #d8345f, #e85d75) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: 0 4px 16px rgba(216, 52, 95, 0.35) !important;
    }
    
    /* WHY: iOS Safari - purple theme title uses gradient (max specificity) */
    html[data-aurion-theme="default"] .onboarding-title,
    html[data-aurion-theme="default"] .modal-content .onboarding-title,
    html[data-aurion-theme="default"][data-theme="dark"] .onboarding-title {
        display: inline-block !important;
        background-color: transparent !important;
        background: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        background-image: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
    }
    
    html[data-aurion-theme="default"] .onboarding-title i,
    html[data-aurion-theme="default"] .modal-content .onboarding-title i,
    html[data-aurion-theme="default"][data-theme="dark"] .onboarding-title i {
        display: inline-block !important;
        background-color: transparent !important;
        background: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        background-image: linear-gradient(135deg, #8a2be2, #91ffff) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
    }
    
    /* WHY: iOS Safari - non-purple dark themes use bright accent colors */
    html[data-aurion-theme="ocean"][data-theme="dark"] .onboarding-title,
    html[data-aurion-theme="ocean"][data-theme="dark"] .onboarding-title i {
        color: #00bfff !important;
        -webkit-text-fill-color: #00bfff !important;
        background: none !important;
        background-image: none !important;
    }
    
    html[data-aurion-theme="sunset"][data-theme="dark"] .onboarding-title,
    html[data-aurion-theme="sunset"][data-theme="dark"] .onboarding-title i {
        color: #ff8c42 !important;
        -webkit-text-fill-color: #ff8c42 !important;
        background: none !important;
        background-image: none !important;
    }
    
    html[data-aurion-theme="forest"][data-theme="dark"] .onboarding-title,
    html[data-aurion-theme="forest"][data-theme="dark"] .onboarding-title i {
        color: #52b788 !important;
        -webkit-text-fill-color: #52b788 !important;
        background: none !important;
        background-image: none !important;
    }
    
    html[data-aurion-theme="rose"][data-theme="dark"] .onboarding-title,
    html[data-aurion-theme="rose"][data-theme="dark"] .onboarding-title i {
        color: #e85d75 !important;
        -webkit-text-fill-color: #e85d75 !important;
        background: none !important;
        background-image: none !important;
    }
    
    /* WHY: iOS Safari - use welcome page gradient method for invite code key icon */
    .invite-code-icon i {
        display: inline-block !important;
        background: linear-gradient(135deg, #8a2be2, #b24bf3, #91ffff, #667eea) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    /* WHY: iOS Safari - Back button border uses theme color */
    .onboarding-btn.btn-secondary {
        border: 2px solid color-mix(in srgb, var(--theme-primary) 35%, transparent) !important;
    }
    
    /* WHY: iOS Safari - bullet items border uses theme color */
    .final-step-list li {
        border: 2px solid color-mix(in srgb, var(--theme-primary) 35%, transparent) !important;
    }
    
    [data-theme="dark"] .final-step-list li {
        border: 2px solid color-mix(in srgb, var(--theme-primary) 50%, transparent) !important;
    }
    
    /* ========================================
       iOS 14 AND BELOW LEGACY FIXES
       WHY: Gradient text masking completely fails on iOS 14-, causing invisible content
       Apply solid colors only for legacy iOS devices
       ======================================== */
    .ios-legacy .onboarding-btn.btn-primary {
        background-color: #8a2be2 !important;
        background-image: none !important;
    }
    
    .ios-legacy .onboarding-title {
        color: #ba55d3 !important;
    }
    
    .ios-legacy .onboarding-title i {
        color: #ba55d3 !important;
    }
    
    .ios-legacy .invite-code-icon i {
        background: none !important;
        -webkit-text-fill-color: #8a2be2 !important;
        color: #8a2be2 !important;
    }
    
    .ios-legacy .welcome-embed .benefit-card-icon {
        background: none !important;
        -webkit-text-fill-color: #8a2be2 !important;
        color: #8a2be2 !important;
        filter: none !important;
    }
    
    /* WHY: iOS 14 fails to display flex button containers - force visibility */
    .ios-legacy .onboarding-step[data-buttons-inline="true"].active .onboarding-inline-buttons {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ios-legacy .onboarding-footer {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========================================
   SETTINGS MODAL
   ======================================== */

.settings-modal-dialog {
    max-width: 900px;
    overflow: visible;
}

/* WHY: Desktop modal scrolling - max-height and scrollable body */
@media (min-width: 769px) {
    .settings-modal-dialog {
        max-height: 90vh;
        display: flex; 
    }
    
    .settings-modal-content {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    #settingsModal .modal-header {
        flex-shrink: 0;
    }
    
    #settingsModal .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1 auto;
        min-height: 0;
    }
    
    #settingsModal .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid var(--border-color);
    }
}

/* WHY: Only apply min-height if viewport is tall enough */
@media (min-width: 769px) and (min-height: 700px) {
    .settings-modal-content {
        min-height: 700px;
    }
}

/* WHY: Ensure modal doesn't clip tooltips */
.modal,
.modal-dialog {
    overflow: visible !important;
}

.modal {
    z-index: 100025 !important; /* WHY: Above sidebar (100020) and bars (100010, 100005) */
}

.settings-modal-content {
    background: var(--modal-bg);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: visible;
}

.settings-title {
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
}

.settings-body {
    display: flex;
    gap: 0;
    padding: 0;
    min-height: 650px;
    overflow: visible;
}

/* Sidebar Navigation */
.settings-sidebar {
    width: 250px;
    /* background: var(--message-ai-bg); */
    border-right: 1px solid var(--border-color);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-left-radius: 24px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;    
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

/* Removed empty ruleset - no longer needed */

.settings-nav-item:hover {
    background: var(--message-user-bg);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--message-user-bg); 
    border-left-color: var(--theme-primary);
    font-weight: 600;
}

.settings-nav-item i {
    font-size: 1.3rem;
}


/* WHY: Separate padding for Aurion Personality tab to align text with other tabs */
.settings-nav-item[data-section="personality"] {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* WHY: Dark mode styling for tabs and sidebar */

@media (max-width: 768px) {
		:root[data-theme="dark"] .settings-sidebar {
		background: rgba(20, 20, 20, 0.6);
		border-right-color: rgba(255, 255, 255, 0.1);
		}
		
		:root[data-theme="dark"] .settings-nav-item {
			background: var(--message-ai-bg);
			color: rgba(255, 255, 255, 0.7);
		     border-radius: 10px;
		}

		:root[data-theme="dark"] .settings-nav-item:hover {
		background: rgba(60, 60, 60, 0.8);
		color: rgba(255, 255, 255, 0.9);
		}

		:root[data-theme="dark"] .settings-nav-item.active {
		background: rgba(80, 80, 80, 0.9);
		}

		:root[data-theme="dark"] .settings-nav-item i {
		color: rgba(255, 255, 255, 0.8);
		}

		:root[data-theme="dark"] .settings-nav-item.active i {
		color: var(--theme-primary);
		}
}

/* Content Area with custom themed scrollbar */
.settings-content {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    overflow-x: visible;
    /*max-height: 600px; */
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) transparent;
}

/* WHY: Webkit custom scrollbar - modern, themed, no arrows */
.settings-content::-webkit-scrollbar {
    width: 8px;
}

.settings-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.settings-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
    border: none;
}

.settings-content::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}

/* WHY: Remove scrollbar arrows/buttons completely */
.settings-content::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

.settings-content::-webkit-scrollbar-button:start:decrement,
.settings-content::-webkit-scrollbar-button:end:increment {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

.settings-content::-webkit-scrollbar-button:vertical:start:decrement,
.settings-content::-webkit-scrollbar-button:vertical:end:increment {
    display: block !important;
    height: 0 !important;
}

/* WHY: Modern themed scrollbar for settings textareas - no arrows */
/* Force custom scrollbar on all platforms including Windows desktop */
.settings-textarea {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--theme-primary) transparent; /* Firefox */
}

.settings-textarea::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
}

.settings-textarea::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 10px 0;
}

.settings-textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-radius: 4px !important;
}

.settings-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary) !important;
}

.settings-textarea::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

.settings-textarea::-webkit-scrollbar-button:single-button {
    display: none !important;
}

.settings-textarea::-webkit-scrollbar-button:start:decrement,
.settings-textarea::-webkit-scrollbar-button:end:increment,
.settings-textarea::-webkit-scrollbar-button:vertical:start:decrement,
.settings-textarea::-webkit-scrollbar-button:vertical:end:increment,
.settings-textarea::-webkit-scrollbar-button:vertical:start:increment,
.settings-textarea::-webkit-scrollbar-button:vertical:end:decrement {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

.settings-textarea::-webkit-scrollbar-corner {
    background: transparent !important;
}

.settings-textarea::-webkit-resizer {
    display: none !important;
}

/* Content Header with Title and Close Button */
.settings-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    border-bottom: 1px solid var(--border-color);
}

.settings-content-header .settings-title {
    margin: 0;
}

.settings-content-header .btn-close {
    font-size: 1.2rem;
}

/* WHY: Make close button visible in dark mode - desktop only */
@media (min-width: 769px) {
    :root[data-theme="dark"] .settings-content-header .btn-close {
        filter: invert(1);
        opacity: 0.8;
    }

    :root[data-theme="dark"] .settings-content-header .btn-close:hover {
        opacity: 1;
    }
}

/* Adjust section padding */
.settings-section {
    padding: 30px 40px;
    display: none;
    overflow: visible;
}

.settings-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
    overflow: visible;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-section-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.settings-description {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.settings-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

.font-size-label {
	margin-top:40px;
}

.settings-input {
    font-size: 1.15rem;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.settings-input:focus {
    outline: none;
    border-color: var(--theme-input-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

.settings-input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.6;
}

.settings-textarea {
    font-size: 1.1rem;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    resize: vertical;
    min-height: 150px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--theme-input-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

.settings-textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 0.6;
}

/* WHY: Settings input and textarea font sizes match chat input based on user setting */
@media (min-width: 769px) {
    .font-size-xs .settings-input,
    .font-size-xs .settings-textarea {
        font-size: 16px;
    }
    
    .font-size-xs .settings-input::placeholder,
    .font-size-xs .settings-textarea::placeholder {
        font-size: 16px;
    }
    
    .font-size-sm .settings-input,
    .font-size-sm .settings-textarea {
        font-size: 19px;
    }
    
    .font-size-sm .settings-input::placeholder,
    .font-size-sm .settings-textarea::placeholder {
        font-size: 19px;
    }
    
    .font-size-md .settings-input,
    .font-size-md .settings-textarea {
        font-size: 23px;
    }
    
    .font-size-md .settings-input::placeholder,
    .font-size-md .settings-textarea::placeholder {
        font-size: 23px;
    }
    
    .font-size-lg .settings-input,
    .font-size-lg .settings-textarea {
        font-size: 27px;
    }
    
    .font-size-lg .settings-input::placeholder,
    .font-size-lg .settings-textarea::placeholder {
        font-size: 27px;
    }
    
    .font-size-xl .settings-input,
    .font-size-xl .settings-textarea {
        font-size: 31px;
    }
    
    .font-size-xl .settings-input::placeholder,
    .font-size-xl .settings-textarea::placeholder {
        font-size: 31px;
    }
}

/* Avatar in Settings */
.settings-avatar-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.settings-avatar {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 30%, transparent);
    background-size: cover;
    background-position: center;
}

.settings-avatar:hover {
    transform: scale(1.05);
}

.settings-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
    font-size: 1.1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.settings-avatar-edit:hover {
    transform: scale(1.1);
    background: var(--theme-primary);
    color: white;
}

/* Dark Mode Toggle in Settings */
.settings-dark-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--message-ai-bg);
    border-radius: 12px;
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 1.1rem;
}

.settings-dark-toggle input[type="checkbox"] {
    width: 52px;
    height: 28px;
    appearance: none;
    background: var(--border-color);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-dark-toggle input[type="checkbox"]:checked {
    background: var(--theme-primary);
}

.settings-dark-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.settings-dark-toggle input[type="checkbox"]:checked::before {
    left: 26px;
}

/* WHY: iOS-specific fixes for toggles in settings modal */
@media (max-width: 768px) {
    .ios-device .settings-dark-toggle input[type="checkbox"],
    .ios-device .settings-followup-toggle {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .ios-device .settings-dark-toggle input[type="checkbox"]::after,
    .ios-device .settings-followup-toggle::after {
        content: none !important;
    }
    
    /* WHY: Hide iOS default checkmark */
    .ios-device .settings-dark-toggle input[type="checkbox"]:checked::after,
    .ios-device .settings-followup-toggle:checked::after {
        content: none !important;
        display: none !important;
    }
    
    /* WHY: Ensure white knob is always visible */
    .ios-device .settings-dark-toggle input[type="checkbox"]::before,
    .ios-device .settings-followup-toggle::before {
        background: white !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* Theme Selection in Settings */
.settings-themes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.theme-option-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px;
    border-radius: 12px;
    background: var(--message-ai-bg);
    border: 2px solid transparent;
}

.theme-option-settings:hover {
    background: var(--message-user-bg);
    transform: translateY(-3px);
}

.theme-option-settings.active {
    border-color: var(--theme-primary);
    background: var(--message-user-bg);
}

.theme-circle-settings {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-option-settings:hover .theme-circle-settings {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.theme-circle-settings {
    background: linear-gradient(135deg, #8a2be2, #ba55d3);
}

.theme-option-settings[data-theme="default"] .theme-circle-settings {
    background: linear-gradient(135deg, #8a2be2, #ba55d3);
}

.theme-option-settings[data-theme="ocean"] .theme-circle-settings {
    background: linear-gradient(135deg, #0077be, #00bfff);
}

.theme-option-settings[data-theme="sunset"] .theme-circle-settings {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
}

.theme-option-settings[data-theme="forest"] .theme-circle-settings {
    background: linear-gradient(135deg, #2d6a4f, #52b788);
}

.theme-option-settings[data-theme="rose"] .theme-circle-settings {
    background: linear-gradient(135deg, #d8345f, #e85d75);
}

.theme-option-settings span {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--text-primary);
	text-align: center;
	line-height: 24px;
}

/* Settings Footer */
.settings-footer {
    padding: 20px 30px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.settings-btn {
    padding: 12px 28px;
    font-size: 1.1rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1; /* WHY: Equal button widths */
    max-width: 180px; /* WHY: Prevent buttons from getting too wide on desktop */
}

.settings-btn.btn-secondary {
    background: var(--message-ai-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.settings-btn.btn-secondary:hover {
    background: var(--message-user-bg);
    transform: translateY(-2px);
}

.settings-btn.btn-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    color: white;
}

.settings-btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

/* Personality Sliders */
.personality-slider-container {
    margin-bottom: 30px;
    overflow: visible;
    position: relative;
}

.personality-slider-label {
    display: flex;
    align-items: center;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.personality-info-icon {
    font-size: 1.1rem;
    color: var(--theme-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
    margin-top: 7px;
}

/* WHY: Mammoth trail icon styling */
.mammoth-trail-icon {
    font-size: 20px;
    color: var(--text-primary);
    opacity: 0.85;
    margin-right: 8px;
    position: relative;
    top: 2px;
    transition: opacity 0.2s;
}

/* WHY: Only apply hover effects on devices that support true hover (not touch) */
@media (hover: hover) and (pointer: fine) {
    .personality-info-icon:hover {
        color: var(--theme-primary);
        transform: scale(1.15);
        filter: brightness(1.2);
    }
    
    /* WHY: Mammoth icon hover effect in slider label */
    .mammoth-trail-icon:hover {
        opacity: 1;
        transform: scale(1.1);
    }
}

.personality-slider-track-container {
    position: relative;
}

.personality-slider-track {
    position: relative;
}

.personality-thumb-wrapper {
    position: absolute;
    top: -12px;
    left: 0;
    width: 56px;
    height: 56px;
    pointer-events: none;
    z-index: 10;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.personality-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--theme-primary);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    /* WHY: Perfectly centered vertically in the circle */
}

.personality-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 18px;
    font-weight: 500;
}

.personality-slider-labels i {
    font-size: 0.9rem;
    margin-right: 4px;
    opacity: 0.8;
}

/* WHY: Mammoth trail footprint labels - centered icons with spacing */
.mammoth-trail-labels {
    text-align: center;
}

.mammoth-trail-labels span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mammoth-trail-labels i {
    margin-right: 0;
}

.mammoth-trail-labels i + i {
    margin-left: 4px;
}

/* WHY: Individual positioning for each footprint group */
.mammoth-trail-short {
   margin-left: 19px;
    top: 5px;
    position: relative;
}

.mammoth-trail-medium {
    margin-left: 25px;
    top: 5px;
    position: relative;
}

.mammoth-trail-long { 
    top: 5px;
    position: relative;
}

.personality-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    outline: none;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0;
}

.personality-slider:hover {
    opacity: 0.9;
}

/* Slider thumb - Webkit (Chrome, Safari) - WHY: 2x bigger for better touch interaction */
.personality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--theme-primary);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.personality-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.personality-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 50%, transparent);
}

/* Slider thumb - Firefox - WHY: 2x bigger for better touch interaction */
.personality-slider::-moz-range-thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--theme-primary);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.personality-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.personality-slider::-moz-range-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 50%, transparent);
}

/* Dark mode adjustments for sliders */
:root[data-theme="dark"] .personality-slider::-webkit-slider-thumb {
    background: #f5f5f5;
}

:root[data-theme="dark"] .personality-slider::-moz-range-thumb {
    background: #f5f5f5;
}

/* WHY: Font Size Selector in Settings */
.settings-font-size-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.settings-size-btn {
    flex: 1;
    min-width: 60px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--modal-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-size-btn i {
    display: none;
}

/* WHY: Different font sizes for aA text, centered */
.settings-size-btn[data-size="xs"] .font-sample {
    font-size: 0.9rem;
}

.settings-size-btn[data-size="sm"] .font-sample {
    font-size: 1.2rem;
}

.settings-size-btn[data-size="md"] .font-sample {
    font-size: 1.4rem;
}

.settings-size-btn[data-size="lg"] .font-sample {
    font-size: 1.7rem;
}

.settings-size-btn[data-size="xl"] .font-sample {
    font-size: 2.1rem;
}

.settings-size-btn .font-sample {
    font-weight: 600;
    line-height: 1;
}

.settings-size-btn:hover:not(.active) {
    background: var(--message-user-bg);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.settings-size-btn.active {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    color: white;
    border-color: var(--theme-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.settings-size-btn.active:hover {
    transform: translateY(-2px);
}

/* WHY: Follow-up Questions Toggle - Match Dark Mode Style */
.settings-followup-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--message-ai-bg);
    border-radius: 12px;
    margin-bottom: 24px;
}

.settings-followup-header {
    flex: 1;
}

.settings-followup-header .settings-label {
    margin-bottom: 4px;
    font-size: 1.4rem;
    font-weight: 600;
}

.modal-body p.settings-description {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-bottom: 20px;
}

.settings-followup-toggle {
    width: 52px;
    height: 28px;
    appearance: none;
    background: var(--border-color);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.settings-followup-toggle:checked {
     background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
}

.settings-followup-toggle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.settings-followup-toggle:checked::before {
    left: 26px;
}

/* WHY: Dark mode adjustments for new components */
:root[data-theme="dark"] .settings-followup-container {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .settings-size-btn {
    border-color: rgba(255, 255, 255, 0.1);
}

/* WHY: Hide mobile back button and section icon on desktop */
.mobile-back-btn,
.mobile-section-icon {
    display: none !important;
}

/* Mobile Responsive - Settings Modal */
@media (max-width: 768px) {
    /* WHY: Full screen modal on mobile - fix Bootstrap modal wrapper */
    #settingsModal.modal {
        height: 100vh;
        height: 100dvh; /* WHY: Dynamic viewport height for iOS Safari */
    }
    
    /* WHY: Full screen modal on mobile */
    .settings-modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 100vh;
        height: 100dvh; /* WHY: Dynamic viewport height for iOS Safari - excludes browser UI */
        display: flex; /* WHY: Ensure flex layout for proper stretching */
        align-items: stretch;
    }

    .personality-thumb-wrapper {
	top: -12px;
    }
    
    .settings-modal-content {
        border-radius: 0;
        height: 100%;
        flex: 1; /* WHY: Fill parent dialog container */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }
    
    /* WHY: Stack sidebar and content vertically on mobile */
    .settings-body {
        display: flex;
        flex-direction: column;
        min-height: auto;
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    
    /* WHY: Mobile menu header - fixed at top when on menu */
    .settings-body::before {
        content: 'Personalisation';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--modal-bg);
        border-bottom: 1px solid var(--border-color);
        z-index: 3;
        font-size: 1.2rem;
        font-weight: 600;
        transition: transform 1s ease;
    }
    
    .settings-body.menu-hidden::before {
        transform: translateX(-100%);
    }
    
    /* WHY: Mobile menu list - shown by default */
    .settings-sidebar {
        width: 100%;
        display: block;
        border-right: none;
        padding: 0px 0 10px 0;
        background: var(--modal-bg);
        position: absolute;
        top: 63px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 2;
        transition: transform 1s ease;
    }
    
    .settings-sidebar.slide-out {
        transform: translateX(-100%);
    }
    
    /* WHY: Menu items match desktop styling exactly */
    .settings-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px;
        margin: 5px 10px;
        color: var(--text-secondary);
	   background: var(--message-ai-bg);
        text-decoration: none;
        font-weight: 500;
        font-size: 1.05rem;
        transition: all 1s ease;
        border-left: 3px solid transparent;
        border-radius: 0;
    }
    
    /* WHY: Click state matches desktop .active styling */
    .settings-nav-item:active {
        background: var(--message-user-bg) !important; 
        border-left-color: var(--theme-primary) !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }
    
    /* WHY: No active/selected state on mobile menu - only during click */
    .settings-nav-item.active {
        background: transparent !important;
        color: var(--text-secondary) !important;
        border-left-color: transparent !important;
        font-weight: 500 !important;
        border-radius: 0 !important;
    }
    
    .settings-nav-item i {
        font-size: 1.3rem;
    }
    
    .settings-nav-item span {
        display: inline;
        font-size: inherit;
        color: inherit;
    }
    
    /* WHY: Fix personality item padding to align with other items */
    .settings-nav-item[data-section="personality"] {
        padding-top: 16px;
        padding-bottom: 16px;	   
        gap: 5px;
    }
    
    /* WHY: Dark mode background for mobile menu */
    :root[data-theme="dark"] .settings-body::before {
        background: rgba(20, 20, 20, 0.98);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    :root[data-theme="dark"] .settings-sidebar {
        background: rgba(20, 20, 20, 0.98);
    }
    
    :root[data-theme="dark"] .settings-content {
        background: rgba(20, 20, 20, 0.98);
    }
    
    :root[data-theme="dark"] .settings-content-header {
        background: rgba(20, 20, 20, 0.98);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    /* WHY: Content area - slides in from right */
    .settings-content {
        flex: 1;
        overflow-y: auto;
        max-height: none;
        scrollbar-width: thin;
        scrollbar-color: var(--theme-primary) transparent;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--modal-bg);
        z-index: 1;
        transform: translateX(100%);
        transition: transform 1s ease;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 16px)); /* WHY: Space for sticky footer + iOS safe area */
    }
    
    .settings-content.slide-in {
        transform: translateX(0);
    }
    
    /* WHY: Mobile header with back button and X */
    .settings-content-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 20px;
        padding-top: max(16px, env(safe-area-inset-top, 16px)); /* WHY: iOS safe area for notch */
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        background: var(--modal-bg);
        z-index: 10;
        position: relative;
        gap: 10px;
    }
    
    .mobile-back-btn {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease, transform 0.2s ease;
    }
    
    .mobile-back-btn.show {
        opacity: 1;
        pointer-events: auto;
    }
    
    .mobile-back-btn:active {
        transform: translateY(-50%) scale(0.9);
    }
    
    /* WHY: Section icon shown in mobile header - flows naturally in flexbox */
    .mobile-section-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: var(--text-primary);
        flex-shrink: 0;
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        transition: opacity 0.5s ease, max-width 0.5s ease;
    }
    
    .mobile-section-icon.show {
        opacity: 1;
        max-width: 100px;
    }
    
    .mobile-section-icon i {
        color: var(--text-primary);
        font-size: 1.3rem;
    }
    
    .mobile-section-icon img {
        width: 24px;
        height: 24px;
        /* WHY: Light mode - convert to dark/black to match dark text */
        filter: brightness(0) saturate(100%);
        opacity: 0.7;
    }
    
    /* WHY: Dark mode - convert to white to match light text */
    :root[data-theme="dark"] .mobile-section-icon img {
        filter: brightness(0) saturate(100%) invert(100%);
        opacity: 0.8;
    }
    
    .settings-content-header .settings-title {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .settings-content-header .btn-close {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        pointer-events: auto;
        transition: opacity 1s ease, transform 0.2s ease;
        outline: none;
    }
    
    .settings-content-header .btn-close.hide {
        opacity: 0;
        pointer-events: none;
    }
    
    .settings-content-header .btn-close:focus {
        outline: none;
        box-shadow: none;
    }
    
    .settings-content-header .btn-close:active {
        transform: translateY(-50%) scale(0.9);
        outline: none;
    }
    
    /* WHY: Dark mode close button on mobile */
    :root[data-theme="dark"] .settings-content-header .btn-close {
        filter: invert(1);
        opacity: 0.8;
    }
    
    :root[data-theme="dark"] .settings-content-header .btn-close:hover {
        opacity: 1;
    }
    
    /* WHY: Hide inactive sections on mobile */
    .settings-section {
        display: none;
    }
    
    .settings-section.active {
        display: block;
        padding-top: 80px;
    }
    
    /* WHY: Webkit custom scrollbar - modern, themed, no arrows */
    .settings-content::-webkit-scrollbar {
        width: 8px;
    }
    
    .settings-content::-webkit-scrollbar-track {
        background: transparent;
        margin: 10px 0;
    }
    
    .settings-content::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
        border-radius: 4px;
        border: none;
    }
    
    .settings-content::-webkit-scrollbar-thumb:hover {
        background: var(--theme-primary);
    }
    
    /* WHY: Remove scrollbar arrows/buttons completely */
    .settings-content::-webkit-scrollbar-button {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        background: transparent !important;
    }
    
    .settings-content::-webkit-scrollbar-button:start:decrement,
    .settings-content::-webkit-scrollbar-button:end:increment {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
    }
    
    .settings-content::-webkit-scrollbar-button:vertical:start:decrement,
    .settings-content::-webkit-scrollbar-button:vertical:end:increment {
        display: block !important;
        height: 0 !important;
    }
    
    /* WHY: Footer at bottom - sticky with iOS safe area */
    .settings-footer {
        position: sticky;
        bottom: 0;
        padding: 16px 20px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)); /* WHY: iOS safe area for home indicator */
        border-top: 1px solid var(--border-color);
        background: var(--modal-bg);
        z-index: 10;
        flex-shrink: 0; /* WHY: Prevent footer from shrinking */
    }
    
 
    
    
    
    .settings-title {
        font-size: 1.5rem;
    }
    
    .settings-section {
        padding: 20px;
    }
    
    .settings-section-title {
        font-size: 1.4rem;
    }
    
    .modal-body p.settings-description {
        font-size: 1.1rem;
	   padding-bottom: 20px;
    }
    
    .settings-followup-header .settings-label {
        font-size: 1.2rem;
    }
    
    .settings-input,
    .settings-textarea {
        font-size: 1rem;
        padding: 12px 14px;
    }
    
    /* WHY: Adjust theme grid for mobile */
    .settings-themes {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .theme-circle-settings {
        width: 50px;
        height: 50px;
    }
    
    .theme-option-settings span {
        font-size: 0.9rem;
    }
    
    .settings-btn {
        padding: 15px 10px;
        font-size: 0.95rem;
        flex: 1;
        white-space: nowrap;
    }
    
    /* WHY: Ensure labels don't overlap with larger mobile thumbs */
    .personality-slider-labels {
        margin-top: 22px;
        font-size: 0.9rem;
    }
    
}


.message-metadata-icons {
    display: flex;
    gap: 12px;
    margin-top: 12px;    
    margin-left: 15px;
    justify-content: flex-start;
}



/* WHY: MOBILE GRID/STICKY LAYOUT - must come BEFORE 480px */
@media (max-width: 768px) {
  body {
    background: #ffffff !important; /* WHY: White background on mobile for light mode */
  }
  
  :root[data-theme="dark"] body {
    background: #121212 !important; /* WHY: Dark background on mobile for dark mode to match chat-bg */
  }
  
  .chat-container {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100svh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: transparent !important; /* WHY: Let body background show through */
  }

  .chat-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100010 !important; /* WHY: Below sidebar (100020) and modals (100025) */
    padding-top: env(safe-area-inset-top) !important;
  }
  
  /* WHY: Inner container adds consistent 10px top padding regardless of safe-area */
  .chat-header-inner {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  #messagesContainer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    /* overflow-y: auto !important; */
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 0px 12px 0px !important;
    /* WHY: Solid fallback FIRST prevents loading screen star from showing through
       if CSS variables fail to load on mobile. Then CSS variable for theming. */
    background-color: #ffffff !important;
    background-color: var(--chat-bg, #ffffff) !important;
    backdrop-filter: blur(20px) !important; /* WHY: Consistent blur with input area */
  }
  
  /* WHY: Dark mode solid background fallback for mobile messages container */
  :root[data-theme="dark"] #messagesContainer {
    background-color: #26292e !important;
    background-color: var(--chat-bg, #26292e) !important;
  }
  
  /* WHY: Dark mode solid background fallback for mobile input area */
  :root[data-theme="dark"] .input-area {
    background: #26292e !important;
    background: var(--chat-bg, #26292e) !important;
  }

  .input-area {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    /* WHY: Solid fallback prevents loading screen showing through input area on mobile */
    background: #ffffff !important;
    background: var(--chat-bg, #ffffff) !important;
    backdrop-filter: blur(20px) !important; /* WHY: Match messages container blur on mobile */
    /* border-top: 1px solid var(--border-color) !important; */
    z-index: 100005 !important; /* WHY: Below sidebar (100020) and modals (100025) */
  }

  .scroll-to-bottom-btn {
    position: fixed !important;
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 480px) {
    /* WHY: Even tighter spacing on very small screens */
    .settings-content-header {
        padding: 16px 16px;
    }
    
    .settings-section {
        padding: 16px;
    }
    
    .settings-title {
        font-size: 1.3rem;
    }
    
    .settings-section-title {
        font-size: 1.3rem;	   
    }


    
    
    /* WHY: 2 column theme grid on tiny screens */
    .settings-themes {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .theme-circle-settings {
        width: 45px;
        height: 45px;
    }
    
    .theme-option-settings span {
        font-size: 0.85rem;
    }
    
    /* WHY: Extra spacing for tiny screens to prevent overlap */
    .personality-slider-labels {
        margin-top: 15px;
        font-size: 1.1rem;
    }
    
    /* WHY: Tighter footer for button space */
    .settings-footer {
        padding: 12px 16px;
        gap: 10px;
    }
    
    /* WHY: Even tighter button spacing */
    .settings-btn {
        padding: 15px 10px;
        font-size: 0.85rem;
    }
}

/* ========================================
   SIDEBAR STYLES
   ======================================== */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100svh; /* WHY: Use small viewport height for mobile browser compatibility */
    height: 100dvh;
    width: 480px;
    background: var(--chat-header-bg);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 1.0s ease-in-out;
    z-index: 100020; /* WHY: Above both bars (100010, 100005) but below modals (100025) */
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    will-change: transform;
}

.sidebar.open {
    transform: translateX(0);
    transition: transform 1.0s ease-in-out;
}

.chat-item-icon::before { 
    margin-right: 7px;
    margin-left: 7px;
}


/* Sidebar guaranteed animations (1s) */
@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes sidebarSlideOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.sidebar.opening {
  animation: sidebarSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.sidebar.closing {
  animation: sidebarSlideOut 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.settings-nav-item .icon2-aurion {
    font-size: 1.7rem;
    margin-left: -4px;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-new-chat {
    width: 48px;
    height: 48px;
    padding: 0;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.btn-new-chat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.btn-new-chat:active {
    transform: translateY(3px) scale(1.05);
    box-shadow: none;
}

.btn-new-chat:focus {
    outline: none;
}

/* Sidebar Chat Count - inline in header */
.sidebar-chat-count {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    color: var(--text-primary);
    padding-left: 12px;
}

.sidebar-chat-count .chat-count-icon {
    color: var(--theme-primary); 
    position: relative;
    margin-right: 5px;
    top: 2px;
}

.sidebar-chat-count .chat-count-number {
    font-weight: 700;
    color: var(--theme-primary);
    font-size: 1.3rem;
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    padding: 2px 10px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
}

.sidebar-chat-count .chat-count-label {
    font-weight: 500;
    opacity: 1; 
    letter-spacing: 0.02em;
}

/* Sidebar Date Dividers - group chats by date */
.chat-date-divider {
    padding: 12px 12px 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

/* WHY: First divider needs less top padding */
.chat-date-divider:first-child {
    padding-top: 4px;
}

.sidebar-chats {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* WHY: Match chat scrollbar style - transparent track, no arrows, no gray background */
.sidebar-chats::-webkit-scrollbar {
    width: 8px;
}

.sidebar-chats::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-chats::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.sidebar-chats::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* WHY: Remove scrollbar arrows/buttons completely */
.sidebar-chats::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

.chat-item {
    padding: 8px 9px;
    margin-bottom: 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}

/* Smooth animation when chat moves to top */
@keyframes chatSlideIn {
    0% {
        opacity: 0.5;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* WHY: Fade-in animation for chat items on render */
@keyframes chatFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.chat-item:hover {
    background: var(--message-ai-bg);
    border-color: var(--border-color);
}

.chat-item.active,
.chat-item.active:hover {
    background: var(--current-message);
    border-color: var(--theme-primary);
    font-weight: 600;
}

.chat-item-icon {
    font-size: 1.2rem;
    opacity: 0.7;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}

/* WHY: Icon container with badge - full opacity */
.chat-item-icon:has(.chat-item-message-count) {
    opacity: 1;
}

/* WHY: Message count badge - circular badge that stays round with 2 digits */
.chat-item-message-count {
	background: var(--theme-primary);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    width: 30px;
    height: 23px;
    border-radius: 5px;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
}

.chat-item-name {
    flex: 1;
    color: var(--text-primary);
    font-size: 1.25rem;
    /* WHY: Always single line with ellipsis at end */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* WHY: Add padding for action button overlay on hover */
    padding-right: 10px;
    transition: padding-right 0.2s ease;
}

/* WHY: Reduce title width when hovering to make room for buttons */
.chat-item:hover .chat-item-name {
    padding-right: 90px;
}

/* WHY: Pinned items only show pin icon by default - needs less padding */
.chat-item.pinned .chat-item-name {
    padding-right: 36px;
}

/* WHY: When hovering pinned item, all 3 icons show - needs full padding */
.chat-item.pinned:hover .chat-item-name {
    padding-right: 90px;
}

/* Chat item action buttons */
.chat-item-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* WHY: Position absolutely so they don't take up flex space */
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
}

.chat-item:hover .chat-item-actions,
.chat-item.pinned .chat-item-actions {
    opacity: 1;
}

/* WHY: For pinned items, hide edit/delete until hover - only pin icon shows by default */
.chat-item.pinned .chat-action-btn.edit,
.chat-item.pinned .chat-action-btn.delete {
    opacity: 0;
}

.chat-item.pinned:hover .chat-action-btn.edit,
.chat-item.pinned:hover .chat-action-btn.delete {
    opacity: 1;
}

.chat-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.chat-action-btn:hover {
    background: color-mix(in srgb, var(--theme-primary) 15%, transparent);
    color: var(--theme-primary);
    transform: scale(1.1);
}

.chat-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Pin button - always visible when pinned (.active class), hidden otherwise (shows on hover) */
.chat-action-btn.pin {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
}

/* WHY: Pin icon visible on hover */
.chat-item:hover .chat-action-btn.pin {
    opacity: 1;
}

/* WHY: Pin icon ALWAYS visible when chat is in pinned section */
.chat-item.pinned .chat-action-btn.pin,
.chat-action-btn.pin.active {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--theme-primary) !important;
}

/* Pinned chat item styling */
.chat-item.pinned {
    background: color-mix(in srgb, var(--theme-primary) 5%, transparent);
}

/* WHY: Active (selected) state overrides pinned background */
.chat-item.pinned.active,
.chat-item.pinned.active:hover {
    background: var(--current-message);
}

/* Pinned section divider with icon */
.chat-date-divider.pinned-divider {
    color: var(--theme-primary);
    opacity: 0.8;
}

.chat-date-divider.pinned-divider i {
    margin-right: 4px;
    font-size: 0.85em;
}

/* Separator line after pinned section */
.pinned-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    margin: 25px 12px 4px;
}

/* Edit mode for chat name */
.chat-item-name-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-family: inherit;
    padding: 0;
    width: 100%;
}

.chat-item-name-input:focus {
    background: var(--input-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.chat-item-save-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: var(--theme-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    right: 5px;
    position: relative;
}

.chat-item-save-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Delete animation */
@keyframes chatDeleteFade {
    0% {
        opacity: 1;
        transform: scale(1);
        background: var(--message-ai-bg);
    }
    30% {
        background: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
    }
    60% {
        background: rgba(239, 68, 68, 0.4);
        transform: scale(0.95);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateX(-20px);
        background: rgba(239, 68, 68, 0.6);
    }
}

.chat-item.deleting {
    animation: chatDeleteFade 0.5s ease forwards;
    pointer-events: none;
}

/* WHY: More button hidden by default (desktop), shown < 480px */
.chat-item .more-btn {
    display: none;
}

/* WHY: More menu - dropdown for mobile actions */
.chat-more-menu {
    display: none;
    position: absolute;
    right: 4px;
    top: calc(100% + 4px);
    background: var(--modal-bg);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    border-radius: 14px;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 5%, transparent);
    z-index: 100;
    min-width: 145px;
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: menuSlideIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top right;
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-more-menu.show {
    display: flex;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    border-radius: 10px;
}

.chat-menu-item:hover {
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    transform: translateX(2px);
}

.chat-menu-item:hover i {
    color: var(--theme-primary);
    transform: scale(1.1);
}

.chat-menu-item:active {
    transform: scale(0.98);
}

/* WHY: Delete item - red tint on hover */
.chat-menu-item.delete:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.chat-menu-item.delete:hover i {
    color: #ef4444;
}

/* WHY: Active pin state - theme colored */
.chat-menu-item.pin.active {
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
}

.chat-menu-item.pin.active i {
    color: var(--theme-primary);
}

.chat-menu-item i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

/* WHY: Dark mode - enhanced glass effect */
[data-theme="dark"] .chat-more-menu {
    background: color-mix(in srgb, var(--modal-bg) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* WHY: < 480px - Show more button, hide individual action buttons */
@media (max-width: 480px) {
    .chat-item .more-btn {
        display: flex;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
    }
    
    .chat-item-actions {
        display: none !important;
    }
    
    /* WHY: Less padding needed since only 1 icon visible */
    .chat-item-name {
        padding-right: 36px !important;
    }
}

/* New Chat Floating Button */
.new-chat-floating {
    position: fixed;
    left: 20px;
    top: calc(5vh + 60px);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100015; /* WHY: New chat button - above bars but below sidebar */
    box-shadow: var(--shadow);
    color: white;
    font-size: 1.3rem;
}

.new-chat-floating:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.new-chat-floating:active {
    transform: translateY(3px) scale(1.05);
    box-shadow: none;
}

.new-chat-floating:focus {
    outline: none;
}

.new-chat-floating.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Adjust chat container when sidebar is open */
#chatContainer {
    transition: margin-left 1.0s ease-in-out, width 1.0s ease-in-out;
    will-change: margin-left, width;
}

.sidebar.open ~ #chatContainer {
    margin-left: 410px;
    width: calc(95% - 410px);
    min-width: calc(95% - 410px);
}

/* Chat container temporary shift during sidebar animation */
@keyframes chatShiftRight {
  from { transform: translateX(0); }
  to   { transform: translateX(410px); }
}

@keyframes chatShiftLeft {
  from { transform: translateX(410px); }
  to   { transform: translateX(0); }
}

#chatContainer.animating-open {
  animation: chatShiftRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#chatContainer.animating-close {
  animation: chatShiftLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================================
   MESSAGE METADATA ICONS (INFO & COPY)
   ======================================== */


.metadata-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--input-border);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    padding: 0;
}

.metadata-icon:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
    transform: scale(1.05);
}

.metadata-icon:active {
    transform: scale(0.95);
}

.metadata-icon.copied {
    border-color: #10b981;
    color: #10b981;
    background: color-mix(in srgb, #10b981 8%, transparent);
}

/* Metadata Tooltip Styling */
.metadata-tooltip {
    padding: 4px;
    min-width: 210px;
}

.metadata-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.metadata-tooltip-item:last-child {
    margin-bottom: 0;
}

.metadata-tooltip-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.metadata-tooltip-value {
    font-weight: 700;
    color: white;
    font-size: 1rem;
}

.metadata-tooltip-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    text-align: center;
}

/* Tooltipster theme for metadata */
.tooltipster-sidetip.tooltipster-aurion .tooltipster-box {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.tooltipster-sidetip.tooltipster-aurion .tooltipster-content {
    color: white;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 14px;
}

.tooltipster-sidetip.tooltipster-aurion .tooltipster-arrow {
    overflow: visible !important;
}

/* Arrow styling - no gap between arrow and box */
.tooltipster-sidetip.tooltipster-aurion .tooltipster-arrow-border {
    display: none !important;
}

.tooltipster-sidetip.tooltipster-aurion .tooltipster-arrow-background {
    border-width: 8px;
    border-style: solid;
    border-color: transparent;
}

/* Top arrow - pulls into box with negative margin */
.tooltipster-sidetip.tooltipster-aurion.tooltipster-top .tooltipster-arrow-background {
    border-top-color: var(--theme-primary);
    margin-bottom: -1px;
}

/* Bottom arrow - pulls into box with negative margin */
.tooltipster-sidetip.tooltipster-aurion.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: var(--theme-primary);
    margin-top: -1px;
}

/* Left arrow - pulls into box with negative margin */
.tooltipster-sidetip.tooltipster-aurion.tooltipster-left .tooltipster-arrow-background {
    border-left-color: var(--theme-primary);
    margin-right: -1px;
}

/* Right arrow - pulls into box with negative margin */
.tooltipster-sidetip.tooltipster-aurion.tooltipster-right .tooltipster-arrow-background {
    border-right-color: var(--theme-primary);
    margin-left: -1px;
}

/* Personality info icon tooltips - larger font */
.tooltipster-sidetip.personality-tooltip .tooltipster-content {
    font-size: 17px;
    line-height: 1.5;
    padding: 6px 14px;
}

/* Personality info icon tooltips - fix arrow positioning */
.tooltipster-sidetip.personality-tooltip.tooltipster-top .tooltipster-arrow-background {
    margin-bottom: 0 !important;
    top: 1px;
}

.tooltipster-sidetip.personality-tooltip.tooltipster-bottom .tooltipster-arrow-background {
    margin-top: 0 !important;
    top: -1px;
}

.tooltipster-sidetip.personality-tooltip.tooltipster-left .tooltipster-arrow-background {
    margin-right: 0 !important;
    left: 1px;
}

.tooltipster-sidetip.personality-tooltip.tooltipster-right .tooltipster-arrow-background {
    margin-left: 0 !important;
    left: -1px;
}



/* Mobile tooltip adjustments - add margins to prevent edge cutoff */
@media (max-width: 768px) {
    .tooltipster-sidetip.tooltipster-aurion .tooltipster-box {
        margin-left: 10px;
        margin-right: 10px;
    }
}



/* WHY: Additional 768px blocks - must come BEFORE 480px */
@media (max-width: 768px) {
    .message-metadata-icons {
        margin-left: -40px;
    }
    
    .metadata-icon, .user-action-btn {
        width: 22px;
        height: 22px;
        font-size: 1.0rem;
    }
    
    .metadata-tooltip {
        min-width: 190px;
    }
    
    /* WHY: Always show ALL action icons on mobile sidebar */
    .chat-item-actions {
        opacity: 1 !important;
    }
    
    /* WHY: Mobile - show ALL buttons always (delete, edit, pin) */
    .chat-action-btn.pin,
    .chat-item.pinned .chat-action-btn.edit,
    .chat-item.pinned .chat-action-btn.delete {
        opacity: 1 !important;
    }
    
    /* WHY: Mobile < 768px - always reduce title width since all 3 buttons are always visible */
    .chat-item-name {
        padding-right: 90px !important;
    }
}

/* WHY: < 480px override - only 1 more button visible, allow longer titles */
@media (max-width: 480px) {
    .chat-item-name {
        padding-right: 32px !important;
    }
}

/* WHY: Retry icon for assistant messages uses same styling as user message retry-btn
   See .retry-btn styles around line 2454 */

/* ========================================
   RETRY CONFIRMATION MODAL
   ======================================== */

.retry-confirm-modal-dialog {
    max-width: 450px;
}

.retry-confirm-modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.retry-confirm-message { 
    color: var(--text-secondary) !important;
    margin-bottom: 24px; 
    text-align: center;
    font-size: 1.4rem !important;
    line-height: 2rem;
    font-weight: 600;
}

.retry-modal-buttons {
    display: flex;
    gap: 16px;
    margin-top: 30px;
    margin-bottom: 0;
}

.retry-modal-buttons .onboarding-btn {
    flex: 1;
}

.retry-modal-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        color-mix(in srgb, var(--theme-primary) 20%, var(--border-color)) 50%, 
        transparent 100%);
    margin: 24px 0 20px 0;
}

.retry-confirm-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.retry-confirm-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.retry-confirm-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--theme-primary);
}

.retry-checkbox-text {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 400;
    user-select: none;
}

/* Hide checkbox wrapper when skip_retry_confirmation is already true */
#retryConfirmCheckboxWrapper.hidden {
    display: none;
}

/* Hide retry modal footer since buttons are now in body */
#retryConfirmModal .modal-footer {
    display: none;
}

/* Dark mode support for retry modal */
[data-theme="dark"] .retry-confirm-message {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .retry-checkbox-text {
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   MESSAGE DELETION ANIMATION
   WHY: Smooth transition when deleting assistant response
   ======================================== */

.message.deleting {
    animation: messageSlideOut 0.4s ease-out forwards;
    pointer-events: none;
}

@keyframes messageSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 1000px;
        margin-bottom: 20px;
    }
    50% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 0;
        transform: translateX(30px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Sidebar controls */
.sidebar-controls {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.btn-pin-sidebar,
.btn-collapse-sidebar {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-pin-sidebar:hover,
.btn-collapse-sidebar:hover {
    background: var(--message-ai-bg);
    border-color: var(--theme-primary);
}

.btn-pin-sidebar:active,
.btn-collapse-sidebar:active {
    transform: translateY(3px) scale(1.05);
    box-shadow: none;
}

.btn-pin-sidebar:focus,
.btn-collapse-sidebar:focus {
    outline: none;
}

.btn-pin-sidebar.active {
    background: var(--message-user-bg);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* Dark mode sidebar adjustments */
[data-theme="dark"] .sidebar {
    background: rgba(25, 25, 25, 0.95);
    border-right-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .chat-item:hover {
    background: rgba(50, 50, 50, 0.8);
}

/* WHY: Prevent dark mode hover from overriding active chat item background */
[data-theme="dark"] .chat-item.active,
[data-theme="dark"] .chat-item.active:hover {
    background: var(--current-message);
}

[data-theme="dark"] .sidebar-toggle {
    background: rgba(30, 30, 30, 0.95);
}

/* ========================================
   CUSTOM IMAGE CROP MODAL
   ======================================== */

#cropModal .modal-dialog {
    max-width: 500px;
}

#cropModal .modal-body {
    padding: 30px;
}

#cropModal .modal-footer {
    justify-content: center;
    gap: 15px;
    padding: 20px 30px;
}

/* WHY: Match personalize modal button styles */
#cropModal .btn-secondary {
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#cropModal .btn-secondary:hover {
    background: var(--border-color);
    border-color: var(--text-secondary);
}

#cropModal .btn-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    color: white;
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 500;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-primary) 30%, transparent);
    transition: all 0.3s ease;
}

#cropModal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.crop-container {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 0 auto;
    background: #171617;
    border-radius: 12px;
    overflow: hidden;
    cursor: move;
    touch-action: none;
}

#cropCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

.crop-slider-container {
    margin-top: 30px;
    padding: 0 10px;
}

/* ========================================
   POLICY UPDATE MODALS - Wider on Desktop
   WHY: More room for policy text on larger screens
   ======================================== */

.policy-update-modal-dialog {
    max-width: 750px;
}

/* WHY: Shared backdrop for smooth modal transitions */
.modal-backdrop.show {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

/* WHY: Smooth crossfade between policy modals */
#privacyUpdatedModal,
#tosUpdatedModal {
    transition: opacity 0.3s ease-in-out;
    z-index: 1055; /* Above backdrop (1050) but allow stacking during transition */
    opacity: 0; /* Start hidden */
}

#privacyUpdatedModal.show,
#tosUpdatedModal.show {
    opacity: 1;
    z-index: 1056; /* Showing modal on top during transition */
}

/* ========================================
   WELCOME MODAL
   ======================================== */

.welcome-modal-content {
    border: none;
    border-radius: 0;
    background: transparent;
}

.welcome-modal-body {
    padding: 0;
    overflow-y: auto;
}

/* ========================================
   CREDITS ADDED MODAL
   ======================================== */

.credits-modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.credits-modal-body {
    padding: 40px;
    text-align: center;
}

.credits-modal-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.credits-modal-title {
    color: #667eea;
    font-weight: 700;
    margin-bottom: 15px;
}

.credits-modal-text-main {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 10px;
}

.credits-amount {
    color: #667eea;
    font-size: 1.5rem;
}

.credits-modal-text-sub {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 5px;
}

.credits-modal-count {
    font-size: 1.4rem;
    font-weight: 600;
    color: #4caf50;
    margin-bottom: 0;
}

.credits-modal-btn {
    margin-top: 25px;
    padding: 12px 40px;
    font-size: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

/* ========================================
   APP UPDATE MODALS
   ======================================== */

.app-update-modal-content,
.app-success-modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.app-update-modal-body,
.app-success-modal-body {
    padding: 40px;
    text-align: center;
}

.app-update-modal-icon,
.app-success-modal-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

/* WHY: Bootstrap Icons styling for update modal - using CSS variables for all themes */
.app-update-modal-icon i {
    color: var(--theme-primary) !important;
}

.app-update-modal-btn i {
    margin-right: 8px;
}

/* WHY: Bootstrap Icons styling for success modal - using CSS variables for all themes */
.app-success-modal-icon i {
    color: var(--theme-primary) !important;
}

.app-success-modal-btn i {
    margin-right: 8px;
    color: #fff !important;
}

.app-update-modal-btn,
.app-success-modal-btn {
    padding: 12px 40px;
    font-size: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    color: white;
    font-weight: 600;
}

/* ========================================
   POLICY UPDATE MODALS
   ======================================== */

.policy-modal-content {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--modal-bg) 97%, var(--theme-primary)),
        var(--modal-bg));
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 15%, var(--border-color));
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 8%, transparent) inset;
}

.policy-modal-body {
    padding: 40px;
    padding-bottom: 30px;
    text-align: center;
}

.policy-modal-title {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
}

.policy-modal-title i {
    margin-right: 12px;
    font-size: 1.8rem;
}

[data-theme="dark"] .policy-modal-title {
    background: none;
    -webkit-text-fill-color: white;
    color: white;
}

[data-theme="dark"] .policy-modal-title i {
    color: white;
}

.policy-modal-list {
    margin: 30px auto;
    max-width: 580px;
    text-align: left;
}

/* WHY: Privacy modal bullets use shield icon */
#privacyUpdatedList li:before {
    content: '\f3ed';
}

/* WHY: TOS modal bullets use file-contract icon */
#tosUpdatedList li:before {
    content: '\f56c';
}

.policy-modal-btn {
    padding: 18px 40px;
    font-size: 1.43rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 
        0 4px 16px color-mix(in srgb, var(--theme-primary) 35%, transparent),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 40%, transparent) inset;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.policy-modal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.policy-modal-btn:hover::before {
    left: 100%;
}

.policy-modal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 32px color-mix(in srgb, var(--theme-primary) 50%, transparent),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 60%, transparent) inset;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary) 92%, white),
        color-mix(in srgb, var(--theme-secondary) 92%, white));
}

/* WHY: Max-height for policy modals on desktop - users scroll to button */
.policy-update-modal-dialog {
    max-width: 600px;
}

.policy-modal-body {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* WHY: Force scrollbar visibility on iOS/touch devices - iOS hides overlay scrollbars by default */
@supports (-webkit-touch-callout: none) {
    .policy-modal-body {
        /* WHY: Create a visible scroll track area on iOS */
        scrollbar-width: thin;
        scrollbar-color: var(--theme-primary) rgba(255, 255, 255, 0.1);
        /* WHY: Add right padding to accommodate scrollbar and visual margin */
        padding-right: 15px;
    }
    
    /* WHY: Make webkit scrollbar always visible on iOS */
    .policy-modal-body::-webkit-scrollbar {
        width: 6px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 3px;
    }
    
    .policy-modal-body::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 3px;
        margin: 8px 0;
    }
    
    .policy-modal-body::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
        border-radius: 3px;
        min-height: 40px;
    }
}

/* WHY: Modern themed scrollbar matching onboarding/settings modal */
.policy-modal-body::-webkit-scrollbar {
    width: 8px;
}

.policy-modal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.policy-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
    border: none;
}

.policy-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}

.policy-modal-body::-webkit-scrollbar-button {
    display: none !important;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* WHY: Desktop with short height (<900px) - reduce margin to maximize modal space */
/* Override Bootstrap's --bs-modal-margin variable which controls centering */
@media (min-width: 769px) and (max-height: 900px) {
    .policy-update-modal-dialog {
        --bs-modal-margin: 20px;
        margin: 20px auto !important;
        max-height: calc(100vh - 40px);
    }
    
    .policy-modal-body {
        max-height: calc(100vh - 100px);
    }
}

@media (max-width: 768px) {
    /* WHY: Override Bootstrap's modal margin variable - this is the actual source of the spacing */
    .policy-update-modal-dialog {
        --bs-modal-margin: 15px;
        max-width: 95%;
        margin: 15px auto !important;
        max-height: calc(100vh - 30px);
        max-height: calc(100dvh - 30px);
    }
    
    /* WHY: Allow modal body to scroll on mobile */
    .policy-update-modal-dialog .modal-content {
        max-height: calc(100vh - 30px);
        max-height: calc(100dvh - 30px);
        display: flex;
        flex-direction: column;
    }
    
    .policy-modal-body {
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px !important;
    }
    
    /* WHY: Make title smaller on mobile and reduce margin to save space */
    .policy-modal-title {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .policy-modal-title i {
        margin-right: 8px;
        font-size: 1.3rem !important;
    }
    
    /* WHY: Ensure lists fit properly on mobile */
    .policy-modal-list {
        max-width: 100% !important; 
        margin: 10px 0 !important;
    }
    
    /* WHY: Ensure button has space at bottom on mobile */
    .policy-modal-btn {
        margin-top: 15px;
        margin-bottom: 10px;
    }
    
    /* WHY: Credits and app modals responsive on mobile */
    .credits-modal-body,
    .app-update-modal-body,
    .app-success-modal-body {
        padding: 25px 20px !important;
    }
    
    .credits-modal-icon,
    .app-update-modal-icon,
    .app-success-modal-icon {
        font-size: 3rem !important;
    }
    
    .app-update-modal-btn i,
    .app-success-modal-btn i {
        margin-right: 6px;
    }
}

/* WHY: Smooth blur transition for background modals */
.modal {
    transition: filter 0.3s ease;
}

/* WHY: Style like Aurion personality sliders with gradient */
.crop-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin-bottom: 0;
    opacity: 0.8;
}

.crop-slider:hover {
    opacity: 1;
}

/* Slider thumb - Webkit (Chrome, Safari) with gradient ring */
.crop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
    border: 0;
    transition: all 0.3s ease;
}

.crop-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
}

.crop-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 50%, transparent),
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
}

/* Slider thumb - Firefox with gradient ring */
.crop-slider::-moz-range-thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
    border: 0;
    transition: all 0.3s ease;
}

.crop-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
}

.crop-slider::-moz-range-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-primary) 50%, transparent),
                inset 0 0 0 4px var(--modal-bg),
                inset 0 0 0 8px transparent,
                inset 0 0 0 9px var(--theme-primary);
}

/* Dark mode */
:root[data-theme="dark"] .crop-slider::-webkit-slider-thumb {
    background: #f5f5f5;
}

:root[data-theme="dark"] .crop-slider::-moz-range-thumb {
    background: #f5f5f5;
}

/* Mobile responsive - full screen crop modal */
@media (max-width: 767px) {
    #cropModal .modal-dialog {
        max-width: 100%;
        height: 100%;
        margin: 0;
    }
    
    #cropModal .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    #cropModal .modal-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .crop-container {
        max-width: 100%;
        width: calc(100vw - 40px);
        height: calc(100vw - 40px);
        max-height: 400px;
    }
    
    .crop-slider-container {
        margin-top: 20px;
    }
    
    #cropModal .modal-footer {
        padding: 20px;
        gap: 10px;
    }
    
    #cropModal .btn-secondary,
    #cropModal .btn-primary {
        font-size: 1rem;
        padding: 10px 24px;
    }
}

/* ========================================
   FADE STREAMING ANIMATION
   WHY: Smooth fade-in for complete chunks (sentences, bullets, table rows)
   ======================================== */

/* WHY: Wrapper for fade-in content - minimal impact on layout */
.fade-chunk-wrapper {
    /* WHY: No margin/padding to avoid spacing issues */
    margin: 0;
    padding: 0;
    /* WHY: Inherit display to preserve markdown structure (block for paragraphs, etc.) */
}

/* WHY: Fade-in effect using CSS transitions instead of animations */
/* Start state: invisible and slightly down */
.fade-chunk {
    opacity: 0;
    transform: translateY(8px);
    /* WHY: Transition set dynamically via JavaScript based on FADE_RENDER_DURATION */
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
}

/* WHY: Trigger the fade-in by changing opacity and position */
.fade-chunk.fade-chunk-active {
    opacity: 1;
    transform: translateY(0);
}

/* WHY: Prevent transition from replaying on re-renders */
.fade-chunk-complete {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
}