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

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

@@ -39,30 +39,53 @@ mat-card-header {
 }
 
 .transcription-area {
-  background: #f5f5f5;
+  background: #e8f5e9;
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 16px;
   min-height: 60px;
-  animation: pulse 2s infinite;
+  border: 2px solid #4caf50;
+  transition: all 0.3s ease;
+  
+  .transcription-label {
+    font-size: 12px;
+    color: #2e7d32;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .pulse-icon {
+      font-size: 16px;
+      animation: pulse 1.5s infinite;
+      color: #4caf50;
+    }
+  }
+  
+  .transcription-text {
+    font-size: 16px;
+    color: #1b5e20;
+    min-height: 24px;
+    font-weight: 500;
+    
+    &:empty::after {
+      content: '...';
+      color: #81c784;
+      animation: dots 1.5s infinite;
+    }
+  }
 }
 
 @keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1; }
-}
-
-.transcription-label {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
+  0% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.1); opacity: 0.8; }
+  100% { transform: scale(1); opacity: 1; }
 }
 
-.transcription-text {
-  font-size: 16px;
-  color: #333;
-  min-height: 24px;
+@keyframes dots {
+  0%, 20% { content: '.'; }
+  40% { content: '..'; }
+  60%, 100% { content: '...'; }
 }
 
 .chat-messages {
@@ -155,31 +178,35 @@ mat-card-header {
 .audio-visualizer {
   width: 100%;
   height: 100px;
-  background: #333;
+  background: #212121;
   border-radius: 8px;
   margin-top: 16px;
-  opacity: 0.3;
+  opacity: 0.5;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
   
   &.active {
     opacity: 1;
-    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
+    background: #1a1a1a;
+    box-shadow: 0 0 30px rgba(76, 175, 80, 0.4);
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent);
+      animation: scan 2s linear infinite;
+    }
   }
 }
 
-.transcription-area {
-  background: #f5f5f5;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  min-height: 60px;
-  animation: pulse 2s infinite;
-  border: 2px solid #4caf50;
-  
-  &:empty::after {
-    content: '...';
-    color: #999;
-  }
+@keyframes scan {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
 }
 
 @keyframes visualizerPulse {