/* La cabecera.
 *
 * Una barra de verdad y en flujo: la primera fila del grid, con fondo y borde,
 * y no un grupo de botones flotando sobre los mensajes. Al no ser fija, nada
 * tiene que reservarle hueco ni calcular su altura. */
#nav {
  align-items: center;
  background-color: var(--color-bg);
  border-block-end: 1px solid var(--color-border-dark);
  column-gap: var(--inline-space-half);
  display: flex;
  grid-area: nav;
  min-block-size: var(--navbar-height);
  padding-block: calc(var(--block-space-half) + var(--safe-top)) var(--block-space-half);
  padding-inline: calc(var(--inline-space) * 1.5 + var(--safe-left)) calc(var(--inline-space) + var(--safe-right));
  row-gap: var(--block-space);
  z-index: 2;

  /* Sin contenido, sin fila: el alta y el inicio de sesion no tienen nav. */
  &:not(:has(*)) {
    display: none;
  }

  /* Los controles de la cabecera son fantasma: sin borde ni fondo hasta que
     se pasa por encima. Una fila de circulos con borde encima de la
     conversacion pesaba mas que la propia conversacion. */
  .btn:not(.btn--reversed):not(.btn--negative):not(.avatar) {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-border-radius: 0.5em;
    --hover-size: 0;

    &:hover,
    &:focus-visible {
      --btn-background: var(--color-message-bg);
    }
  }

  /* En movil el tirador de la barra sobresale por el borde de la pantalla y
     se monta sobre la cabecera: se le deja su sitio. Con la barra a la
     derecha, el sitio se deja al otro lado. */
  .sidebar & {
    @media (max-width: 100ch) {
      padding-inline-start: calc(var(--btn-size) + var(--inline-space-double) + var(--safe-left));
    }
  }

  .sidebar.sidebar-end & {
    @media (max-width: 100ch) {
      padding-inline: calc(var(--inline-space) + var(--safe-left)) calc(var(--btn-size) + var(--inline-space-double) + var(--safe-right));
    }
  }
}

/* El nombre de la sala, como titulo y no como boton. */
.room--current {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color: var(--color-text);
  --btn-padding: 0;
  --hover-filter: none;

  column-gap: 0.4ch;
  font-size: 1.05rem;
  font-weight: 700;
  justify-content: start;
  margin-inline-end: auto;
  /* Un flex item no encoge por debajo de su contenido salvo que se le diga:
     con esto flexbox reparte el ancho y el overflow-ellipsis del h1 corta lo
     que sobre, sea cual sea el numero de botones a su derecha. */
  min-inline-size: 0;
}

.room__contents {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* El # o el candado delante del nombre, como en la barra. */
.room__kind {
  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-weight: 500;

  img {
    display: block;
    filter: invert(calc(var(--icon-invert) * 100%));
    inline-size: 1em;
    opacity: 0.7;
  }
}

/* El buscador de la cabecera, como campo y no como lupa suelta.
   Es el mismo enlace a /searches que la lupa del composer: con JavaScript
   abre el dialogo, sin el lleva a la pagina. Solo en escritorio; en movil la
   lupa sigue en el composer, donde cabe. */
.nav__search {
  --btn-border-radius: 0.5em;
  --btn-padding: 0.35em 0.8em;

  background-color: var(--color-message-bg);
  color: var(--color-text-subtle);
  display: none;
  font-weight: 400;
  inline-size: min(22rem, 32vw);
  justify-content: start;
  text-align: start;

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

  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  img {
    opacity: 0.6;
  }
}

.nav__search-label {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Ocultar y ajustes: sueltos en ancho, dentro de "..." en estrecho.
 *
 * Con campana, ocultar y ajustes a 44px cada uno, a 390px el nombre de la sala
 * se quedaba en "ops-releases-…", y con el texto al 150% en "gen…". En estrecho
 * los dos pasan a un menu y la cabecera suelta un boton. El marcado de los dos
 * sitios esta siempre; esto solo decide cual se ve. */
.nav__more {
  display: none;
  position: relative;

  & > summary {
    list-style: none;

    &::-webkit-details-marker { display: none; }
  }
}

@media (max-width: 100ch) {
  #nav .nav__wide-only {
    display: none;
  }

  /* `button_to` envuelve el boton en un form: tambien se va. */
  #nav form:has(> .nav__wide-only) {
    display: none;
  }

  .nav__more {
    display: block;
  }
}

.nav__menu {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-darker);
  border-radius: 0.75em;
  box-shadow: 0 0.5em 1.5em oklch(0% 0 0 / 0.2);
  display: flex;
  flex-direction: column;
  inset: calc(100% + 0.25rem) 0 auto auto;
  min-inline-size: 14rem;
  padding: 0.3rem;
  position: absolute;
  z-index: 5;

  .sidebar-end & {
    inset-inline: 0 auto;
  }

  form {
    display: contents;
  }
}

.nav__menu-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.5em;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 500;
  gap: 0.75em;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0.4em 0.75em;
  text-align: start;
  text-decoration: none;

  img {
    filter: invert(calc(var(--icon-invert) * 100%));
    flex-shrink: 0;
  }

  &:hover,
  &:focus-visible {
    background-color: var(--color-message-bg);
    outline: 0;
  }
}