:root {
  --design-width: 390px;
  --nav-height: 67px;
  --nav-bottom-gap: 26px;
  --nav-side-margin: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  width: 342px;
  max-width: calc(var(--design-width) - var(--nav-side-margin) * 2);
  height: var(--nav-height);
  margin: 0;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 58px;
  box-shadow: 0 0 5.5px rgba(0, 0, 0, 0.39);
  z-index: 1000;
}

.nav-indicator {
  position: absolute;
  top: 0;
  width: 26px;
  height: 4px;
  background: #ef8225;
  border-radius: 10px;
}

.nav-item {
  position: absolute;
  top: 14px;
  width: 40px;
  height: 40px;
}

.nav-home {
  left: 33px;
}

.nav-companion {
  left: 92px;
}

.nav-archive {
  left: 151px;
}

.nav-reminder {
  left: 210px;
}

.nav-ai {
  left: 269px;
}

.nav-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.nav-icon-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: #fff2be;
  border-radius: 12px;
}

.nav-icon {
  position: absolute;
  left: 10px;
  top: 3px;
  width: 20px;
  height: 20px;
}

.nav-item span {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 400;
  line-height: 13.93px;
  color: #35577d;
  white-space: nowrap;
}

.nav-item-active span {
  color: #ef8225;
}

.nav-home .nav-icon,
.nav-companion .nav-icon,
.nav-archive .nav-icon,
.nav-reminder .nav-icon {
  left: 10px;
  top: 3px;
}

.nav-ai .nav-link {
  width: 40px;
}

.nav-ai span {
  width: 29px;
  text-align: center;
}