feat(ext/vault): sticky save bar in fullscreen forms

The form pane gets a flex column layout: scrollable content above,
sticky save bar at bottom. Bar uses translucent fill with backdrop-blur
and a 24px gradient fade so content scrolls under it. Save / cancel
buttons reuse the form's existing handlers via externalActions flag.

extension/src/vault/vault.ts

@@ -415,6 +415,71 @@ async function selectItem(id: ItemId): Promise<void> {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Platform-aware save hint
+// ---------------------------------------------------------------------------
+
+const isMac = navigator.platform.toLowerCase().includes('mac');
+const SAVE_HINT = isMac ? '⌘+S to save' : 'Ctrl+S to save';
+
+// ---------------------------------------------------------------------------
+// Fullscreen form wrapper — sticky save bar + scrollable content + header
+// ---------------------------------------------------------------------------
+
+function renderFormWrapped(app: HTMLElement, mode: 'add' | 'edit'): void {
+  const itemType = state.selectedItem?.type ?? state.newType ?? 'login';
+  const typeLabel = itemType.replace('_', ' ');
+  const titleText = mode === 'add' ? `new ${typeLabel}` : `edit ${typeLabel}`;
+  const wrapper = document.createElement('div');
+  wrapper.className = 'form-pane';
+  wrapper.innerHTML = `
+    <div class="fullscreen-form-header">
+      <div>
+        <div class="title">${titleText}</div>
+        <div class="sub" id="form-dirty-sub">no changes</div>
+      </div>
+      <div class="hint">${SAVE_HINT}</div>
+    </div>
+    <div class="form-scroll" id="form-scroll"></div>
+    <div class="sticky-save-bar">
+      <button class="btn-secondary" id="form-cancel">cancel</button>
+      <button class="btn-primary" id="form-save">save</button>
+    </div>
+  `;
+  // Remove pane padding so form-pane can fill height cleanly
+  app.style.padding = '0';
+  app.style.overflow = 'hidden';
+  app.replaceChildren(wrapper);
+
+  const scrollEl = wrapper.querySelector('#form-scroll') as HTMLElement;
+  renderItemForm(scrollEl, mode);
+
+  const subEl = wrapper.querySelector('#form-dirty-sub') as HTMLElement;
+  let isDirty = false;
+  const markDirty = () => {
+    if (isDirty) return;
+    isDirty = true;
+    subEl.textContent = 'unsaved · esc to cancel';
+  };
+  const markClean = () => {
+    isDirty = false;
+    subEl.textContent = 'no changes';
+  };
+  scrollEl.addEventListener('input', markDirty, true);
+  scrollEl.addEventListener('change', markDirty, true);
+
+  wrapper.querySelector('#form-cancel')?.addEventListener('click', () => {
+    markClean();
+    (scrollEl.querySelector('#cancel-btn') as HTMLButtonElement | null)?.click();
+  });
+  wrapper.querySelector('#form-save')?.addEventListener('click', () => {
+    markClean();
+    (scrollEl.querySelector('#save-btn') as HTMLButtonElement | null)?.click();
+  });
+}
+
+export const __test__ = { renderFormWrapped };
+
 // ---------------------------------------------------------------------------
 // Pane rendering — delegates to shared popup components
 // ---------------------------------------------------------------------------
@@ -453,10 +518,16 @@ function renderPane(): void {
       // set by the type-selection click handler (which calls setState →
       // renderPane before the URL hash has been updated to include the type).
       state.newType = (route.type as ItemType) ?? state.newType ?? null;
-      renderItemForm(pane, 'add');
+      // Use the form wrapper (sticky bar + header) when a type is already chosen.
+      // Without a type the type-selection screen renders — no sticky bar needed.
+      if (state.newType) {
+        renderFormWrapped(pane, 'add');
+      } else {
+        renderItemForm(pane, 'add');
+      }
       break;
     case 'edit':
-      renderItemForm(pane, 'edit');
+      renderFormWrapped(pane, 'edit');
       break;
     case 'trash':
       renderTrash(pane);