/**
 * telegram.css - Telegram Mini App (TMA) 專屬視口與環境適配層
 */

/* 視口高度修復與外滾動防禦 */
html.telegram-webapp,
body.telegram-webapp {
  height: 100%;
  height: var(--tg-viewport-height, 100dvh);
  overflow: hidden;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Telegram Mini App 容器限制 */
.tma-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: var(--tg-viewport-height, 100dvh);
  max-width: var(--max-content-width);
  margin: 0 auto;
  position: relative;
  background-color: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* 安全邊距處理 */
.tma-header {
  padding-top: max(var(--safe-area-top), 8px);
}

.tma-footer {
  padding-bottom: max(var(--safe-area-bottom), 12px);
}

/* 停用 iOS 預設長按反白與選單行為 */
.telegram-webapp * {
  -webkit-touch-callout: none;
  user-select: none;
}

.telegram-webapp input,
.telegram-webapp textarea {
  user-select: auto;
}

/* Telegram 原生主題色整合 (當在 TG 環境中自動對齊) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--tg-theme-bg-color, #040B1F);
  }
}

/* Existing Telegram entry markup uses the application-specific class names. */
.telegram-mini-app {
  min-height: var(--telegram-height, 100dvh);
  padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
  padding-right: max(env(safe-area-inset-right, 0px), var(--telegram-safe-right, 0px));
  padding-left: max(env(safe-area-inset-left, 0px), var(--telegram-safe-left, 0px));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--telegram-safe-bottom, 0px));
}

.telegram-entry {
  min-height: var(--telegram-height, 100dvh);
  display: grid;
  place-items: center;
  padding: var(--spacing-xl) var(--spacing-base);
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.telegram-entry__card {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: var(--spacing-lg);
  overflow-wrap: anywhere;
}

.telegram-entry__card p { line-height: var(--line-height-loose); }
.telegram-entry__card a { color: inherit; text-decoration: underline; padding: var(--spacing-sm) 0; }
.telegram-entry__card .btn { white-space: normal; min-height: 44px; }
.telegram-mini-app .bottom-nav {
  bottom: max(env(safe-area-inset-bottom, 0px), var(--telegram-safe-bottom, 0px));
}