responsiveness fix

frontend/src/components/DashboardPage.jsx

@@ -12,6 +12,7 @@ import {
   LogOut,
   Mail,
   Menu,
+  PanelLeftOpen,
   HandHelping,
   Plug,
   Send,
@@ -173,10 +174,16 @@ export default function DashboardPage() {
     window.location.assign("/login");
   }
 
+  function closeMobileMenu() {
+    if (window.matchMedia("(max-width: 767px)").matches) {
+      setMenuOpen(false);
+    }
+  }
+
   function selectCompanyItem(label) {
     setCompanyActive(label);
     setAgentNav(null);
-    setMenuOpen(false);
+    closeMobileMenu();
     setSheet(null);
   }
 
@@ -193,7 +200,7 @@ export default function DashboardPage() {
       setActive(item);
       setLens("all");
     }
-    setMenuOpen(false);
+    closeMobileMenu();
     setSheet(null);
   }
 
@@ -202,7 +209,7 @@ export default function DashboardPage() {
     setAgentNav(null);
     setActive("Inbox");
     setLens(name);
-    setMenuOpen(false);
+    closeMobileMenu();
     setSheet(null);
   }
 
@@ -211,7 +218,7 @@ export default function DashboardPage() {
     setActive("Inbox");
     setLens("all");
     setAgentNav(actionKey);
-    setMenuOpen(false);
+    closeMobileMenu();
     const compact = window.matchMedia("(max-width: 1199px)").matches;
     setSheet(actionKey === "handoff" || !compact ? null : "agent");
   }
@@ -221,7 +228,7 @@ export default function DashboardPage() {
     setActive("Inbox");
     setLens("all");
     setAgentNav(actionKey);
-    setMenuOpen(false);
+    closeMobileMenu();
     setSheet("agent");
   }
 
@@ -229,7 +236,7 @@ export default function DashboardPage() {
     setCompanyActive(null);
     setActive("Inbox");
     setLens("all");
-    setMenuOpen(false);
+    closeMobileMenu();
   }
 
   function openSheet(next) {
@@ -326,7 +333,13 @@ export default function DashboardPage() {
       <aside className={menuOpen ? "dashboard-sidebar open" : "dashboard-sidebar"}>
         <div className="dashboard-brand-row">
           <Brand />
-          <button aria-label="Close navigation" type="button" onClick={() => setMenuOpen(false)}><X size={19} /></button>
+          <button
+            aria-label={menuOpen ? "Collapse navigation" : "Expand navigation"}
+            type="button"
+            onClick={() => setMenuOpen((open) => !open)}
+          >
+            {menuOpen ? <X size={19} /> : <PanelLeftOpen size={19} />}
+          </button>
         </div>
 
         {!isOrgOnboarding && (

frontend/src/components/HumanHandoff.jsx

@@ -20,6 +20,20 @@ export default function HumanHandoff({ onOpenExternal }) {
           <p className="handoff-page-lead">
             Manage conversations that your Agent has handed over to a Human Owner.
           </p>
+          <div className="handoff-start-help">
+            <strong>Start the first email yourself</strong>
+            <p>
+              From the human mailbox, send a new email to your Gentic address.
+              Put the word handoff first. Then add the customer’s name, their email address, and the subject they should see.
+              Separate those four parts with a dot · , a hyphen - , or a bar |.
+            </p>
+            <p className="handoff-start-example">handoff · Suyash Dixit · suyashdixit091@gmail.com · hello</p>
+            <p>
+              Gentic sends that as a normal first email. The customer only sees “hello”, from your Gentic address.
+              Your From address must be the human email saved on an active handoff rule.
+              When the customer replies to Gentic, that reply is mirrored back to you the same way as any other handoff.
+            </p>
+          </div>
         </div>
       </header>
       <nav className="human-handoff-tabs" aria-label="Human Handoff">

frontend/src/responsive.css

@@ -19,13 +19,13 @@
     padding:16px 8px 12px;
     z-index:12;
   }
-  .dashboard-brand-row { justify-content:center; padding:0; }
+  .dashboard-brand-row { flex-direction:column; justify-content:center; padding:0; gap:6px; }
   .dashboard-brand-row .brand > span:not(.brand-mark),
   .dashboard-compose span,
   .dashboard-sidebar-section h2,
   .dashboard-nav-item em,
   .dashboard-profile > div { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
-  .dashboard-brand-row > button,
+  .dashboard-brand-row > button { display:grid; width:32px; height:32px; color:#c8c3d4; }
   .dashboard-profile > button { display:none; }
   .dashboard-compose { width:44px; min-height:40px; margin:16px auto 0; padding:0; }
   .dashboard-nav-item { justify-content:center; padding:0; gap:0; }
@@ -111,6 +111,50 @@
     max-width:calc(100vw - 48px);
     height:min(78vh,calc(100vh - 32px));
   }
+
+  .dashboard:has(.dashboard-sidebar.open) { grid-template-columns:228px minmax(0,1fr); }
+  .dashboard-sidebar.open {
+    width:228px;
+    padding:var(--space-4) var(--space-3) var(--space-3);
+  }
+  .dashboard-sidebar.open .dashboard-brand-row { flex-direction:row; justify-content:space-between; padding:0 6px 2px; }
+  .dashboard-sidebar.open .dashboard-brand-row .brand > span:not(.brand-mark),
+  .dashboard-sidebar.open .dashboard-compose span,
+  .dashboard-sidebar.open .dashboard-sidebar-section h2,
+  .dashboard-sidebar.open .dashboard-nav-item span,
+  .dashboard-sidebar.open .dashboard-profile > div {
+    position:static;
+    width:auto;
+    height:auto;
+    clip:auto;
+    overflow:visible;
+    margin:0;
+    white-space:nowrap;
+  }
+  .dashboard-sidebar.open .dashboard-nav-item em {
+    position:static;
+    width:auto;
+    min-width:18px;
+    height:18px;
+    clip:auto;
+    overflow:visible;
+    margin-left:auto;
+    padding:0 6px;
+  }
+  .dashboard-sidebar.open .dashboard-sidebar-section h2 { margin:0 0 var(--space-2); padding:0 var(--space-2); }
+  .dashboard-sidebar.open .dashboard-compose {
+    width:calc(100% - 8px);
+    margin:var(--space-4) var(--space-1) 0;
+    padding:0 var(--space-4);
+  }
+  .dashboard-sidebar.open .dashboard-nav-item { justify-content:flex-start; padding:0 var(--space-3); gap:var(--space-3); }
+  .dashboard-sidebar.open .dashboard-nav-item span { position:static; width:auto; height:auto; clip:auto; overflow:visible; flex:1; min-width:0; }
+  .dashboard-sidebar.open .dashboard-profile {
+    grid-template-columns:34px minmax(0,1fr) 31px;
+    padding-left:5px;
+    padding-right:5px;
+  }
+  .dashboard-sidebar.open .dashboard-profile > button { display:grid; }
 }
 
 @media (max-width:767px) {

frontend/src/styles.css

@@ -560,6 +560,10 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
   font-weight:400;
   color:#77758A;
 }
+.handoff-start-help { max-width:640px; margin-top:14px; padding:12px 14px; border:1px solid #e8e5ec; border-radius:12px; background:#fff; }
+.handoff-start-help strong { display:block; color:#171424; font-size:13px; }
+.handoff-start-help p { margin:6px 0 0; color:#77758a; font-size:12px; line-height:1.5; }
+.handoff-start-example { color:#3d3948; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
 .human-handoff-tabs {
   margin-top:24px;
   height:38px;