/* DeepAgents Web - Modern CSS Styles */

:root {
    /* Color Palette - Light Theme (Default) */
    --primary: #2563eb;       /* Blue 600 */
    --primary-rgb: 37, 99, 235; /* Blue 600 RGB */
    --primary-dark: #1d4ed8;  /* Blue 700 */
    --primary-light: #3b82f6; /* Blue 500 */
    --secondary: #059669;     /* Emerald 600 */
    --accent: #d97706;        /* Amber 600 */
    --danger: #dc2626;        /* Red 600 */
    
    /* Eisenhower Matrix Colors */
    --quadrant-1: #ef4444;    /* Red 500 - Urgent & Important */
    --quadrant-2: #f59e0b;    /* Amber 500 - Not Urgent & Important */
    --quadrant-3: #3b82f6;    /* Blue 500 - Urgent & Unimportant */
    --quadrant-4: #10b981;    /* Emerald 500 - Not Urgent & Unimportant */
    
    --bg-dark: #ffffff;       /* White (Changed from Slate 50) */
    --bg-darker: #f8fafc;     /* Slate 50 */
    --bg-card: #ffffff;       /* White */
    --bg-card-hover: #f1f5f9; /* Slate 100 */
    --bg-input: #f8fafc;      /* Slate 50 */
    --bg-message-user: #eff6ff; /* Blue 50 */
    --bg-hover: rgba(0, 0, 0, 0.05); /* Generic hover */
    --bg-glass: rgba(255, 255, 255, 0.7);
    
    --text-primary: #1e293b;   /* Slate 800 */
    --text-secondary: #475569; /* Slate 600 */
    --text-muted: #94a3b8;     /* Slate 400 */
    
    --border-color: #e2e8f0;   /* Slate 200 */
    --border-light: #cbd5e1;   /* Slate 300 */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    
    /* Spacing */
    --sidebar-width: clamp(240px, 20vw, 300px);
    --header-height: clamp(48px, 6vh, 64px);
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --mobile-input-space: 0px;
    --keyboard-inset: 0px;
    --vv-bottom-inset: 0px;
    --safe-area-top: constant(safe-area-inset-top);
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-right: constant(safe-area-inset-right);
    --safe-area-right: env(safe-area-inset-right);
    --safe-area-bottom: constant(safe-area-inset-bottom);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: constant(safe-area-inset-left);
    --safe-area-left: env(safe-area-inset-left);

    --tool-panel-width: 450px;
}

/* Dark Theme - Cyberpunk Dark */
[data-theme="default"], [data-theme="dark"] {
    /* Deep, rich blacks with vibrant neon accents */
    --primary: #8b5cf6;       /* Violet 500 */
    --primary-rgb: 139, 92, 246; /* Violet 500 RGB */
    --primary-dark: #7c3aed;  /* Violet 600 */
    --primary-light: #a78bfa; /* Violet 400 */
    --secondary: #10b981;     /* Emerald 500 */
    --accent: #f59e0b;        /* Amber 500 */
    --danger: #ef4444;        /* Red 500 */
    
    --bg-dark: #050505;       /* Almost Black */
    --bg-darker: #000000;     /* Pure Black */
    --bg-card: #121212;       /* Dark Grey */
    --bg-card-hover: #1e1e1e; /* Lighter Grey */
    --bg-input: #121212;      /* Dark Grey */
    --bg-message-user: #2e1065; /* Violet 950 */
    --bg-hover: rgba(255, 255, 255, 0.05); /* Generic hover */
    --bg-glass: rgba(18, 18, 18, 0.7);
    
    --text-primary: #f4f4f5;   /* Zinc 100 */
    --text-secondary: #a1a1aa; /* Zinc 400 */
    --text-muted: #52525b;     /* Zinc 600 */
    
    --border-color: #27272a;   /* Zinc 800 */
    --border-light: #3f3f46;   /* Zinc 700 */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.8);
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff; /* Pure white background */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Hide splash screen when not loading */
body:not(.is-loading) #splash-screen {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Hide splash screen on desktop (min-width: 768px) */
@media (min-width: 768px) {
    #splash-screen {
        display: none !important;
    }
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: splashEnter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.splash-logo {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
}

.splash-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* Removed splash-ring styles */

.splash-title {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #000000; /* Black text on white bg */
    letter-spacing: 0.5px;
    margin: 0;
    opacity: 0.9;
}

.splash-subtitle {
    font-size: 0.9rem;
    color: #666666; /* Dark grey subtitle */
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: -0.5rem;
}

.splash-loader {
    width: 140px;
    height: 2px;
    background: #f0f0f0; /* Light grey track */
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2rem;
    position: relative;
}

.loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: #000000; /* Black loader */
    border-radius: 2px;
    animation: loading 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes loading {
    0% { left: -40%; width: 40%; }
    50% { width: 60%; }
    100% { left: 100%; width: 40%; }
}

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

/* Hide splash on desktop if desired, but user asked for mobile mostly. 
   We can keep it for both for consistency, or hide it via media query.
   Let's keep it for all but maybe shorter on desktop. */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100dvh; /* Use dynamic viewport height for mobile */
    /* height: -webkit-fill-available; Removed to prevent white bar at bottom */
    margin: 0;
    padding: 0;
    overflow: hidden !important; /* Lock root scrolling */
    position: fixed; /* Lock body on iOS */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark); /* Ensure background covers full screen */
    color: var(--text-primary);
    line-height: 1.6;
    font-size: clamp(14px, 1vw + 10px, 16px); /* Fluid font size */
    overscroll-behavior: none; /* Prevent bounce effects revealing background */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

/* App Container */
.app-container {
    display: flex;
    position: absolute;
    top: var(--viewport-offset-top, 0px); /* Adjust top based on visual viewport */
    left: 0;
    right: 0;
    bottom: 0; /* Force bottom anchor */
    width: 100%;
    height: 100dvh; /* Force full dynamic height */
    height: var(--app-height, 100dvh); /* Allow JS override but default to dvh */
    overflow: hidden;
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    /* padding-bottom: var(--safe-area-bottom); Removed to allow content to flow behind home indicator */
}

