/* ============================================================
   PENDING CHANGES — inline in document
   ============================================================ */

/* Agent-change reveal: a single, layout-free opacity settle the first time a
   pending change paints. JS gates it to fire ONCE per change id (Changes._reveal)
   and applies it only to the CHANGED content (the diff-add/diff-del word spans,
   or a wholly-new element), never a whole section, so unchanged text never
   flickers and nothing shifts position. Opacity only: no transform, height, or
   margin, so it can't reflow or stutter. It carries no color of its own; the
   pending wash underneath is what says "this is an edit." */
@keyframes change-reveal {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}
.change-reveal { animation: change-reveal var(--dur-reveal) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    .change-reveal { animation: none; }
}

/* Resolve fade: accepting or rejecting a change lifts its diff highlight and
   fades its change bar out while the refresh swaps in the resolved text. Only
   the highlight background and the bar opacity move, never the content text's
   opacity or any box dimension, so text never blinks and nothing shifts. It
   adds no color; it removes the pending highlight that was already there. */
@keyframes change-lift    { to { background-color: transparent; } }
@keyframes wash-lift      { to { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }
@keyframes change-bar-out { from { opacity: 1; } to { opacity: 0; } }
/* Inline-diff edits (content, title, level, doc title/abstract, figure caption):
   lift the per-word highlight. */
.change-resolving .diff-add,
.change-resolving .diff-del { animation: change-lift var(--dur-reveal) var(--ease) forwards; }
/* Whole-element changes that wear a background wash + stripe instead of word
   diffs (new section, source add, deleted-section ghost): lift the wash. */
.change-resolving .section-inner,
.change-resolving.pending-source { animation: wash-lift var(--dur-reveal) var(--ease) forwards; }
/* Every accept/reject bar (and the standalone "Moved" reorder chip, which has
   no diff words to lift) fades out as its change resolves. */
.change-resolving .section-change-bar,
.change-resolving .figure-change-bar,
.change-resolving .source-change-bar,
.change-resolving .meta-move-diff { animation: change-bar-out var(--dur-reveal) var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
    .change-resolving .diff-add, .change-resolving .diff-del,
    .change-resolving .section-inner, .change-resolving.pending-source,
    .change-resolving .section-change-bar, .change-resolving .figure-change-bar,
    .change-resolving .source-change-bar, .change-resolving .meta-move-diff { animation: none; }
}

/* -- Section-level pending states --
   pending-edit / pending-meta: no left stripe — the inline body diff
   highlights already signal the edit. Gold here is redundant chrome and
   competes with the accent's other roles. Same reasoning we used for
   preview-changed sections in the history preview.
   pending-new keeps its green stripe because it's wholly new content with
   no inline diff to anchor it.

   Stripe is rendered as inset box-shadow on the .section-inner (the
   washed, rounded card edge) rather than border-left on the outer
   wrapper. border-left + border-radius creates a tapered wedge at the
   corners (the line narrows to zero where there's no top/bottom border
   to terminate against), which reads as a "floating" stripe. Inset
   box-shadow stays a constant 3px the full height of the rounded box. */
.pending-section { position: relative; }
.pending-section.pending-new .section-inner {
    background: var(--green-bg);
    box-shadow: inset 3px 0 0 var(--green);
}

/* -- Source-level pending states -- */
.pending-source { position: relative; }
.pending-source.pending-new {
    padding: 18px 20px;
    background: var(--green-bg);
    border-radius: var(--radius);
    border-bottom: none;
    margin-bottom: 8px;
    box-shadow: inset 3px 0 0 var(--green);
}
.source-change-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0 2px;
    margin-top: 8px;
}

/* -- Per-section accept/reject bar -- */
.section-change-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0 2px;
    margin-top: 8px;
}
.change-bar-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font: 11px/1.5 var(--sans);
    color: var(--td3);
    min-width: 0;
    flex: 1;
}
.change-bar-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    /* Always right-aligned, even when there's no .change-bar-label sibling
       (edited sections in history preview have just the Pick button, no
       badge — without this they'd flex-start to the left). */
    margin-left: auto;
}

