feat: add special effect for Ultra mode

frontend/src/components/workspace/messages/subtask-card.tsx

@@ -53,12 +53,21 @@ export function SubtaskCard({
       className={cn("relative w-full gap-2 rounded-lg border py-0", className)}
       open={!collapsed}
     >
+      <div
+        className={cn(
+          "ambilight z-[-1]",
+          task.status === "in_progress" ? "enabled" : "",
+        )}
+      ></div>
       {task.status === "in_progress" && (
+        <>
           <ShineBorder
             borderWidth={1.5}
             shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
           />
+        </>
       )}
+      <div className="bg-background/95 flex w-full flex-col rounded-lg">
         <div className="flex w-full items-center justify-between p-0.5">
           <Button
             className="w-full items-start justify-start text-left"
@@ -150,6 +159,7 @@ export function SubtaskCard({
             ></ChainOfThoughtStep>
           )}
         </ChainOfThoughtContent>
+      </div>
     </ChainOfThought>
   );
 }

frontend/src/styles/globals.css

@@ -316,9 +316,16 @@
     }
   }
 
+  .ambilight {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+  }
+
   .ambilight:before,
   .ambilight:after {
     content: "";
+    pointer-events: none;
     position: absolute;
     left: 0;
     top: 0;
@@ -339,9 +346,17 @@
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    opacity: 0.75;
     z-index: -1;
-    animation: ambilight 60s ease-in-out infinite;
+    animation: ambilight 40s ease-in-out infinite;
+  }
+
+  .ambilight.enabled {
+    opacity: 1;
+  }
+
+  .dark .ambilight:before,
+  .dark .ambilight:after {
+    opacity: 0.85;
   }
 
   @keyframes ambilight {