/* La búsqueda como diálogo.
 *
 * Mismo patrón que el salto (`dialog.jump`, en sidebar.css): fondo con blur y
 * caja anclada arriba en vez de centrada, para que la lista crezca hacia abajo
 * sin mover el campo bajo los dedos. Cambian dos cosas: el ancho, porque aquí
 * dentro se leen mensajes y no nombres, y que los resultados son el mismo
 * bloque `.messages` de la página, así que hay que desandarle lo que trae para
 * una sala.
 *
 * Declaraciones planas primero y reglas anidadas al final de cada bloque: sin
 * `CSSNestedDeclarations` todo lo que venga detrás de una anidada se descarta.
 */
dialog.search {
  background: transparent;
  border: 0;
  max-block-size: 100dvh;
  max-inline-size: 100dvw;
  padding: 0;

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

.search__box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-darker);
  /* El color hay que fijarlo aquí. El UA pone `color: canvastext` en `dialog`,
     y `canvastext` sigue al `color-scheme` del navegador, no a la clase de tema
     de la app: con el tema oscuro elegido y Chrome en claro, todo lo que no
     traiga color propio sale negro sobre negro. Se lo comía la cabecera de
     sección. */
  color: var(--color-text);
  border-radius: 0.75em;
  box-shadow: 0 1em 3em oklch(0% 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  /* Más ancha que la del salto: en 46ch un mensaje de dos líneas se rompe en
     cinco, y lo que se lee aquí es el mensaje, no su primera palabra. Se queda
     por debajo de la columna de conversación (100ch) porque sigue siendo una
     caja encima de otra cosa, no la conversación. */
  inline-size: min(76ch, 92dvw);
  margin: 10dvh auto auto;
  max-block-size: 78dvh;
  overflow: hidden;
}

.search__field {
  border-block-end: 1px solid var(--color-border);
  padding: 0.7em 0.9em;
}

.search__input {
  background: transparent;
  border: 0;
  flex-grow: 1;
  font-size: 1rem;
  outline: 0;
}

.search__close {
  --btn-size: 1.8em;

  flex-shrink: 0;
}

/* El scroll vive aquí y no en `.messages`: si lo llevaran los dos, la rueda
   pararía en el borde de la lista interior y el diálogo se quedaría a medias. */
.search__results {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.4em;

  .messages {
    overflow-y: visible;
    /* La lista de una sala nace por debajo del nav fijo. Aquí no hay nav, y ese
       hueco eran 4,125em de vacío antes del primer resultado. */
    padding-block-start: 0;
    row-gap: 0.9em;
  }

  /* Los boosts se ven, pero aquí no se tocan.
   *
   * El partial de mensaje trae turbo-frames con ID derivado del mensaje
   * (`message_N_boosting`, `_new_boost`, `_boosts`). Dentro del diálogo esos ID
   * quedan duplicados con los de la sala que hay detrás, y las navegaciones de
   * frame por atributo se resuelven con `document.getElementById`, que devuelve
   * la primera copia -- la de la sala, porque este diálogo se monta después de
   * `#message-area`. Así que el "+" abría el selector aquí y al enviar pintaba
   * la respuesta detrás del modal, dejando el selector abierto para siempre; y
   * "Cancelar" sustituía la lista de boosts del mensaje de la sala por la página
   * índice. De las dos solo se salía recargando.
   *
   * Se acota al diálogo y no a la regla compartida con /searches: allí no hay
   * segunda copia de nada, así que el problema no existe.
   *
   * El "+" se esconde aquí. Lo de tocar un boost ya puesto NO se arregla con
   * CSS y se hace en `search_controller#freezeBoosts`, que marca `inert` el
   * subárbol: aquí había un `pointer-events: none` con un comentario que decía
   * que el teclado no llegaba porque el <span role="button"> no tenía tabindex.
   * Era falso -- `boost_delete_controller#connect` se lo pone en tiempo de
   * ejecución cuando el boost es tuyo -- y por ahí se podía borrar un boost con
   * Tab+Enter+Enter desde el diálogo. */
  .message__boost-inline {
    display: none !important;
  }
}

.search__section {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0.5em 0 0.2em;
  opacity: 0.5;
  padding-inline-start: 0.6em;
  text-transform: uppercase;
}

.search__empty {
  padding: 0.8em;
}

.search__result {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.5em;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font-size: 0.95rem;
  gap: 0.6em;
  inline-size: 100%;
  padding: 0.45em 0.6em;
  text-align: start;
  text-decoration: none;

  /* `button_to` envuelve el botón en un form; sin esto la salida a la página
     arrastraría el margen del formulario y quedaría descolgada de la lista. */
  form:has(&) {
    margin: 0;
  }
}

.search__icon {
  display: flex;
  flex-shrink: 0;
  inline-size: 20px;
  justify-content: center;
  opacity: 0.45;
}

.search__name {
  flex-grow: 1;
}

/* Marcado con el teclado, y con el ratón en las filas propias. En una fila el
   marcado es el fondo, como en el salto; en un mensaje sería pintar por debajo
   de una burbuja que ya tiene el suyo, así que ahí es un borde. */
.search__result.search__row--on,
.search__result:hover,
.search__result:focus-visible {
  background-color: var(--color-selected);
  outline: 0;
}

.message.search__row--on {
  outline: 2px solid var(--color-selected-dark);
  outline-offset: 1px;
}

.search__legend {
  border-block-start: 1px solid var(--color-border);
  padding: 0.5em 0.9em;

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