.panel {
  --panel-width: 50ch;
  --panel-padding: 1em;

  inline-size: var(--panel-width);
  margin: var(--block-space) auto;
  max-inline-size: 100vw;
  padding: var(--panel-padding);

  @media (min-width: 100ch) {
    --panel-padding: 2em;

    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.75em;
  }
}

.panel--wide {
  --panel-width: 80ch;
}

.panel__button {
  inset-block-start: var(--block-space);
  inset-inline-start: var(--block-space);
  position: absolute;
}

/* Archivo de Slack
 *
 * Se navega por canal y no por texto porque así funciona la memoria: uno
 * recuerda dónde se hablaba de algo antes que las palabras exactas. */
.history {
  margin-inline: auto;
  max-inline-size: 60ch;
}

.history__header {
  margin-block-end: var(--block-space);
}

.history__search {
  margin-block-end: var(--block-space);
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.history__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.history__link {
  align-items: baseline;
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  gap: var(--inline-space);
  justify-content: space-between;
  padding-block: 0.6em;
  text-decoration: none;

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

/* El recuento en tabulares para que las cifras se alineen en columna: con 254
 * filas, poder comparar de un vistazo es lo que hace la lista escaneable. */
.history__count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Pertenencia en el archivo: por qué aparece cada canal. */
.history__filter {
  flex-shrink: 0;
}

.history__filter--on {
  background-color: var(--color-selected);
  box-shadow: 0 0 0 1px var(--color-selected-dark);
}

.history__why {
  flex-shrink: 0;
  /* Un dato deducido no puede verse igual que uno confirmado; el color lo separa
   * sin necesitar una explicación. */
  opacity: 0.85;
}

/* El directorio: quién hay y cómo escribirle.
 *
 * Ojo con el nesting: `&__sufijo` NO concatena nombres en CSS nativo como sí
 * hace Sass. Todo este bloque estaba escrito así y el navegador lo descartaba
 * entero, en silencio: /people salía con las viñetas de la lista puestas, el
 * avatar encima del nombre en vez de al lado y las filas sin separador.
 * Selectores completos, como avisa el comentario de sidebar.css. */
.directory {
  margin-inline: auto;
  max-inline-size: 54ch;
}

.directory__header {
  margin-block-end: var(--block-space);
}

.directory__search {
  inset-block-start: 0;
  margin-block-end: var(--block-space);
  position: sticky;
  z-index: 2;
}

.directory__group {
  margin-block-end: var(--block-space);
}

.directory__title {
  margin: 0 0 0.3em;
  opacity: 0.55;
}

.directory__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.directory__link {
  align-items: center;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  gap: var(--inline-space);
  inline-size: 100%;
  padding-block: 0.5em;
  text-align: start;
  text-decoration: none;

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

/* button_to envuelve el botón en un form; sin esto cada fila arrastraría el
 * margen del formulario y la lista quedaría desigual. */
form:has(.directory__link) {
  margin: 0;
}

.directory__name { flex-grow: 1; }
.directory__domain { flex-shrink: 0; }

.directory__action {
  flex-shrink: 0;
  opacity: 0.6;
}

/* El panel lateral: el directorio, los ajustes de una sala.
 *
 * Entra por el mismo lado en el que esté la barra, para que salga de donde se
 * pulsó y no cruce la pantalla. Con `margin-inline: auto 0` el <dialog>
 * modal se pega al borde en vez de centrarse, que es lo que hace por defecto. */
.side-panel {
  background: transparent;
  block-size: 100dvh;
  border: 0;
  margin-block: 0;
  /* Al lado contrario de la barra, siempre.
     Salia por el mismo lado y se le echaba encima: para elegir otra sala
     mientras miras unos ajustes hay que cerrar el panel primero. Enfrentados,
     la navegacion se queda a la vista y la conversacion en medio. */
  margin-inline: auto 0;
  max-block-size: 100dvh;
  max-inline-size: 100dvw;
  padding: 0;

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

  &::backdrop {
    backdrop-filter: blur(3px);
    background-color: oklch(0% 0 0 / 0.4);
  }
}

.side-panel__box {
  background-color: var(--color-bg);
  position: relative;
  block-size: 100dvh;
  /* El canto va del lado que mira a la conversacion, que cambia con el panel. */
  border-inline-start: 1px solid var(--color-border-darker);
  display: flex;
  flex-direction: column;
  inline-size: min(30rem, 100dvw);
  overflow-y: auto;
  /* El panel ocupa el alto entero, asi que en un movil con notch llega bajo la
     barra de estado y el indicador de inicio: sin las areas seguras, la X de
     cerrar caia debajo de la hora. */
  padding-block: calc(var(--block-space) + var(--safe-top)) calc(var(--block-space) + var(--safe-bottom));
  padding-inline: var(--inline-space-double);

  .sidebar-end & {
    border-inline-start: 0;
    border-inline-end: 1px solid var(--color-border-darker);
  }
}

/* El cerrar flota sobre la esquina: la cabecera la pone el directorio, y
   robarle una fila entera solo para este boton apretaria la lista. */
.side-panel__close {
  --btn-size: 1.8em;

  /* Sticky y no absolute: la caja del panel scrollea, y con la lista larga el
     boton se iba por arriba.
     Y como flex item, no flotando: el box es flex column, donde `float` no
     hace nada -- el boton se colocaba como un item mas al principio de la
     fila y se montaba encima del primer campo. Con align-self ocupa su propia
     fila, pegado al borde que toca. */
  align-self: flex-end;
  background-color: var(--color-bg);
  flex: none;
  inset-block-start: 0;
  margin-block-end: var(--block-space-half);
  position: sticky;
  z-index: 1;
}

/* Dentro del panel el directorio ya no necesita centrarse ni acotarse: la
   caja del panel es su ancho. */
.side-panel .directory,
.side-panel .panel {
  margin-inline: 0;
  max-inline-size: none;
}

/* El contenido dentro del panel lateral.
 *
 * `.panel` está hecho para una página: una tarjeta de 50ch, centrada, con
 * sombra y borde sobre el fondo. Dentro del panel eso se veía como una caja
 * dentro de otra caja, con la tarjeta flotando en una superficie que ya era
 * una superficie. Aquí la misma vista se comporta como contenido, no como
 * tarjeta.
 *
 * Ninguna de estas reglas alcanza a las paginas completas de ajustes ni al
 * directorio: todas cuelgan de .side-panel. */
.side-panel .panel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  inline-size: 100%;
  margin: 0;
  max-inline-size: none;
  padding: 0;
  /* Un formulario en una columna estrecha se lee de arriba abajo por su borde
     izquierdo; centrado, cada fila empieza en un sitio distinto. */
  text-align: start;
}

/* Dos secciones seguidas -- los ajustes y el borrado -- necesitan aire entre
   ellas, que antes ponía el margen de tarjeta. */
.side-panel .panel + .panel {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--block-space-double);
  padding-block-start: var(--block-space);
}

/* La lista de miembros traía su propio scroll a 50vh. Dentro de un panel que
   ya scrollea, eso son dos barras anidadas: se elige cuál mueve el ratón por
   accidente. Scrollea el panel, que es la superficie. */
.side-panel .room-access .constrain-height {
  --max-height: none;

  overflow-y: visible;
}

/* Las acciones de un panel van a lo ancho: en una columna estrecha, un botón
   del tamaño de su icono no se lee como la acción principal.
 *
 * Cuelga de una clase propia y no de la variante de color. Colgaba de
 * `.btn--reversed`/`.btn--negative`, que dentro del panel también los llevan
 * botones que tienen que seguir siendo circulares -- borrar el avatar, borrar
 * el logo, expulsar a alguien --, y a lo ancho el circulito de "−" se
 * convertía en una barra roja de ~150px al lado del avatar. Marcar la acción
 * principal es explícito; deducirla del color no se puede, porque el botón de
 * guardar es igual de icónico que el de borrar. */
.side-panel .panel .panel-action {
  /* El radio, explicito: estos botones son circulares por la regla que casa
     con `:has(.for-screen-reader):has(img)`, y a lo ancho ese 50% los
     convierte en una elipse. */
  --btn-border-radius: 0.5em;

  aspect-ratio: auto;
  inline-size: 100%;
}

/* Densidad dentro del panel.
 *
 * Estas vistas se diseñaron para una página entera, donde el aire sobra. En una
 * columna de 480px el perfil pedía casi dos pantallas de scroll, y 548 de esos
 * 1498px se los llevaba la lista de salas -- diez filas para decir a cuáles
 * pertenezco. Aquí todo se aprieta un escalón: mismo contenido, menos viaje.
 *
 * Solo dentro de .side-panel: las páginas completas se quedan como estaban. */
.side-panel .panel {
  gap: var(--block-space-half);
}

/* Cada fila de sala es un nombre y una campana. No necesita el alto de un
   bloque de contenido. */
.side-panel .membership-item {
  padding-block: 0.15em;
}

.side-panel .membership-item .btn {
  --btn-size: 1.8em;
  --btn-padding: 0;
}

.side-panel menu {
  gap: 0.15em;
  padding: var(--block-space-half);
}

/* Los iconos de un legend son decorativos -- dicen de qué va el bloque -- y
   ocupaban 36px cada uno, tres seguidos. */
.side-panel fieldset legend img {
  block-size: 1.5em;
  inline-size: auto;
}

.side-panel fieldset {
  padding-block: var(--block-space-half);
}

/* El avatar en el panel: sigue siendo el elemento principal de la cabecera,
   pero a tamaño de página se comía un tercio del alto visible. */
.side-panel .avatar__form .btn.avatar {
  --avatar-size: 4.5rem;
}