Dots: fixed overlay above opaque app shell (flash-then-vanish was body::before hidden by app root bg); pointer-events none, z-2

chat-theme/openwebui-custom.css

@@ -133,13 +133,17 @@ html.dark ::selection { background: #3e5a3d; }
 html:not(.dark) a { color: #3f6e3e; }
 html.dark a { color: #8fc98f; }
 
-/* ---------- Background dots (homepage motif echo, pure CSS) ---------- */
+/* ---------- Background dots (homepage motif echo) ----------
+   Open WebUI's app root is an OPAQUE full-viewport wrapper (bg-white/dark:bg-gray-900),
+   so a background layer (body::before, z-index 0) only shows pre-hydration — the
+   "flash then disappear" effect. Instead: a fixed overlay of pale dots sits ON TOP of
+   everything (pointer-events: none) at very low opacity, below modals/menus (z-40+). */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
-  z-index: 0;
-  pointer-events: none;
+  z-index: 2;               /* above app shell bg & content surfaces, below z-40 overlays */
+  pointer-events: none;     /* never intercept clicks/hover */
   background-image:
     radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%),
     radial-gradient(circle 20px at 28% 52%, #bfdccd 0 100%, transparent 100%),
@@ -177,9 +181,8 @@ body::before {
     radial-gradient(circle 5px at 58% 72%, #e0cbb2 0 100%, transparent 100%),
     radial-gradient(circle 6px at 97% 78%, #d9c3a8 0 100%, transparent 100%),
     radial-gradient(circle 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%);
-  opacity: 0.5;
-  z-index: 0;
+  opacity: 0.35;
 }
-html.dark body::before { opacity: 0.25; }
-/* Keep app content above the dots layer */
-#app, .app, main, .sidebar, nav, [class*="content"] { position: relative; z-index: 1; }
+html.dark body::before { opacity: 0.18; }
+/* Keep code blocks readable above the dots */
+pre, code, .codeblock { position: relative; z-index: 3; background-color: inherit; }