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/CalendarPage.tsx

@@ -17,6 +17,7 @@ import { CalendarGrid } from "@/components/calendar/CalendarGrid";
 import { DutyList } from "@/components/duty/DutyList";
 import { DayDetail, type DayDetailHandle } from "@/components/day-detail";
 import { ErrorState } from "@/components/states/ErrorState";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
 
 /** Fallback height (px) until ResizeObserver reports the sticky block size. Matches --calendar-block-min-height + pb-2 (260 + 8). */
 const STICKY_HEIGHT_FALLBACK_PX = 268;
@@ -90,10 +91,12 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
   const navDisabled = loading || accessDenied || selectedDay !== null;
   const handlePrevMonth = useCallback(() => {
     if (navDisabled) return;
+    triggerHapticLight();
     prevMonth();
   }, [navDisabled, prevMonth]);
   const handleNextMonth = useCallback(() => {
     if (navDisabled) return;
+    triggerHapticLight();
     nextMonth();
   }, [navDisabled, nextMonth]);
 
@@ -133,7 +136,7 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
   }, [loading, accessDenied, setAppContentReady]);
 
   return (
-    <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">
       <div
         ref={calendarStickyRef}
         className="sticky top-0 z-10 min-h-[var(--calendar-block-min-height)] bg-background pb-2"