@layer components {
  .case-thread {
    display: flex;
    flex-direction: column;
    block-size: var(--size-fill);
  }

  .case-thread__rows {
    padding-inline: max(var(--gutter-fluid), (var(--size-fill) - var(--measure)) / 2 + var(--gutter-fluid));
  }

  .case-thread__rows:empty {
    display: none;
  }

  .case-thread__line {
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .case-thread__rows > .case-thread__line {
    padding-block: var(--space-5);
  }

  .case-thread__closed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: var(--space-2);
  }

  .case-thread__typing {
    visibility: hidden;
    padding-inline: var(--gutter-fluid);
    padding-block-end: var(--space-2);
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-align: center;
  }

  .case-thread__typing--active {
    visibility: visible;
  }
}