/* Reset + base typography. */ *, *::before, *::after { box-sizing: border-box; } /* Viewport height strategy — triple cascade (each line overrides the previous if supported / set): 1. `height: 100%` — universal fallback (very old engines). 2. `height: 100dvh` — Chrome ≥ 108, Safari ≥ 15.4. Tracks the dynamic viewport: shrinks when the on-screen keyboard opens (paired with `interactive-widget=resizes-content` in the viewport meta), so the flex column re-measures, the composer stays above the keyboard, and the topbar never moves. 3. `height: var(--app-height, 100dvh)` — JS belt-and-suspenders. The viewportFix.js helper writes `--app-height` from `visualViewport.height` on Android WebViews where `dvh` is missing or unreliable (Chrome < 108, embedded WebView in some apps, certain Samsung Internet versions). If the var is never set, the `100dvh` default in var() takes over — no regression on modern browsers. */ html, body, #app { height: 100%; } html, body, #app { height: 100dvh; } html, body, #app { height: var(--app-height, 100dvh); } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--c-text); background: radial-gradient(1200px 700px at 20% -10%, rgba(91,140,255,0.08), transparent 60%), radial-gradient(800px 500px at 110% 110%, rgba(60,207,143,0.06), transparent 60%), var(--c-bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; overflow: hidden; /* Prevent rubber-band / pull-to-refresh that distorts the layout on mobile. */ overscroll-behavior-y: contain; } /* --- App-wide background (behind the entire UI) --- Driven by CSS custom props + the `data-app-wp` attribute set on (:root) by prefs.applyAppBackground — same element as data-theme: --app-wp-image : url(...) for a catalog/uploaded image --app-wp-color : solid color fill (image absent) --app-wp-scrim : 0..0.95 readability veil opacity (0 = none) Approach: paint the image/color on #app itself (the parent of everything), so it naturally sits BEHIND all app content with NO z-index games — the same reliable model the chat .thread-pane uses for its wallpaper. A scrim is layered via a linear-gradient on top of the image (single background shorthand: gradient FIRST = on top, image SECOND = underneath). Custom props inherit :root → #app so var() resolves. Screen containers are made transparent below so the #app background shows through; smaller chrome (topbar, sidebar, bubbles) stays opaque/translucent for readability. */ :root[data-app-wp="image"] #app { background-image: var(--app-wp-image); background-size: cover; background-position: center; background-repeat: no-repeat; /* No veil here: readability is controlled by how opaque the chrome surfaces are (--c-bg-0-surf / --c-bg-1-surf, driven by the "interface transparency" setting) plus the theme itself. The content area stays clear so the background is fully visible there. */ } :root[data-app-wp="color"] #app { background-color: var(--app-wp-color); } /* Make the top-level screen containers transparent so the #app background is visible through them. These are normally background-less already, but we assert it here in case a theme sets one. */ :root[data-app-wp] .main-screen, :root[data-app-wp] .chat-screen, :root[data-app-wp] .chat-main, :root[data-app-wp] .pair-screen { background: transparent; } button, input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 600; } h1 { font-size: var(--fs-2xl); letter-spacing: -0.01em; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0; } a { color: var(--c-accent-soft); text-decoration: none; } a:hover { color: var(--c-accent); } :focus-visible { outline: 2px solid var(--c-accent-ring); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--c-accent-weak); color: var(--c-text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); }