refactor(ui): pretty ai analysis panel style (#718)

## What type of PR is this?

<!--
Add one of the following kinds:
/kind bug
/kind cleanup
/kind refactor
/kind documentation
/kind feature
/kind chore
/kind perf
/kind style
/kind test
-->

## What this PR does / why we need it:

TODO

## Which issue(s) this PR fixes:

<!--
*Automatically closes linked issue when PR is merged.
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
_If PR is about `failing-tests or flakes`, please post the related
issues/tests in a comment and do not use `Fixes`_*
-->

Fixes #

ui/src/pages/insightDetail/components/eventAggregator/styles.module.less

@@ -241,45 +241,60 @@
     .events_content_diagnosisPanel {
       width: 400px;
       height: 600px;
-      overflow: scroll;
       border-radius: 12px;
       display: flex;
       flex-direction: column;
-      backdrop-filter: blur(8px);
       z-index: 10;
-      background-image: radial-gradient(
-          ellipse 489px 674px at 6px 0px,
-          #fcf8ff 0%,
-          #ebd7ff 100%
-        ),
-        radial-gradient(
-          ellipse 587px 672px at 433px 513px,
-          #dae4ffa1 0%,
-          #e1d2e704 100%
-        ),
-        radial-gradient(
-          ellipse 346px 396px at 15px 506px,
-          #dae4ffa3 0%,
-          #e1d2e704 100%
-        ),
-        radial-gradient(
-          ellipse 583px 668px at 436px 8px,
-          #f8f5ff 0%,
-          #f3e7f904 100%
-        );
-      animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow:
+        0 8px 24px rgba(149, 128, 247, 0.08),
+        0 2px 4px rgba(149, 128, 247, 0.12);
+      box-sizing: border-box;
+      border: 1px solid rgba(149, 128, 247, 0.15);
+      background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+          #ffffff 0%,
+          #f3efff 100%),
+        radial-gradient(ellipse 587px 672px at 433px 513px,
+          #ece6ff95 0%,
+          #f0e9ff30 100%),
+        radial-gradient(ellipse 346px 396px at 15px 506px,
+          #e9e3ff90 0%,
+          #f0e9ff30 100%),
+        radial-gradient(ellipse 583px 668px at 436px 8px,
+          #ffffff 0%,
+          #f5f0ff30 100%);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle at center,
+            rgba(149, 128, 247, 0.03) 0%,
+            transparent 70%);
+        animation: rotate 60s linear infinite;
+        pointer-events: none;
+      }
 
       .events_content_diagnosisHeader {
+        padding: 12px 16px;
+        border-bottom: 1px solid rgba(149, 128, 247, 0.15);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 12px;
-        border-bottom: 1px solid rgba(147, 112, 219, 0.2);
-        border-radius: 12px 12px 0 0;
-        color: #000;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
         font-size: 16px;
         font-weight: 500;
-        backdrop-filter: blur(4px);
+        color: #000;
+        backdrop-filter: blur(8px);
+        background: linear-gradient(to right,
+            rgba(255, 255, 255, 0.95),
+            rgba(243, 239, 255, 0.95));
+
 
         .events_content_diagnosisHeader_aiIcon {
           width: 18px;
@@ -397,8 +412,8 @@
 
         .events_content_diagnosisContent {
           color: #000;
-          border-radius: 12px;
-          padding: 16px;
+          border-radius: 0 0 12px 12px;
+          padding: 20px 16px;
           font-size: 14px;
           line-height: 1.6;
           box-sizing: border-box;
@@ -419,7 +434,7 @@
 
           h2 {
             font-size: 18px;
-            margin-top: 24px;
+            margin-top: 10px;
             padding-bottom: 8px;
             border-bottom: 1px solid rgba(147, 112, 219, 0.2);
           }
@@ -910,3 +925,14 @@
     transform: scale(1);
   }
 }
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+

ui/src/pages/insightDetail/components/exceptionList/style.module.less

@@ -431,26 +431,6 @@
         rgba(243, 239, 255, 0.95)
       );
 
-      .interpret_title {
-        font-weight: 500;
-        background: linear-gradient(90deg, #7c66ff, #6b4fff);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .interpret_icon {
-          width: 18px;
-          height: 18px;
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-
       .interpret_header_stopButton {
         transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         width: 28px;
@@ -620,7 +600,7 @@
 
         h2 {
           font-size: 18px;
-          margin-top: 24px;
+          margin-top: 10px;
           padding-bottom: 8px;
           border-bottom: 1px solid rgba(147, 112, 219, 0.2);
         }
@@ -896,3 +876,4 @@
     transform: rotate(360deg);
   }
 }
+