/* ============================================================
   CENTER COLUMN
   ============================================================ */

#center-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 360px;
    overflow: hidden;
    position: relative;
}

/* ---- Stats bar (under doc abstract) ---- */
#doc-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 11px var(--sans);
    color: var(--td3);
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--doc-border-subtle);
}
.stat-items { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-item { display: flex; gap: 4px; align-items: center; }
.stat-val { color: var(--td2); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Words stat is the only clickable item — toggles per-section word counts.
   Disclosure-triangle caret to the left of the value shows STATE:
   - Closed (default): caret points right
   - Open (counts visible): caret rotates 90° to point down
   No color shift; the caret + cursor:pointer are the only affordances. */
.stat-item.clickable.stat-words-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* Same chevron SVG that history-list uses (chevronRight rotated 90° on
   open) — keeps the visual language for disclosure consistent across
   the app. */
.stat-item.clickable.stat-words-toggle .words-caret {
    display: inline-flex;
    align-items: center;
    color: var(--td3);
    opacity: 0.6;
    transition: transform 0.18s var(--ease), opacity 0.15s;
    flex-shrink: 0;
}
.stat-item.clickable.stat-words-toggle.is-open .words-caret {
    transform: rotate(90deg);
    opacity: 0.9;
}
.stat-item.clickable.stat-words-toggle:hover .words-caret { opacity: 0.9; }
.stat-item.clickable.stat-words-toggle:hover { color: var(--td2); }

/* Per-section word count — small parenthesized italic caption, inline
   after the section title (inserted by JS before the 3-dot meta button).
   "(111 words)" reads as a quiet typographic aside rather than a chip. */
.section-word-count {
    font: italic 500 12px/1.4 var(--sans);
    color: var(--td3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    align-self: center;
    margin-left: 8px;
    margin-right: 4px;
}

/* ---- Document area ---- */
#document-area {
    flex: 1;
    background: radial-gradient(ellipse at 50% 40%, var(--doc-bg-light) 0%, var(--doc-bg) 70%);
    overflow: hidden;
    position: relative;
}

#document-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 40px 40px 160px;
    scroll-behavior: smooth;
}

/* ---- Document header (title + abstract) ---- */
#doc-header {
    max-width: var(--doc-max-w);
    margin: 0 auto 40px;
}
#doc-header-inner {
    padding: 8px 10px;
    margin: -8px -10px;
    border-radius: var(--radius);
}

.doc-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


/* Doc title — visual from FIELDS block; only flex layout here */
.doc-title-edit { flex: 1; min-width: 0; }

/* Abstract — visual from FIELDS block; only spacing here */
.doc-desc-edit { margin-top: 12px; }

/* ---- Document meta toggle — top-align with the title ---- */
.doc-meta-toggle-btn { margin-top: 8px; }

/* ---- Document meta panel — collapse transition from components.css ---- */
.doc-meta-panel { padding: 8px 0 0; margin: 4px 0 0; max-height: 300px; }
.doc-meta-label {
    font: 500 11px/1 var(--sans);
    color: var(--td3);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    margin-bottom: 6px;
}
.doc-author-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
/* Author input — visual from FIELDS block; only flex layout here */
.doc-author-input { flex: 1; min-width: 0; }
.doc-author-remove { font-size: 16px; }

.doc-header-divider {
    display: none;
}

#sections-container {
    max-width: var(--doc-max-w);
    margin: 0 auto;
}

/* ---- Empty state ---- */
#empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--doc-bg);
    z-index: var(--z-section);
}

.empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 560px;
    padding: 0 24px;
}

.empty-eyebrow {
    font: var(--font-eyebrow);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--doc-ochre);
    opacity: 0.85;
    margin-bottom: 14px;
}

.empty-title {
    font: var(--font-title);
    color: var(--td1);
    letter-spacing: var(--track-heading);
    margin-bottom: 24px;
}

/* Prompt-first input — the empty screen is the start of a conversation:
   typing + send creates the document and hands the prompt to the agent. */
.empty-prompt {
    width: 100%;
    background: var(--doc-bg-light);
    border: 1px solid var(--doc-border-strong);
    border-radius: var(--radius-lg);
    padding: 16px 16px 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 6px 20px -10px rgba(0,0,0,0.30);
    transition: border-color var(--dur) var(--ease);
}
.empty-prompt:focus-within { border-color: var(--doc-ochre); }

#empty-prompt-input {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    resize: none;
    color: var(--td1);
    font-family: var(--serif);
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-height: 200px;
}
#empty-prompt-input::placeholder { color: var(--td3); }

.empty-prompt-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--doc-border-subtle);
}

/* brick-red gradient send (same recipe family as .landing-btn-primary). */
.empty-send-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--btn-text);
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #c97058 0%, var(--doc-ochre) 55%, #5a2418 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 10px -2px rgba(139,58,42,0.45);
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.empty-send-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.empty-send-btn:active { transform: translateY(0); filter: brightness(0.96); }
.empty-send-btn:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }

.empty-alt {
    margin-top: 22px;
    font: var(--font-ui);
    color: var(--td3);
}
.empty-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--doc-ochre);
}
.empty-link:hover { text-decoration: underline; }