💄(style) align pip layout with room styling

match pip background and spacing to

CHANGELOG.md

@@ -235,6 +235,8 @@ and this project adheres to
 
 - ✨(backend) monitor throttling rate failure through sentry #964
 - 🚀(paas) add PaaS deployment scripts, tested on Scalingo #957
+- ✨(feat) Introduce Picture-in-Picture (PiP) #890
+
 
 ### Changed
 

src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx

@@ -29,6 +29,34 @@ const copyStyles = (source: Document, target: Document) => {
   })
 }
 
+const syncThemeAttribute = (source: Document, target: Document) => {
+  const theme = source.documentElement.getAttribute('data-lk-theme')
+  if (theme) {
+    target.documentElement.setAttribute('data-lk-theme', theme)
+  }
+}
+
+const syncCssVariables = (source: Document, target: Document) => {
+  const sourceView = source.defaultView
+  if (!sourceView) return
+
+  const applyVarsFrom = (element: HTMLElement | null) => {
+    if (!element) return
+    const styles = sourceView.getComputedStyle(element)
+    for (let i = 0; i < styles.length; i += 1) {
+      const property = styles[i]
+      if (!property.startsWith('--')) continue
+      const value = styles.getPropertyValue(property)
+      if (value) {
+        target.documentElement.style.setProperty(property, value)
+      }
+    }
+  }
+
+  applyVarsFrom(source.documentElement)
+  applyVarsFrom(source.body)
+}
+
 /**
  * React Portal that renders children into a Document Picture-in-Picture window.
  * Handles PiP window lifecycle, style injection, React root management, and uses UNSAFE_PortalProvider
@@ -71,6 +99,8 @@ export const DocumentPiPPortal = ({
       const doc = win.document
       ensureBaseStyles(doc)
       copyStyles(document, doc)
+      syncThemeAttribute(document, doc)
+      syncCssVariables(document, doc)
       const existingContainer = containerRef.current
       if (!existingContainer || existingContainer.ownerDocument !== doc) {
         const nextContainer = doc.createElement('div')

src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx

@@ -45,9 +45,7 @@ const PipControls = styled('div', {
     alignItems: 'center',
     gap: '0.5rem',
     padding: '0.5rem 0.75rem',
-    backgroundColor: 'var(--lk-controlbar-bg)',
-    borderTop: '1px solid',
-    borderColor: 'var(--lk-control-border-color)',
+    backgroundColor: 'primaryDark.50',
     width: '100%',
     position: 'relative',
   },

src/frontend/src/features/rooms/livekit/components/PipView.tsx

@@ -48,9 +48,11 @@ export const PipView = () => {
       {/* Keep stage height stable to avoid layout shifting on track changes. */}
       <PipStage>
         {hasMultipleTiles ? (
-          <GridLayout tracks={tracks} style={{ height: '100%' }}>
-            <ParticipantTile disableMetadata />
-          </GridLayout>
+          <PipGridWrapper>
+            <GridLayout tracks={tracks} style={{ height: '100%' }}>
+              <ParticipantTile disableMetadata />
+            </GridLayout>
+          </PipGridWrapper>
         ) : (
           <ParticipantTile trackRef={trackRef} disableMetadata />
         )}
@@ -94,3 +96,15 @@ const PipStage = styled('div', {
   },
 })
 
+const PipGridWrapper = styled('div', {
+  base: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  },
+})
+