fix(touchbar): float lock hint chevron above mic button

Position the swipe-to-lock chevron hint above the button using absolute
positioning so it remains visible while the user's finger covers the
button during press-and-hold. Increased chevron size (10→14px), added
drop-shadow for contrast, and amplified bounce animation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

src/frontend/src/components/TouchBar/TouchBar.module.css

@@ -117,8 +117,12 @@
 }
 
 .lockHint {
-  opacity: 0.6;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  opacity: 0.7;
   animation: lockHintBounce 1.2s ease-in-out infinite;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
 }
 
 @keyframes micDotBlink {
@@ -134,12 +138,12 @@
 @keyframes lockHintBounce {
   0%,
   100% {
-    transform: translateY(0);
+    transform: translateX(-50%) translateY(0);
     opacity: 0.5;
   }
   50% {
-    transform: translateY(-2px);
-    opacity: 0.9;
+    transform: translateX(-50%) translateY(-4px);
+    opacity: 1;
   }
 }
 

src/frontend/src/components/TouchBar/TouchBar.tsx

@@ -487,7 +487,7 @@ export default function TouchBar() {
             ) : isRecording ? (
               <>
                 <span className={styles.micDot} />
-                <svg className={styles.lockHint} width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <svg className={styles.lockHint} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                   <polyline points="18 15 12 9 6 15" />
                 </svg>
               </>