.shared-mobile-bottom-nav { display:none; }

@media (max-width:760px) {
    body.has-shared-mobile-nav,
    body.care-page {
        padding-bottom:calc(104px + env(safe-area-inset-bottom));
    }

    .shared-mobile-bottom-nav,
    .mobile-bottom-bar.care-mobile-bottom {
        position:fixed;
        z-index:900;
        left:50%;
        right:auto;
        bottom:calc(12px + env(safe-area-inset-bottom));
        display:grid;
        width:min(calc(100% - 28px), 520px);
        min-height:68px;
        padding:6px;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:2px;
        transform:translateX(-50%);
        border:1px solid rgba(224,210,199,.92);
        border-radius:30px;
        background:rgba(255,255,255,.80);
        box-shadow:0 12px 34px rgba(65,43,29,.18), 0 2px 8px rgba(65,43,29,.08);
        backdrop-filter:blur(20px) saturate(145%);
        -webkit-backdrop-filter:blur(20px) saturate(145%);
    }

    .shared-mobile-bottom-nav a,
    .mobile-bottom-bar.care-mobile-bottom button {
        position:relative;
        isolation:isolate;
        display:flex;
        min-width:0;
        min-height:56px;
        padding:5px 2px;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:3px;
        border:0;
        border-radius:23px;
        background:transparent;
        color:#51463f;
        text-decoration:none;
        font-size:10px;
        font-weight:800;
        line-height:1.1;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        transition:color .18s ease, background-color .18s ease, transform .18s ease;
    }

    .shared-mobile-bottom-nav a::before,
    .mobile-bottom-bar.care-mobile-bottom button::before {
        content:"";
        position:absolute;
        z-index:-1;
        inset:0;
        border-radius:23px;
        background:#f3ebe4;
        opacity:0;
        transform:scale(.82);
        transition:opacity .18s ease, transform .18s ease;
    }

    .shared-mobile-bottom-nav a svg,
    .mobile-bottom-bar.care-mobile-bottom button svg {
        width:24px;
        height:24px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform .18s ease, fill .18s ease;
    }

    .shared-mobile-bottom-nav a span,
    .mobile-bottom-bar.care-mobile-bottom button small {
        position:relative;
        margin:0;
        color:inherit;
        font-size:10px;
        font-weight:800;
        line-height:1.1;
        white-space:nowrap;
    }

    .shared-mobile-bottom-nav a.active,
    .mobile-bottom-bar.care-mobile-bottom button.active {
        color:#8f5e3b;
        font-weight:900;
    }

    .shared-mobile-bottom-nav a.active::before,
    .mobile-bottom-bar.care-mobile-bottom button.active::before {
        opacity:1;
        transform:scale(1);
    }

    .shared-mobile-bottom-nav a.active svg,
    .mobile-bottom-bar.care-mobile-bottom button.active svg {
        transform:translateY(-1px);
    }

    .shared-mobile-bottom-nav a[data-nav-key="saved"].active svg,
    .mobile-bottom-bar.care-mobile-bottom button:nth-child(2).active svg {
        fill:currentColor;
    }

    .shared-mobile-bottom-nav a:active,
    .mobile-bottom-bar.care-mobile-bottom button:active {
        transform:scale(.96);
    }

    body.mobile-chat-room-open {
        padding-bottom:0;
    }

    body.mobile-chat-room-open .shared-mobile-bottom-nav {
        display:none;
    }
}

@media (max-width:380px) {
    .shared-mobile-bottom-nav,
    .mobile-bottom-bar.care-mobile-bottom {
        width:calc(100% - 20px);
        bottom:calc(9px + env(safe-area-inset-bottom));
        min-height:64px;
        border-radius:27px;
    }

    .shared-mobile-bottom-nav a,
    .mobile-bottom-bar.care-mobile-bottom button {
        min-height:52px;
        border-radius:21px;
    }

    .shared-mobile-bottom-nav a svg,
    .mobile-bottom-bar.care-mobile-bottom button svg {
        width:22px;
        height:22px;
    }

    .shared-mobile-bottom-nav a span,
    .mobile-bottom-bar.care-mobile-bottom button small {
        font-size:9px;
    }
}