/* Telegram Mini App styles * -------------------------- * Applied conditionally via [data-tg-platform] attribute on * (set by tg-init.js when running inside Telegram) */ /* Safe area paddings for iOS Telegram */ html[data-tg-platform="ios"] body, html[data-tg-platform="ios"] .tg-safe-top { padding-top: env(safe-area-inset-top); } html[data-tg-platform] .tg-safe-bottom { padding-bottom: env(safe-area-inset-bottom); } /* Hide PWA install prompts inside Telegram */ html[data-tg-platform] #pwa-install-banner, html[data-tg-platform] .pwa-install-prompt, html[data-tg-platform] [data-pwa-install] { display: none !important; } /* Hide phone-app-only links */ html[data-tg-platform] [data-hide-in-tg] { display: none !important; } /* The app UI is light-designed (white/purple-50 cards) and has no dark theme. * Force light color-scheme even when Telegram is in dark mode — otherwise the * browser default text color becomes white and unstyled text (font-semibold * without text-* class) turns invisible on light cards. */ html[data-tg-theme="dark"], html[data-tg-theme="light"] { color-scheme: light; } /* Explicit base text color inside Telegram, so nothing inherits white */ html[data-tg-platform] body { color: #1f2937; /* gray-800 */ } /* Smoother feel inside webview */ html[data-tg-platform] body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } /* Optional: use Telegram theme colors when available */ html[data-tg-platform] .tg-themed-bg { background-color: var(--tg-bg-color, inherit); color: var(--tg-text-color, inherit); } html[data-tg-platform] .tg-themed-secondary { background-color: var(--tg-secondary-bg-color, inherit); } html[data-tg-platform] .tg-themed-button { background-color: var(--tg-button-color, #667eea); color: var(--tg-button-text-color, #fff); }