Fixed drawer layering for hidden buttons

.build.hash

@@ -1 +1 @@
-f60aaeaf5d529bc05bbbd41815d65d86e9010dfc-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b
+77b19da169acfc9f13cfa14f2fb425fea6c03ef4-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b

src/App.js

@@ -364,7 +364,7 @@ const cancelLogout = () => {
 }}>
     <div className="flex min-h-[100dvh] flex-col bg-gray-50 text-gray-800">
       {/* Header */}
-      <header className="sticky top-0 z-50 flex items-center justify-between border-b bg-white/95 px-4 py-3 md:px-6 md:py-4 backdrop-blur supports-[backdrop-filter]:bg-white/70">
+      <header className="sticky top-0 z-40 flex items-center justify-between border-b bg-white/95 px-4 py-3 md:px-6 md:py-4 backdrop-blur supports-[backdrop-filter]:bg-white/70">
         <h1 className="text-base md:text-lg font-semibold truncate pr-3">
           AptivaAI - Career Guidance Platform
         </h1>

src/components/ChatDrawer.js

@@ -165,7 +165,7 @@ export default function ChatDrawer({
         <button
           type="button"
           aria-label="Open chat"
-          className="fixed bottom-6 right-6 z-40 flex h-14 w-14
+          className="fixed bottom-6 right-6 z-50 flex h-14 w-14
                      items-center justify-center rounded-full
                      bg-blue-600 text-white shadow-lg
                      hover:bg-blue-700 focus:outline-none"

src/components/MilestoneDrawer.js

@@ -140,7 +140,16 @@ export default function MilestoneDrawer({
   }
 
  return (
-    <div className="fixed inset-y-0 right-0 w-full max-w-sm bg-white shadow-xl z-40 flex flex-col">
+    <>
+      {/* Click-away area: tap to close (sits above page, below the panel) */}
+      <div
+        className="fixed inset-0 z-[55] bg-transparent"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Panel */}
+      <div className="fixed inset-y-0 right-0 z-[60] flex w-[88vw] max-w-[380px] sm:w-[360px] md:w-[420px] flex-col bg-white shadow-xl pb-[env(safe-area-inset-bottom)]">
       {/* Header */}
       <div className="px-4 py-2 border-b flex items-center gap-3">
         <Button size="icon" variant="ghost" onClick={onClose}>
@@ -287,5 +296,6 @@ export default function MilestoneDrawer({
         </CardContent>
       </Card>
     </div>
+    </>
   );
 }