/*
  Прототипы нарисованы на холсте под экран 390×844.
  Здесь они растягиваются на весь экран телефона или окно Telegram,
  а на широком экране (ноутбук) показываются в рамке телефона по центру.
  Стили со !important перебивают размеры, зашитые в style="..." экранов.
*/

:root {
  --app-h: var(--tg-viewport-stable-height, 100dvh);
  /* В полноэкранном режиме Telegram сверху строка состояния телефона и кнопки Telegram поверх страницы.
     Их высоту SDK кладёт в эти переменные; в обычном режиме и вне Telegram они пустые — отступ 0. */
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}

html, body { height: 100%; margin: 0; }
body { overflow: hidden; overscroll-behavior: none; background: #ffffff; }

#dc-root { box-sizing: border-box; width: 100%; height: var(--app-h); padding-top: var(--tg-top); }
#dc-root .sc-host { width: 100%; height: 100%; }

/*
  Прокручиваемые колонки — flex-колонки. На холсте экран был 797–844 px и всё помещалось,
  а в Telegram экран ниже: браузер сжимает блоки с overflow:hidden до нуля вместо прокрутки.
  Запрещаем блокам внутри таких колонок сжиматься — тогда колонка прокручивается.
*/
#dc-root [style*="overflow-y: auto"] > *,
#dc-root .scroll > * { flex-shrink: 0 !important; }

/* Альтернативная схема: онбординг и подписка на холсте помещались без прокрутки, на низком экране — прокручиваются */
html[data-proto="alt"] #dc-root main { min-height: 0; overflow-y: auto; scrollbar-width: none; }
html[data-proto="alt"] #dc-root main > * { flex-shrink: 0 !important; }

/* ── Вариант по ТЗ: каркас экрана — класс .app из pmd.css ── */
html[data-proto="tz"] .app { width: 100% !important; height: 100% !important; }

/* ── Альтернативная схема: размеры зашиты прямо в style ── */
/* корень прототипа */
html[data-proto="alt"] #dc-root > .sc-host > div { width: 100% !important; height: 100% !important; }
/* нарисованная строка состояния «9:41» — в Telegram сверху своя шапка */
html[data-proto="alt"] #dc-root > .sc-host > div > div:first-child { display: none !important; }
/* область экранов была сдвинута вниз на высоту строки состояния */
html[data-proto="alt"] #dc-root > .sc-host > div > div[style*="top: 47px"] { top: 0 !important; width: 100% !important; height: 100% !important; }
/* корни экранов и листов */
html[data-proto="alt"] #dc-root .sc-host > div[style*="width: 390px"] { width: 100% !important; height: 100% !important; }
/* затемнение над строкой состояния и полоска «домой» внизу */
html[data-proto="alt"] #dc-root > .sc-host > div > .scrim[style*="height: 47px"],
html[data-proto="alt"] #dc-root > .sc-host > div > div[style*="width: 134px"] { display: none !important; }

/* ── Ссылка «к выбору прототипа»: видна только на широком экране вне Telegram ── */
.proto-home { display: none; }

@media (min-width: 640px) and (min-height: 720px) {
  /* html body — чтобы перебить body{background:#fff} из стилей самого прототипа */
  html body {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: #e5e5e5;
  }
  #dc-root {
    flex: none; width: 390px; height: min(844px, calc(100dvh - 80px));
    border-radius: 36px; overflow: hidden; background: #ffffff;
    box-shadow: 0 0 0 10px #0a0a0a, 0 24px 60px rgba(0, 0, 0, 0.25);
  }
  html:not(.in-telegram) .proto-home {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #404040; text-decoration: none;
  }
  .proto-home:hover { color: #0a0a0a; }
}