diff --git a/apps/web/src/app/__tests__/touch-reveal-rules.test.ts b/apps/web/src/app/__tests__/touch-reveal-rules.test.ts
new file mode 100644
index 0000000000..b65330dcde
--- /dev/null
+++ b/apps/web/src/app/__tests__/touch-reveal-rules.test.ts
@@ -0,0 +1,176 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+import { describe, it, expect, beforeAll, afterEach } from 'vitest';
+
+/**
+ * The touch-reveal rules in globals.css are blunt attribute-substring selectors.
+ * Everything else about this feature is unit-tested, but until now the selectors
+ * themselves were only ever verified by reading the compiled CSS — nothing failed
+ * if they stopped matching the controls they exist to reveal, or started matching
+ * something they must not touch.
+ *
+ * This reads the SELECTORS OUT OF globals.css (rather than restating them, which
+ * would only test a copy of itself) and runs them against the real class strings
+ * from the components, so the CSS and the markup are pinned to each other.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const GLOBALS_CSS = resolve(here, '../globals.css');
+
+/** Selectors of every unlayered rule keyed on the coarse-pointer stamp. */
+let revealSelector: string;
+let displaySelectors: string[];
+
+beforeAll(() => {
+  const css = readFileSync(GLOBALS_CSS, 'utf8');
+
+  // Rule bodies are `:where([data-pointer='coarse']) <selector> { ... }`. Capture
+  // the FULL selector including the `:where()` ancestor — dropping it would leave
+  // the desktop assertion below testing nothing, since every rule would match
+  // regardless of whether <html> carries the stamp.
+  const rules = [...css.matchAll(/(:where\(\[data-pointer='coarse'\]\)[^{]+)\{([^}]+)\}/g)].map(
+    (m) => ({ selector: m[1].replace(/\s+/g, ' ').trim(), body: m[2] }),
+  );
+
+  const reveal = rules.filter((r) => r.body.includes('opacity: 1'));
+  expect(reveal, 'globals.css should contain exactly one opacity reveal rule').toHaveLength(1);
+  revealSelector = reveal[0].selector;
+
+  displaySelectors = rules.filter((r) => r.body.includes('display:')).map((r) => r.selector);
+  expect(displaySelectors.length, 'globals.css should contain display reveal rules').toBeGreaterThan(0);
+});
+
+/** Does an element with this class list get revealed on a coarse-pointer device? */
+function isRevealed(className: string, attrs: Record<string, string> = {}): boolean {
+  document.documentElement.setAttribute('data-pointer', 'coarse');
+  const el = document.createElement('div');
+  el.className = className;
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  document.body.appendChild(el);
+  return document.querySelectorAll(revealSelector).length === 1;
+}
+
+function isDisplayRevealed(className: string, attrs: Record<string, string> = {}): boolean {
+  document.documentElement.setAttribute('data-pointer', 'coarse');
+  const el = document.createElement('div');
+  el.className = className;
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  document.body.appendChild(el);
+  return displaySelectors.some((s) => document.querySelectorAll(s).length === 1);
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  document.documentElement.removeAttribute('data-pointer');
+});
+
+describe('touch reveal rules — controls that MUST become visible', () => {
+  // Class strings copied verbatim from the components they belong to.
+  const REVEALED: Array<[string, string]> = [
+    [
+      'MessageActionButtons — AI chat retry/edit/copy/delete (the headline bug)',
+      'flex items-center space-x-1 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity',
+    ],
+    [
+      'ui/sidebar SidebarMenuAction — page-tree row actions (md: viewport gate)',
+      'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+    ],
+    [
+      'TerminalPanes — the md: gate master re-introduced in #2006',
+      'absolute right-1.5 top-1.5 z-10 flex items-center opacity-100 transition-opacity focus-within:opacity-100 md:opacity-0 md:group-hover/pane:opacity-100',
+    ],
+    [
+      'MessageHoverToolbar — named group + pointer-events-none',
+      'opacity-0 group-hover/msg:opacity-100 focus-within:opacity-100 pointer-events-none group-hover/msg:pointer-events-auto',
+    ],
+    [
+      'TabItem close button',
+      'ml-1 rounded-sm p-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 focus:opacity-100',
+    ],
+    [
+      'prompt-input remove-attachment button',
+      'absolute inset-0 size-5 rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100',
+    ],
+    [
+      'SidebarActivityTab sub-item — sm: gate + named group',
+      'h-5 w-5 sm:opacity-0 sm:group-hover/item:opacity-100 transition-opacity flex-shrink-0',
+    ],
+  ];
+
+  it.each(REVEALED)('reveals %s', (_name, className) => {
+    expect(isRevealed(className)).toBe(true);
+  });
+
+  it('does nothing at all on a desktop device (no data-pointer stamp)', () => {
+    const el = document.createElement('div');
+    el.className = 'flex items-center sm:opacity-0 sm:group-hover:opacity-100';
+    document.body.appendChild(el);
+    // No data-pointer on <html> — the ancestor condition fails, so no rule can match.
+    expect(document.querySelectorAll(revealSelector)).toHaveLength(0);
+  });
+});
+
+describe('touch reveal rules — decoration that MUST STAY hidden', () => {
+  const OPTED_OUT: Array<[string, string]> = [
+    [
+      'FeedbackDialog screenshot scrim (would black out the preview)',
+      'absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity',
+    ],
+    [
+      'resizable drag seam',
+      'h-full w-px bg-sidebar-border transition-opacity group-hover:opacity-100 group-data-[separator=active]:opacity-100 opacity-0',
+    ],
+    [
+      'ChannelView message timestamp',
+      'absolute inset-y-0 right-2 flex items-center opacity-0 group-hover/msg:opacity-100 transition-opacity tabular-nums',
+    ],
+    [
+      'StatusConfigManager slug hint',
+      'text-xs text-muted-foreground ml-auto opacity-0 group-hover:opacity-100',
+    ],
+  ];
+
+  it.each(OPTED_OUT)('keeps %s hidden via data-hover-only', (_name, className) => {
+    expect(isRevealed(className, { 'data-hover-only': '' })).toBe(false);
+    // ...and would otherwise have been revealed, so the opt-out is load-bearing.
+    expect(isRevealed(className)).toBe(true);
+  });
+
+  it('never pins a hover FADE-OUT visible — it would cover the content beneath it', () => {
+    // prompt-input.tsx: the attachment thumbnail that fades out to expose its
+    // remove button. Forcing opacity:1 here would be an inversion.
+    expect(
+      isRevealed('absolute inset-0 flex size-5 rounded bg-background transition-opacity group-hover:opacity-0'),
+    ).toBe(false);
+  });
+
+  it('still excludes a fade-out that later grows an :opacity-100 variant (the landmine)', () => {
+    // This is the case the `:not([class*='group-hover:opacity-0'])` guard exists for.
+    // Without it, adding focus-within:opacity-100 to a scrim pins the scrim VISIBLE.
+    expect(
+      isRevealed('absolute inset-0 bg-black/50 transition-opacity group-hover:opacity-0 focus-within:opacity-100'),
+    ).toBe(false);
+  });
+});
+
+describe('touch reveal rules — display-based reveals', () => {
+  it('reveals a hidden group-hover:flex control', () => {
+    expect(isDisplayRevealed('hidden group-hover:flex items-center gap-1')).toBe(true);
+  });
+
+  it('keeps TabItem’s Cmd+N shortcut hint hidden — it is a keyboard affordance', () => {
+    expect(
+      isDisplayRevealed('text-[10px] text-white/70 flex-shrink-0 hidden group-hover:inline', {
+        'data-hover-only': '',
+      }),
+    ).toBe(false);
+  });
+
+  it('does not let group-hover:flex-row masquerade as a display reveal', () => {
+    // Exact-token (`~=`) matching, not substring: a flex-DIRECTION change on hover
+    // must not be forced to `display: flex` on touch.
+    expect(isDisplayRevealed('flex group-hover:flex-row items-center')).toBe(false);
+  });
+});
diff --git a/apps/web/src/app/dashboard/dms/[conversationId]/page.tsx b/apps/web/src/app/dashboard/dms/[conversationId]/page.tsx
index 59d1caf944..fc03c63d81 100644
--- a/apps/web/src/app/dashboard/dms/[conversationId]/page.tsx
+++ b/apps/web/src/app/dashboard/dms/[conversationId]/page.tsx
@@ -621,13 +621,13 @@ export default function InboxDMPage() {
                     </Avatar>
                   ) : (
                     <div className="h-10 w-10 flex-shrink-0 relative" aria-hidden>
-                      <span className="absolute inset-y-0 right-2 flex items-center text-[10px] text-muted-foreground opacity-0 group-hover/msg:opacity-100 transition-opacity tabular-nums">
+                      <span data-hover-only="" className="absolute inset-y-0 right-2 flex items-center text-[10px] text-muted-foreground opacity-0 group-hover/msg:opacity-100 transition-opacity tabular-nums">
                         {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
                   )}
 
-                  <div className={cn("flex-1 min-w-0", !isFirst && "[@media(hover:none)]:pr-28")}>
+                  <div className={cn("flex-1 min-w-0", !isFirst && "[@media(hover:none)]:pr-28 touch:pr-28")}>
                     {isFirst && (
                       <div className="flex items-center gap-2 mb-1">
                         <span className="font-semibold text-sm">{senderName}</span>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index be87e9dc5c..cd9abe1d71 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -7,10 +7,86 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Touch devices are stamped with data-pointer="coarse" on <html> pre-paint by
+   the inline script in layout.tsx (see lib/pointer-capability.ts). Use `touch:`
+   for any new code that needs a touch-only rule. */
+@custom-variant touch (&:where([data-pointer='coarse'] *));
+
 svg.lucide {
   stroke-width: 1.5;
 }
 
+/* ---------------------------------------------------------------------------
+   Hover-revealed controls on touch devices.
+
+   There is no hover on a touchscreen, so every `opacity-0 group-hover:opacity-100`
+   affordance (message retry/edit/copy, page-tree row actions, tab close buttons,
+   version-history and activity actions, …) is unreachable. Worse, the `sm:`/`md:`
+   -prefixed variants consult no pointer signal at all, so they break in iPad
+   Safari too — an iPad is wide enough to match `sm:`, but never hovers.
+
+   These rules are UNLAYERED (Tailwind utilities live in `@layer utilities`), so
+   they win without `!important` — same trick as `svg.lucide` above.
+
+   Attribute-substring matching is required: a plain `.group-hover\:opacity-100`
+   selector would miss both the named-group variants (`group-hover/msg:`,
+   `group-hover/pane:`, `group-hover/item:`, `group-hover/menu-item:`) and the
+   `sm:`/`md:`-prefixed forms.
+
+   `data-hover-only` opts an element out — for decoration (scrims, drag seams,
+   timestamps) as opposed to affordances.
+   --------------------------------------------------------------------------- */
+
+/* Reveal pair: a resting `opacity-0` that a group-hover restores to full.
+   `pointer-events: auto` is required — MessageHoverToolbar and prompt-input pair
+   their `opacity-0` with `pointer-events-none`, so opacity alone would leave the
+   buttons visible but dead.
+
+   The `group-hover:opacity-0` exclusion matters: an element that fades OUT on
+   hover (to expose a control beneath it) also carries the `opacity-0` substring.
+   Without the guard, adding any `:opacity-100` variant to such an element — a
+   `focus-within:opacity-100`, say — would drag it into this rule and pin the
+   fade-out permanently VISIBLE, hiding whatever it covers. We reveal controls;
+   we do not simulate a whole hover state. Elements that fade out are simply left
+   alone, at their natural resting opacity. */
+:where([data-pointer='coarse'])
+  [class*='opacity-0'][class*='group-hover'][class*=':opacity-100']:not([class*='group-hover:opacity-0']):not([data-hover-only]) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Display-based reveals (`hidden group-hover:flex`), not opacity-based.
+
+   These have ZERO live matches today, and that is deliberate rather than an
+   oversight: the repo's only `hidden group-hover:inline` is TabItem's Cmd+N
+   shortcut hint, which is a keyboard affordance and is opted out. The rules stay
+   as the standing policy, so the next display-based control — `hidden
+   group-hover:flex` is the idiomatic way to hide a button row — is revealed on
+   touch instead of silently disappearing, which is the entire bug class this file
+   exists to close.
+
+   These match the exact class token (`~=`), NOT a substring. Substring matching
+   is correct for the opacity rules above — it is what catches `sm:` and
+   named-group variants — but here it would make `group-hover:flex` also match
+   `group-hover:flex-row` and force `display: flex` on an element that only asked
+   to change its flex-direction. For a display reveal there is nothing to catch:
+   the token is written out in full. */
+:where([data-pointer='coarse']) [class~='group-hover:inline']:not([data-hover-only]) {
+  display: inline;
+}
+:where([data-pointer='coarse']) [class~='group-hover:inline-flex']:not([data-hover-only]) {
+  display: inline-flex;
+}
+:where([data-pointer='coarse']) [class~='group-hover:flex']:not([data-hover-only]) {
+  display: flex;
+}
+:where([data-pointer='coarse']) [class~='group-hover:block']:not([data-hover-only]) {
+  display: block;
+}
+:where([data-pointer='coarse']) [class~='group-hover:grid']:not([data-hover-only]) {
+  display: grid;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 4320ddb808..58bfdf6794 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -10,6 +10,7 @@ import ClientTrackingProvider from "@/components/providers/ClientTrackingProvide
 import ConsentProvider from "@/components/providers/ConsentProvider";
 import { Toaster } from "@/components/ui/sonner";
 import { getRequestNonce } from "@/lib/request-nonce";
+import { POINTER_CAPABILITY_SCRIPT } from "@/lib/pointer-capability";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -99,6 +100,15 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        {/* Stamp data-pointer="coarse" on <html> before first paint so the
+            unlayered touch rules in globals.css apply without a flash of hidden
+            controls. Emitted only client-side: the server renders no attribute,
+            so desktop SSR output is unchanged. <html> carries
+            suppressHydrationWarning, so the pre-paint mutation is free. */}
+        <script
+          nonce={nonce}
+          dangerouslySetInnerHTML={{ __html: POINTER_CAPABILITY_SCRIPT }}
+        />
         {/* Set webpack nonce for dynamically loaded chunks (next/dynamic) */}
         <script
           nonce={nonce}
diff --git a/apps/web/src/components/ai/ui/prompt-input.tsx b/apps/web/src/components/ai/ui/prompt-input.tsx
index 5b456e3cd1..29624877d5 100644
--- a/apps/web/src/components/ai/ui/prompt-input.tsx
+++ b/apps/web/src/components/ai/ui/prompt-input.tsx
@@ -326,7 +326,14 @@ export function PromptInputAttachment({
             </div>
             <Button
               aria-label="Remove attachment"
-              className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
+              // On touch this button is pinned visible (globals.css) and there is no
+              // hover to fade the thumbnail out from under it, so the ✕ needs a
+              // backdrop or it is unreadable over a dark image. At a 20px chip there
+              // is no room for both: the backdrop largely occludes the thumbnail.
+              // That is the right trade — the filename beside it identifies the
+              // attachment, and a legible remove control matters more than a 20px
+              // preview.
+              className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 touch:bg-background/80 [&>svg]:size-2.5"
               onClick={(e) => {
                 e.stopPropagation();
                 attachments.remove(data.id);
diff --git a/apps/web/src/components/layout/left-sidebar/FavoritesSection.tsx b/apps/web/src/components/layout/left-sidebar/FavoritesSection.tsx
index a7ac2dbd41..44eb2c6ecc 100644
--- a/apps/web/src/components/layout/left-sidebar/FavoritesSection.tsx
+++ b/apps/web/src/components/layout/left-sidebar/FavoritesSection.tsx
@@ -4,6 +4,7 @@ import { useState, useCallback, type MouseEvent } from "react";
 import { useRouter } from "next/navigation";
 import { ChevronDown, ExternalLink, Folder, MoreHorizontal, Star } from "lucide-react";
 import { useTabsStore } from "@/stores/useTabsStore";
+import { useTouchDevice } from "@/hooks/useTouchDevice";
 import { shouldOpenInNewTab } from "@/lib/tabs/tab-navigation-utils";
 import {
   Collapsible,
@@ -148,6 +149,7 @@ interface FavoriteItemProps {
 
 function FavoriteItem({ favorite, onNavigate, onOpenInNewTab, onRemove, hideTabActions }: FavoriteItemProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const isTouchDevice = useTouchDevice();
 
   const title =
     favorite.itemType === "drive"
@@ -202,7 +204,7 @@ function FavoriteItem({ favorite, onNavigate, onOpenInNewTab, onRemove, hideTabA
             size="icon"
             className={cn(
               "absolute right-1 h-6 w-6 transition-opacity",
-              isHovered ? "opacity-100" : "opacity-0"
+              isTouchDevice || isHovered ? "opacity-100" : "opacity-0"
             )}
             onClick={(e) => e.stopPropagation()}
           >
diff --git a/apps/web/src/components/layout/left-sidebar/page-tree/PageTreeItem.tsx b/apps/web/src/components/layout/left-sidebar/page-tree/PageTreeItem.tsx
index dda4514b12..15b2711f69 100644
--- a/apps/web/src/components/layout/left-sidebar/page-tree/PageTreeItem.tsx
+++ b/apps/web/src/components/layout/left-sidebar/page-tree/PageTreeItem.tsx
@@ -416,7 +416,7 @@ export const PageTreeItem = React.memo(function PageTreeItem({
               <div
                 className={cn(
                   "flex items-center ml-2 transition-opacity duration-200",
-                  isHovered ? "opacity-100" : "opacity-0"
+                  isTouchDevice || isHovered ? "opacity-100" : "opacity-0"
                 )}
               >
                 <button
diff --git a/apps/web/src/components/layout/middle-content/page-views/channel/ChannelView.tsx b/apps/web/src/components/layout/middle-content/page-views/channel/ChannelView.tsx
index ad8a5a36ab..c7bc534285 100644
--- a/apps/web/src/components/layout/middle-content/page-views/channel/ChannelView.tsx
+++ b/apps/web/src/components/layout/middle-content/page-views/channel/ChannelView.tsx
@@ -702,12 +702,12 @@ function ChannelView({ page }: ChannelViewProps) {
                               </Avatar>
                             ) : (
                               <div className="size-8 shrink-0 relative" aria-hidden>
-                                <span className="absolute inset-y-0 right-2 flex items-center text-[10px] text-muted-foreground opacity-0 group-hover/msg:opacity-100 transition-opacity tabular-nums">
+                                <span data-hover-only="" className="absolute inset-y-0 right-2 flex items-center text-[10px] text-muted-foreground opacity-0 group-hover/msg:opacity-100 transition-opacity tabular-nums">
                                   {new Date(m.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                 </span>
                               </div>
                             )}
-                            <div className={cn("flex flex-col min-w-0 flex-1", !isFirst && "[@media(hover:none)]:pr-28")}>
+                            <div className={cn("flex flex-col min-w-0 flex-1", !isFirst && "[@media(hover:none)]:pr-28 touch:pr-28")}>
                                 {isFirst && (
                                   <div className="flex items-center gap-2">
                                       <span className="font-semibold text-sm">{displayName}</span>
diff --git a/apps/web/src/components/layout/middle-content/page-views/task-list/StatusConfigManager.tsx b/apps/web/src/components/layout/middle-content/page-views/task-list/StatusConfigManager.tsx
index e85280c516..e157e21da7 100644
--- a/apps/web/src/components/layout/middle-content/page-views/task-list/StatusConfigManager.tsx
+++ b/apps/web/src/components/layout/middle-content/page-views/task-list/StatusConfigManager.tsx
@@ -234,7 +234,8 @@ export function StatusConfigManager({
                     ) : (
                       <>
                         <Badge className={cn('text-xs', config.color)}>{config.name}</Badge>
-                        <span className="text-xs text-muted-foreground ml-auto opacity-0 group-hover:opacity-100">
+                        {/* Metadata hint, not a control — keep it hover-only. */}
+                        <span data-hover-only="" className="text-xs text-muted-foreground ml-auto opacity-0 group-hover:opacity-100">
                           {config.slug}
                         </span>
                         <DropdownMenu>
diff --git a/apps/web/src/components/layout/middle-content/page-views/thread/ThreadPanel.tsx b/apps/web/src/components/layout/middle-content/page-views/thread/ThreadPanel.tsx
index f40d7f35ff..6ac89945d8 100644
--- a/apps/web/src/components/layout/middle-content/page-views/thread/ThreadPanel.tsx
+++ b/apps/web/src/components/layout/middle-content/page-views/thread/ThreadPanel.tsx
@@ -781,7 +781,7 @@ export function ThreadPanel({
                   {author.image && <AvatarImage src={author.image} />}
                   <AvatarFallback>{initial}</AvatarFallback>
                 </Avatar>
-                <div className={cn("min-w-0 flex-1", "[@media(hover:none)]:pr-28")}>
+                <div className={cn("min-w-0 flex-1", "[@media(hover:none)]:pr-28 touch:pr-28")}>
                   <div className="flex items-center gap-2">
                     <span className="text-sm font-semibold">{author.name}</span>
                     <span className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/layout/navbar/DriveSwitcher.tsx b/apps/web/src/components/layout/navbar/DriveSwitcher.tsx
index 9707dbc840..80abb39f19 100644
--- a/apps/web/src/components/layout/navbar/DriveSwitcher.tsx
+++ b/apps/web/src/components/layout/navbar/DriveSwitcher.tsx
@@ -18,6 +18,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { CustomScrollArea } from "@/components/ui/custom-scroll-area";
 import { useDriveStore, type Drive } from "@/hooks/useDrive";
 import { useFavorites, useFavoritesSync } from "@/hooks/useFavorites";
+import { useTouchDevice } from "@/hooks/useTouchDevice";
 import { fetchWithAuth } from "@/lib/auth/auth-fetch";
 import CreateDriveDialog from "@/components/layout/left-sidebar/CreateDriveDialog";
 import { cn } from "@/lib/utils";
@@ -287,6 +288,7 @@ function DriveMenuItem({
   onToggleFavorite,
 }: DriveMenuItemProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const isTouchDevice = useTouchDevice();
 
   return (
     <DropdownMenuItem
@@ -304,7 +306,7 @@ function DriveMenuItem({
         onClick={onToggleFavorite}
         className={cn(
           "h-6 w-6 flex items-center justify-center rounded-sm transition-opacity",
-          isHovered || isFavorite ? "opacity-100" : "opacity-0",
+          isTouchDevice || isHovered || isFavorite ? "opacity-100" : "opacity-0",
           "hover:bg-accent"
         )}
       >
diff --git a/apps/web/src/components/layout/tabs/TabItem.tsx b/apps/web/src/components/layout/tabs/TabItem.tsx
index e95c891a23..ab1c1b18a1 100644
--- a/apps/web/src/components/layout/tabs/TabItem.tsx
+++ b/apps/web/src/components/layout/tabs/TabItem.tsx
@@ -181,7 +181,10 @@ export const TabItem = memo(function TabItem({
               title="Unsaved changes"
             />
           ) : shortcutNumber && !tab.isPinned ? (
-            <span className="text-[10px] text-white/70 flex-shrink-0 hidden group-hover:inline">
+            // The Cmd/Ctrl+N shortcut hint — a keyboard affordance, so it stays
+            // hover-only. Revealing it on touch would pin a stray digit into every
+            // tab, next to the close button this same mechanism already surfaces.
+            <span data-hover-only="" className="text-[10px] text-white/70 flex-shrink-0 hidden group-hover:inline">
               {shortcutNumber}
             </span>
           ) : null}
diff --git a/apps/web/src/components/shared/FeedbackDialog.tsx b/apps/web/src/components/shared/FeedbackDialog.tsx
index 6d66bef20d..9fb591dc6e 100644
--- a/apps/web/src/components/shared/FeedbackDialog.tsx
+++ b/apps/web/src/components/shared/FeedbackDialog.tsx
@@ -316,7 +316,17 @@ export function FeedbackDialog({ isOpen, onClose }: FeedbackDialogProps) {
                   <button
                     type="button"
                     onClick={() => removeFile(af.id)}
-                    className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                    // Opted out of the blanket reveal: this is a full-bleed black
+                    // scrim, and pinning it visible would black out the screenshot
+                    // preview on every phone.
+                    //
+                    // But leaving it at opacity-0 is not good enough either — a
+                    // `<button>` still takes taps, so on touch this was an invisible
+                    // full-bleed destructive target: tap your screenshot to inspect
+                    // it, silently delete it instead. On touch it becomes a real
+                    // corner delete badge; on desktop the hover scrim is unchanged.
+                    data-hover-only=""
+                    className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center touch:inset-auto touch:top-1 touch:right-1 touch:size-6 touch:rounded-full touch:bg-black/60 touch:opacity-100"
                   >
                     <X className="w-4 h-4 text-white" />
                   </button>
diff --git a/apps/web/src/components/shared/MessageHoverToolbar.tsx b/apps/web/src/components/shared/MessageHoverToolbar.tsx
index 962f71c609..75cbd6dd5c 100644
--- a/apps/web/src/components/shared/MessageHoverToolbar.tsx
+++ b/apps/web/src/components/shared/MessageHoverToolbar.tsx
@@ -83,10 +83,18 @@ export function MessageHoverToolbar({
         'flex items-center gap-0.5 p-0.5',
         'rounded-md border border-border bg-popover shadow-sm',
         // Hover devices: hidden by default, shown on hover/focus or when picker is open.
-        // Touch / no-hover devices: always visible so message actions remain reachable.
+        // Touch devices: always visible so message actions remain reachable.
+        //
+        // Both gates are kept on purpose. `[@media(hover:none)]` catches iPhone and
+        // Android with zero JS, but is dead on a desktop-class iPad, which reports
+        // `hover: hover`. `touch:` catches that iPad, but depends on the inline script
+        // in layout.tsx having stamped data-pointer (see lib/pointer-capability.ts).
+        // Together they degrade gracefully: if the script never runs, every device the
+        // media query already covered still works.
         'opacity-0 group-hover/msg:opacity-100 focus-within:opacity-100',
         'pointer-events-none group-hover/msg:pointer-events-auto focus-within:pointer-events-auto',
         '[@media(hover:none)]:opacity-100 [@media(hover:none)]:pointer-events-auto',
+        'touch:opacity-100 touch:pointer-events-auto',
         'transition-opacity',
         pickerOpen && 'opacity-100 pointer-events-auto',
         className,
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index 8835d5303c..604dfd1510 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -50,6 +50,8 @@ function ResizableHandle({
           handles both orientations — a fixed absolute/translate line was
           hardcoded vertical and broke for orientation="vertical" groups. */}
       <div
+        // Decoration, not an affordance — the seam must not be pinned visible on touch.
+        data-hover-only=""
         className={cn(
           "h-full w-px bg-sidebar-border transition-opacity duration-150",
           "group-aria-[orientation=horizontal]:h-px group-aria-[orientation=horizontal]:w-full",
diff --git a/apps/web/src/hooks/__tests__/useTouchDevice.test.ts b/apps/web/src/hooks/__tests__/useTouchDevice.test.ts
new file mode 100644
index 0000000000..93c4b01766
--- /dev/null
+++ b/apps/web/src/hooks/__tests__/useTouchDevice.test.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+
+import { useTouchDevice } from '../useTouchDevice';
+
+/**
+ * Pins the hook to `detectCoarsePointer`. Without this, reverting `getSnapshot`
+ * to a bare `matchMedia('(pointer: coarse)')` check — the obvious-looking
+ * simplification — passes every other test in the suite while silently
+ * re-breaking every JS-hover affordance on a desktop-class iPad.
+ */
+vi.mock('@/lib/pointer-capability', () => ({
+  detectCoarsePointer: vi.fn(() => false),
+}));
+
+const { detectCoarsePointer } = await import('@/lib/pointer-capability');
+const detectMock = vi.mocked(detectCoarsePointer);
+
+afterEach(() => {
+  detectMock.mockReset();
+});
+
+describe('useTouchDevice', () => {
+  it('reports touch when detectCoarsePointer says so', () => {
+    detectMock.mockReturnValue(true);
+    const { result } = renderHook(() => useTouchDevice());
+    expect(result.current).toBe(true);
+  });
+
+  it('reports no touch when detectCoarsePointer says so', () => {
+    detectMock.mockReturnValue(false);
+    const { result } = renderHook(() => useTouchDevice());
+    expect(result.current).toBe(false);
+  });
+
+  it('does not decide on its own — the verdict comes from detectCoarsePointer', () => {
+    // jsdom's matchMedia stub always reports `matches: false` (see test/setup.ts).
+    // A hook that consulted the media query directly could never return true here.
+    detectMock.mockReturnValue(true);
+    const { result } = renderHook(() => useTouchDevice());
+
+    expect(detectMock).toHaveBeenCalled();
+    expect(result.current).toBe(true);
+  });
+});
diff --git a/apps/web/src/hooks/useTouchDevice.ts b/apps/web/src/hooks/useTouchDevice.ts
index 796a9d9f92..a97d107c35 100644
--- a/apps/web/src/hooks/useTouchDevice.ts
+++ b/apps/web/src/hooks/useTouchDevice.ts
@@ -2,9 +2,14 @@
 
 import { useSyncExternalStore } from "react";
 
+import { detectCoarsePointer } from "@/lib/pointer-capability";
+
 /**
  * Detects if the current device is a touch device.
- * Uses coarse pointer detection which is more reliable than touch event checks.
+ *
+ * Delegates to `detectCoarsePointer()` — `(pointer: coarse)` alone is not enough,
+ * because a desktop-class iPad (the Capacitor app's default content mode, and
+ * iPad Safari's "Request Desktop Site") reports `pointer: fine`.
  */
 
 const TOUCH_QUERY = "(pointer: coarse)";
@@ -32,12 +37,7 @@ const subscribe = (callback: () => void) => {
   };
 };
 
-const getSnapshot = () => {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  return window.matchMedia(TOUCH_QUERY).matches;
-};
+const getSnapshot = () => detectCoarsePointer();
 
 const getServerSnapshot = () => false;
 
diff --git a/apps/web/src/lib/__tests__/pointer-capability.test.ts b/apps/web/src/lib/__tests__/pointer-capability.test.ts
new file mode 100644
index 0000000000..19d2365bba
--- /dev/null
+++ b/apps/web/src/lib/__tests__/pointer-capability.test.ts
@@ -0,0 +1,170 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+
+import { detectCoarsePointer, POINTER_CAPABILITY_SCRIPT } from '../pointer-capability';
+
+/** Real-world user-agent strings, verbatim. */
+const UA = {
+  /** iPadOS with `preferredContentMode: 'recommended'` — reports as a Mac. */
+  desktopClassIPad:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+  /** iPad Safari in mobile content mode. */
+  mobileIPad:
+    'Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  iPhone:
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+  /** Genuine macOS — UA is indistinguishable from a desktop-class iPad. */
+  macOS:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+  windows:
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+};
+
+interface DeviceShape {
+  coarse: boolean;
+  maxTouchPoints: number;
+  userAgent: string;
+  capacitorNative?: boolean;
+}
+
+function stubDevice({ coarse, maxTouchPoints, userAgent, capacitorNative }: DeviceShape) {
+  vi.stubGlobal('window', {
+    matchMedia: (query: string) => ({ matches: query === '(pointer: coarse)' && coarse }),
+    ...(capacitorNative === undefined
+      ? {}
+      : { Capacitor: { isNativePlatform: () => capacitorNative } }),
+  });
+  vi.stubGlobal('navigator', { maxTouchPoints, userAgent });
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('detectCoarsePointer', () => {
+  it('returns false during SSR, when there is no window', () => {
+    vi.stubGlobal('window', undefined);
+    expect(detectCoarsePointer()).toBe(false);
+  });
+
+  it('detects the Capacitor native shell even when it reports a fine pointer', () => {
+    // The iOS app runs desktop-class by default: pointer is `fine`, hover is `hover`.
+    stubDevice({
+      coarse: false,
+      maxTouchPoints: 5,
+      userAgent: UA.desktopClassIPad,
+      capacitorNative: true,
+    });
+    expect(detectCoarsePointer()).toBe(true);
+  });
+
+  it('does not treat a non-native Capacitor shim as touch on desktop', () => {
+    stubDevice({
+      coarse: false,
+      maxTouchPoints: 0,
+      userAgent: UA.macOS,
+      capacitorNative: false,
+    });
+    expect(detectCoarsePointer()).toBe(false);
+  });
+
+  it('detects a plain coarse pointer (iPhone)', () => {
+    stubDevice({ coarse: true, maxTouchPoints: 5, userAgent: UA.iPhone });
+    expect(detectCoarsePointer()).toBe(true);
+  });
+
+  it('detects an iPad in mobile content mode via the coarse-pointer query', () => {
+    stubDevice({ coarse: true, maxTouchPoints: 5, userAgent: UA.mobileIPad });
+    expect(detectCoarsePointer()).toBe(true);
+  });
+
+  it('detects a desktop-class iPad in Safari — the case every media query misses', () => {
+    // Reports `pointer: fine` and a Macintosh UA. maxTouchPoints is the only tell.
+    stubDevice({ coarse: false, maxTouchPoints: 5, userAgent: UA.desktopClassIPad });
+    expect(detectCoarsePointer()).toBe(true);
+  });
+
+  it('returns false on real macOS, which has the same UA but no touch points', () => {
+    stubDevice({ coarse: false, maxTouchPoints: 0, userAgent: UA.macOS });
+    expect(detectCoarsePointer()).toBe(false);
+  });
+
+  it('returns false on a touchscreen Windows laptop, which must keep hover behaviour', () => {
+    // Deliberately out of scope: a fine pointer is present, so hover works.
+    stubDevice({ coarse: false, maxTouchPoints: 10, userAgent: UA.windows });
+    expect(detectCoarsePointer()).toBe(false);
+  });
+
+  it('tolerates a missing matchMedia', () => {
+    vi.stubGlobal('window', {});
+    vi.stubGlobal('navigator', { maxTouchPoints: 0, userAgent: UA.macOS });
+    expect(detectCoarsePointer()).toBe(false);
+  });
+});
+
+describe('POINTER_CAPABILITY_SCRIPT', () => {
+  const evalScript = (device: DeviceShape) => {
+    const html: Record<string, string> = {};
+    const win = {
+      Capacitor:
+        device.capacitorNative === undefined
+          ? undefined
+          : { isNativePlatform: () => device.capacitorNative },
+      matchMedia: (query: string) => ({
+        matches: query === '(pointer: coarse)' && device.coarse,
+      }),
+    };
+    const nav = { maxTouchPoints: device.maxTouchPoints, userAgent: device.userAgent };
+    const doc = {
+      documentElement: {
+        setAttribute: (name: string, value: string) => {
+          html[name] = value;
+        },
+      },
+    };
+    new Function('window', 'navigator', 'document', POINTER_CAPABILITY_SCRIPT)(win, nav, doc);
+    return html;
+  };
+
+  it('stamps data-pointer="coarse" on a desktop-class iPad', () => {
+    expect(evalScript({ coarse: false, maxTouchPoints: 5, userAgent: UA.desktopClassIPad })).toEqual(
+      { 'data-pointer': 'coarse' },
+    );
+  });
+
+  it('stamps nothing on real macOS — desktop markup is untouched', () => {
+    expect(evalScript({ coarse: false, maxTouchPoints: 0, userAgent: UA.macOS })).toEqual({});
+  });
+
+  /**
+   * The script is a hand-minified copy of `detectCoarsePointer` — it has to be,
+   * because it runs before any bundle loads. That duplication is the one real
+   * maintenance hazard in this module, so pin the two together: every device in
+   * the matrix must produce the same verdict from both implementations. Change
+   * one without the other and this fails.
+   */
+  describe('parity with detectCoarsePointer', () => {
+    const DEVICES: Array<{ name: string; device: DeviceShape }> = [
+      { name: 'iPhone', device: { coarse: true, maxTouchPoints: 5, userAgent: UA.iPhone } },
+      { name: 'iPad, mobile content mode', device: { coarse: true, maxTouchPoints: 5, userAgent: UA.mobileIPad } },
+      { name: 'iPad, desktop-class', device: { coarse: false, maxTouchPoints: 5, userAgent: UA.desktopClassIPad } },
+      {
+        name: 'iPad, desktop-class, Capacitor native',
+        device: { coarse: false, maxTouchPoints: 5, userAgent: UA.desktopClassIPad, capacitorNative: true },
+      },
+      { name: 'macOS', device: { coarse: false, maxTouchPoints: 0, userAgent: UA.macOS } },
+      {
+        name: 'macOS with a non-native Capacitor shim',
+        device: { coarse: false, maxTouchPoints: 0, userAgent: UA.macOS, capacitorNative: false },
+      },
+      { name: 'Windows desktop', device: { coarse: false, maxTouchPoints: 0, userAgent: UA.windows } },
+      { name: 'Windows touchscreen laptop', device: { coarse: false, maxTouchPoints: 10, userAgent: UA.windows } },
+    ];
+
+    it.each(DEVICES)('agrees on $name', ({ device }) => {
+      const stamped = evalScript(device)['data-pointer'] === 'coarse';
+
+      stubDevice(device);
+      expect(stamped).toBe(detectCoarsePointer());
+    });
+  });
+});
diff --git a/apps/web/src/lib/pointer-capability.ts b/apps/web/src/lib/pointer-capability.ts
new file mode 100644
index 0000000000..0bfa262541
--- /dev/null
+++ b/apps/web/src/lib/pointer-capability.ts
@@ -0,0 +1,48 @@
+/**
+ * Canonical touch/coarse-pointer detection.
+ *
+ * Why not `@media (hover: none)` / `(pointer: coarse)` alone?
+ * The iOS app sets `ios.preferredContentMode: 'recommended'`, which gives the
+ * iPad desktop-class browsing: it reports `hover: hover` and `pointer: fine`.
+ * A CSS-only gate is therefore dead on the exact device that needs it — the
+ * `[@media(hover:none)]` rule in MessageHoverToolbar had been silently inert on
+ * that iPad for exactly this reason.
+ *
+ * This module does not *replace* those media queries — it backstops them. They
+ * still cover iPhone and Android with zero JS; this covers the one device they
+ * cannot see. Both gates ship together so that if this script never runs,
+ * everything the media query already handled keeps working.
+ *
+ * `navigator.maxTouchPoints` is the only reliable tell: iPadOS reports 5 even in
+ * desktop-class mode, while real macOS reports 0. The repo already trusts this
+ * escape hatch in `useEnterToSend.ts`.
+ *
+ * Deliberately NOT `(any-pointer: coarse)` — that would flip touchscreen Windows
+ * laptops and change desktop rendering.
+ */
+
+import { isCapacitorApp } from './capacitor-bridge';
+
+export function detectCoarsePointer(): boolean {
+  if (typeof window === 'undefined') return false;
+
+  // 1. Capacitor native shell — true regardless of content mode.
+  if (isCapacitorApp()) return true;
+
+  // 2. Standard coarse pointer — iPhone, Android, iPad in mobile content mode.
+  if (window.matchMedia?.('(pointer: coarse)').matches) return true;
+
+  // 3. Desktop-class iPad: reports `pointer: fine` but still has multi-touch.
+  //    Real macOS has maxTouchPoints === 0, so it never matches.
+  return (navigator.maxTouchPoints ?? 0) > 1 && /iPad|Macintosh|iPhone/.test(navigator.userAgent);
+}
+
+/**
+ * The pre-paint inline script stamped into <body> by the root layout. It has to
+ * be a hand-minified copy of `detectCoarsePointer` — it runs before any bundle
+ * loads — which makes it the one real maintenance hazard here. It is kept in this
+ * file, beside the function it mirrors, and a parity test in
+ * `__tests__/pointer-capability.test.ts` asserts the two agree on every device in
+ * the matrix. Change one without the other and that test fails.
+ */
+export const POINTER_CAPABILITY_SCRIPT = `(function(){try{var C=window.Capacitor;var t=(C&&C.isNativePlatform&&C.isNativePlatform())||(window.matchMedia&&window.matchMedia('(pointer: coarse)').matches)||((navigator.maxTouchPoints||0)>1&&/iPad|Macintosh|iPhone/.test(navigator.userAgent));if(t){document.documentElement.setAttribute('data-pointer','coarse');}}catch(e){}})();`;