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}

src/index.css

@@ -9,6 +9,13 @@
 :root {
   --tc-link: hsl(213deg 100% 45%);
 
+  /* semantic surface vars used by poll, location, upload card, gif picker */
+  --bg-surface: #ffffff;
+  --bg-surface-low: rgba(0, 0, 0, 0.04);
+  --bg-surface-active: rgba(0, 0, 0, 0.10);
+  --bg-surface-border: rgba(0, 0, 0, 0.14);
+  --text-primary: #1a1a1a;
+
   /* user mxid colors */
   --mx-uc-1: hsl(208, 100%, 45%);
   --mx-uc-2: hsl(302, 100%, 30%);
@@ -27,6 +34,13 @@
 .butter-theme {
   --tc-link: hsl(213deg 100% 80%);
 
+  /* semantic surface vars — dark overrides */
+  --bg-surface: #25272e;
+  --bg-surface-low: rgba(255, 255, 255, 0.05);
+  --bg-surface-active: rgba(255, 255, 255, 0.10);
+  --bg-surface-border: rgba(255, 255, 255, 0.12);
+  --text-primary: #e0e5ed;
+
   --mx-uc-1: hsl(208, 100%, 75%);
   --mx-uc-2: hsl(301, 100%, 80%);
   --mx-uc-3: hsl(163, 100%, 70%);

src/lotus-terminal.css.ts

@@ -85,6 +85,12 @@ export const lotusTerminalBodyClass = style({
     '--lt-font-mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
     '--lt-font-display': "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
     '--lt-font-crt': "'VT323', 'Courier New', monospace",
+    // Semantic surface aliases (poll, location, upload card, gif picker)
+    '--bg-surface': '#07101a',
+    '--bg-surface-low': '#060c14',
+    '--bg-surface-active': 'rgba(0,212,255,0.12)',
+    '--bg-surface-border': 'rgba(0,212,255,0.20)',
+    '--text-primary': '#c4d9ee',
   } as any,
 });
 
@@ -436,6 +442,12 @@ globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass}`, {
     '--lt-box-glow-green': '0 0 0 2px rgba(0,109,53,0.22),  0 2px 8px rgba(0,109,53,0.12)',
     '--lt-box-glow-red': '0 0 0 2px rgba(181,0,31,0.22),  0 2px 8px rgba(181,0,31,0.12)',
     '--lt-box-glow-amber': '0 0 0 2px rgba(138,90,0,0.22),  0 2px 8px rgba(138,90,0,0.12)',
+    // Semantic surface aliases — light overrides
+    '--bg-surface': '#ffffff',
+    '--bg-surface-low': '#e2e7ef',
+    '--bg-surface-active': 'rgba(0,98,184,0.10)',
+    '--bg-surface-border': 'rgba(0,98,184,0.22)',
+    '--text-primary': '#111827',
   } as any,
 });