refactor(space): refine end session modal motion

src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx

@@ -36,21 +36,27 @@ export const EndSessionConfirmModal = ({
 
   const endSessionCopy = copy.space.endSession;
   const trimmedGoal = currentGoal.trim() || copy.space.focusHud.goalFallback;
+  
   const activeStage = completionResult
     ? completionResult.completionSource === 'manual-end'
       ? 'result-saved'
       : 'result-success'
     : stage;
+    
   const focusedMinutes = completionResult
     ? formatFocusedMinutes(completionResult.focusedSeconds)
     : 0;
+    
   const hasThoughts = Boolean(completionResult && completionResult.thoughts.length > 0);
 
   useEffect(() => {
     if (!open) {
-      setStage('decision');
+      // Add a slight delay before resetting state so the fade-out animation can finish smoothly
-      setIsSubmitting(false);
+      const timer = setTimeout(() => {
-      return;
+        setStage('decision');
+        setIsSubmitting(false);
+      }, 700);
+      return () => clearTimeout(timer);
     }
 
     const allowEscape = !isSubmitting && !completionResult;
@@ -67,10 +73,7 @@ export const EndSessionConfirmModal = ({
   }, [completionResult, isSubmitting, onClose, open]);
 
   const handleFinishHere = async () => {
-    if (isSubmitting) {
+    if (isSubmitting) return;
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       await onFinishHere();
@@ -80,10 +83,7 @@ export const EndSessionConfirmModal = ({
   };
 
   const handleSaveAndReturn = async () => {
-    if (isSubmitting) {
+    if (isSubmitting) return;
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       await onSaveAndReturn();
@@ -95,59 +95,70 @@ export const EndSessionConfirmModal = ({
   return (
     <div
       className={cn(
-        'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
+        'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4',
-        open ? 'opacity-100' : 'opacity-0',
       )}
       aria-hidden={!open}
     >
+      {/* Abyssal Backdrop: Direct filter animation to prevent WebKit blur pop-in */}
       <div
         className={cn(
-          'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
+          'absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] transform-gpu',
-          open ? 'opacity-100' : 'opacity-0',
+          open ? 'bg-black/80 backdrop-blur-[40px]' : 'bg-transparent backdrop-blur-none',
         )}
-      />
+      >
+        <div className={cn("absolute inset-0 bg-[url('/noise.png')] mix-blend-overlay pointer-events-none transition-opacity duration-1000", open ? "opacity-20" : "opacity-0")} />
+        <div className={cn("absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_70%)] pointer-events-none transition-opacity duration-1000", open ? "opacity-100" : "opacity-0")} />
+      </div>
 
       <div
         className={cn(
-          'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
+          'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]',
-          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
+          'max-h-[100dvh] overflow-y-auto overscroll-y-contain py-12 sm:py-16 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
+          open ? 'pointer-events-auto translate-y-0 scale-100 opacity-100' : 'pointer-events-none translate-y-12 scale-[0.98] opacity-0',
         )}
       >
         {activeStage === 'decision' ? (
-          <div className="flex w-full animate-fade-in-up flex-col items-center">
+          <div className="flex w-full flex-col items-center animate-in fade-in slide-in-from-bottom-8 duration-1000">
-            <p className="mb-6 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
+            <p className="mb-6 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 drop-shadow-sm">
               {endSessionCopy.decision.eyebrow}
             </p>
             <h3
               id="end-session-title"
-              className="mb-10 text-3xl font-light leading-tight tracking-tight text-white md:text-5xl"
+              className="mb-12 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
             >
               {endSessionCopy.decision.title}
             </h3>
 
-            <div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
+            {/* Volumetric Card */}
-              <p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
+            <div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
+              <p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
                 {endSessionCopy.decision.goalLabel}
               </p>
-              <p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
+              <p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
             </div>
 
             <div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
+              {/* Primary CTA (The Pearl) */}
               <button
                 type="button"
                 onClick={handleFinishHere}
                 disabled={isSubmitting}
-                className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
+                className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
               >
-                {isSubmitting
+                <div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-                  ? copy.space.goalComplete.finishPending
+                <span className="relative z-10">
-                  : endSessionCopy.decision.finishedAnswer}
+                  {isSubmitting
+                    ? copy.space.goalComplete.finishPending
+                    : endSessionCopy.decision.finishedAnswer}
+                </span>
               </button>
+              
+              {/* Secondary CTA (Ghost Button) */}
               <button
                 type="button"
                 onClick={() => setStage('unfinished-confirm')}
                 disabled={isSubmitting}
-                className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
+                className="flex-1 rounded-full border border-white/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
               >
                 {endSessionCopy.decision.unfinishedAnswer}
               </button>
@@ -157,7 +168,7 @@ export const EndSessionConfirmModal = ({
               type="button"
               onClick={onClose}
               disabled={isSubmitting}
-              className="mt-8 text-[12px] font-medium text-white/30 underline decoration-transparent underline-offset-4 transition-colors hover:text-white/70 hover:decoration-white/30 disabled:opacity-50"
+              className="mt-10 text-[11px] font-light uppercase tracking-widest text-white/20 transition-all duration-300 hover:text-white/60 disabled:opacity-50"
             >
               {endSessionCopy.decision.cancelButton}
             </button>
@@ -165,26 +176,26 @@ export const EndSessionConfirmModal = ({
         ) : null}
 
         {activeStage === 'unfinished-confirm' ? (
-          <div className="flex w-full animate-fade-in-up flex-col items-center">
+          <div className="flex w-full flex-col items-center animate-in fade-in zoom-in-95 duration-700">
-            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),transparent)] shadow-[0_0_32px_rgba(255,255,255,0.08)]" />
+            <div className="mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)] backdrop-blur-md" />
-            <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
+            <p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30">
               {endSessionCopy.unfinishedConfirm.eyebrow}
             </p>
             <h3
               id="end-session-title"
-              className="mb-6 text-3xl font-light tracking-tight text-white md:text-4xl"
+              className="mb-6 text-3xl font-extralight tracking-tight text-white/90 md:text-4xl"
             >
               {endSessionCopy.unfinishedConfirm.title}
             </h3>
-            <p className="mb-10 max-w-md text-[16px] font-light leading-relaxed text-white/60">
+            <p className="mb-12 max-w-md text-[15px] font-light leading-relaxed text-white/50">
               {endSessionCopy.unfinishedConfirm.description}
             </p>
 
-            <div className="mb-12 w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-2xl">
+            <div className="mb-14 w-full max-w-lg rounded-3xl border border-white/[0.04] bg-white/[0.02] p-8 shadow-[inset_0_0_20px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md">
-              <p className="mb-3 text-[10px] font-semibold uppercase tracking-widest text-white/40">
+              <p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
                 {endSessionCopy.decision.goalLabel}
               </p>
-              <p className="text-xl font-medium text-white/90">{trimmedGoal}</p>
+              <p className="text-xl font-light leading-relaxed tracking-wide text-white/80">{trimmedGoal}</p>
             </div>
 
             <div className="flex w-full max-w-md flex-col gap-4 sm:flex-row">
@@ -192,7 +203,7 @@ export const EndSessionConfirmModal = ({
                 type="button"
                 onClick={onClose}
                 disabled={isSubmitting}
-                className="flex-1 rounded-full border border-white/20 bg-black/40 px-6 py-4 text-[15px] font-medium text-white backdrop-blur-md transition-all hover:border-white/40 hover:bg-white/10 active:scale-95 disabled:opacity-50"
+                className="flex-1 rounded-full border border-white/10 bg-transparent px-6 py-4 text-[14px] font-light text-white/60 transition-all duration-500 hover:border-white/20 hover:bg-white/[0.03] hover:text-white/90 active:scale-[0.98] disabled:opacity-50"
               >
                 {endSessionCopy.unfinishedConfirm.keepFocusingButton}
               </button>
@@ -200,59 +211,85 @@ export const EndSessionConfirmModal = ({
                 type="button"
                 onClick={handleSaveAndReturn}
                 disabled={isSubmitting}
-                className="flex-1 rounded-full bg-white px-6 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.18)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
+                className="group relative flex-1 overflow-hidden rounded-full bg-white px-6 py-4 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50"
               >
-                {isSubmitting
+                 <div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-                  ? endSessionCopy.unfinishedConfirm.saveAndReturnPending
+                 <span className="relative z-10">
-                  : endSessionCopy.unfinishedConfirm.saveAndReturnButton}
+                  {isSubmitting
+                    ? endSessionCopy.unfinishedConfirm.saveAndReturnPending
+                    : endSessionCopy.unfinishedConfirm.saveAndReturnButton}
+                 </span>
               </button>
             </div>
           </div>
         ) : null}
 
-        {activeStage === 'result-success' && completionResult ? (
+        {(activeStage === 'result-success' || activeStage === 'result-saved') && completionResult ? (
-          <div className="flex w-full animate-fade-in-up flex-col items-center">
+          <div className="flex w-full flex-col items-center">
-            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/20 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.16),transparent)] shadow-[0_0_50px_rgba(255,255,255,0.16)]" />
+            {/* Stage dependent subtle glow */}
-            <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
+            <div className={cn(
-              {endSessionCopy.resultSuccess.eyebrow}
+               "mb-10 inline-flex h-16 w-16 items-center justify-center rounded-full border border-white/10 backdrop-blur-md animate-in fade-in zoom-in duration-1000",
+               activeStage === 'result-success' 
+                ? "bg-white/[0.04] shadow-[0_0_50px_rgba(255,255,255,0.1),inset_0_0_20px_rgba(255,255,255,0.05)]" 
+                : "bg-white/[0.02] shadow-[inset_0_0_15px_rgba(255,255,255,0.02)]"
+            )} />
+            
+            <p className="mb-4 text-[10px] font-medium uppercase tracking-[0.4em] text-white/30 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-150 fill-mode-both">
+              {activeStage === 'result-success' ? endSessionCopy.resultSuccess.eyebrow : endSessionCopy.resultSaved.eyebrow}
             </p>
             <h3
               id="end-session-title"
-              className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
+              className="mb-8 text-4xl font-extralight tracking-tight text-white/90 md:text-5xl animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300 fill-mode-both drop-shadow-[0_0_40px_rgba(255,255,255,0.1)]"
             >
-              {endSessionCopy.resultSuccess.title}
+              {activeStage === 'result-success' ? endSessionCopy.resultSuccess.title : endSessionCopy.resultSaved.title}
             </h3>
-            <p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
+            <p className="mb-14 max-w-md text-[15px] font-light leading-relaxed text-white/50 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500 fill-mode-both">
-              {endSessionCopy.resultSuccess.description}
+              {activeStage === 'result-success' ? endSessionCopy.resultSuccess.description : endSessionCopy.resultSaved.description}
             </p>
 
-            <div className="mb-12 flex w-full max-w-lg flex-col gap-4">
+            <div className="mb-16 flex w-full max-w-lg flex-col gap-4 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-700 fill-mode-both">
-              <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-7 text-center backdrop-blur-md shadow-2xl">
+              {/* The Hero Number */}
-                <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
+              <div className="rounded-3xl border border-white/[0.04] bg-white/[0.01] px-6 py-10 text-center shadow-[inset_0_0_30px_rgba(255,255,255,0.01),0_20px_40px_rgba(0,0,0,0.3)] backdrop-blur-xl relative overflow-hidden">
+                <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.05),transparent_50%)] pointer-events-none" />
+                <p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.4em] text-white/30">
                   {endSessionCopy.resultSuccess.focusedLabel}
                 </p>
-                <p className="text-5xl font-light tracking-tight text-white md:text-6xl">
+                <div className="relative inline-block">
-                  {focusedMinutes}
+                  <div className="absolute inset-0 bg-white/20 blur-[40px] rounded-full" />
-                  <span className="ml-2 text-3xl font-medium text-white/50">m</span>
+                  <p className="relative text-7xl font-thin tracking-tighter text-white drop-shadow-md md:text-8xl">
-                </p>
+                    {focusedMinutes}
+                    <span className="ml-2 text-4xl font-light text-white/30">m</span>
+                  </p>
+                </div>
               </div>
 
-              <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
+              {activeStage === 'result-saved' && (
-                <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
+                <div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-6 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
+                  <p className="mb-3 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
+                    {endSessionCopy.resultSaved.goalStatusLabel}
+                  </p>
+                  <p className="text-[13px] font-light uppercase tracking-[0.2em] text-white/50">
+                    {endSessionCopy.resultSaved.goalStatusValue}
+                  </p>
+                </div>
+              )}
+
+              <div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
+                <p className="mb-4 text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
                   {endSessionCopy.resultSuccess.goalLabel}
                 </p>
-                <p className="text-lg font-medium text-white/90">
+                <p className="text-[17px] font-light leading-relaxed tracking-wide text-white/80">
                   {completionResult.goalText}
                 </p>
               </div>
 
               {hasThoughts ? (
-                <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
+                <div className="rounded-3xl border border-white/[0.03] bg-white/[0.01] px-8 py-7 text-left shadow-[0_10px_30px_rgba(0,0,0,0.2)] backdrop-blur-md">
-                  <div className="mb-4 flex items-center justify-between">
+                  <div className="mb-5 flex items-center justify-between">
-                    <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
+                    <p className="text-[9px] font-semibold uppercase tracking-[0.3em] text-white/30">
                       {endSessionCopy.resultSuccess.thoughtsLabel}
                     </p>
-                    <span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
+                    <span className="inline-flex h-5 items-center justify-center rounded-full border border-white/10 bg-white/5 px-2.5 text-[9px] font-medium text-white/50">
                       {completionResult.thoughts.length}
                     </span>
                   </div>
@@ -260,9 +297,9 @@ export const EndSessionConfirmModal = ({
                     {completionResult.thoughts.map((thought) => (
                       <div
                         key={thought.id}
-                        className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
+                        className="rounded-2xl border border-white/[0.02] bg-black/40 px-5 py-4"
                       >
-                        <p className="text-[14px] leading-relaxed text-white/80">
+                        <p className="text-[14px] font-light leading-relaxed text-white/70">
                           {thought.text}
                         </p>
                       </div>
@@ -272,94 +309,19 @@ export const EndSessionConfirmModal = ({
               ) : null}
             </div>
 
-            <button
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-1000 fill-mode-both">
-              type="button"
+              <button
-              onClick={onBackToLobby}
+                type="button"
-              className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.5)] active:scale-95"
+                onClick={onBackToLobby}
-            >
+                className="group relative overflow-hidden rounded-full bg-white px-14 py-5 text-[14px] font-medium text-black transition-all duration-500 hover:scale-[1.03] hover:shadow-[0_0_50px_rgba(255,255,255,0.25)] active:scale-[0.98]"
-              {endSessionCopy.resultSuccess.backToLobby}
+              >
-            </button>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-          </div>
+                <span className="relative z-10">
-        ) : null}
+                  {activeStage === 'result-success' ? endSessionCopy.resultSuccess.backToLobby : endSessionCopy.resultSaved.backToLobby}
-
+                </span>
-        {activeStage === 'result-saved' && completionResult ? (
+              </button>
-          <div className="flex w-full animate-fade-in-up flex-col items-center">
-            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.09),transparent)]" />
-            <p className="mb-4 text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 drop-shadow-md">
-              {endSessionCopy.resultSaved.eyebrow}
-            </p>
-            <h3
-              id="end-session-title"
-              className="mb-6 text-4xl font-light leading-tight tracking-tight text-white md:text-5xl"
-            >
-              {endSessionCopy.resultSaved.title}
-            </h3>
-            <p className="mb-12 max-w-md text-lg font-light leading-relaxed text-white/60">
-              {endSessionCopy.resultSaved.description}
-            </p>
-
-            <div className="mb-12 flex w-full max-w-lg flex-col gap-4">
-              <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-7 text-center backdrop-blur-md shadow-2xl">
-                <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
-                  {endSessionCopy.resultSaved.focusedLabel}
-                </p>
-                <p className="text-5xl font-light tracking-tight text-white md:text-6xl">
-                  {focusedMinutes}
-                  <span className="ml-2 text-3xl font-medium text-white/50">m</span>
-                </p>
-              </div>
-
-              <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
-                <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
-                  {endSessionCopy.resultSaved.goalStatusLabel}
-                </p>
-                <p className="text-sm font-medium uppercase tracking-[0.18em] text-white/78">
-                  {endSessionCopy.resultSaved.goalStatusValue}
-                </p>
-              </div>
-
-              <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
-                <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-white/40">
-                  {endSessionCopy.resultSaved.goalLabel}
-                </p>
-                <p className="text-lg font-medium text-white/90">
-                  {completionResult.goalText}
-                </p>
-              </div>
-
-              {hasThoughts ? (
-                <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-5 text-left backdrop-blur-md shadow-2xl">
-                  <div className="mb-4 flex items-center justify-between">
-                    <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
-                      {endSessionCopy.resultSaved.thoughtsLabel}
-                    </p>
-                    <span className="inline-flex items-center justify-center rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/70">
-                      {completionResult.thoughts.length}
-                    </span>
-                  </div>
-                  <div className="space-y-3">
-                    {completionResult.thoughts.map((thought) => (
-                      <div
-                        key={thought.id}
-                        className="rounded-2xl border border-white/5 bg-black/20 px-4 py-3"
-                      >
-                        <p className="text-[14px] leading-relaxed text-white/80">
-                          {thought.text}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
             </div>
             
-            <button
-              type="button"
-              onClick={onBackToLobby}
-              className="rounded-full bg-white px-12 py-4 text-[15px] font-semibold text-black shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_rgba(255,255,255,0.45)] active:scale-95"
-            >
-              {endSessionCopy.resultSaved.backToLobby}
-            </button>
           </div>
         ) : null}
       </div>

src/widgets/space-focus-hud/ui/InlineMicrostep.tsx

@@ -13,6 +13,7 @@ export const InlineMicrostep = ({ microStep, isBusy, onUpdate }: InlineMicrostep
   const [isEditing, setIsEditing] = useState(false);
   const [draft, setDraft] = useState('');
   const [isCompleting, setIsCompleting] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const normalizedStep = microStep?.trim() || null;
@@ -31,6 +32,7 @@ export const InlineMicrostep = ({ microStep, isBusy, onUpdate }: InlineMicrostep
 
   const cancelEditing = () => {
     setIsEditing(false);
+    setIsFocused(false);
     setDraft('');
   };
 
@@ -61,86 +63,110 @@ export const InlineMicrostep = ({ microStep, isBusy, onUpdate }: InlineMicrostep
     if (isBusy || isCompleting || !normalizedStep) return;
     
     setIsCompleting(true);
-    // Visual delay for the strikethrough animation before actually clearing it
+    // Visual delay for the evaporating strikethrough animation (Sensory Closure)
     setTimeout(async () => {
       await onUpdate(null);
       setIsCompleting(false);
-    }, 400);
+    }, 600);
   };
 
-  if (isEditing) {
+  // Determine the primary physical state for morphing
-    return (
+  const state = isEditing ? 'editing' : (normalizedStep ? 'active' : 'idle');
-      <div className="flex w-full max-w-md items-center gap-3 rounded-full border border-white/20 bg-black/40 pl-5 pr-2 py-1.5 shadow-[0_0_30px_rgba(255,255,255,0.1)] backdrop-blur-2xl transition-all duration-300 animate-fade-in-up">
-        <input
-          ref={inputRef}
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={() => void submitDraft()}
-          disabled={isBusy}
-          placeholder="Enter next small step..."
-          className="flex-1 bg-transparent text-[15px] font-medium text-white outline-none placeholder:text-white/30 disabled:opacity-50"
-        />
-        <button
-          type="button"
-          onMouseDown={(e) => {
-            e.preventDefault(); // Prevent blur
-            void submitDraft();
-          }}
-          disabled={isBusy || !draft.trim()}
-          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-black transition-transform hover:scale-105 active:scale-95 disabled:opacity-30 disabled:hover:scale-100"
-        >
-          <svg viewBox="0 0 16 16" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M3 8.5 6.5 12 13 4" />
-          </svg>
-        </button>
-      </div>
-    );
-  }
-
-  if (normalizedStep) {
-    return (
-      <div 
-        className={cn(
-          "group/micro flex w-full max-w-md items-center gap-4 rounded-full border border-white/5 bg-white/5 pl-4 pr-6 py-2.5 backdrop-blur-xl transition-all duration-500",
-          isCompleting ? "opacity-0 scale-95" : "hover:border-white/15 hover:bg-white/10 opacity-100 scale-100"
-        )}
-      >
-        <button
-          type="button"
-          onClick={() => void handleComplete()}
-          disabled={isBusy || isCompleting}
-          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 text-white/0 transition-all duration-300 hover:bg-white hover:text-black focus:outline-none focus:ring-2 active:scale-90"
-        >
-          <svg viewBox="0 0 16 16" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M4 8.4 6.7 11 12 5.7" />
-          </svg>
-        </button>
-        <button 
-          onClick={startEditing}
-          disabled={isBusy || isCompleting}
-          className="flex-1 text-left"
-        >
-          <p className={cn(
-            "text-[16px] text-white/80 transition-all duration-300 group-hover/micro:text-white truncate",
-            isCompleting && "line-through text-white/30 decoration-white/30"
-          )}>
-            {normalizedStep}
-          </p>
-        </button>
-      </div>
-    );
-  }
 
   return (
-    <button
+    <div className="flex w-full justify-center perspective-[1000px]">
-      type="button"
+      <div 
-      onClick={startEditing}
+        className={cn(
-      disabled={isBusy}
+          "relative overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-      className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 backdrop-blur-md px-6 py-2.5 text-[14px] font-medium text-white/80 transition-all shadow-[0_4px_12px_rgba(0,0,0,0.1)] hover:border-white/30 hover:bg-black/30 hover:text-white active:scale-95 disabled:opacity-50"
+          // Base container styling: Volumetric Glass
-    >
+          "rounded-full border backdrop-blur-2xl flex items-center",
-      <span className="text-lg leading-none mb-0.5 drop-shadow-md">+</span>
+          
-      <span className="drop-shadow-md">Add microstep</span>
+          // State-based Morphing Choreography
-    </button>
+          state === 'idle' && "w-[240px] h-[42px] bg-black/20 border-white/5 shadow-[0_8px_32px_rgba(0,0,0,0.12)] cursor-pointer hover:bg-black/30 hover:border-white/10 hover:w-[250px] active:scale-[0.98]",
+          state === 'editing' && "w-[440px] max-w-full h-[48px] bg-black/40 border-white/15 shadow-[0_0_30px_rgba(255,255,255,0.08)]",
+          state === 'active' && "w-[440px] max-w-full h-[46px] bg-white/[0.04] border-white/5 shadow-[0_8px_32px_rgba(0,0,0,0.12)] cursor-pointer hover:bg-white/[0.07] hover:border-white/10 active:scale-[0.99]",
+          
+          // Focus state optics (The 'Bloom' Effect)
+          (state === 'editing' && isFocused) && "shadow-[0_0_50px_rgba(255,255,255,0.15)] border-white/25",
+          
+          // Sensory Closure (Evaporation)
+          isCompleting && "opacity-0 scale-95 blur-sm"
+        )}
+        onClick={state !== 'editing' && !isCompleting ? startEditing : undefined}
+      >
+        
+        {/* Content Layer 1: Idle (Just one small step) */}
+        <div className={cn(
+          "absolute inset-0 flex items-center justify-center gap-2 transition-all duration-500 ease-out",
+          state === 'idle' ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none"
+        )}>
+          <span className="text-white/40 font-light text-lg mb-0.5 leading-none">+</span>
+          <span className="text-[14.5px] font-light tracking-wide text-white/60">Start with one small win</span>
+        </div>
+
+        {/* Content Layer 2: Active (Has Step) */}
+        <div className={cn(
+          "absolute inset-0 flex items-center px-4 transition-all duration-500 ease-out",
+          state === 'active' ? "opacity-100 translate-x-0" : "opacity-0 translate-x-4 pointer-events-none"
+        )}>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation(); // Prevent entering edit mode when completing
+              void handleComplete();
+            }}
+            disabled={isBusy || isCompleting}
+            className="group/check inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border border-white/20 bg-transparent text-transparent transition-all duration-300 hover:bg-white hover:border-white focus:outline-none active:scale-90 mr-3.5"
+          >
+            <svg viewBox="0 0 16 16" className="h-3 w-3 transition-colors duration-300 group-hover/check:text-black" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M4 8.4 6.7 11 12 5.7" />
+            </svg>
+          </button>
+          <div className="flex-1 min-w-0 pr-2">
+            <p className={cn(
+              "text-[15.5px] text-white/90 truncate transition-all duration-700 font-light tracking-wide",
+              isCompleting && "line-through text-white/30 decoration-white/40 decoration-1 translate-x-2"
+            )}>
+              {normalizedStep}
+            </p>
+          </div>
+        </div>
+
+        {/* Content Layer 3: Editing (The 'First Move') */}
+        <div className={cn(
+          "absolute inset-0 flex items-center px-5 transition-all duration-500 ease-out",
+          state === 'editing' ? "opacity-100 scale-100" : "opacity-0 scale-110 pointer-events-none"
+        )}>
+          <input
+            ref={inputRef}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => {
+              setIsFocused(false);
+              void submitDraft();
+            }}
+            disabled={isBusy}
+            placeholder="What's the very first move?"
+            className="flex-1 bg-transparent text-[15.5px] font-light tracking-wide text-white outline-none placeholder:text-white/30 disabled:opacity-50 min-w-0"
+          />
+          <button
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault(); // Prevent blur before submit
+              void submitDraft();
+            }}
+            disabled={isBusy || !draft.trim()}
+            className="ml-3 inline-flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full bg-white text-black transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-0 disabled:scale-90 shadow-[0_2px_10px_rgba(255,255,255,0.2)]"
+          >
+            <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M3 8.5 6.5 12 13 4" />
+            </svg>
+          </button>
+        </div>
+        
+      </div>
+    </div>
   );
 };