/* ══ FULL TEXT SCREEN + CONFLICT RESOLUTION STAGES ═══════════════════
 *
 * Companion to Javascript/fulltext-screen.js and
 * Javascript/conflict-resolution.js. Both stages inject a single
 * full-width panel into .proj-body (#ftsContainer / #crContainer — the
 * conflict-resolution.js container deliberately reuses the fts-container
 * class, see its own header comment) and share the exact same
 * .proj-body--screen flex-column mode as Abstract Screen (toggled in
 * _applyProjViewMode(), projects.js) — so most of the table/pill/empty-
 * state language here is a straight extension of abstract-screen.css
 * (.asv-table-card, .asv-answer-pill, .asv-empty, .asv-review, etc.),
 * not a re-implementation of it. This file only covers what's genuinely
 * new: the hide/mount plumbing, the two stages' own topbar controls, the
 * PDF-left/form-right review layout, and Conflict Resolution's expandable
 * comparison rows.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Hide/mount plumbing ──────────────────────────────────────────────
 * Both stages hide the normal list/detail panels and reuse the same
 * .fts-hidden / .fts-container class names (conflict-resolution.js
 * intentionally piggybacks on fulltext-screen.js's, rather than minting
 * its own near-identical pair). */
.proj-body .left-panel.fts-hidden,
.proj-body .right-panel.fts-hidden {
  display: none !important;
}

.fts-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Topbar controls (Search + Filter + View All Responses) ──────────
 * Rendered inline in .proj-actions (projects.html), sharing sizing with
 * the step-navigation buttons — same placement convention as Abstract
 * Screen's #asvTopbarSearchWrap/#asvFilterDropdown. Deliberately its own
 * class names rather than reusing .asv-filter-*/.asv-topbar-search-*
 * (those carry an ID+class specificity override tied to their own
 * element ids), so these are self-contained instead of depending on a
 * fragile ID match. */
.fts-reveal-btn {
  width: auto;
  gap: 6px;
  padding: 0 11px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.fts-reveal-btn i { font-size: 0.86rem; }
.fts-reveal-btn.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

.fts-filter-dropdown { position: relative; }

.fts-filter-btn {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.fts-filter-btn.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

.fts-filter-caret { font-size: 0.85rem; transition: transform 0.16s ease; }
.fts-filter-btn.open .fts-filter-caret { transform: rotate(180deg); }

.fts-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--bg-elevated); color: var(--ink-soft); font-size: 0.6rem; font-weight: 800;
  line-height: 1;
}
.fts-filter-btn.active .fts-filter-badge { background: var(--teal); color: #fff; }

.fts-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.14);
  padding: 6px;
  z-index: 40;
}
.fts-filter-menu.open { display: flex; }

.fts-filter-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 6px; border: none;
  background: none; color: var(--ink-soft); font-family: inherit;
  font-size: 0.76rem; font-weight: 600; cursor: pointer; text-align: left;
  transition: all 0.14s;
}
.fts-filter-item .bx { font-size: 0.9rem; color: var(--teal); flex-shrink: 0; }
.fts-filter-item span:not(.fts-filter-item-count) { flex: 1; }
.fts-filter-item:hover { background: var(--teal-soft); color: var(--teal); }
.fts-filter-item.active { background: var(--teal-soft); color: var(--teal); }

.fts-topbar-search-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.fts-topbar-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: 0.8rem; pointer-events: none;
}
.fts-topbar-search-input {
  height: 30px; width: 190px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid var(--border); background: none;
  padding: 0 10px 0 30px; font-family: inherit; font-size: 0.74rem; color: var(--ink);
  outline: none; transition: border-color 0.16s ease, width 0.2s ease, background 0.16s ease;
}
.fts-topbar-search-input::placeholder { color: var(--ink-muted); }
.fts-topbar-search-input:focus { border-color: var(--border-hover); width: 230px; background: var(--bg-elevated); }
.fts-topbar-search-input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,167,154,0.18); }

/* ── Assignee <select> (table's Assigned column) ──────────────────── */
.fts-assign-select {
  height: 26px; max-width: 150px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-page); color: var(--ink-soft); font-family: inherit; font-size: 0.7rem;
  font-weight: 600; padding: 0 6px; cursor: pointer; transition: border-color 0.14s;
}
.fts-assign-select:hover, .fts-assign-select:focus { border-color: var(--border-hover); outline: none; }

/* ── "View All Responses" side-by-side pills ──────────────────────────
 * Both reviewers' pills sit in one cell; a disagreement gets a soft red
 * rail rather than reflowing the whole row, so scanning a long table for
 * conflicts stays fast. */
.fts-reveal-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fts-reveal-row.fts-mismatch {
  padding: 3px 6px; margin: -3px -6px; border-radius: 8px;
  background: var(--red-soft);
}
.asv-answer-pill.fts-ai-pill { /* AI reviewer's pill is a genuine submitted answer, same as a human reviewer's — full border, no dashed treatment. */ }

