/* ================================================================
   DOCUMENT EDITOR MODULE
================================================================ */
/* The editor view fills the remaining module height after the header */
#document-editor-view {
  max-height: calc(100dvh - 3.5rem);
  overflow: hidden;
}
/* Reduce module padding when editor is active to maximise writing area */
#module-documents:has(#document-editor-view:not(.hidden)) {
  padding: 0.5rem 0.75rem;
}
/* ── Topbar editor controls (shown when editor is open) ── */
.topbar-editor-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.topbar-editor-controls.hidden { display: none; }
.topbar-editor-controls .doc-hdr-select {
  font-size: 0.68rem !important;
  padding: 0.15rem 1rem 0.15rem 0.5rem !important;
  max-width: 8rem !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  line-height: 1.2 !important;
  border-radius: 9999px;
  background: var(--surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.55rem;
}
.topbar-select-label {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.topbar-editor-btn {
  padding: 0.25rem !important;
  min-height: auto !important;
  color: var(--mid) !important;
}
.topbar-editor-btn:hover { color: var(--ink) !important; background: var(--surface) !important; }
/* Reviewer-comments unread badge floating over the topbar icon. Pure
   positional overlay so it doesn't disturb the icon-only button sizing. */
.topbar-comments-btn { position: relative; }
.topbar-comments-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.25rem;
  background: var(--gold, #C9A84C);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid var(--white, #fff);
  pointer-events: none;
}
.topbar-comments-badge[hidden] { display: none; }
/* Per-row chip on the documents grid. Sits with the other badges in
   each card's footer; hidden by default until the async count fetch
   resolves. */
.docs-card-comments-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gold-deep, #9a7e36);
  background: var(--gold-bg, rgba(201, 168, 76, 0.15));
  border-radius: var(--r-sm);
  line-height: 1.1;
}
.docs-card-comments-chip[hidden] { display: none; }
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.editor-shell {
  background: #D6D4CE;
  border: none;
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.editor-toolbar {
  display: flex; align-items: center; gap: 0.15rem;
  padding: 0.2rem 0.25rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 12;
}
.editor-toolbar-2 {
  padding: 0.15rem 0.25rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  z-index: 11;
}
.tb-btn {
  background: none; border: none; cursor: pointer;
  color: var(--mid); padding: 0.15rem 0.3rem;
  border-radius: var(--r-sm); transition: all var(--t);
  font-size: 0.75rem; font-family: var(--font-sans);
  min-height: 1.4rem;
  display: inline-flex; align-items: center; gap: 0.2rem;
}
.tb-btn:hover { background: var(--border-2); color: var(--ink); }
.tb-btn.active { background: var(--gold-bg); color: var(--gold); }
/* Recalc click feedback — the icon spins for one cycle so the lawyer
   knows the layout pass actually ran (the pass itself completes in
   one frame, otherwise indistinguishable from a dead button). */
.tb-btn.is-spinning > svg {
  animation: lex-tb-spin 0.6s cubic-bezier(.4,.0,.2,1) 1;
  transform-origin: 50% 50%;
}
@keyframes lex-tb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.tb-sep { width: 1px; height: 1rem; background: var(--border); margin: 0 0.15rem; }
.tb-select {
  width: auto; font-size: 0.68rem; min-height: 1.4rem; padding: 0.1rem 1.2rem 0.1rem 0.3rem;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
  color: var(--ink); cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.3rem center;
  background-size: 0.5rem;
}
.tb-fontsize {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
  height: 1.4rem; overflow: hidden;
}
.tb-fontsize-step {
  min-height: 0; height: 100%; padding: 0 0.4rem; border-radius: 0;
  font-size: 0.85rem; font-weight: 600; line-height: 1; color: var(--mid);
}
.tb-fontsize-input {
  width: 1.85rem; text-align: center; border: none; background: transparent;
  font-size: 0.7rem; font-family: var(--font-sans); color: var(--ink);
  padding: 0; outline: none; -moz-appearance: textfield;
}
.tb-fontsize-input::-webkit-outer-spin-button,
.tb-fontsize-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-fontsize-input:focus { background: var(--gold-bg); }
.tb-word-count {
  font-size: 0.65rem; color: var(--muted); white-space: nowrap; padding: 0 0.2rem;
  user-select: none;
}
.tb-color-wrap { display: flex; align-items: center; cursor: pointer; padding: 0.1rem 0.2rem; border-radius: 3px; }
.tb-color-wrap:hover { background: var(--surface); }
/* Table styles inside editor */
#tiptap-editor .ProseMirror table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
#tiptap-editor .ProseMirror th,
#tiptap-editor .ProseMirror td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.875rem; }
#tiptap-editor .ProseMirror th { background: var(--surface); font-weight: 600; }
#tiptap-editor .ProseMirror .selectedCell { background: var(--gold-bg); }

.editor-title-input {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  border: none;
  padding: 0.25rem 0.25rem 0.15rem;
  flex-shrink: 0;
  color: var(--ink);
  background: transparent;
}
.editor-title-input:focus { outline: none; }
.editor-title-input::placeholder { color: var(--muted); }

.editor-content {
  flex: 1;
  overflow-y: auto;
  background: transparent;
  padding: 0.5rem 0.75rem 1rem;
}
.editor-content #tiptap-editor {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
}
.editor-content #tiptap-editor .ProseMirror {
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  /* Left/right padding set dynamically by _setEditorMargins() */
  padding: 1.5rem 25mm;
  min-height: 80vh;
}

/* ── Print Preview Mode ── */
/* Discrete A4 page containers with real margins. Read-only view. */
#print-preview-container {
  flex: 1;
  overflow-y: auto;
  background: #D6D4CE;
  padding: 2rem;
}
.preview-page {
  width: 210mm;
  height: 297mm;
  max-width: 100%;
  margin: 0 auto 24px;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  box-sizing: border-box;
}
/* Inherit editor typography inside any page body (editor + preview).
   The .ProseMirror typography rules elsewhere in this file ALSO match
   when these elements are in the live editor (since .lex-page-body
   sits inside .ProseMirror there). In Print Preview the .lex-page
   clones live outside .ProseMirror, so these duplicate rules give
   them identical styling without depending on the editor ancestor. */
