Fine-tune: bigger invisible tap areas on header chips, press feedback on tabs and chips, touch-action manipulation

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/BottomNav.tsx

@@ -20,7 +20,7 @@ export function BottomNav({ active, onChange }: { active: TabName | null; onChan
             type="button"
             onClick={() => onChange(id)}
             aria-current={on ? 'page' : undefined}
-            className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-colors ${on ? 'text-coral' : 'text-muted'}`}
+            className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-[color,transform] active:scale-90 ${on ? 'text-coral' : 'text-muted'}`}
           >
             <span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}>
               <Icon size={20} strokeWidth={on ? 2.5 : 1.9} />

src/screens/HomeScreen.tsx

@@ -53,7 +53,7 @@ export function HomeScreen() {
       <header className="relative z-20 flex-shrink-0 rounded-b-[28px] bg-coral px-4 pb-4 pt-safe text-white shadow-md shadow-coral/20">
         <div className="flex items-center gap-2 pt-4">
           {gradeTitle && (
-            <button type="button" onClick={() => nav.switchTab('profile')} className="rounded-full bg-white/20 px-3 py-1.5 text-xs font-black">
+            <button type="button" onClick={() => nav.switchTab('profile')} className="hit rounded-full bg-white/20 px-3 py-1.5 text-xs font-black active:scale-95">
               {gradeTitle}
             </button>
           )}
@@ -64,13 +64,13 @@ export function HomeScreen() {
                 type="button"
                 aria-label={`${label}: ${toFa(value)}`}
                 onClick={() => nav.push({ name: to })}
-                className="flex items-center gap-1 rounded-full bg-white px-2.5 py-1.5 text-xs font-black text-ink shadow-sm"
+                className="hit flex items-center gap-1 rounded-full bg-white px-2.5 py-1.5 text-xs font-black text-ink shadow-sm active:scale-95"
               >
                 <Icon size={15} style={{ color }} fill={fill ? color : 'none'} strokeWidth={2.4} />
                 {toFa(value)}
               </button>
             ))}
-            <button type="button" aria-label="اعلان‌ها" onClick={() => nav.push({ name: 'notifications' })} className="relative flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+            <button type="button" aria-label="اعلان‌ها" onClick={() => nav.push({ name: 'notifications' })} className="hit relative flex h-8 w-8 items-center justify-center rounded-full bg-white/20 active:scale-95">
               <Bell size={16} />
               {unreadCount > 0 && (
                 <span className="absolute -left-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[#FFD23F] px-1 text-[9px] font-black text-ink">

src/styles/index.css

@@ -46,6 +46,8 @@
   button {
     cursor: pointer;
     font: inherit;
+    /* بی‌تأخیرِ دابل‌تپ و بی‌زوم با دو ضربه روی دکمه‌ها */
+    touch-action: manipulation;
   }
   button:disabled {
     cursor: not-allowed;
@@ -103,3 +105,7 @@
   animation: glyph-float 6s ease-in-out infinite;
   will-change: transform;
 }
+
+/* ناحیه‌ی لمسِ بزرگ‌تر بدونِ تغییرِ ظاهر: دکمه‌های کوچکِ سربرگ (۲۸–۳۲ پیکسل) برای انگشت کوچک‌اند. */
+.hit { position: relative; }
+.hit::after { content: ''; position: absolute; inset: -7px -3px; }