/* ===============================
    BOTTOM NAVIGATION BAR
    =============================== */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* 🔥 Важно: поднимаем поверх всего */
    z-index: 9999;

    background: transparent;
    border-top: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px);
    box-sizing: border-box;
    width: 100%;

    display: flex;
    justify-content: center;
}

/* Dock Container */
.newdock {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;

    background: color-mix(in oklab, var(--bg-elev) 94%, #000 6%);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 6px 4px;

    /* 🔥 Поднимаем поверх карточек */
    position: relative;
    z-index: 9999;

    max-width: 420px;
    width: calc(100% - 28px);
    margin: 0 auto;

    box-shadow: 0 10px 24px rgba(0,0,0,.4);

    padding-left: calc(6px + env(safe-area-inset-left));
    padding-right: calc(6px + env(safe-area-inset-right));
}

/* Navigation Buttons */
.nav-btn {
    appearance: none;
    border: 0;
    background: transparent;

    height: var(--nav-btn-h);
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    border-radius: 18px;

    /* icons / emoji */
    font-size: 24px;
    cursor: pointer;
}

/* Active tab highlight */
.nav-btn.active {
    background: var(--card);
    color: var(--accent);
}