.lex-page-body p, .preview-page p { margin-bottom: 0.75rem; }
.lex-page-body h1, .preview-page h1 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.75rem; }
.lex-page-body h2, .preview-page h2 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.5rem; }
.lex-page-body h3, .preview-page h3 { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 0.5rem; }
.lex-page-body ul, .lex-page-body ol, .preview-page ul, .preview-page ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.lex-page-body blockquote, .preview-page blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--mid); }
.lex-page-body table, .preview-page table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.lex-page-body th, .lex-page-body td, .preview-page th, .preview-page td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.preview-page-number {
  position: absolute;
  bottom: 8mm;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.6rem;
  color: #888;
  font-family: var(--font-sans);
}

/* Print styles */
@media print {
  @page { size: A4; }
}
#tiptap-editor {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  /* Base line-height matches Word/Docs default so imported documents render
     at the spacing they were authored at. Per-paragraph spacing from the
     Spacing toolbar (LineHeight extension) overrides this. */
  line-height: 1.0;
  color: var(--ink);
  outline: none;
  /* Zoom is driven by --editor-zoom (set by setEditorZoom in documents.js).
     Print preview uses the same variable so zoom carries across views. */
  zoom: var(--editor-zoom, 1);
}
#print-preview-container {
  zoom: var(--editor-zoom, 1);
}

/* ── Find & Replace ── floating panel + match highlights via PM decorations */
.find-replace-panel {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 22rem;
}
.find-replace-panel .frp-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.find-replace-panel .frp-input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  background: var(--white);
  color: var(--ink);
  outline: none;
}
.find-replace-panel .frp-input:focus {
  border-color: var(--gold);
}
.find-replace-panel .frp-counter {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
  min-width: 4.5rem;
  text-align: right;
}
.find-replace-panel .frp-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--mid);
  padding: 0.25rem 0.45rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
}
.find-replace-panel .frp-btn:hover {
  background: var(--border-2);
  color: var(--ink);
}
.find-replace-panel .frp-btn-text {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
}
/* Match highlights — view-only ProseMirror decorations */
.find-match { background: rgba(201, 168, 76, 0.25); border-radius: 2px; }
.find-current { background: rgba(201, 168, 76, 0.65); border-radius: 2px; }

/* ── Party block ── classic legal pleading party group with stretching
   curly brace and side label. Parties are normal paragraphs inside; the
   brace is an SVG background that scales vertically (preserveAspectRatio
   = none), so the brace always fits the height of the parties.  */
.party-block {
  position: relative;
  margin: 1rem 0;
  padding-right: 11rem; /* reserve space for brace + label */
}
.party-block .party-block-names p {
  margin-bottom: 0.25rem;
}
.party-block::before {
  content: '';
  position: absolute;
  right: 9.5rem; /* sits just before the label */
  top: 0;
  bottom: 0;
  width: 14px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M%202%200%20Q%208%200%208%208%20Q%208%2042%2013%2050%20Q%208%2058%208%2092%20Q%208%20100%202%20100%27%20fill%3D%27none%27%20stroke%3D%27%231a1a18%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.party-block::after {
  content: '⋯⋯⋯⋯⋯ ' attr(data-label);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: 8.5rem;
  pointer-events: none;
  /* Synced by _syncPartyBlockFonts in documents.js — reads the font-family
     of the first party span and exposes it here so the label matches.
     Falls back to inherit when no font has been explicitly set. */
  font-family: var(--party-font, inherit);
}
/* Tiptap/ProseMirror core styles */
#tiptap-editor .ProseMirror {
  min-height: 100%;
  outline: none;
}
#tiptap-editor .ProseMirror p { margin-bottom: 0.75rem; }
#tiptap-editor .ProseMirror h1 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.75rem; }
#tiptap-editor .ProseMirror h2 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.5rem; }
#tiptap-editor .ProseMirror h3 { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 0.5rem; }
#tiptap-editor .ProseMirror ul, #tiptap-editor .ProseMirror ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
#tiptap-editor ol[data-list-style="decimal"] { list-style-type: decimal; }
#tiptap-editor ol[data-list-style="lower-alpha"] { list-style-type: lower-alpha; }
#tiptap-editor ol[data-list-style="upper-alpha"] { list-style-type: upper-alpha; }
#tiptap-editor ol[data-list-style="lower-roman"] { list-style-type: lower-roman; }
#tiptap-editor ol[data-list-style="upper-roman"] { list-style-type: upper-roman; }
.preview-page ol[data-list-style="decimal"] { list-style-type: decimal; }
.preview-page ol[data-list-style="lower-alpha"] { list-style-type: lower-alpha; }
.preview-page ol[data-list-style="upper-alpha"] { list-style-type: upper-alpha; }
.preview-page ol[data-list-style="lower-roman"] { list-style-type: lower-roman; }
.preview-page ol[data-list-style="upper-roman"] { list-style-type: upper-roman; }
#tiptap-editor .ProseMirror blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--mid); }
#tiptap-editor .ProseMirror pre { background: var(--surface); padding: 0.75rem; border-radius: var(--r-sm); font-family: monospace; font-size: 0.85rem; margin: 0.5rem 0; overflow-x: auto; }
#tiptap-editor .ProseMirror hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
/* Placeholder styling */
#tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--muted);
  pointer-events: none;
  height: 0;
}
/* Suppress Tiptap's "Start writing…" when the blank-page Lex prompt is showing */
.editor-shell:has(.doc-blank-prompt:not(.hidden)) #tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: '';
}
/* Keep legacy styles for backward compat with existing saved HTML */
#tiptap-editor p { margin-bottom: 0.75rem; }
#tiptap-editor h1 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.75rem; }
#tiptap-editor h2 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.5rem; }
#tiptap-editor ul, #tiptap-editor ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
#tiptap-editor blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--mid); }

