Bundled Roundcube webmail in the Mail tab, optional Microsoft 365 OAuth sign-in, collapsible menu

- docker-compose: roundcube service with inline config (Gmail/iCloud/Yahoo presets, framing allowed, persistent key); only reachable through the hub
- hub passes /webmail/ through to Roundcube behind the passkey sign-in; Microsoft's sign-in page opens in the whole window and returns to the Mail tab
- M365_* settings add 'Login with Microsoft 365' (README has the Entra app registration steps)
- Side menu collapses to icons or hides completely (remembered per device, Ctrl/Cmd+B)
- tools/webmail-test.js

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/style.css

@@ -318,3 +318,28 @@ body:not(.editing) #view { padding-top: 8px; }
 .mact .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
 .mact .btn svg { width: 20px; height: 20px; }
 .mact .btn:not(.ghost) { background: var(--mc); color: #fff; }
+
+/* Collapsible menu (tablet / computer) */
+.navtoggle { display: none; }
+.navcol { display: none; }
+@media (min-width: 768px) {
+  #nav { overflow-y: auto; scrollbar-width: none; }
+  .navtoggle { display: grid; }
+  body.nav-hidden #nav { display: none; }
+  body.nav-hidden #navbar { padding-left: 12px; }
+}
+@media (min-width: 1024px) {
+  .navcol { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 0; background: none; border-radius: 12px; color: var(--muted); font-size: 14px; }
+  .navcol:hover { background: var(--panel2); color: var(--text); }
+  .navcol svg { width: 20px; height: 20px; }
+  body.nav-mini #nav { width: 76px; padding: calc(var(--sat) + 12px) 0 12px var(--sal); }
+  body.nav-mini #nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 0; font-size: 10px; min-height: 50px; border-radius: 0; flex: none; }
+  body.nav-mini #nav a svg { width: 22px; height: 22px; }
+  body.nav-mini #nav a.on { background: none; }
+  body.nav-mini .brand { display: block; width: 36px; height: 36px; margin: 4px auto 12px; }
+  body.nav-mini .brand img { width: 36px; height: 36px; border-radius: 10px; }
+  body.nav-mini .brand span { display: none; }
+  body.nav-mini .navcol { flex-direction: column; justify-content: center; gap: 2px; padding: 0; min-height: 56px; font-size: 11px; }
+  body.nav-mini .navcol svg { transform: rotate(180deg); }
+  body.nav-mini .navcol span { display: none; }
+}