@layer components {
  .conversation-ended {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: safe center;
    gap: var(--space-7);
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--space-7) calc(var(--dock-clearance) + var(--space-9));
    padding-inline: var(--gutter-fluid);
    text-align: center;
  }

  .conversation-ended__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: var(--size-fill);
    max-inline-size: var(--measure-tight);
    margin-inline: auto;
  }

  .conversation-ended__actions .button {
    inline-size: var(--size-fill);
  }
}