.letterhead-preview {
  background: var(--gold-bg);
  border-bottom: 2px solid var(--gold);
  padding: 1rem 1.5rem;
  flex-shrink: 0;
  display: none;
}
.letterhead-preview.visible { display: block; }
.letterhead-firm-name { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.letterhead-firm-detail { font-size: 0.75rem; color: var(--mid); }

.editor-panel {
  display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto;
  min-height: 0;
}
.editor-panel-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
}
.editor-panel-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.75rem; }

/* Sources panel in right sidebar */
.sources-panel-header {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gold); margin-bottom: 0.5rem;
}
.sources-reasoning {
  font-size: 0.78rem; color: var(--ink); line-height: 1.5;
  padding: 0.5rem 0.6rem; background: var(--surface);
  border-radius: var(--r-sm); margin-bottom: 0.6rem;
}
.sources-body {
  font-size: 0.75rem; color: var(--mid); line-height: 1.55;
  overflow-y: auto;
}
.doc-hdr-select {
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
  cursor: pointer; line-height: 1.3;
}
.sources-body ul { margin: 0; padding-left: 1.1rem; }
.sources-body li { margin-bottom: 0.3rem; display: flex; align-items: flex-start; gap: 0.3rem; }
.source-text { flex: 1; }
.sources-body strong { color: var(--ink); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sources-body a { color: var(--gold); text-decoration: underline; cursor: pointer; }
.sources-body a:hover { color: var(--ink); }
.source-actions { display: flex; gap: 0.1rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.sources-body li:hover .source-actions { opacity: 1; }
.src-action-btn { background: none; border: none; cursor: pointer; padding: 0.15rem; border-radius: 2px; color: var(--muted); }
.src-action-btn:hover { background: var(--surface); color: var(--ink); }
.src-action-btn.verified { color: #27AE60; opacity: 1; }
.src-action-btn.corrected { color: #C0392B; opacity: 1; }
.sources-section-title {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gold); margin: 0.75rem 0 0.35rem;
  padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.source-correction-form {
  padding: 0.5rem 0.6rem; background: var(--surface);
  border-radius: var(--r-sm); margin: 0.3rem 0 0.5rem 1.1rem;
  border-left: 2px solid var(--gold);
}
/* ── Slash Command Menu ── */
.slash-menu {
  position: fixed; z-index: 100;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  min-width: 16rem; max-width: 22rem; max-height: 20rem;
  overflow-y: auto; padding: 0.3rem;
}
.slash-menu-cat {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 0.5rem 0.6rem 0.2rem;
}
.slash-menu-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border-radius: var(--r-sm); cursor: pointer;
  transition: background 0.1s;
}
.slash-menu-item:hover, .slash-menu-item.active { background: var(--surface); }
.slash-menu-icon {
  width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 0.7rem; font-weight: 700; color: var(--mid); flex-shrink: 0;
}
.slash-menu-title { font-size: 0.8rem; font-weight: 500; color: var(--ink); }
.slash-menu-desc { font-size: 0.7rem; color: var(--muted); }

/* ── Bottom-docked Lex prompt (blank document) ── */
.doc-blank-prompt {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(30rem, 92%);
  pointer-events: none;
}
.doc-blank-prompt.hidden { display: none; }
.doc-blank-prompt-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  padding: 0.85rem 1rem;
  pointer-events: auto;
}
.doc-blank-prompt-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  padding: 0 0.1rem;
}
.doc-blank-prompt-icon {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.doc-blank-prompt-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}
.doc-blank-prompt-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.3rem 0.4rem;
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s;
}
.doc-blank-prompt-input-wrap:focus-within {
  border-color: var(--gold);
  background: var(--white);
}
.doc-blank-prompt-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--ink);
  min-width: 0;
}
.doc-blank-prompt-input::placeholder {
  color: var(--muted);
  opacity: 1;
  transition: opacity 0.3s;
}
.doc-blank-prompt-input.rotating::placeholder { opacity: 0; }
.doc-blank-prompt-send {
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 9999px;
  width: 1.85rem;
  height: 1.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.doc-blank-prompt-send:hover { background: var(--ink); }
.doc-blank-prompt-send:active { transform: scale(0.95); }
.doc-blank-prompt-hint {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* ── Voice mic button (Web Speech API) ── */
.voice-mic-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 1.7rem;
  height: 1.7rem;
}
.voice-mic-btn:hover { color: var(--ink); background: var(--surface); }
.voice-mic-btn.active {
  color: var(--white);
  background: #C0392B;
  animation: voice-pulse 1.3s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(192, 57, 43, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(192, 57, 43, 0);    }
}

/* ── Always-on minimized Lex pill ── */
.doc-lex-pill {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  font-size: 0.75rem;
  color: var(--mid);
  user-select: none;
}
.doc-lex-pill.hidden { display: none; }
.doc-lex-pill:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  border-color: var(--gold);
  color: var(--ink);
}
.doc-lex-pill-icon {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.doc-lex-pill.thinking .doc-lex-pill-icon {
  animation: doc-lex-spin 1.1s linear infinite;
}
.doc-lex-pill.thinking {
  border-color: var(--gold);
  color: var(--gold);
  cursor: default;
}
@keyframes doc-lex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Lex popover (opens from pill) ── */
.doc-lex-popover {
  position: absolute;
  bottom: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: min(30rem, 92%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 0.7rem 0.85rem;
}
.doc-lex-popover.hidden { display: none; }
.doc-lex-popover-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.doc-lex-popover-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
}
.doc-lex-popover-close:hover { background: var(--surface); color: var(--ink); }
.doc-lex-popover-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.3rem 0.4rem;
  background: var(--surface);
}
.doc-lex-popover-input-wrap:focus-within {
  border-color: var(--gold);
  background: var(--white);
}
.doc-lex-popover-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--ink);
  min-width: 0;
}

