Optional Senpai integration: "Who's here" side sheet and /api/senpai proxy

- server.js: GET /api/senpai/v1/{locate,xray,characters/<ref>[/timeline],portraits/<ref>} forwarded to
  SENPAI_URL (plain http/https, no dependencies) with SENPAI_TOKEN, X-Senpai-User and the user's horizon
  (furthest chapter with progress, its version and furthest page); off when SENPAI_URL is unset
- progress records "top", the furthest page read in a version, so paging back does not lower the horizon
- /api/me reports senpai: true|false
- reader: Who's here button (key x) with This page / This chapter / So far, character card, timeline with
  jump links, figure outlines on the page; options "only up to this page" and "show unconfirmed"
- read.html?...&p=<index> opens a page; readUrl takes p

public/app.css

@@ -173,3 +173,32 @@ body.nobars #bot { transform: translateY(100%); opacity: 0; pointer-events: none
 }
 #toast.show { opacity: 1; }
 @media (max-width: 560px) { .seg button { padding: 7px 10px; } #bot .btn { padding: 6px 10px; } .wide-only { display: none; } }
+
+/* Who's here (Senpai): a side sheet in the .panel style */
+.panel.sheet {
+  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); max-height: none; border-radius: 0; border-width: 0 0 0 1px;
+  padding: max(6px, env(safe-area-inset-top)) 0 0; display: flex; flex-direction: column; z-index: 25;
+}
+.sheet-head { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; }
+.sheet .seg { display: flex; margin: 2px 12px 8px; }
+.sheet .seg button { flex: 1; padding: 6px 4px; }
+.sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 10px; }
+.sheet-foot { border-top: 1px solid var(--line); padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
+.sheet-foot .check { margin: 4px 0; }
+.who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.who:hover { background: var(--card2); }
+.who .pic { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; background: var(--card2); }
+.pic.none, .big.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
+.who .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+.who .nm.unnamed { color: var(--muted); font-style: italic; font-weight: 400; }
+.sp-chip { flex: none; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; color: var(--muted); }
+.sp-more { margin: 6px; }
+.tier { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 6px 4px; }
+.sp-card { display: flex; gap: 12px; align-items: flex-start; margin: 10px 4px; }
+.sp-card h2 { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
+.sp-card .big { width: 96px; height: 120px; flex: none; border-radius: 10px; object-fit: cover; object-position: top; background: var(--card2); }
+.sp-names { margin: 0; padding-left: 22px; }
+.sp-time a { display: block; padding: 6px; border-radius: 8px; text-decoration: none; }
+.sp-time a:hover { background: var(--card2); }
+.sp-box { position: absolute; border: 3px solid var(--accent); border-radius: 6px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); pointer-events: none; }
+#who.on { border-color: var(--accent); color: #ffb3bd; }