ui: visual polish — animations, icons, and interaction improvements

- Spin animation on ⟳ delivery status during SENDING/ENCRYPTING states
- Pulsing ● dot on PTT LIVE badge (pttLivePulse keyframe)
- Read receipt pill: hover scale/opacity transition, symmetric padding
- PiP resize handles: larger dots (5px), wider hit area (24px), higher contrast
- ForwardMessageDialog: position:relative on scroll container, spinner overlay 0.35 opacity
- Boot sequence: 45ms interval (was 65ms), brighter ESC hint (0.55 opacity)
- Location button: Icons.Pin → Icons.SpaceGlobe (globe icon)

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

src/app/components/CallEmbedProvider.tsx

@@ -737,15 +737,16 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
               const s = corner.includes('s');
               const e2 = corner.includes('e');
               const dots = [
-                [2, 2],
-                [2, 7],
-                [7, 2],
+                [3, 3],
+                [3, 10],
+                [10, 3],
               ].map(([a, b]) => ({
                 position: 'absolute' as const,
-                width: 4,
-                height: 4,
+                width: 5,
+                height: 5,
                 borderRadius: '50%',
-                background: 'rgba(255,255,255,0.45)',
+                background: 'rgba(255,255,255,0.65)',
+                boxShadow: '0 0 3px rgba(0,0,0,0.4)',
                 [s ? 'bottom' : 'top']: a,
                 [e2 ? 'right' : 'left']: b,
               }));
@@ -756,8 +757,8 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                   onClick={(ev) => ev.stopPropagation()}
                   style={{
                     position: 'absolute',
-                    width: '18px',
-                    height: '18px',
+                    width: '24px',
+                    height: '24px',
                     [s ? 'bottom' : 'top']: 0,
                     [e2 ? 'right' : 'left']: 0,
                     cursor: `${corner}-resize`,

src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -62,6 +62,7 @@ export function ReadReceiptAvatars({
         onClick={() => setOpen(true)}
         title={tooltipNames}
         aria-label={tooltipNames}
+        className="receipt-pill-btn"
         style={{
           background: 'none',
           border: 'none',
@@ -72,6 +73,16 @@ export function ReadReceiptAvatars({
           display: 'flex',
           alignItems: 'center',
           gap: '4px',
+          opacity: 0.85,
+          transition: 'opacity 0.15s, transform 0.15s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.opacity = '1';
+          e.currentTarget.style.transform = 'scale(1.04)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.opacity = '0.85';
+          e.currentTarget.style.transform = 'scale(1)';
         }}
       >
         {/* Pill wrapper ensures visibility on any wallpaper/background */}
@@ -85,7 +96,7 @@ export function ReadReceiptAvatars({
             border: lotusTerminal ? '1px solid rgba(0,212,255,0.30)' : '1px solid transparent',
             boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none',
             borderRadius: '999px',
-            padding: '2px 6px 2px 2px',
+            padding: '2px 6px',
             gap: '0px',
           }}
         >