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/app/page.tsx

@@ -50,7 +50,7 @@ export default function Home() {
   const content = accessDenied ? (
     <AccessDeniedScreen primaryAction="reload" />
   ) : currentView === "currentDuty" ? (
-    <div className="mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6 pt-safe">
+    <div className="content-safe mx-auto flex min-h-screen w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6">
       <CurrentDutyView
         onBack={handleBackFromCurrentDuty}
         openedFromPin={startParam === "duty"}
@@ -62,9 +62,9 @@ export default function Home() {
 
   return (
     <div
+      className="min-h-[var(--tg-viewport-stable-height,100vh)]"
       style={{
         visibility: appContentReady ? "visible" : "hidden",
-        minHeight: "100vh",
       }}
     >
       {content}