html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background-color: #FFFFFF;
/* Stop the browser from claiming pinch/scroll/swipe gestures on the
Compose canvas; otherwise drags get cancelled mid-flight. */
touch-action: none;
overscroll-behavior: none;
}
/* .dark is set on by the index.html inline script from the stored
app theme, falling back to prefers-color-scheme. */
.dark body {
background-color: #000000;
}
#app-loader {
position: fixed;
inset: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background-color: #FFFFFF;
transition: opacity 0.4s ease;
font-family: system-ui, -apple-system, sans-serif;
}
.app-loader-logo {
width: 72px;
height: 72px;
border-radius: 16px;
animation: app-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes app-loader-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.92); opacity: 0.7; }
}
.app-loader-track {
width: min(260px, 60vw);
height: 6px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
#app-loader-bar {
width: 0;
height: 100%;
border-radius: 3px;
background-color: #1D2125;
transition: width 0.25s ease;
}
#app-loader-status {
margin: 0;
font-size: 14px;
color: rgba(0, 0, 0, 0.6);
}
#app-loader-error {
margin: 0;
max-width: 320px;
text-align: center;
font-size: 14px;
line-height: 1.6;
color: #B3261E;
}
.dark #app-loader {
background-color: #000000;
}
.dark .app-loader-track {
background-color: rgba(255, 255, 255, 0.15);
}
.dark #app-loader-bar {
background-color: #F2F4F6;
}
.dark #app-loader-status {
color: rgba(255, 255, 255, 0.7);
}
.dark #app-loader-error {
color: #F2B8B5;
}