updated realTime vis panel smooth transition

app/src/styles/pages/realTimeViz.scss

@@ -4,7 +4,6 @@
 // Main Container
 .realTime-viz {
   background: #131313;
-  border-radius: 20px;
   box-shadow: $box-shadow-medium;
   width: calc(100% - (320px + 270px + 90px));
   height: calc(100% - (250px));
@@ -24,19 +23,15 @@
   }
 
   .floating {
-
-
     width: calc(var(--realTimeViz-container-width) * 0.2);
     height: calc(var(--realTimeViz-container-width) * 0.05);
 
     min-width: 250px;
     max-width: 300px;
 
-    // min-height: 83px !important;
-    // max-height: 100px !important;
-
     background: var(--background-color);
-    border: 1.23px solid var(--border-color);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-color);
     box-shadow: 0px 4.91px 4.91px 0px #0000001c;
     border-radius: $border-radius-medium;
     padding: 18px;
@@ -67,12 +62,12 @@
   .zone-wrapper {
     display: flex;
     background: var(--background-color);
+    backdrop-filter: blur(10px);
     position: absolute;
     bottom: 0px;
     left: 50%;
     gap: 6px;
     border-radius: 8px;
-    max-width: 80%;
     overflow: auto;
     max-width: calc(100% - 500px);
     min-width: 150px;
@@ -117,15 +112,15 @@
     }
 
     .active {
-      background: var(--accent-color);
-      color: var(--background-color);
-      // color: #FCFDFD !important;
+      background: var(--background-color-accent);
+      color: var(--text-button-color);
+      border: none;
+      outline: none;
     }
   }
 
   .zone-wrapper.bottom {
     bottom: var(--bottomWidth);
-    // bottom: 200px;
   }
 
   .content-container {
@@ -146,7 +141,6 @@
       display: flex;
       background: rgba(224, 223, 255, 0.5);
       position: absolute;
-      // bottom: 10px;
       left: 50%;
       transform: translate(-50%, 0);
       gap: 6px;
@@ -189,7 +183,6 @@
     border-radius: 6px;
     overflow: auto;
     z-index: $z-index-tools;
-    overflow: auto;
 
     &::-webkit-scrollbar {
       display: none;
@@ -203,7 +196,8 @@
       display: flex;
       flex-direction: column;
       gap: 6px;
-      // background: var(--background-color);
+      background: var(--background-color);
+      backdrop-filter: blur(10px);
 
       &::-webkit-scrollbar {
         display: none;
@@ -211,12 +205,10 @@
 
       .chart-container {
         width: 100%;
-
         max-height: 100%;
         border: 1px dashed var(--background-color-gray);
         border-radius: 8px;
         box-shadow: var(--box-shadow-medium);
-        padding: 6px 0;
         background: var(--background-color);
         position: relative;
         padding: 0 10px;
@@ -255,14 +247,11 @@
             color: var(--text-color);
 
             &:hover {
+              background: var(--highlight-accent-color);
+              width: 100%;
               .label {
                 color: var(--accent-color);
               }
-            }
-
-            &:hover {
-              background: var(--highlight-accent-color);
-              width: 100%;
 
               svg {
                 &:first-child {
@@ -285,7 +274,6 @@
         }
       }
 
-
       .close-btn {
         position: absolute;
         top: 5px;
@@ -369,7 +357,6 @@
 .playingFlase {
   .zone-wrapper.bottom {
     bottom: var(--bottomWidth);
-    // bottom: 210px;
   }
 }
 
@@ -402,7 +389,7 @@
     }
 
     .active {
-      background: var(--accent-color);
+      background: var(--background-color-accent);
     }
 
     &:hover {
@@ -417,8 +404,7 @@
     height: 18px;
     display: flex;
     justify-content: center;
-    // align-items: center;
-    background: var(--accent-color);
+    background: var(--background-color-accent);
     border: none;
     color: var(--background-color);
     border-radius: 4px;
@@ -426,24 +412,23 @@
     .add-icon {
       @include flex-center;
       transition: rotate 0.2s;
-
     }
 
     path {
-      stroke: var(--primary-color);
+      stroke: var(--text-color);
       stroke-width: 2;
     }
   }
 
   .active {
-    background: #ffe3e0;
+    background: #f657482f;
 
     .add-icon {
       rotate: 45deg;
 
       path {
         stroke: #f65648;
-        stroke-width: 2;
+        stroke-width: 1.3;
       }
 
 
@@ -596,12 +581,6 @@
 }
 
 .floating-wrapper {
-  .icon {
-    // width: 25px !important;
-    // height: 25px !important;
-    // background: transparent;
-  }
-
   .kebab {
     width: 25px;
     height: 25px;
@@ -647,9 +626,6 @@
         .label {
           color: var(--accent-color);
         }
-      }
-
-      &:hover {
         background: var(--highlight-accent-color);
         width: 100%;
 
@@ -669,22 +645,19 @@
 }
 
 .distance-line {
-
   position: absolute;
   border-style: dashed;
-  border-color: var(--accent-color);
-  /* Green color for visibility */
+  border-color: var(--background-color-accent);
   border-width: 1px;
   pointer-events: none;
-  /* Ensure lins don't interfere with dragging */
   z-index: 10000;
 }
 
 /* Label styles for displaying distance values */
 .distance-label {
   position: absolute;
-  background: var(--accent-color);
-  color: white;
+  background: var(--background-color-accent);
+  color: var(--text-button-color);
   font-size: 12px;
   padding: 2px 6px;
   border-radius: 3px;
@@ -756,15 +729,12 @@
 }
 
 .activeChart {
-  outline: 2px solid var(--accent-color);
+  outline: 1px solid var(--highlight-secondary-color);
   z-index: 2 !important;
 }
 
 .chart-container.notLinked {
-
   outline: 1px solid red;
-
-
 }
 
 .connectionSuccess {
@@ -983,4 +953,4 @@
     opacity: 0;
     transform: scaleY(0);
   }
-}
+}