feat: enhance CSS and components for Telegram Mini App performance

- Updated CSS to utilize viewport variables for safe area insets and stable height, improving layout consistency across devices.
- Introduced haptic feedback triggers in various components to enhance user interaction, mimicking native Telegram behavior.
- Added functionality to detect Android performance class, minimizing animations on low-performance devices for better user experience.
- Refactored components to incorporate new CSS classes for content safety and improved responsiveness.

webapp-next/src/components/current-duty/CurrentDutyView.tsx

@@ -20,6 +20,7 @@ import {
   formatHHMM,
 } from "@/lib/date-utils";
 import { getRemainingTime, findCurrentDuty } from "@/lib/current-duty";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
 import { ContactLinks } from "@/components/contact/ContactLinks";
 import { Button } from "@/components/ui/button";
 import {
@@ -145,10 +146,12 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   }, [onBack]);
 
   const handleBack = () => {
+    triggerHapticLight();
     onBack();
   };
 
   const handleClose = () => {
+    triggerHapticLight();
     if (closeMiniApp.isAvailable()) {
       closeMiniApp();
     } else {
@@ -213,6 +216,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
 
   if (state === "error") {
     const handleRetry = () => {
+      triggerHapticLight();
       setState("loading");
       loadTodayDuties();
     };