/* ── Inline AI Drafting ── */
.inline-ai-input {
  position: fixed; z-index: 100;
  background: var(--white); border: 1px solid var(--gold);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  min-width: 22rem; max-width: 28rem; padding: 0.6rem;
}
.inline-ai-header {
  font-size: 0.75rem; font-weight: 600; color: var(--gold);
  display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.3rem 0.4rem;
}
.inline-ai-icon { font-size: 0.9rem; }
.inline-ai-field {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0.5rem 0.6rem; font-size: 0.8rem; font-family: var(--font-sans);
  outline: none; color: var(--ink);
}
.inline-ai-field:focus { border-color: var(--gold); }
.inline-ai-actions { display: flex; gap: 0.3rem; justify-content: flex-end; margin-top: 0.4rem; }

/* ── Clause Auto-Numbering (CSS Counters) ── */
#tiptap-editor .ProseMirror { counter-reset: clause; }
.legal-clause {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
  min-height: 1.5em;
}
.legal-clause::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--ink);
  min-width: 2rem; text-align: right; padding-right: 0.5rem;
}
/* Level 1: 1. 2. 3. */
.legal-clause-1 { counter-increment: clause; counter-reset: subclause subsubclause; }
.legal-clause-1::before { content: counter(clause) "."; }
/* Level 2: 1.1 1.2 1.3 */
.legal-clause-2 { counter-increment: subclause; counter-reset: subsubclause; padding-left: 3.5rem; }
.legal-clause-2::before { content: counter(clause) "." counter(subclause); left: 1rem; }
/* Level 3: 1.1.1 1.1.2 */
.legal-clause-3 { counter-increment: subsubclause; padding-left: 4.5rem; }
.legal-clause-3::before { content: counter(clause) "." counter(subclause) "." counter(subsubclause); left: 2rem; font-size: 0.9em; }
/* Drag handle on hover */
.legal-clause:hover { background: var(--surface); border-radius: var(--r-sm); }

/* ── Case Research Results ── */
.research-result {
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.research-result:last-child { border-bottom: none; }
.research-result-title { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.research-result-meta { font-size: 0.65rem; color: var(--muted); margin: 0.15rem 0; }
.research-result-preview { font-size: 0.7rem; color: var(--mid); line-height: 1.4; margin: 0.25rem 0; }
.research-result-actions { display: flex; gap: 0.3rem; margin-top: 0.3rem; }

/* ── Version History ── */
.version-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 0.4rem; border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.75rem; color: var(--mid);
}
.version-item:hover { background: var(--surface); color: var(--ink); }

/* Cross-reference links to matter documents in generated text */
.matter-doc-ref {
  color: var(--gold); text-decoration: underline;
  text-decoration-style: dotted; cursor: pointer;
}
.matter-doc-ref:hover { color: var(--ink); text-decoration-style: solid; }

/* ── Unified Lex panel (Chat + Proofread tabs) ── */
.editor-panel-section.lex-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.editor-panel-section.lex-panel.hidden { display: none; }
.lex-panel-tabs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.35rem;
  flex-shrink: 0;
}
.lex-panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}
.lex-panel-tab:hover { color: var(--ink); background: var(--surface); }
.lex-panel-tab.active { color: var(--gold); background: var(--gold-bg); }
/* Unread badge on the Comments tab. Numeric so the lawyer knows how
   many reviewer comments arrived since last open. Hides when count == 0
   via the `hidden` attribute the JS toggles. */
.lex-panel-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  background: var(--gold, #C9A84C);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 999px;
  line-height: 1;
}
.lex-panel-tab-badge[hidden] { display: none; }
.lex-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.3rem;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
}
.lex-panel-close:hover { background: var(--surface); color: var(--ink); }
.lex-panel-pane {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lex-panel-pane.active { display: flex; }
.lex-panel-pane[data-pane="proofread"] { padding: 0.85rem 0.9rem; overflow-y: auto; }

/* Chat thread */
.lex-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.lex-chat-empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 0.5rem;
}
.lex-chat-empty-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.lex-chat-empty-sub {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}
.lex-chat-msg { display: flex; flex-direction: column; gap: 0.2rem; }
.lex-chat-msg-role {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.lex-chat-msg-user .lex-chat-msg-role { color: var(--mid); }
.lex-chat-msg-lex .lex-chat-msg-role { color: var(--gold); }
.lex-chat-msg-body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.lex-chat-msg-user .lex-chat-msg-body {
  background: var(--surface);
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--mid);
}
.lex-chat-msg-lex .lex-chat-msg-body { color: var(--ink); }
.lex-chat-msg-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.lex-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.lex-chat-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  outline: none;
  background: var(--white);
  border-radius: 9999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--ink);
}
.lex-chat-input:focus { border-color: var(--gold); }