.diary-navbar,
.panel-header,
#dashboardApp .diary-navbar,
#fileViewerView .diary-navbar,
#fileApp .diary-navbar,
#settingsApp .diary-navbar,
#gameApp .diary-navbar,
#taskDetailApp .diary-navbar {
    position: sticky;
    top: var(--viewport-offset-top, 0px);
    padding-top: var(--safe-area-top);
    min-height: calc(var(--header-height) + var(--safe-area-top));
    box-sizing: border-box;
    z-index: 5000;
}

.auth-header {
    padding-top: var(--safe-area-top);
    position: sticky;
    top: var(--viewport-offset-top, 0px);
    z-index: 6000;
}

/* Force scrollable containers for sub-apps */
.mobile-scrollable,
.chat-messages,
.panel-content,
.diary-list-content,
.editor-content-area,
.file-list-content,
.file-viewer-content,
.file-preview-content,
.markdown-preview,
.diary-markdown-preview,
.diary-markdown-editor,
.sheet-content,
.game-shelf,
.dashboard-content,
.schedule-content-wrapper,
.year-view {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-card); /* Fallback */
    background: rgba(255, 255, 255, 0.85); /* Light mode glass */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(226, 232, 240, 0.6); /* Transparent border */
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal), transform var(--transition-normal);
    z-index: 100;
    flex-shrink: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02); /* Subtle depth */
}

/* Dark mode sidebar override */
[data-theme="default"] .sidebar, [data-theme="dark"] .sidebar {
    background: rgba(18, 18, 18, 0.85);
    border-right: 1px solid rgba(39, 39, 42, 0.6);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}

.sidebar.hidden-sidebar {
    width: 0 !important;
    border-right: none !important;
    overflow: hidden !important;
    min-width: 0 !important;
    opacity: 0;
}

.sidebar-header {
    height: var(--header-height);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent; /* Cleaner look */
    margin-bottom: 0.5rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    font-size: 1.5rem;
    border-radius: 8px; /* Soft rounded corners (squircle-like) */
}

.tech-text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.1em;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #e0e7ff 40%,
        #00fff9 50%,
        #6366f1 60%,
        #ffffff 100%
    );
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6s linear infinite;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Light Theme Optimization for Logo */
[data-theme="light"] .tech-text {
    background: linear-gradient(
        90deg,
        #2563eb 0%,       /* Blue 600 */
        #4f46e5 40%,      /* Indigo 600 */
        #0ea5e9 50%,      /* Sky 500 */
        #4f46e5 60%,      /* Indigo 600 */
        #2563eb 100%      /* Blue 600 */
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.15));
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}



/* Navigation */
.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem; /* Tighter horizontal padding */
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.sidebar-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.nav-section {
    margin-bottom: 1.5rem; /* More breathing room */
}

.nav-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    opacity: 0.7;
}

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0.75rem; /* Softer corners */
    /* Improved transition for smooth active state change */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.nav-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
    transform: translateX(4px);
}
[data-theme="default"] .nav-btn:not(.active):hover, [data-theme="dark"] .nav-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Active State - Modern Pill Style */
.nav-btn.active {
    background: var(--primary); /* Solid primary color */
    color: white; /* Always white text on active */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); /* Glow matching primary */
    font-weight: 600;
    transform: none; /* Reset transform to avoid jumpiness */
}
[data-theme="default"] .nav-btn.active, [data-theme="dark"] .nav-btn.active {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); /* Violet glow */
}

/* Icons */
.nav-btn i {
    width: 1.25rem;
    text-align: center;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.nav-btn:not(.active):hover i {
    opacity: 1;
    transform: scale(1.1);
}

.nav-btn.active i {
    opacity: 1;
    color: white; /* Icon white on active */
    transform: scale(1.05); /* Slight scale for active state too */
}

/* Ripple Effect for Click */
.nav-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    border-radius: 50%;
}
.nav-btn:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
    transition: 0s;
}

.user-info {
    margin: 0 0.75rem 0.75rem; /* Add margin to float */
    padding: 0.85rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.5); /* Glass card */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.5);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-light);
}

[data-theme="default"] .user-info, [data-theme="dark"] .user-info {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}
[data-theme="default"] .user-info:hover, [data-theme="dark"] .user-info:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.user-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border-radius: 12px; /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
}

.user-avatar i {
    font-size: 1.2rem;
    color: white;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.user-details .username {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.sidebar-footer {
    padding: 0; /* Remove padding as user-info has margin */
    background: transparent;
    border-top: none;
    z-index: 10;
    margin-top: auto; /* Push to bottom */
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: row; /* Changed from column to row for side-panel layout */
    min-width: 0;
    min-height: 0;
    position: relative;
    background: var(--bg-dark);
}

/* Tool Panel Layout for Desktop */
@media (min-width: 1024px) {
    body.tool-panel-open .main-content {
        margin-right: var(--tool-panel-width);
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1; /* Allow it to shrink/grow */
    min-height: 0;
    min-width: 0; /* Prevent overflow */
    width: auto; /* Let flex handle width */
    position: relative; /* Ensure absolute children are positioned relative to this container */
}

.chat-header {
    height: var(--header-height);
    padding: 0 0.5rem; /* Reduced padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Force hide horizontal scroll */
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1rem 160px 1rem; /* Compact top padding */
    /* scroll-behavior: smooth;  <-- Removed to prevent scrolling lag during streaming */
    
    /* Premium Mesh Gradient Background - Moved here to cover full scrollable area */
    position: relative;
    background-color: transparent;
    /* Gradient removed as per user request */
    isolation: isolate;
}

/* Background Word Cloud */
.background-word-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    padding: 2rem;
}

/* Show state triggered by JS */
.main-content.show-art .background-word-cloud {
    opacity: 1;
}

.word-cloud-item {
    padding: 1rem 2rem;
    font-weight: 800;
    white-space: nowrap;
    user-select: none;
    cursor: default;
    /* Base color, will be overridden by JS for variety if needed */
    color: var(--text-muted);
    opacity: 0.15; /* Subtle by default */
    transition: transform 0.5s ease, opacity 0.5s ease;
    /* Default animation */
    animation: float-word 10s ease-in-out infinite;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Specific highlight styles */
.word-cloud-item.highlight {
    background: linear-gradient(135deg, #ef4444, #f59e0b); /* Red to Amber */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.25; /* Subtle */
    font-weight: 900;
    z-index: 1;
}

@keyframes float-word {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -10px) rotate(2deg); }
    50% { transform: translate(-5px, 5px) rotate(-1deg); }
    75% { transform: translate(-10px, -5px) rotate(1deg); }
}

@keyframes float-center {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -55%) scale(1.05); }
}

