diff --git a/src/app/globals.css b/src/app/globals.css
index 031708539..9c06a4ddb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1075,8 +1075,19 @@ summary::-webkit-details-marker {
 .answer-suggestion-row-scroll {
   min-width: 0;
   scrollbar-width: none;
-  mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
-  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
+}
+
+/* Mobile-only trailing fade. Scoped to a max-width query (rather than an
+   unconditional mask plus a min-width:640px reset) because Lightning CSS
+   collapses a base rule whose only media override is the mask, dropping the
+   gradient entirely — the sibling .answer-suggestion-chips-scroll survives only
+   because its override also changes other properties. A single mobile-scoped
+   rule leaves nothing for the compiler to merge away. */
+@media (max-width: 639px) {
+  .answer-suggestion-row-scroll {
+    mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
+    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent);
+  }
 }
 
 .answer-suggestion-row-scroll::-webkit-scrollbar {
@@ -1360,11 +1371,6 @@ summary::-webkit-details-marker {
     font-size: 0.8125rem;
   }
 
-  .answer-suggestion-row-scroll {
-    mask-image: none;
-    -webkit-mask-image: none;
-  }
-
   .document-mobile-search-edge {
     left: auto;
     right: auto;