@layer components {
  /* A suggested reply, between the thread and the reply box: what it rests on,
   * and what to check before sending it. The reply itself is in the box, so
   * this never repeats it.
   *
   * It is capped and scrolls on its own, like the thread above it, so a draft
   * with a long list of claims never pushes the reply box off the screen. */
  .draft {
    --draft-max-height: 35vh;

    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    max-block-size: var(--draft-max-height);
    overflow-y: auto;
    padding: var(--space-half) var(--pane-gutter);
    border-block-start: var(--border);
    background: var(--surface-sunk);

    &:not(:has(.draft__header)) {
      flex-direction: row;
      justify-content: end;
      background: transparent;
    }
  }

  /* A draft that is the screen's subject rather than a panel over the reply
   * box: a tried message's. It takes the page's own scroll and surface. */
  .draft--page {
    --draft-max-height: none;

    padding: 0;
    border-block-start: none;
    background: transparent;
  }

  /* What autopilot does with the turn: when it reads it, with Take over
   * beside the line, or what it did. */
  .draft__autopilot {
    margin: 0;

    &:has(form) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-half);
    }

    & p { margin: 0; }
  }

  .draft__header {
    display: flex;
    align-items: center;
    gap: var(--space-half);
  }

  .draft__title {
    margin: 0;
    font-size: var(--text-normal);
    font-weight: var(--weight-semibold);
  }

  .draft__cost { margin-inline-start: auto; }

  .draft__subtitle {
    margin: 0;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-soft);
  }

  .draft__list,
  .draft__claims {
    display: flex;
    flex-direction: column;
    gap: var(--space-quarter);
    margin: 0;
    padding-inline-start: var(--space);
    font-size: var(--text-small);
  }

  .draft__claim {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-quarter) var(--space-half);
  }

  .draft__cites {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-quarter);
  }

  .draft__ask { align-self: end; }

  .draft__actions {
    display: flex;
    gap: var(--space-half);
    justify-content: end;
  }
}