/* Нижняя панель разделов на телефоне — плашка со скруглением.
 *
 * Было: полоса во всю ширину, вплотную к нижнему краю, залитая красным на 60%.
 * Белые прописные подписи по красному читались тяжело, а активный раздел был
 * помечен чёрным по красному — почти неразличимо.
 *
 * Стало: панель отделена от краёв и приподнята, подложка под ней размывается
 * (backdrop-filter) — тот же приём, что у панелей Apple Music и Telegram.
 * Красный остаётся, но как цвет активного раздела, а не как заливка всей
 * панели: так видно, где ты находишься.
 *
 * Про saturate: без него размытая подложка сереет. Насыщенность поднимают,
 * чтобы сквозь стекло проступал цвет того, что под ним.
 *
 * Ширина — по содержимому, а не во всю строку: панель из четырёх значков не
 * должна растягиваться от края до края, воздух по бокам ей идёт. На узком
 * экране она упирается в max-width и ведёт себя как прежде.
 *
 * env(safe-area-inset-bottom) — отступ под системную полоску жеста на iPhone;
 * без него кнопки оказываются прямо под ней.
 *
 * Значки вставлены в разметку как svg (build/patch-tabbar.mjs), поэтому берут
 * цвет от строки — картинкой их было бы не перекрасить.
 */

.t975 {
    left: 0 !important;
    right: 0 !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: saturate(190%) blur(26px);
    backdrop-filter: saturate(190%) blur(26px);
    border: 1px solid rgba(0, 0, 0, .10) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .75);
    overflow: hidden;
    /* Панель не уезжает вниз при прокрутке. Тильда прячет её, дописывая
       transform прямо в стиль элемента; правило из таблицы с !important
       сильнее строчного, поэтому смещение не сработает, даже если её скрипт
       всё-таки решит его применить. */
    transform: none !important;
}

/* Блик по верхней кромке — от него плашка читается как стекло, а не как
   полупрозрачный прямоугольник. */
.t975::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 46%);
}

.t975__wrapper { position: relative; z-index: 1; }
.t975__inner-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 2px;
    padding: 7px 4px 8px !important;
}
.t975__list-item { flex: 0 0 auto !important; width: auto !important; min-width: 0; }
.t975__menu-link { display: block; padding: 0 9px !important; }

.t975__menu-link {
    color: #6b6770;
    transition: color .18s ease, transform .12s ease;
}
.t975__menu-link:active { transform: scale(.93); }

.t975__menu-icon {
    width: 24px !important;
    height: 24px !important;
    display: block;
    color: inherit;
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.t975__menu-text {
    color: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    margin-top: 3px !important;
}

/* Текущий раздел — красным, значок чуть крупнее и выше. */
.t975__menu-link.t-active,
.t-active .t975__menu-text { color: #b60000 !important; }
.t975__menu-link.t-active .t975__menu-icon { transform: translateY(-1px) scale(1.06); }

.t975__menu-link:focus-visible { outline: 2px solid #b60000; outline-offset: 2px; border-radius: 14px; }

/* Где стекла нет — панель должна остаться читаемой, а не полупрозрачной. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .t975 { background: rgba(255, 255, 255, .96) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .t975__menu-link, .t975__menu-icon { transition: none; }
    .t975__menu-link:active { transform: none; }
}