add toast animation using RCSS transitions

- Toast starts hidden (opacity 0, translateY 30dp)
- Transition property animates opacity and transform over 0.3s
- Adding toast-show class triggers slide-up animation
- Removing toast-show class triggers slide-down animation

src/main/assets/apps/shell/shell.lua

@@ -252,15 +252,31 @@ function showToast(message, type)
         type_class = " toast-warning"
     end
 
-    -- Create toast (no animation to avoid flash)
+    -- Create toast in hidden state (opacity 0, translated down)
     local toast_html = '<div id="active-toast" class="toast' .. type_class .. '"><span>' .. message .. '</span></div>'
     container.inner_rml = toast_html
 
-    -- Auto-hide after 2.5 seconds
+    -- Add toast-show class after brief delay to trigger transition
     if setTimeout then
+        setTimeout(function()
+            local toast = shell_document:GetElementById("active-toast")
+            if toast then
+                toast:SetClass("toast-show", true)
+            end
+        end, 10)
+
+        -- Auto-hide after 2.5 seconds
         active_toast_id = setTimeout(function()
-            container.inner_rml = ""
+            local toast = shell_document:GetElementById("active-toast")
-            active_toast_id = nil
+            if toast then
+                -- Remove show class to animate out
+                toast:SetClass("toast-show", false)
+                -- Remove element after transition
+                setTimeout(function()
+                    container.inner_rml = ""
+                    active_toast_id = nil
+                end, 300)
+            end
         end, 2500)
     end
 

src/main/assets/apps/shell/shell.rml

@@ -125,6 +125,16 @@
             font-weight: bold;
             text-align: center;
             pointer-events: auto;
+            /* Initial hidden state */
+            opacity: 0;
+            transform: translateY(30dp);
+            /* Transition for smooth animation */
+            transition: opacity transform 0.3s back-out;
+        }
+
+        .toast-show {
+            opacity: 1;
+            transform: translateY(0);
         }
 
         .toast-success {