feat(telegram): clear bottom and side safe-area insets

Only the device safe-area TOP inset was mirrored, so on phones with a home
indicator the rack / bottom bar sat under it, and in landscape the notch
clipped the screen edges.

Mirror the full device safe-area inset (bottom / left / right) into new
--tg-safe-bottom / --tg-safe-left / --tg-safe-right CSS vars (0 outside
Telegram) and pad the shared Screen wrapper by them, so every screen clears the
home indicator and the landscape notch; the top inset stays owned by the header.
Replace telegramSafeAreaTop with telegramSafeAreaInset (the full inset object),
with a unit test.

ui/src/lib/telegram.test.ts

@@ -8,6 +8,7 @@ import {
   telegramLaunch,
   telegramOpenExternalLink,
   telegramThemeParams,
+  telegramSafeAreaInset,
 } from './telegram';
 
 function stubWebApp(initData: string, startParam?: string) {
@@ -51,6 +52,14 @@ describe('telegram launch detection', () => {
     stubWebApp('query_id=abc');
     expect(telegramThemeParams()?.bg_color).toBe('#101418');
   });
+
+  it('telegramSafeAreaInset returns zeros outside Telegram and the SDK insets inside', () => {
+    expect(telegramSafeAreaInset()).toEqual({ top: 0, bottom: 0, left: 0, right: 0 });
+    vi.stubGlobal('window', {
+      Telegram: { WebApp: { initData: 'x', safeAreaInset: { top: 59, bottom: 34, left: 0, right: 0 } } },
+    });
+    expect(telegramSafeAreaInset()).toEqual({ top: 59, bottom: 34, left: 0, right: 0 });
+  });
 });
 
 describe('telegramOpenExternalLink', () => {