/* -- Deleted section ghost --
   Stripe lives as inset box-shadow on .section-inner (see comment on
   .pending-section.pending-new above for why we avoid border-left). */
.deleted-section-ghost {
    position: relative;
    margin-bottom: 2px;
    border-radius: var(--radius);
}
.deleted-section-ghost .section-inner {
    background: var(--red-bg);
    border-radius: var(--radius);
    padding: 12px 20px;
    box-shadow: inset 3px 0 0 var(--red);
}
.deleted-section-ghost .diff-del {
    background: var(--red-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}

/* -- Level / summary diffs (metadata_edit inline) -- */
.meta-level-diff,
.meta-summary-diff {
    padding: 4px 0 2px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--doc-border-subtle);
    margin-top: 4px;
    padding-top: 6px;
}
/* Level = state chip → sans; Summary = content field → serif italic like .meta-summary-input */
.meta-level-diff { font: 12px/1.5 var(--sans); color: var(--td2); }
.meta-summary-diff { font: italic 14px/1.7 var(--serif); color: var(--td3); }
.meta-level-diff .diff-add,
.meta-summary-diff .diff-add {
    background: var(--green-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.meta-level-diff .diff-del,
.meta-summary-diff .diff-del {
    background: var(--red-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}

/* -- Figure edit diff -- */
.figure-caption-diff,
.figure-content-diff {
    padding: 6px 0 2px;
    border-top: 1px solid var(--doc-border-subtle);
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
/* Caption = content field → serif like .doc-figure-caption; Content (tables/equations) stays sans */
.figure-caption-diff { font: 14px/1.6 var(--serif); color: var(--td3); }
.figure-content-diff { font: 12px/1.6 var(--sans); color: var(--td2); }
.figure-caption-diff .diff-add,
.figure-content-diff .diff-add {
    background: var(--green-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.figure-caption-diff .diff-del,
.figure-content-diff .diff-del {
    background: var(--red-bg);
    color: var(--td2);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.diff-body-inline {
    font: 12px/1.6 var(--mono);
    white-space: pre-wrap;
    word-break: break-word;
}

/* -- Title diff (metadata_edit / document_edit) -- */
.meta-title-diff {
    flex: 1;
    min-width: 0;
}
.meta-diff-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.meta-diff-row:last-child { margin-bottom: 0; }
.meta-diff-num {
    font-family: var(--sans);
    color: var(--td3);
    opacity: 0.5;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.meta-diff-row[data-level="1"] .meta-diff-num { font-size: 22px; font-weight: 300; }
.meta-diff-row[data-level="2"] .meta-diff-num { font-size: 17px; font-weight: 400; }
.meta-diff-row[data-level="3"] .meta-diff-num { font-size: 13px; font-weight: 600; }
.meta-old-title, .meta-new-title {
    font-family: var(--serif);
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.meta-old-title {
    background: var(--red-bg);
    color: var(--td2);
}
.meta-new-title {
    background: var(--green-bg);
    color: var(--td2);
}
/* Match the real title sizing per level */
.meta-old-title[data-level="1"], .meta-new-title[data-level="1"] { font-size: 26px; font-weight: 300; line-height: 1.25; letter-spacing: -0.3px; }
.meta-old-title[data-level="2"], .meta-new-title[data-level="2"] { font-size: 23px; font-weight: 300; line-height: 1.3; }
.meta-old-title[data-level="3"], .meta-new-title[data-level="3"] { font-size: 20px; font-weight: 300; line-height: 1.35; }
/* Document title/abstract diff sizing */
.meta-old-title.doc-title-diff, .meta-new-title.doc-title-diff { font: 300 36px/1.2 var(--serif); letter-spacing: -0.5px; }
.meta-old-title.doc-desc-diff, .meta-new-title.doc-desc-diff { font: 400 15px/1.7 var(--serif); }

/* -- Inline word-level diff for title/abstract metadata -- */
.meta-inline-diff {
    font-family: var(--serif);
    color: var(--td1);
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.meta-inline-diff[data-level="1"] { font-size: 26px; font-weight: 300; line-height: 1.25; letter-spacing: -0.3px; }
.meta-inline-diff[data-level="2"] { font-size: 23px; font-weight: 300; line-height: 1.3; }
.meta-inline-diff[data-level="3"] { font-size: 20px; font-weight: 300; line-height: 1.35; }
.doc-inline-diff { white-space: pre-wrap; word-break: break-word; color: var(--td1); }
.doc-inline-diff.doc-title-diff { font: 300 36px/1.2 var(--serif); letter-spacing: -0.5px; }
.doc-inline-diff.doc-desc-diff { font: 400 15px/1.7 var(--serif); margin-top: 12px; }
.meta-inline-diff .diff-add,
.doc-inline-diff .diff-add {
    background: var(--green-bg);
    color: inherit;
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.meta-inline-diff .diff-del,
.doc-inline-diff .diff-del {
    background: var(--red-bg);
    color: inherit;
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}

/* -- Document pending-change overlay -- */
#doc-header-inner.doc-pending {
    border-radius: var(--radius);
}
.doc-meta-preview { min-width: 0; }
.doc-pending-title {
    font: 300 36px/1.2 var(--serif);
    letter-spacing: -0.5px;
    color: var(--td1);
    white-space: pre-wrap;
    word-break: break-word;
}
.doc-pending-desc {
    font: 400 15px/1.7 var(--serif);
    color: var(--td2);
    margin-top: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================
   CHANGE TYPE BADGES
   ============================================================ */

/* Plain colored text — per design preference: no filled pill badges. */
.change-type-badge {
    font: 600 10px var(--sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.change-type-badge.type-content_edit,
.change-type-badge.type-metadata_edit,
.change-type-badge.type-document_edit { color: var(--accent-text); }
.change-type-badge.type-create_section,
.change-type-badge.type-source_add { color: var(--diff-add-color); }
.change-type-badge.type-delete_section { color: var(--diff-del-color); }
/* Document-context — neutral dark ink for edit badges (brick-red was too
   close to the delete-red and read as the same semantic). The diff direction
   colors (red/green) are reserved for create/delete. Edits get plain text
   weight; the inline diff highlights inside the section carry the visual. */
#document-area .change-type-badge.type-content_edit,
#document-area .change-type-badge.type-metadata_edit,
#document-area .change-type-badge.type-document_edit { color: var(--td2); }
#document-area .change-type-badge.type-create_section,
#document-area .change-type-badge.type-source_add { color: var(--diff-add-body); }
#document-area .change-type-badge.type-delete_section { color: var(--diff-del-body); }

/* Neutralize badge text when it sits on a same-color wash (the wash + border
   already carry the direction signal — green text on a green-washed card
   reads as "double green"; same on red side). Badge becomes a quiet label,
   color signal lives in the surrounding card/section anatomy. */
#document-area .preview-section.preview-added .change-type-badge.type-create_section,
#document-area .preview-section.preview-removed .change-type-badge.type-delete_section,
#document-area .pending-section.pending-new .change-type-badge.type-create_section,
#document-area .deleted-section-ghost .change-type-badge.type-delete_section,
#document-area .preview-source-card.preview-added .change-type-badge.type-create_section,
#document-area .preview-source-card.preview-removed .change-type-badge.type-delete_section,
#document-area .pending-source.pending-new .change-type-badge.type-source_add {
    color: var(--td2);
}

/* ============================================================
   PENDING BAR (above chat input)
   ============================================================ */

/* No own bg/border — pending bar reads as a flush row of the chat panel,
   not a second boxy strip. The gradient pills carry the visual weight. */
#pending-bar { flex-shrink: 0; }
.pending-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    flex-wrap: nowrap;
    min-width: 0;
}
.pending-bar-count {
    font: 500 12px/1.2 var(--sans);
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pending-bar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
/* Chat panel is narrow + sparse — the canonical button size reads as bigger
   here than in the doc body (where 16px serif text + 26px titles dwarf it).
   Tighter padding compensates so the two contexts match perceptually. */
#pending-bar .btn-accept,
#pending-bar .btn-reject { padding: 5px 14px; }