/* 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: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 600;
  font-family: "IBM Plex Sans", sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}

.screens-nav-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}

body.screens-open .screens-nav-btn {
  background: rgba(209, 75, 40, 0.2);
  border-color: rgba(209, 75, 40, 0.4);
  color: var(--accent, #d14b28);
}

.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: rgb(255 255 255 / 0.9);
  font-weight: 600;
  font-size: 0.95rem;

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

/* 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;
  }
}