that renders
the parsed longtable at its source-declared column proportions. The
strip preserves all the drag-to-reorder and open-in-editor affordances
the legacy chip had, so the inline grid is strictly additive. */
.cm-clean-table-grid {
display: block;
margin: 8px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cm-clean-table-grid-strip {
display: inline-flex; align-items: center; gap: 4px;
margin-bottom: 4px;
cursor: pointer;
}
.cm-clean-table-caret {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9em; height: 1.9em; padding: 0;
margin-right: 4px;
border: none; background: transparent;
cursor: pointer;
font-size: 1.15em; line-height: 1;
color: inherit; opacity: 0.75;
border-radius: 4px;
transition: opacity 0.12s, background 0.12s;
}
.cm-clean-table-caret:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
}
/* Grid body is the absolute-positioning context for the column-edge drag
handles, so they can be placed at percent-of-body x-positions and span
the full table height. */
.cm-clean-table-grid-body {
position: relative;
}
.cm-clean-table-grid-body-collapsed { display: none; }
/* Column-edge drag handle: a 6px-wide invisible hit zone centered on the
column boundary. A 1px tinted bar in the middle shows on hover so the
user can see where the handle is. Spans the table's full height via
top: 0; bottom: 0 — the body's relative positioning gives the right
reference frame. */
.cm-clean-table-col-handle {
position: absolute;
top: 0; bottom: 0;
width: 6px;
margin-left: -3px;
cursor: col-resize;
z-index: 2;
background: transparent;
transition: background 0.12s;
}
.cm-clean-table-col-handle::before {
content: '';
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 1px;
background: transparent;
transition: background 0.12s;
}
.cm-clean-table-grid-body:hover .cm-clean-table-col-handle::before {
background: rgba(46, 92, 122, 0.20);
}
.cm-clean-table-col-handle:hover::before,
.cm-clean-table-resizing .cm-clean-table-col-handle::before {
background: rgba(46, 92, 122, 0.80);
width: 2px;
left: calc(50% - 1px);
}
/* Page-boundary widget for paginated Clean view. PageBreakWidget is an
INLINE widget rendered as a full-width flex column, so it sits inside the
paragraph's line box and splits the paragraph across the page boundary
(the leading lines render above it, the rest below). Three stacked
children, each with a fixed inline `height` set by the widget:
- paper-bottom: white, the outgoing page's bottom margin. Hosts the folio.
- gutter: canvas-gray, bleeds past page edges via the existing
--clean-landscape-extra-pct negative margins. Hosts the chip.
- paper-top: white, the incoming page's top margin.
The widget never pads to fill a page, so there is no blank-void state and
no measurement phase. Multi-page (collapsed) groups carry
`data-page-end > data-page-start` and a "Pages N–M" chip label. */
.is-clean-view .cm-clean-page-break-block {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background: #ffffff;
pointer-events: none;
user-select: none;
}
/* Mid-paragraph (inline) dividers render inline-flex so the wrapped row before
them is justified flush to the margin like every other line. A block-level
divider makes that row the "last line" of its inline segment, which
text-align: justify leaves ragged — visibly short of the right margin. As an
inline atom the divider wraps like a normal word, so the preceding line is a
normal justified wrap. vertical-align: top keeps it off the text baseline. */
.is-clean-view .cm-clean-page-break-block.is-inline {
display: inline-flex;
vertical-align: top;
}
.is-clean-view .cm-clean-page-break-paper-bottom,
.is-clean-view .cm-clean-page-break-paper-top {
position: relative;
background: transparent;
flex: 0 0 auto;
}
/* Folio: the outgoing page number, sitting in the bottom-margin band of
the page that just ended (the paper-bottom region of the widget). */
.is-clean-view .cm-clean-page-break-folio {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 11px;
font-variant-numeric: lining-nums;
color: rgba(60, 40, 20, 0.5);
letter-spacing: 0.04em;
}
/* Canvas-gray gutter bleeds past the body width using the same negative-
margin proportion the landscape block uses (--clean-landscape-extra-pct
= margin / body-width, exactly what's needed to reach the page's outer
edge). Subtle inset shadows at top and bottom give a paper-edge feel. */
.is-clean-view .cm-clean-page-break-gutter {
position: relative;
background: #e6e3dc;
flex: 0 0 auto;
margin-left: calc(-1 * var(--clean-landscape-extra-pct, 15.4%));
margin-right: calc(-1 * var(--clean-landscape-extra-pct, 15.4%));
box-shadow:
inset 0 6px 6px -6px rgba(0, 0, 0, 0.20),
inset 0 -6px 6px -6px rgba(0, 0, 0, 0.20);
}
.is-clean-view .cm-clean-page-break-chip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fdf6e3;
border: 1px solid rgba(122, 78, 46, 0.35);
border-radius: 14px;
padding: 0.32em 1.1em;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 0.78em;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(122, 78, 46, 0.85);
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Per-row drag handle: a thin horizontal hit zone at the bottom edge of each
tbody row. Invisible by default; a 1px tinted bar shows on hover so the
user knows where the handle is. Drag vertically to adjust that row's
trailing space (`\\[Xem]` in source). Sits absolutely inside the body
wrapper at `top: `. */
.cm-clean-table-row-handle {
position: absolute;
left: 0; right: 0;
height: 6px;
margin-top: 0;
cursor: ns-resize;
z-index: 2;
background: transparent;
touch-action: none;
}
.cm-clean-table-row-handle::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%;
height: 1px;
background: transparent;
transition: background 0.12s;
}
.cm-clean-table-grid-body:hover .cm-clean-table-row-handle::before {
background: rgba(46, 92, 122, 0.20);
}
.cm-clean-table-row-handle:hover::before,
.cm-clean-table-row-handle.is-dragging::before {
background: rgba(46, 92, 122, 0.80);
height: 2px;
top: calc(50% - 1px);
}
.cm-clean-table-grid-tbl {
/* fixed layout so
widths actually drive column sizes instead
of the browser auto-stretching to widest content (which makes the
Clean view rendering diverge from the PDF's body-width-based widths). */
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.85em;
line-height: 1.35;
background: #fff;
}
.cm-clean-table-grid-tbl th,
.cm-clean-table-grid-tbl td {
border: 1px solid rgba(0, 0, 0, 0.10);
/* Vertical padding scales with --table-stretch so the compactness
handle's drag is visible in real time. The horizontal padding stays
fixed — column widths are driven by colgroup, not padding. */
padding: calc(4px * var(--table-stretch, 1)) 6px;
line-height: calc(1.35 * var(--table-stretch, 1));
vertical-align: top;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.cm-clean-table-grid-tbl thead th {
font-weight: 600;
background: rgba(122, 78, 46, 0.05);
border-bottom: 2px solid rgba(122, 78, 46, 0.35);
}
.cm-clean-table-grid-tbl tbody tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.015);
}
/* Drop indicator: a thin bar shown while a chip is being dragged.
Block-chip drag uses the horizontal variant (a line spanning the editor
width above the destination line). Inline-chip drag (cite, math) uses the
vertical variant — a caret positioned at the character-precise drop
location. Positioned absolutely inside the editor's scroll container. */
.cm-clean-drop-indicator {
position: absolute;
background: rgba(46, 92, 122, 0.85);
border-radius: 2px;
pointer-events: none; z-index: 5;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cm-clean-drop-indicator-block {
left: 8px; right: 8px; height: 2px;
}
.cm-clean-drop-indicator-inline {
width: 2px;
}
/* Clean view defaults to justified text — matches LaTeX's default body
alignment so a paragraph that compiles justified in the PDF also
*renders* justified in Clean view. Per-paragraph alignment overrides
come from the line decorations added by buildCleanDecorations when the
source contains \begin{center|flushleft|flushright}. The override
selectors carry an extra class to outrank the default's specificity. */
/* CodeMirror's default highlightActiveLine extension paints the active line
with a pale-blue background. In Clean view, a paragraph is one logical
line that wraps across many visual rows, so the highlight covers the
whole paragraph and reads as "this paragraph is selected/highlighted."
Suppress it in Clean view; Source view keeps the indicator. */
#editor.is-clean-view .cm-content .cm-line.cm-activeLine,
#editor.is-clean-view .cm-content .cm-activeLine { background-color: transparent; }
#editor.is-clean-view .cm-content .cm-line { text-align: justify; }
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-centered { text-align: center; }
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-flushleft { text-align: left; }
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-flushright { text-align: right; }
/* Quote envs: 0.5 ruler-inch indent on each side. The ruler stretches the
document page (default 8.5in) across the editor width, so its "inch" is
editor-width-relative, not the CSS-screen-inch (96px). Using `0.5in` here
would yield 48px regardless of editor width, which mismatches the ruler.
--quote-indent-pct is set by renderCleanRuler() from the parsed page
geometry (0.5in / body width × 100). The 7.69% fallback matches default
8.5in × 11in with 1in margins (= 0.5/6.5 × 100). */
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-quote { padding-left: var(--quote-indent-pct, 7.69%); padding-right: var(--quote-indent-pct, 7.69%); }
/* List items: marker sits flush with the body-text left edge (Word-style),
item content begins 0.25 ruler-inch past it, wrapped lines align under
the content. CSS-em units would diverge from the ruler scale on resize;
--ruler-inch-pct keeps the indent proportional to the document's body
width regardless of editor width. The +6px padding pairs with CodeMirror's
default .cm-line padding so the marker lines up with body-paragraph text
(same offset compensation used by .cm-clean-line-quote). */
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-list-item {
padding-left: calc(6px + var(--ruler-inch-pct, 15.38%) * 0.25);
text-indent: calc(var(--ruler-inch-pct, 15.38%) * -0.25);
}
/* Word-like paragraph flow (see paragraphFlowPass). The first-line indent is
an inline-style line decoration sized to the document's \parindent, so it is
not a static rule here. This rule collapses the blank line pandoc inserts
between two paragraphs so they sit together as in Word. */
#editor.is-clean-view .cm-content .cm-line.cm-clean-line-para-gap {
height: 0;
line-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.cm-clean-list-marker {
display: inline-block;
min-width: calc(var(--ruler-inch-pct, 15.38%) * 0.25);
color: #444;
user-select: none;
font-variant-numeric: tabular-nums;
}
/* Math symbol picker popover (Overleaf-style: tabs + grid). Anchored under
the toolbar button via tb-menu-wrap's relative positioning. */
.symbol-popover {
position: absolute; top: calc(100% + 4px); left: 0;
background: var(--surface); border: 1px solid var(--border-strong);
border-radius: 5px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
z-index: 1200; padding: 8px; width: 360px;
}
.symbol-popover.hidden { display: none; }
.symbol-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
.symbol-tab {
padding: 4px 8px; font-size: 11px; cursor: pointer;
background: transparent; border: 1px solid transparent; border-radius: 3px;
color: var(--text-dim, #666);
}
.symbol-tab:hover { background: rgba(122, 59, 46, 0.08); }
.symbol-tab.active { color: var(--accent); border-color: var(--accent-mid); background: rgba(122, 59, 46, 0.06); }
.symbol-grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
max-height: 280px; overflow-y: auto;
}
.symbol-cell {
padding: 6px 4px; cursor: pointer; text-align: center;
font-size: 16px; line-height: 1.2;
background: transparent; border: 1px solid transparent; border-radius: 3px;
color: var(--text, #333); font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', serif;
user-select: none;
}
.symbol-cell:hover { background: rgba(122, 59, 46, 0.08); border-color: var(--accent-mid); }
.symbol-hint { font-size: 11px; color: var(--text-dim, #888); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border, #ddd); }
/* Inline / display math widgets (KaTeX-rendered). The KaTeX stylesheet (loaded
in index.html) provides the .katex / .katex-display classes; we just adjust
spacing so the rendered span sits naturally inline with body text. */
.cm-clean-math-inline { display: inline; }
.cm-clean-math-display { display: block; margin: 0.5em 0; text-align: center; }
.cm-clean-math-error { color: #d33; font-family: 'Menlo', monospace; font-size: 0.9em; background: rgba(211, 51, 51, 0.06); padding: 0 4px; border-radius: 3px; }
/* Clean view ruler: a Word-style horizontal rule above the editor that shows
inches (US Letter assumed unless geometry overrides) with margin shading
pulled from \usepackage[margin=...]{geometry}. Only visible in Clean view;
informational, not interactive. */
.clean-ruler {
position: relative;
height: 22px;
background: #faf7f3;
border-bottom: 1px solid #e6dccc;
user-select: none;
overflow: hidden;
flex-shrink: 0;
}
.clean-ruler.hidden { display: none; }
.clean-ruler .ruler-margin {
position: absolute;
top: 0; bottom: 0;
background: rgba(122, 59, 46, 0.10);
}
.clean-ruler .ruler-tick {
position: absolute;
bottom: 0;
width: 1px;
height: 4px;
background: rgba(60, 40, 30, 0.35);
}
.clean-ruler .ruler-tick-mid { height: 7px; }
.clean-ruler .ruler-tick-major { height: 10px; background: rgba(60, 40, 30, 0.6); }
.clean-ruler .ruler-label {
position: absolute;
top: 2px;
transform: translateX(-50%);
font-size: 9px;
color: rgba(60, 40, 30, 0.7);
line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Clean view: render the editor in the user's chosen LaTeX font / size /
line spacing. Source view inherits the monospace baseline from #editor.
We target .cm-line as well as .cm-content because CodeMirror 6's base
theme can set line-height on .cm-line directly, which would otherwise
mask our --clean-line-height variable. */
#editor.is-clean-view .cm-scroller,
#editor.is-clean-view .cm-content,
#editor.is-clean-view .cm-content .cm-line {
font-family: var(--clean-font-family, Georgia, serif);
/* Zoom multiplier composes with the Format-menu base size so Clean view
responds to View → Zoom (the source/PDF-tab base rule already does). */
font-size: calc(var(--clean-font-size, 15px) * var(--editor-zoom, 1));
line-height: var(--clean-line-height, 1.5);
}
/* Clean view: drop the source-line gutter (line numbers + fold arrows). They
map to LaTeX source lines, not the visible reading lines, so they confuse
more than they help in a Word-like view. */
#editor.is-clean-view .cm-gutters { display: none !important; }
/* Clean view: shrink the content area to the ruler's unshaded zone so the
text physically sits between the margins shown by #clean-ruler. The
percentage is set by renderCleanRuler() from \usepackage[margin=...]{geometry}. */
#editor.is-clean-view .cm-content {
padding-left: var(--clean-margin-pct, 12%);
padding-right: var(--clean-margin-pct, 12%);
}
/* ---------- Paper-frame (Word-style) ---------- */
/* Decorative page chrome only — Clean view still flows continuously through
a single CodeMirror instance, but the cm-content now looks like a stacked
sheet of paper sitting on a gray canvas. The page-break widget (already
inserted at SyncTeX / heuristic break positions by clean-view.js) provides
the visual gap between "pages". This is theatre: content does not
physically fit a page sheet, so a paragraph long enough to overflow a
real page will just keep flowing past where the PDF would break. The PDF
tab remains the authoritative print-layout view. */
/* Gray canvas around the page sheet. With the per-page sheet overlay
painting individual white rectangles, the editor pane shows through as
the canvas BETWEEN sheets (the gutter zone). Editor and scroller bg
remain transparent so the pane's color is the single source of truth. */
#editor-view .editor-pane:has(#editor.is-clean-view) {
background: #e6e3dc;
}
#editor.is-clean-view {
background: #e6e3dc;
}
#editor.is-clean-view .cm-scroller {
background: transparent;
}
/* Constrain the ruler to the page width so it sits directly above the
paper sheet rather than spanning the entire pane. `width: 100%` is needed
alongside `margin: 0 auto` because in a flex column container, auto
cross-axis margins override the default `align-items: stretch`; without an
explicit width the ruler collapses to its intrinsic width of zero (its
children are absolutely positioned and contribute no width). */
#editor-view .editor-pane:has(#editor.is-clean-view) .clean-ruler {
max-width: var(--clean-page-width-px, 100%);
width: 100%;
margin: 0 auto;
}
/* The CM6 content. In path D1 the sheet overlay (below) paints the actual
white sheets per PDF page; cm-content's own background is transparent so
it doesn't double-paint over the sheet rectangles. max-width widens to
--clean-canvas-width-px when any page in the doc is landscape, so the
editor pane reserves room for the wider landscape sheet. */
/* The white paper. A single continuous cm-content element with an opaque
white background — paper is ALWAYS visible with zero JS dependency.
Centred via margin:0 auto inside the gray #editor canvas so the canvas
shows on the left/right; the page-break widgets interrupt the white
with gray gutter bands to separate pages. max-width widens to
--clean-canvas-width-px when the doc has landscape pages. */
#editor.is-clean-view .cm-content {
max-width: var(--clean-canvas-width-px, var(--clean-page-width-px, 100%));
margin: 0 auto;
background: #ffffff;
padding-top: var(--clean-page-pad-vert, 1in);
padding-bottom: var(--clean-page-pad-vert, 1in);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.08),
0 12px 28px rgba(0, 0, 0, 0.10);
}
/* Vertical ruler: pinned to the left edge of #editor (parent of CM6's
.cm-editor). Stays fixed in viewport space; the painter writes tick /
label / margin div positions in viewport coordinates derived from the
scrollTop of the current sheet. */
#editor {
position: relative;
}
#editor > .clean-vruler {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 22px;
background: #f3ecd9;
border-right: 1px solid rgba(60, 40, 30, 0.18);
z-index: 6;
pointer-events: none;
overflow: hidden;
}
#editor:not(.is-clean-view) > .clean-vruler {
display: none;
}
.clean-vruler-track {
position: relative;
width: 100%;
height: 100%;
}
/* Top/bottom page-margin shading — the vertical analog of the horizontal
ruler's .ruler-margin, same tint so borders read identically on both axes. */
.clean-vruler .vruler-margin {
position: absolute;
left: 0;
right: 0;
background: rgba(122, 59, 46, 0.10);
}
.clean-vruler .vruler-tick {
position: absolute;
right: 0;
width: 4px;
height: 1px;
background: rgba(60, 40, 30, 0.35);
}
.clean-vruler .vruler-tick.ruler-tick-mid {
width: 7px;
}
.clean-vruler .vruler-tick.ruler-tick-major {
width: 10px;
background: rgba(60, 40, 30, 0.6);
}
.clean-vruler .vruler-label {
position: absolute;
right: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 9px;
color: rgba(60, 40, 20, 0.55);
transform: translateY(-50%);
}
/* CM6 draws the selection rectangles inside .cm-selectionLayer at z-index -2
(set INLINE on the element by CM6's runtime), intended for a transparent
.cm-content. Our paper sheet paints opaque white over that layer, hiding
the highlight. Override the inline z-index with !important so the layer
sits ABOVE cm-content, and tint the rectangles with a translucent blue so
the user sees a Word-style highlight while the underlying text remains
readable through the overlay. CRUCIAL: also set pointer-events: none — CM6
only sets it on .cm-cursorLayer because the selection layer normally sits
at z:-2 (below everything) and never catches mouse events; once we lift it
above cm-content, the overlay otherwise intercepts mousedown on highlighted
text, blocking the drag-from-selection gesture entirely. */
#editor.is-clean-view .cm-selectionLayer {
z-index: 1 !important;
pointer-events: none;
}
#editor.is-clean-view .cm-selectionBackground,
#editor.is-clean-view .cm-content ::selection {
background-color: rgba(80, 130, 220, 0.28);
}
/* Landscape page markers — block widgets at each `\begin{landscape}…\end{
landscape}` boundary. Reverted from the per-line band styling (R2 trial
2026-05-19) because CM6's class-merge for `Decoration.line` silently
drops landscape classes under common conditions (cursor-on-line via
highlightActiveLine, post-edit re-renders, prelude-hide co-location),
making the band visually vanish for individual landscapes. Block
widgets render reliably independent of cm-line decoration. */
#editor.is-clean-view .cm-content .cm-clean-landscape-start-marker,
#editor.is-clean-view .cm-content .cm-clean-landscape-end-marker {
margin-left: calc(-1 * var(--clean-landscape-extra-pct, 15.4%));
margin-right: calc(-1 * var(--clean-landscape-extra-pct, 15.4%));
padding: 4px 0.6em;
background: rgba(122, 59, 46, 0.05);
font-family: system-ui, sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(122, 59, 46, 0.85);
}
#editor.is-clean-view .cm-content .cm-clean-landscape-start-marker {
border-top: 1px dashed rgba(122, 59, 46, 0.35);
margin-top: 10px;
}
#editor.is-clean-view .cm-content .cm-clean-landscape-end-marker {
border-bottom: 1px dashed rgba(122, 59, 46, 0.35);
margin-bottom: 10px;
}
#editor.is-clean-view .cm-content .cm-clean-landscape-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.9);
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
}
/* Pandoc `\noindent ` hide — implemented as a mark (not a replace) so it
doesn't co-locate with line decorations at line.from and silently drop
them. Hide via font-size + line-height collapse; keeps the element in
layout for CM6 caret measurement without contributing visible space. */
#editor.is-clean-view .cm-content .cm-clean-noindent-hide {
font-size: 0;
line-height: 0;
display: inline-block;
width: 0;
}
/* ---------- Fold placeholder (longtable etc.) ---------- */
.cm-foldPlaceholder {
background: rgba(122, 59, 46, 0.08);
border: 1px solid rgba(122, 59, 46, 0.25);
color: rgba(122, 59, 46, 0.85);
padding: 1px 8px;
border-radius: 3px;
font-size: 0.9em;
cursor: pointer;
}
/* Fold gutter arrows: make them visible and obviously clickable. */
.cm-foldGutter {
min-width: 14px;
}
.cm-foldGutter .cm-gutterElement {
cursor: pointer;
color: rgba(122, 59, 46, 0.55);
font-size: 1.05em;
padding: 0 3px;
user-select: none;
}
.cm-foldGutter .cm-gutterElement:hover {
color: rgba(122, 59, 46, 1);
}
/* Inline "collapse" chip rendered after \begin{figure}/\begin{longtable} */
.cm-collapse-chip {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 0.8em;
font-weight: 500;
background: rgba(122, 59, 46, 0.12);
border: 1px solid rgba(122, 59, 46, 0.35);
border-radius: 3px;
color: rgba(122, 59, 46, 0.9);
cursor: pointer;
user-select: none;
vertical-align: middle;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cm-collapse-chip:hover {
background: rgba(122, 59, 46, 0.28);
border-color: rgba(122, 59, 46, 0.6);
color: rgba(122, 59, 46, 1);
}
/* ---------- Inline comments ---------- */
.cm-comment-anchor {
background-color: rgba(255, 200, 100, 0.18);
border-bottom: 1.5px dotted rgba(200, 130, 50, 0.7);
cursor: pointer;
}
.cm-comment-anchor:hover {
background-color: rgba(255, 200, 100, 0.32);
}
.cm-comment-context-menu {
position: fixed;
background: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
padding: 4px 0;
min-width: 150px;
z-index: 9999;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cm-comment-context-menu .menu-item {
padding: 6px 14px;
cursor: pointer;
user-select: none;
}
.cm-comment-context-menu .menu-item:hover {
background: rgba(122, 59, 46, 0.10);
}
.cm-comment-context-menu .menu-subhead {
padding: 4px 14px 2px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-dim);
user-select: none;
}
.cm-comment-context-menu .menu-synonym-status {
padding: 4px 14px 6px;
font-size: 12px;
color: var(--text-dim);
font-style: italic;
user-select: none;
}
.cm-comment-context-menu .menu-synonym { text-transform: capitalize; }
:where(.cm-comment-tooltip, .cm-proposal-tooltip) {
background: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
padding: 8px 12px;
max-width: 360px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cm-comment-tooltip .cm-comment-author {
font-size: 11px;
color: var(--text-dim, #888);
margin-bottom: 4px;
}
.cm-comment-tooltip .cm-comment-body {
color: var(--text, #2a2a2a);
margin-bottom: 8px;
white-space: pre-wrap;
line-height: 1.4;
}
.cm-comment-tooltip .cm-comment-actions {
display: flex;
gap: 6px;
}
.cm-comment-tooltip .cm-comment-edit,
.cm-comment-tooltip .cm-comment-delete {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 3px 10px;
cursor: pointer;
font-size: 11px;
color: var(--text, #2a2a2a);
}
.cm-comment-tooltip .cm-comment-edit:hover,
.cm-comment-tooltip .cm-comment-delete:hover {
background: rgba(122, 59, 46, 0.10);
border-color: rgba(122, 59, 46, 0.4);
}
/* ---------- Grammar findings (P1-6) ---------- */
/* The squiggle uses an inline SVG so it stays crisp at any zoom level and
doesn't depend on font metrics. `text-decoration: wavy` is the simpler
alternative but renders inconsistently across CodeMirror's line height. */
.cm-grammar-finding {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-position: bottom 0 left 0;
padding-bottom: 1px;
cursor: pointer;
}
.cm-grammar-tooltip {
background: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
padding: 10px 12px;
max-width: 380px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cm-grammar-reason {
font-size: 12px;
color: var(--text-dim, #888);
margin-bottom: 8px;
line-height: 1.4;
}
.cm-grammar-compare {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-family: var(--ui-font);
font-size: 13px;
line-height: 1.4;
}
.cm-grammar-original {
color: #b33;
text-decoration: line-through;
text-decoration-color: rgba(180, 50, 50, 0.5);
}
.cm-grammar-suggestion {
color: #2d7a2d;
font-weight: 500;
}
.cm-grammar-actions {
display: flex;
gap: 6px;
}
.cm-grammar-accept,
.cm-grammar-dismiss {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 4px 12px;
cursor: pointer;
font-size: 12px;
font-family: inherit;
color: var(--text, #2a2a2a);
}
.cm-grammar-accept {
background: rgba(45, 122, 45, 0.10);
border-color: rgba(45, 122, 45, 0.45);
color: #1f5a1f;
}
.cm-grammar-accept:hover { background: rgba(45, 122, 45, 0.20); }
.cm-grammar-dismiss:hover { background: rgba(0, 0, 0, 0.08); }
/* ---------- Suggesting mode (track-changes layer) ---------- */
.cm-proposal-insert {
color: var(--proposal-color, #7a3b2e);
background: color-mix(in srgb, var(--proposal-color, #7a3b2e) 22%, transparent);
border-bottom: 2px solid var(--proposal-color, #7a3b2e);
text-decoration: none;
cursor: pointer;
padding: 0 1px;
font-weight: 500;
}
.cm-proposal-insert:hover {
background: color-mix(in srgb, var(--proposal-color, #7a3b2e) 34%, transparent);
}
.cm-proposal-strike {
color: var(--proposal-color, #7a3b2e);
text-decoration: line-through;
text-decoration-color: var(--proposal-color, #7a3b2e);
text-decoration-thickness: 2px;
background: color-mix(in srgb, var(--proposal-color, #7a3b2e) 14%, transparent);
cursor: pointer;
}
.cm-proposal-strike:hover {
background: color-mix(in srgb, var(--proposal-color, #7a3b2e) 26%, transparent);
}
/* When a strike is nested inside an insert-range (same author typed it then
deleted it), CM6 produces nested spans rather than merging classes. Style
the inner strike so the strikethrough still wins visually and the meaning
reads as "inserted then retracted" rather than two unrelated annotations. */
.cm-proposal-insert .cm-proposal-strike {
text-decoration: line-through;
text-decoration-color: var(--proposal-color, #7a3b2e);
text-decoration-thickness: 2px;
background: color-mix(in srgb, var(--proposal-color, #7a3b2e) 28%, transparent);
}
.cm-proposal-tooltip {
/* Inherits chrome from the .cm-comment-tooltip rule via :where() above. */
border-left: 3px solid var(--proposal-color, #7a3b2e);
}
.cm-proposal-tooltip .cm-proposal-meta {
font-size: 11px;
color: var(--text-dim, #888);
margin-bottom: 8px;
}
.cm-proposal-tooltip .cm-proposal-actions {
display: flex;
gap: 6px;
}
.cm-proposal-tooltip button {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 3px 10px;
cursor: pointer;
font-size: 11px;
color: var(--text, #2a2a2a);
}
.cm-proposal-tooltip .cm-proposal-accept:hover {
background: rgba(46, 122, 70, 0.12);
border-color: rgba(46, 122, 70, 0.4);
color: rgb(36, 90, 56);
}
.cm-proposal-tooltip .cm-proposal-reject:hover,
.cm-proposal-tooltip .cm-proposal-withdraw:hover {
background: rgba(180, 60, 60, 0.10);
border-color: rgba(180, 60, 60, 0.4);
color: rgb(135, 40, 40);
}
/* ---------- Auth + user menu + settings/share modals ---------- */
.header-action-btn {
margin-left: 8px; padding: 4px 12px; font-size: 13px; cursor: pointer;
background: transparent; color: white;
border: 1px solid rgba(255,255,255,0.4); border-radius: 4px;
}
.header-action-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.75); color: white; }
.header-action-btn.hidden { display: none; }
/* Wider modal for the references panel which needs space for results. */
.modal-wide { max-width: 720px; width: 90vw; }
.modal-header-actions { display: flex; align-items: center; gap: 6px; }
/* Inline help inside settings sections — click to expand */
.settings-help { margin-top: 8px; }
.settings-help summary {
cursor: pointer; color: var(--accent, #7a3b2e); font-size: 12px;
padding: 2px 0; user-select: none;
}
.settings-help summary:hover { text-decoration: underline; }
.settings-help ol {
margin: 6px 0 0 18px; padding: 8px 12px 4px 12px;
background: rgba(122, 59, 46, 0.05); border-left: 2px solid var(--accent-mid, rgba(122, 59, 46, 0.3));
border-radius: 0 4px 4px 0; font-size: 12px; line-height: 1.5;
}
.settings-help ol li { margin-bottom: 4px; }
.settings-help a { color: var(--accent, #7a3b2e); }
.user-menu { position: relative; margin-left: 12px; }
.user-menu.hidden { display: none; }
.user-menu-btn {
background: transparent; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px;
padding: 4px 10px; cursor: pointer; font-size: 13px; color: white;
display: inline-flex; align-items: center; gap: 6px;
}
.user-menu-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.75); }
.user-menu-color-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.5); background: var(--user-color, #7a3b2e);
}
.user-menu-dropdown {
position: absolute; right: 0; top: 100%; margin-top: 4px;
background: white; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px;
box-shadow: 0 4px 14px rgba(0,0,0,0.15); min-width: 220px; z-index: 1000;
}
.user-menu-dropdown.hidden { display: none; }
.user-menu-account { padding: 10px 14px 8px; }
.user-menu-account-email { font-size: 13px; font-weight: 600; color: #333; word-break: break-all; }
.user-menu-account-role { font-size: 11px; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.user-menu-dropdown .menu-item {
display: block; width: 100%; text-align: left; background: transparent; border: none;
padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.user-menu-dropdown .menu-item:hover { background: rgba(122, 59, 46, 0.08); }
.signin-container {
max-width: 420px; margin: 80px auto; padding: 24px; text-align: left;
background: white; border: 1px solid var(--border-strong, #ddd); border-radius: 6px;
}
.signin-container h2 { margin-top: 0; }
.signin-hint { font-size: 13px; color: var(--text-dim, #888); }
#signin-form { display: flex; gap: 8px; margin-top: 12px; }
#signin-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--border-strong, #ddd); border-radius: 4px; }
#signin-form button { padding: 8px 14px; background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 4px; cursor: pointer; }
.signin-result { margin-top: 12px; font-size: 13px; }
.share-btn {
margin-left: 8px; padding: 4px 12px; font-size: 12px; cursor: pointer;
background: transparent; color: var(--accent, #7a3b2e);
border: 1px solid var(--accent-mid, rgba(122, 59, 46, 0.4)); border-radius: 4px;
}
.share-btn:hover { background: rgba(122, 59, 46, 0.08); }
/* Modal scaffolding (settings, share) */
.settings-section { margin-bottom: 14px; }
.settings-section label { display: block; font-size: 12px; color: var(--text-dim, #888); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.settings-section input[type=text],
.settings-section input[type=password],
.settings-section input[type=color] {
width: 100%; padding: 6px 10px; border: 1px solid var(--border-strong, #ddd); border-radius: 4px; font-family: inherit; font-size: 13px;
}
.settings-section input[type=color] { padding: 2px; height: 36px; cursor: pointer; }
.settings-row { display: flex; gap: 8px; align-items: center; }
.settings-row input { flex: 1; }
.settings-state { font-size: 11px; color: var(--text-dim, #888); }
.settings-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.settings-actions button { padding: 6px 16px; background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 4px; cursor: pointer; }
.settings-saved-msg { color: #2a7a2a; font-size: 12px; }
/* Settings service list + per-service detail popup */
.service-list { list-style: none; padding: 0; margin: 0; }
.service-list li { margin: 0 0 6px; }
.service-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left; padding: 10px 12px;
background: var(--surface, #fff); border: 1px solid var(--border, #e0ddd6);
border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text);
}
.service-row:hover { border-color: var(--accent-mid, #c47a68); background: var(--accent-light, #f2e4e0); }
.service-row-name { font-weight: 500; }
.service-row-state { font-size: 11px; color: var(--text-dim, #888); white-space: nowrap; }
.service-row-state.is-ok { color: #2a7a2a; }
.service-instructions { margin-top: 12px; }
.service-instructions ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-dim, #555); line-height: 1.5; }
.service-instructions ol li { margin-bottom: 5px; }
.service-instructions a { color: var(--accent, #7a3b2e); }
/* Share modal */
.share-section { margin-bottom: 16px; }
.share-section label { display: block; font-size: 12px; color: var(--text-dim, #888); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.share-owner-line { font-size: 13px; color: var(--text-dim, #888); margin-bottom: 8px; }
.share-list { list-style: none; padding: 0; margin: 0; }
.share-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.share-email { color: var(--text-dim, #888); font-size: 12px; flex: 1; }
.share-remove { background: transparent; border: 1px solid var(--border-strong, #ddd); border-radius: 3px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.share-remove:hover { background: rgba(122, 59, 46, 0.08); border-color: var(--accent, #7a3b2e); color: var(--accent, #7a3b2e); }
.share-empty { color: var(--text-dim, #888); font-size: 13px; }
.share-invite-row { display: flex; gap: 8px; }
.share-invite-row input { flex: 1; padding: 6px 10px; border: 1px solid var(--border-strong, #ddd); border-radius: 4px; }
.share-invite-row button { padding: 6px 14px; background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 4px; cursor: pointer; }
.share-invite-msg { font-size: 12px; margin-top: 6px; color: var(--text-dim, #888); }
.share-invite-link { display: flex; gap: 6px; align-items: center; margin-top: 6px; padding: 6px 8px; background: rgba(122, 59, 46, 0.06); border: 1px solid rgba(122, 59, 46, 0.25); border-radius: 4px; }
.share-invite-link a { flex: 1; font-family: monospace; font-size: 11px; word-break: break-all; color: var(--accent, #7a3b2e); }
.share-copy-btn { padding: 2px 10px; background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; }
.share-copy-btn:hover { background: var(--accent-dark, #5a2a1e); }
.share-link-btn { background: transparent; border: 1px solid var(--accent-mid, rgba(122, 59, 46, 0.4)); color: var(--accent, #7a3b2e); border-radius: 3px; padding: 2px 8px; font-size: 11px; cursor: pointer; margin-right: 4px; }
.share-link-btn:hover { background: rgba(122, 59, 46, 0.08); }
.share-link-popover { width: 100%; margin-top: 6px; padding: 6px 8px; background: rgba(122, 59, 46, 0.05); border: 1px solid rgba(122, 59, 46, 0.2); border-radius: 4px; font-size: 12px; }
/* Chat tabs (Claude / Team) */
/* Horizontal scroll when the pane is too narrow to show every tab.
Native scrollbars are unreliable here — macOS Chromium uses overlay
bars that disappear at rest and ignore most ::-webkit-scrollbar
styling. We hide them entirely and provide explicit chevron buttons
(rendered by JS when scrollWidth > clientWidth). min-width: 0 on the
parent pane (below) lets the chat pane actually shrink to its
flex-allocated width instead of expanding to fit the tabs. */
.chat-tabs-wrap {
position: relative; display: flex; align-items: stretch;
padding: 6px 10px 0; min-width: 0;
}
.chat-tabs {
display: flex; gap: 2px; flex: 1 1 auto;
flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
}
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs-chevron {
flex: 0 0 auto; align-self: center;
background: var(--surface2); border: 1px solid var(--border-strong);
border-radius: 4px; color: var(--accent, #7a3b2e);
cursor: pointer; padding: 2px 6px; margin: 0 2px;
font-size: 14px; line-height: 1; user-select: none;
}
.chat-tabs-chevron:hover { background: var(--surface); }
.chat-tabs-chevron[disabled] { opacity: 0.35; cursor: default; }
.chat-tab {
padding: 4px 12px; font-size: 12px; cursor: pointer; flex: 0 0 auto;
white-space: nowrap;
background: transparent; border: 1px solid var(--border-strong, #ddd);
border-bottom: none; border-radius: 4px 4px 0 0; color: var(--text-dim, #888);
}
.chat-tab.active {
background: white; color: var(--accent, #7a3b2e);
border-color: var(--accent-mid, rgba(122, 59, 46, 0.4));
}
.chat-tab-dynamic { display: inline-flex; align-items: center; gap: 6px; }
.chat-tab-close {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 3px; font-size: 13px; line-height: 1;
color: var(--text-dim, #888);
}
.chat-tab-close:hover { background: rgba(122, 59, 46, 0.12); color: var(--accent, #7a3b2e); }
/* "More AIs" launcher */
.more-chooser { padding: 18px; }
.more-chooser-hint { font-size: 13px; color: var(--text-dim, #888); margin: 0 0 12px; }
.more-chooser-btns { display: flex; flex-direction: column; gap: 8px; }
.more-chooser-btn {
text-align: left; padding: 10px 12px; font-size: 14px; cursor: pointer;
background: var(--surface, #fff); border: 1px solid var(--border, #e0ddd6);
border-radius: 6px; color: var(--text);
}
.more-chooser-btn:hover { border-color: var(--accent-mid, #c47a68); background: var(--accent-light, #f2e4e0); }
/* Comments side panel */
.comments-empty { padding: 16px; color: var(--text-dim, #888); font-size: 13px; text-align: center; }
.comment-card {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
padding: 10px 12px;
margin: 8px 10px;
background: #fff;
}
.comment-card-jumpable { cursor: pointer; transition: background 120ms; }
.comment-card-jumpable:hover { background: rgba(122, 59, 46, 0.04); }
/* "More AIs" tab — BoodleBox iframe panel. The bar at the top carries the
open-in-new-tab fallback for visitors whose browser (or BoodleBox's
X-Frame-Options) blocks the embed. */
.more-iframe-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.more-iframe-wrap.hidden { display: none; }
.more-iframe-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px; border-bottom: 1px solid var(--border);
font-size: 12px; color: var(--text-dim); background: var(--surface2);
}
.more-iframe-bar a { color: var(--accent, #7a3b2e); text-decoration: none; }
.more-iframe-bar a:hover { text-decoration: underline; }
#more-iframe { flex: 1; width: 100%; border: 0; min-height: 0; }
/* Version history modal. Each row carries the timestamp + author + a
small badge for the trigger (auto / compile / export / manual). */
.version-history-card { min-width: 560px; max-width: 800px; width: 80vw; max-height: 80vh; }
.version-history-actions { display: flex; align-items: center; gap: 8px; }
.version-list { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.version-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.version-row:hover { background: rgba(0,0,0,0.02); }
.version-meta { flex: 1; min-width: 0; }
.version-meta-line { font-size: 13px; color: var(--text); }
.version-meta-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.version-badge {
display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
padding: 1px 6px; border-radius: 3px; margin-right: 6px; letter-spacing: 0.4px;
}
.version-badge-manual { background: rgba(122, 59, 46, 0.15); color: #7a3b2e; }
.version-badge-compile { background: rgba(46, 92, 122, 0.15); color: #2e5c7a; }
.version-badge-export { background: rgba(46, 122, 70, 0.15); color: #2e7a46; }
.version-badge-auto { background: rgba(0,0,0,0.06); color: var(--text-dim); }
.version-actions { display: flex; gap: 6px; }
.version-actions button { font-size: 12px; padding: 4px 10px; cursor: pointer; }
.version-empty { padding: 24px 12px; color: var(--text-dim); text-align: center; font-size: 13px; }
.version-preview-card { min-width: 640px; max-width: 1000px; width: 90vw; max-height: 86vh; }
.version-preview-actions { display: flex; align-items: center; gap: 8px; }
.version-preview-body {
background: var(--code-bg, #fafafa); border: 1px solid var(--border);
border-radius: 4px; padding: 12px; font-family: 'Menlo', monospace;
font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
max-height: 60vh; overflow: auto; margin: 0;
}
.comment-head { font-size: 11px; margin-bottom: 4px; }
.comment-author { font-weight: 600; }
.comment-time { color: var(--text-dim, #888); margin-left: 6px; }
.comment-snippet {
font-size: 12px;
font-style: italic;
color: var(--text-dim, #555);
background: rgba(0, 0, 0, 0.03);
border-left: 3px solid rgba(122, 59, 46, 0.35);
padding: 4px 8px;
margin: 4px 0 6px;
cursor: pointer;
border-radius: 0 3px 3px 0;
}
.comment-snippet:hover { background: rgba(122, 59, 46, 0.08); }
.comment-snippet-lost { color: #a33; font-style: normal; cursor: default; border-left-color: #a33; }
.comment-snippet-lost:hover { background: rgba(0, 0, 0, 0.03); }
.comment-body { font-size: 13px; white-space: pre-wrap; }
.comment-actions { display: flex; gap: 6px; margin-top: 6px; }
.comment-action {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 2px 8px;
cursor: pointer;
font-size: 11px;
color: var(--text, #2a2a2a);
}
.comment-action:hover { background: rgba(122, 59, 46, 0.10); border-color: rgba(122, 59, 46, 0.4); }
.comment-action-danger:hover { background: rgba(170, 51, 51, 0.10); border-color: rgba(170, 51, 51, 0.55); color: #a33; }
.comment-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 6px; }
.comment-reply { background: rgba(0, 0, 0, 0.02); border-radius: 3px; padding: 6px 8px; }
.comment-reply-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.comment-reply-form textarea { width: 100%; min-height: 50px; padding: 6px 8px; box-sizing: border-box; resize: vertical; font: inherit; }
.comment-reply-form button { align-self: flex-end; padding: 4px 12px; background: var(--accent, #7a3b2e); color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; }
.comment-reply-form button:hover { background: #923f30; }
.team-msg { padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative; }
.team-msg-head { font-size: 11px; }
.team-msg-name { font-weight: 600; }
.team-msg-time { color: var(--text-dim, #888); margin-left: 6px; }
.team-msg-body { font-size: 13px; white-space: pre-wrap; margin-top: 2px; }
.team-msg-actions { display: none; gap: 6px; margin-top: 4px; }
.team-msg:hover .team-msg-actions { display: flex; }
.team-msg-edit, .team-msg-delete {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 2px 8px;
cursor: pointer;
font-size: 11px;
color: var(--text, #2a2a2a);
}
.team-msg-edit:hover, .team-msg-delete:hover {
background: rgba(122, 59, 46, 0.10);
border-color: rgba(122, 59, 46, 0.4);
}
/* Editor-side tabs (Source | PDF) */
.editor-tabs {
display: flex; gap: 2px; padding: 6px 10px 0; flex-shrink: 0;
background: var(--surface2); border-bottom: 1px solid var(--border);
}
/* A tab being dragged to reorder (editor or chat tabs). */
.tab-dragging { opacity: 0.45; cursor: grabbing; }
.editor-tab {
padding: 4px 14px; font-size: 12px; cursor: pointer;
background: transparent; border: 1px solid var(--border-strong, #ddd);
border-bottom: none; border-radius: 4px 4px 0 0; color: var(--text-dim, #888);
}
.editor-tab.active {
background: white; color: var(--accent, #7a3b2e);
border-color: var(--accent-mid, rgba(122, 59, 46, 0.4));
}
.editor-tab.hidden { display: none; }
/* Appendix family row: document-selector chips + create button, separated
from the Source/Clean/PDF view-mode tabs by a thin divider. */
.appendix-tabs {
display: flex; gap: 2px; align-items: flex-end;
margin-left: 8px; padding-left: 8px;
border-left: 1px solid var(--border-strong, #ddd);
}
.appendix-tabs:empty { margin-left: 0; padding-left: 0; border-left: none; }
.appendix-tab { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-appendix-btn {
margin-left: 6px; color: var(--accent, #7a3b2e);
font-size: 15px; line-height: 1; font-weight: 600;
}
.add-appendix-btn:hover { background: var(--surface, #faf8f5); }
.add-appendix-btn:disabled { opacity: 0.5; cursor: default; }
/* The AI-suggestions appendix chip reads distinctly from ordinary appendices. */
.appendix-tab-ai { color: #7b5cd6; }
.appendix-tab-ai.active { color: #7b5cd6; border-color: rgba(123, 92, 214, 0.5); }
/* Clean-view AI-suggestion reference marker: a distinct "✦ N" pill the reader
clicks to open the linked entry in the AI Notes appendix. Deliberately styled
as an AI-note chip (the same ✦ as the AI Notes tab and chat breadcrumb), not
a bare superscript, so it stands out from citations and is not overlooked.
The number is the literal source digit (the \aisuggestionref{ } wrapper is
hidden), so a pending tracked-change still underlines it. */
.cm-clean-aisug-ref {
font-size: 0.72em; font-weight: 700;
color: #5a3fb0;
background: rgba(123, 92, 214, 0.16);
border: 1px solid rgba(123, 92, 214, 0.45);
border-radius: 8px;
padding: 0 5px;
margin: 0 2px;
vertical-align: 0.22em;
cursor: pointer;
white-space: nowrap;
}
.cm-clean-aisug-ref::before { content: "\2726\00a0"; } /* "✦ " */
.cm-clean-aisug-ref:hover { background: rgba(123, 92, 214, 0.32); }
/* When the source pane is "hidden" via tab switching, hide it but keep CodeMirror's
layout intact; toggling display back doesn't blow away decorations. */
#editor.hidden { display: none; }
/* PDF tab */
.pdf-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pdf-pane.hidden { display: none; }
/* Split view: editor on the left, PDF on the right, within the editor pane.
The tabs span the top; the clean-ruler (row 2, collapses to 0 when hidden in
source mode) and #editor stack in the left column; #pdf-pane fills the right
column across both content rows. Badges stay position:absolute over the pane. */
.editor-pane.split-view {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 1fr;
}
.editor-pane.split-view .editor-tabs { grid-column: 1 / 3; grid-row: 1; }
.editor-pane.split-view #clean-ruler { grid-column: 1; grid-row: 2; }
.editor-pane.split-view #editor { grid-column: 1; grid-row: 3; min-width: 0; }
.editor-pane.split-view #pdf-pane { grid-column: 2; grid-row: 2 / 4; border-left: 1px solid var(--border); min-width: 0; }
/* The split toggle reads as engaged when active. */
#pdf-split-btn.is-active { background: var(--accent-dark, #5a2a1e); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.pdf-toolbar {
display: flex; gap: 8px; align-items: center; padding: 6px 10px;
background: var(--surface2); border-bottom: 1px solid var(--border);
}
.pdf-toolbar button {
padding: 4px 12px; font-size: 12px; cursor: pointer;
background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 3px;
}
.pdf-toolbar button:hover { background: var(--accent-dark, #5a2a1e); }
.pdf-toolbar #pdf-download-btn { background: transparent; color: var(--accent, #7a3b2e); border: 1px solid var(--accent-mid, rgba(122, 59, 46, 0.4)); }
.pdf-toolbar #pdf-download-btn.hidden { display: none; }
.pdf-status { font-size: 12px; color: var(--text-dim, #888); }
.pdf-status.ok { color: #2a7a2a; }
.pdf-status.warn { color: #b07a00; }
.pdf-status.error { color: #b00; }
.pdf-prewarn {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; background: #fff7e6; border: 1px solid #f5c97a;
border-left: 3px solid #d97706; font-size: 12px; color: #6b3a04;
}
.pdf-prewarn.hidden { display: none; }
.pdf-prewarn-text { flex: 1; line-height: 1.45; }
.pdf-prewarn button {
padding: 4px 10px; font-size: 12px; cursor: pointer;
background: #d97706; color: white; border: 1px solid #b76304; border-radius: 3px;
}
.pdf-prewarn button:hover { background: #b76304; }
.pdf-frame { flex: 1; width: 100%; border: none; background: #555; }
.pdf-log {
flex: 0 0 auto; max-height: 40%; margin: 0; padding: 8px 10px;
background: #1f1f1f; color: #f0a0a0; font-size: 11px; overflow: auto;
white-space: pre-wrap; word-break: break-word;
}
.pdf-log.hidden { display: none; }
/* Generic hidden helper: any element with class="hidden" goes away. Used by
chat tab switching, settings modal sections, and the user menu dropdown.
Existing element-specific .hidden rules above still match, but the
important keyword guarantees this wins regardless of source order. */
.hidden { display: none !important; }
/* Team chat panel takes the full chat-pane height when active. */
#team-chat-messages { flex: 1; overflow-y: auto; padding: 6px 0; }
#team-chat-input-area textarea { width: 100%; padding: 6px 10px; box-sizing: border-box; min-height: 60px; resize: vertical; }
#team-chat-input-area button { margin-top: 6px; padding: 6px 14px; background: var(--accent, #7a3b2e); color: white; border: none; border-radius: 4px; cursor: pointer; }