.chat-messages::before {
    display: none; /* Hide noise texture as well */
}

/* Mobile adjustments for chat area */
/* Responsive Optimizations for All Sizes */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }
    /* Removed forced collapsed sidebar logic */
}

@media (min-width: 1440px) {
    .input-wrapper {
        max-width: 900px;
        margin: 0 auto;
    }
    .chat-input-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .chat-messages {
        padding: 0 0 120px 0; /* Adjusted from 160px for tighter fit */
    }
    
    /* Removed .chat-input-container override to respect global safe-area padding */
}

.scroll-to-bottom-btn {
    position: absolute;
    right: 1.25rem;
    bottom: 124px;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    z-index: 60;
}

.scroll-to-bottom-btn:hover {
    background: var(--bg-card-hover);
}

.scroll-to-bottom-btn.show {
    display: inline-flex;
}

/* Suggestion Chips */
.suggestion-chips-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto 0.25rem auto; /* Reduced bottom margin to 0.25rem */
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem; /* Reduced gap to 0.5rem */
    flex-wrap: nowrap;
    pointer-events: auto; /* Allow clicking */
    animation: fade-in-up 0.5s ease-out;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1rem; /* Reduced vertical padding */
    scrollbar-width: none; /* Firefox */
    position: relative;
    z-index: 10; /* Lower than input wrapper */
}

.suggestion-chips-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.suggestion-chip {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.35rem 0.85rem; /* Reduced padding for compactness */
    font-size: 0.85rem; /* Slightly smaller font */
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-shrink: 0; /* Prevent shrinking */
    white-space: nowrap; /* Prevent text wrap */
}

.suggestion-chip:hover {
    background: var(--bg-card);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.suggestion-chip i {
    color: var(--primary);
    font-size: 1rem;
}

/* Chat Input Area */
.chat-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Use padding-bottom to handle safe area, plus a fixed gap */
    /* Increased base padding from 1rem to 2rem for consistent floating look */
    padding: 0 2rem calc(2rem + var(--safe-area-bottom)) 2rem;
    /* Floating positioning */
    position: absolute;
    /* Use bottom: 0 and rely on padding for spacing */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: linear-gradient(to top, var(--bg-dark) 20%, transparent 100%);
    pointer-events: none; /* Let clicks pass through empty areas */
    /* Adjust bottom based on keyboard inset if present */
    transform: translateY(calc(0px - var(--keyboard-inset, 0px)));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 800px; /* Reduced from 900px */
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* Re-enable clicks */
    min-height: 56px; /* Collapsed height */
    position: relative;
    z-index: 20; /* Ensure it stays above chips */
    /* Ensure no extra margin interfering with bottom spacing */
    margin-bottom: 0; 
}

/* Collapsed state (default) */
.input-wrapper:not(.expanded) {
    min-height: 56px;
    padding: 0.5rem 1rem;
    align-items: center;
    flex-direction: row;
}

.input-wrapper:not(.expanded) #chatInput {
    height: auto !important;
    min-height: 24px;
    padding: 0;
}

.input-wrapper:not(.expanded) .input-footer {
    width: auto;
    flex-shrink: 0;
}

.input-wrapper:not(.expanded) .custom-model-selector,
.input-wrapper:not(.expanded) .upload-btn,
.input-wrapper:not(.expanded) .voice-btn {
    display: none; /* Hide extra tools in collapsed mode */
}

.input-wrapper:not(.expanded) .send-btn {
    width: 32px;
    height: 32px;
}

/* Expanded state */
.input-wrapper.expanded {
    /* transform: translateY(-2px); Removed to maintain consistent bottom distance */
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.15);
    padding-top: 1rem; /* Reduced from 3.5rem as toggles are now outside */
    position: relative;
    /* animation: slide-up-input 0.3s cubic-bezier(0.4, 0, 0.2, 1); Removed to prevent jump */
}

/* @keyframes slide-up-input {
    from { transform: translateY(10px); opacity: 0.8; }
    to { transform: translateY(-2px); opacity: 1; }
} */

.input-wrapper.expanded #chatInput {
    min-height: 40px; /* Reduced from 60px */
}

/* Segmented Control for Schedule Views */
.segmented-control {
    display: flex;
    background: var(--bg-card-hover);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.segment-btn {
    border: none;
    background: transparent;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.segment-btn:hover {
    color: var(--text-primary);
}

.segment-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Schedule Panel Overlay */
.schedule-panel-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.schedule-panel-overlay.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.schedule-bottom-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85vh;
    background: var(--bg-card);
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.schedule-panel-overlay.open .schedule-bottom-sheet {
    transform: translateY(0);
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.sheet-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sheet-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sheet-action-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-right: 0.5rem;
}

.sheet-action-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    transform: scale(1.1);
}

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

.sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* .input-wrapper:focus-within {
    Removed default focus-within styles to handle via class
} */

#chatInput {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    resize: none;
    min-height: 28px; /* Ensure at least one line height + padding */
    max-height: 300px;
    /* Increase padding to ensure cursor and text align correctly */
    padding: 2px 0;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
}

#chatInput:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
}

/* Voice Visualizer */
.voice-visualizer {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 32px; /* Match new compact input height */
    z-index: 10;
    pointer-events: none;
    color: var(--primary);
}

.voice-wave-bar {
    width: 3px; /* Slightly thinner */
    height: 60%; /* Smaller bars */
    background: var(--primary);
    border-radius: 2px;
    animation: voice-bar 1s ease-in-out infinite;
}

