@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
 import { setLocale, stubSupabaseSession } from './helpers/auth';
 
 test.beforeEach(async ({ page }) => {
@@ -173,6 +173,133 @@ test('phone tab bar holds Tools, Current debate, Library, and Settings', async (
   expect(termsBox!.y + termsBox!.height).toBeLessThanOrEqual(tabBox!.y + 1);
 });
 
+async function paintViewport(page: Page, next: { height: number; offsetTop: number; scale: number }) {
+  await page.evaluate((value) => {
+    const viewport = window.visualViewport;
+    if (!viewport) throw new Error('visualViewport is missing');
+    for (const key of ['height', 'offsetTop', 'scale'] as const) {
+      Object.defineProperty(viewport, key, { configurable: true, get: () => value[key] });
+    }
+    viewport.dispatchEvent(new Event('resize'));
+  }, next);
+}
+
+test('phone tab bar hides for a keyboard and returns, and ignores pinch-zoom', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/app/ask', { waitUntil: 'domcontentloaded' });
+  const field = page.getByRole('textbox', { name: 'Message to your debate coach' });
+  const tabBar = page.getByRole('navigation', { name: 'Mobile navigation' });
+  await expect(field).toBeVisible({ timeout: 15_000 });
+  await expect(tabBar).toBeVisible();
+
+  await field.focus();
+  await paintViewport(page, { height: 380, offsetTop: 0, scale: 1.5 });
+  await expect(tabBar).toBeVisible();
+
+  await paintViewport(page, { height: 380, offsetTop: 0, scale: 1 });
+  await expect(tabBar).toBeHidden();
+  const hidden = await page.evaluate(() => ({
+    reserve: document.documentElement.style.getPropertyValue('--phone-tab-reserve').trim(),
+    keyboard: document.documentElement.style.getPropertyValue('--native-keyboard-height').trim(),
+  }));
+  expect(hidden.reserve).toBe('0px');
+  expect(Number.parseFloat(hidden.keyboard)).toBeGreaterThan(120);
+
+  await paintViewport(page, { height: 844, offsetTop: 0, scale: 1 });
+  await expect(tabBar).toBeVisible();
+  const shown = await page.evaluate(() => document.documentElement.style.getPropertyValue('--phone-tab-reserve').trim());
+  expect(Number.parseFloat(shown)).toBeGreaterThan(0);
+});
+
+test('Ask composer stays above the tab bar while an announcement is up', async ({ page }) => {
+  await page.route('**/functions/v1/announcements*', (route) => route.fulfill({
+    json: {
+      announcements: [{
+        id: 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee',
+        title: 'Scheduled maintenance',
+        body: 'DebateLab will be unavailable for ten minutes.',
+        starts_at: '2026-08-31T12:00:00.000Z',
+        expires_at: null,
+        created_at: '2026-08-31T11:00:00.000Z',
+      }],
+    },
+  }));
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/app/ask', { waitUntil: 'domcontentloaded' });
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toBeVisible({ timeout: 15_000 });
+  const send = page.getByRole('button', { name: 'Send' });
+  const tabBar = page.getByRole('navigation', { name: 'Mobile navigation' });
+  await expect(send).toBeVisible();
+  await expect(tabBar).toBeVisible();
+  const [sendBox, tabBox, tops] = await Promise.all([
+    send.boundingBox(),
+    tabBar.boundingBox(),
+    page.evaluate(() => ({
+      main: document.documentElement.style.getPropertyValue('--app-main-top').trim(),
+      header: document.documentElement.style.getPropertyValue('--app-header-bottom').trim(),
+    })),
+  ]);
+  expect(sendBox).not.toBeNull();
+  expect(tabBox).not.toBeNull();
+  expect(sendBox!.y + sendBox!.height).toBeLessThanOrEqual(tabBox!.y + 1);
+  expect(Number.parseFloat(tops.main)).toBeGreaterThan(Number.parseFloat(tops.header));
+});
+
+test('a toast at 700px sits above the tab bar', async ({ page }) => {
+  await page.setViewportSize({ width: 700, height: 800 });
+  await page.goto('/app', { waitUntil: 'domcontentloaded' });
+  await expect(page.getByRole('heading', { name: 'Prepare' })).toBeVisible({ timeout: 15_000 });
+  const tabBar = page.getByRole('navigation', { name: 'Mobile navigation' });
+  await expect(tabBar).toBeVisible();
+
+  const toasted = await page.evaluate(async () => {
+    const match = performance.getEntriesByType('resource')
+      .map((entry) => entry.name)
+      .find((name) => name.includes('/sonner'));
+    if (!match) return 'missing';
+    const mod = await import(/* @vite-ignore */ match) as { toast?: { success: (message: string, options: { duration: number }) => void } };
+    if (!mod.toast?.success) return 'no-toast';
+    mod.toast.success('Copied to clipboard', { duration: 60_000 });
+    return 'ok';
+  });
+  expect(toasted).toBe('ok');
+
+  const toast = page.locator('[data-sonner-toast]').last();
+  await expect(toast).toHaveAttribute('data-mounted', 'true');
+  const offset = await page.evaluate(() => {
+    const ol = document.querySelector('[data-sonner-toaster]');
+    return {
+      reserve: Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--phone-tab-reserve')),
+      usedBottom: ol ? Number.parseFloat(getComputedStyle(ol).bottom) : 0,
+    };
+  });
+  expect(offset.reserve).toBeGreaterThan(40);
+  expect(offset.usedBottom).toBeGreaterThan(offset.reserve);
+  // The enter slide starts under the offset. The resting box is what has to clear the bar.
+  await expect.poll(async () => {
+    const [toastBox, tabBox] = await Promise.all([toast.boundingBox(), tabBar.boundingBox()]);
+    if (!toastBox || !tabBox) return Number.POSITIVE_INFINITY;
+    return toastBox.y + toastBox.height - tabBox.y;
+  }).toBeLessThanOrEqual(1);
+});
+
+test('iPad width does not keep a keyboard pad', async ({ page }) => {
+  await page.setViewportSize({ width: 820, height: 1180 });
+  await page.goto('/app/ask', { waitUntil: 'domcontentloaded' });
+  const field = page.getByRole('textbox', { name: 'Message to your debate coach' });
+  await expect(field).toBeVisible({ timeout: 15_000 });
+  await field.focus();
+  await paintViewport(page, { height: 500, offsetTop: 0, scale: 1 });
+  const pad = await page.evaluate(() => ({
+    keyboard: document.documentElement.style.getPropertyValue('--native-keyboard-height').trim(),
+    reserve: document.documentElement.style.getPropertyValue('--phone-tab-reserve').trim(),
+    main: getComputedStyle(document.querySelector('main')!).paddingBottom,
+  }));
+  expect(pad.keyboard).toBe('');
+  expect(pad.reserve).toBe('');
+  expect(pad.main).toBe('0px');
+});
+
 test('iPad portrait keeps the header menu instead of the tab bar', async ({ page }) => {
   await page.setViewportSize({ width: 820, height: 1180 });
   await page.goto('/app', { waitUntil: 'domcontentloaded' });
 
@@ -108,6 +108,7 @@ export function AppLayout() {
   const dismissedAnnouncementIds = useRef(new Set<string>());
   const mobileMenuTriggerRef = useRef<HTMLButtonElement>(null);
   const headerRef = useRef<HTMLElement>(null);
+  const aboveMainRef = useRef<HTMLDivElement>(null);
   const activeRequestRef = useRef<AbortController | null>(null);
   const lastRequestAtRef = useRef<number | null>(null);
   const activeUserIdRef = useRef<string | null>(null);
@@ -236,6 +237,27 @@ export function AppLayout() {
     };
   }, []);
 
+  // Ask sizes itself from this, so a banner between the header and main is included.
+  // The value is the document offset of main, measured when the chrome above it changes size.
+  useEffect(() => {
+    const chrome = aboveMainRef.current;
+    if (!chrome || typeof ResizeObserver === 'undefined') return;
+    const root = document.documentElement;
+    const apply = () => {
+      const top = Math.max(0, Math.round(chrome.getBoundingClientRect().bottom + window.scrollY));
+      root.style.setProperty('--app-main-top', `${top}px`);
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(chrome);
+    window.addEventListener('resize', apply);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', apply);
+      root.style.removeProperty('--app-main-top');
+    };
+  }, []);
+
   // Dismiss is optimistic: the banner goes at once and comes back only if the server refuses.
   const handleDismissAnnouncement = async (announcementId: string) => {
     const requestUserId = userId;
@@ -266,6 +288,7 @@ export function AppLayout() {
 
   return (
     <div className="native-safe-screen flex flex-col bg-background">
+      <div ref={aboveMainRef}>
       <SkipLink />
       {/* Header: the edge appears once content scrolls under it. */}
       <header
@@ -387,8 +410,6 @@ export function AppLayout() {
         </div>
       </header>
 
-      <PhoneTabBar />
-
       {announcementsUserId === userId && announcements[0] && (
         <AnnouncementBanner
           announcement={announcements[0]}
@@ -402,6 +423,7 @@ export function AppLayout() {
 
       <DebateDialogs />
       <InactiveDebateGate />
+      </div>
 
       {/* Main Content */}
       <main id={MAIN_CONTENT_ID} className="native-main-content flex-1 focus-visible:outline-hidden">
@@ -418,6 +440,9 @@ export function AppLayout() {
           </div>
         </div>
       </footer>
+
+      {/* After main so keyboard order follows the page, then the bar. Fixed, so the flow is unchanged. */}
+      <PhoneTabBar />
     </div>
   );
 }
@@ -6,13 +6,15 @@ import { cn } from '@/lib/utils';
 import { useRoutePrefetch } from '@/hooks/use-route-prefetch';
 import { useCurrentDebate } from '@/lib/stores/debate-store';
 import { navSectionFor } from '@/components/layout/nav-sections';
-import { KEYBOARD_OPEN_PX, keyboardOverlap } from '@/components/layout/phone-tab-bar';
+import { MAIN_CONTENT_ID } from '@/components/layout/SkipLink';
+import { PHONE_TAB_MEDIA, isTextEntry, keyboardIsOpen, keyboardOverlap } from '@/components/layout/phone-tab-bar';
 
 // Below `md` (768px) only. iPad portrait is 820px and keeps the header menu:
 // four tabs would drop History and repeat the Current debate row already in the header.
 const tabClass = cn(
   'flex min-h-14 min-w-0 touch-manipulation flex-col items-center justify-center gap-0.5 rounded-lg px-1 py-1.5',
   'text-xs font-bold leading-tight text-muted-foreground transition-[color,background-color,transform] duration-150 active:scale-[0.97]',
+  'motion-reduce:transition-none motion-reduce:active:scale-100',
 );
 const tabActiveClass = 'bg-brand-tint text-primary';
 
@@ -54,6 +56,23 @@ function PhoneTab({
   );
 }
 
+function textEntryFocused() {
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement)) return false;
+  const inputType = active instanceof HTMLInputElement ? active.type : null;
+  return isTextEntry(active.tagName, inputType, active.isContentEditable);
+}
+
+function moveFocusToMain() {
+  const main = document.getElementById(MAIN_CONTENT_ID);
+  if (!(main instanceof HTMLElement)) return;
+  if (!main.hasAttribute('tabindex')) {
+    main.setAttribute('tabindex', '-1');
+    main.addEventListener('blur', () => main.removeAttribute('tabindex'), { once: true });
+  }
+  main.focus({ preventScroll: true });
+}
+
 export function PhoneTabBar() {
   const { t } = useTranslation();
   const location = useLocation();
@@ -64,45 +83,85 @@ export function PhoneTabBar() {
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   const [keyboardPx, setKeyboardPx] = useState(0);
 
+  // The listener exists only while the tab bar does. Wider layouts never write
+  // --native-keyboard-height, so main does not grow a keyboard pad there.
   useEffect(() => {
+    const phone = window.matchMedia(PHONE_TAB_MEDIA);
     const viewport = window.visualViewport;
-    if (!viewport) return;
+    let listening = false;
+
     const update = () => {
-      const overlap = keyboardOverlap(window.innerHeight, viewport.height, viewport.offsetTop);
-      const open = overlap >= KEYBOARD_OPEN_PX;
+      if (!phone.matches || !viewport) return;
+      const open = keyboardIsOpen(
+        window.innerHeight,
+        viewport.height,
+        viewport.offsetTop,
+        viewport.scale,
+        textEntryFocused(),
+      );
+      if (open && navRef.current?.contains(document.activeElement)) moveFocusToMain();
+      const overlap = open ? keyboardOverlap(window.innerHeight, viewport.height, viewport.offsetTop) : 0;
       setKeyboardOpen((current) => (current === open ? current : open));
-      setKeyboardPx((current) => (current === (open ? overlap : 0) ? current : (open ? overlap : 0)));
+      setKeyboardPx((current) => (current === overlap ? current : overlap));
     };
-    update();
-    viewport.addEventListener('resize', update);
-    viewport.addEventListener('scroll', update);
-    return () => {
+    const listen = () => {
+      if (!viewport || listening) return;
+      listening = true;
+      viewport.addEventListener('resize', update);
+      viewport.addEventListener('scroll', update);
+      document.addEventListener('focusin', update);
+      document.addEventListener('focusout', update);
+    };
+    const silence = () => {
+      if (!viewport || !listening) return;
+      listening = false;
       viewport.removeEventListener('resize', update);
       viewport.removeEventListener('scroll', update);
+      document.removeEventListener('focusin', update);
+      document.removeEventListener('focusout', update);
+    };
+    const sync = () => {
+      if (!phone.matches) {
+        silence();
+        setKeyboardOpen(false);
+        setKeyboardPx(0);
+        return;
+      }
+      listen();
+      update();
+    };
+    sync();
+    phone.addEventListener('change', sync);
+    return () => {
+      silence();
+      phone.removeEventListener('change', sync);
     };
   }, []);
 
   // The bar's real height, including the home-indicator inset, is what the page
   // pads by. A keyboard hides the bar, so the focused field can use that space.
+  // At `md` and up both variables are removed, including a value left by a resize.
   useLayoutEffect(() => {
     const root = document.documentElement;
+    const phone = window.matchMedia(PHONE_TAB_MEDIA);
     const nav = navRef.current;
     const apply = () => {
+      if (!phone.matches) {
+        root.style.removeProperty('--phone-tab-reserve');
+        root.style.removeProperty('--native-keyboard-height');
+        return;
+      }
       const reserve = !nav || keyboardOpen ? 0 : Math.round(nav.getBoundingClientRect().height);
       root.style.setProperty('--phone-tab-reserve', `${reserve}px`);
       root.style.setProperty('--native-keyboard-height', `${keyboardOpen ? keyboardPx : 0}px`);
     };
     apply();
-    if (!nav || typeof ResizeObserver === 'undefined') {
-      return () => {
-        root.style.removeProperty('--phone-tab-reserve');
-        root.style.removeProperty('--native-keyboard-height');
-      };
-    }
-    const observer = new ResizeObserver(() => apply());
-    observer.observe(nav);
+    const observer = nav && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(apply) : null;
+    if (nav && observer) observer.observe(nav);
+    phone.addEventListener('change', apply);
     return () => {
-      observer.disconnect();
+      observer?.disconnect();
+      phone.removeEventListener('change', apply);
       root.style.removeProperty('--phone-tab-reserve');
       root.style.removeProperty('--native-keyboard-height');
     };
@@ -119,6 +178,7 @@ export function PhoneTabBar() {
       )}
     >
       {tabs.map((tab) => {
+        // History, billing, and admin are not tabs, so none of these is current there.
         const active = tab.key === 'tools' ? section === 'tools'
           : tab.key === 'currentDebate' ? section === 'debate'
           : path === tab.to;
 
@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { KEYBOARD_OPEN_PX, keyboardOverlap } from './phone-tab-bar';
+import { KEYBOARD_OPEN_PX, isTextEntry, keyboardIsOpen, keyboardOverlap } from './phone-tab-bar';
 
 test('keyboard overlap ignores the URL bar and reports a real keyboard', () => {
   expect(keyboardOverlap(844, 800, 0)).toBe(44);
@@ -15,3 +15,20 @@ test('keyboard overlap stays at zero for a missing or inverted viewport', () =>
   expect(keyboardOverlap(800, 900, 0)).toBe(0);
   expect(keyboardOverlap(800, 700, 200)).toBe(0);
 });
+
+test('a keyboard is not pinch-zoom or an unfocused viewport shrink', () => {
+  expect(keyboardIsOpen(844, 430, 0, 1, true)).toBe(true);
+  expect(keyboardIsOpen(844, 800, 0, 1, true)).toBe(false);
+  expect(keyboardIsOpen(844, 430, 0, 1.5, true)).toBe(false);
+  expect(keyboardIsOpen(844, 430, 0, 1, false)).toBe(false);
+  expect(keyboardIsOpen(844, 430, 0, Number.NaN, true)).toBe(false);
+});
+
+test('text entry is an input or textarea, not a button', () => {
+  expect(isTextEntry('TEXTAREA', null, false)).toBe(true);
+  expect(isTextEntry('INPUT', 'text', false)).toBe(true);
+  expect(isTextEntry('INPUT', null, false)).toBe(true);
+  expect(isTextEntry('DIV', null, true)).toBe(true);
+  expect(isTextEntry('INPUT', 'checkbox', false)).toBe(false);
+  expect(isTextEntry('BUTTON', null, false)).toBe(false);
+});