use RmlUi animation syntax for toast

Animation syntax: <duration> <tweening-function> <keyframes-name>
- toast-show class triggers toast-in animation (slide up, fade in)
- toast-hide class triggers toast-out animation (slide down, fade out)

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

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

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

@@ -125,16 +125,36 @@
             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;
+            animation: 0.3s back-out toast-in;
-            transform: translateY(0);
+        }
+
+        .toast-hide {
+            animation: 0.25s quadratic-in toast-out;
+        }
+
+        @keyframes toast-in {
+            from {
+                opacity: 0;
+                transform: translateY(30dp);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes toast-out {
+            from {
+                opacity: 1;
+                transform: translateY(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateY(30dp);
+            }
         }
 
         .toast-success {