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',
                   }}

src/app/features/call/CallControls.tsx

@@ -55,6 +55,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
 
   const [cords, setCords] = useState<RectCords>();
   const [shareConfirm, setShareConfirm] = useState(false);
+  useEffect(() => {
+    if (!shareConfirm) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShareConfirm(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [shareConfirm]);
   const [pttMode] = useSetting(settingsAtom, 'pttMode');
   const [pttKey] = useSetting(settingsAtom, 'pttKey');
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
@@ -234,55 +242,62 @@ export function CallControls({ callEmbed }: CallControlsProps) {
           </Chip>
         ))}
       {shareConfirm && (
-        <Box
-          style={{
-            position: 'absolute',
-            bottom: '110%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: 'var(--bg-surface)',
-            border: '1px solid var(--border-color)',
-            borderRadius: '0.75rem',
-            padding: '1rem 1.25rem',
-            zIndex: 100,
-            minWidth: '260px',
-            boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
-          }}
-        >
-          <Text size="T300" style={{ fontWeight: 600 }}>
-            Share your screen?
-          </Text>
-          <Text size="T200" style={{ opacity: 0.75 }}>
-            Your screen will be visible to all participants in this call.
-          </Text>
-          <Box gap="200">
-            <Button
-              size="300"
-              variant="Success"
-              fill="Solid"
-              radii="300"
-              onClick={() => {
-                callEmbed.control.toggleScreenshare();
-                setShareConfirm(false);
-              }}
-            >
-              <Text size="B300">Share</Text>
-            </Button>
-            <Button
-              size="300"
-              variant="Secondary"
-              fill="Soft"
-              radii="300"
-              outlined
-              onClick={() => setShareConfirm(false)}
-            >
-              <Text size="B300">Cancel</Text>
-            </Button>
+        <>
+          <div
+            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
+            onClick={() => setShareConfirm(false)}
+            aria-hidden="true"
+          />
+          <Box
+            style={{
+              position: 'absolute',
+              bottom: '110%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              background: 'var(--bg-surface)',
+              border: '1px solid var(--bg-surface-border)',
+              borderRadius: '0.75rem',
+              padding: '1rem 1.25rem',
+              zIndex: 100,
+              minWidth: '260px',
+              boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.75rem',
+            }}
+          >
+            <Text size="T300" style={{ fontWeight: 600 }}>
+              Share your screen?
+            </Text>
+            <Text size="T200" style={{ opacity: 0.75 }}>
+              Your screen will be visible to all participants in this call.
+            </Text>
+            <Box gap="200">
+              <Button
+                size="300"
+                variant="Success"
+                fill="Solid"
+                radii="300"
+                onClick={() => {
+                  callEmbed.control.toggleScreenshare();
+                  setShareConfirm(false);
+                }}
+              >
+                <Text size="B300">Share</Text>
+              </Button>
+              <Button
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                outlined
+                onClick={() => setShareConfirm(false)}
+              >
+                <Text size="B300">Cancel</Text>
+              </Button>
+            </Box>
           </Box>
-        </Box>
+        </>
       )}
       <SequenceCard
         className={css.ControlCard}