/** * LIMOR AI - CLS Prevention (Cumulative Layout Shift Fix) * ======================================================= * Reserve space for dynamically injected elements to prevent layout shift. * Load this CSS early (before limor-complete.css) or inline it. * * Created: 2025-12-11 * Issue: Elements shift when navigation-system.js injects navbar/sidebar * Solution: Reserve exact space before JS runs * * Usage: * Or inline the critical CSS in */ /* ============================================ NAVBAR SPACE RESERVATION Height: 64px (--navbar-height) ============================================ */ #limor-navigation { min-height: var(--navbar-height, 64px); background: var(--bg-navbar, var(--bg-surface)); /* Prevent collapse when empty */ display: block; } /* ============================================ SIDEBAR SPACE RESERVATION Width: 240px (--sidebar-width) ============================================ */ #limor-sidebar { min-width: var(--sidebar-width, 240px); min-height: calc(100vh - var(--navbar-height, 64px) - 4rem); background: var(--bg-sidebar, var(--bg-surface)); /* RTL: sidebar appears on right */ order: 1; /* Prevent collapse when empty */ display: block; flex-shrink: 0; } /* ============================================ MAIN LAYOUT STRUCTURE Flex container for sidebar + content ============================================ */ .main-layout { display: flex; gap: 2rem; margin-top: 2rem; width: 100%; align-items: flex-start; justify-content: flex-start; } /* Main content takes remaining space */ .main-content { flex: 1; order: 2; min-width: 0; /* Prevent overflow in flex */ } /* ============================================ CHAT CONTAINER RESERVATION Optional - for floating chat widget ============================================ */ #limor-chat-container { /* No space needed - it's a floating element */ position: fixed; } /* ============================================ MOBILE OVERRIDES On mobile, sidebar becomes off-canvas ============================================ */ @media (max-width: 767px) { #limor-sidebar { min-width: 0; min-height: 0; position: fixed; width: 280px; height: 100vh; right: -280px; /* Hidden off-screen for RTL */ top: 0; z-index: 1000; transition: right 0.3s ease; } #limor-sidebar.open { right: 0; } .main-layout { flex-direction: column; } .main-content { order: 1; width: 100%; } }