/* ───────────────────────────────────────────────────────────────────────── BOOT STYLESHEET — linked from in app/layout.tsx. Everything in this file is needed BEFORE the bundled `app/globals.css` chunk arrives. A in is render-blocking, so these rules are in effect for the very first paint; a Next.js CSS chunk is not. What lives here, and why: 1. The app wallpaper tiles (`--mia-wp-doodle-light` / `-dark`) and the class that paints them (`.mia-dot-bg`). This is their SINGLE definition — globals.css only consumes `var(--mia-wp-doodle)`. They lived in globals.css until 2026-07-28. The boot splash carries `.mia-dot-bg`, so on a hard load the class was inert: what remained was the inline background-color, which for the dark sub-themes is #000000 (amoled) or near-black — a flat black field with a logo on it, and no doodle (BUG-WEB-SPLASH-PAINTS-WITHOUT-THE-DOODLE-ON-A-HARD-LOAD). Do NOT re-declare the tile anywhere else. A second copy of the data-URI is how the same pattern started rendering at different scales and inks on different surfaces (the warning at layout.tsx:148 is about exactly that). 2. The boot splash itself (#splash-loader) — its contents and how they scale on a narrow window. Only the full-screen box and its background colour stay inline in layout.tsx, so that a splash.css that fails to load still degrades to a correctly themed full-screen panel rather than to unstyled content on a white page. AGENTS.md rule #14: this file is a pre-auth theme surface — bump `CACHE_VERSION` in public/sw.js and `SW_VER` in public/js/theme-loader.js in lockstep with every change here. ───────────────────────────────────────────────────────────────────────── */ /* ── 0. The root surface ──────────────────────────────────────────────────── ``'s background follows the theme token, and this is its ONLY declaration. It used to be written imperatively in two places and cleared in none: `layout.tsx` hardcoded the dark hex inline, and `theme-loader.js` overwrote it with the light hex at boot — while a RUNTIME theme switch (`applyThemeToDOM`) never touched it. So after switching dark -> light the root kept the dark colour for the rest of the session, hidden only because `` happens to cover it; anything that uncovers it (an over-scroll, a transition, a surface that is not fully opaque) would have flashed the wrong theme. Driving it from `--mia-body` means both the boot path (theme-loader writes the var inline before first paint) and every later switch move it for free, and there is no imperative value left to go stale. The fallback matches the one on the splash box below — see the note there. */ html { background-color: var(--mia-body, #1a2126); } /* ── 1. Wallpaper tiles — the app-wide backdrop ─────────────────────────── */ :root { /* ONE tile per theme, named. `--mia-wp-doodle` is just an alias, so a surface that forces its own theme (the auth pages force dark) can point the alias at the matching tile instead of inheriting the page theme's — that mismatch painted dark ink on the dark login panel and the pattern was invisible there (user report 2026-07-22). The auth alias lives in globals.css and targets a DESCENDANT element, so it never competes with the two rules below. */ --mia-wp-doodle-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%232d4c4f' stroke-opacity='0.10' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28,26) rotate(-10)'%3E%3Cpath d='M12 0h32a10 10 0 0 1 10 10v18a10 10 0 0 1-10 10H26l-9 9v-9h-5A10 10 0 0 1 2 28V10A10 10 0 0 1 12 0z'/%3E%3Cpath d='M16 28V12l8 9 8-9v16'/%3E%3C/g%3E%3Cg transform='translate(196,44) rotate(16)'%3E%3Cpath d='M0 34C0 12 14 2 32 0c0 22-14 32-32 34z'/%3E%3Cpath d='M4 30C10 18 20 10 28 5'/%3E%3C/g%3E%3Cg transform='translate(120,128) rotate(-6)'%3E%3Cpath d='M11 0l2.6 8.4L22 11l-8.4 2.6L11 22l-2.6-8.4L0 11l8.4-2.6z'/%3E%3Ccircle cx='27' cy='3' r='1.4'/%3E%3Ccircle cx='26' cy='19' r='1.1'/%3E%3C/g%3E%3Cg transform='translate(36,196) rotate(-14)'%3E%3Cpath d='M0 11L32 0 21 26l-6.5-9.5z'/%3E%3Cpath d='M14.5 16.5L32 0'/%3E%3C/g%3E%3Cg transform='translate(212,196) rotate(12)'%3E%3Cpath d='M11 19C4 13 0 8.6 0 5a5 5 0 0 1 9-3 5 5 0 0 1 2 2 5 5 0 0 1 2-2 5 5 0 0 1 9 3c0 3.6-4 8-11 14z'/%3E%3C/g%3E%3Cg transform='translate(150,236)'%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='10' cy='4' r='1.2'/%3E%3Ccircle cx='4' cy='10' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --mia-wp-doodle-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%239db9b3' stroke-opacity='0.12' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28,26) rotate(-10)'%3E%3Cpath d='M12 0h32a10 10 0 0 1 10 10v18a10 10 0 0 1-10 10H26l-9 9v-9h-5A10 10 0 0 1 2 28V10A10 10 0 0 1 12 0z'/%3E%3Cpath d='M16 28V12l8 9 8-9v16'/%3E%3C/g%3E%3Cg transform='translate(196,44) rotate(16)'%3E%3Cpath d='M0 34C0 12 14 2 32 0c0 22-14 32-32 34z'/%3E%3Cpath d='M4 30C10 18 20 10 28 5'/%3E%3C/g%3E%3Cg transform='translate(120,128) rotate(-6)'%3E%3Cpath d='M11 0l2.6 8.4L22 11l-8.4 2.6L11 22l-2.6-8.4L0 11l8.4-2.6z'/%3E%3Ccircle cx='27' cy='3' r='1.4'/%3E%3Ccircle cx='26' cy='19' r='1.1'/%3E%3C/g%3E%3Cg transform='translate(36,196) rotate(-14)'%3E%3Cpath d='M0 11L32 0 21 26l-6.5-9.5z'/%3E%3Cpath d='M14.5 16.5L32 0'/%3E%3C/g%3E%3Cg transform='translate(212,196) rotate(12)'%3E%3Cpath d='M11 19C4 13 0 8.6 0 5a5 5 0 0 1 9-3 5 5 0 0 1 2 2 5 5 0 0 1 2-2 5 5 0 0 1 9 3c0 3.6-4 8-11 14z'/%3E%3C/g%3E%3Cg transform='translate(150,236)'%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='10' cy='4' r='1.2'/%3E%3Ccircle cx='4' cy='10' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --mia-wp-doodle: var(--mia-wp-doodle-light); } /* `:root` and `.dark` have equal specificity and both match , so the winner is source order. The pair MUST therefore stay together in one file — split across two stylesheets, which one wins would depend on link order. */ .dark { --mia-wp-doodle: var(--mia-wp-doodle-dark); } /* Our signature backdrop as a reliable static CSS layer (the canvas ParticleBackground doesn't paint on every surface/renderer — e.g. Electron). Used by the splash, auth, invite/join/vpn, settings, admin, call window and the chat panes — every one of them at the same scale and the same ink. */ .mia-dot-bg { background-image: var(--mia-wp-doodle); background-size: 280px 280px; background-repeat: repeat; } /* ── 2. Boot splash ─────────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } #splash-loader.hidden { opacity: 0; pointer-events: none; } /* The splash scales with the window instead of being authored for one width. It used to be fixed px chosen on a desktop viewport, where the 76px logo is ~4% of the width; at 430px that same 76px is ~18% and reads as a blown-up icon. `clamp()` keeps the desktop proportions at the top end, shrinks continuously below them, and never goes under a legible floor — one rule, no breakpoint step, and nothing to re-tune per device. */ #splash-loader .splash-logo { width: clamp(56px, 14vw, 76px); height: clamp(56px, 14vw, 76px); object-fit: contain; margin-bottom: clamp(12px, 3vw, 16px); } /* Every colour on the splash carries the SAME fallback set — the dark theme's — as `background-color: var(--mia-body, #1a2126)` on the box itself. They have to agree: a var that resolves for the background but not for the text (or the other way round) is how you get black-on-black or a subtitle that disappears into the field. `--mia-text` / `--mia-icon` had no fallback at all until 2026-07-28. In a normal boot theme-loader.js has already written all of them inline on , so the fallbacks are the safety net, not the usual path. */ #splash-loader .splash-title { font-family: system-ui, -apple-system, sans-serif; font-size: clamp(20px, 5vw, 24px); font-weight: 700; color: var(--mia-text, #f5f6f8); margin-bottom: 8px; } #splash-loader .splash-subtitle { font-family: system-ui, -apple-system, sans-serif; font-size: clamp(13px, 3.2vw, 14px); color: var(--mia-icon, #8696a0); margin-bottom: clamp(24px, 6vw, 32px); } #splash-loader .splash-spinner { width: clamp(32px, 8vw, 40px); height: clamp(32px, 8vw, 40px); border: 3px solid var(--mia-card, #2a343b); border-top-color: var(--mia-accent, #3a6266); border-radius: 50%; animation: spin 1s linear infinite; }