/*
 * Раскладка web/TMA-оболочки.
 *
 * Телефон (TMA на iOS/Android, мобильный браузер): приложение занимает весь webview.
 * Desktop / широкий браузер: приложение тянется по ширине, но не шире --app-max-width,
 * центрируется и получает рамку — UI остаётся «телефонным».
 *
 * Порог рамки в @media должен совпадать с --app-max-width + 2 * --app-gap:
 * media-условие не умеет читать custom properties.
 */
:root {
    /* Логическая ширина iPhone 13/14/15 — типовой телефонный фрейм в макетах. */
    --app-max-width: 390px;
    --app-gap: 16px;
    --app-radius: 40px;
    --app-backdrop: #1e1e22;
    --app-surface: #000;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--app-backdrop);
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-root {
    width: 100%;
    max-width: var(--app-frame-width, none);
    height: 100%;
    height: calc(100dvh - var(--app-frame-gap, 0px));
    background: var(--app-surface);
    border-radius: var(--app-frame-radius, 0);
    box-shadow: var(--app-frame-shadow, none);
    overflow: hidden;
}

/* Клиент сам сказал, что он desktop, — рамка не зависит от типа указателя. */
@media (min-width: 423px) {
    html[data-tma-mode="desktop"] #app-root {
        --app-frame-width: var(--app-max-width);
        --app-frame-gap: calc(2 * var(--app-gap));
        --app-frame-radius: var(--app-radius);
        --app-frame-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    }
}

/*
 * Режим неизвестен (Telegram SDK не загружен или это обычный браузер): рамку показываем
 * только при мышином указателе, иначе планшет и телефон в ландшафте получили бы её зря.
 */
@media (min-width: 423px) and (pointer: fine) {
    html:not([data-tma-mode]) #app-root {
        --app-frame-width: var(--app-max-width);
        --app-frame-gap: calc(2 * var(--app-gap));
        --app-frame-radius: var(--app-radius);
        --app-frame-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    }
}

/* В TMA на телефоне webview «дышит» (bounce, панели клиента) — прибиваем корень к вьюпорту. */
html[data-tma-mode="mobile"] #app-root {
    position: fixed;
    inset: 0;
    height: auto;
}

/* Позиционирующий контейнер ComposeViewport: сам canvas лежит в shadow DOM и стилями отсюда недоступен. */
#app-root > div {
    width: 100%;
    height: 100%;
    overflow: hidden;
}