.voice-wave-bar:nth-child(1) { animation-delay: 0.0s; height: 40%; }
.voice-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 70%; }
.voice-wave-bar:nth-child(3) { animation-delay: 0.2s; height: 100%; }
.voice-wave-bar:nth-child(4) { animation-delay: 0.3s; height: 70%; }
.voice-wave-bar:nth-child(5) { animation-delay: 0.4s; height: 40%; }

@keyframes voice-bar {
    0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

.voice-text {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    animation: pulse 1.5s infinite;
}

.input-wrapper.voice-mode {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Hide input when voice active - REMOVED to keep layout space
.input-wrapper.voice-mode #chatInput {
    display: none;
} 
*/
.input-wrapper.voice-mode #chatInput {
    /* Ensure it takes up space but is invisible (handled by JS visibility: hidden) */
    display: block !important; 
}

/* Show visualizer when voice active */
.input-wrapper.voice-mode #voiceVisualizer {
    display: flex !important;
}

/* Hide original voice wave in button when active (since we show it in box) */
.input-wrapper.voice-mode .voice-btn .voice-wave-container {
    display: none;
}

.input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.input-tools-left, .input-tools-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.upload-btn, .send-btn, .stop-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    /* Fixed size for circular buttons */
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.upload-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

/* Voice Input Button (Kimi Style) */
.voice-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
    overflow: visible; /* Allow waves to spread out */
    flex-shrink: 0;
}

.voice-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.voice-btn.recording {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.voice-wave-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

.voice-btn.recording .voice-wave-container {
    display: block;
}

.voice-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.3);
    opacity: 0;
    z-index: -1;
}

.voice-btn.recording .voice-wave:nth-child(1) {
    animation: wave-animation 1.5s infinite;
}

.voice-btn.recording .voice-wave:nth-child(2) {
    animation: wave-animation 1.5s infinite 0.5s;
}

.voice-btn.recording .voice-wave:nth-child(3) {
    animation: wave-animation 1.5s infinite 1.0s;
}

@keyframes wave-animation {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }
    100% {
        width: 180%; /* Reduced from 250% */
        height: 180%; /* Reduced from 250% */
        opacity: 0;
    }
}

.send-btn {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 6px rgba(139, 92, 246, 0.2);
}

.send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(139, 92, 246, 0.3);
}

.stop-btn {
    color: var(--danger);
    border: 1px solid var(--danger);
    background: rgba(239, 68, 68, 0.05);
    position: relative;
    overflow: hidden;
    animation: pulse-red-shadow 2s infinite;
}

.stop-btn:hover {
    background: var(--danger);
    color: white;
    animation: none;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}

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

@keyframes pulse-red-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        border-color: rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
        border-color: var(--danger);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        border-color: rgba(239, 68, 68, 0.4);
    }
}

.input-hints {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.voice-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
    z-index: 1200;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
    padding: 1rem;
}

.voice-sheet.open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.voice-sheet-panel {
    width: 100%;
    max-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
}

.voice-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.voice-sheet-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.voice-sheet-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

.voice-hold-btn {
    width: 100%;
    height: 56px;
    border-radius: 28px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: none;
    transition: var(--transition-fast);
}

.voice-hold-btn:active {
    transform: scale(0.98);
}

#voiceSheet[data-state="recording"] .voice-hold-btn {
    background: var(--primary-dark);
}

#voiceSheet[data-state="cancel"] .voice-hold-btn {
    background: var(--danger);
}

#voiceSheet[data-state="processing"] .voice-hold-btn {
    background: var(--bg-card-hover);
    color: var(--text-muted);
    cursor: default;
}

.voice-sheet-transcript {
    margin-top: 0.75rem;
    min-height: 52px;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-darker);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

kbd {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    font-family: monospace;
}

/* Welcome Message */
.welcome-message {
    max-width: 950px;
    margin: 4rem auto;
    text-align: center;
    animation: fadeIn 0.5s ease;
    padding: 0 1rem;
}

.welcome-message h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-message p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.feature-card i {
    font-size: 1.5rem;
    color: var(--primary);
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Hero Card */
.hero-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
}

.hero-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.card-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.hero-card i {
    font-size: 2.5rem;
}

/* Game Hall */
.game-hall-container {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background: var(--bg-dark);
}

.game-hall-header {
    margin-bottom: 2rem;
    text-align: center;
}

.game-hall-header h2 {
    font-size: 2rem;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--primary-light);
    margin-bottom: 0.5rem;
}

.game-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.game-card {
    background: var(--bg-card);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition-normal);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.game-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.game-cover {
    height: 160px;
    background: linear-gradient(45deg, #2e1065, #4c1d95);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.game-cover i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.2);
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.game-card:hover .game-overlay {
    opacity: 1;
}

.play-text {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.game-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-info h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-light);
}

.game-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
    flex: 1;
}

.game-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-light);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.coming-soon {
    opacity: 0.7;
    cursor: default;
}

.coming-soon:hover {
    transform: none;
    border-color: var(--border-color);
    box-shadow: none;
}

/* Hint Text */
.hint {
    margin-top: 3rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.6;
    letter-spacing: 0.05em;
}

/* Message Bubbles */
.message {
    display: flex;
    gap: 1.5rem;
    max-width: 850px; /* Reduced from 950px for more compact look */
    margin: 0 auto 2rem auto;
    width: 100%;
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    display: none !important;
}

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

.default-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

.message-content {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0 1.25rem;
    line-height: 1.7;
}

.message.user .message-content {
    background: var(--primary);
    border: none;
    border-radius: 1.25rem 1.25rem 0.25rem 1.25rem; /* Standard modern chat bubble */
    padding: 0.85rem 1.25rem;
    max-width: 100%;
    margin-left: auto;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.25);
    color: white;
    position: relative;
    font-weight: 400;
    line-height: 1.6;
}

/* Remove the cheap shine effect */
.message.user .message-content::before {
    display: none;
}

/* Tool Calls Styling */
.tool-call {
    margin: 0.1rem 0;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    background: transparent;
    width: fit-content; /* Narrow width */
    max-width: 100%;
    box-shadow: none;
    transition: all 0.2s;
}

.tool-call:hover {
    background: var(--bg-hover);
}

.tool-call.expanded {
    margin: 1rem 0;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    width: 100%; /* Expand to full width when open */
}

/* ... (existing styles) */

