Mail: select several messages (long press, Ctrl/Cmd or Shift click, or the select button) to mark read or unread, flag, archive, move or delete

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaC9HmtHMdRP8dAbN4wAKj

public/style.css

@@ -881,3 +881,15 @@ kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); bo
 .mrow.swl.swgo { box-shadow: var(--sww, 100vw) 0 0 #b3261e; }
 .mrow.swl::after, .mrow.swr::after { content: attr(data-sw); position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: #fff; font-weight: 600; padding: 0 20px; white-space: nowrap; }
 .mrow.swl::after { left: 100%; } .mrow.swr::after { right: 100%; }
+
+/* Mail: choosing several messages */
+.mchk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); flex: none; margin-top: 1px; position: relative; }
+.mchk.on { background: var(--accent); border-color: var(--accent); }
+.mchk.on::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--accent-t); border-width: 0 2px 2px 0; transform: rotate(45deg); }
+.mrow.picked { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
+.mselbar { position: sticky; bottom: 8px; z-index: 4; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; margin: 10px 0 0; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
+.msbtop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .msbtop .btn { min-height: 36px; }
+.msbrow { display: flex; gap: 6px; flex-wrap: wrap; } .msb { min-height: 40px; flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; } .msb svg { width: 18px; height: 18px; margin-right: 4px; }
+.msb:disabled { opacity: .45; }
+body.mselecting .mrow { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
+.mflag { color: var(--danger); } .mflag svg { fill: currentColor; }