/*
 * Telegram Mini App-specific styles.
 *
 * Scoped to `html.telegram-webapp` so they only activate when the SPA
 * detects it's running inside the Telegram WebView (see tg-init.js,
 * which adds the class). Pulled out of an inline <style> in
 * index.html so the page's CSP can omit `style-src 'unsafe-inline'`
 * for the entry document — see SECURITY.md for the full rationale.
 *
 * Note: dynamic Vue :style bindings still produce inline style
 * attributes at runtime, which is why CSP keeps `style-src
 * 'unsafe-inline'` enabled for now. This file moving out of the HTML
 * is the prerequisite for tightening that, not a substitute.
 */

/* Telegram Mini App: no extra top padding on body. Telegram already
   renders its native header ABOVE the webview, so any padding-top
   here on top of that creates a visible dark strip between Telegram's
   chrome and the app content. The two `.tg-safe-top` /
   `.safe-area-bottom` rules that used to live here were dead code —
   no component in the app uses those class names. Bottom-nav +
   `.bottom-16` overrides below are real and are kept because
   MiniAppBottomNav and the map/chat switcher both depend on them. */
html.telegram-webapp nav.fixed.bottom-0 {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(4rem + env(safe-area-inset-bottom, 0px));
}

/* Adjust content above bottom nav */
html.telegram-webapp .bottom-16 {
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* DashboardView root reserves `pb-16` (4rem) at the bottom for its own
   mobile nav. In the Mini App the nav gets padded with
   `env(safe-area-inset-bottom)` via the rule above, so its real height
   is `4rem + safe-area`. The root's 4rem no longer matches, and the
   last ~safe-area pixels of content end up hidden behind the nav —
   bottom text in the chart details tab, and the "scroll to latest"
   arrow in the chat tab (it sits at `bottom-36` which is measured from
   the root's bottom edge). Scope is narrow: `pb-16` is only used on
   DashboardView, so overriding the utility class inside
   .telegram-webapp affects nothing else. */
html.telegram-webapp .pb-16 {
  padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Telegram Mini App: hide scrollbars everywhere. The page already
   styles `::-webkit-scrollbar` via App.vue, but the Telegram Desktop
   webview (Windows / macOS) often renders a system-provided scrollbar
   that ignores those rules, showing up as a bright light-grey strip
   on the right and a thin line along the bottom of any scrollable
   panel. Inside a Mini App frame — which is a touch/wheel context, no
   need to signal scrollability with a persistent gutter — hiding them
   is the right trade. Users still scroll the content normally. */
html.telegram-webapp *::-webkit-scrollbar,
html.telegram-webapp::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.telegram-webapp,
html.telegram-webapp * {
  scrollbar-width: none !important;       /* Firefox */
  -ms-overflow-style: none !important;    /* legacy Edge / IE */
}