/* Bottom navigation - icon-only liquid glass with animated indicator */
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(12px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px;
    width: min(360px, calc(100% - 24px));
    height: var(--nav-height);
    border-radius: 999px;
}

.nav-liquid-indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 60px;
    height: calc(100% - 12px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(124,231,255,0.28), rgba(168,128,255,0.20));
    box-shadow: 0 0 22px rgba(124,231,255,0.42), inset 0 1px 0 rgba(255,255,255,0.35);
    transition:
        transform var(--dur) var(--ease-spring),
        width var(--dur) var(--ease-spring);
    pointer-events: none;
}

.nav-item {
    position: relative;
    z-index: 1;
    flex: 1;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-3);
    border-radius: 999px;
    transition:
        color var(--dur) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}
.nav-item svg {
    width: 24px;
    height: 24px;
    transition: transform var(--dur) var(--ease-spring);
}
.nav-item:active { transform: scale(0.94); }
.nav-item.is-active { color: var(--text-1); }
.nav-item.is-active svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(124,231,255,0.6));
}
.nav-item .nav-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 8px;
    height: 8px;
    background: var(--accent-3);
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--bg-elevated);
}

@media (prefers-reduced-motion: reduce) {
    .nav-liquid-indicator { transition: transform var(--dur-fast) linear, width var(--dur-fast) linear; }
    .nav-item svg { transition: none; }
}