/* Popover expand button */
.doc-lex-popover-expand {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.25rem;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.doc-lex-popover-expand:hover { background: var(--surface); color: var(--gold); }
.doc-lex-popover-header .doc-lex-popover-expand + .doc-lex-popover-close { margin-left: 0; }

/* ── Proofread Panel ── */
.proof-tones {
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem;
}
.proof-tone {
  font-size: 0.65rem; font-weight: 600; padding: 0.25rem 0.55rem;
  border: 1px solid var(--border); border-radius: 9999px;
  background: none; color: var(--mid); cursor: pointer;
  transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.03em;
}
.proof-tone:hover { border-color: var(--gold); color: var(--gold); }
.proof-tone.active { background: var(--gold); color: var(--white); border-color: var(--gold); }
.proof-item {
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: 0.5rem; overflow: hidden; transition: border-color 0.15s;
}
.proof-item:hover { border-color: var(--gold); }
.proof-item-header {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.6rem; cursor: pointer; font-size: 0.75rem;
}
.proof-item-cat {
  font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.1rem 0.35rem; border-radius: 3px;
  flex-shrink: 0;
}
.proof-cat-grammar { background: #EBF5EF; color: #2E7D52; }
.proof-cat-spelling { background: #FDF0EE; color: #C0392B; }
.proof-cat-tone { background: #FBF6E9; color: #C9A84C; }
.proof-cat-legal { background: #EDE9FE; color: #7C3AED; }
.proof-cat-clarity { background: #E0F2FE; color: #0284C7; }
.proof-cat-consistency { background: #FDF3E7; color: #B5651D; }
.proof-item-sev {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.proof-sev-high { background: #C0392B; }
.proof-sev-medium { background: #C9A84C; }
.proof-sev-low { background: #9CA3AF; }
.proof-item-text {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink);
}
.proof-item-body {
  display: none; padding: 0.5rem 0.6rem; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 0.8rem;
}
.proof-item.open .proof-item-body { display: block; }
.proof-original {
  font-size: 0.75rem; color: var(--mid); margin-bottom: 0.4rem;
  text-decoration: line-through; line-height: 1.4;
}
.proof-explanation {
  font-size: 0.7rem; color: var(--muted); margin-bottom: 0.5rem;
  font-style: italic;
}
.proof-option {
  display: flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.35rem 0.5rem; margin-bottom: 0.3rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; font-size: 0.8rem; line-height: 1.4;
  transition: all 0.15s; background: var(--white);
}
.proof-option:hover { border-color: var(--gold); background: var(--gold-bg); }
.proof-option-num {
  font-size: 0.6rem; font-weight: 700; color: var(--muted);
  min-width: 1rem; padding-top: 0.15rem;
}
.proof-item.accepted { opacity: 0.4; pointer-events: none; }
.proof-item.accepted .proof-item-header::after {
  content: '✓'; color: var(--success); font-weight: 700; margin-left: auto;
}


/* ── Versioned drafts (Phase 3.1) ─────────────────────────────── */
.doc-status-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.doc-status-banner.is-final {
  background: #F4F8F1;
  border-bottom-color: #B6CFA0;
  color: #2E5A1A;
}
.doc-status-banner.is-final .doc-status-icon { color: #2E5A1A; }
.doc-status-banner.is-reopened {
  background: var(--gold-bg);
  border-bottom-color: var(--gold-dim);
  color: var(--gold);
}
.doc-status-banner.is-reopened .doc-status-icon { color: var(--gold); }
.doc-status-banner.hidden { display: none; }
.doc-status-icon { display: flex; flex-shrink: 0; }
.doc-status-text { flex: 1; min-width: 0; line-height: 1.4; }

/* Version history rows */
.version-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.55rem;
}
.version-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.version-row-num {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin-right: 0.4rem;
}
.version-row-label {
  font-size: 0.85rem;
  color: var(--mid);
  margin-right: 0.4rem;
}
.version-row-time {
  font-size: 0.72rem;
  color: var(--muted);
}
.version-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.version-badge-shared { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-dim); }
.version-badge-final  { background: #F4F8F1; color: #2E5A1A; border: 1px solid #B6CFA0; }
.version-row-outcome {
  font-size: 0.78rem;
  color: var(--mid);
  margin-top: 0.45rem;
  line-height: 1.4;
}
.version-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

/* ── Diff view (Phase 3.3) ────────────────────────────────────── */
.diff-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.diff-version-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.diff-vbadge {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--border);
}
.diff-vbadge-from { color: var(--mid); }
.diff-vbadge-to { color: var(--ink); border-color: var(--gold-dim); background: var(--gold-bg); }
.diff-arrow { color: var(--muted); flex-shrink: 0; }

.diff-legend {
  display: flex;
  gap: 0.85rem;
  font-size: 0.7rem;
  color: var(--muted);
}
.diff-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.diff-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px; }
.diff-added-sw { background: rgba(46, 125, 82, 0.18); border: 1px solid rgba(46, 125, 82, 0.5); }
.diff-removed-sw { background: rgba(178, 59, 59, 0.15); border: 1px solid rgba(178, 59, 59, 0.5); }

.diff-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  min-height: 0;
}
.diff-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-added {
  background: rgba(46, 125, 82, 0.18);
  color: #2E5A1A;
  border-radius: 2px;
  padding: 0 1px;
  text-decoration: none;
}
.diff-removed {
  background: rgba(178, 59, 59, 0.15);
  color: #8a2a2a;
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 1px;
}
.diff-stats {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Insights panel under the diff */
.diff-insights {
  border-top: 1px solid var(--border);
  background: var(--gold-bg);
  padding: 1rem 1.25rem 1.25rem;
  max-height: 30vh;
  overflow-y: auto;
}
.diff-insights-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.diff-insights-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink);
}
.diff-insights-body ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.diff-insights-body li { margin: 0.35rem 0; }
.diff-insights-body p { margin: 0.4rem 0; }
.diff-insights-body strong { color: var(--ink); }

/* ── Editor inline AI on selection ────────────────────────────────
   Floating bubble that appears above (or below) a text selection in
   the editor. Three modes — idle (action buttons), thinking (dots),
   preview (rewrite + Replace/Discard). Positioned via fixed-then-
   converted-to-document coords so it stays anchored to the
   selection through scrolls. */
.editor-selection-bubble {
  position: absolute;
  z-index: 1000;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  font-family: var(--font-sans);
  padding: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  max-width: min(34rem, 92vw);
  animation: esb-fade-in 0.12s ease-out;
}
.editor-selection-bubble.hidden { display: none; }

@keyframes esb-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Idle mode: 4 action buttons ────────────────────────────── */
.editor-selection-bubble.idle {
  padding: 0.3rem;
}
.editor-selection-bubble .esb-action {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.65rem;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.editor-selection-bubble .esb-action:hover {
  background: var(--surface);
  color: var(--gold);
}
.editor-selection-bubble .esb-action:active { background: var(--gold-bg); }
.editor-selection-bubble .esb-action-icon {
  font-size: 0.85rem;
  opacity: 0.85;
}
.editor-selection-bubble .esb-action-label { font-size: 0.78rem; }

/* ── Thinking mode: animated dots + cancel ──────────────────── */
.editor-selection-bubble.thinking {
  padding: 0.55rem 0.75rem;
  gap: 0.3rem;
}
.editor-selection-bubble .esb-thinking-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  animation: esb-pulse 1.1s ease-in-out infinite;
}
.editor-selection-bubble .esb-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.editor-selection-bubble .esb-thinking-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes esb-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
.editor-selection-bubble .esb-thinking-text {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 500;
}
.editor-selection-bubble .esb-cancel {
  margin-left: 0.4rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  border-radius: var(--r-sm);
}
.editor-selection-bubble .esb-cancel:hover { background: var(--surface); color: var(--ink); }

/* ── Preview mode: card with rewrite + accept/discard ───────── */
.editor-selection-bubble.preview {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem 0.6rem;
  width: min(28rem, 92vw);
  max-width: min(28rem, 92vw);
}
.editor-selection-bubble .esb-preview-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.editor-selection-bubble .esb-preview-icon {
  color: var(--gold);
  font-size: 0.85rem;
}
.editor-selection-bubble .esb-preview-label {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.78rem;
}
.editor-selection-bubble .esb-preview-meta {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}
.editor-selection-bubble .esb-preview-text {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  max-height: 14rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.editor-selection-bubble .esb-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}
.editor-selection-bubble .esb-btn {
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
}
.editor-selection-bubble .esb-btn:hover { background: var(--surface); }
.editor-selection-bubble .esb-btn-accept {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.editor-selection-bubble .esb-btn-accept:hover {
  background: var(--gold-dark, var(--gold));
  filter: brightness(0.95);
}
.editor-selection-bubble .esb-btn-reject { color: var(--mid); }
.editor-selection-bubble .esb-btn-reject:hover { color: var(--ink); }

/* ============================================================
   PAGINATED EDITOR
   #tiptap-editor always carries the .editor-paginated class.
   Pages are block-level divs that stack naturally — NO flex on
   the editor parent. Each page max-widths to A4, margin:auto for
   horizontal centering inside the warm-paper canvas. Responsive:
   narrow viewports collapse to a stacked list of pages that
   shrink to fit.
============================================================ */

/* Warm-paper canvas behind the pages. The class is on
   #tiptap-editor itself, so this uses a compound selector. The
   210mm width constraint from .editor-content #tiptap-editor is
   overridden here so the canvas fills the available column. */
#tiptap-editor.editor-paginated {
  background: var(--paper-3, #efece4);
  padding: 1.5rem 0;
  width: 100%;
  max-width: 100%;
}

/* Strip the legacy single-page chrome from ProseMirror — when
   paginated, .lex-page provides the white-paper look, so the
   ProseMirror surface itself is just a transparent host. */
#tiptap-editor.editor-paginated .ProseMirror {
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* ── SHARED PAGE PRIMITIVES ─────────────────────────────────────
   Same .lex-page styling drives both the editor and Print Preview.
   This is the consultant's "single shared pagination model" — there
   is no second .preview-page class with divergent measurements.
============================================================ */
.lex-page {
  display: flex;
  flex-direction: column;
  background: var(--paper-2, #ffffff);
  width: 100%;
  max-width: 210mm;             /* A4 portrait */
  margin: 0 auto 1.5rem;
  padding: 0;                   /* header/body/footer own their padding */
  box-sizing: border-box;
  min-height: 297mm;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: relative;
}

.lex-page-header {
  flex: 0 0 auto;
  padding: 0 25.4mm;
  min-height: 12mm;              /* letterhead slot — empty by default */
  pointer-events: none;
  user-select: none;
}

.lex-page-body {
  flex: 1 1 auto;
  padding: 12mm 25.4mm;
  min-height: calc(297mm - 50.8mm);
  position: relative;
}

.lex-page-footer {
  flex: 0 0 auto;
  padding: 6mm 25.4mm 8mm;
  min-height: 12mm;
  pointer-events: none;
  user-select: none;
}

/* Page number — rendered as a CSS pseudo-element on .lex-page
   itself so attr() reads the page node's pageNumber attribute
   (CSS attr() only resolves on the element that owns it). The
   footer slot is preserved above for future running-footer content
   like firm name or matter reference. */
.lex-page[data-page-number]::after {
  content: "Page " attr(data-page-number);
  position: absolute;
  bottom: 6mm;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-5, #a8a08e);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  pointer-events: none;
}

/* When preview/export injects the page number directly into the footer
   slot (to honor the user's chosen format), suppress the CSS pseudo so
   we don't double-render. */
.lex-preview-has-footer-pagenum::after {
  content: none !important;
}

/* Page break — model-level node. The visual dashed-line marker is
   editor-only; the page-break-before rule below is what makes html2pdf
   and the browser print path respect manual breaks during export. */
.lex-page-break {
  page-break-before: always;
  break-before: page;
}

.editor-paginated .lex-page-break {
  display: block;
  margin: 1rem 0;
  text-align: center;
  position: relative;
  height: 0;
  border-top: 1px dashed var(--gold, #a8803a);
  user-select: none;
}
.editor-paginated .lex-page-break-label {
  display: inline-block;
  background: var(--paper-2, #ffffff);
  padding: 0 0.5rem;
  color: var(--ink-5, #a8a08e);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  top: -0.55rem;
}

/* ── PAGES GRID MODAL ──────────────────────────────────────────
   Thumbnail overview of every .lex-page in the doc. Click a card
   to jump the editor to that page. Inspired by Word's Navigation
   Pane and Google Docs' thumbnail panel. */
#modal-pages-grid {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: stretch;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}
#modal-pages-grid.open { display: flex; }

.pages-grid-shell {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  background: var(--paper-3, #efece4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pages-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border, #d8d3c5);
  background: var(--paper-2, #fff);
}
.pages-grid-title {
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 600;
}

.pages-grid-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  align-content: start;
}

.pages-grid-card {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.pages-grid-card:hover {
  transform: translateY(-2px);
}
.pages-grid-card:hover .pages-grid-frame {
  border-color: var(--gold, #C9A84C);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.pages-grid-card:focus-visible {
  outline: none;
}
.pages-grid-card:focus-visible .pages-grid-frame {
  border-color: var(--gold, #C9A84C);
}

/* Each frame is the visible thumbnail surface. A4 aspect ratio
   (210:297) — width fills the grid cell, height follows. The clone
   inside is scaled with transform so the whole page maps in. */
.pages-grid-frame {
  width: 100%;
  aspect-ratio: 210 / 297;
  background: #fff;
  border: 1px solid var(--border, #d8d3c5);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* The clone is rendered at full 210mm width inside the frame, then
   scaled down via transform to match the frame's actual rendered
   width. Scale factor is set from JS (openPagesGrid) using a
   ResizeObserver so it stays correct across viewport changes. */
.pages-grid-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  transform-origin: top left;
  pointer-events: none;
}

.pages-grid-label {
  font-size: 0.75rem;
  color: var(--mid, #6e6856);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

/* Responsive: tighter grid on narrow viewports */
@media (max-width: 880px) {
  .pages-grid-body {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 1rem;
    gap: 1rem;
  }
}

/* Mobile: collapse to continuous-mode visuals. */
@media (max-width: 880px) {
  #tiptap-editor.editor-paginated {
    background: transparent;
    padding: 0;
  }
  .lex-page {
    max-width: 100%;
    min-height: auto;
    box-shadow: none;
    margin-bottom: 0.5rem;
  }
  .lex-page-header { display: none; }
  .lex-page-body { padding: 1rem; min-height: auto; }
  .lex-page-footer { display: none; }
  .lex-page[data-page-number]::after { display: none; }
}

/* ── Review-comments inbox (lex-panel "Comments" tab) ─────────── */
.lex-panel-pane[data-pane="comments"] {
  padding: 0;
  overflow: hidden;
}
.rev-inbox-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rev-inbox-version {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.rev-inbox-filters {
  display: inline-flex;
  gap: 0.15rem;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 0.15rem;
}
.rev-inbox-filter {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
}
.rev-inbox-filter:hover { color: var(--ink); }
.rev-inbox-filter.active {
  color: var(--gold);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.rev-inbox-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rev-inbox-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
.rev-inbox-empty .btn { margin-top: 0.7rem; }
.rev-inbox-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.7rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rev-inbox-card:hover { border-color: var(--gold); }
.rev-inbox-card.is-resolved { opacity: 0.55; }
.rev-inbox-card.is-stale-anchor .rev-inbox-stale {
  display: block;
}
.rev-inbox-stale {
  display: none;
  font-size: 0.66rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.35rem;
}
.rev-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.rev-inbox-author {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
}
.rev-inbox-time {
  font-size: 0.66rem;
  color: var(--muted);
}
.rev-inbox-anchor {
  font-size: 0.68rem;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid var(--gold-dim, rgba(201,168,76,0.3));
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}
.rev-inbox-body {
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.rev-inbox-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}
.rev-inbox-action {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.22rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rev-inbox-action:hover { color: var(--ink); border-color: var(--mid); }
.rev-inbox-action.is-danger:hover { color: #b34141; border-color: #d99090; }

/* ── Focus mode ──────────────────────────────────────────────────────────── */
body.is-editor-focus #document-editor-view .editor-toolbar {
  display: none !important;
}
/* Give the editor a bit more breathing room when the toolbar is gone. */
body.is-editor-focus #document-editor-view #tiptap-editor {
  padding-top: 1.5rem;
}

.lex-focus-chip {
  position: fixed;
  top: 0.6rem;
  right: 0.8rem;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E8E2D0);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  font-family: var(--sans, sans-serif);
  font-size: 0.72rem;
}
.lex-focus-save-mirror {
  color: var(--muted, #8E8B7C);
  font-size: 0.7rem;
  min-width: 3.5rem;
  text-align: right;
}
.lex-focus-toggle {
  background: var(--ink, #0F0F0D);
  color: var(--white, #fff);
  border: none;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
}
.lex-focus-toggle:hover { background: var(--gold, #C9A84C); color: var(--ink, #0F0F0D); }
.lex-focus-toggle.is-focus { background: var(--gold, #C9A84C); color: var(--ink, #0F0F0D); }

/* ── Selection bubble (Tiptap-anchored) ──────────────────────────────────── */
.lex-bubble {
  position: absolute;
  z-index: 1100;
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.4rem;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E8E2D0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-family: var(--sans, sans-serif);
  font-size: 0.82rem;
}
.lex-bubble-btn {
  background: transparent;
  border: none;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink, #0F0F0D);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.lex-bubble-btn:hover { background: var(--surface, #F5F2E8); }
.lex-bubble-btn.is-active { background: var(--gold-bg, #F8F1DA); color: #5A4A0E; }
.lex-bubble-btn-lex { background: var(--ink, #0F0F0D); color: var(--white, #fff); }
.lex-bubble-btn-lex:hover { background: var(--gold, #C9A84C); color: var(--ink, #0F0F0D); }
.lex-bubble-caret { font-size: 0.7em; opacity: 0.8; }
.lex-bubble-sep {
  width: 1px;
  height: 18px;
  background: var(--border, #E8E2D0);
}

.lex-bubble-panel {
  position: absolute;
  z-index: 1110;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E8E2D0);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  font-family: var(--sans, sans-serif);
  font-size: 0.82rem;
}
.lex-bubble-lex { padding: 0.35rem; min-width: 14rem; }
.lex-bubble-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}
.lex-bubble-menu-item:hover { background: var(--surface, #F5F2E8); }
.lex-bubble-menu-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-bg, #F8F1DA);
  color: #5A4A0E;
  border-radius: 4px;
  font-size: 0.9rem;
}
.lex-bubble-menu-label { display: flex; flex-direction: column; }
.lex-bubble-menu-label strong { font-size: 0.85rem; color: var(--ink, #0F0F0D); }
.lex-bubble-menu-label span   { font-size: 0.7rem;  color: var(--mid, #5A5648); }

/* Format panel */
.lex-bubble-format {
  padding: 0.5rem 0.65rem;
  width: 18rem;
  max-height: 70vh;
  overflow-y: auto;
}
.lex-bubble-section { margin-bottom: 0.65rem; }
.lex-bubble-section:last-child { margin-bottom: 0; }
.lex-bubble-section-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #8E8B7C);
  margin-bottom: 0.35rem;
}
.lex-bubble-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.lex-bubble-row label {
  width: 4.5rem;
  font-size: 0.72rem;
  color: var(--mid, #5A5648);
  flex: 0 0 auto;
}
.lex-bubble-row select,
.lex-bubble-row input[type="number"] {
  flex: 1;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border, #E8E2D0);
  border-radius: 3px;
  background: var(--white, #fff);
  color: var(--ink, #0F0F0D);
}
.lex-bubble-row input[type="number"] { width: 3rem; flex: 0 0 auto; }
.lex-bubble-step {
  width: 22px; height: 22px;
  border: 1px solid var(--border, #E8E2D0);
  background: var(--white, #fff);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.lex-bubble-step:hover { background: var(--surface, #F5F2E8); }
.lex-bubble-unit { font-size: 0.72rem; color: var(--muted, #8E8B7C); }
.lex-bubble-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  flex: 1;
}
.lex-bubble-swatch {
  width: 18px; height: 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  padding: 0;
}
.lex-bubble-swatch-clear {
  background: var(--surface, #F5F2E8) !important;
  color: var(--mid, #5A5648);
  font-size: 0.7rem;
  line-height: 1;
}
.lex-bubble-buttons { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.lex-bubble-igbtn {
  background: var(--white, #fff);
  border: 1px solid var(--border, #E8E2D0);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--ink, #0F0F0D);
}
.lex-bubble-igbtn:hover { background: var(--surface, #F5F2E8); }
.lex-bubble-igbtn.is-active {
  background: var(--gold-bg, #F8F1DA);
  border-color: var(--gold, #C9A84C);
  color: #5A4A0E;
}

/* ── Approval state row (above the comment list) ─────────────────────────── */
.rev-inbox-approval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.45rem;
  background: var(--surface);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--mid);
}
.rev-inbox-approved-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #E6F4E6;
  color: #2E7D32;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.rev-inbox-approval-empty { color: var(--muted); font-style: italic; }

/* ── Voice comment cards + intent cards ──────────────────────────────────── */
.rev-inbox-card.is-voice {
  border-left: 3px solid var(--gold);
}
.rev-inbox-voice-pill {
  display: inline-block;
  background: var(--gold-bg, #F8F1DA);
  color: #5A4A0E;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.rev-inbox-voice-audio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0 0.2rem;
}
.rev-inbox-voice-play {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white, #fff);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rev-inbox-voice-play:hover { background: var(--gold); }
.rev-inbox-voice-dur {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--mid);
}
.rev-inbox-noisy-chip {
  background: #FFF4D6;
  color: #8A6B0E;
  font-size: 0.66rem;
  font-weight: 500;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
}
.rev-inbox-voice-statuses {
  font-size: 0.72rem;
  color: var(--mid);
  margin: 0.25rem 0 0.4rem;
}
.rev-inbox-voice-status.is-warn { color: #B23B3B; }
.rev-inbox-transcript {
  font-size: 0.78rem;
  color: var(--mid);
  margin: 0.2rem 0 0.4rem;
}
.rev-inbox-transcript summary {
  cursor: pointer;
  user-select: none;
  font-size: 0.72rem;
  color: var(--muted);
}
.rev-inbox-transcript summary:hover { color: var(--ink); }
.rev-inbox-transcript-body {
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border-radius: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.rev-inbox-intents {
  margin-top: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}
.rev-inbox-intents-head {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.rev-intent-card {
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border-radius: 4px;
  margin-bottom: 0.4rem;
}
.rev-intent-card.is-acted { opacity: 0.55; }
.rev-intent-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.rev-intent-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
}
.rev-intent-badge.is-adjustment { background: #E6F0FF; color: #1A4A8C; }
.rev-intent-badge.is-comment    { background: #EEEAE0; color: #5A5648; }
.rev-intent-badge.is-question   { background: #F0E6FF; color: #5A2A8C; }
.rev-intent-badge.is-task       { background: #E6F4E6; color: #2E7D32; }
.rev-intent-badge.is-approval   { background: #FFF4D6; color: #8A6B0E; }
.rev-intent-lowconf {
  font-size: 0.6rem;
  color: #B23B3B;
  font-weight: 500;
}
.rev-intent-play {
  margin-left: auto;
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  background: var(--white, #fff);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
}
.rev-intent-play:hover { color: var(--ink); border-color: var(--mid); }
.rev-intent-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0.15rem 0 0.4rem;
}
.rev-intent-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.rev-intent-btn {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  background: var(--white, #fff);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink);
}
.rev-intent-btn:hover { border-color: var(--mid); }
.rev-intent-btn.is-primary {
  background: var(--ink);
  color: var(--white, #fff);
  border-color: var(--ink);
}
.rev-intent-btn.is-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.rev-intent-acted {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* Editor anchor flash — mirrors review.html .is-flashing pulse.
   Scoped to the live editor; covers both data-node-id matches (rare in
   the working draft) and text-search fallback matches (any block). */
#tiptap-editor .is-flashing,
.ProseMirror .is-flashing {
  background: var(--gold-bg, rgba(201, 168, 76, 0.18));
  box-shadow: 0 0 0 4px var(--gold-bg, rgba(201, 168, 76, 0.18));
  border-radius: 4px;
  transition: background 1.4s ease, box-shadow 1.4s ease;
}