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

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

@@ -38,82 +38,14 @@ mat-card-header {
   }
 }
 
-.transcription-area {
-  background: #e8f5e9;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  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;
-    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 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; }
-  100% { transform: scale(1); opacity: 1; }
-}
-
-@keyframes dots {
-  0%, 20% { content: '.'; }
-  40% { content: '..'; }
-  60%, 100% { content: '...'; }
-}
-
 .chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
   background: #fafafa;
   border-radius: 8px;
-  min-height: 200px;
-  max-height: 400px;
+  min-height: 300px;
+  max-height: 450px;
 }
 
 .message {
@@ -205,43 +137,12 @@ mat-card-header {
   overflow: hidden;
   
   &.active {
-    opacity: 0.7;
-    background: #1a1a1a;
-    
-    &::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 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;
-    }
+    background: #1a1a1a;
+    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
   }
 }
 
-@keyframes scan {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-@keyframes visualizerPulse {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.01); }
-  100% { transform: scale(1); }
-}
-
 mat-chip {
   font-size: 12px;
 }