/* Modern Component System */

/* 1. Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    line-height: 1.2;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.96);
}

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Primary Button */
.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 10px -1px rgba(var(--primary-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.96);
}

/* Secondary/Cancel Button */
.btn-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
    color: white;
}

/* Danger Button */
.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.4);
}

/* Danger Outline Button */
.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger-outline:hover {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* 2. Inputs */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.input-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.2rem;
}

.input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

.input:hover {
    border-color: var(--border-light);
}

.input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background: var(--bg-card);
}

.input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* 3. Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: var(--transition-normal);
}

.card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

/* 4. Modals (Enhanced) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 5000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show,
.modal.open {
    display: flex; /* Flex when shown */
    opacity: 1;
}

.modal-content {
    background: var(--bg-card);
    width: 90%;
    max-width: 500px;
    border-radius: 1.2rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal.large-preview .modal-content {
    max-width: 1000px;
    width: 95%;
    height: 90vh;
    max-height: 90vh;
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-darker);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    color: var(--text-secondary);
    line-height: 1.6;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--bg-darker);
}

/* Animations */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.tool-call-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: var(--transition-fast);
}

.tool-call-header:hover {
    background: transparent;
}

/* Tool icon and name */
.tool-call-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: normal;
}

.tool-call-name i {
    color: inherit;
    width: 1.2em;
    text-align: center;
    opacity: 0.8;
}

.tool-call-time {
    margin-left: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: normal;
}

.tool-call-toggle {
    color: var(--text-muted);
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.tool-call.expanded .tool-call-toggle {
    transform: rotate(180deg);
}

.tool-call.expanded .tool-call-header {
    border-bottom-color: var(--border-color);
    background: var(--bg-darker);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
}

.tool-call-body {
    padding: 1rem;
    background: var(--bg-darker);
    /* border-top handled by header border-bottom */
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    display: none;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tool-call.expanded .tool-call-body {
    display: block;
}

.tool-call-section {
    margin-bottom: 1rem;
}

.tool-call-section:last-child {
    margin-bottom: 0;
}

.tool-call-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.tool-call-section pre {
    margin: 0;
    background: rgba(0,0,0,0.2);
    padding: 0.75rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.05);
}

.tool-call-section code {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    color: var(--text-secondary);
}

/* Modern Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    line-height: 1.2;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 8px -1px rgba(var(--primary-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: #dc2626; /* Darker red */
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(239, 68, 68, 0.4);
}

.btn-text {
    background: transparent;
    color: var(--text-muted);
    padding: 0.5rem;
}

.btn-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Custom Select Dropdown Styling */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
    padding-right: 2rem !important; /* Make room for arrow */
    cursor: pointer;
}

select:hover {
    border-color: var(--primary-light);
}

select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Modern Input Fields */
input[type="text"], 
input[type="password"], 
input[type="email"],
input[type="number"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background: var(--bg-card);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Modal Enhancements */
.modal {
    display: none;
    position: fixed;
    z-index: 10000; /* Ensure this is higher than anything else (Diary is 200) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease-out;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem; /* Softer corners */
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.5), 
        0 8px 10px -6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; /* Ensure stacking context */
    z-index: 10001;
}

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

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

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

.modal-body {
    padding: 1.5rem;
    background: var(--bg-card);
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-darker); /* Subtle contrast for footer */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Close Button refinement */
.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: rotate(90deg);
}

#authModal {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
}

/* Auth Modal Styling (Adaptive Theme) */
#authModal .auth-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    box-shadow: 
        var(--shadow-lg),
        0 0 0 1px rgba(var(--primary-rgb), 0.1);
    max-width: 380px;
    width: 90%;
    /* Ensure content is scrollable when keyboard opens */
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    position: relative;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Header Section */
.auth-header {
    text-align: center;
    padding: 2.5rem 2rem 1rem 2rem;
    position: relative;
    background: radial-gradient(circle at top, var(--bg-card-hover), transparent 70%);
}

.auth-icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--bg-darker);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 1.75rem;
    color: var(--primary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.auth-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

#authModal .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: var(--bg-hover);
    border-radius: 50%;
    transition: all 0.2s;
    color: var(--text-muted);
    border: 1px solid transparent;
}

#authModal .modal-close:hover {
    background: var(--bg-card-hover);
    transform: rotate(90deg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Body Section */
.auth-body {
    padding: 1rem 2rem 2.5rem 2rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Simplified Form Styling */
.simple-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.simple-form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.simple-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.simple-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.simple-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background: var(--bg-card);
}

/* Fallback for focus ring */
.simple-input:focus {
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Error Message */
.auth-error {
    display: none; /* JS will toggle this */
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.3s ease;
}

/* Success Message Override */
.auth-error.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--secondary);
    color: var(--secondary);
}

.auth-error[style*="display: block"] {
    display: flex !important;
}

/* Submit Button */
.auth-submit-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem; /* Increased from 0.5rem to ~24px */
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: var(--primary-dark);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

/* Footer */
.auth-footer {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.auth-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    margin-left: 0.25rem;
}

.auth-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent; /* Initially transparent */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent; /* Hide thumb by default */
    border-radius: 3px;
    transition: background 0.3s ease;
}

