feat(reader): EPUB highlights & notes — selection popover, overlayer rendering, annotations drawer

Phase 3 (EPUB half) of the reader redesign:

- Select text in a reflowable book → floating glass popover at the
  selection (5 colors, note, copy). Clicking a color creates the
  highlight via POST /api/media-items/:id/highlights, anchored by the
  foliate range CFI (epubcfi_start) with percentage position.
- Highlights render through foliate's overlayer pipeline: draw-
  annotation draws Overlayer.highlight with the stored color,
  create-overlay re-adds persisted highlights as sections load,
  show-annotation opens the edit popover when a highlight is clicked
  (recolor, edit note, copy, delete).
- Backend: highlight create/update accept epubcfi_start/end,
  note_text, and percentage fields; position validation relaxed
  (CFIs exceed the old 100-char cap); PUT routes through
  AnnotationService.SaveHighlight so edits get dedup/LWW treatment
  and actually persist note_text (the plain query can't).
- Bookmarks drawer becomes the Annotations drawer with tabs:
  Highlights (color-bar list, note previews, jump/edit/delete),
  Notes (add note at current position, list, delete — backed by the
  existing notes API), and Bookmarks (unchanged behavior).
- Popover dismissed on outside click, collapsed selection, page
  navigation, or Esc (new top-priority Esc branch).

web/static/input.css

@@ -907,6 +907,90 @@
     border-color: #3b82f6;
   }
 
+  /* Selection popover & annotations drawer widgets */
+  .reader-popover {
+    position: fixed;
+    transform: translate(-50%, calc(-100% - 10px));
+    background-color: color-mix(in srgb, var(--bg-primary) 85%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.3);
+    backdrop-filter: blur(16px) saturate(1.3);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+    padding: 0.5rem 0.625rem;
+    z-index: 60;
+  }
+  .color-dot {
+    width: 1.375rem;
+    height: 1.375rem;
+    border-radius: 9999px;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    transition: transform 0.12s ease;
+  }
+  .color-dot:hover {
+    transform: scale(1.15);
+  }
+  .color-dot.selected {
+    border-color: #ffffff;
+    box-shadow: 0 0 0 2px #3b82f6;
+  }
+  .reader-popover-btn {
+    padding: 0.3rem;
+    border-radius: 0.375rem;
+    color: inherit;
+  }
+  .reader-popover-btn:hover {
+    background-color: color-mix(in srgb, currentColor 13%, transparent);
+  }
+  .reader-popover-btn.danger:hover {
+    background-color: rgba(153, 27, 27, 0.6);
+  }
+  .reader-note-input {
+    width: 100%;
+    resize: vertical;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    color: inherit;
+    background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  }
+  .reader-note-input:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 1px;
+  }
+  .reader-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .reader-tabs button {
+    flex: 1;
+    padding: 0.5rem 0.25rem;
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+  }
+  .reader-tabs button.active {
+    color: var(--text-primary);
+    border-bottom-color: #3b82f6;
+  }
+  .reader-tab-count {
+    display: inline-block;
+    min-width: 1.25rem;
+    margin-left: 0.25rem;
+    padding: 0 0.25rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    line-height: 1.1rem;
+    background-color: color-mix(in srgb, currentColor 13%, transparent);
+  }
+  .reader-hl-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   /* ---------- Series stacked covers ---------- */
   .stacked-covers {
     position: relative;