diff --git a/.build.hash b/.build.hash
index d179af5..1ea272f 100644
--- a/.build.hash
+++ b/.build.hash
@@ -1 +1 @@
-f60aaeaf5d529bc05bbbd41815d65d86e9010dfc-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b
+77b19da169acfc9f13cfa14f2fb425fea6c03ef4-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b
diff --git a/src/App.js b/src/App.js
index 056d600..c41bdb1 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/ChatDrawer.js b/src/components/ChatDrawer.js
index 9f4e3d1..53f4f65 100644
--- a/src/components/ChatDrawer.js
+++ b/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"
diff --git a/src/components/MilestoneDrawer.js b/src/components/MilestoneDrawer.js
index d0b8aa3..b067fc7 100644
--- a/src/components/MilestoneDrawer.js
+++ b/src/components/MilestoneDrawer.js
@@ -139,8 +139,17 @@ 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">
+ return (
+    <>
+      {/* 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>
+    </>
   );
 }