@layer components {
  .conversation-bar {
    position: sticky;
    inset-block-start: var(--space-0);
    z-index: var(--z-sticky);
    padding-block-start: var(--safe-top);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .conversation-bar__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .conversation-bar__links {
    flex: auto;
    min-inline-size: var(--space-0);
  }

  .conversation-bar--prominent {
    position: static;
    max-inline-size: var(--measure);
    margin-block-start: var(--space-7);
    margin-inline: auto;
    padding-block-start: var(--space-0);
    padding-inline: var(--gutter-fluid);
    border-block-end: none;
  }

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