fix(pip): correctly identify whose mic is muted in PiP overlay

Previously PipMuteOverlay fired on useRemoteAllMuted (any remote
muted) and rendered in the bottom-left corner — the conventional
position for local-user mic status — causing users to think their
own mic was muted when it wasn't.

Fix: split into two distinct indicators
- Bottom-left: local mic muted only (from useCallControlState),
  labelled "You" so attribution is unambiguous
- Top-right: "All muted" warning (warning color, not critical) when
  all remote participants are muted

UNTESTED — verify in a real call at chat.lotusguild.org.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LOTUS_BUGS.md

@@ -8,6 +8,19 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 
 ## 🚩 Critical & UI Bugs
 
+### 12. PiP Mute Icon Misidentifies Whose Mic Is Muted
+
+- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
+- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with at least one other participant who mutes/unmutes
+- **Issue:** The muted-mic badge in the Picture-in-Picture window used `useRemoteAllMuted` (fires when ANY remote participant is muted) and rendered in the bottom-left corner — the conventional position for "YOUR" mic status. Users read it as their own mic being muted.
+- **Root Cause:** `PipMuteOverlay` was triggering on remote-mute events while displaying in a position that implies local-user status.
+- **Fix Applied:**
+  - **Bottom-left badge** now shows only when the LOCAL user's mic is muted (checked via `!controlState.microphone` from `useCallControlState`). Includes "You" label to make it unambiguous. Uses `color.Critical.Main`.
+  - **Top-right badge** (new) shows "All muted" in `color.Warning.Main` when all remote participants are muted — positioned and labeled so it's clearly about other people, not the local user.
+  - Both badges use `aria-label` / `title` for accessibility.
+
+---
+
 ### 1. No Camera Focus During Screenshare
 
 - **File:** `cinny/src/app/features/call/CallControls.tsx`

src/app/components/CallEmbedProvider.tsx

@@ -419,34 +419,61 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   return null;
 }
 
-/** Shown inside the PiP window when the local microphone is muted. */
+/**
+ * PiP status indicators:
+ * - Bottom-left badge: local mic muted (matches Discord/Slack convention — bottom-left = "your" mic)
+ * - Top-right badge: all remote participants are muted (quiet room warning)
+ *
+ * Deliberately separated so users never mistake remote-mute state for their own.
+ */
 function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
-  const allMuted = useRemoteAllMuted(callEmbed);
+  const mx = useMatrixClient();
-  if (!allMuted) return null;
+  const controlState = useCallControlState(callEmbed.control);
+  const allRemoteMuted = useRemoteAllMuted(callEmbed);
+
+  const localMicMuted = !controlState.microphone;
+  const localUserId = mx.getSafeUserId();
+  const localDisplayName = getMxIdLocalPart(localUserId) ?? localUserId;
+
+  const badgeStyle: React.CSSProperties = {
+    position: 'absolute',
+    zIndex: 3,
+    background: 'rgba(0,0,0,0.65)',
+    backdropFilter: 'blur(4px)',
+    borderRadius: '6px',
+    padding: '3px 7px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    lineHeight: 1,
+    userSelect: 'none',
+  };
+
   return (
-    <div
+    <>
-      aria-label="Microphone muted"
+      {localMicMuted && (
-      style={{
+        <div
-        position: 'absolute',
+          aria-label={`Your microphone is muted (${localDisplayName})`}
-        bottom: '8px',
+          title={`Your microphone is muted`}
-        left: '8px',
+          style={{ ...badgeStyle, bottom: '8px', left: '8px', color: color.Critical.Main }}
-        zIndex: 3,
+        >
-        background: 'rgba(0,0,0,0.60)',
+          <Icon size="100" src={Icons.MicMute} filled />
-        backdropFilter: 'blur(4px)',
+          <span style={{ fontSize: '11px', fontWeight: 600 }}>You</span>
-        borderRadius: '6px',
+        </div>
-        padding: '3px 7px',
+      )}
-        display: 'flex',
+      {allRemoteMuted && (
-        alignItems: 'center',
+        <div
-        gap: '4px',
+          aria-label="All other participants are muted"
-        pointerEvents: 'none',
+          title="All other participants are muted"
-        color: color.Critical.Main,
+          style={{ ...badgeStyle, top: '8px', right: '8px', color: color.Warning.Main }}
-        fontSize: '13px',
+        >
-        lineHeight: 1,
+          <Icon size="50" src={Icons.MicMute} />
-        userSelect: 'none',
+          <span style={{ fontSize: '11px' }}>All muted</span>
-      }}
+        </div>
-    >
+      )}
-      <Icon size="100" src={Icons.MicMute} filled />
+    </>
-    </div>
   );
 }