.phone .nav-layer {
  --nav-material: rgba(255, 255, 255, .94);
  --nav-opaque: #FFFFFF;
  --nav-edge: rgba(20, 20, 26, .10);
  --nav-selection: rgba(255, 0, 90, .08);
  --nav-label: #303038;
  --nav-active: var(--brand);
  --nav-shadow: 0 4px 16px rgba(15, 15, 22, .07);
  left: 16px;
  right: 16px;
  bottom: 24px;
  gap: 8px;
  align-items: center;
}

.phone.dark .nav-layer {
  --nav-material: rgba(24, 24, 27, .94);
  --nav-opaque: #18181B;
  --nav-edge: rgba(255, 255, 255, .12);
  --nav-selection: rgba(255, 0, 90, .14);
  --nav-label: #E5E5EA;
  --nav-shadow: 0 4px 16px rgba(0, 0, 0, .20);
}

.phone .nav-layer .bottom-nav,
.phone .nav-layer .detached-share {
  position: relative;
  height: 60px;
  border: 1px solid var(--nav-edge);
  border-radius: 20px;
  background: var(--nav-material);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--nav-shadow);
}

.phone .nav-layer .bottom-nav {
  padding: 5px;
  overflow: visible;
}

.phone .nav-layer .bottom-nav > button {
  min-width: 44px;
  min-height: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  border-radius: 14px;
  color: var(--nav-label);
  background: transparent;
  transition: color .12s ease, transform .12s ease;
}

.phone .nav-layer .bottom-nav > button > svg,
.phone .nav-layer .detached-share > svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
}

.phone .nav-layer .navigation-icon { fill: currentColor; stroke: none; }
.phone .nav-layer .nav-glyph-rtl { display: none; }
.phone .nav-layer:dir(rtl) .nav-glyph-ltr { display: none; }
.phone .nav-layer:dir(rtl) .nav-glyph-rtl { display: inline; }
.phone .nav-layer .bottom-nav > button > .nav-label { display: none; }
.phone .nav-layer .nav-profile-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 1.5px;
  border: 1.5px solid transparent;
  border-radius: 50%;
}
.phone .nav-layer .nav-profile-avatar > img { display: block; width: 20px; height: 20px; object-fit: cover; border-radius: 50%; }
.phone .nav-layer .nav-profile-avatar > svg { width: 20px; height: 20px; }
.phone .nav-layer button.active .nav-profile-avatar { border-color: currentColor; }
.phone .nav-layer .bottom-nav > button.active { color: var(--nav-active); background: transparent; box-shadow: none; }
.phone .nav-layer .bottom-nav > button.active::before { display: none; }
.phone .nav-layer .bottom-nav > button:hover { filter: none; }
.phone .nav-layer .bottom-nav > button:active,
.phone .nav-layer .detached-share:active { transform: scale(.96); }
.phone .nav-layer .bottom-nav > button:focus-visible,
.phone .nav-layer .detached-share:focus-visible { outline-offset: -3px; }
.phone .nav-layer button.active .icon-outline { display: none; }
.phone .nav-layer button.active .icon-filled { display: inline; }

.phone .nav-layer .nav-badge {
  width: 6px;
  height: 6px;
  top: 8px;
  right: auto;
  inset-inline-end: calc(50% - 15px);
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--nav-opaque);
}

.phone .nav-layer.split .bottom-nav { width: calc(100% - 64px); }
.phone .nav-layer.split .bottom-nav { padding-inline: 0; }
.phone .nav-layer .detached-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  min-height: 60px;
  padding: 0;
  color: var(--nav-label) !important;
  transition: color .12s ease, transform .12s ease;
}
.phone .nav-layer .detached-share::after { content: none; display: none; }
.phone .nav-layer .detached-share.active { color: var(--nav-active) !important; }

.phone .nav-layer.opaque .bottom-nav,
.phone .nav-layer.opaque .detached-share {
  background: var(--nav-opaque);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.phone .nav-layer.android {
  left: 0;
  right: 0;
  bottom: 0;
  gap: 0;
  background: var(--nav-opaque);
  border-top: 1px solid var(--nav-edge);
}
.phone .nav-layer.android .bottom-nav,
.phone .nav-layer.android .detached-share {
  height: 84px;
  min-height: 84px;
  border: 0;
  border-radius: 0;
  background: var(--nav-opaque);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.phone .nav-layer.android .bottom-nav { padding: 6px 6px 24px; }
.phone .nav-layer.android .bottom-nav > button { height: 54px; min-height: 54px; border-radius: 12px; }
.phone .nav-layer.android .bottom-nav > button > svg,
.phone .nav-layer.android .detached-share > svg { box-sizing: content-box; padding: 6px 12px; border-radius: 14px; }
.phone .nav-layer.android .bottom-nav > button.active > svg,
.phone .nav-layer.android .detached-share.active > svg { background: var(--nav-selection); }
.phone .nav-layer.android.split .bottom-nav { width: calc(100% - 60px); }
.phone .nav-layer.android .detached-share { width: 60px; min-width: 60px; padding: 6px 0 24px; }

@media (prefers-reduced-transparency: reduce) {
  .phone .nav-layer .bottom-nav,
  .phone .nav-layer .detached-share {
    background: var(--nav-opaque);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .phone .nav-layer .bottom-nav,
  .phone .nav-layer .detached-share {
    background: var(--nav-opaque);
    border-color: var(--outline);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .phone .nav-layer button.active { outline: 1px solid var(--nav-active); outline-offset: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone .nav-layer .bottom-nav > button,
  .phone .nav-layer .detached-share { transition: none; }
  .phone .nav-layer .bottom-nav > button:active,
  .phone .nav-layer .detached-share:active { transform: none; }
}
@media (forced-colors: active) {
  .phone .nav-layer .bottom-nav,
  .phone .nav-layer .detached-share { background: Canvas; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .phone .nav-layer .bottom-nav > button,
  .phone .nav-layer .detached-share { color: ButtonText !important; }
  .phone .nav-layer .bottom-nav > button.active,
  .phone .nav-layer .detached-share.active { color: HighlightText !important; background: Highlight; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .phone .nav-layer .bottom-nav,
  .phone .nav-layer .detached-share { background: var(--nav-opaque); }
}