.sidebar__nav-toggle {
  display: flex;
  flex-shrink: 0;
  min-block-size: 44px;
  min-inline-size: 44px;
  pointer-events: auto;
  position: relative;
  z-index: 10;

  /* Extended touch target that spills over the button edges */
  &::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
  }

  @media (min-width: 67.5rem) {
    display: none !important;
  }

  &.sidebar__nav-toggle--has-unread::after {
    --unread-dot-size: 0.5em;

    background-color: var(--color-negative, #c00);
    border-radius: 50%;
    block-size: var(--unread-dot-size);
    content: "";
    inline-size: var(--unread-dot-size);
    inset-block-start: 0.2em;
    inset-inline-end: 0.2em;
    position: absolute;
  }
}

/* Mobile home-first: hamburger hidden on mobile, back arrow shown when in room */
.sidebar__nav-toggle--menu {
  margin-inline-start: auto;

  @media (max-width: 67.4375rem) {
    .sidebar & {
      display: none !important;
    }
  }
}

.sidebar__nav-toggle--back {
  display: none !important;
  order: -1;
  margin-inline-end: var(--inline-space-half);

  @media (max-width: 67.4375rem) {
    .sidebar.in-room & {
      display: flex !important;
    }
  }
}

/* Hide page-level back links on mobile when the sidebar toggle back button is visible */
.nav__back-link {
  @media (max-width: 67.4375rem) {
    .sidebar.in-room & {
      display: none;
    }
  }
}

#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: 10;

  @media (max-width: 67.4375rem) {
    padding-block-start: calc(var(--block-space) * 1.5);
  }

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

    .room--current {
      --btn-border-radius: 0.5em;
      --num-buttons: 1;

      min-block-size: var(--btn-size);

      /* Mobile: compact name, buttons pushed right */
      @media (max-width: 67.4375rem) {
        flex: 1 1 0;
        min-inline-size: 0;
        min-block-size: unset;
        overflow: hidden;
        padding-block: 0.25em;
      }

      .room__contents {
        .account-has-logo & {
          --num-buttons: 2;
        }

        display: flex;
        flex-direction: column;
        gap: 0.1em;
        max-inline-size: calc(100dvw - (var(--btn-size) * var(--num-buttons)) - (var(--btn-size) + max(var(--inline-space), 1vw)) - ((var(--inline-space) + 1.8em) * 2) - var(--sidebar-width) - var(--inline-space) * var(--num-buttons));

        /* Mobile: compact, left-aligned */
        @media (max-width: 67.4375rem) {
          align-items: start;
          max-inline-size: none;
          min-inline-size: 0;
        }

        .room__name {
          min-inline-size: 0;
        }

        .last-seen-status {
          font-size: 0.7rem;
          line-height: 1.4; /* avoid clipping descenders / round glyphs (e.g. "o") on small screens */
          padding-block-end: 0.1em;
        }
      }
    }

    @media (min-width: 67.5rem) {
      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);
      }
    }
  }

  .sidebar & {
    @media (max-width: 67.4375rem) {
      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;
      }
    }
  }
}

html[data-theme="mideval"] #nav .room--current {
  --btn-background: var(--mideval-parchment);
  --btn-border-color: var(--mideval-parchment-edge);
  --btn-color: var(--mideval-ink);
  --hover-color: var(--mideval-brass);

  background-image:
    linear-gradient(180deg, oklch(93% 0.03 85 / 0.9), oklch(82% 0.05 78 / 0.9)),
    radial-gradient(140% 140% at 12% 0%, oklch(96% 0.03 90 / 0.35), transparent 60%),
    radial-gradient(160% 160% at 88% 100%, oklch(70% 0.05 70 / 0.25), transparent 65%),
    repeating-linear-gradient(35deg, oklch(96% 0.02 85 / 0.12) 0 2px, transparent 2px 5px);
  background-blend-mode: multiply;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.18),
    0 1px 2px oklch(0% 0 0 / 0.25);
}

html[data-theme="mideval"] #nav .btn:not(.room--current) {
  --btn-background: var(--mideval-parchment);
  --btn-border-color: var(--mideval-parchment-edge);
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);
  --hover-color: var(--mideval-brass);

  background-image:
    linear-gradient(180deg, oklch(93% 0.03 85 / 0.9), oklch(82% 0.05 78 / 0.9));
  background-blend-mode: multiply;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.18),
    0 1px 2px oklch(0% 0 0 / 0.25);
}

html[data-theme="mideval"] #nav .btn--plain,
html[data-theme="mideval"] #nav .btn--borderless {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-icon-filter: var(--btn-icon-filter-dark);

  background-image: none;
  box-shadow: none;
}

.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);
  }
}

/* Disabled call button styles */
#nav .btn--icon:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#nav .call-action {
  pointer-events: auto;
  position: relative;
}

#nav .call-action[open] .call-action-menu {
  display: grid;
}

#nav .call-action-menu {
  background-color: var(--color-bg);
  border-radius: 0.75em;
  display: none;
  gap: 0.4em;
  inset-block-start: calc(var(--btn-size) + 0.35em);
  inset-inline-end: auto;
  inset-inline-start: 0;
  min-inline-size: 11rem;
  padding: 0.4em;
  pointer-events: auto;
  position: absolute;
  z-index: 15;
}

#nav .popup-orientation-top .call-action-menu {
  inset-block-end: calc(var(--btn-size) + 0.35em);
  inset-block-start: auto;
}

#nav .call-action-menu__button {
  --btn-border-radius: 0.55em;
  --btn-padding: 0.45em 0.6em;

  inline-size: 100%;
  justify-content: flex-start;
}

#nav .call-action-menu__button img {
  inline-size: 1.1em;
}

.pinned-messages-toggle {
  pointer-events: auto;
}

.pinned-messages-toggle--active {
  --btn-background: var(--color-selected-dark);
  --btn-border-color: var(--color-selected-dark);
  --btn-color: var(--color-text-reversed);
  --btn-icon-filter: var(--btn-icon-filter-light);
  --hover-color: var(--color-selected-dark);
}

/* Turbo Native touch target improvements */
@media (max-width: 67.4375rem) {
  #nav .btn {
    min-height: 44px;
    min-width: 44px;
  }

  #nav .btn--icon {
    min-height: 44px;
    min-width: 44px;
  }

  /* Push action buttons to the right after compact room name */
  #nav .room--current + .btn,
  #nav .room--current + .btn--icon,
  #nav .room--current + form,
  #nav .room--current + button,
  #nav .room--current + span,
  #nav .room--current + div {
    margin-inline-start: auto;
  }

  #nav .call-action-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    max-inline-size: calc(100vw - (var(--inline-space) * 2));
  }
}