@bobfrankston/mailx 1.0.394 → 1.0.399

package/client/components/message-list.js

@@ -24,15 +24,46 @@ let touchWasScroll = false;
 // (text columns default asc, date defaults desc).
 let currentSort = "date";
 let currentSortDir = "desc";
-/** Atomic focus: update shared state + notify viewer in one call.
- *  First slice of S56 (row-objects-own-preview) — consolidates the two
- *  parallel selection paths (state.select + onMessageSelect) so the eventual
- *  Row-class migration touches exactly one call site. The viewer's `gen`
- *  token still cancels stale fetches; this just makes the transition
- *  indivisible at the caller level. */
+/** S56 refactor slice — per-row focus/unfocus.
+ *
+ *  Every rendered message row has an associated Row record tracking the DOM
+ *  element + account/msg pair. `focusRow` runs the atomic transition:
+ *
+ *    1. unfocus the previously-focused row (clears `.selected` class)
+ *    2. mark the new row `.selected`
+ *    3. update shared state.selected + notify viewer
+ *
+ *  The viewer's `showMessageGeneration` token still cancels stale body
+ *  fetches during the transition — that's the "async cancellation" piece of
+ *  S56. The "atomic DOM transition" piece is now owned here.
+ *
+ *  Full abort-signal plumbing through getMessage → fetchMessageBody is a
+ *  separate follow-up; for now the gen token does the job. */
+let currentFocusedRow = null;
+function focusRow(row, accountId, msg) {
+    if (currentFocusedRow && currentFocusedRow !== row) {
+        // Unfocus the previous atomically — clearing .selected AND
+        // triggering the viewer's stale-fetch cancel (via the bump inside
+        // the next showMessage() call).
+        currentFocusedRow.classList.remove("selected");
+    }
+    if (!row.classList.contains("selected"))
+        row.classList.add("selected");
+    currentFocusedRow = row;
+    state.select(msg);
+    onMessageSelect(accountId, msg.uid, msg.folderId);
+}
+/** Back-compat shim — some call sites still use `focusMessage(accountId, msg)`
+ *  without a DOM row (e.g. thread-popup click). Fall back to the previous
+ *  behavior (state + viewer only) so nothing regresses. */
 function focusMessage(accountId, msg) {
     state.select(msg);
     onMessageSelect(accountId, msg.uid, msg.folderId);
+    // Clear the focused-row reference since we don't have a DOM row here
+    // — the next row click will unfocus whatever was selected anyway.
+    if (currentFocusedRow)
+        currentFocusedRow.classList.remove("selected");
+    currentFocusedRow = null;
 }
 /** Flip the "not-downloaded" indicator off for rows whose bodies just cached.
  *  Called from the bodyCached service event — covers both background prefetch
@@ -64,6 +95,139 @@ function clearSelection() {
     const body = document.getElementById("ml-body");
     if (body)
         body.querySelectorAll(".ml-row.selected").forEach(r => r.classList.remove("selected"));
+    // S56 seam: the focused-row invariant is "the Row whose .selected is
+    // currently mine". clearSelection wipes all .selected, so the invariant
+    // would break if we kept a stale pointer.
+    currentFocusedRow = null;
+}
+/** Exit multi-select mode (entered via touch long-press). Clears selection
+ *  and the sticky body flag so subsequent taps open messages again. */
+function exitMultiSelect() {
+    const body = document.getElementById("ml-body");
+    if (!body?.classList.contains("multi-select-on"))
+        return;
+    body.classList.remove("multi-select-on");
+    clearSelection();
+    updateBulkBar();
+}
+/** Refresh the bulk-actions bar visibility + "N selected" label. Called
+ *  whenever selection or mode changes. Visible either when 2+ rows are
+ *  selected (desktop Ctrl/Shift-click multi-selection) OR when touch
+ *  multi-select mode is active (even with a single row, so the user sees
+ *  the bar as the mode indicator). */
+function updateBulkBar() {
+    const body = document.getElementById("ml-body");
+    const bar = document.getElementById("ml-bulkbar");
+    const count = document.getElementById("ml-bulk-count");
+    if (!body || !bar || !count)
+        return;
+    const active = body.classList.contains("multi-select-on");
+    const n = body.querySelectorAll(".ml-row.selected").length;
+    if (n >= 2 || (active && n > 0)) {
+        bar.hidden = false;
+        count.textContent = `${n} selected`;
+    }
+    else {
+        bar.hidden = true;
+    }
+}
+// Escape key + click-outside-list exit multi-select mode. Attached once
+// (idempotent because document only has one listener scope per handler).
+if (!window.__mailxMultiSelectWired) {
+    window.__mailxMultiSelectWired = true;
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape")
+            exitMultiSelect();
+    });
+    document.addEventListener("pointerdown", (e) => {
+        const body = document.getElementById("ml-body");
+        if (!body?.classList.contains("multi-select-on"))
+            return;
+        const target = e.target;
+        // A tap on a row is handled by the row's own click listener; only
+        // exit when the tap is on neutral ground (outside the list entirely
+        // and not on the bulk bar).
+        if (!target.closest(".ml-row") && !target.closest(".ml-bulkbar"))
+            exitMultiSelect();
+    }, true);
+    // Wire bulk-bar buttons — each delegates to the single-message handlers
+    // but iterates over every .ml-row.selected in the body.
+    document.addEventListener("click", async (e) => {
+        const target = e.target;
+        if (target.closest("#ml-bulk-cancel")) {
+            exitMultiSelect();
+            return;
+        }
+        const btn = target.closest(".ml-bulk-btn");
+        if (!btn)
+            return;
+        const op = btn.dataset.bulk;
+        const body = document.getElementById("ml-body");
+        if (!body?.classList.contains("multi-select-on"))
+            return;
+        const selected = getSelectedMessages();
+        if (selected.length === 0)
+            return;
+        try {
+            if (op === "delete") {
+                // Delegate to the existing Del-key handler so the same
+                // tombstone/undo logic runs for bulk deletes.
+                document.dispatchEvent(new CustomEvent("mailx-delete"));
+            }
+            else if (op === "flag") {
+                for (const m of selected) {
+                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
+                    if (!row)
+                        continue;
+                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
+                    if (!msgData)
+                        continue;
+                    const isFlagged = msgData.flags?.includes("\\Flagged");
+                    const newFlags = isFlagged
+                        ? msgData.flags.filter((f) => f !== "\\Flagged")
+                        : [...(msgData.flags || []), "\\Flagged"];
+                    await updateFlags(m.accountId, m.uid, newFlags);
+                    msgData.flags = newFlags;
+                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
+                    row.classList.toggle("flagged");
+                }
+            }
+            else if (op === "markread") {
+                for (const m of selected) {
+                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
+                    if (!row)
+                        continue;
+                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
+                    if (!msgData)
+                        continue;
+                    if (msgData.flags?.includes("\\Seen"))
+                        continue;
+                    const newFlags = [...(msgData.flags || []), "\\Seen"];
+                    await updateFlags(m.accountId, m.uid, newFlags);
+                    msgData.flags = newFlags;
+                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
+                    row.classList.remove("unread");
+                }
+            }
+            else if (op === "move") {
+                // Use the first selection's account/folder for the picker scope.
+                const { accountId, folderId } = selected[0];
+                const pick = await pickFolder(accountId, { excludeFolderIds: [folderId] });
+                if (!pick)
+                    return;
+                const uids = selected.map(s => s.uid);
+                await apiMoveMessages(accountId, uids, pick.folderId);
+                state.removeMessages(uids.map(u => ({ accountId, uid: u })));
+            }
+            else if (op === "spam") {
+                document.getElementById("btn-spam")?.click();
+            }
+            exitMultiSelect();
+        }
+        catch (err) {
+            alert(`Bulk ${op} failed: ${err.message || err}`);
+        }
+    });
 }
 function selectRange(from, to) {
     const body = document.getElementById("ml-body");
@@ -352,6 +516,10 @@ export async function loadSearchResults(query, scope = "all", accountId = "", fo
 export async function loadMessages(accountId, folderId, page = 1, specialUse = "", autoSelect = true) {
     searchMode = false;
     unifiedMode = false;
+    // Folder switch clears any in-progress multi-select — carrying a "3
+    // selected" state across folders would lie about what rows the bulk
+    // buttons would act on.
+    exitMultiSelect();
     // specialUse is either the DB tag ("sent"/"drafts"/"outbox") or the
     // folder path lowercased (folder-tree fallback when tag is missing — common
     // on Dovecot which doesn't advertise \Sent). Match both cases.
@@ -636,20 +804,35 @@ function appendMessages(body, accountId, items) {
                 touchWasScroll = false;
                 return;
             }
+            // Multi-select mode (entered via long-press on touch): taps toggle
+            // rows instead of opening messages. Exit mode when the user taps
+            // outside any row or presses Escape (handled at the body level).
+            const body = row.parentElement;
+            if (body?.classList.contains("multi-select-on")) {
+                row.classList.toggle("selected");
+                lastClickedRow = row;
+                updateBulkBar();
+                return;
+            }
             if (e.shiftKey && lastClickedRow) {
                 clearSelection();
                 selectRange(lastClickedRow, row);
+                lastClickedRow = row;
+                row.classList.remove("unread");
+                focusMessage(msgAccountId, msg);
             }
             else if (e.ctrlKey || e.metaKey) {
                 row.classList.toggle("selected");
+                lastClickedRow = row;
             }
             else {
+                // Atomic unfocus-previous + focus-this.
                 clearSelection();
-                row.classList.add("selected");
+                focusRow(row, msgAccountId, msg);
+                lastClickedRow = row;
+                row.classList.remove("unread");
             }
-            lastClickedRow = row;
-            row.classList.remove("unread");
-            focusMessage(msgAccountId, msg);
+            updateBulkBar();
         });
         // Q64: double-click → pop out the message in a floating overlay so
         // the user can read it without losing the selected list context.
@@ -700,12 +883,31 @@ function appendMessages(body, accountId, items) {
                 clearTimeout(longPressTimer);
             longPressTimer = setTimeout(() => {
                 longPressTimer = null;
-                // Synthesize a contextmenu event so the existing handler below
-                // owns all the menu logic — no per-event duplication.
-                const ev = new MouseEvent("contextmenu", {
-                    clientX: cx, clientY: cy, bubbles: true, cancelable: true,
-                });
-                row.dispatchEvent(ev);
+                // Long-press semantics:
+                //   - If the list is already in multi-select mode, toggle this
+                //     row's selected state (so the user can extend a selection
+                //     without needing a second long-press-and-menu dance).
+                //   - Otherwise enter multi-select mode: mark THIS row selected
+                //     and add a sticky class on the body so future taps toggle
+                //     instead of opening messages. Tap elsewhere or press
+                //     Escape to exit.
+                const body = row.parentElement;
+                const alreadyMulti = body?.classList.contains("multi-select-on");
+                if (alreadyMulti) {
+                    row.classList.toggle("selected");
+                }
+                else {
+                    clearSelection();
+                    row.classList.add("selected");
+                    body?.classList.add("multi-select-on");
+                }
+                lastClickedRow = row;
+                updateBulkBar();
+                // Haptic hint if the platform supports it (Android WebView does).
+                try {
+                    navigator.vibrate?.(20);
+                }
+                catch { /* */ }
             }, LONG_PRESS_MS);
         }, { passive: true });
         const cancelLongPress = () => {
@@ -800,6 +1002,11 @@ function appendMessages(body, accountId, items) {
                     action: () => document.dispatchEvent(new CustomEvent("mailx-delete")),
                 },
                 { label: "", action: () => { }, separator: true },
+                {
+                    label: "⚠ Mark as spam",
+                    action: () => document.getElementById("btn-spam")?.click(),
+                },
+                { label: "", action: () => { }, separator: true },
                 {
                     label: "Copy Message-ID",
                     action: async () => {

package/client/compose/compose.js

@@ -361,6 +361,30 @@ function applyInit(init) {
         if (ccBtn)
             ccBtn.classList.add("active");
     }
+    else if (init.to && init.to.length === 1) {
+        // Q49: heuristic auto-expand — when replying/composing to a single
+        // recipient, check sent-history. If the user has previously Cc'd
+        // anyone on a message to this recipient, expand the Cc row (empty,
+        // just visible) so they're prompted to fill it. Fire-and-forget; if
+        // the service call fails or the user starts typing Cc manually
+        // before it resolves, the answer doesn't matter.
+        const firstEmail = init.to[0]?.address || "";
+        if (firstEmail) {
+            import("../lib/api-client.js").then(({ hasCcHistoryTo }) => hasCcHistoryTo(firstEmail)
+                .then(res => {
+                if (!res?.hasCc)
+                    return;
+                const ccRowEl = document.getElementById("compose-cc-row");
+                const ccBtn = document.getElementById("btn-toggle-cc");
+                // Only expand if user hasn't already interacted
+                if (ccRowEl?.hidden && !ccInput.value) {
+                    ccRowEl.hidden = false;
+                    ccBtn?.classList.add("active");
+                }
+            })
+                .catch(() => { }));
+        }
+    }
     // C42: append the account's signature (if configured) BEFORE rendering
     // the body. For new mode: just signature. For reply/forward: appended
     // after the quoted block. Drafts are skipped — the signature is already

package/client/index.html

@@ -13,7 +13,8 @@
 <body>
     <header class="toolbar">
         <div class="toolbar-left">
-            <button class="tb-btn" id="btn-menu" title="Folders" hidden>☰</button>
+            <button class="tb-btn" id="btn-menu" title="Menu / rail" hidden>☰</button>
+            <button class="tb-btn" id="btn-folder-toggle" title="Show / hide folders" hidden>📁</button>
             <button class="tb-btn" id="btn-compose" title="Compose (Ctrl+N)">
                 <span class="tb-icon">✏</span><span class="tb-label"> Compose</span>
             </button>
@@ -22,14 +23,14 @@
             <div class="tb-menu" id="view-menu">
                 <button class="tb-btn" id="btn-view">View</button>
                 <div class="tb-menu-dropdown" id="view-dropdown" hidden>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-two-line"> Two-line view</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-threaded"> Group by thread</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-thread-filter"> Only this conversation</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
+                    <label class="tb-menu-item" title="Stack From + Subject on two lines per row, date to the right — denser on narrow windows"><input type="checkbox" id="opt-two-line"> Two-line view</label>
+                    <label class="tb-menu-item" title="Show the reading pane to the right of the message list"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
+                    <label class="tb-menu-item" title="Show a short body-text preview (first ~80 chars) beneath each row's subject"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
+                    <label class="tb-menu-item" title="Collapse reply chains to one row showing the newest message; a pill shows thread size"><input type="checkbox" id="opt-threaded"> Group by thread</label>
+                    <label class="tb-menu-item" title="Filter the list to rows sharing the selected message's thread (set selection first)"><input type="checkbox" id="opt-thread-filter"> Only this conversation</label>
+                    <label class="tb-menu-item" title="Show only flagged (★) messages in the list"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                    <label class="tb-menu-item" title="Show unread/total counts next to each folder in the tree"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
+                    <label class="tb-menu-item" title="Show the right-side calendar/tasks sidebar (Thunderbird-Lightning style)"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">
@@ -44,7 +45,7 @@
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="quill" id="opt-editor-quill" checked> Quill</label>
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="tiptap" id="opt-editor-tiptap"> tiptap</label>
                     <hr class="tb-menu-sep">
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
+                    <label class="tb-menu-item" title="Ghost-text completions while composing — Ollama / Claude / OpenAI back-end, off by default"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
                     <label class="tb-menu-item" title="Right-click in message body → Translate"><input type="checkbox" id="opt-ai-translate"> AI translate (off by default)</label>
                     <label class="tb-menu-item" title="Right-click in compose editor → Proofread (when wired)"><input type="checkbox" id="opt-ai-proofread"> AI proofread (off by default)</label>
                     <hr class="tb-menu-sep">
@@ -122,6 +123,16 @@
                 <span class="ml-col ml-col-date ml-col-sortable" data-sort="date">Date</span>
                 <span class="ml-col ml-col-subject ml-col-sortable" data-sort="subject">Subject</span>
             </div>
+            <div class="ml-bulkbar" id="ml-bulkbar" hidden>
+                <button type="button" class="ml-bulk-cancel" id="ml-bulk-cancel" title="Exit multi-select (Esc)">✕</button>
+                <span class="ml-bulk-count" id="ml-bulk-count">0 selected</span>
+                <span style="flex:1"></span>
+                <button type="button" class="ml-bulk-btn" data-bulk="markread" title="Mark read">◉</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="flag" title="Flag">⚑</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="move" title="Move to folder…">➜</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="spam" title="Mark as spam">⚠</button>
+                <button type="button" class="ml-bulk-btn ml-bulk-danger" data-bulk="delete" title="Delete (Del)">🗑</button>
+            </div>
             <div class="ml-body" id="ml-body">
                 <div class="ml-empty">Select a folder to view messages</div>
             </div>

package/client/lib/api-client.js

@@ -191,6 +191,9 @@ export function cancelQueuedOutgoing(p) {
 export function searchContacts(query) {
     return ipc().searchContacts(query);
 }
+export function hasCcHistoryTo(email) {
+    return ipc().hasCcHistoryTo(email);
+}
 export function listContacts(query, page = 1, pageSize = 100) {
     return ipc().listContacts(query, page, pageSize);
 }

package/client/lib/mailxapi.js

@@ -181,6 +181,7 @@
         cancelQueuedOutgoing: function(p) { return callNode("cancelQueuedOutgoing", { path: p }); },
         reauthenticate: function(accountId) { return callNode("reauthenticate", { accountId: accountId }); },
         reauthGoogleScopes: function() { return callNode("reauthGoogleScopes"); },
+        hasCcHistoryTo: function(email) { return callNode("hasCcHistoryTo", { email: email }); },
 
         // Bulk operations
         deleteMessages: function(accountId, uids) {

package/client/styles/components.css

@@ -900,6 +900,206 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
    list empty when the selection is a singleton thread. */
 .ml-row.thread-filter-hidden { display: none; }
 
+/* Per-row ⋮ touch-menu button removed 2026-04-24 — user feedback: "nice
+   idea but better when we have a second-stage plan strategy". Touch users
+   still reach the menu via long-press → multi-select → bulk-bar, or by
+   using a stylus/mouse for contextmenu. Revisit when we've decided what
+   additional per-message actions belong here. */
+
+/* ── Alarm popup (P17 / Q104) ── */
+/* Fullscreen backdrop + centered panel; mirrors .mailx-modal* patterns but
+   kept in its own namespace so alarm behavior (snooze/dismiss) can evolve
+   without dragging the whole modal system along. */
+.alarm-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 9000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.alarm-panel {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+    min-width: 380px;
+    max-width: 560px;
+    width: 90vw;
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh;
+}
+.alarm-head {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm) var(--gap-md);
+    border-bottom: 1px solid var(--color-border);
+    font-weight: 600;
+}
+.alarm-icon { font-size: 1.4em; }
+.alarm-title { flex: 1; }
+.alarm-close {
+    border: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 1.4em;
+    line-height: 1;
+    padding: 0 0.4em;
+}
+.alarm-close:hover { color: var(--color-text); }
+.alarm-list {
+    padding: var(--gap-sm) var(--gap-md);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-xs);
+}
+.alarm-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);
+}
+.alarm-row:last-child { border-bottom: none; }
+.alarm-row-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    min-width: 0;
+}
+.alarm-row-kind { font-size: 1.1em; }
+.alarm-row-title {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+.alarm-row-when {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.alarm-row-actions { display: flex; gap: var(--gap-xs); }
+.alarm-row-link,
+.alarm-row-dismiss {
+    border: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 1em;
+    padding: 0 0.3em;
+    border-radius: 3px;
+}
+.alarm-row-link:hover,
+.alarm-row-dismiss:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text);
+}
+.alarm-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm) var(--gap-md);
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg-toolbar);
+    border-radius: 0 0 8px 8px;
+}
+.alarm-snooze-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+}
+.alarm-snooze-sel {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.25em 0.5em;
+    font-size: var(--font-size-sm);
+}
+.alarm-btn {
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0.4em 1em;
+    border-radius: 4px;
+    font-size: var(--font-size-sm);
+}
+.alarm-btn:hover { background: var(--color-bg-hover); }
+.alarm-btn-primary {
+    background: var(--color-brand, oklch(0.65 0.14 250));
+    color: #fff;
+    border-color: var(--color-brand, oklch(0.65 0.14 250));
+}
+.alarm-btn-primary:hover { filter: brightness(1.1); }
+
+/* Bulk-actions bar — appears over the list header when multi-select mode is
+   active. Shows "N selected" + Mark-read / Flag / Move / Spam / Delete
+   buttons + Cancel. Kept in sibling position to ml-header so it uses the
+   same horizontal space. */
+.ml-bulkbar {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) var(--gap-sm);
+    background: var(--color-brand, oklch(0.65 0.14 250));
+    color: #fff;
+    font-size: var(--font-size-sm);
+    border-bottom: 1px solid var(--color-border);
+    grid-column: 1 / -1;
+}
+.ml-bulk-count { font-weight: 500; font-variant-numeric: tabular-nums; }
+.ml-bulk-cancel,
+.ml-bulk-btn {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0.25em 0.55em;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+.ml-bulk-cancel:hover,
+.ml-bulk-btn:hover {
+    background: oklch(1 0 0 / 0.15);
+}
+.ml-bulk-btn.ml-bulk-danger:hover {
+    background: oklch(0.65 0.22 25 / 0.4);
+}
+
+/* Multi-select mode (entered by long-press on touch or Ctrl/Shift click on
+   desktop). Add a left-edge accent bar so it's visually clear the list is
+   in selection mode, not navigation mode. */
+
+/* Multi-select mode (entered by long-press on touch or Ctrl/Shift click on
+   desktop). Add a left-edge accent bar so it's visually clear the list is
+   in selection mode, not navigation mode. */
+#ml-body.multi-select-on .ml-row::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--color-brand, oklch(0.65 0.14 250));
+    opacity: 0.25;
+}
+#ml-body.multi-select-on .ml-row.selected::before {
+    opacity: 1;
+}
+
 /* Info banner inside a modal — used by the Add-contact dialog to surface
    "already in address book" duplicate notices. Amber tone so it reads as
    "heads up" not "error". */