Update style.css

style.css

@@ -153,6 +153,7 @@ body {
     text-overflow: ellipsis;
 }
 
+/* Webcam Overlay Styles */
 .webcam-container {
     position: fixed;
     bottom: 20px;
@@ -215,6 +216,7 @@ body {
     font-weight: bold;
 }
 
+/* Action Feedback */
 .action-feedback {
     position: fixed;
     top: 20px;
@@ -247,6 +249,7 @@ body {
     background-color: #4285f4;
 }
 
+/* Selected Email Highlight */
 .selection-highlight {
     position: absolute;
     border: 3px solid #4285f4;
@@ -262,6 +265,7 @@ body {
     100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
 }
 
+/* Gesture Visualization */
 .gesture-visualization {
     position: fixed;
     top: 0;
@@ -309,6 +313,7 @@ body {
     transform: translate(-50%, -50%);
 }
 
+/* Debug Panel */
 .debug-panel {
     position: fixed;
     top: 60px;
@@ -353,6 +358,37 @@ body {
     color: #fff;
 }
 
+/* Status Indicator */
+.status-indicator {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    z-index: 200;
+}
+
+.status-indicator.ready {
+    background-color: #34a853;
+    box-shadow: 0 0 10px #34a853;
+}
+
+.status-indicator.processing {
+    background-color: #fbbc05;
+    animation: blink 1s infinite;
+}
+
+.status-indicator.error {
+    background-color: #ea4335;
+    animation: blink 0.5s infinite;
+}
+
+@keyframes blink {
+    50% { opacity: 0.5; }
+}
+
+/* For mobile responsiveness */
 @media (max-width: 768px) {
     .webcam-container {
         width: 240px;