fix: screenshare dismiss, GIF header, PiP resize, call subtitle, CSS vars

- CallControls: screenshare confirm now closes on Escape or click-outside
  (transparent fixed backdrop + window keydown listener); cleaned indentation
- GifPicker: TDS header rendered a JSX comment ({/* GIF_SEARCH */}) so the
  // GIF_SEARCH label was invisible; changed to {'// GIF_SEARCH'}
- CallEmbedProvider: PiP resize clamping now works at initial bottom/right
  position by normalising to top/left before parsing el.style.left
- CallEmbedProvider: incoming call subtitle now reads 'Incoming Video Call'
  or 'Incoming Voice Call' based on m.call.intent
- PollContent: progress bar background now uses --bg-surface-active /
  --bg-surface-low instead of hardcoded white (invisible in light mode)
- index.css + lotus-terminal.css.ts: define --bg-surface, --bg-surface-low,
  --bg-surface-active, --bg-surface-border, --text-primary as global CSS vars
  with vanilla fallbacks and TDS dark/light overrides; these were used by
  poll, location map, upload card and GIF picker but never defined

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

src/app/components/CallEmbedProvider.tsx

@@ -190,7 +190,9 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                     <Text size="H3" align="Center" truncate>
                       {roomName}
                     </Text>
-                    <Text size="T300">Incoming Call</Text>
+                    <Text size="T300">
+                      {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice Call'}
+                    </Text>
                   </Box>
                 </Box>
                 {!livekitSupported && (
@@ -490,6 +492,8 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     const onPipWindowResize = (): void => {
       const el = callEmbedRef.current;
       if (!el) return;
+      // Normalise bottom/right → top/left so clamp math works regardless of initial position.
+      if (!el.style.left || el.style.left === 'auto') normaliseToTopLeft(el);
       const l = parseFloat(el.style.left);
       const t = parseFloat(el.style.top);
       if (!isNaN(l))

src/app/components/GifPicker.tsx

@@ -45,7 +45,7 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
             userSelect: 'none',
           }}
         >
-          {/* GIF_SEARCH */}
+          {'// GIF_SEARCH'}
         </div>
       )}
       <Box style={{ padding: '8px 8px 4px' }}>

src/app/components/message/content/PollContent.tsx

@@ -280,7 +280,9 @@ export function PollContent({
                     position: 'absolute',
                     inset: 0,
                     width: `${pct}%`,
-                    background: selected ? 'rgba(255,255,255,0.10)' : 'rgba(255,255,255,0.05)',
+                    background: selected
+                      ? 'var(--bg-surface-active)'
+                      : 'var(--bg-surface-low)',
                     borderRadius: '8px',
                     pointerEvents: 'none',
                   }}