/**
 * Telegram Mini App Styles
 * Applied when body has class "telegram-webapp"
 */

/* ===== Telegram Theme CSS Variables Defaults ===== */
:root {
  --tg-theme-bg-color: #0d0d0f;
  --tg-theme-text-color: #ffffff;
  --tg-theme-hint-color: #999999;
  --tg-theme-link-color: #6ab2f2;
  --tg-theme-button-color: #5288c1;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #131315;
  --tg-theme-header-bg-color: #0d0d0f;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
}

/* ===== Body adjustments for Telegram ===== */
body.telegram-webapp {
  /* Remove any extra top padding — Telegram has its own header */
  padding-top: 0 !important;
  
  /* Use Telegram viewport height as min, but don't cap with max-height */
  min-height: var(--tg-viewport-stable-height, 100vh);
  
  /* Allow normal document scrolling */
  overflow-x: hidden;
  overflow-y: scroll !important;
  
  /* Prevent overscroll bounce that triggers pull-to-close on mobile only */
  overscroll-behavior-y: contain;
  
  /* Disable text selection for more native feel */
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in specific areas */
body.telegram-webapp input,
body.telegram-webapp textarea,
body.telegram-webapp .table-cell,
body.telegram-webapp .coin-name,
body.telegram-webapp .search-bar-input {
  -webkit-user-select: text;
  user-select: text;
}

/* ===== Header adjustments ===== */
body.telegram-webapp header {
  /* Slightly reduce header height in Telegram */
  position: sticky;
  top: 0;
  z-index: 1000;
}

body.telegram-webapp header .tg-header {
  padding-top: 0;
}

/* Hide auth buttons in Telegram (auto-auth handles it) */
body.telegram-webapp .auth-buttons {
  display: none !important;
}

/* Hide "Sign in" / "Sign up" buttons */
body.telegram-webapp .btn-signin,
body.telegram-webapp .btn-signup {
  display: none !important;
}

/* ===== Smooth scrolling in Telegram ===== */
body.telegram-webapp .table-scroll,
body.telegram-webapp .main-content,
body.telegram-webapp .tab-content {
  -webkit-overflow-scrolling: touch;
}

/* Hide footer and spacer in Telegram */
body.telegram-webapp .site-footer,
body.telegram-webapp .page-bottom-spacer {
  display: none !important;
}

/* ===== Safe area insets (iPhone notch etc.) ===== */
@supports (padding: env(safe-area-inset-top)) {
  body.telegram-webapp {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ===== Modals in Telegram ===== */
body.telegram-webapp .auth-modal-overlay,
body.telegram-webapp .upgrade-modal-overlay,
body.telegram-webapp .payment-modal-overlay {
  /* Ensure modals respect Telegram viewport */
  height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh);
}

/* ===== Links — use Telegram accent color ===== */
body.telegram-webapp a {
  color: var(--tg-theme-link-color, #6ab2f2);
}

/* ===== Buttons — use Telegram button color ===== */
body.telegram-webapp .auth-btn-primary,
body.telegram-webapp .btn-primary,
body.telegram-webapp .upgrade-btn {
  background: var(--tg-theme-button-color, #5288c1);
  color: var(--tg-theme-button-text-color, #ffffff);
}

/* ===== Hide elements not needed in Telegram ===== */
body.telegram-webapp .google-auth-btn,
body.telegram-webapp .auth-btn-google {
  /* Hide Google auth in Telegram — auto-auth is used */
  display: none !important;
}

body.telegram-webapp .auth-divider {
  /* Hide "or" divider between auth methods */
  display: none !important;
}

/* ===== Status banner adjustment ===== */
body.telegram-webapp #status-banner-wrapper {
  /* Account for Telegram header */
  top: 0;
}

/* ===== Mobile menu adjustments ===== */
body.telegram-webapp .mobile-menu {
  /* Use Telegram viewport height */
  max-height: 100dvh;
  max-height: var(--tg-viewport-stable-height, 100dvh);
}

/* ===== Coin panel in Telegram ===== */
body.telegram-webapp .coin-panel {
  max-height: 100dvh;
  max-height: var(--tg-viewport-stable-height, 100dvh);
}

/* ===== User dropdown in Telegram ===== */
body.telegram-webapp .user-dropdown #menu-logout {
  display: none !important;
}

/* ===== Smoother transitions ===== */
body.telegram-webapp .modal,
body.telegram-webapp .coin-panel,
body.telegram-webapp .dropdown-menu,
body.telegram-webapp .tooltip {
  /* Reduce animations only for interactive elements, not scroll-related */
  transition-duration: 0.15s !important;
}

/* ===== Fix for Telegram keyboard pushing content ===== */
body.telegram-webapp.keyboard-open {
  height: var(--tg-viewport-height, 100vh);
  overflow: hidden;
}

/* ===== Print — never triggered in Telegram ===== */
@media print {
  body.telegram-webapp {
    display: none;
  }
}

/* ===== Telegram Stars pricing ===== */
body.telegram-webapp .stars-price {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

body.telegram-webapp .plan-price .currency {
  display: none;
}

/* Stars button styling */
body.telegram-webapp .unlock-button.gradient[data-plan="pro"] {
  background: linear-gradient(135deg, #6b8aff 0%, #9b6bff 50%, #ff6bba 100%);
  border: none;
  font-weight: 600;
}

/* ===== Bottom tab bar adjustments for Telegram ===== */
body.telegram-webapp .bottom-tab-bar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 8px));
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 16px 16px 0 0;
}

body.telegram-webapp {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 8px)) !important;
}