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/globals.css

@@ -174,7 +174,7 @@ html::-webkit-scrollbar {
   margin-right: auto;
   padding: 12px;
   padding-top: 0;
-  padding-bottom: env(safe-area-inset-bottom, 12px);
+  padding-bottom: var(--tg-viewport-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 12px));
   border-radius: 12px;
 }
 
@@ -261,9 +261,25 @@ html::-webkit-scrollbar {
   }
 }
 
+/* Android low-performance devices: minimize animations (Telegram User-Agent). */
+[data-perf="low"] *,
+[data-perf="low"] *::before,
+[data-perf="low"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
 /* Safe area for Telegram Mini App (notch / status bar). */
 .pt-safe {
-  padding-top: env(safe-area-inset-top, 0);
+  padding-top: var(--tg-viewport-content-safe-area-inset-top, env(safe-area-inset-top, 0));
+}
+
+/* Content safe area: top/bottom only to avoid overlap with Telegram header/bottom bar (Bot API 8.0+).
+   Horizontal padding is left to layout classes (e.g. px-3) so indents are preserved when viewport vars are 0. */
+.content-safe {
+  padding-top: var(--tg-viewport-content-safe-area-inset-top, env(safe-area-inset-top, 0));
+  padding-bottom: var(--tg-viewport-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
 }
 
 /* Sticky calendar header: shadow when scrolled (useStickyScroll). */
@@ -305,7 +321,7 @@ html::-webkit-scrollbar {
   body {
     margin: 0;
     padding: 0;
-    min-height: 100vh;
+    min-height: var(--tg-viewport-stable-height, 100vh);
     background: var(--bg);
     color: var(--text);
     font-family: system-ui, -apple-system, sans-serif;

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}