/* Composer */
.composer {
  flex: none;
  padding: var(--block-space-half) calc(var(--inline-space) + 1vw);
}

.composer__input-hint,
.composer__context-btn {
  .composer:has(.composer__input:focus-within) & {
    @media (max-width: 120ch) {
      display: none;
    }
  }
}

.composer__input-hint {
  align-self: center;
}

/* Attachments */
.composer__attachment-btn {
  --hover-filter: brightness(0.85);
  margin-inline-end: -0.5em;

  @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: 1em;
  --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;
  }

  @media (prefers-color-scheme: dark) {
    &::after {
      filter: invert(100%);
    }
  }

  :root[data-theme="light"] &::after {
    filter: invert(0%);
  }

  :root[data-theme="dark"] &::after {
    filter: invert(100%);
  }
}

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

  display: inline-flex;
  margin-inline-start: -0.5em;

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

  img {
    inline-size: 1.7em;
  }
}

/* Rich text editor styling for all devices */
.composer--rich-text {
  lexxy-toolbar {
    display: flex;
  }

  lexxy-editor.input {
    margin-block-start: var(--block-space-half);
  }
}

/* In the message composer the toolbar goes below the text, on the same row as
   the surrounding action buttons, like the old Trix toolbar did. The edit
   composer keeps it on top. */
#composer.composer--rich-text lexxy-editor.input {
  display: flex;
  flex-direction: column;

  /* Sit the toolbar row on the same baseline as the composer's round buttons,
     which pull themselves down with negative margins */
  margin-block-end: -0.25em;

  .lexxy-editor__content {
    order: -1;
  }

  lexxy-toolbar {
    margin-block-start: 0.4em;

    /* Dropdowns open upward — the toolbar sits at the bottom of the screen */
    [data-dropdown-panel] {
      inset-block-start: auto;
      inset-block-end: 100%;
    }
  }
}

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

/* The editor's container-type prevents it from sizing the message bubble by its
   content, so give the bubble the full available width while editing */
.message__body:has(.composer--edit) {
  inline-size: 100%;

  .message__body-content--editing {
    flex-grow: 1;
  }
}

/* Typing indicator */
.typing-indicator {
  inset-block-start: var(--indicator-position, 0.15rem);
  inset-inline-start: var(--block-space);
  opacity: var(--indicator-opacity, 0);
  position: absolute;
  transition: opacity 250ms cubic-bezier(0.25, 1, 0.5, 1),
              transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(var(--indicator-shift, 2px));

  .sidebar & {
    @media (min-width: 120ch) {
      margin-inline-start: 2vw;
    }
  }

  &.typing-indicator--active {
    --indicator-position: 0.15rem;
    --indicator-opacity: 1;
    --indicator-shift: 0px;
  }
}

.typing-indicator__author {
  line-height: 1.2;

  &.spinner {
    display: none;

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

    /* Hide the default spinner dots — replaced by .typing-dots */
    &::before {
      display: none;
    }
  }
}

.typing-dots {
  display: inline-flex;
  gap: 0.2em;
  align-items: center;

  span {
    display: inline-block;
    inline-size: 0.4em;
    block-size: 0.4em;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.3;
  }

  .typing-indicator--active & span {
    animation: typing-dot 1.2s infinite both;

    &:nth-child(2) { animation-delay: 0.15s; }
    &:nth-child(3) { animation-delay: 0.3s; }
  }
}

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

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