/* Нижнее меню портала: полоса вкладок и кнопка пропуска. */
/* --- shell + content clearance --- */
    body.nav-brand { --bottom-nav-h: 64px; }
    body.nav-ios   { --bottom-nav-h: 96px; }
    body.nav-md    { --bottom-nav-h: 80px; }
    body.nav-brand, body.nav-ios, body.nav-md {
        padding-bottom: calc(var(--bottom-nav-h) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }

    /* Dark-theme elevation done right: the page gradient bottoms out at
       #1e293b, so a DARKER bar (the old rgba(15,23,42,.92)) read as part of
       the background — users couldn't separate it. A raised surface on dark
       must be LIGHTER than what it floats over (Material dark elevation =
       white overlay), plus a lit top edge and an ambient shadow upward. */
    /* Своя группа перехода между документами — полоса не гаснет вместе со
       страницей на смене вкладки. Разбор механики и требование уникальности
       имени — рядом с `@view-transition` в chrome.css. */
    .bp-bottom-nav {
        view-transition-name: bottom-nav;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        background: linear-gradient(180deg, #2d3c58, #1a253a);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),       /* specular top sheen */
            0 -20px 44px -20px rgba(0, 0, 0, 0.65);        /* ambient lift */
        padding: 8px 6px calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }
    /* Scrim: content dips into shadow just above the bar — the iOS-native
       trick that separates a translucent bar from busy content. Must not
       eat taps on the protruding QR button → pointer-events: none. */
    .bp-bottom-nav::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -30px;
        height: 30px;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(6, 10, 19, 0.45));
    }
    @supports not (backdrop-filter: blur(1px)) {
        .bp-bottom-nav { background: #1d2942; }
    }
    /* Desktop: web is mostly opened from phones, but when it isn't —
       keep the bar, just don't stretch it across a 1900px screen. */
    @media (min-width: 768px) {
        .bp-bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 420px; border-radius: 18px 18px 0 0; border-left: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12); }
        .bp-bottom-nav::before { display: none; } /* rounded island needs no full-width scrim */
    }

    body.qr-modal-open .bp-bottom-nav,
    body.booking-overlay-open .bp-bottom-nav { display: none; }


    /* --- tabs (brand defaults) --- */
    .bnav-tab {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding-top: 6px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: #a8b6cc; /* a notch brighter — sits on the lighter raised surface */
        font-family: var(--ff-body);
        font-size: var(--bp-fs-micro);
        font-weight: 600;
        line-height: 1.1;
        transition: color .15s ease;
    }
    /* The `hidden` attribute must beat .bnav-tab's `display: flex`. Author
       `display` rules override the UA `[hidden] { display: none }` rule (a
       classic gotcha), so without this the Профиль↔Чат swap (which toggles
       the hidden attribute) never hides the tab at all. */
    .bnav-tab[hidden] { display: none !important; }
    .bnav-tab.on { color: var(--bp-green); }
    .bnav-tab.on .bnav-icon {
        filter: drop-shadow(0 0 6px rgba(146, 196, 58, 0.55));
    }
    .bnav-tab .bnav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--bp-fs-title);
        line-height: 1;
            /* Размер задан коробкой, а не глифом: пока иконочный шрифт едет,
       фолбэк меряется по-своему и полоса подрагивает при подмене */
        width: 22px;
        height: 22px;
    }
    .bnav-badge {
        position: absolute;
        top: 2px;
        right: 50%;
        margin-right: -24px;
        font-family: var(--ff-mono);
        font-size: 8px;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 6px;
        background: rgba(146, 196, 58, 0.2);
        color: var(--bp-green);
    }
    .bnav-badge[hidden] { display: none; }
    /* Сводный счётчик раздела «Сообщения» — РЕД, чтобы непрочитанное нельзя
       было не заметить (приглушённая зелёная пилюля сливалась с панелью).
       Именно #nav-inbox-badge, чтобы школьный бейдж остался зелёным. */
    #nav-inbox-badge {
        background: var(--bp-stamp-red, #c8372a);
        color: #fff;
        font-size: var(--bp-fs-micro);
        font-weight: 800;
        padding: 1px 5px;
        box-shadow: 0 0 0 2px rgba(8, 13, 24, 0.55);
    }
    body.nav-md #nav-inbox-badge {
        background: var(--bp-stamp-red, #c8372a);
        color: #fff;
        font-size: var(--bp-fs-micro);
    }

    /* --- center QR button (brand: raised rounded square) --- */
    .bnav-center { flex: 1; display: flex; justify-content: center; }
    .bnav-qr {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        margin-top: -22px;
        border: none;
        cursor: pointer;
        background: var(--bp-green);
        color: var(--bp-ink);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        font-family: var(--ff-display);
        font-weight: 900;
        box-shadow: 0 8px 20px rgba(146, 196, 58, 0.45);
        transition: transform .12s ease;
    }
    .bnav-qr:active { transform: scale(0.95); }
    .bnav-qr i { font-size: var(--bp-fs-title); line-height: 1; }
    .bnav-qr .bnav-qr-label {
        font-size: 8px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    @media (max-width: 340px) { .bnav-tab .bnav-label { display: none; } }

    /* iOS: непрозрачная плавающая панель. Фон не зависит от появления
       контента и пересборки backdrop-filter в WebKit при навигации. */
    body.nav-ios .bp-bottom-nav {
        left: 12px;
        right: 12px;
        bottom: calc(14px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
        border-radius: 30px;
        border-top: none;
        background: linear-gradient(180deg, #2b3953, #202c44);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.24);
        box-shadow:
            inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.22),
            inset -1px -1px 1px rgba(255, 255, 255, 0.07),
            0 18px 44px rgba(0, 0, 0, 0.6),
            0 4px 12px rgba(0, 0, 0, 0.35);
        padding: 9px 6px 11px;
        overflow: visible;
    }
    /* Specular glint — a soft light streak along the upper third of the
       glass (replaces the full-width scrim, which a floating pill
       doesn't need). */
    body.nav-ios .bp-bottom-nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 30%;
        height: 45%;
        pointer-events: none;
        border-radius: 30px 30px 50% 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
    }
    body.nav-ios .bnav-tab {
        font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
        font-size: var(--bp-fs-micro);
        font-weight: 500;
        color: rgba(235, 235, 245, 0.72);
    }
    body.nav-ios .bnav-tab.on { color: var(--bp-green); }
    body.nav-ios .bnav-qr {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        margin-top: -26px;
        background: linear-gradient(160deg, #aee055, #84b832);
        box-shadow:
            0 10px 26px rgba(146, 196, 58, 0.5),
            inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.5),
            inset -1px -1px 2px rgba(0, 0, 0, 0.12);
    }

    /* ================= Android · Material 3 ================= */
    /* M3 surface-container: lighter than the page background (same
       elevation physics as nav-brand), flat per Material — separation
       comes from tone + hairline, not glass effects. */
    body.nav-md .bp-bottom-nav {
        align-items: center;
        height: calc(80px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
        background: #232e45;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: none;
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.1),
            0 -12px 28px -16px rgba(0, 0, 0, 0.55);
        padding: 0 4px var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    }
    body.nav-md .bp-bottom-nav::before { display: none; } /* M3: no scrim */
    body.nav-md .bnav-tab {
        font-family: 'Roboto', system-ui, sans-serif;
        font-size: var(--bp-fs-caption);
        font-weight: 500;
        gap: 4px;
        padding-top: 0;
    }
    body.nav-md .bnav-tab .bnav-icon {
        width: 64px;
        height: 32px;
        border-radius: 16px;
        font-size: var(--bp-fs-title);
        transition: background .2s ease;
    }
    body.nav-md .bnav-tab.on .bnav-icon { background: rgba(146, 196, 58, 0.22); }
    body.nav-md .bnav-tab.on { color: var(--bp-green); font-weight: 700; }
    body.nav-md .bnav-badge { top: -3px; margin-right: -30px; background: var(--bp-orange, #f97316); color: #fff; font-size: var(--bp-fs-micro); }
    body.nav-md .bnav-qr {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        margin-top: 0;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    @media (max-width: 360px) { body.nav-md .bnav-label { display: none; } }