Update style.css

style.css

@@ -45,19 +45,6 @@ body {
     font-size: 24px;
 }
 
-.debug-toggle {
-    background: none;
-    border: none;
-    color: #4285f4;
-    font-size: 18px;
-    cursor: pointer;
-    margin-left: 15px;
-}
-
-.debug-toggle:hover {
-    color: #2962ff;
-}
-
 .search-bar {
     display: flex;
     align-items: center;
@@ -76,6 +63,31 @@ body {
     outline: none;
 }
 
+/* Debug Toggle Button */
+.debug-toggle {
+    margin-left: 20px;
+    position: relative;
+}
+
+.debug-button {
+    background-color: #f1f3f4;
+    border: 1px solid #e0e0e0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.debug-button:hover {
+    background-color: #e0e0e0;
+    transform: scale(1.05);
+}
+
 /* Main Content Layout */
 .content {
     display: flex;
@@ -167,7 +179,7 @@ body {
     max-width: 300px;
     z-index: 100;
     backdrop-filter: blur(5px);
-    opacity: 0.4;
+    opacity: 0.9;
     transition: opacity 0.3s;
 }
 
@@ -296,59 +308,37 @@ body {
     transform: translate(-50%, -50%);
 }
 
-/* Collapsible Debug Panel */
+/* Debug Panel */
 .debug-panel {
-    position: absolute;
-    top: 60px; /* Matches header height */
+    position: fixed;
+    top: 60px; /* Below header */
     right: 20px;
-    background-color: rgba(0,0,0,0.7);
+    background-color: rgba(0,0,0,0.8);
     color: #0f0;
     padding: 15px;
     border-radius: 12px;
     max-width: 300px;
     z-index: 100;
     backdrop-filter: blur(5px);
-    opacity: 0.4;
-    transition: opacity 0.3s, transform 0.3s;
-    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    transform: translateY(-10px);
 }
 
-.debug-panel.active {
+.debug-panel.visible {
     opacity: 1;
+    visibility: visible;
     transform: translateY(0);
 }
 
-.debug-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.debug-panel h3 {
+    color: #4285f4;
     margin-bottom: 10px;
 }
 
-.collapse-btn {
-    background: none;
-    border: none;
-    color: #fff;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.collapse-btn:hover {
-    color: #2962ff;
-}
-
-.debug-content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s;
-}
-
-.debug-panel.active .debug-content {
-    max-height: 500px;
-}
-
 .debug-item {
     margin-bottom: 5px;
 }
@@ -363,36 +353,6 @@ 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 {