#nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  inset: 0 0 auto 0;
  inset-inline-end: var(--sidebar-width);
  padding-block: var(--block-space);
  padding-inline: calc(var(--inline-space) * 1.5) var(--inline-space-double);
  pointer-events: none;
  position: fixed;
  row-gap: var(--block-space);
  z-index: 2;

  /* Native WebView / notched phones: safe top on every screen (not only `body.sidebar` — e.g. room settings) */
  @media (max-width: 100ch) {
    padding-block-end: var(--block-space-half);
    padding-block-start: calc(env(safe-area-inset-top, 0px) + var(--block-space-half));
  }

  &:has(.room--current) {
    padding-inline: var(--inline-space);

    @media (min-width: 100ch) {
      margin-inline-start: 5vw;

      .room--current {
        margin-inline-start: -3vw;

        .account-logo + & {
          margin-inline-start: 0;
        }
      }

      .account-logo {
        margin-inline-start: calc((var(--btn-size) / 2 + var(--inline-space)) * -1);
      }
    }
  }

  body.sidebar & {
    @media (max-width: 100ch) {
      /* Reserve trailing column for fixed `.sidebar__toggle-fab` */
      padding-inline-end: calc(env(safe-area-inset-right, 0px) + var(--btn-size) + var(--inline-space-double));

      &::before {
        background: linear-gradient(180deg, oklch(var(--lch-white)) 20%, oklch(var(--lch-white) / 0) 100%);
        content: "";
        inset: 0;
        position: absolute;
        z-index: -1;
      }
    }
  }
}

.skip-navigation {
  --left-offset: -999em;

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 11;

  &:focus {
    --left-offset: var(--inline-space);
  }
}

.room-nav-menu {
  --panel-border: color-mix(in oklab, var(--color-border), transparent 15%);

  background: color-mix(in oklab, var(--color-bg), black 8%);
  border: 1px solid var(--panel-border);
  border-radius: 0.85em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  inset: calc(var(--btn-size) + 0.4rem) 0 auto auto;
  min-inline-size: 11.5rem;
  padding: 0.35rem;
  pointer-events: auto;
  position: absolute;
  z-index: 12;
}

.room-nav-dropdown {
  flex: 0 0 auto;
  inline-size: var(--btn-size);
  min-inline-size: var(--btn-size);
  position: relative;
}

.room-nav-dropdown__trigger {
  --btn-padding: 0;
  block-size: var(--btn-size);
  inline-size: var(--btn-size);
  min-inline-size: var(--btn-size);
}

.room-nav-menu__item {
  align-items: center;
  color: color-mix(in oklab, var(--color-text), white 2%);
  column-gap: 0.5rem;
  cursor: pointer;
  display: flex;
  font-size: 1.03rem;
  font-weight: 600;
  inline-size: 100%;
  justify-content: start;
  line-height: 1.2;
  min-inline-size: 0;
  border: 0;
  border-radius: 0.45rem;
  padding: 0.48rem 0.52rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      background: color-mix(in oklab, var(--color-border), var(--color-bg) 26%);
    }
  }
}

.room-nav-menu__item.room-nav-menu__item--active {
  background: color-mix(in oklab, var(--color-border), var(--color-bg) 32%);
  border: 1px solid transparent;
  font-weight: 700;
}

body.sidebar #nav .room-nav-menu__item img {
  filter: brightness(0) invert(1);
  inline-size: 1rem;
}

.room-nav-menu__icon {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.room-nav-menu__section-label {
  color: color-mix(in oklab, var(--color-text), var(--color-bg) 42%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.06rem 0.45rem;
  text-transform: uppercase;
}

.room-nav-menu__divider {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--color-border), transparent 8%);
  margin: 0.18rem 0.15rem;
}

body.sidebar #nav details[open] > summary.btn {
  --btn-background: color-mix(in oklab, var(--color-border), transparent 22%);
}

@media (max-width: 100ch) {
  .room-nav-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    max-inline-size: min(78vw, calc(100vw - 0.8rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    min-inline-size: min(11.5rem, calc(100vw - 0.8rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
}