PTT fixes, TDS expansions, performance hooks, state event renderers

PTT fixes (BUG-7/8/9):
- BUG-7: Fix isEditable to use ownerDocument.body (works in EC iframe context)
- BUG-8: Release mic if callEmbed changes during active PTT (cleanup fn)
- BUG-9: Wire iframe blur/focus listeners for stuck-mic prevention

PiP bug fix (BUG-11):
- Track prevPipMode ref so position only resets when first entering pip mode,
  not on every callVisible change (user drag position preserved)

GIF improvements (BUG-15):
- Show user-visible error text in toolbar on GIF send failure
- Also surface size-limit rejection with a 4-second auto-clearing message

Performance:
- useInterval: replace useMemo with useEffect for setInterval (React StrictMode safe)
- usePan: add unmount cleanup effect to remove document mousemove/mouseup listeners

Feature: timeline state event renderers (low effort, high value):
- Added renderers for RoomEncryption, RoomJoinRules, RoomGuestAccess, RoomCanonicalAlias
- These were silently falling through to the hidden-events fallback

TDS (Lotus Terminal Design System):
- Fix: correct 8 escaped template literals in GIF picker light-mode block
- Add data-emoji-board attribute to EmojiBoardLayout for stable CSS targeting
- Add Tooltip panel styles (dark + light mode)
- Add Switch toggle styles (dark + light mode)
- Add Spinner stroke colors (dark + light mode)
- Add EmojiBoard panel styles (dark + light mode)
- Add PopOut/Menu/floating panel styles (dark + light mode)

src/app/components/CallEmbedProvider.tsx

@@ -415,20 +415,26 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const activeDragCleanupRef = React.useRef<(() => void) | null>(null);
   React.useEffect(() => () => { activeDragCleanupRef.current?.(); }, []);
 
+  // Track previous pipMode to only reset position when first entering pip (not on callVisible changes)
+  const prevPipModeRef = React.useRef(false);
   React.useEffect(() => {
     const el = callEmbedRef.current;
     if (!el) return;
     if (pipMode) {
-      el.style.top = 'auto'; el.style.left = 'auto';
-      el.style.bottom = '72px'; el.style.right = '16px';
-      el.style.width = '280px'; el.style.height = '158px';
-      el.style.borderRadius = '12px'; el.style.overflow = 'hidden';
-      el.style.zIndex = '99'; el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
-      el.style.border = '1px solid rgba(255,255,255,0.1)'; el.style.visibility = 'visible';
+      if (!prevPipModeRef.current) {
+        el.style.top = 'auto'; el.style.left = 'auto';
+        el.style.bottom = '72px'; el.style.right = '16px';
+        el.style.width = '280px'; el.style.height = '158px';
+        el.style.borderRadius = '12px'; el.style.overflow = 'hidden';
+        el.style.zIndex = '99'; el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
+        el.style.border = '1px solid rgba(255,255,255,0.1)';
+      }
+      el.style.visibility = 'visible';
     } else {
       ['top','left','bottom','right','width','height','borderRadius','overflow','zIndex','boxShadow','border'].forEach(p => { (el.style as any)[p] = ''; });
       el.style.visibility = callVisible ? '' : 'hidden';
     }
+    prevPipModeRef.current = pipMode;
   }, [pipMode, callVisible]);
 
   React.useEffect(() => {

src/app/components/emoji-board/EmojiBoard.tsx

@@ -52,6 +52,8 @@ import {
 } from './components';
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -503,6 +505,7 @@ export function EmojiBoard({
       }}
     >
       <EmojiBoardLayout
+        data-emoji-board=""
         header={
           <Box direction="Column" gap="200">
             {onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />}