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

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

@@ -249,4 +249,37 @@
 .realtime-indicator {
   color: #4caf50;
   animation: pulse 2s infinite;
+}
+
+// STT/TTS selection styling
+.tts-checkbox, .stt-checkbox {
+  display: block;
+  margin-bottom: 8px;
+  
+  &[disabled] {
+    opacity: 0.5;
+  }
+}
+
+.tts-hint, .stt-hint {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 16px;
+  margin-left: 32px; // Align with checkbox text
+  font-style: italic;
+}
+
+// Highlight when STT is enabled
+.stt-checkbox.mat-mdc-checkbox-checked + .stt-hint {
+  color: #4caf50;
+  font-weight: 500;
+}
+
+// Button states
+.mat-mdc-raised-button[disabled] {
+  opacity: 0.6;
+  
+  &.realtime-button {
+    opacity: 0.4;
+  }
 }