/* Telegram Mini App — balandlik va safe-area (100vh o‘rniga --tg-app-height) */

:root {
  --tg-app-height: 100dvh;
  --tg-viewport-stable-height: 100dvh;
  --tg-safe-inset-top: env(safe-area-inset-top, 0px);
  --tg-safe-inset-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-inset-left: env(safe-area-inset-left, 0px);
  --tg-safe-inset-right: env(safe-area-inset-right, 0px);
}

html.tg-mini-app,
html.tg-mini-app body {
  min-height: var(--tg-app-height, 100dvh);
  height: auto;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

.app-root {
  box-sizing: border-box;
  min-height: var(--tg-app-height, 100dvh);
  width: 100%;
  max-width: 100%;
  padding-top: var(--tg-safe-inset-top);
  padding-bottom: calc(12px + var(--tg-safe-inset-bottom));
  padding-left: var(--tg-safe-inset-left);
  padding-right: var(--tg-safe-inset-right);
  overflow-x: hidden;
}

/* Panel sahifalari */
html.tg-mini-app .panel-body.app-root {
  display: flex;
  flex-direction: column;
}

html.tg-mini-app .panel-loading {
  min-height: calc(
    var(--tg-app-height, 100dvh) - var(--tg-safe-inset-top) - var(--tg-safe-inset-bottom)
  );
}

html.tg-mini-app .panel-body.app-root {
  display: flex;
  flex-direction: column;
  height: var(--tg-app-height, 100dvh);
  max-height: var(--tg-app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

html.tg-mini-app .panel-wrap--user,
html.tg-mini-app .panel-wrap--admin {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

html.tg-mini-app .panel-wrap--user > .user-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

html.tg-mini-app .lesson-page.app-root {
  height: var(--tg-app-height, 100dvh);
  max-height: var(--tg-app-height, 100dvh);
  overflow: hidden;
}

html.tg-mini-app .panel-wrap:not(.panel-wrap--user):not(.panel-wrap--admin) {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0.75rem 0.85rem 1.5rem;
}

/* Test sahifasi */
html.tg-mini-app .test-page.app-root {
  background: #f2f6ff;
  padding-bottom: calc(1rem + var(--tg-safe-inset-bottom));
}

html.tg-mini-app .test-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 1rem 0.85rem 1.25rem;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

html.tg-mini-app .test-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-top: 0.75rem;
  padding-bottom: var(--tg-safe-inset-bottom);
  background: linear-gradient(
    to top,
    #fff 75%,
    rgba(255, 255, 255, 0.95) 90%,
    transparent
  );
  margin: 0 -0.85rem -0.5rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

/* Kichik telefon */
@media (max-width: 768px) {
  .panel-header h1 {
    font-size: 1.15rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .stat-num {
    font-size: 1.2rem;
  }

  .btn,
  .panel-card input[type="text"],
  .submit-button {
    min-height: 48px;
    font-size: 16px; /* iOS zoom oldini olish */
  }

  html.tg-mini-app .test-container {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    padding: 0.75rem 0.65rem 0.5rem;
  }

  html.tg-mini-app .test-page.app-root {
    padding-left: 0;
    padding-right: 0;
  }

  .question .options {
    flex-wrap: wrap;
    gap: 8px;
  }

  .question .options button {
    flex: 1 1 calc(50% - 8px);
    min-width: 56px;
    min-height: 44px;
    padding: 12px 8px;
    font-size: 15px;
  }

  .question .free-answer {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 10px 12px;
  }

  .question-number {
    font-size: 15px;
    margin-bottom: 8px;
  }
}

@media (max-width: 380px) {
  .question .options button {
    flex: 1 1 100%;
  }
}