/* Show scrollbar on hover (Desktop) or always (Mobile if supported) */
@media (hover: hover) {
    *:hover::-webkit-scrollbar-thumb {
        background: var(--border-light);
    }
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px; /* Thinner on mobile */
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.3); /* Semi-transparent grey on mobile */
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    html, body {
        height: 100%;
        height: 100dvh; /* Use dynamic viewport height for mobile */
        overflow: hidden;
        overscroll-behavior: none;
        position: fixed;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Universal scrollable container for mobile */
    .mobile-scrollable,
    .chat-messages,
    .panel-content,
    .diary-list-content,
    .editor-content-area,
    .file-list-content,
    .file-viewer-content,
    .game-shelf {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .app-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Remove bottom padding to prevent double spacing, let content handle safe area */
        padding: var(--safe-area-top) var(--safe-area-right) 0 var(--safe-area-left);
        background-color: var(--bg-dark); /* Ensure background covers full area */
    }

    .main-content {
        height: 100%;
        /* Remove double padding from main content */
        padding: 0;
    }

    .chat-container {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .chat-header {
        height: 52px;
        padding: 0 1rem;
    }

    .chat-messages {
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 1rem 1rem calc(var(--mobile-input-space, calc(100px + var(--safe-area-bottom))) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px)) 1rem;
    }

    .chat-input-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        /* Default: use safe area padding */
        /* Increased from 4px to 1.25rem (20px) to prevent sticking to bottom */
        padding: 0 1rem calc(1.25rem + var(--safe-area-bottom)) 1rem;
        z-index: 80;
        /* Use a single background definition with gradient */
        /* This ensures no gaps between pseudo-elements */
        /* Gradient logic: Solid color from bottom up to (Safe Area + 1.25rem + 60px), then fade to transparent */
        background: linear-gradient(
            to top, 
            var(--bg-dark) 0%, 
            var(--bg-dark) calc(1.25rem + var(--safe-area-bottom) + 60px), 
            rgba(255,255,255,0) 100%
        );
        pointer-events: none;
        transform: none !important;
        transition: none !important;
    }

    /* When keyboard is open, remove bottom safe area padding and adjust gradient */
    body.keyboard-open .chat-input-container {
        /* Increased from 4px to 1rem (16px) to maintain gap even with keyboard */
        padding-bottom: 1rem !important;
        background: linear-gradient(
            to top, 
            var(--bg-dark) 0%, 
            var(--bg-dark) 80px, 
            rgba(255,255,255,0) 100%
        );
    }

    /* Dark theme adjustment for gradient colors */
    [data-theme="dark"] .chat-input-container,
    [data-theme="default"] .chat-input-container {
        background: linear-gradient(
            to top, 
            var(--bg-dark) 0%, 
            var(--bg-dark) calc(1.25rem + var(--safe-area-bottom) + 60px), 
            rgba(0,0,0,0) 100%
        );
    }

    [data-theme="dark"] body.keyboard-open .chat-input-container,
    [data-theme="default"] body.keyboard-open .chat-input-container {
        background: linear-gradient(
            to top, 
            var(--bg-dark) 0%, 
            var(--bg-dark) 80px, 
            rgba(0,0,0,0) 100%
        );
    }

    .scroll-to-bottom-btn {
        right: 1rem;
        position: fixed;
        bottom: calc(var(--mobile-input-space, 148px) + var(--safe-area-bottom) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px));
        transform: translateY(-0.75rem);
    }

    .input-wrapper {
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 1.25rem;
        max-width: 100%;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100%;
        box-shadow: var(--shadow-lg);
        z-index: 2002;
        /* Sidebar needs its own safe area padding since it's fixed */
        padding-top: var(--safe-area-top); 
        padding-bottom: var(--safe-area-bottom);
    }

    .panel-header {
        padding-top: var(--safe-area-top);
        height: calc(var(--header-height) + var(--safe-area-top));
        box-sizing: content-box;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .side-panel {
        position: fixed;
        right: -100%;
        height: 100%;
        width: 100%;
        max-width: 100%; /* Override desktop max-width */
        z-index: 101;
    }
    
    .sidebar.open {
        left: 0;
        z-index: 2002 !important; /* Ensure it's above side panel (1001) */
    }

    /* Mobile Panel Layout - Revised for Animation */
    .side-panel.open {
        position: fixed !important;
        top: 0 !important;
        height: 100% !important;
        height: 100dvh !important; /* Ensure full height */
        z-index: 1001 !important;
        
        /* Full width on mobile, sliding from right */
        width: 100% !important;
        right: 0 !important;
        left: auto !important;
        margin: 0 !important;
        
        /* Ensure content respects safe area */
        padding-bottom: var(--safe-area-bottom);
        
        /* Ensure transform works */
        transform: translateX(0) !important;
    }
    
    .message {
        max-width: 100%;
    }
}

@media (hover: none) and (pointer: coarse) {
    html, body {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .app-container {
        height: 100vh;
        height: -webkit-fill-available;
        height: 100svh;
        height: 100dvh;
        height: var(--app-height, 100vh);
    }

    .chat-messages {
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 1rem 1rem calc(var(--mobile-input-space, 148px) + var(--safe-area-bottom) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px)) 1rem;
    }

    .chat-input-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        /* Force minimal padding, safe area handled by env() */
        padding: 0 1rem calc(4px + var(--safe-area-bottom)) 1rem;
        z-index: 80;
        background: linear-gradient(to top, var(--bg-dark) 35%, transparent 100%);
        pointer-events: none;
        transform: none !important;
        transition: none !important;
    }

    .scroll-to-bottom-btn {
        position: fixed;
        right: 1rem;
        bottom: calc(var(--mobile-input-space, 148px) + var(--safe-area-bottom) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px));
        transform: translateY(-0.75rem);
    }

    .input-wrapper {
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 1.25rem;
        max-width: 100%;
    }
}

html.is-standalone {
    --safe-area-bottom: 0px;
}

html.is-ios, html.is-ios body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.is-ios .app-container {
    height: 100vh;
    height: -webkit-fill-available;
    height: 100svh;
    height: 100dvh;
    height: var(--app-height, 100vh);
}

.is-ios .chat-messages {
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 1rem 1rem calc(var(--mobile-input-space, calc(100px + var(--safe-area-bottom))) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px)) 1rem;
    }

.is-ios .chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    /* Increased from 4px to 1.25rem (20px) */
    padding: 0 1rem calc(1.25rem + var(--safe-area-bottom)) 1rem;
    z-index: 80;
    background: linear-gradient(to top, var(--bg-dark) 35%, transparent 100%);
    pointer-events: none;
    transform: none !important;
    transition: none !important;
}

.is-ios .scroll-to-bottom-btn {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--mobile-input-space, 148px) + var(--safe-area-bottom) + var(--keyboard-inset, 0px) + var(--vv-bottom-inset, 0px));
    transform: translateY(-0.75rem);
    z-index: 5001;
}

.is-ios .input-wrapper {
    padding: 0.75rem;
    gap: 0.5rem;
    border-radius: 1.25rem;
    max-width: 100%;
}

