/*
 * POPUTCHIK — нижняя мобильная навигация.
 *
 * Важно:
 * --bottom-nav-total-height используется
 * другими компонентами, включая чат.
 *
 * Общая высота панели задаётся точно:
 *
 * высота интерфейса + safe-area устройства.
 */


/* =========================================================
   Переменные
   ========================================================= */

:root {
    --bottom-nav-height: 68px;

    --bottom-nav-safe-area:
        env(
            safe-area-inset-bottom,
            0px
        );

    --bottom-nav-total-height:
        calc(
            var(--bottom-nav-height)
            + var(--bottom-nav-safe-area)
        );

    --bottom-nav-z-index: 1500;
}


/* =========================================================
   Базовое состояние
   ========================================================= */

.bottom-nav {
    display: none;
}

.bottom-nav[hidden] {
    display: none !important;
}


/* =========================================================
   Мобильная навигация
   ========================================================= */

@media (max-width: 700px) {
    .bottom-nav {
        position: fixed;

        z-index:
            var(
                --bottom-nav-z-index
            );

        right: 0;
        bottom: 0;
        left: 0;

        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        width: 100%;
        height:
            var(
                --bottom-nav-total-height
            );

        min-height: 0;

        align-items: stretch;

        gap: 0;

        margin: 0;

        padding:
            7px
            8px
            calc(
                7px
                + var(
                    --bottom-nav-safe-area
                )
            );

        box-sizing: border-box;

        background:
            color-mix(
                in srgb,
                var(--bg) 94%,
                transparent
            );

        border-top:
            1px solid
            color-mix(
                in srgb,
                var(--border) 88%,
                transparent
            );

        box-shadow:
            0
            -10px
            30px
            rgba(
                0,
                0,
                0,
                0.22
            );

        overflow: hidden;

        -webkit-backdrop-filter:
            blur(18px);

        backdrop-filter:
            blur(18px);

        isolation: isolate;

        /*
         * Не даём браузеру менять геометрию
         * панели из-за внутренних элементов.
         */
        contain:
            layout
            paint;
    }


    /* =====================================================
       Элемент навигации
       ===================================================== */

    .bottom-nav-item {
        position: relative;

        display: flex;
        flex-direction: column;

        min-width: 0;
        min-height: 54px;

        align-items: center;
        justify-content: center;

        gap: 3px;

        margin: 0;

        padding:
            5px
            4px;

        box-sizing: border-box;

        color: var(--muted);
        background: transparent;

        border:
            1px solid
            transparent;

        border-radius: 13px;

        font-family: inherit;

        text-decoration: none;

        -webkit-tap-highlight-color:
            transparent;

        transition:
            color 0.16s ease,
            background-color 0.16s ease,
            border-color 0.16s ease,
            transform 0.16s ease;
    }

    .bottom-nav-item:hover {
        color: var(--text);

        background:
            color-mix(
                in srgb,
                var(--surface-hover) 72%,
                transparent
            );

        text-decoration: none;
    }

    .bottom-nav-item:active {
        transform:
            scale(0.97);
    }

    .bottom-nav-item:focus-visible {
        outline:
            3px solid
            color-mix(
                in srgb,
                var(--accent) 44%,
                transparent
            );

        outline-offset: -2px;
    }


    /* =====================================================
       Активный элемент
       ===================================================== */

    .bottom-nav-item.active,
    .bottom-nav-item[aria-current="page"] {
        color: var(--accent);

        background:
            color-mix(
                in srgb,
                var(--accent) 13%,
                transparent
            );

        border-color:
            color-mix(
                in srgb,
                var(--accent) 24%,
                transparent
            );
    }


    /* =====================================================
       Иконка
       ===================================================== */

    .bottom-nav-icon {
        position: relative;

        display: inline-flex;

        width: 28px;
        height: 28px;

        flex:
            0
            0
            28px;

        align-items: center;
        justify-content: center;

        color: inherit;

        pointer-events: none;
    }

    .bottom-nav-icon svg {
        display: block;

        width: 23px;
        height: 23px;

        flex:
            0
            0
            23px;

        stroke-width: 2;

        transition:
            transform 0.16s ease;
    }

    .bottom-nav-item.active
    .bottom-nav-icon svg,
    .bottom-nav-item[aria-current="page"]
    .bottom-nav-icon svg {
        transform:
            translateY(-1px);
    }


    /* =====================================================
       Подпись
       ===================================================== */

    .bottom-nav-label {
        display: block;

        width: 100%;
        min-width: 0;

        color: inherit;

        font-size: 0.63rem;
        font-weight: 650;
        line-height: 1.15;

        text-align: center;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        pointer-events: none;
    }

    .bottom-nav-item.active
    .bottom-nav-label,
    .bottom-nav-item[aria-current="page"]
    .bottom-nav-label {
        font-weight: 760;
    }


    /* =====================================================
       Счётчик уведомлений
       ===================================================== */

    .bottom-nav .badge {
        position: absolute;

        z-index: 2;

        top: 2px;
        left:
            calc(
                50%
                + 8px
            );

        display: inline-flex;

        min-width: 18px;
        height: 18px;

        align-items: center;
        justify-content: center;

        padding:
            0
            5px;

        box-sizing: border-box;

        color: #ffffff;
        background: var(--danger);

        border:
            2px solid
            var(--bg);

        border-radius: 999px;

        font-size: 0.61rem;
        font-weight: 800;
        line-height: 1;

        font-variant-numeric:
            tabular-nums;

        white-space: nowrap;

        pointer-events: none;
    }

    .bottom-nav .badge:empty {
        display: none;
    }
}


/* =========================================================
   Маленькие телефоны
   ========================================================= */

@media (max-width: 370px) {
    .bottom-nav {
        padding-right: 5px;
        padding-left: 5px;
    }

    .bottom-nav-item {
        min-height: 54px;

        padding-right: 2px;
        padding-left: 2px;
    }

    .bottom-nav-label {
        font-size: 0.58rem;
    }

    .bottom-nav-icon svg {
        width: 22px;
        height: 22px;
    }
}


/* =========================================================
   Низкий горизонтальный экран
   ========================================================= */

@media (
    max-width: 700px
) and (
    max-height: 520px
) and (
    orientation: landscape
) {
    :root {
        --bottom-nav-height: 58px;
    }

    .bottom-nav {
        padding:
            4px
            6px
            calc(
                4px
                + var(
                    --bottom-nav-safe-area
                )
            );
    }

    .bottom-nav-item {
        min-height: 46px;

        gap: 1px;

        padding:
            2px
            3px;
    }

    .bottom-nav-icon {
        width: 24px;
        height: 24px;

        flex-basis: 24px;
    }

    .bottom-nav-icon svg {
        width: 21px;
        height: 21px;
    }

    .bottom-nav-label {
        font-size: 0.58rem;
    }

    .bottom-nav .badge {
        top: 0;
    }
}


/* =========================================================
   Печать
   ========================================================= */

@media print {
    .bottom-nav {
        display: none !important;
    }
}


/* =========================================================
   Уменьшение анимации
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .bottom-nav-item,
    .bottom-nav-icon svg {
        transition: none;
    }

    .bottom-nav-item:active {
        transform: none;
    }
}