responsiveness fix

frontend/src/components/MailboxView.jsx

@@ -11,6 +11,7 @@ import {
   RefreshCw,
   Search,
   Settings,
+  Sparkles,
   Sun,
   Tag,
   Users,
@@ -37,6 +38,8 @@ import MailRow from "./MailRow";
 import MailboxEmptyState from "./MailboxEmptyState";
 import MailboxSelectionBar from "./MailboxSelectionBar";
 import StickyNotesPanel from "./StickyNotesPanel";
+import { useShellMode } from "../shellMode";
+import { shellTitle } from "./MobileChrome";
 import {
   categoryCounts,
   emailCategory,
@@ -118,6 +121,7 @@ export default function MailboxView({
   onStats,
 }) {
   const token = sessionStorage.getItem("agmail_access_token");
+  const { sheet, setSheet } = useShellMode();
   const [emails, setEmails] = useState([]);
   const [nextCursor, setNextCursor] = useState(null);
   const [total, setTotal] = useState(0);
@@ -679,6 +683,14 @@ export default function MailboxView({
           <button className="workspace-ask agent-action" type="button" onClick={() => runQuickAction("summarize")}>
             <AgentSpark /> Ask Agent
           </button>
+          <button
+            className="shell-agent-toggle"
+            type="button"
+            aria-label="Open AG Agent"
+            onClick={() => setSheet(sheet === "agent" ? null : "agent")}
+          >
+            <Sparkles size={16} />
+          </button>
         </div>
         <div className="workspace-zone workspace-zone-account">
           <button type="button" className="workspace-icon" aria-label="Refresh" onClick={load}><RefreshCw size={16} /></button>
@@ -840,7 +852,7 @@ export default function MailboxView({
                 </div>
               )}
 
-              <div className={`mailbox-rows${isEmpty ? " is-empty" : ""}`} aria-busy={status.loading}>
+              <div className={`mailbox-rows${isEmpty ? " is-empty" : ""}${selectedCount > 0 ? " selecting" : ""}`} aria-busy={status.loading}>
                 {status.loading && <div className="mailbox-state loading">Loading messages…</div>}
                 {status.error && (
                   <div className="mailbox-state error" role="alert">
@@ -916,7 +928,15 @@ export default function MailboxView({
           </div>
         </div>
 
-        <aside className="mailbox-rail">
+        <aside className={`mailbox-rail${sheet ? ` shell-${sheet}` : ""}`}>
+          {(sheet === "agent" || sheet === "calendar" || sheet === "notes") && (
+            <div className="shell-sheet-bar">
+              <button type="button" aria-label="Back" onClick={() => setSheet(null)}>
+                <ChevronLeft size={18} strokeWidth={1.75} />
+              </button>
+              <strong>{shellTitle(sheet)}</strong>
+            </div>
+          )}
           <AgAgentPanel
             account={account}
             emails={listedEmails}