/* Telegram-only viewport and safe-area adaptation. The root class is added by
   telegram-mini-app.js only after a signed Telegram launch is detected. */
html.telegram-mini-app {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    background: #111418;
    color-scheme: dark;
}

html.telegram-mini-app body {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(
        env(safe-area-inset-top, 0px),
        var(--tg-safe-area-inset-top, 0px),
        var(--tg-content-safe-area-inset-top, 0px),
        var(--katomu-tg-safe-top, 0px)
    );
    padding-right: max(
        env(safe-area-inset-right, 0px),
        var(--tg-safe-area-inset-right, 0px),
        var(--tg-content-safe-area-inset-right, 0px),
        var(--katomu-tg-safe-right, 0px)
    );
    padding-bottom: max(
        env(safe-area-inset-bottom, 0px),
        var(--tg-safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, 0px),
        var(--katomu-tg-safe-bottom, 0px)
    );
    padding-left: max(
        env(safe-area-inset-left, 0px),
        var(--tg-safe-area-inset-left, 0px),
        var(--tg-content-safe-area-inset-left, 0px),
        var(--katomu-tg-safe-left, 0px)
    );
}

html.telegram-mini-app #start-screen,
html.telegram-mini-app #chat-screen:not(.chat-keyboard-open) {
    height: 100%;
    min-height: 100%;
}

/* Telegram can retain the WebView while it is minimized. Stop decorative work
   while hidden and resume it on the SDK's activated event. */
html.telegram-mini-app.telegram-mini-app-paused *,
html.telegram-mini-app.telegram-mini-app-paused *::before,
html.telegram-mini-app.telegram-mini-app-paused *::after {
    animation-play-state: paused !important;
}

/* Telegram Android exposes a LOW performance class in its user agent. Keep the
   interface functional while removing the continuous effects that cost the most
   paint/compositor time on those devices. */
html.telegram-mini-app.telegram-performance-low .radar-logo,
html.telegram-mini-app.telegram-performance-low .radar-circle,
html.telegram-mini-app.telegram-performance-low .plot-waiting-radar-circle,
html.telegram-mini-app.telegram-performance-low .plot-waiting-logo,
html.telegram-mini-app.telegram-performance-low .brand-online-dot,
html.telegram-mini-app.telegram-performance-low .future-slot-icon,
html.telegram-mini-app.telegram-performance-low #speed-match-btn,
html.telegram-mini-app.telegram-performance-low #speed-match-btn::after,
html.telegram-mini-app.telegram-performance-low .pinned-slot .tg-avatar-wrap,
html.telegram-mini-app.telegram-performance-low .pinned-slot .current-slot-badge,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__orbit,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__codex,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__wax-seal,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__ink-line,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__map,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__dust,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__astrolabe,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__dial-marks,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__astrolabe-needle,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__world-land,
html.telegram-mini-app.telegram-performance-low .ai-start-transition__stages li,
html.telegram-mini-app.telegram-performance-low .auth-ornament__key-motion {
    animation: none !important;
}

html.telegram-mini-app.telegram-performance-low .ai-start-transition__ink-line {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

html.telegram-mini-app.telegram-performance-low .ai-start-transition__world-land {
    opacity: 1 !important;
    transform: scale(1) !important;
}