/* Room nav — renders inside #topbar in the grid layout */
#nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  flex: 1;
  min-inline-size: 0;
  pointer-events: none;
}

#nav > * {
  pointer-events: auto;
}

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

/* Screens toggle button in topbar */
.screens-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}

.screens-nav-btn:hover {
  background: var(--bg-tinted);
  color: var(--text-primary);
}

body.screens-open .screens-nav-btn {
  background: var(--primary-subtle);
  border-color: var(--primary-border);
  color: var(--primary);
}

.screens-nav-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Room name button in topbar */
.room--current {
  --btn-border-radius: 0.5em;
  --btn-background: transparent;
  --btn-border-color: transparent;
  --hover-filter: none;
  --num-buttons: 1;

  min-block-size: var(--btn-size);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;

  .room__contents {
    max-inline-size: 40ch;
  }
}

.nav-participants {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
  min-inline-size: 0;
}

.nav-participants__avatar {
  --avatar-size: 1.65rem;

  background-color: var(--bg-sidebar, #111113);
  border: 1px solid var(--border, rgb(255 255 255 / 0.12));
  box-shadow: none;
  flex-shrink: 0;
}

.nav-participants__overflow {
  align-items: center;
  background-color: var(--bg-sidebar, #111113);
  border: 1px solid var(--border, rgb(255 255 255 / 0.12));
  border-radius: 999px;
  color: var(--text-secondary, #b7b8c7);
  display: inline-flex;
  flex-shrink: 0;
  font-weight: 600;
  justify-content: center;
  min-block-size: 1.65rem;
  min-inline-size: 1.65rem;
  padding-inline: 0.4rem;
}

@media (max-width: 700px) {
  .nav-participants {
    gap: 0.25rem;
  }

  .nav-participants__avatar {
    --avatar-size: 1.45rem;
  }

  .nav-participants__overflow {
    min-block-size: 1.45rem;
    min-inline-size: 1.45rem;
    padding-inline: 0.35rem;
  }
}

/* Searches in nav */
.searches {
  #nav {
    align-items: start;
    column-gap: 0;
    padding-inline-end: 0;
  }

  .rooms {
    padding-block-start: var(--block-space);
  }

  .message--formatted .message__room {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: visible;
    white-space: nowrap;

    &::before {
      content: "→";
    }

    .message--me & {
      &::after {
        content: "←";
      }

      &::before {
        content: "";
      }
    }
  }

  .message__actions {
    display: none !important;
    visibility: hidden !important;
  }
}

.searches__recents {
  --mask: linear-gradient(to left, oklch(0% 0 0 / 1) 97%, oklch(0% 0 0 / 0) 99%);

  -webkit-mask-image: var(--mask);
  display: none;
  mask-image: var(--mask);
  position: relative;

  @media (max-width: 100ch) {
    display: flex;
  }

  .room {
    max-inline-size: 20ch;

    &:first-child {
      margin-inline-start: var(--inline-space);
    }
  }

  .searches__btn {
    margin-inline-end: var(--inline-space-double);
  }
}

.searches__query {
  --btn-border-radius: 0.5em;

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

.searches__results {
  padding-block-start: var(--topbar-height);
}

.searches__input:required:invalid {
  ~ .searches__reset {
    display: none;
    visibility: hidden;
  }
}
