revamped HUD

src/components/launch/LaunchWindow.module.css

@@ -2,16 +2,119 @@
   -webkit-app-region: drag;
 }
 
-.hudBar {
-  isolation: isolate;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
-}
-
 .electronNoDrag {
   -webkit-app-region: no-drag;
 }
 
+.hudBar {
+  isolation: isolate;
+  box-shadow:
+    0 2px 16px rgba(0, 0, 0, 0.25),
+    0 0 40px rgba(100, 80, 200, 0.08);
+}
 
+/* Sub-pill group container */
+.hudGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 9999px;
+  padding: 4px 8px;
+  transition: background 0.15s ease;
+}
+
+.hudGroup:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Icon button within groups */
+.hudIconBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 9999px;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: #fff;
+}
+
+.hudIconBtn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: scale(1.08);
+}
+
+.hudIconBtn:active {
+  transform: scale(0.95);
+}
+
+/* Active icon glow (green) for enabled audio toggles */
+.hudIconActive {
+  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
+}
+
+/* Recording pulse animation on the record group */
+@keyframes recordPulse {
+  0%, 100% {
+    box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
+  }
+}
+
+.recordingPulse {
+  animation: recordPulse 1.5s ease-in-out infinite;
+  background: rgba(239, 68, 68, 0.1) !important;
+}
+
+/* Mic panel above the bar */
+.micPanel {
+  background: linear-gradient(135deg, rgba(28, 28, 36, 0.97) 0%, rgba(18, 18, 26, 0.96) 100%);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border: 1px solid rgba(80, 80, 120, 0.25);
+  border-radius: 16px;
+  box-shadow:
+    0 2px 12px rgba(0, 0, 0, 0.2),
+    0 0 30px rgba(100, 80, 200, 0.06);
+  animation: micPanelIn 0.15s ease-out;
+}
+
+@keyframes micPanelIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Window control buttons */
+.windowBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 9999px;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  opacity: 0.5;
+}
+
+.windowBtn:hover {
+  opacity: 0.9;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Folder button */
 .folderButton {
   cursor: pointer;
   display: flex;
@@ -27,16 +130,3 @@
 .folderButton:hover .folderText {
   text-decoration: underline;
 }
-
-.hudOverlayButton {
-  cursor: pointer;
-  background: none;
-  border: none;
-  color: #fff;
-  opacity: 0.7;
-  transition: opacity 0.15s;
-}
-.hudOverlayButton:hover {
-  opacity: 0.7;
-  background: none !important;
-}