/* Loaded from index.html before the app's own bundle: the static splash shown until React mounts,
 * and the text-size scale boot.js sets. External and same-origin, so no CSP change. Colours are the
 * app's own light/dark backgrounds; the mark is the app icon. Logical properties, opacity-only motion. */
html { --boot-bg: #ffffff; --boot-fg: #3a2a2e; --boot-sub: #7a6a6e; }
html[data-theme="dark"] { --boot-bg: #17100c; --boot-fg: #f4e9ec; --boot-sub: #a89599; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --boot-bg: #17100c; --boot-fg: #f4e9ec; --boot-sub: #a89599; }
}
html, body { background: var(--boot-bg); }
.boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--boot-bg);
  color: var(--boot-fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.boot-splash svg { inline-size: 72px; block-size: 72px; }
/* The React-drawn splash (src/app/boot-splash.tsx) draws the brand's reversed tile in these. */
.boot-splash { --brand-tile: #E8590C; --brand-glyph: #FFF6F2; }
.boot-splash-name { font-size: 1.375rem; font-weight: 600; letter-spacing: 0.01em; }
/* The static splash carries both names; boot.js sets html[lang] before first paint, and the React
 * splash draws t('app.name') for the same locale — so the hand-over shows the same word. */
html:not([lang="ar"]) .boot-name-ar, html[lang="ar"] .boot-name-en { display: none; }
.boot-splash-dots { display: flex; gap: 6px; }
.boot-splash-dots span {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--boot-sub);
  opacity: 0.35;
  animation: boot-pulse 1.2s ease-in-out infinite;
}
.boot-splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.boot-splash-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes boot-pulse { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .boot-splash-dots span { animation: none; opacity: 0.6; }
}

/* Settings -> Chats -> Text size (bca.textSize, read by boot.js before first paint). */
html[data-textsize="small"] { font-size: 87.5%; }
html[data-textsize="large"] { font-size: 112.5%; }
html[data-textsize="xlarge"] { font-size: 125%; }