feat: add Expo Push notifications for mobile and configure EXPO_ACCESS_TOKEN

- Backend: add expo_push_tokens table, expo-register/unregister endpoints, hybrid VAPID+Expo push sender
- Mobile: register Expo push token on app launch, bell toggle on medicine/pharmacy detail screens
- .env.example: document EXPO_ACCESS_TOKEN configuration
- Dark mode hover fixes for search suggestions and recent buttons

apps/frontend-mobile/app/medicine/[id].tsx

@@ -4,6 +4,8 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import * as Location from 'expo-location';
 import { getMedicine, getMedicinePharmacies } from '../../services/medicines';
+import { subscribeToMedicine, unsubscribeFromMedicine } from '../../services/notifications';
+import { useAuth } from '../../hooks/useAuth';
 import { StockBadge } from '../../components/StockBadge';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { useThemeContext } from '../../components/ThemeProvider';
@@ -40,6 +42,7 @@ export default function MedicineDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const router = useRouter();
   const { colors } = useThemeContext();
+  const { isAuthenticated } = useAuth();
   const [medicine, setMedicine] = useState<Medicine | null>(null);
   const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -47,6 +50,8 @@ export default function MedicineDetailScreen() {
   const [userPosition, setUserPosition] = useState<{ lat: number; lon: number } | null>(null);
   const [locating, setLocating] = useState(false);
   const [locationError, setLocationError] = useState<string | null>(null);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [togglingSub, setTogglingSub] = useState(false);
 
   useEffect(() => {
     if (!id) return;
@@ -96,6 +101,24 @@ export default function MedicineDetailScreen() {
     }
   };
 
+  const handleToggleSubscription = async () => {
+    if (!isAuthenticated || !id) return;
+    setTogglingSub(true);
+    try {
+      if (isSubscribed) {
+        await unsubscribeFromMedicine(id as string);
+        setIsSubscribed(false);
+      } else {
+        await subscribeToMedicine(id as string, medicine?.name || null);
+        setIsSubscribed(true);
+      }
+    } catch {
+      // silently fail
+    } finally {
+      setTogglingSub(false);
+    }
+  };
+
   const sortedPharmacies = useMemo(() => {
     if (!sortByDistance || !userPosition) return pharmacies;
 
@@ -148,7 +171,22 @@ export default function MedicineDetailScreen() {
     <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
       <View style={[styles.header, { backgroundColor: colors.card }]}>
         <Text style={[styles.name, { color: colors.text }]}>{medicine.name}</Text>
-        {medicine.stock != null && <StockBadge stock={medicine.stock} />}
+        <View style={styles.headerRight}>
+          {medicine.stock != null && <StockBadge stock={medicine.stock} />}
+          {isAuthenticated && (
+            <TouchableOpacity
+              style={[styles.bellButton, { backgroundColor: isSubscribed ? colors.primary : colors.surfaceVariant }]}
+              onPress={handleToggleSubscription}
+              disabled={togglingSub}
+            >
+              <Ionicons
+                name={isSubscribed ? 'notifications' : 'notifications-outline'}
+                size={20}
+                color={isSubscribed ? '#fff' : colors.textSecondary}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
       </View>
 
       <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
@@ -277,12 +315,24 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     padding: spacing.lg,
   },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
   name: {
     flex: 1,
     fontSize: 22,
     fontWeight: 'bold',
     marginRight: spacing.sm,
   },
+  bellButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   infoSection: {
     marginTop: spacing.sm,
     padding: spacing.lg,