/* Mobile Dock — 简洁毛玻璃底栏 */
@media (max-width: 768px) {
    body.has-mobile-dock {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-dock .footer {
        margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .nav-toggle,
    .navbar-menu {
        display: none !important;
    }

    .navbar-actions .nav-login-btn,
    .navbar-actions .nav-register-btn,
    .navbar-actions .nav-points-btn,
    .navbar-actions .nav-profile-btn {
        display: none !important;
    }

    .mobile-dock-outer {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
        pointer-events: none;
    }

    /* 液态玻璃 (GlassSurface fallback) */
    .mobile-dock-glass {
        pointer-events: auto;
        position: relative;
        margin: 0 auto;
        max-width: 520px;
        min-height: 62px;
        border-radius: 22px;
        overflow: visible;
        isolation: isolate;
        touch-action: manipulation;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20px) saturate(1.9) brightness(1.1);
        -webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(1.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow:
            0 8px 32px rgba(31, 38, 135, 0.14),
            0 2px 12px rgba(91, 181, 213, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.62),
            inset 0 -1px 0 rgba(255, 255, 255, 0.28);
    }

    .mobile-dock-glass::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.12) 38%,
            rgba(126, 200, 227, 0.08) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    .mobile-dock-glass::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 64px;
        height: 32px;
        transform: translate(-50%, -45%);
        border-radius: 50%;
        background: radial-gradient(
            ellipse at 50% 100%,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.08) 55%,
            transparent 72%
        );
        pointer-events: none;
        z-index: 0;
    }

    .dock-glass-pill {
        position: absolute;
        top: 8px;
        left: 0;
        width: 56px;
        height: calc(100% - 16px);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.36);
        border: 1px solid rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(10px) saturate(1.6);
        -webkit-backdrop-filter: blur(10px) saturate(1.6);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.75),
            0 4px 16px rgba(91, 181, 213, 0.16);
        transform: translateX(0);
        transition:
            transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1),
            width 0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
        z-index: 1;
        pointer-events: none;
        will-change: transform, width;
    }

    .dock-glass-shimmer {
        position: absolute;
        width: 96px;
        height: 96px;
        margin: -48px 0 0 -48px;
        border-radius: 50%;
        background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(126, 200, 227, 0.22) 40%,
            transparent 70%
        );
        opacity: 0;
        transform: translate(-999px, -999px);
        transition: opacity 0.22s ease;
        z-index: 2;
        pointer-events: none;
        mix-blend-mode: soft-light;
    }

    .mobile-dock-glass.is-touching .dock-glass-shimmer {
        opacity: 1;
    }

    .dock-glass-ripples {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
    }

    .dock-glass-ripple {
        position: absolute;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(126, 200, 227, 0.2) 45%,
            transparent 72%
        );
        animation: dockGlassRipple 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        pointer-events: none;
    }

    @keyframes dockGlassRipple {
        to {
            transform: translate(-50%, -50%) scale(2.5);
            opacity: 0;
        }
    }

    .mobile-dock-panel {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2px;
        padding: 10px 8px 8px;
    }

    .dock-item {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        padding: 4px 2px 2px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--color-text-light);
        background: transparent;
        border: none;
        outline: none;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .dock-item-visual {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform-origin: center center;
        transition: transform 0.12s ease-out;
    }

    .dock-item.is-active:not(.dock-item--create) {
        color: var(--color-primary-dark);
    }

    .dock-item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .dock-item-icon svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .dock-item-label {
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
    }

    .dock-item.is-magnified:not(.dock-item--create) {
        color: var(--color-primary-dark);
    }

    /* 发起：浮在液态玻璃上的 + 钮 */
    .dock-item--create {
        flex: 0 0 56px;
        z-index: 5;
    }

    .dock-item--create .dock-item-visual.dock-item-bubble {
        width: 50px;
        height: 50px;
        margin-top: -24px;
        margin-bottom: 2px;
        border-radius: 50%;
        background: linear-gradient(160deg, #68c4e0 0%, #3A9BC0 55%, #2d8aad 100%);
        border: 2px solid rgba(255, 255, 255, 0.85);
        box-shadow:
            0 6px 20px rgba(58, 155, 192, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    .dock-item--create .dock-item-icon svg {
        width: 24px;
        height: 24px;
        stroke: #fff;
        color: #fff;
    }

    .dock-item--create .dock-item-label {
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--color-primary-dark);
    }
}

@media (min-width: 769px) {
    .mobile-dock-outer {
        display: none;
    }
}

@media (max-width: 768px) {
    .main-content.is-dock-spa-leave {
        opacity: 0;
        transition: opacity 0.22s ease;
    }

    .main-content.is-dock-spa-enter {
        animation: dockSpaFadeIn 0.28s ease forwards;
    }

    @keyframes dockSpaFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .dock-item-visual,
    .dock-glass-pill {
        transition: none !important;
    }

    .main-content.is-dock-spa-leave,
    .main-content.is-dock-spa-enter {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .dock-glass-ripple {
        animation: none;
        opacity: 0;
    }

    .dock-glass-shimmer {
        display: none;
    }
}