.input-portal .chat-input-container {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0 !important;
    /* Increased from 0.25rem to 1.25rem */
    padding: 0 1rem calc(1.25rem + var(--safe-area-bottom)) 1rem;
    z-index: 80;
    background: linear-gradient(to top, var(--bg-dark) 35%, transparent 100%);
    pointer-events: none;
    transform: none !important;
    transition: none !important;
}

/* Rich File Card Styling */
.rich-file-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin: 1rem 0;
    overflow: hidden;
    transition: border-color 0.2s;
    position: relative;
}

.rich-file-card:hover {
    border-color: var(--primary);
}

.file-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.rich-file-card:hover .file-card-header {
    border-bottom-color: var(--border-color);
}

/* Removed .file-icon-wrapper styles */

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.1rem;
}

.file-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.action-btn.primary {
    color: var(--primary);
}

.action-btn.primary:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-dark);
}

.file-preview-content {
    padding: 1rem;
    background: var(--bg-darker); /* Slightly darker for contrast */
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 200px; /* Increased height slightly */
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--border-color);
    white-space: pre-wrap;
    word-break: break-all;
}

.file-preview-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--bg-darker));
    pointer-events: none;
}

/* Removed .preview-tag */

/* Add these to end of style.css */

/* Markdown Preview Styles within File Card */
.file-preview-content.markdown-preview {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.file-preview-content.markdown-preview h1,
.file-preview-content.markdown-preview h2,
.file-preview-content.markdown-preview h3,
.file-preview-content.markdown-preview h4,
.file-preview-content.markdown-preview h5,
.file-preview-content.markdown-preview h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

.file-preview-content.markdown-preview h1 { font-size: 1.1rem; }
.file-preview-content.markdown-preview h2 { font-size: 1rem; }
.file-preview-content.markdown-preview h3 { font-size: 0.95rem; }

.file-preview-content.markdown-preview p {
    margin-bottom: 0.5rem;
}

.file-preview-content.markdown-preview ul,
.file-preview-content.markdown-preview ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.file-preview-content.markdown-preview code {
    background-color: rgba(110, 118, 129, 0.4);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}

.file-preview-content.markdown-preview pre {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.file-preview-content.markdown-preview pre code {
    background-color: transparent;
    padding: 0;
    font-size: 100%;
}

.file-preview-content.markdown-preview blockquote {
    margin: 0 0 0.5rem;
    padding: 0 1em;
    color: var(--text-muted);
    border-left: 0.25em solid var(--border-color);
}

/* Side Panel Styles - Restored & Modified for Squeeze Layout */
.side-panel {
    /* Base styles */
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    z-index: 200;
    height: 100%;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
}

/* Desktop: Squeeze Layout */
@media (min-width: 769px) {
    .side-panel {
        position: relative; /* In flow to squeeze chat */
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        border-left: 1px solid var(--border-color);
    }

    /* Force width to 0 when not open to override any inline styles from resizer */
    .side-panel:not(.open) {
        width: 0 !important;
        border-left: none !important;
        overflow: hidden;
        min-width: 0 !important;
        padding: 0 !important;
    }

    .side-panel.open {
        width: 400px; /* Default width */
        /* min-width and max-width handled in resizer.css or JS */
    }
}

/* Mobile: Overlay Layout */
@media (max-width: 768px) {
    .side-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        transform: translateX(100%);
    }
    
    .side-panel.open {
        transform: translateX(0);
    }
}

/* Month View Improvements */
.month-view-container {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.5rem, 2vw, 1.5rem);
}

/* Ensure header row is a grid */
.month-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.5rem;
    text-align: center;
}

.month-header-row .week-header {
    padding: 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Ensure body is a grid */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Auto-rows fallback, but we will make it expand */
    grid-auto-rows: 1fr;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    /* Ensure it takes full height if container allows */
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.month-day {
    border-right: 1px solid rgba(var(--primary-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
    transition: all 0.2s ease;
    background: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(80px, 12vh, 140px);
}

.month-day:hover {
    background-color: rgba(var(--primary-rgb), 0.02) !important;
}

.day-events-list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
}

.day-events-list .event-chip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.month-day.past {
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-muted);
}

.month-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 10px;
    width: 100%;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    height: auto !important;
}

