@layer components {
  .conversation-status {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-inline-size: var(--space-0);
  }

  .conversation-status .avatar {
    --icon-size: var(--conversation-status-mark-size);

    flex: none;
    background-color: var(--color-guide);
    color: var(--color-guide-ink);
  }

  .conversation-status__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: var(--space-0);
  }

  .conversation-status__name {
    font: var(--type-label);
    color: var(--color-ink);
  }

  .conversation-status__line {
    display: flex;
    gap: var(--space-2);
    white-space: nowrap;
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .conversation-status__mode {
    flex: none;
  }

  .conversation-status__latest {
    min-inline-size: var(--space-0);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sheet__disclosure[open] .conversation-status__latest,
  .sheet__disclosure[open] .conversation-status__line:not(:has(.conversation-status__mode)) {
    display: none;
  }
}