fix toast display and auto-dismiss

- Wrap toast message in span for proper text rendering
- Use setTimeout instead of mosis.timer for auto-dismiss
- Remove unsupported CSS animation property
- Add explicit color to toast variants
- Change px to dp units for RmlUi compatibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -227,14 +227,13 @@ function showToast(message, type)
         class = "toast toast-warning"
     end
 
-    -- Add toast element
+    -- Clear existing toasts and add new one
-    local toast_html = '<div class="' .. class .. '">' .. message .. '</div>'
+    local toast_html = '<div class="' .. class .. '"><span>' .. message .. '</span></div>'
-    container.inner_rml = container.inner_rml .. toast_html
+    container.inner_rml = toast_html
 
-    -- Auto-remove after 3 seconds (would need timer API)
+    -- Auto-remove after 3 seconds
-    if mosis and mosis.timer then
+    if setTimeout then
-        mosis.timer.setTimeout(function()
+        setTimeout(function()
-            -- Remove first toast
             container.inner_rml = ""
         end, 3000)
     end

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

@@ -113,24 +113,27 @@
         .toast {
             background-color: #323232;
             color: #FFFFFF;
-            padding: 14px 24px;
+            padding: 14dp 24dp;
-            border-radius: 8px;
+            border-radius: 8dp;
-            font-size: 14px;
+            font-size: 14dp;
             text-align: center;
             pointer-events: auto;
-            animation: toast-in 0.3s ease-out;
+            width: auto;
         }
 
         .toast-success {
             background-color: #4CAF50;
+            color: #FFFFFF;
         }
 
         .toast-error {
             background-color: #F44336;
+            color: #FFFFFF;
         }
 
         .toast-warning {
             background-color: #FF9800;
+            color: #000000;
         }
 
         @keyframes toast-in {