/* =====================================================
   Веб-версия на телефонах — компактная вёрстка
   -----------------------------------------------------
   В Telegram вертикальное место экономит fullscreen-режим
   (tg-fullscreen.css): шапка карточки скрыта, её роль берёт
   капсула бренда сверху. В браузере такого режима нет, и на
   телефоне карточка плеера не влезала в экран — sticky-навбар
   вместе с шапкой карточки занимали около 200px.
   Здесь тот же приём для html.web-mode: шапку карточки прячем
   (лого и имя остаются в навбаре) и сжимаем отступы.
   ===================================================== */

@media (max-width: 600px) {
    /* Навбар — одна невысокая строка */
    html.web-mode .web-navbar-inner {
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        min-height: 48px;
    }

    html.web-mode .web-nav-brand {
        font-size: var(--font-size-sm);
    }

    html.web-mode .web-nav-link {
        font-size: var(--font-size-xs);
    }

    html.web-mode .app-shell {
        padding: var(--space-md);
        padding-top: var(--space-md);
        padding-left: max(var(--space-md), var(--safe-left));
        padding-right: max(var(--space-md), var(--safe-right));
        padding-bottom: max(var(--space-md), var(--safe-bottom));
    }

    /* Лого, имя и подзаголовок дублируют навбар — на телефоне это лишние ~130px */
    html.web-mode .meditation-header {
        display: none;
    }

    html.web-mode .modern-player-card {
        padding: var(--space-md);
    }

    html.web-mode .player-visualization-modern {
        margin: 0 0 var(--space-xs);
        padding: var(--space-xs) 0 0;
        gap: var(--space-xs);
    }

    html.web-mode .player-timeline {
        margin-bottom: var(--space-sm);
    }

    html.web-mode .tracks-container {
        margin: var(--space-xs) 0;
    }

    html.web-mode .meditation-tips {
        margin-top: var(--space-xs);
    }

    html.web-mode .player-controls-panel {
        margin-top: var(--space-sm);
    }
}

/* Невысокие экраны: у мобильных браузеров ещё и адресная строка
   отъедает высоту, поэтому дополнительно ужимаем герой. */
@media (max-width: 600px) and (max-height: 700px) {
    html.web-mode .player-main-btn {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    html.web-mode .player-main-btn i {
        font-size: 1.5rem;
    }

    html.web-mode .visualization-container {
        height: 24px;
    }
}

/* Совсем низкие экраны: подсказку про баланс громкости убираем — она полезная,
   но не обязательная, а плеер целиком важнее. */
@media (max-width: 600px) and (max-height: 640px) {
    html.web-mode .meditation-tips {
        display: none;
    }
}

/* Узкие телефоны: у пилюли подписки остаётся только иконка */
@media (max-width: 380px) {
    html.web-mode .web-nav-sub span {
        display: none;
    }

    html.web-mode .web-nav-sub {
        padding: 8px 10px;
    }
}


/* ===== Подвал с документами =====
   Виден только в браузере: в Telegram те же ссылки живут в «Информации»,
   а здесь их ждёт и читатель, и проверяющий из платёжного сервиса. */
.web-footer {
    display: none;
}

html.web-mode .web-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    max-width: 760px;
    margin: var(--space-lg) auto var(--space-xl);
    padding: 0 var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

html.web-mode .web-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

html.web-mode .web-footer a:hover {
    color: var(--text-primary);
}