fix: lighter confirm prompt overlay to stop lag when it opens

src/ui/components/surface/surface-scope.tsx

@@ -321,10 +321,8 @@ export function PanePrompt({
   return (
     <div
       className={cn(
-        "motion-context-enter absolute inset-0 flex items-center justify-center overflow-y-auto p-4",
+        "motion-fade-enter absolute inset-0 flex items-center justify-center overflow-y-auto p-4",
-        layer === "connection"
+        layer === "connection" ? "z-500 bg-canvas" : "z-50 bg-background/85",
-          ? "z-500 bg-canvas"
-          : "z-50 bg-background/80 backdrop-blur-sm",
       )}
       style={
         layer === "connection" && backgroundColor
@@ -340,7 +338,7 @@ export function PanePrompt({
         aria-modal="true"
         aria-labelledby={labelledBy ?? headingId}
         className={cn(
-          "my-auto flex w-full max-w-sm flex-col border bg-popover shadow-xl",
+          "motion-context-enter my-auto flex w-full max-w-sm flex-col border bg-popover shadow-xl",
           tone === "destructive" ? "border-destructive/40" : "border-border",
           className,
         )}

src/ui/index.css

@@ -636,6 +636,11 @@ html.fs-xl {
     var(--motion-ease-enter) both;
 }
 
+.motion-fade-enter {
+  animation: motion-fade-enter var(--motion-duration-context)
+    var(--motion-ease-enter) both;
+}
+
 .motion-workspace-enter {
   animation: motion-workspace-enter var(--motion-duration-panel)
     var(--motion-ease-enter) both;
@@ -723,6 +728,12 @@ html.fs-xl {
   }
 }
 
+@keyframes motion-fade-enter {
+  from {
+    opacity: 0;
+  }
+}
+
 @keyframes motion-workspace-enter {
   from {
     opacity: 0;
@@ -783,6 +794,7 @@ html.fs-xl {
 
   .motion-panel-enter,
   .motion-context-enter,
+  .motion-fade-enter,
   .motion-workspace-enter,
   .motion-workspace-layout,
   .motion-transfer-phase,