#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: 200; /* Above all message content including avatars (z-index: 101) */

  /* Respect top safe area on iOS devices - conservative padding */
  @supports (padding: max(0px)) {
    padding-top: max(var(--block-space-half), env(safe-area-inset-top));
  }

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

  .sidebar & {
    @media (max-width: 100ch) {
      padding-block: var(--block-space-half);

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

  /* Allow wrapping when call panel is in different-room mode */
  &:has(.call-panel--different-room) {
    flex-wrap: wrap;
  }
}

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

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 201; /* Above navbar */

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