/* ── Pending-review-badge on the stage dropdown row ───────────────────
 * Full Text Screen reuses .psi-screen-count (amber) directly — see
 * abstract-screen.css. Conflict Resolution's badge counts actual
 * disagreements rather than "not yet done" work, so it gets its own red
 * treatment, same shape language as .psi-screen-count. */
.psi-conflict-count {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--red-soft); color: var(--red); font-size: 0.62rem; font-weight: 800;
  border: none; cursor: pointer; font-family: inherit;
}
.psi-conflict-count:hover { background: var(--red); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   FULL TEXT SCREEN — REVIEW SUB-VIEW (PDF left, form right)
   Reuses .asv-review/.asv-review-right wholesale (abstract-screen.css)
   for the outer split and the question form; only the left pane differs
   — a trimmed PDF viewer instead of an abstract-reading pane, so it gets
   its own class rather than overloading .asv-review-left.
   ══════════════════════════════════════════════════════════════════ */
.asv-review.fts-review { }

.fts-review-left {
  flex: 1; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-card); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Thin toolbar showing the paper title + PDF attachment tabs — same
   visual language as the Summarisation split-view's PDF toolbar
   (projects-split-screen.css's .psv-pdf-toolbar), reused as a variable
   copy since this pane isn't mounted through .psv-split-mode. */
.fts-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.fts-pdf-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* ── Built-in "Device Data Matrix" question (review pane) ─────────────
 * Renders inside the same .asv-question card as every other question
 * (see _ftsDeviceMatrixHtml, fulltext-screen.js) — this only styles the
 * bits unique to it: the device picker row and the per-device data/
 * benchmark chip sections. Chip shape/weight intentionally mirrors
 * .asv-answer-btn (abstract-screen.css) so the built-in question reads
 * as just another question, not a visually distinct block. */
.fts-dm-device-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fts-dm-device-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--ink-soft); font-family: inherit;
  font-size: 0.68rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.14s;
}
.fts-dm-device-chip:hover { border-color: var(--border-hover); color: var(--ink); }
.fts-dm-device-chip.active {
  background: var(--teal-soft); color: var(--teal); border-color: rgba(13,167,154,0.3);
}
.fts-dm-device-chip:disabled { cursor: default; }
.fts-dm-device-chip:disabled:hover { border-color: var(--border); color: var(--ink-soft); }
.fts-dm-device-chip i { font-size: 0.78rem; }

.fts-dm-empty {
  padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--border-hover, rgba(43,24,23,0.2));
  background: var(--bg-page); color: var(--ink-muted); font-size: 0.7rem; font-style: italic;
}

.fts-dm-device-sections { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fts-dm-device-block {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-page); display: flex; flex-direction: column; gap: 8px;
}


.fts-dm-device-block-label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.74rem; font-weight: 700; color: var(--ink);
}

.fts-dm-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fts-dm-chip-row-label {
  flex-shrink: 0; width: 100%; font-size: 0.62rem; font-weight: 700; color: var(--ink-muted); margin-bottom: 1px;
}
.fts-dm-data-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--ink-soft); font-family: inherit;
  font-size: 0.66rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.14s;
}
.fts-dm-data-chip:hover { border-color: var(--border-hover); color: var(--ink); }
.fts-dm-data-chip.active {
  background: var(--blue-soft); color: var(--blue); border-color: rgba(37,99,235,0.3);
}
/* Benchmark chips get their own accent (purple) so the two rows stay
   visually distinct at a glance, same two-tier device/benchmark language
   used in the Form Builder's locked preview (forms.css). */
.fts-dm-data-chip--bench.active {
  background: var(--purple-soft); color: var(--purple); border-color: rgba(124,58,237,0.3);
}
.fts-dm-data-chip:disabled { cursor: default; }
.fts-dm-data-chip:disabled:hover { border-color: var(--border); color: var(--ink-soft); }
.fts-dm-data-chip i { font-size: 0.76rem; }

/* ── Device Data Matrix — TABLE cell rendering. The first column
 * (asv-col-device) lists every device tagged on a paper as ordinary
 * asv-answer-pill pills (same size as every other column's pills — no
 * bespoke smaller chip style). After that, one asv-col-device-data
 * column per distinct device in view (see _ftsComputeDeviceColumns /
 * _ftsDeviceMatrixTdsHtml in fulltext-screen.js) holds that paper's
 * ticked data/benchmark chips for that one device, left blank when the
 * paper isn't tagged with it. */

/* First column reads a full question-style label now ("What Devices are
   Associated with this Paper?"), so it needs more room than a plain
   "Device(s)" header did; each per-device data column can stay narrower
   since it only ever holds one device's chips. */
