@layer components {
  .roleplay-handoff {
    padding: var(--block-space) var(--inline-space);
    max-inline-size: var(--editor-max-width);
    margin-inline: auto;
    min-inline-size: 0;
  }

  .roleplay-handoff__title {
    font-size: var(--text-large);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .roleplay-handoff__scopes,
  .roleplay-handoff__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }

  .roleplay-handoff .btn {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .roleplay-handoff__text {
    margin-block: var(--block-space);
    padding: var(--block-space-half) var(--inline-space);
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: var(--line-height);
  }

  .roleplay-handoff__note {
    color: var(--color-ink-secondary);
    margin-block-end: var(--block-space);
  }

  .roleplay-handoff__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .roleplay-handoff__error {
    color: var(--color-negative);
    font-size: var(--text-small);
  }

  .roleplay-handoff__error[hidden] {
    display: none;
  }
}