@layer components {
  /* ========================================
   * Prose Editor
   * ======================================== */

  /* Its inline padding and the prose box's are in rem, because
   * --editor-max-width adds them to the prose measure. */
  .editor {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: var(--editor-max-width);
    margin-inline: auto;
    padding: var(--block-space) var(--block-space) calc(var(--block-space) * 0.75);
  }

  /* -- Header -- */

  .editor__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding-block-end: var(--block-space-half);
    border-block-end: var(--border);
    margin-block-end: var(--block-space-half);
  }

  .editor__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-target-min);
    min-inline-size: var(--touch-target-min);
    padding: 0.25em;
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }

  .editor__nav-btn:hover {
    background-color: var(--color-surface);
  }

  .editor__nav-btn--disabled {
    opacity: 0.3;
    pointer-events: none;
  }


  /* A zero preferred width keeps a long title from widening the editor; the
   * title grows into whatever room the header's other items leave. */
  .editor__chapter-title {
    flex: 1 1 0;
    inline-size: 0;
    font-family: var(--font-prose);
    font-weight: 500;
    font-size: var(--text-normal);
    line-height: var(--line-height);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor__word-count {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* -- Chapter menu -- */

  .editor__menu {
    position: relative;
  }

  .editor__menu-toggle {
    cursor: pointer;
    list-style: none;
  }

  .editor__menu-toggle::-webkit-details-marker {
    display: none;
  }

  .editor__menu-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    min-inline-size: 12rem;
    padding-block: var(--block-space-half);
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius);
  }

  .editor__menu-meta {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: 0 var(--inline-space) var(--block-space-half);
  }

  .editor__menu-item {
    display: flex;
    align-items: center;
    inline-size: 100%;
    min-block-size: var(--touch-target-min);
    padding-inline: var(--inline-space);
    background: none;
    border: 0;
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .editor__menu-item:hover {
    background-color: var(--color-surface);
  }

  .editor__menu-item--negative {
    color: var(--color-negative);
  }

  @media (max-width: 799px), (pointer: coarse) {
    .editor__nav-btn {
      min-block-size: 44px;
      min-inline-size: 44px;
    }

    .editor__menu-item {
      min-block-size: 44px;
    }
  }

  .editor__source {
    margin-block-end: var(--block-space-half);
  }

  /* -- Editor Body -- */

  .editor__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

  /* -- Action Bar -- */

  .editor__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    padding-block-start: var(--block-space-half);
    border-block-start: var(--border);
  }

  .editor__action-group {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    flex-wrap: wrap;
  }

  /* Continue, Rewrite, Expand, Compress and Draft are quiet actions. */
  .editor__actions .btn:not(.btn--primary) {
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-ink-secondary);
    --btn-padding-inline: 0.6em;
  }

  .editor__actions .btn:not(.btn--primary):hover {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-ink);
  }

  .editor__action-group--secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--inline-space);
  }

  /* -- Streaming indicator -- */

  .editor__streaming {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    font-size: var(--text-small);
    color: oklch(var(--lch-ink-dark));
  }

  .editor__streaming[hidden] {
    display: none;
  }

  .editor__streaming-dot {
    display: inline-block;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: editor-pulse 1s ease-in-out infinite;
  }

  @keyframes editor-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* -- Rewrite/Expand/Compress accept/reject -- */

  .editor__accept-reject {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
  }

  .editor__accept-reject[hidden] {
    display: none;
  }

  /* Marks the document range a Rewrite/Expand/Compress stream is replacing,
   * until the author accepts or rejects it. */
  .ai-replacement {
    background: oklch(var(--lch-accent) / 0.15);
    border-radius: 2px;
  }

  /* Marks what the last Continue or Draft wrote, which Undo AI removes. */
  .ai-written {
    background: oklch(var(--lch-accent) / 0.1);
  }

  .editor__undo-ai[hidden] {
    display: none;
  }

  /* -- Error banner -- */

  .editor__error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--block-space-half) var(--inline-space);
    background: oklch(var(--lch-ink-lighter));
    border-radius: var(--radius);
    margin-block-start: var(--block-space-half);
    color: var(--color-negative);
    font-size: var(--text-small);
  }

  .editor__error[hidden] {
    display: none;
  }

  /* -- Status chips: the label carries the status, in a hairline. -- */

  .status--draft,
  .status--revised,
  .status--final {
    border: var(--border);
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--line-height);
    padding: 0 0.45em;
  }

  /* -- Tiptap Editor Rendering --
   * Styles for the ProseMirror editor element rendered by Tiptap. */

  .editor__tiptap {
    flex: 1;
    inline-size: 100%;
    min-block-size: 200px;
    padding: calc(var(--block-space) * 1.25) var(--block-space-half);
    border: 1px solid transparent;
    border-radius: var(--radius);
    outline: none;
    background: transparent;
    caret-color: var(--color-accent);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-prose);
    line-height: var(--line-height-loose);
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* A writing surface wants a quiet cue, not the heavy focus ring. */
  .editor__tiptap:focus {
    border-color: var(--color-accent);
    outline: none;
  }

  /* ProseMirror paragraph spacing — use margin-block-end for visual separation
   * between paragraphs in the prose editor. Without this, consecutive <p>
   * elements run together with no gap, making the text hard to read. */
  .editor__tiptap p {
    margin: 0;
    margin-block-end: 1.2em;
  }

  .editor__tiptap p:last-child {
    margin-block-end: 0;
  }

  .editor__tiptap h2 {
    margin: 0;
    margin-block-end: var(--block-space);
    font-size: var(--text-large);
    font-weight: 500;
    line-height: var(--line-height-tight);
  }

  .editor__tiptap .scene-break {
    text-align: center;
  }

  /* Italic and bold rendering in the prose editor */
  .editor__tiptap em {
    font-style: italic;
  }

  .editor__tiptap strong {
    font-weight: 600;
  }

  /* Placeholder text (via @tiptap/extension-placeholder) */
  .editor__tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: oklch(var(--lch-ink-medium));
    float: inline-start;
    block-size: 0;
    pointer-events: none;
  }

  /* -- Mobile -- */

  @media (max-width: 799px) {
    .editor {
      padding: var(--block-space-half) var(--inline-space-half);
    }

    .editor__tiptap {
      padding-block: var(--block-space);
    }

    /* Squeezed by an open summary, the prose box would overflow its body
     * under the action bar; instead the editor grows and the pane scrolls it. */
    .editor:has(.context-panel) {
      block-size: auto;
      flex-shrink: 0;
      min-block-size: 100%;
    }

    .editor:has(.context-panel) :is(.editor__body, .editor__tiptap) {
      flex: none;
    }

  /* A focused field scrolls clear of the sticky action bar. */
  .app-main__content:has(.editor__actions) {
    scroll-padding-block-end: calc(44px + var(--block-space-double));
  }

  .editor__actions {
    position: sticky;
    inset-block-end: 0;
    background: var(--color-canvas);
    padding: var(--block-space-half) var(--inline-space-half);
    z-index: var(--z-base);
  }
  }
}