diff --git a/static/app/components/core/pictureInPicture/index.tsx b/static/app/components/core/pictureInPicture/index.tsx
new file mode 100644
index 00000000000000..bddc9b39134d50
--- /dev/null
+++ b/static/app/components/core/pictureInPicture/index.tsx
@@ -0,0 +1,2 @@
+export {PictureInPictureProvider, usePictureInPicture} from './pictureInPicture';
+export {PictureInPicturePortal} from './pictureInPicturePortal';
diff --git a/static/app/components/core/pictureInPicture/pictureInPicture.spec.tsx b/static/app/components/core/pictureInPicture/pictureInPicture.spec.tsx
new file mode 100644
index 00000000000000..043e81d7a328cd
--- /dev/null
+++ b/static/app/components/core/pictureInPicture/pictureInPicture.spec.tsx
@@ -0,0 +1,166 @@
+import {act, renderHook, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {
+  PictureInPictureProvider,
+  usePictureInPicture,
+} from '@sentry/scraps/pictureInPicture';
+
+type FakePipWindow = Window & {
+  __listeners: Record<string, Array<() => void>>;
+};
+
+function createFakePipWindow(): FakePipWindow {
+  const doc = document.implementation.createHTMLDocument('pip');
+  const listeners: Record<string, Array<() => void>> = {};
+
+  const win = {
+    document: doc,
+    closed: false,
+    close: jest.fn(() => {
+      win.closed = true;
+      (listeners.pagehide ?? []).forEach(fn => fn());
+    }),
+    focus: jest.fn(),
+    addEventListener: jest.fn((type: string, fn: () => void) => {
+      (listeners[type] ??= []).push(fn);
+    }),
+    removeEventListener: jest.fn((type: string, fn: () => void) => {
+      listeners[type] = (listeners[type] ?? []).filter(listener => listener !== fn);
+    }),
+    __listeners: listeners,
+  };
+
+  return win as unknown as FakePipWindow;
+}
+
+function stubDocumentPictureInPicture(pip: FakePipWindow) {
+  const requestWindow = jest.fn().mockResolvedValue(pip);
+  Object.defineProperty(window, 'documentPictureInPicture', {
+    configurable: true,
+    writable: true,
+    value: {requestWindow, window: null},
+  });
+  return requestWindow;
+}
+
+describe('usePictureInPicture', () => {
+  afterEach(() => {
+    // @ts-expect-error - cleaning up the stub
+    delete window.documentPictureInPicture;
+  });
+
+  it('throws when used outside of a provider', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderHook(() => usePictureInPicture())).toThrow(
+      'usePictureInPicture must be used within a PictureInPictureProvider'
+    );
+    // eslint-disable-next-line no-console
+    jest.mocked(console.error).mockRestore();
+  });
+
+  it('reports unsupported when the API is unavailable', () => {
+    const {result} = renderHook(() => usePictureInPicture(), {
+      wrapper: PictureInPictureProvider,
+    });
+    expect(result.current.isSupported).toBe(false);
+    expect(result.current.pipWindow).toBeNull();
+  });
+
+  it('opens a window and copies stylesheets into it', async () => {
+    const style = document.createElement('style');
+    style.textContent = '.pip-test{color:red;}';
+    document.head.appendChild(style);
+
+    const pip = createFakePipWindow();
+    const requestWindow = stubDocumentPictureInPicture(pip);
+
+    const {result} = renderHook(() => usePictureInPicture(), {
+      wrapper: PictureInPictureProvider,
+    });
+    expect(result.current.isSupported).toBe(true);
+
+    await act(async () => {
+      await result.current.requestPipWindow({width: 400, height: 600});
+    });
+
+    expect(requestWindow).toHaveBeenCalledWith(
+      expect.objectContaining({width: 400, height: 600})
+    );
+    await waitFor(() => expect(result.current.pipWindow).toBe(pip));
+    const copiedStyles = Array.from(pip.document.head.querySelectorAll('style'));
+    expect(copiedStyles.some(tag => tag.innerHTML.includes('.pip-test'))).toBe(true);
+
+    document.head.removeChild(style);
+  });
+
+  it('does not copy emotion style tags (they are re-injected by the portal)', async () => {
+    const emotionStyle = document.createElement('style');
+    emotionStyle.setAttribute('data-emotion', 'app');
+    emotionStyle.textContent = '.emotion-skip{color:blue;}';
+    document.head.appendChild(emotionStyle);
+
+    const pip = createFakePipWindow();
+    stubDocumentPictureInPicture(pip);
+
+    const {result} = renderHook(() => usePictureInPicture(), {
+      wrapper: PictureInPictureProvider,
+    });
+
+    await act(async () => {
+      await result.current.requestPipWindow();
+    });
+    await waitFor(() => expect(result.current.pipWindow).toBe(pip));
+
+    const copiedStyles = Array.from(pip.document.head.querySelectorAll('style'));
+    expect(copiedStyles.some(tag => tag.innerHTML.includes('.emotion-skip'))).toBe(false);
+
+    document.head.removeChild(emotionStyle);
+  });
+
+  it('resets state when the window is closed by the user', async () => {
+    const pip = createFakePipWindow();
+    stubDocumentPictureInPicture(pip);
+
+    const {result} = renderHook(() => usePictureInPicture(), {
+      wrapper: PictureInPictureProvider,
+    });
+
+    await act(async () => {
+      await result.current.requestPipWindow();
+    });
+    await waitFor(() => expect(result.current.pipWindow).toBe(pip));
+
+    // Simulate the user closing the window (fires `pagehide`).
+    act(() => {
+      pip.__listeners.pagehide!.forEach(fn => fn());
+    });
+
+    expect(result.current.pipWindow).toBeNull();
+  });
+
+  it('closePipWindow closes the window and is idempotent', async () => {
+    const pip = createFakePipWindow();
+    stubDocumentPictureInPicture(pip);
+
+    const {result} = renderHook(() => usePictureInPicture(), {
+      wrapper: PictureInPictureProvider,
+    });
+
+    await act(async () => {
+      await result.current.requestPipWindow();
+    });
+    await waitFor(() => expect(result.current.pipWindow).toBe(pip));
+
+    act(() => {
+      result.current.closePipWindow();
+    });
+    expect(pip.close).toHaveBeenCalledTimes(1);
+    expect(result.current.pipWindow).toBeNull();
+
+    // Calling again is a no-op.
+    act(() => {
+      result.current.closePipWindow();
+    });
+    expect(pip.close).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/static/app/components/core/pictureInPicture/pictureInPicture.tsx b/static/app/components/core/pictureInPicture/pictureInPicture.tsx
new file mode 100644
index 00000000000000..9f62eca6b7d6a2
--- /dev/null
+++ b/static/app/components/core/pictureInPicture/pictureInPicture.tsx
@@ -0,0 +1,193 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+
+interface RequestPipWindowOptions {
+  height?: number;
+  /**
+   * Opens at the browser's default placement instead of remembering where the
+   * window was last positioned. Useful to avoid the window reappearing far from
+   * where it was triggered.
+   */
+  preferInitialWindowPlacement?: boolean;
+  width?: number;
+}
+
+interface PictureInPictureContextValue {
+  /**
+   * Closes the picture-in-picture window if one is open. Idempotent.
+   */
+  closePipWindow: () => void;
+  /**
+   * Whether the Document Picture-in-Picture API is available in this browser.
+   */
+  isSupported: boolean;
+  /**
+   * The currently open picture-in-picture window, or null. Watch this value to
+   * react to the window being closed (by the user or programmatically).
+   */
+  pipWindow: Window | null;
+  /**
+   * Opens a picture-in-picture window. Must be called from a user gesture (e.g.
+   * a click handler) — the API requires transient activation.
+   */
+  requestPipWindow: (options?: RequestPipWindowOptions) => Promise<void>;
+}
+
+const PictureInPictureContext = createContext<PictureInPictureContextValue | null>(null);
+
+/**
+ * Copies the document's static stylesheets into the picture-in-picture window so
+ * its content renders with the same styles.
+ *
+ * Styles must be applied *synchronously* — content that measures itself on mount
+ * (e.g. autosizing textareas reading `getComputedStyle`) would otherwise compute
+ * the wrong size before async styles load. So linked stylesheets are inlined
+ * rule-by-rule rather than cloned (a cloned `<link>` fetches asynchronously);
+ * `<style>` tags are cloned since their text is already present.
+ *
+ * Emotion's own style tags are skipped because `PictureInPicturePortal`
+ * re-injects them via a PiP-scoped cache. Copying them here would duplicate a
+ * large amount of CSS and is the main cause of slow pop-out (especially in dev
+ * builds, where every styled component emits its own tag).
+ */
+function copyStyles(source: Document, target: Window) {
+  const nodes = source.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(
+    'link[rel="stylesheet"], style'
+  );
+  for (const node of nodes) {
+    // Emotion styles are re-injected via the PiP-scoped emotion cache.
+    if (node instanceof HTMLStyleElement && node.dataset.emotion) {
+      continue;
+    }
+
+    // Inline linked stylesheets so they apply immediately. Cross-origin sheets
+    // throw on `cssRules` access — fall back to cloning the <link> for those.
+    if (node instanceof HTMLLinkElement) {
+      try {
+        const cssText = Array.from(node.sheet?.cssRules ?? [])
+          .map(rule => rule.cssText)
+          .join('');
+        const style = target.document.createElement('style');
+        style.textContent = cssText;
+        target.document.head.appendChild(style);
+        continue;
+      } catch {
+        // Cross-origin stylesheet — clone the <link> (loads asynchronously).
+      }
+    }
+
+    target.document.head.appendChild(node.cloneNode(true));
+  }
+}
+
+/**
+ * Owns the single Document Picture-in-Picture window for the tab (the API allows
+ * only one PiP window per browser tab). Provides it through context so any
+ * component can open, close, or render into it via `usePictureInPicture`.
+ *
+ * Pair with `PictureInPicturePortal` to render React content into the window.
+ */
+export function PictureInPictureProvider({children}: {children: ReactNode}) {
+  const [pipWindow, setPipWindow] = useState<Window | null>(null);
+
+  const documentPictureInPicture =
+    typeof window !== 'undefined' && 'documentPictureInPicture' in window
+      ? window.documentPictureInPicture
+      : null;
+
+  // Tracks the live window outside of React state so cleanup logic always sees
+  // the current value without re-running effects.
+  const pipWindowRef = useRef<Window | null>(null);
+
+  const handleClose = useCallback(() => {
+    pipWindowRef.current = null;
+    setPipWindow(null);
+  }, []);
+
+  const requestPipWindow = useCallback(
+    async ({
+      width,
+      height,
+      preferInitialWindowPlacement,
+    }: RequestPipWindowOptions = {}) => {
+      if (!documentPictureInPicture) {
+        return;
+      }
+      // Only one PiP window may exist per tab — reuse the existing one.
+      if (pipWindowRef.current && !pipWindowRef.current.closed) {
+        return;
+      }
+
+      const pip = await documentPictureInPicture.requestWindow({
+        width,
+        height,
+        preferInitialWindowPlacement,
+      });
+
+      copyStyles(document, pip);
+      // Mirror the theme class (e.g. `theme-dark`) onto the PiP body so global
+      // body selectors apply. Kept in sync afterwards by `PictureInPicturePortal`.
+      pip.document.body.className = document.body.className;
+
+      pip.addEventListener('pagehide', handleClose, {once: true});
+
+      pipWindowRef.current = pip;
+      setPipWindow(pip);
+    },
+    [documentPictureInPicture, handleClose]
+  );
+
+  const closePipWindow = useCallback(() => {
+    const pip = pipWindowRef.current;
+    if (pip && !pip.closed) {
+      // Fires `pagehide`, which drives `handleClose`.
+      pip.close();
+    }
+  }, []);
+
+  // On unmount, tear down the window.
+  useEffect(() => {
+    return () => {
+      const pip = pipWindowRef.current;
+      if (pip && !pip.closed) {
+        pip.removeEventListener('pagehide', handleClose);
+        pip.close();
+      }
+      pipWindowRef.current = null;
+    };
+  }, [handleClose]);
+
+  const value = useMemo<PictureInPictureContextValue>(
+    () => ({
+      pipWindow,
+      isSupported: !!documentPictureInPicture,
+      requestPipWindow,
+      closePipWindow,
+    }),
+    [pipWindow, documentPictureInPicture, requestPipWindow, closePipWindow]
+  );
+
+  return (
+    <PictureInPictureContext.Provider value={value}>
+      {children}
+    </PictureInPictureContext.Provider>
+  );
+}
+
+export function usePictureInPicture(): PictureInPictureContextValue {
+  const context = useContext(PictureInPictureContext);
+
+  if (!context) {
+    throw new Error('usePictureInPicture must be used within a PictureInPictureProvider');
+  }
+
+  return context;
+}
diff --git a/static/app/components/core/pictureInPicture/pictureInPicturePortal.tsx b/static/app/components/core/pictureInPicture/pictureInPicturePortal.tsx
new file mode 100644
index 00000000000000..85f08b2cb36bfe
--- /dev/null
+++ b/static/app/components/core/pictureInPicture/pictureInPicturePortal.tsx
@@ -0,0 +1,72 @@
+import {useEffect, useMemo} from 'react';
+import {createPortal} from 'react-dom';
+import createCache from '@emotion/cache';
+import {CacheProvider, ThemeProvider, useTheme} from '@emotion/react';
+
+import {TooltipContext} from '@sentry/scraps/tooltip';
+
+import {GlobalStyles} from 'sentry/styles/global';
+
+interface PictureInPicturePortalProps {
+  children: React.ReactNode;
+  /**
+   * The picture-in-picture window to render into. Obtain one via
+   * `usePictureInPicture`.
+   */
+  pipWindow: Window;
+}
+
+/**
+ * Renders children into a Document Picture-in-Picture window with the full
+ * styling context wired up: a PiP-scoped emotion cache, the theme + global
+ * styles, and a tooltip container override so overlays render in the PiP window
+ * rather than the main one.
+ */
+export function PictureInPicturePortal({
+  children,
+  pipWindow,
+}: PictureInPicturePortalProps) {
+  const theme = useTheme();
+
+  // Emotion injects dynamically-generated styles into the cache's container.
+  // Bind a dedicated cache to the PiP document head so styles for the portaled
+  // subtree land in the right window. Mirrors `ThemeAndStyleProvider`.
+  const cache = useMemo(() => {
+    const pipCache = createCache({
+      key: 'app',
+      container: pipWindow.document.head,
+      stylisPlugins: [],
+    });
+    // Compat disables the :nth-child warning.
+    pipCache.compat = true;
+    return pipCache;
+  }, [pipWindow]);
+
+  // Make the PiP document fill the window so content with `height: 100%`
+  // stretches the full height (the main app gets this from its base stylesheet,
+  // which isn't guaranteed in the PiP document).
+  useEffect(() => {
+    const {documentElement, body} = pipWindow.document;
+    documentElement.style.height = '100%';
+    body.style.height = '100%';
+    body.style.margin = '0';
+  }, [pipWindow]);
+
+  // Keep the PiP body's theme class in sync so global body selectors
+  // (e.g. `body.theme-dark`) apply after a theme toggle.
+  useEffect(() => {
+    pipWindow.document.body.className = document.body.className;
+  }, [pipWindow, theme]);
+
+  return createPortal(
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles theme={theme} />
+        <TooltipContext value={{container: pipWindow.document.body}}>
+          {children}
+        </TooltipContext>
+      </ThemeProvider>
+    </CacheProvider>,
+    pipWindow.document.body
+  );
+}
diff --git a/static/app/types/documentPictureInPicture.d.ts b/static/app/types/documentPictureInPicture.d.ts
new file mode 100644
index 00000000000000..bbeae6fb3a8656
--- /dev/null
+++ b/static/app/types/documentPictureInPicture.d.ts
@@ -0,0 +1,33 @@
+// Type definitions for the Document Picture-in-Picture API
+// https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture
+//
+// These are not (yet) part of the TypeScript DOM lib, so we declare the minimal
+// surface we use here.
+
+interface DocumentPictureInPictureOptions {
+  /**
+   * Hides the "back to tab" button in the picture-in-picture window.
+   */
+  disallowReturnToOpener?: boolean;
+  /**
+   * The initial height of the picture-in-picture window in pixels.
+   */
+  height?: number;
+  /**
+   * Uses the default window placement instead of remembering the previous one.
+   */
+  preferInitialWindowPlacement?: boolean;
+  /**
+   * The initial width of the picture-in-picture window in pixels.
+   */
+  width?: number;
+}
+
+interface DocumentPictureInPicture extends EventTarget {
+  readonly window: Window | null;
+  requestWindow(options?: DocumentPictureInPictureOptions): Promise<Window>;
+}
+
+interface Window {
+  readonly documentPictureInPicture?: DocumentPictureInPicture;
+}
diff --git a/static/app/views/organizationLayout/index.tsx b/static/app/views/organizationLayout/index.tsx
index b80580a6d4c36a..b66ebcfe4e2765 100644
--- a/static/app/views/organizationLayout/index.tsx
+++ b/static/app/views/organizationLayout/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {GlobalDrawer} from '@sentry/scraps/drawer';
 import {Flex, Stack} from '@sentry/scraps/layout';
+import {PictureInPictureProvider} from '@sentry/scraps/pictureInPicture';
 
 import {DemoHeader} from 'sentry/components/demo/demoHeader';
 import {useFeatureFlagOnboardingDrawer} from 'sentry/components/events/featureFlags/onboarding/featureFlagOnboardingSidebar';
@@ -56,11 +57,13 @@ export function OrganizationLayout() {
       <OrganizationContainer>
         <SeerExplorerSessionsProvider>
           <SeerExplorerChatStateProvider>
-            <GlobalDrawer>
-              <SeerExplorerContextProvider>
-                <AppLayout organization={organization} />
-              </SeerExplorerContextProvider>
-            </GlobalDrawer>
+            <PictureInPictureProvider>
+              <GlobalDrawer>
+                <SeerExplorerContextProvider>
+                  <AppLayout organization={organization} />
+                </SeerExplorerContextProvider>
+              </GlobalDrawer>
+            </PictureInPictureProvider>
           </SeerExplorerChatStateProvider>
         </SeerExplorerSessionsProvider>
       </OrganizationContainer>
diff --git a/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.spec.tsx b/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.spec.tsx
index f3f64e512b7c89..71152ba7adb356 100644
--- a/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.spec.tsx
+++ b/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.spec.tsx
@@ -3,6 +3,8 @@ import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {PictureInPictureProvider} from '@sentry/scraps/pictureInPicture';
+
 import {ConfigStore} from 'sentry/stores/configStore';
 import {ExplorerDrawerContent} from 'sentry/views/seerExplorer/components/drawer/explorerDrawerContent';
 import {INPUT_STORAGE_KEY_PREFIX} from 'sentry/views/seerExplorer/components/drawer/explorerDrawerContent';
@@ -62,9 +64,11 @@ describe('ExplorerDrawerContent', () => {
   describe('Empty State', () => {
     it('renders the drawer root element', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -75,9 +79,11 @@ describe('ExplorerDrawerContent', () => {
 
     it('shows empty state when no messages exist', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -89,9 +95,11 @@ describe('ExplorerDrawerContent', () => {
 
     it('shows input', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -111,9 +119,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -138,9 +148,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -160,9 +172,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -183,9 +197,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -212,7 +228,10 @@ describe('ExplorerDrawerContent', () => {
             },
             {
               id: 'msg-2',
-              message: {role: 'assistant', content: 'This is a null pointer exception.'},
+              message: {
+                role: 'assistant',
+                content: 'This is a null pointer exception.',
+              },
               timestamp: '2024-01-01T00:01:00Z',
               loading: false,
             },
@@ -224,9 +243,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -243,9 +264,11 @@ describe('ExplorerDrawerContent', () => {
   describe('Input Handling', () => {
     it('can type in the textarea', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -263,9 +286,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -287,9 +312,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -358,9 +385,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -387,9 +416,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -410,9 +441,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -458,9 +491,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -482,9 +517,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       const {unmount} = render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {organization}
       );
 
@@ -495,9 +532,11 @@ describe('ExplorerDrawerContent', () => {
       unmount();
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {organization}
       );
 
@@ -511,9 +550,11 @@ describe('ExplorerDrawerContent', () => {
       useSeerExplorerSpy.mockReturnValue({...defaultHookReturn, runId: 1});
 
       const {rerender} = render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {organization}
       );
 
@@ -524,9 +565,11 @@ describe('ExplorerDrawerContent', () => {
 
       useSeerExplorerSpy.mockReturnValue({...defaultHookReturn, runId: 2});
       rerender(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>
       );
 
       await waitFor(() =>
@@ -538,9 +581,11 @@ describe('ExplorerDrawerContent', () => {
 
       useSeerExplorerSpy.mockReturnValue({...defaultHookReturn, runId: 1});
       rerender(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>
       );
 
       await waitFor(() =>
@@ -552,9 +597,11 @@ describe('ExplorerDrawerContent', () => {
       const setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
 
       const {unmount} = render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {organization}
       );
 
@@ -579,9 +626,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {organization}
       );
 
@@ -610,9 +659,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -640,9 +691,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -670,9 +723,11 @@ describe('ExplorerDrawerContent', () => {
       });
 
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -691,9 +746,11 @@ describe('ExplorerDrawerContent', () => {
 
     it('does not show toggle without the feature flag', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization,
         }
@@ -706,9 +763,11 @@ describe('ExplorerDrawerContent', () => {
 
     it('shows toggle when feature flag is enabled', async () => {
       render(
-        <SeerExplorerSessionsProvider>
-          <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
-        </SeerExplorerSessionsProvider>,
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
         {
           organization: orgWithFlag,
         }
@@ -718,4 +777,57 @@ describe('ExplorerDrawerContent', () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe('Picture-in-Picture', () => {
+    afterEach(() => {
+      // @ts-expect-error - cleaning up the stub
+      delete window.documentPictureInPicture;
+    });
+
+    it('does not show the pop-out button when PiP is unsupported', async () => {
+      render(
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
+        {organization}
+      );
+      await screen.findByTestId('seer-explorer-input');
+      expect(
+        screen.queryByRole('button', {name: 'Open in a separate window'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('shows the pop-out button and requests a window on click', async () => {
+      const requestWindow = jest.fn().mockResolvedValue({
+        document: document.implementation.createHTMLDocument('pip'),
+        close: jest.fn(),
+        focus: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        closed: false,
+      });
+      Object.defineProperty(window, 'documentPictureInPicture', {
+        configurable: true,
+        writable: true,
+        value: {requestWindow, window: null},
+      });
+
+      render(
+        <PictureInPictureProvider>
+          <SeerExplorerSessionsProvider>
+            <ExplorerDrawerContent getPageReferrer={mockGetPageReferrer} />
+          </SeerExplorerSessionsProvider>
+        </PictureInPictureProvider>,
+        {organization}
+      );
+
+      const button = await screen.findByRole('button', {
+        name: 'Open in a separate window',
+      });
+      await userEvent.click(button);
+      await waitFor(() => expect(requestWindow).toHaveBeenCalled());
+    });
+  });
 });
diff --git a/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.tsx b/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.tsx
index 2b148b8a377642..5e15ae8e1f7556 100644
--- a/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.tsx
+++ b/static/app/views/seerExplorer/components/drawer/explorerDrawerContent.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {useDrawerContentContext} from '@sentry/scraps/drawer';
 import {Stack} from '@sentry/scraps/layout';
+import {usePictureInPicture} from '@sentry/scraps/pictureInPicture';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {SEER_AGENTS_PROJECT_ID} from 'sentry/constants';
@@ -45,6 +46,36 @@ export function ExplorerDrawerContent({
   const {projects} = useProjects();
   const user = useUser();
   const {onClose: closeDrawer = () => {}} = useDrawerContentContext();
+  const {
+    pipWindow,
+    isSupported: isPipSupported,
+    requestPipWindow,
+    closePipWindow,
+  } = usePictureInPicture();
+  const isPoppedOut = pipWindow !== null;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const handleTogglePictureInPicture = () => {
+    if (isPoppedOut) {
+      // Re-dock back into the drawer.
+      closePipWindow();
+      return;
+    }
+    // Match the popped-out window to the current (resizable) drawer width.
+    const drawerWidth = rootRef.current?.getBoundingClientRect().width;
+    requestPipWindow({
+      width: drawerWidth ? Math.round(drawerWidth) : 480,
+      height: Math.round(window.innerHeight * 0.9),
+      // Open at the browser's default placement rather than wherever the window
+      // happened to be left last time.
+      preferInitialWindowPlacement: true,
+    })
+      .then(() => closeDrawer())
+      .catch(() => {
+        // Failed to open the PiP window — keep the drawer open.
+      });
+  };
 
   const [showThinking, setShowThinking] = useState(false);
 
@@ -276,10 +307,14 @@ export function ExplorerDrawerContent({
         handleSend();
       } else if (e.key === 'Escape') {
         e.preventDefault();
-        closeDrawer();
+        if (isPoppedOut) {
+          closePipWindow();
+        } else {
+          closeDrawer();
+        }
       }
     },
-    [handleSend, closeDrawer]
+    [handleSend, closeDrawer, isPoppedOut, closePipWindow]
   );
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -368,7 +403,7 @@ export function ExplorerDrawerContent({
           : 'disabled';
 
   return (
-    <DrawerContentContainer data-seer-explorer-root="">
+    <DrawerContentContainer ref={rootRef} data-seer-explorer-root="">
       <ExplorerDrawerHeader
         disableNewChatButton={runId === null}
         onNewChatClick={() => {
@@ -390,6 +425,9 @@ export function ExplorerDrawerContent({
         showThinkingToggle={
           !!organization?.features.includes('seer-explorer-thinking-blocks')
         }
+        isPipSupported={isPipSupported}
+        isPoppedOut={isPoppedOut}
+        onTogglePictureInPicture={handleTogglePictureInPicture}
       />
       {menu}
       <BlocksContainer ref={scrollContainerRef} onClick={handleBlocksClick}>
diff --git a/static/app/views/seerExplorer/components/drawer/explorerDrawerHeader.tsx b/static/app/views/seerExplorer/components/drawer/explorerDrawerHeader.tsx
index 7e305351521398..55a984416fade8 100644
--- a/static/app/views/seerExplorer/components/drawer/explorerDrawerHeader.tsx
+++ b/static/app/views/seerExplorer/components/drawer/explorerDrawerHeader.tsx
@@ -14,18 +14,28 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import {TimeSince} from 'sentry/components/timeSince';
-import {IconAdd, IconClock, IconCopy, IconEllipsis, IconLink} from 'sentry/icons';
+import {
+  IconAdd,
+  IconClock,
+  IconCopy,
+  IconEllipsis,
+  IconLink,
+  IconWindow,
+} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useSeerExplorerSessionsQuery} from 'sentry/views/seerExplorer/seerExplorerSessionContext';
 
 interface ExplorerDrawerHeaderProps {
+  isPipSupported: boolean;
+  isPoppedOut: boolean;
   onChangeSession: (runId: number) => void;
   onCopyLinkClick: (() => void) | undefined;
   onCopySessionClick: (() => void) | undefined;
   onNewChatClick: () => void;
   onOverrideCtxEngEnableToggle: () => void;
   onShowThinkingToggle: () => void;
+  onTogglePictureInPicture: () => void;
   overrideCtxEngEnable: boolean;
   showContextEngineToggle: boolean;
   showThinking: boolean;
@@ -44,6 +54,9 @@ export function ExplorerDrawerHeader({
   showThinking,
   showThinkingToggle,
   onShowThinkingToggle,
+  isPipSupported,
+  isPoppedOut,
+  onTogglePictureInPicture,
   disableNewChatButton = false,
 }: ExplorerDrawerHeaderProps) {
   const [search, setSearch] = useState('');
@@ -105,7 +118,7 @@ export function ExplorerDrawerHeader({
   );
 
   return (
-    <DrawerHeader hideBar hideCloseButtonText>
+    <DrawerHeader hideBar hideCloseButtonText hideCloseButton={isPoppedOut}>
       <Flex align="center" gap="xs" height="100%">
         <Text wrap="nowrap" size="md">
           {t('Seer Agent')}
@@ -194,6 +207,22 @@ export function ExplorerDrawerHeader({
               }}
             />
           </OverflowActions>
+          {isPipSupported && (
+            <Button
+              icon={<IconWindow />}
+              onClick={onTogglePictureInPicture}
+              variant="transparent"
+              size="xs"
+              aria-label={
+                isPoppedOut ? t('Dock back into drawer') : t('Open in a separate window')
+              }
+              tooltipProps={{
+                title: isPoppedOut
+                  ? t('Dock back into drawer')
+                  : t('Open in a separate window'),
+              }}
+            />
+          )}
           <CompactSelect
             options={sessionOptions}
             value={undefined}
diff --git a/static/app/views/seerExplorer/useSeerExplorerContext.tsx b/static/app/views/seerExplorer/useSeerExplorerContext.tsx
index 29527e404a0d68..9e56150247b60a 100644
--- a/static/app/views/seerExplorer/useSeerExplorerContext.tsx
+++ b/static/app/views/seerExplorer/useSeerExplorerContext.tsx
@@ -11,15 +11,20 @@ import {
 
 import {useHotkeys} from '@sentry/scraps/hotkey';
 import {useModal} from '@sentry/scraps/modal';
+import {
+  PictureInPicturePortal,
+  usePictureInPicture,
+} from '@sentry/scraps/pictureInPicture';
 
 import {getDateFromTimestampAssumeUtc} from 'sentry/utils/dates';
+import {ExplorerDrawerContent} from 'sentry/views/seerExplorer/components/drawer/explorerDrawerContent';
 import {
   type OpenSeerExplorerDrawerOptions,
   useSeerExplorerDrawer,
 } from 'sentry/views/seerExplorer/components/drawer/useSeerExplorerDrawer';
 import {useSeerExplorerPolling} from 'sentry/views/seerExplorer/hooks/useSeerExplorerPolling';
 import {useSeerExplorerChatState} from 'sentry/views/seerExplorer/seerExplorerChatStateContext';
-import {useSeerExplorerDeepLink} from 'sentry/views/seerExplorer/utils';
+import {usePageReferrer, useSeerExplorerDeepLink} from 'sentry/views/seerExplorer/utils';
 
 type SeerExplorerSessionState = 'inactive' | 'thinking' | 'done-thinking';
 
@@ -54,6 +59,58 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
     onClose: () => setLastViewedAt(Date.now()),
   });
 
+  const {getPageReferrer} = usePageReferrer();
+
+  const {pipWindow, closePipWindow} = usePictureInPicture();
+  const isPoppedOut = pipWindow !== null;
+
+  // Re-dock into the drawer whenever the PiP window closes (native controls,
+  // dock button, or programmatically) — unless a full close was requested via
+  // `closeSeerExplorer`. The watcher lives here because re-docking needs the
+  // drawer controls, which are only available inside `GlobalDrawer`.
+  const suppressRedockRef = useRef(false);
+  const wasPoppedOutRef = useRef(false);
+  useEffect(() => {
+    const wasPoppedOut = wasPoppedOutRef.current;
+    wasPoppedOutRef.current = isPoppedOut;
+    if (wasPoppedOut && !isPoppedOut) {
+      if (suppressRedockRef.current) {
+        suppressRedockRef.current = false;
+        return;
+      }
+      openSeerExplorerDrawer();
+    }
+  }, [isPoppedOut, openSeerExplorerDrawer]);
+
+  const openSeerExplorer = useCallback(
+    (drawerOptions?: OpenSeerExplorerDrawerOptions) => {
+      if (pipWindow) {
+        pipWindow.focus();
+        return;
+      }
+      openSeerExplorerDrawer(drawerOptions);
+    },
+    [pipWindow, openSeerExplorerDrawer]
+  );
+
+  const closeSeerExplorer = useCallback(() => {
+    if (pipWindow) {
+      suppressRedockRef.current = true;
+      closePipWindow();
+      return;
+    }
+    closeSeerExplorerDrawer();
+  }, [pipWindow, closePipWindow, closeSeerExplorerDrawer]);
+
+  const toggleSeerExplorer = useCallback(() => {
+    if (pipWindow) {
+      // Re-dock back into the drawer.
+      closePipWindow();
+      return;
+    }
+    toggleSeerExplorerDrawer();
+  }, [pipWindow, closePipWindow, toggleSeerExplorerDrawer]);
+
   const {apiData} = useSeerExplorerPolling({runId});
   const blocks = apiData?.session?.blocks;
 
@@ -80,7 +137,11 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
   }, []);
 
   const unreadCount = useMemo(() => {
-    if (!blocks?.length || runId === null || (isOpen && isWindowVisible)) {
+    if (
+      !blocks?.length ||
+      runId === null ||
+      ((isOpen || isPoppedOut) && isWindowVisible)
+    ) {
       return 0;
     }
     return blocks.filter(block => {
@@ -90,7 +151,7 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
       const ts = getDateFromTimestampAssumeUtc(block.timestamp)?.getTime();
       return ts !== null && ts !== undefined && ts > lastViewedAt;
     }).length;
-  }, [blocks, isOpen, isWindowVisible, lastViewedAt, runId]);
+  }, [blocks, isOpen, isPoppedOut, isWindowVisible, lastViewedAt, runId]);
 
   // Gates `thinking` / `done-thinking`: otherwise an initial fetch of a stale
   // runId from sessionStorage flashes polling state before the user engages.
@@ -132,17 +193,17 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
   const contextValue = useMemo<SeerExplorerContextValue>(
     () => ({
       isOpen,
-      openSeerExplorer: openSeerExplorerDrawer,
-      closeSeerExplorer: closeSeerExplorerDrawer,
-      toggleSeerExplorer: toggleSeerExplorerDrawer,
+      openSeerExplorer,
+      closeSeerExplorer,
+      toggleSeerExplorer,
       sessionState,
       unreadCount,
     }),
     [
       isOpen,
-      openSeerExplorerDrawer,
-      closeSeerExplorerDrawer,
-      toggleSeerExplorerDrawer,
+      openSeerExplorer,
+      closeSeerExplorer,
+      toggleSeerExplorer,
       sessionState,
       unreadCount,
     ]
@@ -150,15 +211,16 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
 
   const {visible: isModalOpen} = useModal();
 
-  // Deep link effect while drawer closed (drawer content handles when open)
+  // Deep link effect while Seer isn't already showing (the drawer content
+  // handles deep links itself when open or popped out).
   const deepLinkCallback = useCallback(
-    (_runId: number) => openSeerExplorerDrawer({runId: _runId}),
-    [openSeerExplorerDrawer]
+    (_runId: number) => openSeerExplorer({runId: _runId}),
+    [openSeerExplorer]
   );
 
   useSeerExplorerDeepLink({
     callback: deepLinkCallback,
-    enabled: !isOpen,
+    enabled: !isOpen && !isPoppedOut,
   });
 
   useHotkeys(
@@ -174,7 +236,7 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
               'mod+shift+-', // QWERTY Latin variants (Spanish, Italian, Portuguese): / === Shift+-
             ],
             callback: () => {
-              toggleSeerExplorerDrawer();
+              toggleSeerExplorer();
             },
             includeInputs: true,
           },
@@ -184,6 +246,11 @@ export function SeerExplorerContextProvider({children}: {children: ReactNode}) {
   return (
     <SeerExplorerContext.Provider value={contextValue}>
       {children}
+      {pipWindow && (
+        <PictureInPicturePortal pipWindow={pipWindow}>
+          <ExplorerDrawerContent getPageReferrer={getPageReferrer} />
+        </PictureInPicturePortal>
+      )}
     </SeerExplorerContext.Provider>
   );
 }