/* ----------------------------- */
/* Oircle Bottom Navigation Dock */
/* ----------------------------- */

.o-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);

    z-index: 999;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0px;

    width: fit-content;
    max-width: calc(100vw - 45px);

    padding: 10px;
}

/* Optional: when open, lift slightly so it feels like it blooms out of the dock */
.o-bottom-nav .o-morph-menu:hover,
.o-bottom-nav .o-morph-menu.is-open {
    transform: translateY(-4px);
}

/* Stops huge open menus from disappearing off small screens */
@media (max-width: 560px) {
    .o-bottom-nav {
        gap: 8px;
        padding: 8px;
        max-width: calc(100vw - 16px);
    }

    .o-bottom-nav .o-morph-menu {
        --closed-size: 44px;
    }
}