/* ============================================================
   Liquid glass mobile bottom nav
   ============================================================ */

/* Doubled class beats page-shell child rules like
   `.marketing-page-shell > :not(.modal-backdrop)` that would
   otherwise override position: fixed. */
.mobile-glass-nav-shell.mobile-glass-nav-shell {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    padding: 0 0 max(0.7rem, env(safe-area-inset-bottom));
    pointer-events: none;
    isolation: isolate;
}

.mobile-glass-nav {
    --glass-compact-scale: 0.81;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(26rem, calc(100vw - 1.5rem));
    min-height: 4.35rem;
    margin: 0 auto;
    padding: 0.35rem;
    pointer-events: auto;
    touch-action: pan-y;
    isolation: isolate;
}

.mobile-glass-nav::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent);
    border-top-color: color-mix(in srgb, var(--foreground) 7%, var(--background));
    border-radius: 1.65rem;
    background: var(--background);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--background) 90%, transparent),
        0 1px 1px color-mix(in srgb, var(--foreground) 8%, transparent),
        0 16px 42px rgba(0, 0, 0, 0.5);
    transform: scale3d(1, 1, 1);
    transform-origin: center bottom;
    transition: transform 220ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.mobile-glass-nav-shell[data-minimized="true"] .mobile-glass-nav::before {
    transform: scale3d(var(--glass-compact-scale), 0.82, 1);
}

.mobile-glass-nav__highlight {
    position: absolute;
    inset: 0.35rem auto 0.35rem 0;
    z-index: 0;
    width: 20%;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: 1.18rem;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 20%, transparent),
            color-mix(in srgb, var(--accent) 9%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--background) 76%, transparent),
        0 5px 16px color-mix(in srgb, var(--accent) 18%, transparent);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform-origin: center bottom;
    transition:
        transform 180ms cubic-bezier(0.77, 0, 0.175, 1),
        opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.mobile-glass-nav-shell:not([data-ready="true"]) .mobile-glass-nav__highlight {
    opacity: 0;
    transition: none;
}

.mobile-glass-nav-shell[data-scrubbing="true"] .mobile-glass-nav__highlight {
    transition: none;
}

.mobile-glass-nav__tab {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 3.65rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 1.15rem;
    color: var(--muted-foreground);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    transition:
        color 140ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 220ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.mobile-glass-nav__tab svg {
    --glass-icon-y: 0;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    transform: translateY(var(--glass-icon-y));
    transition: transform 220ms cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-glass-nav__tab[data-active="true"],
.mobile-glass-nav__tab[data-preview="true"] {
    color: var(--accent);
}

.mobile-glass-nav__tab:active svg {
    transform: translateY(var(--glass-icon-y)) scale(0.97);
}

.mobile-glass-nav__tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Marketing's hand-drawn text-link underline must never leak into nav tabs. */
.mobile-glass-nav__tab::after {
    content: none !important;
}

.mobile-glass-nav__label {
    max-width: 100%;
    overflow: hidden;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(0);
    transition:
        opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 200ms cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-glass-nav-shell[data-minimized="true"] .mobile-glass-nav__label {
    opacity: 0;
    transform: translateY(0.2rem) scale(0.96);
}

.mobile-glass-nav-shell[data-minimized="true"] .mobile-glass-nav__tab svg {
    --glass-icon-y: 0.9rem;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mobile-glass-nav::before {
        background: color-mix(in srgb, var(--background) 96%, var(--card));
    }
}

/* Contact yields while a popup owns focus; navigation remains available. */
body.modal-scroll-lock #feedback-btn,
body:has(.modal-backdrop:not(.hidden)) #feedback-btn {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Static variant (dashboard): server-rendered active pill,
   no sliding highlight JS required ---------- */

.mobile-glass-nav--static .mobile-glass-nav__tab {
    position: relative;
    isolation: isolate;
}

.mobile-glass-nav--static .mobile-glass-nav__tab[data-active="true"]::before {
    content: "";
    position: absolute;
    inset: 0.15rem 0.3rem;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: 1.18rem;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 20%, transparent),
            color-mix(in srgb, var(--accent) 9%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--background) 76%, transparent),
        0 5px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- Center FAB cell (dashboard) ---------- */

.mobile-glass-nav__fab-cell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 3.65rem;
    gap: 0.12rem;
    padding-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.mobile-glass-nav__fab {
    position: relative;
    top: -1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: -1.1rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 92%, #ffffff),
            var(--accent-dark));
    color: var(--accent-foreground);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 26px rgba(var(--accent-rgb), 0.4),
        0 0 0 5px color-mix(in srgb, var(--background) 78%, transparent);
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-glass-nav__fab:hover {
    transform: scale(1.05);
}

.mobile-glass-nav__fab:active {
    transform: scale(0.94);
}

@media (max-width: 639px) {
    body:has(.mobile-glass-nav-shell) {
        padding-bottom: 5.75rem;
    }

    body:has(.mobile-glass-nav-shell) #mobile-menu-btn,
    body:has(.mobile-glass-nav-shell) #mobile-menu {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-glass-nav::before,
    .mobile-glass-nav__highlight,
    .mobile-glass-nav__tab,
    .mobile-glass-nav__tab svg,
    .mobile-glass-nav__label {
        transition-property: opacity, color;
        transition-duration: 140ms;
        transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mobile-glass-nav::before {
        background: var(--background);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

}

@media (prefers-contrast: more) {
    .mobile-glass-nav::before {
        border-color: var(--foreground);
        background: var(--background);
    }

    .mobile-glass-nav__highlight {
        border-color: var(--accent);
    }
}

@media (forced-colors: active) {
    .mobile-glass-nav::before,
    .mobile-glass-nav__highlight {
        border: 1px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .mobile-glass-nav__tab[data-active="true"],
    .mobile-glass-nav__tab[data-preview="true"] {
        color: Highlight;
    }
}