.month-day-number {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.month-day.today .month-day-number {
    background: var(--primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.month-day.other-month {
    opacity: 0.3;
    background: rgba(0, 0, 0, 0.01);
}

.month-day:nth-child(7n) {
    border-right: none;
}

/* Remove bottom border for last row (approximate) */
/* Hard to target last row exactly with generic CSS without knowing row count, 
   but grid container border handles the outer edge. */

/* User Dropdown Menu Styles */
.user-dropdown-menu {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 1rem;
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2), 0 -8px 10px -6px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    transform-origin: bottom center;
    animation: menu-slide-up 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 100;
}

@keyframes menu-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user-dropdown-menu.show {
    display: flex;
}

.user-menu-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.user-info:hover .user-menu-arrow {
    color: var(--primary);
    transform: translateY(-2px);
}

.user-info:hover .user-menu-arrow.rotated {
    transform: rotate(180deg) translateY(2px);
}

/* Mobile Modal Adaptations */
@media (max-width: 768px) {
    .modal-content {
        width: 90% !important;
        max-width: none !important;
        margin: 20px auto;
        padding: 1rem;
    }
    
    .user-dropdown-menu {
        width: calc(100% - 2rem);
        left: 1rem;
        right: 1rem;
        bottom: 80px; /* Position above user info */
        position: absolute;
    }
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.menu-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

/* User Info Area (Modernized) */
.sidebar-user-area {
    position: relative;
    width: 100%;
}

.user-info {
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
    user-select: none;
}

.user-info:hover {
    background: var(--bg-glass);
    border-color: rgba(var(--primary-rgb), 0.1);
}

.user-avatar {
    width: 2.2rem;
    height: 2.2rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.user-details .username {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-premium-tag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.premium-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.premium-text {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.user-menu-arrow {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
    opacity: 0.5;
    margin-left: 0.25rem;
}

.user-info:hover .user-menu-arrow {
    opacity: 1;
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
}

.user-menu-arrow.rotated {
    transform: rotate(180deg);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    opacity: 1;
}

/* User Dropdown Menu (Enhanced) */
.user-dropdown-menu {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 1rem;
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2), 0 -8px 10px -6px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    transform-origin: bottom center;
    animation: menu-slide-up 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 100;
}

@keyframes menu-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user-dropdown-menu.show {
    display: flex;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
}

.menu-item:hover {
    background: var(--bg-glass);
    color: var(--primary);
    transform: translateX(4px);
}

.menu-item i {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
    opacity: 0.8;
}

.menu-item#logoutBtn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.month-day:hover {
    background-color: var(--bg-hover) !important;
}

.holiday-badge {
    font-size: 0.65rem;
    background: #fef2f2;
    color: #ef4444;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-left: 4px;
    font-weight: 500;
}

.more-events {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2px 6px;
    font-weight: 500;
}

/* Mobile optimizations for Month View */
@media (max-width: 768px) {
    .month-view-container {
        padding: 0.25rem !important;
        height: calc(100vh - 120px) !important; /* Fix container height on mobile */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Ensure header row aligns with grid */
    .month-header-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-bottom: 0;
        text-align: center;
        border: none;
        padding-bottom: 0.25rem;
        flex-shrink: 0;
    }

    .month-header-row .week-header {
        padding: 0.25rem;
        font-size: 0.75rem; /* Smaller text */
        color: var(--text-muted);
    }
    
    .month-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr); /* Force 6 rows to fill container */
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        flex: 1;
        background: var(--bg-card);
    }

    .month-day {
        min-height: 0 !important; /* Allow shrinking */
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .month-day:nth-child(7n) {
        border-right: none;
    }

    .month-day-header {
        padding: 2px 4px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 20px;
    }

    .month-day-number {
        font-size: 0.75rem !important;
        font-weight: 500;
        margin-bottom: 0;
    }

    .holiday-badge {
        display: none; /* Hide holiday names on very small screens to save space */
    }

    .day-events-list {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 0 2px;
    }

    .event-chip {
        font-size: 0.6rem !important;
        padding: 1px 2px !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 2px !important;
    }

    .more-events {
        font-size: 0.6rem;
        text-align: center;
        padding: 0;
    }

    .holiday-badge {
        display: none; /* Hide holiday names on very small screens to save space */
    }

    /* Dot style for events on mobile */
    .day-events-list {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-start; /* Left align dots */
        gap: 3px !important;
        padding: 0 2px;
        margin-top: auto; /* Push to bottom */
        width: 100%;
        padding-bottom: 2px;
    }

    .day-events-list .event-chip {
        display: block !important;
        width: 6px;
        height: 6px;
        min-width: 6px; /* Force size */
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important; /* Hide text */
        color: transparent !important;
        overflow: hidden;
        background-color: var(--primary); /* Fallback color */
        border: none; /* No border for dots */
        margin: 0;
    }
    
    /* Specific colors for dots */
    .day-events-list .event-chip.quadrant-1 { background-color: #ef4444; }
    .day-events-list .event-chip.quadrant-2 { background-color: #f59e0b; }
    .day-events-list .event-chip.quadrant-3 { background-color: #3b82f6; }
    .day-events-list .event-chip.quadrant-4 { background-color: #10b981; }
    
    /* Hide the 'more' text on mobile */
    .more-events {
        display: none !important;
    }
}

.panel-header {
    height: var(--header-height);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    white-space: nowrap;
}

.panel-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.panel-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    /* transform: rotate(90deg); Removed for back button style */
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-width: 0; /* Changed from 300px to avoid layout issues */
}

/* When side panel is open, hide mobile sidebar close button to avoid clutter */
body:has(.side-panel.open) #mobileSidebarClose {
    display: none !important;
}

/* File Management & Search Styles */
.file-nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.file-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.file-action-btn:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

.file-action-btn.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

#fileSearchBar {
    padding: 10px 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    animation: fileSearchSlideDown 0.3s ease;
}

#fileSearchInput {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

#fileSearchInput:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

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

/* File Viewer Improvements */
.file-viewer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 768px) {
    #fileViewerTitle {
        display: none !important; /* Hide filename on mobile status bar */
    }
    
    .file-viewer-actions {
        margin-left: auto;
    }
    
    .panel-header {
        padding: 0 1rem;
    }
    
    /* Ensure back button isn't blocked by long content */
    #fileViewerContent {
        padding: 1rem;
    }
}

/* Dashboard App */
.dashboard-app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-darker);
    z-index: 6000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(0);
    visibility: visible;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* Desktop Sidebar Adjustments for Dashboard */
@media (min-width: 768px) {
    /* When sidebar is expanded (default) */
    body:not(.sidebar-hidden) .dashboard-app {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }
}

.dashboard-app.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* --- Desktop/Mobile Close Button Toggle --- */

/* Default (Mobile): Show back button (close-btn), hide desktop close (X) */
.desktop-close-btn {
    display: none !important;
}

.mobile-spacer {
    display: block;
}

/* Desktop Mode */
@media (min-width: 1024px) {
    /* Hide the "Back" button on left */
    .diary-navbar .close-btn {
        display: none !important;
    }
    
    /* Show the "X" button on right */
    .desktop-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0,0,0,0.05);
        color: var(--text-secondary);
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    
    .desktop-close-btn:hover {
        background: var(--danger);
        color: white;
    }

    .mobile-spacer {
        display: none;
    }

    /* Special handling for Diary App grid layout */
    #diaryListView .diary-navbar > div {
        /* On desktop, keep the 3-column grid but adjust contents */
    }
    
    /* Ensure title stays centered or left-aligned as needed */
    /* For standard flex navbars (Dashboard, Settings, Game, Files) */
    .diary-navbar {
        justify-content: space-between;
    }
    
    /* File App specific adjustments */
    #fileApp .diary-navbar {
        display: flex;
        align-items: center;
    }
    
    #fileApp .desktop-close-btn {
        margin-right: 0 !important; /* Reset inline style */
        order: 10 !important; /* Move to far right */
        margin-left: 8px;
    }
    
    #fileApp .diary-actions-right {
        margin-left: auto; /* Push actions to right, but before close button */
        order: 5 !important;
    }
}