/** * Critical boot CSS — must load in before auth-boot.js (prevents flash). * Not part of CSS bundles; linked directly from index.html. */ html.auth-booting #landingPage, html.fbc-ssr-dashboard #landingPage { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } html.auth-booting #appPage, html.fbc-ssr-dashboard #appPage { display: flex !important; visibility: visible !important; opacity: 0 !important; } html.fbc-boot-ready #appPage { opacity: 1 !important; transition: opacity 0.18s ease; } html.auth-booting #fbcBootVeil, html.fbc-ssr-dashboard #fbcBootVeil { display: flex !important; } #fbcBootVeil { transition: opacity 0.22s ease, visibility 0.22s ease; } html.fbc-boot-ready #fbcBootVeil { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.auth-booting, html.auth-booting body, html.fbc-ssr-dashboard, html.fbc-ssr-dashboard body { background: #f4f4f5 !important; } html.auth-booting[data-theme='dark'], html.auth-booting[data-theme='dark'] body, html.fbc-ssr-dashboard[data-theme='dark'], html.fbc-ssr-dashboard[data-theme='dark'] body { background: #030812 !important; } html.auth-booting[data-theme='light'], html.auth-booting[data-theme='light'] body, html.fbc-ssr-dashboard[data-theme='light'], html.fbc-ssr-dashboard[data-theme='light'] body { background: #eef2ff !important; } html.auth-booting.ent-dashboard[data-theme='light'], html.auth-booting.ent-dashboard[data-theme='light'] body, html.fbc-ssr-dashboard.ent-dashboard[data-theme='light'], html.fbc-ssr-dashboard.ent-dashboard[data-theme='light'] body { background: #eef2ff !important; } html.saas-v2-minimal #view-home { display: flex; flex-direction: column; gap: 0; padding-top: 0 !important; } html.saas-v2-minimal #view-home > #saasHomeV2 { order: -1; width: 100%; } html.saas-v2-minimal #view-home > :not(#saasHomeV2) { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } html.auth-booting .saas-topbar__quota:not(.quota-ready), html.fbc-ssr-dashboard .saas-topbar__quota:not(.quota-ready) { opacity: 0; pointer-events: none; } /* Hide wrong dashboard views during boot (prevents home flash before restore) */ html.auth-booting #appPage [id^="view-"], html.fbc-ssr-dashboard #appPage [id^="view-"] { display: none !important; visibility: hidden !important; } html.auth-booting[data-boot-view="home"] #view-home, html.fbc-ssr-dashboard[data-boot-view="home"] #view-home { display: flex !important; visibility: visible !important; } html.auth-booting[data-boot-view="messenger"] #view-messenger, html.fbc-ssr-dashboard[data-boot-view="messenger"] #view-messenger { display: flex !important; visibility: visible !important; } html.auth-booting[data-boot-view="broadcast"] #view-broadcast, html.fbc-ssr-dashboard[data-boot-view="broadcast"] #view-broadcast { display: flex !important; visibility: visible !important; } html.auth-booting[data-boot-view="scheduling"] #view-scheduling, html.auth-booting[data-boot-view="analytics"] #view-analytics, html.auth-booting[data-boot-view="referrals"] #view-referrals, html.auth-booting[data-boot-view="settings"] #view-settings, html.auth-booting[data-boot-view="help"] #view-help, html.fbc-ssr-dashboard[data-boot-view="scheduling"] #view-scheduling, html.fbc-ssr-dashboard[data-boot-view="analytics"] #view-analytics, html.fbc-ssr-dashboard[data-boot-view="referrals"] #view-referrals, html.fbc-ssr-dashboard[data-boot-view="settings"] #view-settings, html.fbc-ssr-dashboard[data-boot-view="help"] #view-help { display: flex !important; visibility: visible !important; } /* Broadcast boot — prevent stretched attach panel / broken layout before view CSS loads */ html:not(.fbc-boot-ready) #imgAttachPanel, html.auth-booting #imgAttachPanel, html.fbc-ssr-dashboard #imgAttachPanel { display: none !important; } html.auth-booting[data-boot-view="broadcast"] .compose > .compose-section:last-child, html.fbc-ssr-dashboard[data-boot-view="broadcast"] .compose > .compose-section:last-child { flex: 0 0 auto !important; } html.auth-booting[data-boot-view="broadcast"] .compose > .compose-section:last-child #messageText, html.fbc-ssr-dashboard[data-boot-view="broadcast"] .compose > .compose-section:last-child #messageText { height: 130px !important; min-height: 120px !important; max-height: 180px !important; flex-shrink: 0 !important; } html:not(.fbc-boot-ready) .compose-section:focus-within { border-left-color: rgba(8, 102, 255, 0.15) !important; background: transparent !important; } html.auth-booting[data-boot-view="broadcast"] #appPage > .app-body, html.fbc-ssr-dashboard[data-boot-view="broadcast"] #appPage > .app-body { display: grid !important; grid-template-columns: 72px minmax(0, 200px) minmax(0, 1fr) minmax(260px, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; overflow: hidden !important; gap: 0 !important; } html.auth-booting[data-boot-view="broadcast"] #view-broadcast, html.fbc-ssr-dashboard[data-boot-view="broadcast"] #view-broadcast { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important; overflow: hidden !important; min-width: 0 !important; } html.auth-booting[data-boot-view="broadcast"] #appPage .stats-panel, html.fbc-ssr-dashboard[data-boot-view="broadcast"] #appPage .stats-panel { display: flex !important; } /* Referrals / analytics / settings boot — full-width workspace before admin CSS loads */ html.auth-booting[data-boot-view="analytics"] #view-broadcast, html.auth-booting[data-boot-view="referrals"] #view-broadcast, html.auth-booting[data-boot-view="settings"] #view-broadcast, html.fbc-ssr-dashboard[data-boot-view="analytics"] #view-broadcast, html.fbc-ssr-dashboard[data-boot-view="referrals"] #view-broadcast, html.fbc-ssr-dashboard[data-boot-view="settings"] #view-broadcast { display: none !important; } html.auth-booting[data-boot-view="analytics"] #appPage .sidebar, html.auth-booting[data-boot-view="referrals"] #appPage .sidebar, html.auth-booting[data-boot-view="settings"] #appPage .sidebar, html.fbc-ssr-dashboard[data-boot-view="analytics"] #appPage .sidebar, html.fbc-ssr-dashboard[data-boot-view="referrals"] #appPage .sidebar, html.fbc-ssr-dashboard[data-boot-view="settings"] #appPage .sidebar { display: none !important; } html.auth-booting[data-boot-view="analytics"] #appPage > .app-body, html.auth-booting[data-boot-view="referrals"] #appPage > .app-body, html.auth-booting[data-boot-view="settings"] #appPage > .app-body, html.fbc-ssr-dashboard[data-boot-view="analytics"] #appPage > .app-body, html.fbc-ssr-dashboard[data-boot-view="referrals"] #appPage > .app-body, html.fbc-ssr-dashboard[data-boot-view="settings"] #appPage > .app-body { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } html.auth-booting[data-boot-view="analytics"] #view-analytics.pro-view, html.auth-booting[data-boot-view="referrals"] #view-referrals.pro-view, html.auth-booting[data-boot-view="settings"] #view-settings.pro-view, html.fbc-ssr-dashboard[data-boot-view="analytics"] #view-analytics.pro-view, html.fbc-ssr-dashboard[data-boot-view="referrals"] #view-referrals.pro-view, html.fbc-ssr-dashboard[data-boot-view="settings"] #view-settings.pro-view { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } /* Mobile shell — safe areas and viewport height */ @media (max-width: 900px) { html.auth-booting #appPage, html.fbc-boot-ready #appPage, body.app-dashboard-active #appPage { min-height: 100dvh; min-height: 100svh; } body.app-dashboard-active #appPage > .app-body { min-height: 0; overflow: hidden; } body.app-dashboard-active .saas-topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } body.app-dashboard-active .pro-view__scroll { -webkit-overflow-scrolling: touch; padding-bottom: max(16px, env(safe-area-inset-bottom)); } body.app-dashboard-active #view-messenger .msng-root { min-height: 0; height: 100%; } }