Update flare-ui/src/app/components/chat/realtime-chat.component.scss

flare-ui/src/app/components/chat/realtime-chat.component.scss

@@ -46,6 +46,19 @@ mat-card-header {
   min-height: 60px;
   border: 2px solid #4caf50;
   transition: all 0.3s ease;
+  opacity: 0.8;
+  
+  &.active {
+    background: #c8e6c9;
+    border-color: #2e7d32;
+    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
+    opacity: 1;
+  }
+  
+  &.listening {
+    border-style: dashed;
+    animation: borderPulse 2s ease-in-out infinite;
+  }
   
   .transcription-label {
     font-size: 12px;
@@ -76,6 +89,11 @@ mat-card-header {
   }
 }
 
+@keyframes borderPulse {
+  0%, 100% { border-color: #4caf50; }
+  50% { border-color: #81c784; }
+}
+
 @keyframes pulse {
   0% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.1); opacity: 0.8; }
@@ -181,15 +199,14 @@ mat-card-header {
   background: #212121;
   border-radius: 8px;
   margin-top: 16px;
-  opacity: 0.5;
+  opacity: 0.3;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   
   &.active {
-    opacity: 1;
+    opacity: 0.7;
     background: #1a1a1a;
-    box-shadow: 0 0 30px rgba(76, 175, 80, 0.4);
     
     &::before {
       content: '';
@@ -199,7 +216,17 @@ mat-card-header {
       right: 0;
       bottom: 0;
       background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent);
-      animation: scan 2s linear infinite;
+      animation: scan 3s linear infinite;
+    }
+  }
+  
+  &.recording {
+    opacity: 1;
+    box-shadow: 0 0 30px rgba(76, 175, 80, 0.4);
+    
+    &::before {
+      background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
+      animation: scan 1.5s linear infinite;
     }
   }
 }