/* ============================================================
   DIFF — unified diff system
   ============================================================ */

/* -- Empty section placeholder -- */
.empty-placeholder {
    font-style: italic;
    color: var(--t3);
    opacity: 0.7;
}

/* -- Diff box (monospace code-style diff in tool results / chat) -- */
.diff-box {
    font: 12px/1.65 var(--mono);
    background: var(--doc-border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
    color: var(--td1);
}
/* When diff-box is inside the dark chrome panels, use light text */
#chat-panel .diff-box {
    font: 11px/1.55 var(--sans);
    background: var(--chrome-surface);
    color: var(--t2);
    word-break: break-word;
}
#chat-panel .diff-box .diff-add { background: rgba(74,140,92,0.22); color: var(--diff-add-color); }
#chat-panel .diff-box .diff-del {
    background: rgba(212,88,64,0.22);
    color: var(--diff-del-color);
    text-decoration: line-through;
    text-decoration-color: rgba(216,128,112,0.4);
}
/* Field label in metadata diff boxes */
.diff-field-label {
    font-weight: 600;
    color: var(--t3);
    margin-right: 2px;
}
/* Fade truncated diffs in chat change cards */
.chat-change .diff-box,
.change-step .diff-box {
    max-height: 120px;
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent);
    mask-image: linear-gradient(to bottom, black 75%, transparent);
}

/* -- Base diff tokens (tool results, chat diff boxes) -- */
.diff-add { background: var(--green-bg); color: var(--diff-add-color); border-radius: var(--radius-2xs); padding: 0 1px; }
.diff-del { background: var(--red-bg); color: var(--diff-del-color); border-radius: var(--radius-2xs); padding: 0 1px; }

/* -- Document-context diff body (pending changes + checkpoint preview) -- */
/* .diff-body is the unified class; .inline-diff-body and .preview-diff-body kept for compat */
.diff-body,
.inline-diff-body,
.preview-diff-body {
    font: 16px/1.82 var(--serif);
    color: var(--td2b);
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.diff-body .diff-add,
.inline-diff-body .diff-add,
.preview-diff-body .diff-add,
.preview-sources-diff .diff-add {
    background: var(--green-bg);
    color: var(--diff-add-body);
    text-decoration: none;
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.diff-body .diff-del,
.inline-diff-body .diff-del,
.preview-diff-body .diff-del,
.preview-sources-diff .diff-del {
    background: var(--red-bg);
    color: var(--diff-del-body);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}

/* -- Figure blocks inside inline diffs (pending changes) -- */
.inline-diff-body .figure-block.diff-fig-add,
.deleted-ghost-body .figure-block.diff-fig-add { background: var(--diff-add-block); border-radius: var(--radius); padding: 8px; }
.inline-diff-body .figure-block.diff-fig-del,
.deleted-ghost-body .figure-block.diff-fig-del { background: var(--diff-del-block); border-radius: var(--radius); padding: 8px; }
.inline-diff-body .figure-block,
.deleted-ghost-body .figure-block { margin: 8px 0; }

/* -- Marker label chips (chat cards — compact figure/table/equation labels) -- */
.diff-marker-label {
    display: inline-block;
    font: 500 10px var(--sans);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--chrome-border-subtle);
    color: var(--t3);
    vertical-align: baseline;
    letter-spacing: 0.02em;
}
.diff-add .diff-marker-label { background: var(--green-bg); color: var(--diff-add-color); }
.diff-del .diff-marker-label { background: var(--red-bg); color: var(--diff-del-color); }

/* -- Citation markers inside diffs: inherit diff color instead of ochre -- */
.diff-add .cite-marker { color: var(--diff-add-body); }
.diff-del .cite-marker { color: var(--diff-del-body); }
#chat-panel .diff-add .cite-marker { color: var(--diff-add-color); }
#chat-panel .diff-del .cite-marker { color: var(--diff-del-color); }

/* -- Title diffs: normal text color, background is enough -- */
.section-title-input .diff-add,
.section-title-input .diff-del {
    color: inherit;
}

/* -- Deleted ghost body (deleted section preview) -- */
.deleted-ghost-body {
    font: 16px/1.82 var(--serif);
    color: var(--td2b);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow: hidden;
    position: relative;
}
.deleted-ghost-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--diff-del-faint));
    pointer-events: none;
}