fix: missing mic toggle in Live2D view + YouTube autoplay

KiraAvatar: Added Talk mic button to Live2D view (was only in
AnimatedAvatar fallback). Includes listening-pulse animation.

MusicPlayer: Replaced hidden YouTube iframe with proper IFrame
Player API. Now starts on explicit user click (Start Lo-Fi button),
complying with browser autoplay policies. Supports station
switching and volume control after playback starts.

frontend/src/components/KiraAvatar.tsx

@@ -223,25 +223,40 @@ export default function KiraAvatar(props: Props) {
         </div>
       )}
 
-      {/* Expression indicator */}
+      {/* Expression indicator + Talk button */}
       {live2dReady && (
-        <div className="mt-1 flex gap-1.5 flex-wrap justify-center">
-          {EXPRESSIONS.map((expr) => (
-            <button
-              key={expr}
-              onClick={() => {
-                try { modelRef.current?.expression(expr); setCurrentExpression(expr); } catch {}
-              }}
-              className={`text-[9px] px-2 py-0.5 rounded-full font-medium transition-all ${
-                currentExpression === expr
-                  ? 'bg-kira-pink text-white'
-                  : 'text-kira-plum/30 hover:text-kira-plum/60'
-              }`}
-            >
-              {expr}
-            </button>
-          ))}
-        </div>
+        <>
+          <div className="mt-1 flex gap-1.5 flex-wrap justify-center">
+            {EXPRESSIONS.map((expr) => (
+              <button
+                key={expr}
+                onClick={() => {
+                  try { modelRef.current?.expression(expr); setCurrentExpression(expr); } catch {}
+                }}
+                className={`text-[9px] px-2 py-0.5 rounded-full font-medium transition-all ${
+                  currentExpression === expr
+                    ? 'bg-kira-pink text-white'
+                    : 'text-kira-plum/30 hover:text-kira-plum/60'
+                }`}
+              >
+                {expr}
+              </button>
+            ))}
+          </div>
+
+          {/* Talk button — mic toggle */}
+          <button
+            onClick={props.onTalkToggle}
+            className={`mt-2 flex items-center gap-2 px-5 py-2 rounded-full text-sm font-bold transition-all ${
+              props.isListening
+                ? 'bg-red-400 text-white shadow-lg scale-105 animate-listening-pulse'
+                : 'bg-gradient-to-r from-kira-pink to-kira-lav text-white hover:shadow-lg hover:scale-105'
+            }`}
+          >
+            <span className="text-base">{props.isListening ? '⏹️' : '🎤'}</span>
+            {props.isListening ? 'Listening...' : 'Talk to Kira'}
+          </button>
+        </>
       )}
 
       {/* Status bar */}
@@ -251,6 +266,16 @@ export default function KiraAvatar(props: Props) {
           {props.isSpeaking ? 'speaking...' : props.isListening ? 'listening...' : live2dReady ? 'here with you' : 'loading...'}
         </span>
       </div>
+
+      <style>{`
+        @keyframes listening-pulse {
+          0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
+          50% { box-shadow: 0 0 0 12px rgba(248, 113, 113, 0); }
+        }
+        .animate-listening-pulse {
+          animation: listening-pulse 1.5s infinite;
+        }
+      `}</style>
     </div>
   );
 }