:root{
  --navigation-background:var(--background-subtle-light);
  --navigation-icon-size:var(--icon-default);
  --navigation-padding-top:var(--space-12);
  --navigation-safe-padding-bottom:var(--space-40);
  --navigation-padding-bottom:var(--navigation-safe-padding-bottom);
  --navigation-padding-inline:var(--space-32);
  --navigation-height:calc(var(--navigation-icon-size) + var(--navigation-padding-top) + var(--navigation-padding-bottom));
}
@media(max-width:699px){
  :root{
    /* Match the reference phone tab-row height even when standalone reports
       zero safe-area inset. Keep larger device insets intact. */
    --navigation-safe-padding-bottom:max(48px,env(safe-area-inset-bottom,0px));
  }
}
body.has-bottom-navigation{padding-bottom:var(--navigation-height)}
html:has(.bottom-navigation){scroll-padding-bottom:calc(var(--navigation-height) + var(--space-16))}
.bottom-navigation{position:fixed;inset:auto 0 0;z-index:20;box-sizing:border-box;height:var(--navigation-height);overflow:hidden;background:var(--navigation-background);padding:var(--navigation-padding-top) var(--navigation-padding-inline) var(--navigation-padding-bottom)}
.bottom-navigation-inner{display:flex;align-items:center;justify-content:space-between;height:var(--navigation-icon-size);max-width:576px;margin:auto}
.bottom-navigation :is(a,button){position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 var(--navigation-icon-size);width:var(--navigation-icon-size);height:var(--navigation-icon-size);color:var(--ink);text-decoration:none;border-radius:var(--radius-container-nested)}
.bottom-navigation img{display:block;width:var(--navigation-icon-size);height:var(--navigation-icon-size)}
.navigation-update-dot{position:absolute;bottom:-3px;right:-5px;width:4px;height:4px;border-radius:50%;background:var(--cta-primary-start);box-shadow:0 0 0 2px var(--navigation-background);pointer-events:none}

.bottom-navigation :is(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.bottom-navigation button{padding:0;border:0;background:transparent;min-height:0;cursor:pointer}

.bottom-navigation[data-scene='profile']{--navigation-background:var(--color-background-white,#fff)}

.bottom-navigation .navigation-icon-filled{position:absolute;inset:0;opacity:0}
.bottom-navigation [aria-current='page'] .navigation-icon-filled{opacity:1}
.bottom-navigation [aria-current='page'] .navigation-icon-outline{opacity:0}