.bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    /* Centred toasts must clear the floating deposit button (its peak is ~98px), not only the bar. */
    .toast-stack,
    .toast-stack:popover-open {
        bottom: calc(106px + env(safe-area-inset-bottom));
    }

    .bottom-nav {
        position: fixed;
        z-index: 70;
        inset: auto 0 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        align-items: stretch;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 0 8px env(safe-area-inset-bottom);
    }

    /* Bar with a centered fold: the notch keeps a fixed size while the flat sides stretch. */
    .bottom-nav-shape {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        filter: drop-shadow(0 -6px 14px #0000005c);
    }

    .bottom-nav-shape svg {
        overflow: visible;
    }

    .bottom-nav-item,
    .bottom-nav-center {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        border: 0;
        border-radius: 14px;
        background: transparent;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 13px;
        letter-spacing: 0.01em;
        text-align: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav-item {
        gap: 4px;
        padding: 13px 2px 0;
        color: #7f93b5;
        transition: color 0.18s;
    }

    .bottom-nav-item::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 18px;
        height: 3px;
        margin-left: -9px;
        border-radius: 0 0 3px 3px;
        background: #5b98ff;
        box-shadow: 0 0 10px #5b98ffb3;
        content: '';
        opacity: 0;
        transform: scaleX(0.3);
        transition:
            opacity 0.18s,
            transform 0.18s;
    }

    .mobile-nav-icon {
        display: block;
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        transition:
            color 0.18s,
            transform 0.18s;
    }

    .mobile-nav-icon .icon-soft {
        fill: currentColor;
        stroke: none;
        opacity: 0;
        transition: opacity 0.18s;
    }

    .bottom-nav-item.active,
    .bottom-nav-menu[aria-expanded='true'] {
        color: #e6efff;
    }

    .bottom-nav-item.active::before,
    .bottom-nav-menu[aria-expanded='true']::before {
        opacity: 1;
        transform: none;
    }

    .bottom-nav-item.active .mobile-nav-icon,
    .bottom-nav-menu[aria-expanded='true'] .mobile-nav-icon {
        color: #5b98ff;
    }

    .bottom-nav-item.active .mobile-nav-icon .icon-soft,
    .bottom-nav-menu[aria-expanded='true'] .mobile-nav-icon .icon-soft {
        opacity: 0.28;
    }

    .bottom-nav-item:active .mobile-nav-icon {
        transform: scale(0.9);
    }

    .bottom-nav-center {
        padding: 39px 0 0;
        color: #d4e2fb;
        font-weight: 700;
    }

    .bottom-nav-deposit-icon {
        position: absolute;
        top: -31px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        margin-left: -29px;
        border: 2px solid transparent;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 30%, #1d3f7a, #0c1c3d 64%, #081530) padding-box,
            linear-gradient(150deg, #67e8f9, #38bdf8 24%, #2563eb 62%, #1e3a8a) border-box;
        box-shadow:
            0 0 18px #2563eb66,
            0 8px 18px #00000073,
            inset 0 1px 0 #ffffff1f;
        animation: bottom-nav-float 3.6s ease-in-out infinite;
        transition: scale 0.18s;
    }

    .bottom-nav-deposit-icon img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        filter: drop-shadow(0 3px 3px #00000059);
    }

    .bottom-nav-center:active .bottom-nav-deposit-icon {
        scale: 0.94;
    }

    .bottom-nav-item:focus-visible {
        outline: 2px solid #75aaff;
        outline-offset: -3px;
    }

    .bottom-nav-center:focus-visible {
        outline: none;
    }

    .bottom-nav-center:focus-visible .bottom-nav-deposit-icon {
        outline: 2px solid #9cc4ff;
        outline-offset: 3px;
    }
}

@media (max-width: 900px) and (hover: hover) {
    .bottom-nav-item:hover {
        color: #b9cbe8;
    }

    .bottom-nav-item.active:hover,
    .bottom-nav-menu[aria-expanded='true']:hover {
        color: #e6efff;
    }

    .bottom-nav-center:hover {
        color: #ffffff;
    }

    .bottom-nav-center:hover .bottom-nav-deposit-icon {
        scale: 1.05;
    }

    .bottom-nav-center:hover:active .bottom-nav-deposit-icon {
        scale: 0.94;
    }
}

@keyframes bottom-nav-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-deposit-icon {
        animation: none;
        transition: none;
    }

    .bottom-nav-item,
    .bottom-nav-item::before,
    .mobile-nav-icon,
    .mobile-nav-icon .icon-soft {
        transition: none;
    }
}

@media (max-width: 360px) {
    .bottom-nav {
        gap: 0;
        padding-inline: 4px;
    }

    .bottom-nav-item,
    .bottom-nav-center {
        font-size: 10px;
    }
}