@layer components {
  .composer {
    display: flex;
    align-items: end;
    inline-size: var(--size-fill);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: var(--space-1);
    padding-inline: var(--space-5) var(--space-0);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease-calm);
  }

  .composer__field {
    flex: auto;
    min-inline-size: var(--space-0);
    max-block-size: var(--composer-max-block-size);
    padding-block: var(--composer-field-padding-block);
    field-sizing: content;
    resize: none;
    font: var(--type-body);
    color: var(--color-ink);
    outline: none;
  }

  .composer__field::placeholder {
    color: var(--color-ink-faint);
  }

  .composer__send,
  .composer__attach {
    --icon-size: var(--composer-send-icon-size);
    --composer-send-reach: calc((var(--tap-min) - var(--composer-send-size)) / 2);

    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    margin-block: calc(var(--composer-send-reach) * -1);
    padding: var(--composer-send-reach);
    border-radius: var(--radius-pill);
    background-clip: content-box;
  }

  .composer__send {
    background-color: var(--color-accent);
    color: var(--color-ink-on-accent);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-spring);
  }

  .composer:has(.composer__field:placeholder-shown) .composer__send {
    background-color: transparent;
    color: var(--color-ink-faint);
  }

  .composer__send:active {
    transform: scale(var(--press-scale));
  }

  .composer--attach {
    flex-wrap: wrap;
    padding-inline-start: var(--space-0);
  }

  .composer--attach > :not(.composer__attach, .composer__field, .composer__send) {
    flex-basis: var(--size-fill);
  }

  .composer__attach {
    color: var(--color-ink-muted);
  }

  .composer__files {
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-5);
  }

  .composer__files:empty {
    display: none;
  }

  .composer__file {
    display: grid;
    grid-template-columns: minmax(var(--space-0), var(--track-fill)) max-content max-content;
    align-items: center;
    column-gap: var(--space-4);
    padding-block: var(--space-2);
    font: var(--type-caption);
  }

  .composer__file + .composer__file {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .composer__file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-ink);
  }

  .composer__file-size {
    color: var(--color-ink-faint);
  }

  .composer__file-progress {
    grid-column: 1 / -1;
    block-size: var(--border-width-strong);
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
  }

  .composer__file[data-placeholder] .composer__file-progress {
    visibility: hidden;
  }

  .composer__file-bar {
    display: block;
    block-size: var(--size-fill);
    background-color: var(--color-accent);
  }

  .composer--attach .choice {
    padding-inline: var(--space-5);
    padding-block-end: var(--space-3);
  }

  .notice.composer__refused {
    position: fixed;
    inset-inline: var(--gutter-fluid);
    inset-block-end: calc(var(--dock-clearance) + var(--space-5));
  }
}