diff --git a/public/css/styles.css b/public/css/styles.css
index f1e5c7d8..607bf1e2 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1367,6 +1367,11 @@ body.assistant-workspace #assistant-tab.active { width:100%; }
    settings had loaded fine. Previous fixes bolted style="display:none" onto
    individual elements; this fixes every one of them at once. */
 [hidden] { display: none !important; }
+/* A lazily loaded component arrives with its own stylesheet; its markup is
+   inserted before that stylesheet resolves, so it stays invisible (but laid
+   out) until the tab reports ready and app.js clears the marker. The
+   "Loading…" status line next to it is the only thing shown meanwhile. */
+[data-component-pending] { visibility: hidden; }
 
 /* iOS: taps on controls must not trigger double-tap zoom */
 button, a, .btn-sm, .btn-generate, .btn-send, .tab-btn, input, textarea, select, label { touch-action: manipulation; }