.asv-table thead th.asv-col-device { min-width: 220px; }
.asv-table thead th.asv-col-device-data { min-width: 200px; }

/* ── AI status badge — table row (retry / running), no longer its own
 * column (see _ftsRowHtml). Sits under the paper title/meta, only
 * rendered when there's actually something to show. */
.fts-ai-status-badge { margin-top: 2px; }

@media (max-width: 900px) {
  .fts-review { flex-direction: column; }
  .fts-review-left { min-height: 320px; }
  .fts-topbar-search-input, .fts-topbar-search-input:focus { width: 130px; }
}

/* ══════════════════════════════════════════════════════════════════
   CONFLICT RESOLUTION — expandable comparison rows
   One sub-view only: the table row IS the resolve surface. Expanding a
   row reveals a per-question comparison (Reviewer / AI / Final columns)
   with inline resolve controls, rather than a separate review mode.
   ══════════════════════════════════════════════════════════════════ */
.cr-list { flex: 1; overflow-y: auto; min-height: 0; }
.cr-list::-webkit-scrollbar { width: 4px; }
.cr-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cr-row-wrap { border-bottom: 1px solid var(--border-hover, rgba(43,24,23,0.13)); }
.cr-row-wrap:last-child { border-bottom: none; }

.cr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; transition: background 0.12s;
}
.cr-row:hover { background: var(--bg-page); }
.cr-row .asv-paper-cell { flex: 1; min-width: 0; }
.cr-row-caret { font-size: 1rem; color: var(--ink-muted); flex-shrink: 0; }

.cr-detail {
  padding: 4px 16px 16px 42px;
  background: var(--bg-page);
  border-top: 1px solid var(--border);
}

.cr-question-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cr-question-row:last-child { border-bottom: none; }
.cr-question-row.cr-question-conflict {
  padding-left: 10px;
  margin-left: -10px;
  border-left: 2px solid var(--red);
}

.cr-question-label { font-size: 0.76rem; font-weight: 600; color: var(--ink); line-height: 1.4; }

.cr-question-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cr-question-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cr-col-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }

.cr-resolve-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-resolve-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border-teal, rgba(13,167,154,0.35));
  background: var(--bg-surface); color: var(--teal); font-family: inherit; font-size: 0.68rem;
  font-weight: 700; cursor: pointer; transition: all 0.14s;
}
.cr-resolve-btn:hover:not(:disabled) { background: var(--teal-soft); }
.cr-resolve-btn:disabled { cursor: default; opacity: 0.45; border-color: var(--border); color: var(--ink-muted); }

.cr-resolve-clear {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border);
  background: none; color: var(--ink-muted); font-family: inherit; font-size: 0.66rem;
  font-weight: 700; cursor: pointer; transition: all 0.14s;
}
.cr-resolve-clear:hover:not(:disabled) { border-color: rgba(220,38,38,0.3); color: var(--red); background: var(--red-soft); }
.cr-resolve-clear:disabled { cursor: default; opacity: 0.45; }
.cr-resolve-clear i { font-size: 0.85rem; }

@media (max-width: 900px) {
  .cr-question-cols { grid-template-columns: 1fr; gap: 8px; }
  .cr-detail { padding-left: 20px; }
}

/* ── AI Reviewer rationale / correction notes (review pane) ────────────
 * Full Text's own take on Abstract Screen's "Suggested: X" note — reuses
 * the shared .asv-ai-note shell (background/padding/font-size, see
 * abstract-screen.css) since that's a plain bg-surface annotation card
 * already common to both stages, but owns its own head styling here so a
 * tweak to it never touches Abstract Screen's suggestion note.
 * .fts-ai-rationale  — the AI's one-sentence "why" under its own pick.
 * .fts-ai-corrected  — shown instead, once someone other than the
 *                      assigned human reviewer has edited that pick
 *                      (see _ftsCanEditAi in fulltext-screen.js); the
 *                      AI's original rationale, if any, stays visible
 *                      underneath as fainter context.
 * Both stay on the same plain bg-surface card as the shared shell —
 * text-only, no icons, no colour-coding — to keep this area minimal. */
.fts-ai-note-head {
  font-weight: 700; color: var(--ink-soft);
}
.fts-ai-note-head strong { font-weight: 800; color: var(--ink); }

.fts-ai-corrected .asv-ai-explain { color: var(--ink-muted); font-style: italic; }

/* ── "Editable" state — someone other than the assigned human reviewer
 * has opened the AI Reviewer's frozen form to correct it. Text-only
 * chip, no icon, no description — the top Submitted/Submit control (see
 * fulltext-screen.js) carries the actual state. ──────────────────────── */
.asv-assign-chip.fts-ai-editable-chip {
  background: var(--bg-surface); color: var(--ink-soft); border: 1px solid var(--border);
}