/* El composer: una caja con borde, como la de Slack.
 *
 * Arriba la barra de formato, que aparece cuando se activa Aa y sigue
 * decidiendo lo que hace Enter (composer_controller); en medio el editor; abajo
 * la fila de acciones con adjuntar, Aa y enviar. La lupa que estaba fuera se
 * queda solo en movil: en escritorio vive en la cabecera. */
.composer {
  flex: none;
  /* El indicador de inicio de un movil sin boton cae justo aqui: en standalone
     se comia la fila de escribir. Ver los tokens --safe-* de layout.css. */
  padding: var(--block-space-half) calc(var(--inline-space) + 1vw) calc(var(--block-space-half) + var(--safe-bottom));
}

.composer__context-btn {
  --btn-background: transparent;
  --btn-border-color: transparent;

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

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

/* La caja. El halo de foco lo pone .input--actor; aqui solo la forma. */
.composer__box {
  --input-border-radius: 0.6rem;
  --input-padding: 0;
  /* El borde en el gris decorativo y no en el de campo: el de campo esta
     subido a 3:1 para formularios, y aqui se leia como una raya blanca
     alrededor de la caja. Al enfocar sube un escalon. */
  --input-border-color: var(--color-border-darker);
  /* El foco es un borde que se aclara y una sombra corta, no el halo grueso
     de los campos de formulario: aqui se escribe todo el dia. */
  --hover-size: 0;

  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;

}

/* Con la clase del campo repetida a proposito: las reglas de .input--actor en
   inputs.css pesan mas y cargan despues, y sin igualarlas el foco volvia al
   halo azul de formulario y el ultimo boton recuperaba el margen negativo
   pensado para un campo de una linea, que dejaba Enviar montado en el borde. */
.composer__box.input--actor {
  &:focus-within {
    --input-border-color: var(--color-border-input);
    --hover-color: transparent;

    box-shadow: 0 1px 4px oklch(var(--lch-always-black) / 0.08);
  }

  .btn:not(.avatar),
  .btn:not(.avatar):last-child {
    margin: 0;
  }
}

.composer__editor {
  display: flex;
  flex-direction: column;

  trix-editor.input {
    --input-padding: 0.6rem 0.8rem 0.3rem;

    min-block-size: 2.6rem;
  }

  /* La barra de formato va arriba del editor, como en Slack. Trix la inserta
     delante en el DOM; el orden la mantiene ahi aunque el editor se marque
     con order:-1 en el markup heredado. */
  trix-toolbar {
    border-block-end: 1px solid var(--color-border-dark);
    inset: auto;
    order: -2;
    padding: 0.3rem 0.5rem;
    position: static;

    .trix-button-row {
      align-items: center;
      gap: 0.1rem;
    }

    .trix-button-group {
      gap: 0.05rem;
    }

    /* Separadores entre grupos, como en Slack. */
    .trix-button-group + .trix-button-group {
      border-inline-start: 1px solid var(--color-border-dark);
      margin-inline-start: 0.3rem;
      padding-inline-start: 0.35rem;
    }

    .trix-button--icon {
      inline-size: 1.7rem;
      min-block-size: 1.7rem;
      opacity: 0.75;

      &.trix-active,
      &:hover {
        opacity: 1;
      }
    }

  }
}

.composer__actions {
  padding: 0.15rem 0.4rem 0.4rem;

  .btn {
    --btn-size: 2em;

    margin: 0;
  }

  .composer__send {
    --btn-size: 2.2em;
  }

  .btn:not(.composer__send) {
    --btn-border-color: transparent;

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

      box-shadow: none;
    }

    img {
      inline-size: 1.2em;
    }
  }
}

/* Enviar, con el acento. Mientras no hay nada que enviar se queda como un
   icono apagado, sin caja, como en Slack. La clase la pone composer_controller
   en cada cambio: un editor vacio de Trix sigue teniendo un <br>, asi que
   :empty no sirve. */
