/* El rail: la columna de iconos pegada al borde, como en Slack.
 *
 * Lleva los destinos que no son una sala -- inicio, personas, buscar, archivo
 * -- y los accesos permanentes que antes vivian en la bandeja de abajo de la
 * barra: preferencias, cuenta, perfil y la marca. Todo son destinos que ya
 * existian; lo que cambia es donde se les encuentra.
 *
 * Vive en el layout y no en la barra, para estar tambien en las paginas que
 * no tienen barra (los ajustes a pagina completa). Hereda los tokens de la
 * paleta por el remapeo de colors.css. */
#rail {
  align-items: center;
  background-color: var(--sb-bg-rail);
  color: var(--sb-text);
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  grid-area: rail;
  overflow: hidden;
  padding-block: calc(var(--block-space) + var(--safe-top)) calc(var(--block-space) + var(--safe-bottom));
  padding-inline: 0.35rem;
  z-index: 3;

  @media (min-width: 100ch) {
    .rail & {
      display: flex;
    }
  }
}

.rail__brand {
  --avatar-border-radius: 0.55rem;

  border-radius: 0.55rem;
  display: block;
  inline-size: 2.4rem;
  margin-block-end: 0.6rem;
  overflow: clip;

  img {
    aspect-ratio: 1;
    block-size: auto;
    display: block;
    inline-size: 100%;
    object-fit: cover;
  }
}

.rail__item {
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: 0.5rem;
  color: var(--sb-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  gap: 0.25rem;
  inline-size: 3.5rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.2rem;
  text-decoration: none;

  img:not(.rail__avatar) {
    filter: invert(calc(var(--icon-invert) * 100%));
    inline-size: 1.25rem;
    opacity: 0.9;
  }

  &:hover,
  &:focus-visible {
    background-color: var(--sb-hover);
    color: var(--sb-text-strong);
    outline: 0;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--sb-text-strong);
  }
}

/* La sala abierta enciende "Inicio": es donde estas. */
body.sidebar .rail__item--home {
  background-color: var(--sb-hover);
  color: var(--sb-text-strong);
}

.rail__spacer {
  flex: 1;
}

/* El avatar propio: cuadrado redondeado, como en Slack. El alto va explicito
   porque la imagen trae `height=48` como atributo, y ese alto presentacional
   le gana al aspect-ratio: sin esto salia un rectangulo. */
.rail__avatar-wrap {
  display: block;
  position: relative;
}

.rail__avatar {
  block-size: 2rem;
  border-radius: 0.5rem;
  display: block;
  inline-size: 2rem;
  object-fit: cover;
}

.rail__presence {
  aspect-ratio: 1;
  background-color: var(--color-positive);
  border: 2px solid var(--sb-bg-rail);
  border-radius: 50%;
  inline-size: 0.7rem;
  inset: auto -0.2rem -0.2rem auto;
  position: absolute;
}

.rail__item--me {
  padding-block: 0.3rem;
}

/* Sol o luna segun el tema que se VE: con la luna se va a oscuro, con el sol
   se vuelve a claro. El tema puede venir de la clase o del sistema, asi que
   la regla se escribe para los dos caminos, como en colors.css. */
.rail__theme-sun {
  display: none;
}

:root.theme-dark .rail__theme-sun {
  display: block;
}

:root.theme-dark .rail__theme-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .rail__theme-sun {
    display: block;
  }

  :root:not(.theme-light) .rail__theme-moon {
    display: none;
  }
}

/* La marca, al pie: presente sin pedir turno. Apagada en reposo y a color al
   pasar por encima, como cuando flotaba suelta en la conversacion. */
#app-logo {
  block-size: 1.4rem;
  display: block;
  filter: saturate(0);
  margin-block-start: 0.5rem;
  opacity: 0.45;
  transition: opacity 300ms ease, filter 300ms ease;

  & img {
    block-size: 100%;
    inline-size: auto;
  }

  &:hover,
  &:focus-visible {
    filter: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-logo { transition: none; }
}

/* En movil el rail no tiene columna: es la bandeja inferior del cajon
   lateral, y aparece con el. Fila y no columna, con la marca a un lado. */
@media (max-width: 100ch) {
  body:has(#sidebar.open) #rail {
    border-block-start: 1px solid var(--sb-line);
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    inline-size: min(100vw, 22rem);
    inset: auto auto 0 0;
    justify-content: space-around;
    padding-block: var(--block-space-half) calc(var(--block-space-half) + var(--safe-bottom));
    position: fixed;
    z-index: 4;
  }

  body.sidebar-end:has(#sidebar.open) #rail {
    inset: auto 0 0 auto;
  }

  body:has(#sidebar.open) .rail__brand,
  body:has(#sidebar.open) .rail__spacer,
  body:has(#sidebar.open) #app-logo {
    display: none;
  }

  /* Siete accesos en 22rem: cada uno se queda con su parte y ninguno se sale. */
  body:has(#sidebar.open) .rail__item {
    flex: 1 1 0;
    inline-size: auto;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 0;
    padding-inline: 0;
  }

  /* A 22rem son 44px por acceso, y "Personas" en negrita medía más: las
     etiquetas se tocaban ("PersonasBuscar"). Sin hueco entre accesos, un punto
     menos de cuerpo y de tracking y, si aun asi no cabe, puntos suspensivos en vez de
     invadir al vecino. */
  body:has(#sidebar.open) #rail {
    gap: 0;
    padding-inline: 0;
  }

  body:has(#sidebar.open) .rail__item > span:not([class]) {
    font-size: 0.58rem;
    letter-spacing: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#sidebar.open) .rail__avatar {
    block-size: 1.6rem;
    inline-size: 1.6rem;
  }
}