.nav {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(var(--app), calc(100% - 36px));
  height: 84px;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 32px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .08),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  z-index: 50;
}

body.is-thread .nav { display: none; }

body.is-nav-load { overflow: hidden; }
body.is-nav-load .hdr,
body.is-nav-load .hdr-top { background: #faf8f3; }
body.is-nav-load .hdr-sub { visibility: hidden; }

.nav-load {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 52px;
  bottom: 0;
  width: 100%;
  max-width: var(--app);
  background: #faf8f3;
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: auto;
}

.nav-load[hidden] { display: none !important; }

.nav-p {
  width: 32px;
  height: 32px;
  display: block;
  animation: nav-p 1.1s ease-in-out infinite;
}

.nav-p:nth-child(1) { animation-delay: 0s; }
.nav-p:nth-child(2) { animation-delay: .22s; }
.nav-p:nth-child(3) { animation-delay: .44s; }

@keyframes nav-p {
  0%, 80%, 100% { opacity: .18; }
  40% { opacity: 1; }
}

.nav-btn {
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  color: #4a4a4a;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: background .15s ease;
}

.nav-btn svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.35;
  opacity: .82;
}

.nav-btn.is-on {
  background: #f8e4d6;
  color: #3a3a3a;
}

.nav-btn.is-on svg { opacity: 1; }

.nav-btn[data-tab="chat"].is-on {
  color: #de6a24;
}

.nav-btn[data-tab="chat"].is-on path {
  fill: currentColor;
  stroke: none;
}

.nav-btn[data-tab="chat"].is-on circle {
  fill: #fff;
}

.nav-btn.is-on .nav-dot { display: none; }

.nav-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #f08a4a;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  z-index: 2;
  animation: nav-pulse 1.35s ease-in-out infinite;
}

.nav-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: rgba(240, 138, 74, .45);
  animation: nav-ping 1.35s ease-out infinite;
}

@keyframes nav-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@keyframes nav-ping {
  0% { transform: scale(.6); opacity: .7; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}