diff --git a/userscript/manga-bookmark.user.js b/userscript/manga-bookmark.user.js
index 35f360e..1c56d2f 100644
--- a/userscript/manga-bookmark.user.js
+++ b/userscript/manga-bookmark.user.js
@@ -1307,7 +1307,7 @@
   // ============================================================
 
   const TEMPLATE = `
-    <button id="fab" aria-label="Manga bookmarks"><span id="fill"></span></button>
+    <button id="fab" aria-label="Manga bookmarks"><span id="fill"></span><span id="hit"></span></button>
     <div id="backdrop"></div>
     <aside id="panel" role="dialog" aria-label="Manga bookmarks">
       <header>
@@ -1340,14 +1340,23 @@
       border-radius: 4px 0 0 4px;
       background: #6d28d9; opacity: .45;
       box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 2147483646; cursor: pointer;
-      touch-action: none; user-select: none; overflow: hidden;
+      touch-action: none; user-select: none;
     }
     #fab.left { border-radius: 0 4px 4px 0; }
-    #fab:active { opacity: 1; }
+    #fab:active, #fab.armed { opacity: 1; }
+    #fab.armed { box-shadow: 0 0 0 2px #c4b5fd; }
     #fill {
       position: absolute; left: 0; right: 0; bottom: 0; height: 0;
-      background: #c4b5fd; pointer-events: none;
+      background: #c4b5fd; pointer-events: none; border-radius: inherit;
     }
+    /* Invisible tap extension: the visible sliver is 7x44, this makes it 28x72.
+       It grows inward (toward the screen centre) because the tab is docked flush
+       against an edge, so outward is off-screen. */
+    #hit {
+      position: absolute; top: -14px; bottom: -14px;
+      left: -21px; right: 0;
+    }
+    #fab.left #hit { left: 0; right: -21px; }
     #backdrop {
       position: fixed; inset: 0; background: rgba(0,0,0,.5);
       opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2147483646;