@layer components {
  .bc-prosemirror-editor-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 200px;
    height: 100%;
    width: 100%;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-control, var(--radius-md));
    background-color: var(--color-neutral-50);
    padding: var(--spacing-sm);
  }

  .dark .bc-prosemirror-editor-container {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
  }

  .bc-prosemirror-editor-container--error {
    border-color: var(--color-danger-500);
  }

  .bc-prosemirror-editor {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
    font-family: var(
      --font-prose,
      var(
        --font-family-default-prose,
        var(--font-body, var(--font-family-sans))
      )
    );
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--color-neutral-900);
  }

  .dark .bc-prosemirror-editor {
    color: var(--color-neutral-100);
  }

  /* ProseMirror core styles */
  .bc-prosemirror-editor .ProseMirror {
    outline: none;
    min-height: 100%;
  }

  .bc-prosemirror-editor .ProseMirror p {
    margin: 0.75rem 0;
  }

  .bc-prosemirror-editor .ProseMirror p:first-child {
    margin-top: 0;
  }

  .bc-prosemirror-editor .ProseMirror p:last-child {
    margin-bottom: 0;
  }

  /* Placeholder support */
  .bc-prosemirror-editor[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--color-neutral-400);
    pointer-events: none;
    position: absolute;
  }

  .dark .bc-prosemirror-editor[data-placeholder]:empty::before {
    color: var(--color-neutral-600);
  }

  .bc-prosemirror-editor .ProseMirror {
    white-space: pre-wrap;
  }

  /* Headings */
  .bc-prosemirror-editor .ProseMirror h1 {
    margin-block: 1.25rem 0.75rem;
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 700;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  .bc-prosemirror-editor .ProseMirror h2 {
    margin-block: 1.25rem 0.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  .bc-prosemirror-editor .ProseMirror h3 {
    margin-block: 1rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  .bc-prosemirror-editor .ProseMirror h4 {
    margin-block: 0.75rem 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  .bc-prosemirror-editor .ProseMirror h5 {
    margin-block: 0.75rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  .bc-prosemirror-editor .ProseMirror h6 {
    margin-block: 0.75rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    font-family: var(
      --font-heading,
      var(
        --font-family-default-heading,
        var(--font-body, var(--font-family-sans))
      )
    );
  }

  /* Inline formatting */
  .bc-prosemirror-editor .ProseMirror strong {
    font-weight: 700;
  }

  .bc-prosemirror-editor .ProseMirror em {
    font-style: italic;
  }

  .bc-prosemirror-editor .ProseMirror code {
    font-family: var(--font-mono, var(--font-family-mono));
    font-size: 0.875rem;
    background: var(--color-base-50);
    border: 1px solid var(--color-base-200);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.1rem 0.35rem;
    color: var(--color-primary-700);
  }

  .dark .bc-prosemirror-editor .ProseMirror code {
    background: var(--color-base-800);
    border-color: var(--color-base-700);
    color: var(--color-primary-300);
  }

  .bc-prosemirror-editor .ProseMirror a {
    color: var(--color-primary-600);
    text-decoration: underline;
  }

  .bc-prosemirror-editor .ProseMirror a:hover {
    color: var(--color-primary-700);
  }

  .dark .bc-prosemirror-editor .ProseMirror a {
    color: var(--color-primary-400);
  }

  .dark .bc-prosemirror-editor .ProseMirror a:hover {
    color: var(--color-primary-300);
  }

  /* Lists */
  .bc-prosemirror-editor .ProseMirror ul,
  .bc-prosemirror-editor .ProseMirror ol {
    padding-inline-start: 1.5rem;
    margin-block: 0.75rem;
  }

  .bc-prosemirror-editor .ProseMirror ul {
    list-style: disc;
  }

  .bc-prosemirror-editor .ProseMirror ol {
    list-style: decimal;
  }

  .bc-prosemirror-editor .ProseMirror li {
    margin-block: 0.25rem;
  }

  .bc-prosemirror-editor .ProseMirror li > p {
    margin: 0;
  }

  /* Blockquote */
  .bc-prosemirror-editor .ProseMirror blockquote {
    margin-block: 1rem;
    padding: 0.75rem 1rem;
    border-inline-start: 4px solid var(--color-primary-200);
    background: color-mix(in srgb, var(--color-primary-50) 30%, transparent);
    border-radius: var(--radius-md, 0.5rem);
  }

  .dark .bc-prosemirror-editor .ProseMirror blockquote {
    border-inline-start-color: var(--color-primary-700);
    background: color-mix(in srgb, var(--color-primary-900) 30%, transparent);
  }

  /* Code block */
  .bc-prosemirror-editor .ProseMirror pre {
    font-family: var(--font-mono, var(--font-family-mono));
    font-size: 0.875rem;
    line-height: 1.5rem;
    background: var(--color-base-50);
    border: 1px solid var(--color-base-200);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.75rem 1rem;
    overflow: auto;
    margin-block: 1rem;
  }

  .dark .bc-prosemirror-editor .ProseMirror pre {
    background: var(--color-base-800);
    border-color: var(--color-base-700);
  }

  .bc-prosemirror-editor .ProseMirror pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
  }

  /* Horizontal rule */
  .bc-prosemirror-editor .ProseMirror hr {
    border: none;
    border-top: 1px solid var(--color-base-200);
    margin: 1rem 0;
  }

  .dark .bc-prosemirror-editor .ProseMirror hr {
    border-top-color: var(--color-base-700);
  }

  /* Selection */
  .bc-prosemirror-editor .ProseMirror ::selection {
    background: var(--color-primary-200);
  }

  .dark .bc-prosemirror-editor .ProseMirror ::selection {
    background: var(--color-primary-800);
  }

  /* Focus styles */
  .bc-prosemirror-editor-container:focus-within {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  /* Disabled state */
  .bc-prosemirror-editor-container:has(.ProseMirror[contenteditable='false']) {
    opacity: 0.6;
    cursor: not-allowed;
  }
}