/**
 * Telegram Mini App Viewport & Safe-Area Integration
 * Supports Telegram WebApp SDK dynamic height, safe-area insets,
 * notch protection, and device bottom navigation bar compensation.
 */

:root {
  /* Safe-area insets with hardware and Telegram fallbacks */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Dynamic Viewport Height (Telegram WebApp or Modern dvh fallback) */
  --tg-viewport-h: var(--tg-viewport-height, 100dvh);
  --tg-viewport-stable-h: var(--tg-viewport-stable-height, 100dvh);

  /* Bottom Navigation / Action Height */
  --bottom-bar-height: 64px;
}

/* Telegram Mini App Full Height Container */
.telegram-viewport {
  min-height: var(--tg-viewport-h);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Safe Area Inset Helpers */
.safe-top {
  padding-top: var(--safe-area-top);
}

.safe-bottom {
  padding-bottom: var(--safe-area-bottom);
}

.safe-left {
  padding-left: var(--safe-area-left);
}

.safe-right {
  padding-right: var(--safe-area-right);
}

/* Fixed Bottom Action Bar Protection:
   Guarantees primary CTA never collides with device navigation bar or Telegram close buttons */
.bottom-action-container {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + var(--safe-area-bottom));
  background: linear-gradient(
    to top,
    var(--color-bg) 80%,
    rgba(11, 15, 23, 0.8) 95%,
    transparent 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-bottom-nav);
}

/* When Telegram WebApp theme is detected and active, allow subtle harmonious tinting */
body.tg-theme-active {
  /* Retain our strict financial contrast colors, gently syncing if desired */
  background-color: var(--color-bg);
}