/* ============================================================
perf-android.css — fixes janky/broken panels & buttons on Android,
Firefox, and other low-memory/low-core devices
------------------------------------------------------------
Only applies when has class "perf-lite" (added by the JS
snippet below, for Android / Firefox / low-memory / low-core devices).
Chrome/Safari on capable desktops are UNAFFECTED — they keep the
full frosted-glass look. Firefox is included regardless of hardware
because its Canvas2D (shadowBlur) and backdrop-filter compositing are
architecturally slower than Chromium/WebKit's, not just a weak-device
problem — see public/wallpapers.js's isPerfLite()/fx() for the matching
wallpaper-side gating (shadowBlur, DPR cap, frame-rate cap, entity counts).
HOW TO ENABLE:
1. Add this as the LAST stylesheet in app.html , after style.css:
2. Add this tiny script in BEFORE the stylesheets so the
class exists before first paint (no flash):
To revert: just remove the line. Nothing else changes.
============================================================ */
/* 1. Kill ALL backdrop blur on weak devices. This is the single
biggest win — no more per-frame GPU blur over the video wallpaper.
The universal `*` rule below loses to ID-scoped !important rules
elsewhere (ID specificity beats class+universal), so every panel/
overlay that sets its own backdrop-filter by #id is re-listed
explicitly here at matching specificity. */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.perf-lite :is(
#sidebar, #top-header, #controls-header-content, #input-area,
#suite-panel-overlay, #settings-overlay, #cmd-overlay,
#global-modal-overlay, #img-flow-wrap, #img-flow-backdrop,
#prompt-library-overlay, #folder-manager-overlay,
#speech-onboarding-overlay, #universal-model-overlay, #tracker-overlay,
#dg-overlay, #visual-lib-overlay, #modeler-overlay, #agents-overlay,
#podcast-overlay, #voice-overlay, #notepad-overlay, #notepad-tts-overlay,
#ntts-translate-popup, #org-modal-overlay, #ob-overlay, #tw-overlay,
#custom-confirm-overlay, #universal-settings-modal, #profile-settings-modal
) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* .top-header / .controls-header / #input-area are also re-set by
`html[class] .top-header { backdrop-filter: ... !important }`-style rules
elsewhere in app.html, which tie our specificity above and win on source
order (they load later). Repeating the class bumps us ahead of that tie. */
html.perf-lite.perf-lite :is(.top-header, .controls-header, #input-area) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 2. Because the blur is gone, give the key panels a solid-enough
background so they stay readable over the wallpaper.
(Uses your existing dark palette; tweak the rgba if needed.) */
html.perf-lite .sidebar,
html.perf-lite .controls-header,
html.perf-lite #input-area,
html.perf-lite .settings-modal,
html.perf-lite #profile-settings-modal,
html.perf-lite #universal-settings-modal,
html.perf-lite .popover-menu,
html.perf-lite .wallpaper-modal,
html.perf-lite .theme-modal,
html.perf-lite #custom-confirm-overlay > * {
background-color: rgba(12, 15, 26, 0.96) !important; /* near-opaque, matches your #0A0F1A theme */
}
/* 3. Stop buttons/pills animating expensive paint properties.
transition:all forces Android to re-paint on every hover/press. */
html.perf-lite .wpill,
html.perf-lite .btn,
html.perf-lite .sidebar-btn,
html.perf-lite .action-btn,
html.perf-lite button {
transition: none !important;
}
/* 4. Mobile WebView emergency brake.
Every gloss/suite/tool panel is intentionally polished on desktop,
but phones (especially weaker Android ones) flicker when blurred panels
stack and cards re-render with shadows/transforms every frame.
On perf-lite, make UI state changes immediate and flat, everywhere. */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
animation: none !important;
animation-delay: 0s !important;
animation-duration: 0s !important;
transition: none !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
will-change: auto !important;
}
/* Transforms (hover lifts, scale-ins) are a major repaint cost on phones —
drop them everywhere except the few spots actively using translate for
layout (handled separately below) rather than decoration. */
html.perf-lite :is(.sp-tool-card, .sp-more-card, .sp-quick-card, .sp-suite-btn,
.cmd-item, .prompt-card, .folder-chat-card,
.agent-card, .voice-option, .dg-card, button, .btn, .wpill):hover {
transform: none !important;
}
html.perf-lite :is(
#suite-panel-overlay,
#suite-panel-overlay *,
#cmd-overlay,
#cmd-overlay *,
#settings-overlay,
#settings-overlay *,
#global-modal-overlay,
#global-modal-overlay *,
.wallpaper-modal,
.theme-modal,
.popover-menu
) {
filter: none !important;
will-change: auto !important;
}
html.perf-lite #suite-panel-overlay,
html.perf-lite #suite-panel-overlay *,
html.perf-lite #cmd-overlay,
html.perf-lite #cmd-overlay *,
html.perf-lite #settings-overlay,
html.perf-lite #settings-overlay *,
html.perf-lite #global-modal-overlay,
html.perf-lite #global-modal-overlay *,
html.perf-lite .wallpaper-modal,
html.perf-lite .theme-modal,
html.perf-lite .popover-menu {
filter: none !important;
will-change: auto !important;
}
html.perf-lite :is(
#suite-panel-overlay,
#suite-panel-overlay .sp-shell,
#suite-panel-overlay .sp-main,
#suite-panel-overlay .sp-sidebar,
#suite-panel-overlay .sp-tool-card,
#suite-panel-overlay .sp-more-card,
#suite-panel-overlay .sp-quick-card,
#suite-panel-overlay .sp-suite-btn,
#suite-panel-overlay .sp-suite-btn-ico,
#suite-panel-overlay .sp-tier-tab,
#suite-panel-overlay .sp-wallet-btn,
#suite-panel-overlay .sp-close,
#suite-panel-overlay .sp-tool-fav
) {
box-shadow: none !important;
text-shadow: none !important;
}
html.perf-lite #suite-panel-overlay,
html.perf-lite #suite-panel-overlay .sp-shell,
html.perf-lite #suite-panel-overlay .sp-main,
html.perf-lite #suite-panel-overlay .sp-sidebar,
html.perf-lite #suite-panel-overlay .sp-tool-card,
html.perf-lite #suite-panel-overlay .sp-more-card,
html.perf-lite #suite-panel-overlay .sp-quick-card,
html.perf-lite #suite-panel-overlay .sp-suite-btn,
html.perf-lite #suite-panel-overlay .sp-suite-btn-ico,
html.perf-lite #suite-panel-overlay .sp-tier-tab,
html.perf-lite #suite-panel-overlay .sp-wallet-btn,
html.perf-lite #suite-panel-overlay .sp-close,
html.perf-lite #suite-panel-overlay .sp-tool-fav {
box-shadow: none !important;
text-shadow: none !important;
}
html.perf-lite #suite-panel-overlay {
background: rgba(15, 23, 42, 0.72) !important;
}
html.perf-lite #suite-panel-overlay .sp-main::before,
html.perf-lite #suite-panel-overlay .sp-sidebar::before {
display: none !important;
content: none !important;
}
html.perf-lite #suite-panel-overlay :is(
.sp-suite-btn:hover,
.sp-tool-card:hover,
.sp-more-card:hover,
.sp-quick-card:hover,
.sp-wallet-btn:hover,
.sp-close:hover
) {
transform: none !important;
box-shadow: none !important;
}
html.perf-lite #suite-panel-overlay .sp-suite-btn:hover,
html.perf-lite #suite-panel-overlay .sp-tool-card:hover,
html.perf-lite #suite-panel-overlay .sp-more-card:hover,
html.perf-lite #suite-panel-overlay .sp-quick-card:hover,
html.perf-lite #suite-panel-overlay .sp-wallet-btn:hover,
html.perf-lite #suite-panel-overlay .sp-close:hover,
html.perf-lite #suite-panel-overlay .sp-suite-btn-ico {
transform: none !important;
box-shadow: none !important;
}
html.perf-lite #suite-panel-overlay .sp-tool-fav {
opacity: 1 !important;
}
html.perf-lite video,
html.perf-lite canvas:not(#code-canvas):not(#mermaid-canvas) {
animation: none !important;
}
/* 5. OPTIONAL — biggest perf gain if jank persists: freeze the video
wallpaper to a static frame on weak devices. Animating video
behind the UI is the heaviest cost. Uncomment to use, OR pause
the