.composer__send {
  --btn-background: var(--color-link);
  --btn-border-color: transparent;
  --btn-border-radius: 0.45rem;
  --btn-color: #fff;
  --btn-size: 2.2em;
  --hover-filter: brightness(1.1);
  --hover-size: 0;

  img {
    filter: invert(100%);
    inline-size: 1.25em;
  }

  .composer--empty & {
    --btn-background: transparent;

    img {
      filter: invert(calc(var(--icon-invert) * 100%));
      opacity: 0.4;
    }
  }
}

/* La arroba y la carita, dibujadas con texto: no hay icono para ellas y un
   caracter es lo que es. */
.composer__emoji-glyph,
.composer__mention-glyph {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.85;
}

.composer__hint {
  color: var(--color-text-subtle);
  font-size: 0.7rem;
  padding: 0.3rem 0.2rem 0;

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

/* Attachments */
.composer__attachment-btn {
  --hover-filter: brightness(0.85);

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      filter: var(--hover-filter);
      box-shadow: none;
    }
  }
}

/* Pending attachments */
.composer__filelist {
  --row-gap: var(--block-space-half);

  &:not(:empty) {
    padding-block-end: var(--block-space-half);
  }
}

.composer__file {
  --aspect-ratio: 5/4;
  --btn-border-radius: 0.6rem;
  --thumbnail-size: 15ch;

  aspect-ratio: var(--aspect-ratio);
  inline-size: var(--thumbnail-size);
}

:is(img, span):is(.composer__file-thumbnail) {
  aspect-ratio: var(--aspect-ratio);
  block-size: auto;
  border-radius: var(--btn-border-radius);
  border: 1px solid var(--color-border-darker);
  inline-size: var(--thumbnail-size);
  object-fit: cover;
}

.composer__file-thumbnail--common {
  background: url("/assets/common-file-text-9043d980.svg") no-repeat center;
  background-size: 55%;
}

.composer__file-caption {
  --icon-size: 1.3em;

  &::after {
    content: "";
    block-size: var(--icon-size);
    inline-size: var(--icon-size);
    background: url("/assets/remove-circle-384c618c.svg") no-repeat center;
    margin-inline: 0.5em -0.5em;
    flex-shrink: 0;
  }

  &::after {
    filter: invert(calc(var(--icon-invert) * 100%));
  }
}

/* Rich text */
.composer__rich-text-btn {
  --hover-filter: brightness(0.85);

  display: none;

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      filter: var(--hover-filter);
      box-shadow: none;
    }
  }
}

@media (min-width: 100ch) and (any-hover: hover) and (pointer: fine) {
  .composer__rich-text-btn {
    display: inline-flex;
  }

  .composer--rich-text {
    trix-toolbar {
      display: block;
    }
  }

  /* Con la barra abierta, Aa se marca: es el interruptor de lo que hace Enter. */
  .composer--rich-text .composer__rich-text-btn {
    --btn-background: var(--color-selected);
  }

  .composer--edit trix-toolbar {
    border-block-end: 1px solid var(--color-border);
    margin-inline: -0.8em;
    padding-inline: 0.3em;
    padding-block-end: 0.5em;
  }
}

/* Typing indicator */
.typing-indicator {
  inset-block-start: var(--indicator-position, -0.6rem);
  inset-inline-start: calc(var(--block-space) + var(--inline-space));
  opacity: var(--indicator-opacity, 0);
  position: absolute;
  transition: inset-block-start 300ms ease,
              opacity 300ms ease;

  &.typing-indicator--active {
    --indicator-position: -0.6rem;
    --indicator-opacity: 1;
  }
}

.typing-indicator__author {
  line-height: 1;
  padding-inline-start: 1.5em;

  &.spinner {
    display: none;

    .typing-indicator--active & {
      display: block;
    }
  }
}

.composer__input {
  .composer__rich-text-btn,
  label:has(input[type="file"]) {
    cursor: pointer;
  }
}