— item (body color, 13px)
The old "Recents" header and the "Paper reading / Ask graph"
subsection labels used IDENTICAL styling, which collapsed the
three intended tiers into two and made the structure unreadable.
See `.sb-hist-section-label` below for the matching subsection
tier. */
.sb-label {
/* ``padding-left: 9 px`` puts the RECENTS text at x: 21 — three
pixels right of the upper-section icon column (x: 18) per user
feedback, giving the Recents block a small inset from the
icon rail so it reads as a related-but-distinct sub-area.
Bumped from 700/10.5 px to 800/12 px so the label carries more
visual weight as the only group header in this stretch of the
sidebar. */
/* Match the NovusGraph wordmark font (``--font-serif``) at the
same weight so RECENTS reads as a sibling brand-style label
rather than a sans-serif system label. Serif at this size +
weight 700 carries plenty of visual weight without resorting
to the previous ``-webkit-text-stroke`` trick. */
font: 700 13px/1.2 var(--font-serif);
color: #000;
padding: 16px 12px 8px 9px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ``min-height: 30 px`` locks the item box height independently
of its text line — without it, collapsed-mode (which uses
``font-size: 0`` to hide the labels) loses the text's line-box
height contribution, shrinking each item by 2 px. Subsequent
items would then shift up cumulatively (2 px, 4 px, 6 px, …)
during the collapse animation, which read as a subtle but
noticeable vertical drift. */
.sb-item { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 6px 12px 6px 6px; margin: 1px 0; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text2); transition: background 0.15s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-sans); white-space: nowrap; box-sizing: border-box; overflow: hidden; }
.sb-item:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.sb-item.active { color: var(--text); background: var(--accent-light); }
.sb-item svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Sidebar Recents — two-section list (Paper Reading / Ask Graph)
with a 2-line row layout. The section header is small uppercase
tracking so it reads as a label, not as a list item. Per-scope
icons (file / network) replace the old [Paper] / [Graph] text
prefix. */
/* sidebar-recents-v1: section labels are now sentence case, slightly
larger, with a real top gap so Paper reading / Ask graph read as
distinct blocks rather than headings glued to the first row. */
.sb-hist-section-label {
/* Subsection tier kept around in case future surfaces (e.g.
the dropdown variant) still want a labelled section, but
the sidebar Recents area no longer emits these — the two
groups are now separated by a hairline divider instead. */
padding: 12px 12px 4px;
font: 600 12px/1.2 var(--font-sans);
color: var(--text2);
letter-spacing: 0.005em;
}
.sb-hist-section-label:first-child { padding-top: 6px; }
/* sidebar-recents-divider (2026-05-27): replaces the
``Paper reading`` / ``Ask graph`` labels in the sidebar
Recents area. Updated to a wider hairline that fades into
transparent at both ends (matches the soft serif/accent feel
of the rest of the sidebar) and uses a low-alpha tint from
the accent family rather than the slate ``--border`` so the
divider reads as part of the green palette, not a generic
system separator. */
.sb-hist-section-divider {
height: 1px;
border: none;
background: linear-gradient(
to right,
transparent 0%,
rgba(74, 124, 111, 0.45) 14%,
rgba(74, 124, 111, 0.45) 86%,
transparent 100%
);
margin: 3px 12px;
}
.sb-hist {
/* Item tier: plain text row, body color, ~30 px tall. After the
icon was removed (sidebar-recents-hierarchy) the row reads as
a history line rather than a file-tree entry.
Right padding reserves a 24 px gutter for the absolutely-
positioned ``.sb-hist-more`` button (22 px wide + 6 px right
offset). The (mostly hidden) ``.sb-hist-select-dot`` sits in
the flex flow with the text stack, so the gap below covers
the spacing between dot and text in select mode.
``border-radius: 10 px`` (was 8 px): user observed that with
only ~10 px of breathing room on either side inside the Paper
Detail popover, the right corners looked nearly flat — the
8 px arc was too gentle to read against the popover's 12 px
outer curve. 10 px makes the rounding crisp on both sides at
all viewport scales.
``padding-left: 6 px`` + ``margin: 1 px 0`` align the row
text with the upper-section icon column (sb-section padding
12 + 6 = x: 18); previously ``margin-left: 4 px`` +
``padding-left: 12 px`` pushed the text to x: 28, breaking
the left rail alignment. Background still pills correctly
because ``border-radius: 10 px`` rounds the row box, which
now extends to the section's content edges (same pattern as
``.sb-item`` upstairs). */
display: flex; align-items: center; gap: 9px;
padding: 3px 36px 3px 9px;
cursor: pointer;
font-size: 13px;
color: var(--text);
transition: background 0.12s, color 0.12s;
/* Was 10 px (see history above). User flagged the active row's
corners as too soft against the ~24 px row height. 6 px sits
closer to a labeled rectangle while still rounding visibly. */
border-radius: 6px;
margin: 0;
}
/* Phase B7: invert the accent so active reads "stronger green"
than hover. Was: hover used the warm gray bg-warm while active
used a 10%-alpha green — active ended up paler than hover,
which is backwards. Now: hover = 8%-alpha green (subtle
pre-click hint), active = 22%-alpha green + accent text color
(clear "you're here" marker). */
.sb-hist:hover {
color: var(--text);
background: rgba(74, 124, 111, 0.08);
}
.sb-hist.active {
color: var(--accent);
background: var(--accent-light);
}
/* Phase B8: GPT-style ⋯ (more) button per row. Default hidden;
row hover reveals it. Click opens a popover with Rename /
Pin / Delete actions. Lives in the row's flex layout but
absolutely positioned so it floats over the text on overflow. */
.sb-hist { position: relative; }
.sb-hist-more {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
padding: 0;
border: none;
background: transparent;
color: var(--text3);
cursor: pointer;
border-radius: 5px;
opacity: 0;
transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.sb-hist-more svg { width: 16px; height: 16px; }
.sb-hist:hover .sb-hist-more,
.sb-hist.is-menu-open .sb-hist-more { opacity: 1; }
.sb-hist-more:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }
.sb-hist.active .sb-hist-more:hover { background: rgba(74, 124, 111, 0.18); color: var(--accent); }
/* Popover anchored to the row's right edge. Mirrors paper-chat-
smart-menu styling. */
.sb-hist-menu {
position: fixed;
min-width: 160px;
padding: 4px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 10px 28px rgba(20, 35, 30, 0.14);
z-index: 60;
display: flex; flex-direction: column; gap: 1px;
font: 500 13px var(--font-sans);
}
.sb-hist-menu[hidden] { display: none; }
.sb-hist-menu-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 6px;
color: var(--text);
text-align: left;
transition: background 0.1s;
}
.sb-hist-menu-item svg { width: 15px; height: 15px; opacity: 0.7; }
.sb-hist-menu-item:hover { background: rgba(74, 124, 111, 0.10); }
.sb-hist-menu-item.is-danger { color: #c0392b; }
.sb-hist-menu-item.is-danger svg { color: #c0392b; }
.sb-hist-menu-item.is-danger:hover { background: rgba(192, 57, 43, 0.10); }
/* chat-row-bulk-select-v1 (2026-05-27): batch-delete affordance
for both Sidebar Recents and Paper Detail History dropdown.
Entered from the ⋯ menu's "Select" item; while a surface is
in select mode each row reveals a small circle on the left,
⋯ menu hides, and a sticky action bar at the top shows
"N selected · Cancel · Delete (N)". Implementation state lives
in window._chatSelectMode and is per-surface (entering from
the dropdown does NOT put the sidebar into select mode). */
.sb-hist-select-dot {
/* Hidden by default — only revealed when the row's parent
enters select mode. Empty thin-stroked ring; the selected
state adds an inner filled dot (radio-button pattern, per
user request — Apple HIG / macOS native style). flex layout
centers the inner dot when selected.
Sized down further to 12 × 12 with a 1 px stroke so the
indicator stays a quiet glyph next to 13 px row text instead
of competing with it. */
display: none;
flex-shrink: 0;
width: 12px; height: 12px;
border: 1px solid var(--text3);
border-radius: 50%;
background: transparent;
align-items: center; justify-content: center;
transition: border-color 0.12s;
}
.sb-hist.is-select-mode .sb-hist-select-dot { display: flex; }
.sb-hist.is-select-mode .sb-hist-more { display: none; }
.sb-hist.is-selected .sb-hist-select-dot {
/* Selected: outer ring takes the accent color; inner dot
(rendered via ``::after``) fills with the same accent. */
border-color: var(--accent);
}
.sb-hist.is-selected .sb-hist-select-dot::after {
/* Smaller inner dot per user feedback — keeps the indicator
feeling refined and subtle even when half the rows are
picked. */
content: '';
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
}
.sb-hist.is-select-mode {
/* Selecting is now the primary affordance — make the whole row
read as click-to-toggle. */
cursor: pointer;
}
.chat-select-bar {
/* chat-row-bulk-select-v2: the bar now contains only a "Done"
button right-aligned at the top of the surface. The
destructive action ("Delete selected") lives in the footer
when something is checked. Layout is simplified
accordingly — no count text, no inline delete. */
display: flex; align-items: center; justify-content: flex-end;
padding: 6px 10px;
background: var(--card);
border-bottom: 1px solid var(--border);
position: sticky; top: 0;
z-index: 2;
white-space: nowrap;
}
.chat-select-bar-count {
color: var(--text);
font-weight: 600;
}
.chat-select-bar-actions { display: flex; gap: 4px; flex-shrink: 0; }
.chat-select-bar-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 3px 8px;
border-radius: 6px;
font: 500 11px var(--font-sans);
color: var(--text2);
transition: background 0.1s, color 0.1s;
white-space: nowrap;
}
.chat-select-bar-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }
/* chat-row-bulk-select-v3: paired Cancel + Delete footer. The
previous ghost treatment read as washed-out — user wanted more
substance. Cancel is now a solid neutral fill (Linear / Notion
style); Delete is a filled accent-red with white text. Weight
bumped to 600 so the labels carry visually. */
.chat-select-footer {
display: flex;
gap: 8px;
padding: 10px 9px 12px;
}
.chat-select-footer-btn {
flex: 1;
padding: 8px 10px;
border-radius: 10px;
font: 600 12px var(--font-sans);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.chat-select-cancel {
background: var(--bg-warm);
border: 1px solid var(--border);
color: var(--text);
}
.chat-select-cancel:hover {
background: #e8ece9;
border-color: #b6bfba;
}
.chat-select-delete {
/* Softer red (terracotta) per user — the saturated #c0392b
felt too loud next to the calm sidebar palette. */
background: #d27669;
border: 1px solid #d27669;
color: #fff;
}
.chat-select-delete:hover {
background: #c0584a;
border-color: #c0584a;
}
.chat-select-delete:disabled {
background: rgba(210, 118, 105, 0.4);
border-color: rgba(210, 118, 105, 0.4);
color: #fff;
cursor: not-allowed;
}
.chat-select-delete:disabled:hover {
background: rgba(210, 118, 105, 0.4);
border-color: rgba(210, 118, 105, 0.4);
}
/* Paper Detail dropdown popover: the previous attempt used
``margin: 0 -6 px`` to push the bar edge-to-edge with the
popover, but the right side never quite reached the outer
edge because ``overflow-y: auto`` reserves a scrollbar gutter
regardless of how the scrollbar itself is styled — the
bar's right border-bottom always stopped at the gutter's
inside edge, leaving a hairline white strip past it. Keep the
bar inside the container's content box so the left and right
gaps are symmetric (~ 6 px on each side); the user explicitly
preferred this symmetric look to a one-sided gap. */
.paper-detail-history-menu .chat-select-bar {
/* no negative margin; let the bar fit inside the content box */
}
/* Phase B9: shared confirmation modal — replaces the ugly
window.confirm() / window.alert() native dialogs with a
GPT-style centered card. Used by delete chat, future destructive
actions. Open/close via the _appConfirm() helper in
authHub.js. */
.app-confirm-overlay {
position: fixed; inset: 0;
background: rgba(20, 35, 30, 0.36);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1100;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.14s ease;
}
.app-confirm-overlay.open { opacity: 1; }
.app-confirm-card {
width: 100%;
max-width: 420px;
margin: 0 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 22px 60px rgba(20, 35, 30, 0.22);
padding: 22px 24px 18px;
font-family: var(--font-sans);
color: var(--text);
transform: translateY(6px) scale(0.99);
transition: transform 0.16s ease;
}
.app-confirm-overlay.open .app-confirm-card { transform: none; }
.app-confirm-title {
font: 600 17px/1.3 var(--font-sans);
color: var(--text);
margin: 0 0 8px;
}
.app-confirm-body {
font: 400 13.5px/1.55 var(--font-sans);
color: var(--text2);
margin: 0 0 18px;
word-break: break-word;
}
.app-confirm-actions {
display: flex; justify-content: flex-end; gap: 8px;
}
.app-confirm-btn {
padding: 8px 16px;
border-radius: 8px;
font: 500 13px var(--font-sans);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.app-confirm-btn-cancel {
background: transparent;
color: var(--text2);
border-color: var(--border);
}
.app-confirm-btn-cancel:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
.app-confirm-btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.app-confirm-btn-primary:hover { opacity: 0.9; }
.app-confirm-btn-danger {
background: #c0392b;
color: #fff;
border-color: #c0392b;
}
.app-confirm-btn-danger:hover { background: #a93023; border-color: #a93023; }
.sb-hist-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0.55;
margin-top: 1px;
}
.sb-hist-icon svg { width: 14px; height: 14px; display: block; }
.sb-hist.is-graph .sb-hist-icon { color: #5b6fa4; }
.sb-hist.is-paper .sb-hist-icon { color: var(--accent); }
.sb-hist.active .sb-hist-icon { opacity: 0.9; }
.sb-hist-text-stack {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
gap: 1px;
}
.sb-hist-primary {
/* sidebar-recents-hierarchy: drop the bold + small treatment;
primary now inherits the row's 13 px body color so the item
reads as a plain history line. Active state still upgrades to
``var(--accent)`` via the row's ``color`` change since we
``inherit``. */
font: 500 13px var(--font-sans);
color: inherit;
overflow: hidden;
/* sidebar-recents-v1: clip-truncate without the trailing ``…``.
The ellipsis was visually noisy on every row; the row is wide
enough that mid-word clip reads fine and hover reveals the rest
via the secondary line.
The fade-out mask hides the last ~14 px so a half-cut glyph
softens to transparent instead of showing a chopped letter —
visually equivalent to "truncate at the last whole character"
without the cost of JS-side char-width measurement. */
text-overflow: clip;
white-space: nowrap;
-webkit-mask-image: linear-gradient(
to right,
#000 0,
#000 calc(100% - 14px),
transparent 100%
);
mask-image: linear-gradient(
to right,
#000 0,
#000 calc(100% - 14px),
transparent 100%
);
}
.sb-hist.active .sb-hist-primary { color: var(--accent); }
/* sidebar-recents-secondary-drop (2026-05-27): the secondary line
(hover-revealed first-user-query) was removed by the renderer.
Its CSS — display rule, hover reveal, 2-line alignment shim —
came out with it; rows are now strictly single-line so no
alignment compensation is needed. */
/* Content area */
.content { padding: 36px 40px; max-width: 1100px; margin: 0 auto; }
.page-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.page-desc { font-size: 14px; color: var(--text2); margin-bottom: 24px; }
/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card:hover { box-shadow: 0 2px 12px rgba(45,43,40,0.06); }
/* Buttons */
.btn { padding: 8px 20px; background: var(--text); color: var(--bg); border: none; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: var(--font-sans); transition: all 0.15s; }
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg-warm); color: var(--text); border-color: var(--text3); }
.btn-danger { background: #A65046; }
.btn-success { background: var(--accent); }
/* Input */
input[type="text"], input[type="search"] { padding: 10px 16px; border: 1px solid var(--border); border-radius: 20px; font-size: 14px; font-family: var(--font-sans); outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; background: var(--card); }
input:focus { border-color: var(--text3); box-shadow: 0 0 0 3px rgba(74,124,111,0.1); }
input.hero-cmd-input, input.hero-cmd-input:focus { border: 1px solid transparent; }
/* Tabs (legacy / generic — kept for non-paper-detail pages that
still use the old pill-strip shape). The paper-detail tab bar
has its own segmented-control style below. */
.tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.tab { padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--font-sans); transition: all 0.15s; }
.tab:hover { border-color: var(--text3); color: var(--text); }
.tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.tab-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); margin: 0 4px; vertical-align: middle; flex-shrink: 0; }
/* ── paper-detail-tabs-v2 visual polish (2026-05-24) ──
Wraps the primary tab row in a single segmented container
instead of five independent pill chips. Active = softer
accent fill (not harsh black). Inactive = transparent, no
per-button border. Assets dropdown gains header + count-
aligned items + selected state. Scoped to #detailTabs so
the legacy generic .tab rules above keep serving other
pages unchanged. */
#detailTabs { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 3px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 22px; }
#detailTabs .tab { white-space: nowrap; flex-shrink: 0; }
#detailTabs .tab { padding: 5px 14px; border-radius: 18px; border: none; background: transparent; color: var(--text2); font: 500 13px var(--font-sans); cursor: pointer; transition: background 0.12s, color 0.12s; }
#detailTabs .tab:hover { background: rgba(74,124,111,0.10); color: var(--text); border-color: transparent; }
#detailTabs .tab.active { background: var(--accent); color: #fff; border-color: transparent; }
#detailTabs .tab.is-open { background: var(--accent-light); color: var(--accent); }
#detailTabs .tab-more-wrap { position: relative; display: inline-block; }
#detailTabs .tab-more { display: inline-flex; align-items: center; gap: 5px; }
#detailTabs .tab-more-caret { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.85; }
/* Assets dropdown — product-shaped menu with a header, fixed-
height rows, right-aligned counts, hover background, and a
distinct selected-row state. */
.paper-detail-more-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(44,46,45,0.14); padding: 6px; z-index: 60; }
.paper-detail-more-menu[hidden] { display: none; }
.paper-detail-more-head { padding: 8px 12px 6px; font: 600 11px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.paper-detail-more-list { display: flex; flex-direction: column; gap: 1px; }
.paper-detail-more-item { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border: none; background: transparent; cursor: pointer; border-radius: 8px; font: 500 13px var(--font-sans); color: var(--text); text-align: left; transition: background 0.12s; }
.paper-detail-more-item:hover { background: rgba(74,124,111,0.08); }
.paper-detail-more-item.is-selected { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.paper-detail-more-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-detail-more-count { font: 500 12px var(--font-mono); color: var(--text3); flex-shrink: 0; }
.paper-detail-more-item.is-selected .paper-detail-more-count { color: var(--accent); }
/* Overview → Deep Reading action (Phase paper-detail-tabs-v2). A
one-line CTA on the Overview page replacing the unconditional
Materials → Deep Reading sub-tab. */
.overview-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 500 13px var(--font-sans); text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.overview-action:hover { background: var(--accent-light); border-color: rgba(74,124,111,0.35); }
.overview-action svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.overview-action-label { flex: 1; }
.overview-action-arrow { width: 14px; height: 14px; opacity: 0.6; }
/* ── paper-detail-workspace-v3 (2026-05-24) ──
Workspace header: left = segmented modes (#detailTabs from
v2.1 above), right = lightweight ghost buttons (New Chat,
History). They must read as session actions, not as content
tabs — so they live OUTSIDE the segmented container and use
their own visual language (no fill, just hover tint). */
.detail-workspace-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin: 12px 0 12px;
/* paper-detail-narrow-fit: when the right panel shrinks (zoom,
splitter drag), the actions group should wrap below the tabs
rather than being clipped by the panel's overflow:hidden. */
flex-wrap: wrap;
}
.detail-workspace-header > #detailTabs {
margin: 0;
/* Required so the tabs container can shrink past its natural
intrinsic width; without it the wrap above never triggers. */
min-width: 0;
}
.detail-workspace-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.detail-workspace-action { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text2); font: 500 12.5px var(--font-sans); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; flex-shrink: 0; }
.detail-workspace-action svg { width: 14px; height: 14px; opacity: 0.85; }
.detail-workspace-action:hover { background: var(--accent-light); color: var(--accent); border-color: rgba(74,124,111,0.25); }
.detail-workspace-history-wrap { position: relative; display: inline-block; }
/* paper-detail-narrow-fit: under ~540 px of panel width, drop the
"New Chat" / "History" labels and present icon-only buttons.
Tooltip (``title=``) still reveals the label on hover, so no
information is lost. Threshold picked to roughly match six tabs
+ two icon buttons fitting one row at this font size. */
@container dright (max-width: 540px) {
.detail-workspace-action span { display: none; }
.detail-workspace-action { padding: 5px 8px; }
}
/* History dropdown (mirrors .paper-detail-more-menu chrome but
under its own selectors so the two surfaces stay decoupled). */
/* paper-chat-context-v1 select-bar peek fix: dropped padding-top
from the container so the sticky ``.chat-select-bar`` can pin
FLUSH at the top of the scroll port. Previously the 6 px top
padding sat above the bar's ``top: 0`` and let scrolled-up rows
briefly peek through that sliver. The (non-select-mode) head
block ``.paper-detail-history-head`` already carries its own
padding-top so the visible chrome height stays the same when
the head is shown instead of the bar.
``overscroll-behavior: none`` suppresses the macOS / Safari /
Chrome rubber-band bounce so a hard swipe past the top or
bottom edge no longer exposes a strip of the popover background
above the head row. Also prevents scroll chaining to the page
underneath. */
.paper-detail-history-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 320px; max-width: 380px; max-height: 480px; overflow-y: auto; overscroll-behavior: none; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(44,46,45,0.14); padding: 0 6px 6px; z-index: 60; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
/* Thin custom scrollbar inside the popover. The default ~15 px
browser scrollbar sat between the row's right edge and the
popover wall — that wide vertical bar made the row's 10 px
right corner radius read as flat (no visible curve) while the
left side, with no such occluder, read as clearly rounded. A
6 px overlay-style scrollbar keeps the right side visually
clear so the row corners look symmetric. */
.paper-detail-history-menu::-webkit-scrollbar { width: 6px; }
.paper-detail-history-menu::-webkit-scrollbar-track { background: transparent; }
.paper-detail-history-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 3px;
}
.paper-detail-history-menu::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.30);
}
.paper-detail-history-menu[hidden] { display: none; }
.paper-detail-history-head { padding: 8px 12px 6px; font: 600 11px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.paper-detail-history-empty { padding: 14px 12px; font: 400 12.5px/1.5 var(--font-sans); color: var(--text3); }
.paper-detail-history-body {
display: flex; flex-direction: column; gap: 2px;
/* history-drop-head (2026-05-27): the popover no longer renders
a "Paper chat history" head, so its 8 + 6 px top padding is
gone. Add a small top pad here so the first row doesn't slam
into the popover's outer top border. The sticky select bar
(when present) overrides this naturally because it's a
sibling that sits above the body. */
padding-top: 8px;
}
.paper-detail-history-group { display: flex; flex-direction: column; }
.paper-detail-history-group-head { padding: 8px 12px 4px; font: 600 10px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; }
.paper-detail-history-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 8px 12px; border: none; background: transparent; cursor: pointer; border-radius: 8px; text-align: left; transition: background 0.12s; }
.paper-detail-history-item:hover { background: rgba(74,124,111,0.08); }
.paper-detail-history-item.is-active { background: var(--accent-light); }
.paper-detail-history-item-title { font: 500 13px var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.paper-detail-history-item.is-active .paper-detail-history-item-title { color: var(--accent); font-weight: 600; }
.paper-detail-history-item-meta { font: 400 11px var(--font-mono); color: var(--text3); }
/* Assistant hero 2×2 grid — the v3 cards are now actionable
(Highlight & Ask / Crop Figure) or info-only (Grounded
Answers) or visibly disabled (Add Context). The grid already
exists; the only structural change is to drop the
".paper-chat-hero-card-full" full-width treatment for the
third card so v3 can fit four cards in 2×2. */
.paper-chat-hero-card.is-actionable { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.paper-chat-hero-card.is-actionable:hover { background: var(--accent-light); border-color: rgba(74,124,111,0.35); }
.paper-chat-hero-card.is-disabled { position: relative; opacity: 0.55; cursor: default; }
.paper-chat-hero-card.is-disabled:hover { background: rgba(255,255,255,0.78); border-color: var(--border); }
.paper-chat-hero-card-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 10px; background: var(--bg-warm); color: var(--text3); font: 600 10px var(--font-sans); text-transform: uppercase; letter-spacing: 0.4px; align-self: flex-start; }
/* Phase 4D candidate: when Add Context grows a real surface,
drop is-disabled here and wire its onclick. */
/* Sub-tabs (inside content area) */
.sub-tabs { display: flex; gap: 3px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.sub-tab { padding: 4px 12px; border-radius: 6px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 12px; font-weight: 500; font-family: var(--font-sans); transition: all 0.12s; }
.sub-tab:hover { color: var(--text2); background: var(--bg-warm); }
.sub-tab.active { color: var(--accent); background: var(--accent-light); font-weight: 600; }
/* Grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.grid-narrow { grid-template-columns: 1fr; }
/* Paper list */
.paper-row { display: flex; align-items: center; gap: 14px; padding: var(--d-list-pad-y) 16px; border-radius: 8px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.paper-row:hover { background: var(--bg-warm); transform: translateX(2px); }
.paper-row .p-id { font-size: 11px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; color: var(--accent); background: var(--accent-light); padding: 3px 8px; border-radius: 5px; flex-shrink: 0; min-width: 90px; text-align: center; letter-spacing: -0.02em; }
.paper-row .p-body { flex: 1; min-width: 0; }
.paper-row .title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-row .meta { display: flex; gap: 6px; margin-top: 3px; }
.paper-row .meta .badge { font-size: 11px; color: var(--text3); background: var(--bg-warm); padding: 1px 7px; border-radius: 4px; }
.paper-row .meta .badge.has { color: var(--accent); background: var(--accent-light); }
.paper-row .p-arrow { color: var(--text3); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.paper-row:hover .p-arrow { opacity: 1; }
/* paper-detail-references-cleanup (2026-05-24) — the References
subtab rows have variable badge sets (year / venue / In DB /
BibTeX). Three things to enforce so the rows align:
1. min-height so badge-light rows match badge-heavy ones;
2. badges never wrap their own text internally ("In DB" was
being split into "In\nDB" when meta overflowed, which
doubled the row height for that entry);
3. the venue badge is the only one allowed to shrink — it
ellipsis-clips to fit instead of pushing siblings to a
second meta line.
*/
.paper-row-reference { min-height: 64px; }
/* Fixed cite-key column width so the title column starts at the
same X regardless of cite-key length. Without this, a long key
like "chaudhuri2025tripcraft" pushes its title 80+ px to the
right of a short key like "de2013unique" and the right side
reads as ragged. Long keys ellipsis-clip; hover shows the full
key via the title attribute set in JS. */
.paper-row-reference .p-id { width: 170px; min-width: 170px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.paper-row-reference .paper-row-ref-authors { font-size: 12px; color: var(--text3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-row-reference .meta { flex-wrap: nowrap; min-width: 0; overflow: hidden; align-items: center; }
.paper-row-reference .meta .badge { white-space: nowrap; flex-shrink: 0; }
.paper-row-reference .meta .badge-venue { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Empty arrow slot for non-matched rows — keeps the BibTeX button
on the same right edge as matched rows. Width matches the real
.p-arrow SVG (16 px) so the column rhythm is identical. */
.paper-row-reference .p-arrow-spacer { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; }
.lib-stats { display: flex; gap: 16px; margin-bottom: 20px; }
.lib-stat { font-size: 13px; color: var(--text2); }
.lib-stat strong { font-weight: 600; color: var(--text); }
/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 0 8px; }
.pager button { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--text2); font-size: 13px; font-family: var(--font-sans); cursor: pointer; transition: all 0.12s; }
.pager button:hover:not(:disabled) { border-color: var(--text3); color: var(--text); }
.pager button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager .pager-info { font-size: 12px; color: var(--text3); padding: 0 8px; }
.pager .pager-goto { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: var(--text3); }
.pager .pager-goto input { width: 42px; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); font-size: 12px; font-family: var(--font-sans); text-align: center; outline: none; }
.pager .pager-goto input:focus { border-color: var(--text3); }
/* Import */
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-light); }
/* Result cards */
.result { margin-top: 12px; padding: 16px; border-radius: var(--radius); }
.result.found { background: #EEF5EC; border: 1px solid #C8DCC2; }
.result.notfound { background: #FBF4E4; border: 1px solid #E8DCC0; }
.result.error { background: #F5EAEA; border: 1px solid #DEC9C6; }
.result .r-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.result .r-meta { font-size: 12px; color: var(--text2); }
/* Section content */
.section-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; }
.section-block h4 { font-family: var(--font-serif); font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.section-block p { font-size: 13.5px; color: var(--text2); line-height: 1.7; }
.section-block.level-1 > h4 { font-size: 16px; }
.section-block.level-2 { margin-left: 24px; }
.section-block.level-2 > h4 { font-size: 14px; }
.section-block.level-3 { margin-left: 48px; }
.section-block.level-3 > h4 { font-size: 13px; }
.section-block .sec-num { color: var(--text3); font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px; margin-right: 6px; font-weight: 400; }
.section-block.empty-parent { padding: 10px 20px; margin-bottom: 4px; }
.section-block.empty-parent p { display: none; }
/* Figure card */
.fig-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fig-card img { width: 100%; display: block; }
.fig-card .caption { padding: 10px 14px; font-size: 12px; color: var(--text2); line-height: 1.5; border-top: 1px solid var(--border); }
/* Deep reading */
.pass-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.pass-card .pass-name { font-size: 14px; font-weight: 500; flex: 1; }
.pass-card .pass-status { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.pass-done { background: #E0EDDC; color: #3D5A36; }
.pass-pending { background: var(--bg-warm); color: var(--text3); }
.pass-running { background: var(--accent-light); color: var(--accent); }
/* Loading */
.loading { text-align: center; padding: 40px; color: var(--text3); }
/* Hide views */
.view { display: none; }
.view.active { display: block; }
#v-library.active { display: block; height: 100vh; overflow: hidden; }
#v-library .wb-shell { height: 100%; }
/* Detail split layout */
#v-detail.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.main:has(#v-detail.active) { height: 100vh; overflow: hidden; }
.detail-topbar { display:flex; align-items:center; gap:12px; padding:10px 24px; border-bottom:1px solid var(--border); flex:0 0 auto; background:var(--bg); position:sticky; top:0; z-index:50; }
.detail-split { display: flex; flex: 1; overflow: hidden; position: relative; }
/* arxiv-version-transparency-v1 (P0): non-load-bearing status chip
for "imported arXiv vN · latest known · stale". Sits between the
detail title and the (legacy hidden) PDF toggle in the topbar.
Designed to be informational, not actionable beyond an optional
`check for updates` link. The colour scheme stays muted so it
never competes with the title or the back button. */
.detail-version {
display: inline-flex; align-items: center; gap: 8px;
flex-shrink: 0;
padding: 3px 10px;
border-radius: 999px;
background: var(--bg-warm);
border: 1px solid var(--border);
font: 500 11.5px var(--font-sans);
color: var(--text2);
white-space: nowrap;
user-select: none;
}
.detail-version[hidden] { display: none; }
.detail-version .dv-main { color: var(--text2); }
.detail-version .dv-meta { color: var(--text3); font-weight: 400; }
.detail-version .dv-sep { color: var(--text3); opacity: 0.55; }
.detail-version .dv-pill {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
background: var(--accent-light);
color: var(--accent);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.2px;
}
.detail-version .dv-action {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: var(--accent);
cursor: pointer;
text-decoration: none;
}
.detail-version .dv-action:hover { text-decoration: underline; }
.detail-version .dv-action:disabled { color: var(--text3); cursor: default; text-decoration: none; }
.detail-version.is-unknown { background: transparent; border-color: transparent; color: var(--text3); }
.detail-version.is-error .dv-meta { color: #8A2828; }
/* Drag-to-resize handle between PDF (left) and content (right).
Wider hit target (10 px) with a thin centered visual rule;
hover paints a faint accent strip across the full hit zone +
thickens the center line. Hidden when the PDF panel itself
is hidden — that case .detail-right takes the full width. */
.detail-resizer {
flex: 0 0 10px;
align-self: stretch;
cursor: col-resize;
background: transparent;
position: relative;
z-index: 20;
transition: background 0.12s ease;
/* a couple of px of negative margin so the hit area visually
overlaps the PDF / chat edges and feels easier to grab. */
margin: 0 -2px;
}
.detail-resizer::after {
content: '';
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 1px;
background: var(--border);
transform: translateX(-50%);
transition: background 0.12s ease, width 0.12s ease;
pointer-events: none;
}
.detail-resizer:hover {
background: rgba(74, 124, 111, 0.10);
}
.detail-resizer:hover::after,
.detail-resizer.is-dragging::after {
background: var(--accent);
width: 2px;
}
.detail-resizer.is-dragging { background: rgba(74, 124, 111, 0.16); }
.detail-resizer:focus-visible {
outline: none;
background: rgba(74, 124, 111, 0.16);
}
.detail-resizer:focus-visible::after { background: var(--accent); width: 2px; }
/* When the PDF panel is hidden, the resizer is meaningless — fold it
away. The `+` selector picks up the resizer that sits right after
.detail-pdf in DOM order. */
.detail-pdf.hidden + .detail-resizer { display: none; }
/* While dragging, kill text selection across the whole layout so the
cursor doesn't paint a giant selection. */
body.is-resizing-detail,
body.is-resizing-detail * { user-select: none !important; cursor: col-resize !important; }
/* PDF panel gets more of the split than the chat side — alphaxiv
does the same: PDF reads big, chat stays usable. The 1fr-style
width gives the chat side just enough for its 2-card hero. */
.detail-pdf { width: 58%; min-width: 240px; max-width: 85%; background: #525659; display: flex; flex-direction: column; flex-shrink: 0; position: relative; }
.detail-pdf.hidden { display: none; }
/* When the PDF panel is hidden, .detail-right takes the whole row.
The resizer (between them in DOM order) is also hidden via the
adjacent rule above so flex collapses cleanly. */
.detail-pdf.hidden + .detail-resizer + .detail-right { width: 100%; }
/* paper-chat-three-col: when the Assistant tab is active the
detail-split flex container exposes a third pane (sources).
We don't add a dedicated resizer between chat and sources —
the panel has a fixed width that scales sanely on small
screens. Hidden by default + on every non-Assistant tab. */
.detail-sources { display: none; }
.detail-split.three-col .detail-sources { display: flex; flex-direction: column; }
.detail-split.three-col .detail-pdf { width: 42%; }
.detail-split.three-col .detail-right { flex: 1 1 0; min-width: 320px; }
.detail-sources { width: 320px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--bg-warm); }
.detail-sources-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.detail-sources-title { font: 600 12px var(--font-sans); text-transform: uppercase; letter-spacing: 0.6px; color: var(--text2); }
.detail-sources-close { background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text3); display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.detail-sources-close:hover { background: rgba(78, 116, 100, 0.08); color: var(--accent); }
.detail-sources-close svg { width: 16px; height: 16px; }
.detail-sources-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.detail-sources-empty { font: 400 12px/1.5 var(--font-sans); color: var(--text3); padding: 24px 8px; text-align: center; }
/* Right pane is a flex column:
- #detailTriage flex:none (tiny chip strip when present)
- #detailTabs flex:none (always pinned at top)
- #detailContent flex:1 (owns its own scroll)
This means the topbar AND the tabs stay frozen; only the tab
content (Chat / Overview / Evidence …) scrolls underneath them. */
.detail-right {
flex: 1; min-height: 0; overflow: hidden;
padding: 0 32px 0;
background: var(--bg);
display: flex; flex-direction: column;
/* paper-detail-narrow-fit: declare the right panel as a query
container so the workspace header (tabs + ghost buttons) can
adapt to its actual rendered width — needed because zoom or a
dragged splitter can squeeze the panel below the natural width
of all six tabs + two labelled action buttons. */
container-type: inline-size;
container-name: dright;
}
.detail-right > #detailTriage,
.detail-right > #detailStrip,
.detail-right > #detailCommunity { flex: 0 0 auto; }
/* paper-detail-tabs-v2.1: keep the layout-only properties
(flex pin + outer spacing) here, but drop the background /
padding overrides — those now belong to the #detailTabs
segmented-container rule above so the segmented shell can
render. align-self prevents the inline-flex container from
stretching the full column width. */
.detail-right > #detailTabs { flex: 0 0 auto; align-self: flex-start; margin: 12px 0 12px; }
.detail-right > #detailContent { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
/* Chat panel fills the scrolling content area so the input row sits
at the bottom and the hero centers vertically instead of hugging
the top with white space below. */
.detail-right > #detailContent > .paper-chat { min-height: 100%; }
/* PDF viewer */
.pdf-viewer { flex: 1; min-height: 0; background: #525659; }
.pdf-viewer iframe { width: 100%; height: 100%; border: 0; display: block; background: #525659; }
.pdf-loading { height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 13px; }
/* PDF download overlay */
.pdf-dl-overlay {
position: absolute; inset: 0; z-index: 30;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
background: rgba(239,242,241,0.92); backdrop-filter: blur(6px);
animation: pdfDlFadeIn 0.3s ease;
}
@keyframes pdfDlFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pdf-dl-spinner {
width: 36px; height: 36px;
border: 3px solid var(--border); border-top-color: var(--accent);
border-radius: 50%;
animation: pdfDlSpin 0.8s linear infinite;
}
@keyframes pdfDlSpin { to { transform: rotate(360deg); } }
.pdf-dl-text { font-size: 14px; font-weight: 500; color: var(--text2); letter-spacing: 0.01em; }
.pdf-dl-sub { font-size: 12px; color: var(--text3); margin-top: -12px; }
.pdf-fallback-note { position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 6px 10px; border-radius: 6px; background: rgba(17,24,39,0.78); color: #e5e7eb; font-size: 11px; }
/* Toggle PDF button */
.pdf-toggle { padding: 4px 14px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 500; font-family: var(--font-sans); border: 1px solid var(--border); background: transparent; color: var(--text2); margin-left: auto; transition: all 0.15s; }
.pdf-toggle:hover { border-color: var(--text3); color: var(--text); }
.pdf-toggle.active { border-color: var(--text); background: var(--text); color: var(--bg); }
/* Responsive */
@media (max-width: 768px) {
.sidebar { display: none; }
.main { margin-left: 0; }
.grid { grid-template-columns: 1fr; }
.detail-pdf { display: none !important; }
.detail-right { width: 100% !important; }
}
/* Selection color */
::selection { background: var(--accent-light); color: var(--text); }
/* ── Workbench Layout ── */
.wb-shell { display: flex; height: 100vh; overflow: hidden; }
.wb-main { flex: 1; min-width: 0; overflow-y: auto; }
.wb-right { width: var(--rpanel-w); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--card); overflow-y: auto; }
/* ── Shared PageHeader (page-header-v1) ──
* Every workbench / report page gets the same header chrome:
* .page-header
* .page-title-row (h1 + .page-meta)
* .page-search (svg + input)
* .filter-chips (chip row)
* .page-toolbar (selects + count + pager)
*
* Existing .lib-header / .fam-header / .tk-header / .ideas-header are
* kept as aliases so the HTML they sit in doesn't all need touching.
* New pages (claim-graph, field-map) just emit .page-header directly.
*/
.page-header,
.lib-header, .fam-header, .tk-header, .ideas-header {
padding: 14px 40px 0;
max-width: 980px;
position: sticky; top: 0; z-index: 10;
background: var(--bg);
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.wb-main.scrolled .lib-header,
.wb-main.scrolled .page-header { border-bottom-color: var(--border); }
.fam-list-pane.scrolled .fam-header { border-bottom-color: var(--border); }
.tk-list-pane.scrolled .tk-header { border-bottom-color: var(--border); }
.ideas-list-pane.scrolled .ideas-header { border-bottom-color: var(--border); }
.page-title-row,
.lib-title-row,
.fam-header .fam-title-row,
.tk-header .tk-title-row,
.ideas-header .ideas-title-row {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 0;
}
.page-header h1,
.lib-title-row h1,
.fam-header h1,
.tk-header h1,
.ideas-header h1 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.page-meta,
.lib-counters,
.fam-header .fam-desc,
.tk-header .tk-desc,
.ideas-header .ideas-desc {
display: inline;
font-size: 11px;
color: var(--text3);
}
.lib-counters span strong { color: var(--text2); font-weight: 600; }
.lib-counters span::after { content: '·'; margin-left: 5px; color: var(--border); }
.lib-counters span:last-child::after { display: none; }
/* Search box — shared shape */
.page-search,
.lib-search, .fam-search, .tk-search, .ideas-search {
position: relative;
margin: 8px 0 6px;
}
.page-search input,
.lib-search input, .fam-search input, .tk-search input, .ideas-search input {
padding: 7px 16px 7px 34px;
border-radius: 8px;
font-size: 13px;
border: 1px solid var(--border);
background: var(--bg);
width: 100%;
font-family: var(--font-sans);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.page-search input:focus,
.lib-search input:focus, .fam-search input:focus, .tk-search input:focus, .ideas-search input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(74,124,111,0.12);
background: var(--card);
}
.page-search input::placeholder,
.lib-search input::placeholder, .fam-search input::placeholder, .tk-search input::placeholder, .ideas-search input::placeholder {
color: var(--text3);
}
.page-search svg,
.lib-search svg, .fam-search svg, .tk-search svg, .ideas-search svg {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%);
color: var(--text3);
pointer-events: none;
width: 15px; height: 15px;
}
/* ── Shared InspectorSection (inspector-section-v1) ──
* Right-pane chrome for the 4 workbench detail panels (Library,
* Formula Families, Formal Tricks, Research Hypotheses).
*
* Per-page class names are listed as aliases — no HTML rewrites,
* same pattern as page-header-v1. paperDetail's `.section-block`
* system is intentionally NOT included here (separate visual
* model, see INSPECTOR_SECTION_V1_SPEC.md § 1).
*/
.inspector-pane,
.fam-detail-pane, .tk-detail-pane, .ideas-detail-pane, .cg-drawer, .fm-drawer {
width: 560px;
flex-shrink: 0;
border-left: 1px solid var(--border);
background: var(--card);
overflow-y: auto;
}
.inspector-head,
.rp-head, .fd-head, .td-head, .id-head {
padding: 20px 20px 0;
}
/* Library: keep a head→body separator (Library has no tab strip
below the head, so it needs its own divider). */
.rp-head {
padding: 20px 20px 16px;
border-bottom: 1px solid var(--border);
}
.inspector-title,
.rp-head h3, .fd-title, .td-title, .id-title {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
color: var(--text);
line-height: 1.35;
margin-bottom: 4px;
}
/* Hypothesis: no head-row block under the title, so it needs more
bottom space before the section content starts. */
.id-title { margin-bottom: 10px; }
.inspector-body,
.rp-body, .fd-body, .td-body {
padding: 16px 20px;
}
/* Tricks: keep the visual rule between head and body. */
.td-body { border-top: 1px solid var(--border); }
.inspector-section,
.rp-section, .fd-section, .td-section, .id-section {
margin-bottom: 18px;
}
.inspector-section-label,
.rp-section h4, .fd-section h4, .td-section h4, .id-section-label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text3);
margin-bottom: 8px;
}
/* .id-section-label semantic colour modifiers (.why / .conditions /
.risks / .validation / .evidence) live in the Hypotheses section
below — they have higher specificity (0-2-0) and override this
base colour intentionally. */
/* ── Shared ObjectCard (object-card-v1) ──
* List-card chrome for the 4 workbench list pages: Library (.pc),
* Formula Families (.fc), Formal Tricks (.tkc), Research Hypotheses
* (.ic). Per the spec (OBJECT_CARD_V1_SPEC.md):
* - chrome only — no JS abstraction
* - each page keeps its own render function + field set
* - per-page semantic badges (Private Draft, confidence, transfer,
* critic) live in their own sections and override these where
* they intentionally diverge
* Claim Graph claim rows (.cg-*) are explicitly NOT included; they
* may get their own `claim-row-v1` later.
*/
.object-card,
.pc, .fc, .tkc, .ic, .cg-claim-card,
.fm-belief-card, .fm-bn-card, .fm-mf-card, .fm-lim-card, .fm-ec-card, .fm-ro-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.15s;
position: relative;
text-align: left;
}
.object-card:hover,
.pc:hover, .fc:hover, .tkc:hover, .ic:hover, .cg-claim-card:hover,
.fm-belief-card:hover, .fm-bn-card:hover, .fm-mf-card:hover,
.fm-lim-card:hover, .fm-ec-card:hover, .fm-ro-card:hover {
background: var(--card-hover);
border-color: #BCC5C1;
box-shadow: 0 1px 8px rgba(44, 46, 45, 0.06);
}
.object-card.is-selected,
.pc.selected, .fc.selected, .tkc.selected, .ic.selected, .cg-claim-card.selected,
.fm-belief-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(74, 124, 111, 0.15);
}
/* Card title — 14 / 600 / sans across all four lists. Per-page
line-clamp + .untitled fallback variants stay in their own
sections (they don't conflict with this base). */
.object-card-title,
.pc-title, .fc-name, .tkc-name, .ic-transfer-pair {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
}
/* Card meta line — 12 / text2 across all four lists. */
.object-card-meta,
.pc-meta, .fc-structure, .tkc-desc, .ic-idea {
font-size: 12px;
color: var(--text2);
line-height: 1.45;
}
/* Card chip / badge row — 5 px gap, wrap. */
.object-card-chiprow,
.pc-status, .fc-badges, .tkc-badges, .ic-badges {
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
}
/* ── Analysis Panel (reading-pipeline-entry-ux-v1) ──
* Surfaces existing LLM-gated analysis endpoints (Pass 0 / Merge /
* Claim Graph / Code Reading) on paperDetail. Chrome reuses tokens
* from inspector-section-v1 + object-card-v1 — no new colours.
*/
.analysis-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 10px 0 14px; }
.analysis-panel:empty { display: none; }
.analysis-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.analysis-panel-title { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); }
.analysis-rows { display: flex; flex-direction: column; gap: 6px; }
.analysis-row { display: grid; grid-template-columns: 16px 160px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px; }
.analysis-row[data-state="done"] { color: var(--text); }
.analysis-row[data-state="not-started"] { color: var(--text2); }
.analysis-row[data-state="running"],
.analysis-row[data-state="started"] { color: var(--text2); }
.analysis-row[data-state="failed"] { color: var(--text); }
.ar-dot { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border-radius: 50%; }
.ar-dot.ar-done { background: var(--accent-light); color: var(--accent); }
.ar-dot.ar-pending { background: transparent; color: var(--text3); }
.ar-dot.ar-running,
.ar-dot.ar-started { background: rgba(74, 124, 111, 0.18); color: var(--accent); animation: lip-pulse 1.2s ease-in-out infinite; }
.ar-dot.ar-failed { background: rgba(166, 80, 70, 0.12); color: #a65046; }
.ar-label { font-weight: 600; }
.ar-meta { font-size: 12px; color: var(--text2); }
.ar-error { font-size: 12px; color: #a65046; }
.ar-action-slot { text-align: right; }
.ar-action { font: 500 12px var(--font-sans); padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text2); cursor: pointer; transition: all 0.15s; }
.ar-action:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ar-action:disabled { opacity: 0.55; cursor: default; }
.ar-action.ar-link { text-decoration: none; }
/* ── sidebar-IA-v1 P1.3a: deep-link cards under the Analysis panel.
Per-paper navigational entries (currently just Claims & Evidence)
that point at deeper views like the global Claim Graph scoped to
the current paper. Disabled-looking ("--empty") variant shows when
the underlying data isn't extracted yet. */
.analysis-deep-links { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.analysis-link-card {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--card);
color: var(--text);
text-decoration: none;
transition: background 0.12s, border-color 0.12s;
}
.analysis-link-card:hover {
background: var(--accent-light);
border-color: rgba(74,124,111,0.22);
}
.analysis-link-card .alc-icon { display: inline-flex; color: var(--accent); }
.analysis-link-card .alc-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.analysis-link-card .alc-title { font-size: 13px; font-weight: 600; color: var(--text); }
.analysis-link-card .alc-sub { font-size: 11.5px; color: var(--text3); }
.analysis-link-card .alc-caret { font-size: 14px; color: var(--text3); transition: transform 0.12s, color 0.12s; }
.analysis-link-card:hover .alc-caret { color: var(--accent); transform: translateX(2px); }
.analysis-link-card--empty {
cursor: default;
opacity: 0.65;
background: transparent;
}
.analysis-link-card--empty:hover {
background: transparent;
border-color: var(--border);
}
.analysis-link-card .alc-icon--muted { color: var(--text3); }
.analysis-quota { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text3); }
/* Filter chips — single row */
.filter-chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip { padding: var(--d-chip-pad-y) 10px; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 11px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: all 0.12s; white-space: nowrap; flex-shrink: 0; }
.chip:hover { border-color: var(--text3); color: var(--text); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .chip-count { font-size: 10px; opacity: 0.7; margin-left: 2px; }
.chip-more-wrap { position: relative; flex-shrink: 0; }
.chip-more-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 4px; z-index: 20; min-width: 160px; }
.chip-more-wrap.open .chip-more-dropdown { display: block; }
.chip-more-item { display: block; width: 100%; text-align: left; padding: 6px 12px; border: none; background: none; font-size: 12px; font-family: var(--font-sans); color: var(--text2); cursor: pointer; border-radius: 5px; }
.chip-more-item:hover { background: var(--card-hover); color: var(--text); }
.chip-more-item.on { background: var(--text); color: var(--bg); }
/* Sort + result count + pager — single line */
.lib-count, .fam-count, .tk-count, .ideas-count { font-size: 11px; color: var(--text3); }
.lib-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.lib-toolbar select { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-family: var(--font-sans); color: var(--text2); background: transparent; cursor: pointer; }
.lib-pager-inline { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.lib-pager-inline button { min-width: 24px; height: 22px; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text2); font-size: 11px; cursor: pointer; font-family: var(--font-sans); }
.lib-pager-inline button:hover:not(:disabled) { border-color: var(--text3); color: var(--text); }
.lib-pager-inline button:disabled { opacity: 0.3; cursor: default; }
.lib-pager-inline .lpi-info { font-size: 11px; color: var(--text3); padding: 0 4px; white-space: nowrap; }
.lib-pager-inline .lpi-goto { width: 36px; height: 22px; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text); font-size: 11px; font-family: var(--font-sans); text-align: center; outline: none; margin-left: 2px; }
.lib-pager-inline .lpi-goto:focus { border-color: var(--accent); }
/* ── Paper Card (compact) ── */
/* .pc base / hover / selected are shared via object-card-v1 near
the top of this file. */
.pc-top { display: flex; align-items: flex-start; gap: 10px; }
.pc-main { flex: 1; min-width: 0; }
.pc-title-row { display: flex; align-items: flex-start; gap: 8px; }
/* Private Drafts v1 — visual marker for private rows */
.pc.pc-private { background: linear-gradient(to right, var(--accent-light), var(--card) 80px); border-color: rgba(89, 138, 124, 0.3); }
.pc-private-badge { display: inline-flex; flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; align-self: flex-start; margin-top: 2px; }
/* Draft Delete v1 — hover-revealed trash icon on private paper rows */
/* draft-delete-v1: trash icon sits inline next to the PRIVATE DRAFT
badge inside .pc-title-row (was absolute right:36 — collided with
the badge for the very paper it belongs to). Hover the icon to
fully highlight + accent-red. */
.pc-delete { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 2px; flex-shrink: 0; opacity: 0.55; padding: 3px 5px; border: none; background: transparent; color: var(--text3); cursor: pointer; border-radius: 5px; transition: all 0.15s; }
.pc:hover .pc-delete { opacity: 0.9; }
.pc-delete:hover { background: rgba(166, 80, 70, 0.12); color: #a65046; opacity: 1 !important; }
.pc-delete svg { display: block; }
/* Right-panel "Delete draft" link — only rendered for private drafts. */
.rp-delete-link { display: inline-flex; align-items: center; font: 500 11px var(--font-sans); padding: 3px 10px; border: 1px solid rgba(166, 80, 70, 0.3); background: transparent; color: #a65046; border-radius: 5px; cursor: pointer; transition: all 0.15s; }
.rp-delete-link:hover { background: rgba(166, 80, 70, 0.1); border-color: #a65046; }
/* draft-delete-v1: custom confirm modal — same shell as the
import-progress overlay so we never fall back to the native
browser confirm() dialog. */
.lib-confirm-sub { font: 500 13px/1.4 var(--font-sans); color: var(--text); margin-top: 6px; }
.lib-confirm-body { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 10px; }
.lib-confirm-danger { font: 500 13px var(--font-sans); padding: 6px 16px; border: 1px solid #a65046; background: #a65046; color: #fff; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.lib-confirm-danger:hover { background: #8a3e36; border-color: #8a3e36; }
/* ── Paper Chat (paper-chat-v1) ──
* Tab-mode chat panel grounded in a single paper. Lives inside
* #detailContent when the Chat tab is active. Reuses var(--card)
* / var(--border) / var(--accent-light) tokens — no new palette.
*/
/* paper-chat-typography-polish: scoped override of --font-sans
inside the chat surface. Inter first — same font alphaXiv uses;
has visibly more character than DM Sans (double-storey g/a,
tighter spacing, better hinting) at the same body size. Falls
back to system stack if the Inter web-font request fails.
Every nested rule that reads var(--font-sans) inherits this
scoped value, so we don't have to expand any of the existing
`font: ... var(--font-sans)` shorthands.
font-feature-settings turns on Inter's "tabular figures" +
stylistic alternates so digits / I / l look distinguishable —
the small details that read as "premium" vs "default sans". */
.paper-chat {
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, ui-sans-serif, sans-serif;
display: flex; flex-direction: column; height: 100%; min-height: 480px;
font-feature-settings: "cv11", "ss01", "ss03", "cv02";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.paper-chat-log { flex: 1; overflow-y: auto; padding: 12px 4px 16px; display: flex; flex-direction: column; gap: 36px; }
.paper-chat-empty { font: 400 13px var(--font-sans); color: var(--text3); padding: 32px 12px; text-align: center; line-height: 1.5; }
/* paper-chat-typography-polish (2026-05-24): visual-only refresh
of chat message rendering. No layout / behaviour changes. Goal
is alphaXiv-grade text quality on short replies — the bubble
should read as a polished assistant message, not a disabled
form field. */
/* Phase A11: --font-sans scoped to .paper-chat-msg* so the chat
message family is Inter regardless of which root container
the messages sit in (PaperChat reader: .paper-chat root has
this override too; Ask Graph #qsChat does not, so we set it
here for safety). font-feature-settings comes along to match
the polished typography PaperChat ships today. */
.paper-chat-msg, .paper-chat-msg-stages, .paper-chat-msg-actions {
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, ui-sans-serif, sans-serif;
font-feature-settings: "cv11", "ss01", "ss03", "cv02";
}
.paper-chat-msg { display: flex; flex-direction: column; gap: 5px; max-width: 92%; }
.paper-chat-msg-user { align-self: flex-end; }
.paper-chat-msg-assistant { align-self: flex-start; }
/* Role label — lighter weight, wider tracking, lower opacity so it
doesn't compete with the message text. */
.paper-chat-msg-role { font: 600 10.5px var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(45, 65, 58, 0.52); }
/* Assistant default — softer surface, no hard border, micro-
shadow for depth. 14.5px / 1.6 reads as proper assistant copy
instead of compact UI label text. */
.paper-chat-msg-body { font: 400 14.5px/1.6 var(--font-sans); color: #26342f; padding: 10px 14px; border: 1px solid rgba(30, 60, 50, 0.06); border-radius: 10px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 1px 2px rgba(20, 35, 30, 0.04); white-space: pre-wrap; word-break: break-word; }
/* User bubble — compact, tinted accent surface, slightly smaller
than assistant since user input is rarely paragraph-length.
Stays in Inter sans-serif (UI feel). */
.paper-chat-msg-user .paper-chat-msg-body {
font-size: 14px;
line-height: 1.5;
background: rgba(66, 125, 107, 0.12);
border: none;
box-shadow: none;
/* user-pill-hug-content (2026-05-29): the column flex parent
stretches every child to the widest sibling. The action row
under the pill (timestamp + copy + edit) is wider than a
short message like "你好哇", so the body was stretching to
the action-row width and rendering the text left-aligned in
a too-wide pill. Hug the pill to its own content so the
content sits tightly inside, and let the actions row do
whatever width it needs on its own. */
width: max-content;
max-width: 100%;
align-self: flex-end;
/* user-pill-snug (2026-05-29): trim the 10/14 inherited
padding down so the tint sits closer to the text — the
visual goal is "label" rather than "container." */
padding: 7px 12px;
}
/* paper-chat-typography-polish (Claude-style serif assistant):
the assistant reply gets a transitional serif (Source Serif 4
— free Tiempos-Text-likeness from Adobe via Google Fonts) so
the bubble reads as "an assistant writing to you", matching
the visual mode Claude / Anthropic uses on their chat surface.
Slightly larger size + looser line-height because serif body
needs the breathing room.
User bubbles stay in Inter sans-serif so the conversation has
a clear voice contrast and UI controls (composer, source
panel, refs strip) don't shift typeface mid-screen. */
/* S13 reasoning-panel-v1 (2026-05-29): ChatGPT-style collapsible
"Thinking" panel that sits between the stage strip and the
answer body. Hidden by default; the SSE thinking_delta handler
reveals it on first chunk and auto-collapses when the answer
is ready. Style intentionally subtle so it doesn't compete
with the answer text. */
.qs-reasoning {
margin: 4px 0 14px;
font: 400 13px/1.55 var(--font-sans);
color: var(--text2);
}
.qs-reasoning > .qs-reasoning-summary {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
list-style: none;
user-select: none;
padding: 2px 0;
color: var(--text3);
transition: color 0.12s ease;
}
.qs-reasoning > .qs-reasoning-summary:hover { color: var(--text2); }
.qs-reasoning > .qs-reasoning-summary::-webkit-details-marker { display: none; }
.qs-reasoning-icon {
width: 14px; height: 14px;
border-radius: 50%;
display: inline-block;
background:
radial-gradient(circle at 30% 30%, rgba(70,120,100,0.9), rgba(70,120,100,0.4) 60%, transparent 70%),
linear-gradient(135deg, rgba(120,160,140,0.7), rgba(70,120,100,0.5));
box-shadow: inset 0 0 0 1px rgba(20,40,30,0.08);
flex: none;
}
.qs-reasoning-label {
font-weight: 500;
letter-spacing: 0.01em;
}
.qs-reasoning[open] > .qs-reasoning-summary::after {
content: "▾";
margin-left: 4px;
font-size: 10px;
color: var(--text3);
}
.qs-reasoning:not([open]) > .qs-reasoning-summary::after {
content: "▸";
margin-left: 4px;
font-size: 10px;
color: var(--text3);
}
.qs-reasoning-body {
margin-top: 8px;
padding: 10px 14px;
border-left: 2px solid rgba(20,40,30,0.08);
background: rgba(245, 248, 246, 0.55);
border-radius: 0 6px 6px 0;
max-height: 280px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
font-family: "Source Serif 4", "Source Serif Pro", Tiempos, Georgia, serif;
font-size: 13.5px;
line-height: 1.6;
color: var(--text2);
}
.qs-reasoning-body::-webkit-scrollbar { width: 6px; }
.qs-reasoning-body::-webkit-scrollbar-thumb { background: rgba(20,40,30,0.12); border-radius: 3px; }
/* Claude-style: assistant replies are NOT in a bubble. No
background, no border, no shadow — just the typographically-
refined text sitting on the surface. The user pill on the
right + the left-aligned serif copy carry the role signal
without needing a "ASSISTANT" label or a frame. */
.paper-chat-msg-assistant .paper-chat-msg-body {
font-family: "Source Serif 4", "Source Serif Pro", Tiempos, "Libre Baskerville", Georgia, serif;
font-size: 15px;
line-height: 1.65;
font-feature-settings: "kern", "liga", "onum";
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* Rendered markdown inside assistant bubbles. Scoped to
.paper-chat-msg-body so the rules don't leak into other
workspace surfaces. Sans-serif for code / pre (Inter inherited
from .paper-chat root since they don't override), serif for
prose. */
/* answer-typography-v1 (2026-05-28): make the SYSTEM_PROMPT's
"## Answer / ## Coverage / ## Key evidence / ## What to
inspect next" template land as visually distinct sections
rather than four near-identical lines. h2 carries a hairline
top rule so the user can see at a glance where one section
ends and the next begins; h2/h3 use the assistant's serif
face so they sit naturally inside the prose. List markers
muted, list spacing breathes more, hr is a soft fade, code
pieces sit on a slightly rounder cushion. */
.paper-chat-msg-body p { margin: 0 0 8px; }
.paper-chat-msg-body p:last-child { margin-bottom: 0; }
/* Tier label paragraph (e.g. "**In corpus** · 28 篇") — tagged by
chatSurface.js post-process when the matches the narrow
regex ``X · NN ``. Visually a subheader:
smaller, muted, collapsed gap to the list below. */
.paper-chat-msg-body p.md-tier-label {
margin-top: 14px;
margin-bottom: 2px;
font-size: 14px;
color: var(--text2);
}
.paper-chat-msg-body p.md-tier-label + ol.md-ol,
.paper-chat-msg-body p.md-tier-label + ul.md-ul {
margin-top: 0;
}
.paper-chat-msg-body h1.md-h1,
.paper-chat-msg-body h2.md-h2,
.paper-chat-msg-body h3.md-h3 {
font-family: inherit;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--text);
/* GPT-style spacing: heading sits tight to the content below;
section breathing comes from margin-top, not from padding +
horizontal divider. */
margin: 22px 0 6px;
}
.paper-chat-msg-body h1.md-h1:first-child,
.paper-chat-msg-body h2.md-h2:first-child,
.paper-chat-msg-body h3.md-h3:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.paper-chat-msg-body h1.md-h1 { font-size: 22px; }
.paper-chat-msg-body h2.md-h2 {
font-size: 19px;
margin-top: 28px;
}
.paper-chat-msg-body h3.md-h3 {
font-size: 16px;
margin-top: 20px;
}
.paper-chat-msg-body ul.md-ul,
.paper-chat-msg-body ol.md-ol {
margin: 8px 0 14px;
padding-left: 24px;
}
.paper-chat-msg-body ul.md-ul li,
.paper-chat-msg-body ol.md-ol li { margin: 4px 0; padding-left: 4px; }
/* Loose-list compactness — when the LLM separates list items with
blank lines, marked outputs ``...
`` and the p's
own margin stacks with the li margin, blowing up to ~30-50px gaps
between items. Collapse the inner p margin so the visible gap is
determined by the li margin alone. */
.paper-chat-msg-body li > p { margin: 0; }
.paper-chat-msg-body li > p + p { margin-top: 4px; }
.paper-chat-msg-body ul.md-ul li::marker { color: var(--text3); }
.paper-chat-msg-body ol.md-ol li::marker {
color: var(--text3);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.paper-chat-msg-body ul.md-ul li > p,
.paper-chat-msg-body ol.md-ol li > p { margin: 0 0 4px; }
.paper-chat-msg-body ul.md-ul ul.md-ul,
.paper-chat-msg-body ul.md-ul ol.md-ol,
.paper-chat-msg-body ol.md-ol ul.md-ul,
.paper-chat-msg-body ol.md-ol ol.md-ol { margin: 4px 0 4px; }
.paper-chat-msg-body strong { font-weight: 600; color: #1a2421; }
.paper-chat-msg-body em { font-style: italic; }
.paper-chat-msg-body del { text-decoration: line-through; color: var(--text3); }
.paper-chat-msg-body a.md-link {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(74, 124, 111, 0.4);
}
.paper-chat-msg-body a.md-link:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.paper-chat-msg-body code.md-code {
font-family: var(--font-mono);
font-size: 0.88em;
background: rgba(30, 60, 50, 0.06);
padding: 1px 5px;
border-radius: 4px;
border: 1px solid rgba(30, 60, 50, 0.05);
}
.paper-chat-msg-body pre.md-pre {
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.55;
background: rgba(30, 60, 50, 0.04);
border: 1px solid rgba(30, 60, 50, 0.08);
border-radius: 10px;
padding: 12px 14px;
margin: 12px 0;
overflow-x: auto;
white-space: pre;
}
.paper-chat-msg-body pre.md-pre code { background: transparent; padding: 0; border: 0; font-size: inherit; }
.paper-chat-msg-body blockquote.md-bq {
border-left: 3px solid rgba(74, 124, 111, 0.4);
background: rgba(74, 124, 111, 0.03);
padding: 8px 14px;
margin: 12px 0;
color: var(--text2);
border-radius: 0 8px 8px 0;
}
.paper-chat-msg-body blockquote.md-bq p:last-child { margin-bottom: 0; }
.paper-chat-msg-body hr.md-hr {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(30, 60, 50, 0.12), transparent);
margin: 26px 0;
}
/* md-table — GitHub-flavoured tables rendered by chatSurface.js
Step 5.5. Light borders, tight cell padding, header weight 600.
No zebra stripes — tool-agent answers use these for short lookup
matrices, not big data dumps. */
.paper-chat-msg-body table.md-table {
border-collapse: collapse;
margin: 10px 0 14px;
font-size: 13.5px;
line-height: 1.5;
width: auto;
max-width: 100%;
}
.paper-chat-msg-body table.md-table th,
.paper-chat-msg-body table.md-table td {
border: 1px solid rgba(30, 60, 50, 0.10);
padding: 5px 10px;
text-align: left;
vertical-align: top;
}
.paper-chat-msg-body table.md-table th {
font-weight: 600;
background: rgba(30, 60, 50, 0.04);
color: var(--text);
}
.paper-chat-msg-body table.md-table td {
color: var(--text);
}
/* arxiv-id muted (prose-style-answer-v1 Phase B): citation lineage
answers print "arxiv:2407.16655" inline after the bold title. Mute
it visually so the title stays the scan anchor — same trick GPT
uses where venue/year/id sit quieter than the work name. */
.paper-chat-msg-body .md-arxiv-id {
color: var(--text3);
font-size: 0.92em;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* verdict-chip — single-line **Bold** paragraphs (typically the
Coverage classification: Strong / Partial / Adjacent /
Insufficient) land here from the renderMarkdown rewrite. Soft
rounded backdrop, accent tint, tabular font so the label reads
as a categorical chip rather than a stray bold word. */
.paper-chat-msg-body .md-verdict {
display: inline-block;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--accent);
background: rgba(74, 124, 111, 0.10);
border: 1px solid rgba(74, 124, 111, 0.18);
padding: 4px 10px;
border-radius: 999px;
margin: 4px 0 12px;
line-height: 1.2;
}
/* Lower-priority classifications get visually muted variants so
"Insufficient" doesn't look as confident as "Strong". CSS
:is() lets us match by literal text content via a data-attr
set in JS — but since we don't post-process here, fall back
to a class assist. For now every chip uses the accent-tinted
default; future polish can add ``.md-verdict-warn`` etc. */
/* Per-message action bar — copy / 👍 / 👎 / retry. Lives under
assistant message bodies. Small, low-contrast, Claude-style:
the icons sit quietly and only assert themselves on hover. */
/* User-message action toolbar — sits under the user bubble on
the right side. Same icon family / size as the assistant
toolbar; only difference is justify-content so it hugs the
right edge below the green-tinted pill. */
.paper-chat-msg-actions-user {
justify-content: flex-end;
margin-left: 0;
margin-right: -2px;
}
/* user-pill-timestamp (2026-05-29): the moment-of-send label that
sits LEFT of the copy/edit icons in a user pill's action row.
Matches the icon row's muted gray weight so it reads as
metadata, not as content. */
.paper-chat-msg-sent-time {
font: 400 11.5px/1.4 var(--font-sans);
color: var(--text3);
margin-right: 6px;
font-variant-numeric: tabular-nums;
user-select: none;
}
/* paper-chat per-message action toolbar — Claude-style compact
set (copy / 👍 / 👎 / retry / more). Sits close to the message,
small enough to read as secondary affordances rather than a
permanent UI ribbon. Same hitbox/icon size on both user and
assistant rows so the two action trays read as siblings. */
.paper-chat-msg-actions { display: flex; align-items: center; gap: 2px; margin-top: -4px; margin-left: -2px; }
/* assistant-actions-breathe (2026-05-29): user-side default
(margin-top: -4px) sits ~1 px under the user pill — fine for a
short pill. Under a long assistant reply that's too tight;
give it a little more room. Tuned to 3 px margin so the
effective gap (5 px column-flex gap + 3 px) lands at ~8 px. */
.paper-chat-msg-assistant .paper-chat-msg-actions { margin-top: 3px; }
/* turn-actions-hover (2026-05-29): only the LAST turn's action
toolbar is always visible. Earlier turns keep the row layout
(visibility: hidden preserves the box, ``display: none`` would
pull the next turn up) but the icons + timestamp stay invisible
until the user hovers the message. Reduces visual noise in a
long chat without changing vertical rhythm.
The "last turn" is the last two ``.paper-chat-msg`` children of
``.qs-chat`` — i.e. the trailing user pill AND its assistant
reply, both kept on. Paper Chat surface (``.paper-chat-log``)
is not scoped here so its actions stay always-on. */
.qs-chat > .paper-chat-msg .paper-chat-msg-actions {
visibility: hidden;
}
.qs-chat > .paper-chat-msg:hover .paper-chat-msg-actions,
.qs-chat > .paper-chat-msg:last-child .paper-chat-msg-actions,
.qs-chat > .paper-chat-msg:nth-last-child(2) .paper-chat-msg-actions {
visibility: visible;
}
.paper-chat-msg-action {
width: 26px; height: 26px; padding: 0;
border: 0; border-radius: 6px;
background: transparent;
color: rgba(45, 51, 47, 0.72);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.12s, color 0.12s, transform 0.12s;
}
.paper-chat-msg-action svg { width: 14px; height: 14px; display: block; }
.paper-chat-msg-action:hover {
background: rgba(0, 0, 0, 0.055);
color: rgba(25, 29, 27, 0.9);
}
.paper-chat-msg-action:active { background: rgba(0, 0, 0, 0.09); }
/* qs-source-panel-per-turn-switch-v1: pill-shaped "Sources · N"
chip lives inside the actions row but is wider than the icon
buttons because it carries a count. Subtle accent so it reads as
an action, not a label. */
.qs-sources-chip {
width: auto;
padding: 0 9px;
gap: 5px;
font: 500 11.5px/1 var(--font-sans, system-ui);
color: rgba(45, 51, 47, 0.78);
border-radius: 8px;
}
.qs-sources-chip svg { width: 13px; height: 13px; opacity: 0.85; }
.qs-sources-chip:hover {
background: rgba(46, 124, 111, 0.07);
color: var(--accent, #2e7c6f);
}
.qs-sources-chip-label { letter-spacing: 0.02em; }
/* qs-source-panel-per-turn-switch-v1.1: removed the left-edge accent
line on .is-sources-active assistant rows — the right panel's
"For: " subtitle + the user's own chip click already make
attribution obvious, and a 4th visual signal was just noise in a
research-tool layout that should stay quiet. The JS still toggles
the .is-sources-active class so a future indicator (e.g. subtle
tint on a hover state) can plug in without touching the handler. */
/* "For: " subtitle under the right panel title when the user
has switched to a previous turn's sources. Small + dim so it
informs without dominating. */
.qs-right-subtitle {
font: 500 11.5px/1.35 var(--font-sans, system-ui);
color: var(--text3);
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
.paper-chat-msg-action.is-active { color: var(--accent); }
.paper-chat-msg-action.is-active:hover { background: var(--accent-light); color: var(--accent); }
/* Tiny scale-up flash on copy / more success. */
.paper-chat-msg-action.is-copied { color: var(--accent); transform: scale(1.12); }
/* Variant nav (‹ N / M ›) — sits inline in the action toolbar
right after the Regenerate button. Visible only when the
assistant has more than one variant for this turn (i.e. user
has clicked Regenerate at least once). */
.paper-chat-msg-variant-nav { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; }
.paper-chat-msg-variant-btn { width: 26px; height: 28px; border-radius: 6px; }
.paper-chat-msg-variant-btn svg { width: 14px; height: 14px; }
.paper-chat-msg-variant-btn.is-disabled { pointer-events: none; opacity: 0.35; }
.paper-chat-msg-variant-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 28px; padding: 0 6px;
font: 500 12px var(--font-sans); font-variant-numeric: tabular-nums;
color: rgba(45, 51, 47, 0.72);
user-select: none;
}
.paper-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; border-top: 1px solid var(--border); }
.paper-chat-input { flex: 1; resize: none; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font: 400 13px var(--font-sans); color: var(--text); line-height: 1.45; transition: border-color 0.2s, box-shadow 0.2s; }
.paper-chat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,124,111,0.12); }
.paper-chat-send { flex-shrink: 0; }
.paper-chat-signin { padding: 24px 12px; text-align: center; color: var(--text2); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
/* chat-reference-composer-v1 — compact reference card grid above
the composer. Each card is ~220 px wide so 1-2 fit a row and
3+ wrap. Folded mode renders each as a chip-tile (tag + ×)
plus a '+N more' button. */
.paper-chat-ref-strip { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px; }
.paper-chat-ref-strip-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10.5px var(--font-sans); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); padding: 0 2px; }
.paper-chat-ref-strip-label-parts { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paper-chat-ref-strip-label-text { color: var(--ref-text-fg); }
.paper-chat-ref-strip-label-image { color: var(--ref-image-fg); }
.paper-chat-ref-strip-label-sep { color: var(--text3); opacity: 0.7; }
.paper-chat-ref-strip-toggle-wrap { display: inline-flex; }
.paper-chat-ref-strip-toggle { border: 1px solid var(--border); background: transparent; color: var(--text2); font: 500 10.5px var(--font-sans); text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.paper-chat-ref-strip-toggle:hover { border-color: var(--accent); color: var(--accent); }
.paper-chat-ref-strip-cards { display: flex; flex-wrap: wrap; gap: 6px; }
/* Full-expand card (1-2 refs OR clicked Manage).
CHAT_REFERENCE_UI_SPEC.md §3 — 220 px / 260 px max / 1-line
ellipsis quote. Single-ref mode (parent has the -solo modifier)
gets to grow up to 340 px for a more comfortable 1-line read.
3 px left stripe carries the ref type (text vs image) — picked
up from --ref-text-accent / --ref-image-accent on the modifier. */
.paper-chat-ref-card-full {
position: relative;
display: flex; flex-direction: column; gap: 3px;
width: 220px; max-width: 260px; min-height: 42px;
padding: 6px 10px 8px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 9px;
overflow: hidden;
}
.paper-chat-ref-card-full::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--text3);
}
.paper-chat-ref-card-full.paper-chat-ref-card-text::before { background: var(--ref-text-accent); }
.paper-chat-ref-card-full.paper-chat-ref-card-img::before { background: var(--ref-image-accent); }
.paper-chat-ref-strip-cards.is-solo .paper-chat-ref-card-full { width: 340px; max-width: 340px; }
.paper-chat-ref-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.paper-chat-ref-card-tag { font: 600 10px var(--font-sans); text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); }
.paper-chat-ref-card-text .paper-chat-ref-card-tag { color: var(--ref-text-fg); }
.paper-chat-ref-card-img .paper-chat-ref-card-tag { color: var(--ref-image-fg); }
.paper-chat-ref-card-clear { border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.paper-chat-ref-card-clear:hover { background: rgba(166, 80, 70, 0.1); color: #a65046; }
.paper-chat-ref-card-quote { font: 400 11.5px/1.35 var(--font-sans); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-chat-ref-card-quote::before { content: '"'; opacity: 0.55; margin-right: 1px; }
.paper-chat-ref-card-quote::after { content: '"'; opacity: 0.55; margin-left: 1px; }
/* Chip-tile (3+ folded mode): tag + ×, no quote body. Token-tinted
per ref kind so the strip still carries identity at a glance. */
.paper-chat-ref-card-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 6px; cursor: default; }
.paper-chat-ref-card-chip.paper-chat-ref-card-text {
background: var(--ref-text-bg);
border: 1px solid var(--ref-text-border);
}
.paper-chat-ref-card-chip.paper-chat-ref-card-text .paper-chat-ref-card-tag { color: var(--ref-text-fg); }
.paper-chat-ref-card-chip.paper-chat-ref-card-img {
background: var(--ref-image-bg);
border: 1px dashed var(--ref-image-border);
}
.paper-chat-ref-card-chip.paper-chat-ref-card-img .paper-chat-ref-card-tag { color: var(--ref-image-fg); }
.paper-chat-ref-card-chip .paper-chat-ref-card-tag { font: 600 10.5px var(--font-sans); letter-spacing: 0.3px; text-transform: none; }
.paper-chat-ref-card-chip .paper-chat-ref-card-clear { padding: 0 2px; font-size: 13px; }
/* '+N more' button to expand folded view. */
.paper-chat-ref-card-more { display: inline-flex; align-items: center; padding: 4px 10px; background: transparent; border: 1px dashed var(--border); border-radius: 6px; color: var(--text2); font: 500 11px var(--font-sans); cursor: pointer; transition: all 0.15s; }
.paper-chat-ref-card-more:hover { border-color: var(--accent); color: var(--accent); }
/* User-message references footer (collapsed by default). */
/* Reference footer is attached to the user message bubble — keep
the same right-alignment so refs read as a property of the
bubble above, not a global system band. align-items:flex-end +
max-width matches the message bubble's 92 % constraint. */
.paper-chat-msg-refs { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 92%; align-self: flex-end; }
.paper-chat-msg-refs-toggle { border: none; background: transparent; padding: 0; cursor: pointer; font: 500 11px var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; text-align: right; }
.paper-chat-msg-refs-toggle:hover { text-decoration: underline; }
/* Expanded list: compact 2-col grid that wraps, max ~280 px per
card. Each card is single-line ellipsis on the quote so the
visual weight stays smaller than the question above. */
.paper-chat-msg-refs-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.paper-chat-msg-ref-card { display: flex; flex-direction: column; gap: 2px; width: 240px; max-width: 260px; padding: 6px 10px 7px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
/* Single-ref user-bubble: grow card to 320 px so the 1-line
quote has room without looking cramped. */
.paper-chat-msg-refs-list.is-solo .paper-chat-msg-ref-card { width: 320px; max-width: 340px; }
.paper-chat-msg-ref-tag { font: 600 10px var(--font-sans); text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); }
.paper-chat-msg-ref-quote { font: 400 11.5px/1.4 var(--font-sans); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-chat-msg-ref-quote::before { content: '"'; opacity: 0.5; }
.paper-chat-msg-ref-quote::after { content: '"'; opacity: 0.5; }
/* Phase 4C (unified-chat-sessions): assistant-message source
panel. Groups by scope — "Current paper" (local) above
"Global graph" (global). Lives under the bubble; cards are
compact so they don't compete with the answer text. */
.paper-chat-sources { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.paper-chat-src-group { display: flex; flex-direction: column; gap: 4px; }
.paper-chat-src-group-head { font: 600 10.5px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.paper-chat-src-group-empty .paper-chat-src-group-head { color: var(--text3); opacity: 0.7; font-weight: 500; }
.paper-chat-src-group-body { display: flex; flex-wrap: wrap; gap: 6px; }
.paper-chat-src-card { display: flex; flex-direction: column; gap: 2px; max-width: 320px; padding: 6px 10px 7px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.paper-chat-src-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.paper-chat-src-card-title { font: 600 11.5px var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.paper-chat-src-card-meta { font: 400 10.5px var(--font-mono, monospace); color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.paper-chat-src-card-snippet { font: 400 11.5px/1.4 var(--font-sans); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* paper-evidence-layer-v1: clickable evidence_atom cards. Hovering
nudges the border to make it clear the card is interactive; the
.is-cited class lights up the cards whose atom_id the model
actually emitted in its answer. */
.paper-chat-atom-card { transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }
.paper-chat-atom-card:hover { border-color: var(--accent, #3b82f6); background: var(--card-hover, rgba(59, 130, 246, 0.04)); }
.paper-chat-atom-card.is-cited { border-color: var(--accent, #3b82f6); background: var(--card-hover, rgba(59, 130, 246, 0.06)); box-shadow: 0 0 0 1px var(--accent, #3b82f6) inset; }
.paper-chat-atom-card.is-cited .paper-chat-src-card-title { color: var(--accent, #3b82f6); }
/* paper-chat-query-router-v1: collapsed-by-default source panel.
Phase 4C exploded every retrieved source under each assistant
message which drowned out the answer; v1 collapses to a single
summary row and lets the user expand on demand. */
.paper-chat-sources-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: fit-content; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text2); font: 500 11.5px var(--font-sans); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.paper-chat-sources-summary:hover { background: var(--accent-light); border-color: rgba(74,124,111,0.25); color: var(--accent); }
.paper-chat-sources-summary-text { white-space: nowrap; }
.paper-chat-sources-caret { width: 12px; height: 12px; opacity: 0.7; flex-shrink: 0; transition: transform 0.12s; }
.paper-chat-sources-caret.is-open { transform: rotate(0deg); }
.paper-chat-sources.is-collapsed { margin-top: 8px; }
.paper-chat-sources.is-expanded { margin-top: 8px; }
.paper-chat-sources.is-expanded .paper-chat-sources-summary { margin-bottom: 8px; }
/* paper-chat-inline-quote-tokens (2026-05-23) — replaced the
per-quote chip cards with a compact reference strip above the
textarea. Each pending [Quote #N] is one pill (#N · p.X ·
short preview · ×). Hover the pill for the full quote via the
native title attribute. The actual quote insertion happens in
the textarea as the `[Quote #N]` token at the cursor. */
.paper-chat-input-stack { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 4px; }
.paper-chat-quote-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.paper-chat-quote-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 4px 6px 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); font: 400 12px var(--font-sans); color: var(--text2); }
.paper-chat-quote-ref-tag { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.paper-chat-quote-ref-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text2); }
.paper-chat-quote-ref-clear { border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.paper-chat-quote-ref-clear:hover { color: #a65046; }
/* paper-chat-attachments-v1 — image thumbnail above the composer. */
.paper-chat-attach-preview { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.paper-chat-attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.paper-chat-attach-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paper-chat-attach-name { font: 500 13px var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-chat-attach-size { font: 400 11px var(--font-sans); color: var(--text3); }
.paper-chat-attach-clear { border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
.paper-chat-attach-clear:hover { background: rgba(166,80,70,0.1); color: #a65046; }
/* 📎 attach + 📷 crop — interactive icon pills with tactile feedback:
accent ring on hover, faint accent fill, and a 4% press scale so the
click has a clear "thunk". */
.paper-chat-tool-attach,
.paper-chat-tool-crop {
cursor: pointer;
color: var(--text2);
}
.paper-chat-tool-attach:hover,
.paper-chat-tool-crop:hover {
background: var(--accent-light);
border-color: var(--accent);
color: var(--accent);
}
/* Press feedback — same solid-accent treatment as crop's armed
state so both icon pills feel like the same "selected" gesture
when clicked. attach has no persistent mode, so this lives on
:active and lasts only during the click. */
.paper-chat-tool-attach:active,
.paper-chat-tool-crop:active {
transform: scale(0.94);
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.paper-chat-tool-attach:active svg,
.paper-chat-tool-crop:active svg { stroke: #fff; }
/* "Active" state shared across the three toolbar interactives:
crop (while in crop mode), attach (while the native file picker
is open), and Search (while web-search toggle is on). All read
as the same "selected" gesture — solid accent fill, white icon
/ label, soft accent glow — so the toolbar's interaction
language stays consistent. */
.paper-chat-tool-attach.is-armed,
.paper-chat-tool-attach.is-armed:hover,
.paper-chat-tool-attach.is-armed:focus-visible,
.paper-chat-tool-crop.is-armed,
.paper-chat-tool-crop.is-armed:hover,
.paper-chat-tool-crop.is-armed:focus-visible,
.paper-chat-tool-search.is-on,
.paper-chat-tool-search.is-on:hover,
.paper-chat-tool-search.is-on:focus-visible {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 3px var(--accent-light);
}
.paper-chat-tool-attach.is-armed svg,
.paper-chat-tool-crop.is-armed svg,
.paper-chat-tool-search.is-on svg { stroke: #fff; }
/* Keyboard focus uses the same accent treatment as :hover instead of
a hard outline ring. The ring would render as an ugly oval on the
round icon button and lingered after Esc cancel. */
.paper-chat-tool-attach:focus-visible,
.paper-chat-tool-crop:focus-visible {
outline: none;
background: var(--accent-light);
border-color: var(--accent);
color: var(--accent);
}
/* Toast shown while the user is in PDF crop mode. */
/* Crop mode affordance — multi-line hint card pinned inside the
PDF panel. Together with the solid-accent crop button this is
enough to signal "you're in capture mode"; an extra ring around
the PDF panel was tried and pulled — Apryse's web component
covers the inset shadow, and stacking another absolute overlay
for that one purpose was busier than helpful. */
#pdfPanel { position: relative; }
.pdf-crop-toast {
position: absolute;
left: 50%;
/* Apryse's top toolbar (View / Annotate / Shapes / …) is ~56 px
tall and lives inside the web component's shadow DOM, so we
can't measure it from outside CSS. 76 px lands the hint inside
the PDF white-page area with a comfortable gap. */
top: 76px;
transform: translate(-50%, -10px);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 300px;
padding: 12px 18px 14px;
background: var(--accent-light);
border: 1px solid rgba(74, 124, 111, 0.38);
border-radius: 12px;
letter-spacing: 0.1px;
box-shadow: 0 10px 28px rgba(74, 124, 111, 0.22);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 12;
text-align: center;
}
.pdf-crop-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pdf-crop-toast-title {
display: inline-flex; align-items: center; gap: 8px;
font: 700 13px var(--font-sans);
letter-spacing: 0.2px;
color: var(--accent);
}
/* Primary action — what the user should DO now, the loudest line. */
.pdf-crop-toast-action {
font: 600 13px var(--font-sans);
color: var(--text);
}
/* Secondary line — exit paths. Quiet but legible. */
.pdf-crop-toast-cancel {
font: 400 11.5px var(--font-sans);
color: var(--text2);
}
.pdf-crop-toast-icon { width: 14px; height: 14px; opacity: 0.95; }
/* Inline keycap glyph for `Esc`. */
.pdf-crop-keycap {
display: inline-flex; align-items: center;
padding: 1px 6px;
margin-right: 3px;
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
background: rgba(255,255,255,0.85);
font: 500 10.5px var(--font-mono);
color: var(--text);
line-height: 1.35;
}
/* paper-chat-v1.2 — empty-state hero (alphaxiv-style) and round send button. */
/* chat-panel-affordance-v1 — empty-state hero. Lifts the right
panel from "quiet side panel" to "ask workspace" with a title,
subtitle, and a 2-col grid of click-through action cards. */
.paper-chat-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 56px 16px 16px;
max-width: 460px;
margin: 0 auto;
text-align: center;
}
.paper-chat-hero-icon { color: var(--accent); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.paper-chat-hero-icon svg { width: 40px; height: 40px; }
.paper-chat-hero-title {
font: 700 18px/1.3 var(--font-serif);
color: var(--text);
margin: 2px 0 0;
}
.paper-chat-hero-subtitle {
font: 400 12.5px/1.5 var(--font-sans);
color: var(--text2);
max-width: 360px;
margin: 0 0 6px;
}
.paper-chat-hero-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin-top: 8px;
}
/* Information-only cards: no hover, no arrow, no click affordance.
They describe the three input modes; the actual entry points live
on the toolbar (📎 / crop) and on the PDF text-selection itself. */
.paper-chat-hero-card {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
padding: 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.78);
}
.paper-chat-hero-card-full { grid-column: 1 / -1; }
.paper-chat-hero-card-icon { color: var(--accent); display: inline-flex; align-items: center; margin-bottom: 2px; }
.paper-chat-hero-card-icon svg { width: 18px; height: 18px; }
.paper-chat-hero-card-title { font: 600 13px var(--font-sans); color: var(--text); }
.paper-chat-hero-card-body { font: 400 12px/1.5 var(--font-sans); color: var(--text2); }
/* Starter prompt chips — light, scannable suggestions to lower the
"what should I ask?" friction. Click drops the phrase into the
composer (caret at end) so the user can edit + send. */
.paper-chat-hero-starters {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-top: 14px;
width: 100%;
}
.paper-chat-hero-starters-label {
font: 500 10.5px var(--font-sans);
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.paper-chat-hero-starters-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.paper-chat-starter-chip {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.62);
color: var(--text2);
border-radius: 999px;
padding: 5px 11px;
font: 500 11.5px var(--font-sans);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.paper-chat-starter-chip:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255, 255, 255, 0.92);
}
.paper-chat-starter-chip:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-light);
color: var(--accent);
}
/* Round send button overrides the earlier .paper-chat-send (which
was a rectangular accent button). The new button is a 36 px
circle with an arrow icon, mirroring the alphaxiv pill. */
.paper-chat-send {
width: 36px; height: 36px;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: var(--accent);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0;
box-shadow: 0 4px 12px rgba(74, 124, 111, 0.32);
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.paper-chat-send:hover {
background: #3a6657;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(74, 124, 111, 0.42);
}
.paper-chat-send:active { transform: scale(0.96); box-shadow: 0 3px 8px rgba(74, 124, 111, 0.32); }
.paper-chat-send svg { width: 18px; height: 18px; }
/* alphaxiv-style composer card: textarea on top, action chip row +
send pill on the bottom. The chip pills are disabled placeholders
— they each carry an explicit `title="…coming soon"` so a curious
user gets a clear answer rather than clicking into dead air. */
/* Composer — promoted to a clear "primary write surface": white-ish
background, slightly tinted border, depth shadow at rest, stronger
accent ring on focus. */
.paper-chat-composer {
/* S15.12 — Claude-style ambient glow. Four-layer box-shadow:
① 1px hairline ring (replaces the visible border so the card
edge stays even without a hard line)
② close shadow for the slight "lifted off the surface" feel
③ mid-distance soft glow that wraps the left/right edges
④ far-field diffuse halo
Alphas all <0.08 so the effect reads as light, not a drop
shadow. Border kept transparent because layer ① IS the border. */
border: 1px solid transparent;
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
padding: 10px 12px;
display: flex; flex-direction: column; gap: 8px;
box-shadow:
0 0 0 1px rgba(28, 58, 47, 0.10),
0 2px 6px rgba(28, 58, 47, 0.05),
0 12px 28px -4px rgba(28, 58, 47, 0.09),
0 32px 64px -8px rgba(28, 58, 47, 0.08);
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
/* S15.13 — same fix as .qs-input-card: keep default ambient glow
on focus, no green ring. */
.paper-chat-composer:focus-within {
box-shadow:
0 0 0 1px rgba(28, 58, 47, 0.10),
0 2px 6px rgba(28, 58, 47, 0.05),
0 12px 28px -4px rgba(28, 58, 47, 0.09),
0 32px 64px -8px rgba(28, 58, 47, 0.08);
}
.paper-chat-composer .paper-chat-input { border: none; background: transparent; padding: 6px 4px 2px; font: 400 14px var(--font-sans); color: var(--text); resize: none; line-height: 1.6; min-height: 38px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.paper-chat-composer .paper-chat-input:focus { outline: none; box-shadow: none; }
.paper-chat-composer .paper-chat-input::placeholder { color: var(--text3); }
/* paper-chat-atomic-quote-tokens — contenteditable placeholder
(data-placeholder is shown only when the input is empty). */
.paper-chat-composer .paper-chat-input[contenteditable]:empty::before {
content: attr(data-placeholder);
color: var(--text3);
pointer-events: none;
}
/* Reference chips. Both share the same shape; identity is carried
by the --ref-text-* / --ref-image-* token families. text = sage
green solid, img = slate blue dashed.
contenteditable=false on the span means the browser treats each
chip as a single deletable unit (one Backspace = whole chip). */
.paper-chat-quote-token,
.paper-chat-img-token {
display: inline-flex; align-items: center;
padding: 1px 8px; margin: 0 3px;
font: 600 12px var(--font-sans);
border-radius: 4px;
user-select: none;
cursor: default;
vertical-align: baseline;
line-height: 1.45;
white-space: nowrap;
}
.paper-chat-quote-token {
color: var(--ref-text-fg);
background: var(--ref-text-bg);
border: 1px solid var(--ref-text-border);
}
.paper-chat-quote-token:hover { background: var(--ref-text-bg-hover); }
.paper-chat-img-token {
color: var(--ref-image-fg);
background: var(--ref-image-bg);
border: 1.5px dashed var(--ref-image-border);
}
.paper-chat-img-token:hover { background: var(--ref-image-bg-hover); }
.paper-chat-ref-card-thumb {
margin-top: 2px;
display: block;
width: 100%;
height: 54px;
border-radius: 6px;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
}
.paper-chat-ref-card-thumb img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.paper-chat-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 0 2px;
/* paper-detail-narrow-fit: composer toolbar lives in
``.detail-right`` (flex panel), so it narrows with zoom or
splitter drag. Allow the send button to drop below the tool
chips when the row can't fit on one line. ``.paper-chat-tools``
already wraps its own children, but at very narrow widths a
single wide chip (e.g. the model picker) can still push the
send button off-screen unless the toolbar itself wraps. */
flex-wrap: wrap;
}
.paper-chat-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.paper-chat-tool { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-sans); color: var(--text2); background: transparent; border: 1px solid var(--border); padding: 5px 10px; border-radius: 18px; cursor: default; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s ease; }
.paper-chat-tool:disabled { opacity: 0.72; cursor: not-allowed; }
.paper-chat-tool:hover { background: rgba(74,124,111,0.06); }
.paper-chat-tool svg { width: 14px; height: 14px; }
.paper-chat-tool-caret { width: 11px !important; height: 11px !important; opacity: 0.75; }
.paper-chat-tool-icon { padding: 5px 6px; border-radius: 50%; }
.paper-chat-tool-icon svg { width: 16px; height: 16px; }
/* Search pill — neutral when off; the .is-on "active" treatment is
defined in the shared toolbar-active rule above so it matches
attach + crop. */
.paper-chat-tool-search { cursor: pointer; color: var(--text2); border-color: var(--border); background: transparent; }
.paper-chat-tool-search:hover { background: rgba(74,124,111,0.06); border-color: var(--accent); color: var(--accent); }
/* Make sure the round send button stays right-aligned in the toolbar. */
.paper-chat-toolbar .paper-chat-send { margin-left: auto; }
/* paper-chat-model-picker-v1 — Smart pill is now interactive. The
nth-of-type(3) Search highlight earlier in this file would catch
it if it stayed in the same row. Use an explicit .paper-chat-smart
class so the Search styling targets only Search. */
.paper-chat-tool-wrap { position: relative; display: inline-flex; }
/* S15.26 → S15.28 — Ask Graph model picker: ghost button, sits
right of the composer next to the send circle. Label bumped to
14.5px so it doesn't feel like a tiny tool tag. */
.paper-chat-tool.paper-chat-smart { color: var(--text2); border: none; background: transparent; cursor: pointer; padding: 5px 6px; font-size: 14.5px; }
.paper-chat-tool.paper-chat-smart:hover { background: transparent; color: var(--accent); }
.paper-chat-tool.paper-chat-smart:disabled { opacity: 0.72; cursor: not-allowed; }
.paper-chat-tool.paper-chat-smart .paper-chat-tool-caret { width: 18px; height: 18px; margin-left: -2px; }
/* S15.6 picker — verbatim spec from the user's HTML mock:
280px wide, soft mint background, hairline border, no blur,
compact rows with inline tag. The previous custom CSS block
below (`.paper-chat-smart-row` etc.) is no longer rendered by
the Ask Graph picker; it's kept in place for backward compat
with the paper-chat picker which still uses the old class
names. The new picker uses `.menu-item / .item-content /
.main-text / .tag / .check-icon / .divider`. */
.paper-chat-smart-menu { position: absolute; bottom: calc(100% + 6px); left: 0; width: 280px; background-color: #f4f9f5; border: 1px solid #e5e5e5; border-radius: 12px; padding: 8px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 60; }
.paper-chat-smart-menu .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; cursor: pointer; font-size: 14.5px; transition: background-color 0.2s ease; }
.paper-chat-smart-menu .menu-item:hover { background-color: #e8efe9; }
.paper-chat-smart-menu .item-content { display: flex; align-items: baseline; gap: 6px; }
.paper-chat-smart-menu .main-text { color: #1a1a1a; font-weight: 400; }
.paper-chat-smart-menu .tag { color: #888; font-size: 14px; font-weight: 400; }
.paper-chat-smart-menu .divider { height: 1px; background-color: #f0f0f0; margin: 4px 0; }
.paper-chat-smart-menu .check-icon { width: 16px; height: 16px; fill: none; stroke: #1a1a1a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.paper-chat-smart-menu .menu-item.selected .check-icon { display: block; }
.paper-chat-smart-menu[hidden] { display: none; }
.paper-chat-smart-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font: 600 12px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.paper-chat-smart-head svg { width: 14px; height: 14px; }
.paper-chat-smart-list { display: flex; flex-direction: column; gap: 1px; }
.paper-chat-smart-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; cursor: pointer; border-radius: 8px; font: 500 13px var(--font-sans); color: var(--text); text-align: left; transition: background 0.12s; width: 100%; }
.paper-chat-smart-item:hover { background: rgba(74,124,111,0.08); }
/* Legacy paper-chat picker keeps its own selection rule because it
renders flat .paper-chat-smart-item rows without the .paper-chat-
smart-row wrapper that the Ask Graph picker now uses. */
.paper-chat-smart-item.is-selected { background: var(--accent-light); }
.paper-chat-smart-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.paper-chat-smart-icon svg { width: 18px; height: 18px; }
/* S15.5 Cursor clone — inline label+descriptor, hairline groups,
selected = ✓ only (no background tint), hover-only soft tint.
No section labels: position carries the grouping (Smart Auto,
then pinned, then enabled, then footer; all separated by thin
hairlines, like Cursor's model picker). */
.paper-chat-smart-row { display: flex; align-items: stretch; border-radius: 8px; transition: background 0.12s; min-height: 36px; }
.paper-chat-smart-row:hover { background: rgba(70, 112, 100, 0.055); }
.paper-chat-smart-row.is-selected { background: transparent; }
.paper-chat-smart-row.is-selected:hover { background: rgba(70, 112, 100, 0.055); }
.paper-chat-smart-row .paper-chat-smart-item { flex: 1; background: transparent; padding: 0 12px; display: flex; align-items: baseline; gap: 0; min-width: 0; min-height: 36px; }
.paper-chat-smart-row .paper-chat-smart-item:hover { background: transparent; }
.paper-chat-smart-row .paper-chat-smart-label { flex: 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px var(--font-sans); color: #1f2d28; }
/* Inline descriptor — sits one space after the model name, light
grey, same baseline. ``margin-left: auto`` is gone; the descriptor
"Balanced" / "Long ctx" reads as part of the name phrase. */
.paper-chat-smart-meta { font: 400 14.5px var(--font-sans); color: rgba(31, 45, 40, 0.40); white-space: nowrap; margin-left: 6px; }
/* Check slot — fixed 18px, pinned to the right edge. */
.paper-chat-smart-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: #3f786a; font: 600 14px var(--font-sans); margin-left: auto; padding-left: 12px; }
/* Hairline between the major sections (Search ↑↓ Smart Auto
↑↓ Models ↑↓ Add Models). Same dim contrast as the menu border. */
.paper-chat-smart-divider { height: 1px; margin: 6px 8px; background: rgba(28, 43, 38, 0.08); }
/* Legacy section head kept defined for the paper-chat picker that
still emits CHOOSE A MODEL caps row, but the Ask Graph picker no
longer renders it. */
.paper-chat-smart-sectionhead { font: 600 11px var(--font-sans); color: rgba(31, 45, 40, 0.42); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 12px 4px; margin-top: 10px; }
/* Pin button — 28px slot, hover-only. Smart Auto uses a spacer
of the same width so its text column lines up with model rows. */
.paper-chat-smart-pin { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; border: none; background: transparent; color: var(--text3); cursor: pointer; border-radius: 6px; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; }
.paper-chat-smart-row:hover .paper-chat-smart-pin { opacity: 1; }
.paper-chat-smart-pin:hover { color: var(--accent); background: rgba(70, 112, 100, 0.10); }
.paper-chat-smart-pin.is-pinned { color: var(--accent); }
.paper-chat-smart-pin-spacer { pointer-events: none; opacity: 0 !important; }
/* Search row — ghost input, no border / no capsule, hairline below. */
.paper-chat-smart-search { display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(28, 43, 38, 0.08); margin-bottom: 4px; height: 40px; }
.paper-chat-smart-search input { flex: 1; border: none; outline: none; background: transparent; font: 400 14.5px var(--font-sans); color: #1f2d28; padding: 0; height: 40px; line-height: 40px; }
.paper-chat-smart-search input::placeholder { color: rgba(31, 45, 40, 0.46); }
/* No-match placeholder. */
.paper-chat-smart-empty { padding: 14px 12px; font: 400 12.5px var(--font-sans); color: rgba(31, 45, 40, 0.46); text-align: center; }
/* Add Models footer — compact, low contrast. The top hairline is
rendered separately so it shares the same width/colour as the
in-list dividers. */
.paper-chat-smart-manage { display: block; width: 100%; padding: 0 12px; border: none; background: transparent; cursor: pointer; border-radius: 8px; font: 500 13px var(--font-sans); color: rgba(31, 45, 40, 0.55); text-align: left; height: 36px; line-height: 36px; }
.paper-chat-smart-manage:hover { background: rgba(70, 112, 100, 0.055); color: #1f2d28; }
/* ── Manage Models modal ─────────────────────────────────────────
Full-screen overlay so it doesn't fight the composer's tight
vertical space. */
.qs-manage-backdrop { position: fixed; inset: 0; background: rgba(20,32,28,0.45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.qs-manage-card { background: var(--card); border-radius: 14px; box-shadow: 0 20px 60px rgba(20,32,28,0.18); width: 520px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.qs-manage-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 4px; }
.qs-manage-title { font: 600 17px var(--font-sans); margin: 0; color: var(--text); }
.qs-manage-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--text3); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.qs-manage-close:hover { color: var(--text); background: rgba(0,0,0,0.05); }
.qs-manage-sub { font: 400 12.5px var(--font-sans); color: var(--text3); padding: 0 22px 14px; }
.qs-manage-body { flex: 1; overflow-y: auto; padding: 0 14px 8px; }
.qs-manage-sec { margin-bottom: 12px; }
.qs-manage-sechead { font: 600 11px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.qs-manage-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; transition: background 0.12s; }
.qs-manage-row:hover { background: rgba(74,124,111,0.05); }
.qs-manage-enable { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; padding: 6px 0; font: 500 13.5px var(--font-sans); color: var(--text); min-width: 0; }
.qs-manage-en-cb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.qs-manage-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qs-manage-icon svg { width: 18px; height: 18px; }
.qs-manage-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-manage-meta { font: 500 11.5px var(--font-sans); color: var(--text3); margin-left: auto; flex-shrink: 0; }
.qs-manage-pin { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text3); cursor: pointer; border-radius: 6px; flex-shrink: 0; }
.qs-manage-pin:hover { color: var(--accent); background: rgba(74,124,111,0.10); }
.qs-manage-pin.is-pinned { color: var(--accent); }
.qs-manage-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--border); }
.qs-manage-cancel { padding: 7px 14px; font: 500 13px var(--font-sans); background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 8px; cursor: pointer; }
.qs-manage-cancel:hover { background: rgba(0,0,0,0.03); }
.qs-manage-apply { padding: 7px 16px; font: 500 13px var(--font-sans); background: var(--accent); border: 1px solid var(--accent); color: white; border-radius: 8px; cursor: pointer; }
.qs-manage-apply:hover { background: #3d6a5e; border-color: #3d6a5e; }
/* Official brand colours (simple-icons.org). Each brand sits in its
own so currentColor
picks the right hue. */
.paper-chat-brand { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--text2); }
.paper-chat-brand.brand-anthropic { color: #D97757; } /* Claude burnt orange */
.paper-chat-brand.brand-openai { color: #000000; } /* OpenAI black */
.paper-chat-brand.brand-gemini { color: #4285F4; } /* Gemini Google blue */
.paper-chat-smart-label { flex: 1; }
.paper-chat-smart-tier { font: 600 9px var(--font-sans); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; background: var(--bg); color: var(--text3); }
.paper-chat-smart-tier-fast { background: rgba(74,124,111,0.12); color: var(--accent); }
.paper-chat-smart-tier-smart { background: rgba(89,138,124,0.18); color: var(--accent); }
.paper-chat-smart-tier-max { background: rgba(166,80,70,0.12); color: #a65046; }
[data-theme="dark"] .pc.pc-private { background: linear-gradient(to right, rgba(89, 138, 124, 0.16), var(--card) 80px); border-color: rgba(89, 138, 124, 0.35); }
/* .pc-title font is shared via object-card-v1; keep page-specific
flex + 2-line clamp for Paper titles. */
.pc-title { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-title.untitled { font-family: var(--font-mono); font-size: 13px; color: var(--text2); font-weight: 500; }
.pc-rl-badge { flex-shrink: 0; font-size: 9.5px; padding: 2px 7px; border-radius: 4px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; margin-top: 2px; }
.pc-rl-badge.base { background: var(--level-base); color: var(--level-base-t); }
.pc-rl-badge.reuse { background: var(--level-reuse); color: var(--level-reuse-t); }
.pc-rl-badge.adv { background: var(--level-adv); color: var(--level-adv-t); }
/* .pc-meta font/colour is shared via object-card-v1; keep page-
specific margin + single-line overflow ellipsis for Library. */
.pc-meta { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta .pc-authors { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline; }
.pc-year { font-weight: 600; color: var(--accent); }
.pc-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--text3); letter-spacing: -0.02em; }
.pc-abstract { font-size: 12px; color: var(--text3); line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* .pc-status base flex/gap/align shared via object-card-v1; keep
margin-top for Library row layout. */
.pc-status { margin-top: 5px; }
.pc-status .tag { font-size: 10px; padding: 1px 7px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.pc-status .tag.ov-gen { background: var(--overlay-gen); color: var(--overlay-gen-t); }
.pc-status .tag.ov-partial { background: var(--overlay-stale); color: var(--overlay-stale-t); }
.pc-status .tag.ov-miss { background: var(--bg); color: var(--text3); border: 1px solid var(--border); }
.pc-status .tag.claims { background: var(--overlay-reused); color: var(--overlay-reused-t); }
.pc-status .tag.stat { font-weight: 500; color: var(--text3); background: none; padding: 0; font-size: 10px; }
.pc-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); opacity: 0; transition: opacity 0.15s; }
.pc:hover .pc-arrow { opacity: 1; }
/* ── Right Panel ── */
/* .rp-head / .rp-body / .rp-section / .rp-section h4 share the
inspector-section-v1 chrome at the top of this file. */
.rp-kv { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.rp-kv .k { color: var(--text2); }
.rp-kv .v { color: var(--text); font-weight: 500; }
.rp-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.rp-tab { padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font-sans); background: none; border-top: none; border-left: none; border-right: none; transition: color 0.12s; }
.rp-tab:hover { color: var(--text); }
.rp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rp-empty { text-align: center; padding: 60px 20px; color: var(--text3); font-size: 13px; }
.rp-empty svg { display: block; margin: 0 auto 12px; opacity: 0.3; }
/* Quick action buttons */
.rp-action { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text2); transition: all 0.12s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-sans); }
.rp-action:hover { background: var(--bg-warm); color: var(--text); }
.rp-action svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.5; }
/* ── Paper list scrollable area ── */
.lib-scroll { padding: 8px 40px 20px; max-width: 980px; }
/* Hero toast — non-blocking notice (visibility mismatch, etc.) */
.hero-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-size: 12.5px; max-width: 480px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,0.18); opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 1100; pointer-events: none; }
.hero-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .hero-toast { background: rgba(232, 232, 230, 0.95); color: var(--bg); }
/* ── Import progress card (centered overlay, dismissible) ── */
.lib-import-progress-host { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.lib-import-progress-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(245, 246, 244, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-theme="dark"] .lib-import-progress-overlay { background: rgba(18, 22, 20, 0.55); }
.lib-import-progress-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 35, 30, 0.18); padding: 22px 26px; width: 460px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); overflow-y: auto; }
.lip-head { margin-bottom: 18px; }
.lip-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.lip-title-error { color: #a65046; }
.lip-paper-title { font-size: 13.5px; color: var(--text); margin: 6px 0; line-height: 1.45; }
.lip-sub { font-size: 12px; color: var(--text3); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.lip-sub-secondary { font-size: 11px; color: var(--text3); font-family: var(--font-mono); margin-top: 3px; opacity: 0.75; }
.lip-arxiv-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: 0.3px; font-family: var(--font-sans); }
.lip-probing { display: flex; align-items: center; gap: 12px; padding: 18px 4px 8px; }
.lip-probing .pdf-dl-spinner { width: 22px; height: 22px; flex-shrink: 0; }
.lip-probing-text { font-size: 13px; color: var(--text2); }
.lip-vis-banner { margin-top: 12px; padding: 8px 12px; background: var(--accent-light); border: 1px solid rgba(89, 138, 124, 0.25); border-radius: 6px; font-size: 12px; color: var(--accent); line-height: 1.45; }
[data-theme="dark"] .lip-vis-banner { background: rgba(89, 138, 124, 0.16); border-color: rgba(89, 138, 124, 0.3); color: #b6d4c9; }
.lip-hint { font-size: 12px; color: var(--text2); margin-top: 8px; line-height: 1.5; }
.lip-error-detail { font-size: 12px; color: #a65046; margin-top: 10px; padding: 8px 10px; background: rgba(166, 80, 70, 0.08); border-radius: 6px; line-height: 1.45; }
.lip-steps { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 18px; padding: 12px 14px; background: var(--bg-warm); border-radius: 9px; }
.lip-step { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.lip-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.lip-pending .lip-mark { color: var(--text3); }
.lip-pending .lip-label { color: var(--text3); }
.lip-running { background: rgba(89, 138, 124, 0.22); border-left: 3px solid var(--accent); border-radius: 4px; padding: 6px 10px; margin: 4px -10px 4px -13px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.lip-running .lip-mark { color: var(--accent); animation: lip-pulse 1.2s ease-in-out infinite; }
.lip-running .lip-label { color: var(--text); font-weight: 600; }
[data-theme="dark"] .lip-running { background: rgba(89, 138, 124, 0.28); }
.lip-done .lip-mark { color: #2a7; }
.lip-done .lip-label { color: var(--text2); }
.lip-error .lip-mark { color: #a65046; }
.lip-error .lip-label { color: #a65046; font-weight: 500; }
@keyframes lip-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.lip-actions { display: flex; gap: 10px; justify-content: flex-end; }
.lip-secondary { font-size: 12.5px; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--text2); cursor: pointer; transition: all 0.15s; }
.lip-secondary:hover { border-color: var(--text3); color: var(--text); }
/* Private Drafts v1 — visibility picker on PDF upload */
.lip-vis-options { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.lip-vis-option { position: relative; text-align: left; padding: 12px 14px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--card); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.lip-vis-option:hover { border-color: var(--accent); background: var(--bg-warm); }
.lip-vis-option.lip-vis-private { border-color: rgba(89, 138, 124, 0.4); background: var(--accent-light); }
.lip-vis-option.lip-vis-private:hover { border-color: var(--accent); }
.lip-vis-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.lip-vis-desc { font-size: 11.5px; color: var(--text2); line-height: 1.45; }
.lip-vis-badge { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: 0.4px; }
[data-theme="dark"] .lip-vis-option.lip-vis-private { background: rgba(89, 138, 124, 0.12); }
/* ── arXiv candidates panel (shown above paper list during library search) ── */
.lib-arxiv-candidates { display: none; margin: 4px 0 14px; padding: 12px 14px 8px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; }
/* Two-stage candidate sections — high-confidence "title match" pops with
* an accent tint, broader fallback row is muted so the user can tell
* at-a-glance which suggestions to trust more. */
.lib-arxiv-section--title { background: var(--accent-light); border: 1px solid rgba(89, 138, 124, 0.25); border-radius: 8px; padding: 10px 12px 6px; margin: -4px -2px 10px; }
.lib-arxiv-section--title .lib-arxiv-label { color: var(--accent); }
.lib-arxiv-section--title .lib-arxiv-row:hover { background: rgba(255,255,255,0.55); }
.lib-arxiv-section--broader { padding: 2px 2px 0; }
.lib-arxiv-section--broader .lib-arxiv-label { color: var(--text3); }
.lib-arxiv-section--broader .lib-arxiv-row { opacity: 0.85; }
.lib-arxiv-section--broader .lib-arxiv-row:hover { opacity: 1; }
.lib-arxiv-section--broader .lib-arxiv-action { background: transparent; color: var(--accent); }
.lib-arxiv-section--broader .lib-arxiv-action:hover { background: var(--accent-light); }
[data-theme="dark"] .lib-arxiv-section--title { background: rgba(89, 138, 124, 0.14); border-color: rgba(89, 138, 124, 0.3); }
[data-theme="dark"] .lib-arxiv-section--title .lib-arxiv-row:hover { background: rgba(255,255,255,0.04); }
/* Related-papers mode (local hits already shown above): step back visually
so it reads as a supplementary section instead of the primary action. */
.lib-arxiv-candidates.related { background: transparent; border-style: dashed; margin-top: 18px; }
.lib-arxiv-candidates.related .lib-arxiv-action { background: transparent; color: var(--accent); }
.lib-arxiv-candidates.related .lib-arxiv-action:hover { background: var(--accent-light); }
.lib-arxiv-candidates.importing { opacity: 0.6; pointer-events: none; }
.lib-arxiv-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text2); margin-bottom: 8px; }
.lib-arxiv-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 7px; transition: background 0.12s; }
.lib-arxiv-row:hover { background: var(--card); }
.lib-arxiv-row + .lib-arxiv-row { border-top: 1px solid var(--border); }
.lib-arxiv-main { flex: 1; min-width: 0; }
.lib-arxiv-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-arxiv-meta { font-size: 11px; color: var(--text3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-arxiv-action { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; transition: all 0.12s; }
.lib-arxiv-action:hover { opacity: 0.88; }
[data-theme="dark"] .lib-arxiv-candidates { background: rgba(255,255,255,0.03); }
/* Stagger animation */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pc { animation: fadeSlideIn 0.25s ease both; }
.table-body-render table { border-collapse: collapse; width: 100%; font-size: 11px; }
.table-body-render th, .table-body-render td { border: 1px solid var(--border); padding: 3px 6px; text-align: left; }
.table-body-render th { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); font-weight: 600; font-size: 10px; }
.table-body-render tr:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
/* ── Formula Families ── */
:root {
--fam-high: #3D7A56; --fam-high-bg: #DAE8D5;
--fam-med: #6B7A3D; --fam-med-bg: #E8EACC;
--fam-low: #8A6B35; --fam-low-bg: #F0E5D2;
--fam-role-canon: #2C2E2D; --fam-role-variant: #7B9BB4;
--fam-role-distill: #C4956B; --fam-role-eff: #6EAA7F;
--fam-role-app: #9B8AAF; --fam-role-bench: #6EA09A;
--fam-role-bg: #95A5A6; --fam-role-unclear: #BDC3C7;
}
#v-families.active { display: block; height: 100vh; overflow: hidden; }
#v-families .fam-shell { display: flex; height: 100%; overflow: hidden; }
.fam-list-pane { flex: 1; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* .fam-detail-pane width / border / bg / overflow are shared by the
inspector-section-v1 .inspector-pane rule near the top of this file. */
.fam-detail-pane.collapsed { width: 0; overflow: hidden; opacity: 0; }
/* .fam-header / .fam-title-row / .fam-search shape is shared by
the page-header-v1 rules near the top of this file. */
.fam-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.fam-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.fam-toolbar select { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-family: var(--font-sans); color: var(--text2); background: transparent; cursor: pointer; }
.fam-scroll { padding: 8px 40px 20px; max-width: 980px; }
/* Family card (list) */
/* .fc base / hover / selected are shared via object-card-v1. The
fadeSlideIn entrance animation is kept as a Family-specific
nicety. */
.fc { animation: fadeSlideIn 0.25s ease both; }
.fc-top { display: flex; align-items: flex-start; gap: 10px; }
.fc-id { font-family: var(--font-mono); font-size: 9px; color: var(--text3); position: absolute; top: 8px; right: 12px; }
.fc-main { flex: 1; min-width: 0; position: relative; }
/* .fc-name font is shared via object-card-v1; keep page-specific
line-clamp. */
.fc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* .fc-structure font/colour shared via object-card-v1; keep page-
specific margin + 2-line clamp. */
.fc-structure { margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* .fc-badges base flex/gap/align shared via object-card-v1; keep
margin-top for Family row layout. */
.fc-badges { margin-top: 8px; }
.fc-badge { display: inline-flex; align-items: center; font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.fc-badge.conf-high { background: var(--fam-high-bg); color: var(--fam-high); }
.fc-badge.conf-medium { background: var(--fam-med-bg); color: var(--fam-med); }
.fc-badge.conf-low { background: var(--fam-low-bg); color: var(--fam-low); }
.fc-badge.super { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent); }
.fc-badge.stat { font-weight: 500; color: var(--text3); background: none; padding: 0; }
.fc-badge.quality-good { background: var(--fam-high-bg); color: var(--fam-high); }
.fc-badge.quality-needs_review { background: var(--fam-low-bg); color: var(--fam-low); }
/* Family detail pane */
/* .fd-head padding is shared via inspector-section-v1. */
.fd-back { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text3); font-family: var(--font-sans); padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.fd-back:hover { color: var(--text); }
/* .fd-title font is shared via inspector-section-v1 (.inspector-title). */
.fd-id { font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.fd-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.fd-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.fd-tab { padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border: none; border-bottom: 2px solid transparent; font-family: var(--font-sans); background: none; transition: color 0.12s; }
.fd-tab:hover { color: var(--text); }
.fd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* .fd-body padding is shared via inspector-section-v1. */
.fd-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fd-expand { border: 1px solid var(--border); background: var(--bg); cursor: pointer; padding: 5px 7px; border-radius: 6px; color: var(--text3); display: flex; align-items: center; transition: all 0.15s; }
.fd-expand:hover { color: var(--accent); border-color: var(--accent); background: rgba(74,124,111,0.06); }
/* Full-page family detail */
#v-family-detail.active, #v-trick-detail.active, #v-idea-detail.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.ffd-topbar { display:flex; align-items:center; gap:12px; padding:10px 24px; border-bottom:1px solid var(--border); flex:0 0 auto; background:var(--bg); position:sticky; top:0; z-index:50; }
.ffd-topbar .ffd-back { border:none; background:none; cursor:pointer; color:var(--text2); display:flex; align-items:center; gap:4px; font-size:12px; font-family:var(--font-sans); padding:4px 0; }
.ffd-topbar .ffd-back:hover { color:var(--text); }
.ffd-topbar .ffd-title { font-family:var(--font-serif); font-size:15px; font-weight:700; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ffd-content { flex:1; overflow-y:auto; padding:0; background:var(--bg); }
.ffd-content .fd-head { padding:28px 48px 0; max-width:960px; margin:0 auto; }
.ffd-content .fd-head .fd-back, .ffd-content .td-head .td-back { display:none; }
.ffd-content .fd-expand, .ffd-content .fd-head-row { display:none; }
.ffd-content .fd-title { font-size:22px; }
.ffd-content .fd-id { font-size:12px; }
.ffd-content .fd-tabs { padding:0 48px; max-width:960px; margin:0 auto; }
.ffd-content .fd-body { padding:20px 48px; max-width:960px; margin:0 auto; }
.ffd-content .ev-breadcrumb { max-width:960px; margin:0 auto; padding:0 48px; }
.ffd-content .td-head, .ffd-content .id-head { padding:28px 48px 0; max-width:960px; margin:0 auto; }
.ffd-content .td-head .td-back, .ffd-content .id-head .id-back { display:none; }
.ffd-content .td-title { font-size:22px; }
.ffd-content .id-title { font-size:18px; font-weight:600; }
.ffd-content .td-body { padding:20px 48px; max-width:960px; margin:0 auto; }
.ffd-content .ghc-section, .ffd-content .id-section { padding:0 48px; max-width:960px; margin:0 auto; }
/* .fd-section margin + .fd-section h4 label are shared via
inspector-section-v1. */
.fd-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.fd-kv:last-child { border-bottom: none; }
.fd-kv .k { color: var(--text2); }
.fd-kv .v { color: var(--text); font-weight: 500; text-align: right; max-width: 60%; }
.fd-text { font-size: 13px; color: var(--text2); line-height: 1.6; }
.fd-text em { font-style: italic; color: var(--text); }
/* Variant cards */
.vr-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
.vr-type { font-size: 12px; font-weight: 600; color: var(--text); }
.vr-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.vr-kws { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.vr-kw { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); font-family: var(--font-mono); }
/* Mechanism Card */
.mech-card-section { background: color-mix(in srgb, var(--accent) 3%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border)); border-radius: 10px; padding: 14px 16px !important; }
.mc-pattern { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; line-height: 1.5; margin-bottom: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); border-radius: 6px; border-left: 3px solid var(--accent); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 12px; }
.mc-field { display: flex; flex-direction: column; gap: 2px; }
.mc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); }
.mc-val { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.mc-role-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent); font-weight: 600; width: fit-content; }
.mc-maturity-foundational { color: var(--fam-high); }
.mc-maturity-established { color: var(--text); }
.mc-maturity-emerging { color: var(--fam-med); }
.mc-maturity-experimental { color: var(--fam-low); }
.mc-tricks { margin-bottom: 10px; }
.mc-trick-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mc-trick { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, var(--bg)); color: var(--text2); font-family: var(--font-mono); line-height: 1.5; }
.mc-deriv { margin-bottom: 10px; }
.mc-deriv-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.mc-deriv-node { font-size: 11px; padding: 3px 8px; border-radius: 5px; background: var(--card); border: 1px solid var(--border); color: var(--text); line-height: 1.4; }
.mc-deriv-start { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mc-deriv-end { border-color: var(--fam-high); color: var(--fam-high); font-weight: 600; }
.mc-deriv-arrow { color: var(--text3); font-size: 12px; flex-shrink: 0; }
.mc-transfer { margin-bottom: 10px; }
.mc-tp-item { padding: 6px 10px; margin-top: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.mc-tp-domain { font-size: 11px; font-weight: 600; color: var(--accent); display: block; margin-bottom: 2px; }
.mc-tp-hyp { font-size: 12px; color: var(--text); line-height: 1.5; }
.mc-tp-risk { display: block; font-size: 11px; color: var(--fam-low); margin-top: 2px; }
.mc-assumptions { margin-bottom: 6px; }
.mc-assumption-list { margin: 4px 0 0 16px; padding: 0; }
.mc-assumption-list li { font-size: 12px; color: var(--text2); line-height: 1.6; margin-bottom: 2px; }
/* Timeline */
.tl-wrap { position: relative; padding-left: 20px; }
.tl-wrap::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1.5px; background: var(--border); }
.tl-entry { position: relative; margin-bottom: 12px; animation: fadeSlideIn 0.3s ease both; }
.tl-dot { position: absolute; left: -20px; top: 5px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); z-index: 1; }
.tl-dot.canon { background: var(--fam-role-canon); border-color: var(--fam-role-canon); }
.tl-dot.variant { background: var(--fam-role-variant); border-color: var(--fam-role-variant); }
.tl-dot.distillation { background: var(--fam-role-distill); border-color: var(--fam-role-distill); }
.tl-dot.efficiency_improvement { background: var(--fam-role-eff); border-color: var(--fam-role-eff); }
.tl-dot.application { background: var(--fam-role-app); border-color: var(--fam-role-app); }
.tl-dot.benchmark_adaptation { background: var(--fam-role-bench); border-color: var(--fam-role-bench); }
.tl-dot.background { background: var(--fam-role-bg); border-color: var(--fam-role-bg); }
.tl-dot.unclear { background: var(--card); border-color: var(--fam-role-unclear); border-style: dashed; }
.tl-year { font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-bottom: 1px; }
.tl-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.tl-role { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 3px; margin-top: 2px; font-weight: 600; letter-spacing: 0.02em; }
.tl-role.canon { background: color-mix(in srgb, var(--fam-role-canon) 12%, var(--bg)); color: var(--fam-role-canon); }
.tl-role.variant { background: color-mix(in srgb, var(--fam-role-variant) 10%, var(--bg)); color: var(--fam-role-variant); }
.tl-role.distillation { background: color-mix(in srgb, var(--fam-role-distill) 10%, var(--bg)); color: var(--fam-role-distill); }
.tl-role.efficiency_improvement { background: color-mix(in srgb, var(--fam-role-eff) 10%, var(--bg)); color: var(--fam-role-eff); }
.tl-role.application { background: color-mix(in srgb, var(--fam-role-app) 10%, var(--bg)); color: var(--fam-role-app); }
.tl-role.benchmark_adaptation { background: color-mix(in srgb, var(--fam-role-bench) 10%, var(--bg)); color: var(--fam-role-bench); }
.tl-role.background { background: color-mix(in srgb, var(--fam-role-bg) 8%, var(--bg)); color: var(--fam-role-bg); }
.tl-role.unclear { background: var(--bg); color: var(--fam-role-unclear); border: 1px dashed var(--fam-role-unclear); }
.tl-evidence { font-size: 11px; color: var(--text3); margin-top: 2px; font-style: italic; }
.tl-cites { font-size: 10px; color: var(--text3); margin-top: 1px; font-family: var(--font-mono); }
.tl-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.tl-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text3); }
.tl-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Limitation callouts */
.lim-box { background: color-mix(in srgb, var(--fam-low-bg) 60%, var(--bg)); border: 1px solid color-mix(in srgb, var(--fam-low) 20%, var(--border)); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
.lim-box p { font-size: 12px; color: var(--fam-low); line-height: 1.5; margin: 0; }
.lim-box p::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--fam-low); color: #fff; font-size: 10px; font-weight: 700; margin-right: 6px; vertical-align: text-bottom; }
/* Keyword pills */
.kw-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.kw-pill { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); font-family: var(--font-mono); font-weight: 400; }
/* Symbol display */
.sym-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.sym-pill { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 5%, var(--bg)); color: var(--text); font-family: var(--font-mono); }
/* Member table */
.mem-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 12px; }
.mem-row:last-child { border-bottom: none; }
.mem-pid { font-family: var(--font-mono); font-size: 11px; color: var(--accent); flex-shrink: 0; min-width: 100px; cursor: pointer; }
.mem-pid:hover { text-decoration: underline; }
.mem-title { flex: 1; min-width: 0; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-type { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--bg-warm); color: var(--text3); font-weight: 500; flex-shrink: 0; }
/* No-lineage notice */
.no-lineage { text-align: center; padding: 20px; color: var(--text3); font-size: 12px; font-style: italic; }
/* Pattern badge */
.pattern-badge { font-size: 11px; padding: 3px 10px; border-radius: 5px; font-weight: 500; display: inline-block; }
.pattern-badge.canonical_to_variants { background: color-mix(in srgb, var(--fam-role-canon) 10%, var(--bg)); color: var(--fam-role-canon); }
.pattern-badge.parallel_variants { background: color-mix(in srgb, var(--fam-role-variant) 10%, var(--bg)); color: var(--fam-role-variant); }
.pattern-badge.application_spread { background: color-mix(in srgb, var(--fam-role-app) 10%, var(--bg)); color: var(--fam-role-app); }
.pattern-badge.unclear { background: var(--bg-warm); color: var(--text3); }
/* ── Dashboard ── */
.dash { padding: 0 40px 60px; max-width: 1200px; margin: 0 auto; }
/* Hero — Minimal Command Entry */
.dash-header { background: linear-gradient(180deg, #FAFBF9 0%, var(--bg) 100%); border: 1px solid rgba(45,60,50,0.08); border-radius: 14px; padding: 32px 48px 26px; margin-bottom: 18px; text-align: center; }
@media (max-width: 900px) { .dash-header { padding: 26px 24px 20px; } }
.dash-header h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--text); margin-bottom: 0; letter-spacing: -0.02em; line-height: 1.2; }
.dash-header h1 .hero-accent { background: linear-gradient(90deg, #3a9e8a, #5a9abf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
@media (max-width: 640px) { .dash-header h1 { font-size: 24px; } }
.hero-subtitle { font-size: 13px; line-height: 1.6; color: var(--text3); max-width: 520px; margin: 10px auto 20px; }
.hero-cmd-box { position: relative; margin: 0 auto; max-width: 720px; }
input.hero-cmd-input { width: 100%; padding: 14px 92px 14px 20px; border-radius: 10px; background: var(--bg-warm); color: var(--text); font-size: 14px; font-family: var(--font-sans); outline: none; transition: background 0.2s, box-shadow 0.2s; -webkit-appearance: none; }
.hero-cmd-input::placeholder { color: var(--text3); }
.hero-cmd-input:focus { background: var(--card); box-shadow: 0 0 0 2px var(--accent); }
.hero-cmd-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--accent); border: none; border-radius: 7px; padding: 6px 7px; cursor: pointer; color: #fff; transition: all 0.15s; display: flex; align-items: center; }
.hero-cmd-submit:hover { opacity: 0.85; }
.hero-cmd-suggestions {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
max-height: 320px;
overflow-y: auto;
padding: 6px;
background: rgba(252, 255, 252, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(78, 116, 100, 0.18);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(20, 35, 30, 0.10);
z-index: 20;
}
.hero-cmd-box:focus-within .hero-cmd-suggestions:not(:empty) { display: block; }
/* When the box is focused (and the suggestions popover may be
open) the prefix-chip row underneath would visually collide
with the popover's first row. The chips serve as an idle-state
hint — once the user is actively searching they're noise.
Use ``visibility: hidden`` (not ``display: none``) so the row
keeps its layout space — the hero block's overall height
stays constant when toggling focus and the dashboard below
doesn't jump up by ~36 px. ``.hero-cmd-hint`` is a SIBLING
of ``.hero-cmd-box``, so the ~ combinator is what targets it
from the box's focus-within. */
.hero-cmd-box:focus-within ~ .hero-cmd-hint {
visibility: hidden;
pointer-events: none;
}
/* ── R5a: chat input dimension hint — clickable prefix chips
──────────────────────────────────────────────────────────────
Sits below the hero command box. Subtle by default; the chips
come alive on hover. Each chip prepends its prefix to the
query input (see heroInsertPrefix in app2.js), which is the
R5b prefix-routing surface for "focus search on tricks /
hypotheses / families / chronicle / claims". */
.hero-cmd-hint {
position: relative;
z-index: 30; /* sit above .hero-cmd-suggestions (z=20) so chips
stay clickable when the input has focus and the
suggestions popover is open. */
margin: 8px auto 0;
max-width: 720px;
padding: 0 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--text3);
}
.hero-cmd-hint-label {
font-size: 11px;
color: var(--text3);
letter-spacing: 0.2px;
user-select: none;
margin-right: 2px;
}
.hero-cmd-hint-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
line-height: 1.4;
}
.hero-cmd-hint-chip:hover {
background: var(--accent-light);
border-color: rgba(74,124,111,0.25);
color: var(--accent);
}
.hero-cmd-hint-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.cmd-section { padding: 4px 0; }
.cmd-section + .cmd-section { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.cmd-section-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text3);
padding: 4px 12px 6px;
}
.cmd-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 40px;
padding: 0 10px;
border-radius: 9px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
color: var(--text);
font-family: inherit;
transition: background 0.12s, color 0.12s;
}
.cmd-item:hover, .cmd-item.is-active { background: var(--accent-light); }
.cmd-item:hover .cmd-title, .cmd-item.is-active .cmd-title { color: var(--accent); }
.cmd-icon {
flex: 0 0 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
}
.cmd-item:hover .cmd-icon, .cmd-item.is-active .cmd-icon { color: var(--accent); }
.cmd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; }
.cmd-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-subtitle { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cmd-shortcut { font-size: 10px; color: var(--text3); padding: 2px 6px; border-radius: 5px; background: var(--bg-warm); font-family: var(--font-mono, monospace); }
.cmd-chip-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
.cmd-chip-row-label { font-size: 11px; color: var(--text3); padding: 0 4px 0 6px; font-weight: 500; }
.cmd-chip {
font-size: 12px;
padding: 5px 11px;
border-radius: 999px;
background: var(--bg-warm);
color: var(--text2);
border: 1px solid var(--border);
cursor: pointer;
font-family: inherit;
transition: all 0.12s;
}
.cmd-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.cmd-warn-card { padding: 12px 14px; margin: 4px; border-radius: 10px; background: #FBEEEA; border: 1px solid #F0D5CE; }
.cmd-warn-title { font-size: 11px; font-weight: 700; color: #A65046; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.cmd-warn-desc { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.cmd-warn-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cmd-warn-action { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 6px; border: 1px solid #A65046; background: #A65046; color: #fff; cursor: pointer; transition: all 0.15s; font-family: var(--font-sans); }
.cmd-warn-action:hover { background: #8C3F36; border-color: #8C3F36; }
.cmd-warn-action.cmd-warn-secondary { background: transparent; color: #A65046; }
.cmd-warn-action.cmd-warn-secondary:hover { background: rgba(166,80,70,0.08); }
[data-theme="dark"] .cmd-warn-action { background: #E8A097; border-color: #E8A097; color: #1a1a1a; }
[data-theme="dark"] .cmd-warn-action:hover { background: #d18a82; }
[data-theme="dark"] .cmd-warn-action.cmd-warn-secondary { background: transparent; color: #E8A097; }
[data-theme="dark"] .cmd-warn-action.cmd-warn-secondary:hover { background: rgba(232,160,151,0.12); }
[data-theme="dark"] .hero-cmd-suggestions { background: rgba(28, 33, 31, 0.92); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cmd-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cmd-warn-card { background: rgba(166,80,70,0.12); border-color: rgba(166,80,70,0.3); color: #E8A097; }
[data-theme="dark"] .cmd-warn-title { color: #E8A097; }
[data-theme="dark"] .cmd-shortcut { background: rgba(255,255,255,0.06); }
.hero-modes { display: flex; gap: 4px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.hero-mode { padding: 4px 11px; border-radius: 6px; font-size: 11px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: all 0.15s; border: none; background: transparent; color: var(--text3); }
.hero-mode:hover { color: var(--accent); }
.hero-mode.active { background: var(--accent); color: #fff; font-weight: 600; border-radius: 6px; }
/* Mode picker — Elicit-style chip that hangs off the hero search box's
bottom-left corner. Default mode = Research assistant (LLM). The
dropdown menu opens upward so it doesn't push the dashboard body. */
.hero-mode-picker { position: relative; margin: 0 auto 8px; max-width: 720px; padding-left: 4px; z-index: 30; }
.hmp-btn { display: inline-flex; align-items: center; gap: 7px;
padding: 5px 9px 5px 8px; border-radius: 8px;
border: 1px solid rgba(78, 116, 100, 0.18);
background: var(--card); color: var(--text2);
font-size: 12px; font-weight: 500; font-family: var(--font-sans);
cursor: pointer; transition: all 0.15s;
box-shadow: 0 1px 2px rgba(20, 35, 30, 0.04); }
.hmp-btn:hover { border-color: rgba(78, 116, 100, 0.35); color: var(--accent); }
.hmp-btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
.hmp-btn-label { font-weight: 500; }
.hmp-btn-caret { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.18s; }
.hero-mode-picker.is-open .hmp-btn-caret { transform: rotate(180deg); }
.hero-mode-picker.is-open .hmp-btn { border-color: var(--accent); color: var(--accent); }
.hmp-menu { display: none; position: absolute; top: calc(100% + 6px); left: 4px;
min-width: 320px; padding: 6px;
background: rgba(252, 255, 252, 0.98);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(78, 116, 100, 0.18); border-radius: 12px;
box-shadow: 0 12px 28px rgba(20, 35, 30, 0.12);
z-index: 25; }
.hero-mode-picker.is-open .hmp-menu { display: block; }
.hmp-item { display: flex; align-items: flex-start; gap: 10px;
width: 100%; padding: 9px 10px; border-radius: 8px;
background: transparent; border: none; cursor: pointer; text-align: left;
color: var(--text); font-family: var(--font-sans);
transition: background 0.12s; }
.hmp-item + .hmp-item { margin-top: 2px; }
.hmp-item:hover { background: rgba(78, 116, 100, 0.08); }
.hmp-item.is-active { background: rgba(78, 116, 100, 0.06); }
.hmp-item-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
color: var(--text3); }
.hmp-item.is-active .hmp-item-icon { color: var(--accent); }
.hmp-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hmp-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.hmp-item-desc { font-size: 11px; color: var(--text3); line-height: 1.3; }
.hmp-item-check { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
color: var(--accent); opacity: 0; transition: opacity 0.12s; }
.hmp-item.is-active .hmp-item-check { opacity: 1; }
[data-theme="dark"] .hmp-btn { background: #232926; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hmp-menu { background: rgba(28, 33, 31, 0.96);
border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hmp-item:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .hmp-item.is-active { background: rgba(255, 255, 255, 0.03); }
.hero-stats { display: none; }
.hero-graph { display: none; }
/* Knowledge Stack pipeline */
.kstack { display: flex; align-items: stretch; gap: 0; margin-bottom: 0; overflow-x: auto; padding: 4px 0; }
.kstack-node { flex: 1; min-width: 120px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: var(--d-card-pad) var(--d-card-pad-x); text-align: center; position: relative; cursor: pointer; transition: all 0.15s; }
.kstack-node:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(74,124,111,0.08); }
.kstack-arrow { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; color: var(--text3); font-size: 14px; opacity: 0.4; }
.kstack-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 4px; }
.kstack-label { font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.kstack-desc { font-size: 10px; color: var(--text3); line-height: 1.4; }
.kstack-dot { width: 6px; height: 6px; border-radius: 50%; margin: 0 auto 8px; }
.kstack-dot.c-paper { background: #4A7C6F; }
.kstack-dot.c-evidence { background: #4A7C6F; }
.kstack-dot.c-claim { background: #607080; }
.kstack-dot.c-family { background: #8B6FB0; }
.kstack-dot.c-trick { background: #6E8A5A; }
.kstack-dot.c-hypothesis { background: #B8913A; }
@media (max-width: 800px) { .kstack { flex-wrap: wrap; gap: 8px; } .kstack-arrow { width: 20px; } .kstack-node { min-width: 100px; } }
.dash-section { margin-bottom: var(--d-section-gap); }
.dash-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text2); margin-bottom: 14px; padding-bottom: 8px; border-bottom: none; display: flex; align-items: center; gap: 8px; }
.dash-section-title svg { width: 14px; height: 14px; opacity: 0.4; }
/* Metric cards */
.dash-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dash-metric { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; transition: all 0.15s; cursor: default; }
.dash-metric:hover { box-shadow: 0 2px 12px rgba(45,43,40,0.06); }
.dash-metric .dm-value { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.dash-metric .dm-label { font-size: 12px; color: var(--text2); margin-top: 2px; }
.dash-metric .dm-sub { font-size: 10px; color: var(--text3); margin-top: 4px; font-family: var(--font-mono); }
.dash-metric.clickable { cursor: pointer; }
.dash-metric.clickable:hover { border-color: var(--accent); }
/* Graph Snapshot cards (was Pipeline Health) */
.dash-health { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .dash-health { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dash-health { grid-template-columns: 1fr; } }
.health-group { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; border-top: 3px solid var(--border); }
.health-group.accent-evidence { border-top-color: #4A7C6F; }
.health-group.accent-provenance { border-top-color: #607080; }
.health-group.accent-formula { border-top-color: #8B6FB0; }
.health-group.accent-hypothesis { border-top-color: #B8913A; }
.health-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text3); margin-bottom: 8px; }
.health-group .snap-hero-num { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 2px; }
.health-group .snap-hero-label { font-size: 12px; color: var(--text2); margin-bottom: 10px; }
.health-group .snap-detail { font-size: 11px; color: var(--text3); line-height: 1.55; }
.health-group .snap-detail strong { color: var(--text2); font-weight: 600; }
.health-verdict { font-size: 11px; color: var(--text2); margin-top: 8px; font-style: italic; }
.health-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.health-status .hs-label { font-size: 13px; color: var(--text); font-weight: 500; }
.health-status .hs-value { font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.health-status .hs-value.high { color: var(--fam-high); }
.health-status .hs-value.med { color: var(--fam-med); }
.health-status .hs-value.low { color: var(--fam-low); }
/* Featured Research Objects */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 800px) { .featured-grid { grid-template-columns: 1fr; } }
.featured-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: var(--d-card-pad) var(--d-card-pad-x); cursor: pointer; transition: all 0.15s; position: relative; }
.featured-card:hover { border-color: var(--accent); box-shadow: 0 2px 14px rgba(74,124,111,0.1); transform: translateY(-1px); }
.featured-card .fc-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.featured-card .fc-type.evidence { color: #4A7C6F; }
.featured-card .fc-type.formula { color: #8B6FB0; }
.featured-card .fc-type.hypothesis { color: #B8913A; }
.featured-card .fc-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.35; }
.featured-card .fc-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.featured-card .fc-meta { font-size: 10px; color: var(--text3); margin-top: 8px; font-family: var(--font-mono); }
.featured-card .fc-cta { font-size: 11px; color: var(--accent); margin-top: 12px; font-weight: 500; }
.featured-card .fc-arrow { position: absolute; right: 14px; top: 14px; color: var(--text3); opacity: 0; transition: opacity 0.15s; }
.featured-card:hover .fc-arrow { opacity: 1; }
/* Research Landscape */
.rland-bubbles { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.rland-bubble { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
.rland-bubble:hover { border-color: var(--accent); }
.rland-bubble .rb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rland-bubble .rb-name { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
.rland-bubble .rb-count { font-size: 9px; color: var(--text3); font-family: var(--font-mono); }
.rland-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 800px) { .rland-cards { grid-template-columns: 1fr; } }
.rland-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: var(--d-card-pad) var(--d-card-pad-x); cursor: pointer; transition: all 0.15s; }
.rland-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 10px rgba(74,124,111,0.08); }
.rland-card .rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rland-card .rc-name { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.rland-card .rc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rland-card .rc-count { font-size: 10px; color: var(--text3); font-family: var(--font-mono); }
.rland-card .rc-mechs { list-style: none; padding: 0; margin: 0 0 10px; }
.rland-card .rc-mechs li { font-size: 11.5px; color: var(--text2); padding: 2px 0; line-height: 1.35; }
.rland-card .rc-mechs li .rc-msize { font-size: 9px; color: var(--text3); font-family: var(--font-mono); margin-left: 3px; }
.rland-card .rc-link { font-size: 11px; font-weight: 500; color: var(--accent); }
.rland-colors-0 { background-color: #4A7C6F; }
.rland-colors-1 { background-color: #8B6FB0; }
.rland-colors-2 { background-color: #B8913A; }
.rland-colors-3 { background-color: #6B8EC4; }
.rland-colors-4 { background-color: #C4726B; }
.rland-colors-5 { background-color: #5BA68A; }
.rland-colors-6 { background-color: #9B7EC4; }
.rland-colors-7 { background-color: #C49B5B; }
/* Query result */
.query-loading { text-align: center; padding: 80px 20px; }
.ql-spinner { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ql-text { font-size: 15px; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.ql-detail { font-size: 12px; color: var(--text3); }
/* ── Query Session (Elicit-style split view) ── */
#v-query.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* sources-panel-gpt-style-v1 follow-up: hide the page topbar entirely.
The "← Dashboard | | Ask Graph · N sources" strip was a
carry-over from when query sessions opened in a dedicated full-page
view. Now the sidebar Recents + sources panel carry the same info,
and the strip adds horizontal noise without value. Sidebar nav covers
the Dashboard-back affordance; the answer header carries the query;
the right panel header carries the source count. */
.qs-topbar { display: none; }
.qs-back { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; font-size: 12px; color: var(--text2); cursor: pointer; font-family: var(--font-sans); display: flex; align-items: center; gap: 4px; transition: all 0.15s; }
.qs-back:hover { border-color: var(--accent); color: var(--text); }
.qs-topbar-title { font-family: var(--font-serif); font-size: 15px; color: var(--text); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-topbar-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; font-size: 12px; color: var(--text2); }
.qs-topbar-meta .qs-mode-label { font-weight: 600; color: var(--text); }
.qs-topbar-meta .qs-sep { color: var(--text3); }
.qs-topbar-meta .qs-src-count-label { color: var(--text3); }
.qs-topbar-meta .qs-time { font-size: 11px; color: var(--text3); font-family: var(--font-mono); }
.qs-body { display: flex; flex: 1; overflow: hidden; }
.qs-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Phase B5: match .paper-chat-log so the shared .paper-chat-msg-*
lattice (`align-self: flex-end` on user pills, `gap` between
messages) actually takes effect inside #qsChat. Was a plain
block container — user pills rendered full-width because no
flex parent meant align-self had nothing to align against. */
/* S15.17 — slim, low-contrast scrollbar for the chat column and
the main app scroll. Thumb is barely visible at rest (alpha
~0.10) and darkens on hover so the user can still grab it. */
.qs-chat,
.main { scrollbar-width: thin; scrollbar-color: rgba(60, 64, 60, 0.12) transparent; }
.qs-chat::-webkit-scrollbar,
.main::-webkit-scrollbar { width: 6px; height: 6px; }
.qs-chat::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track { background: transparent; }
.qs-chat::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb { background: rgba(60, 64, 60, 0.10); border-radius: 3px; transition: background 0.18s; }
.qs-chat:hover::-webkit-scrollbar-thumb,
.main:hover::-webkit-scrollbar-thumb { background: rgba(60, 64, 60, 0.18); }
.qs-chat::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover { background: rgba(60, 64, 60, 0.32); }
.qs-chat::-webkit-scrollbar-corner,
.main::-webkit-scrollbar-corner { background: transparent; }
.qs-chat {
flex: 1;
overflow-y: auto;
/* S15.23 — fade-out mask retired; chat content gets a clean
hard clip at the composer card's top edge (Claude-style strict
edge). Combined with .qs-input-bar { padding-top: 0 }, the
last line's bottom touches the composer ring directly. */
/* chat-content-center (2026-05-28): match the composer card's
760px cap by squeezing the chat column's horizontal padding
when the surrounding flex item is wide enough. Body content
stays a few px narrower than the composer card (740 vs 760)
so the bottom of every paragraph sits inside the composer's
visual gutter. Falls back to 36px on narrow widths so nothing
touches the panel edge. */
/* S15.24 — bottom 20 → 50 so last line gets more breathing
room above the composer.
2026-05-29 (3): top 80 → 70 — 80 was a tad too much, 70 sits
comfortably below the viewport edge without feeling padded. */
padding: 70px max(36px, calc(50% - 370px)) 50px;
display: flex;
flex-direction: column;
/* turn-gap-tighten (2026-05-29): drop the uniform 36px gap and
drive spacing per-pair via the rules below — user→assistant
stays tight (a single Q&A reads as one block), assistant→user
stays open (one turn ends before the next begins). */
gap: 0;
}
.qs-chat > .paper-chat-msg { margin-top: 30px; }
.qs-chat > .paper-chat-msg:first-child { margin-top: 0; }
/* User pill immediately followed by an assistant message: pull
the assistant close. User pill's action row already sits 4px
under the body, so the visual gap between user-action-row and
assistant-top lands ~14px — inside the user's requested
10-20px window. */
.qs-chat > .paper-chat-msg-user + .paper-chat-msg-assistant {
margin-top: 14px;
}
/* chat-content-align (2026-05-28): the global ``.paper-chat-msg
{ max-width: 92% }`` capped assistant bodies at ~92% of the
parent column, so the right edge of the answer sat ~60px short
of where the user pill's right edge landed. Inside the qs
surface we want them flush — release the cap. User pills
already hug their content via ``align-self: flex-end``, so
relaxing the same constraint on them does not visually change
them. Paper chat surface keeps the 92% cap so we don't disturb
that layout. */
.qs-chat > .paper-chat-msg { max-width: 100%; }
/* qs-source-card-compact-v1.2: widened from 420 → 480px so source-
card titles fit more content before the ellipsis kicks in. On
1440px+ screens this still leaves ~960px+ for the chat column;
the @media 900 collapse-to-full-width rule below still triggers
for mobile. */
.qs-right { width: 480px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; overflow: hidden; transition: width 0.25s ease; }
.qs-right.collapsed { width: 0; border-left: none; }
/* sources-panel-gpt-style-v1: GPT Activity-style header. Replaces the
prior all-caps "SOURCES · N" with a plain "Sources" title plus a
small "20 retrieved · 15 cited" meta subline. Less debug-y, more
readable. The h3 keeps width but the heavy-weight uppercase styling
is gone. */
.qs-right-header { padding: 14px 18px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qs-right-header h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text); margin: 0; flex: 1; min-width: 0; }
.qs-right-title-main { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.qs-right-meta-line { font-size: 12px; color: var(--text3); margin-top: 3px; font-weight: 400; }
.qs-right-for-line { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.qs-right-toggle { background: none; border: none; cursor: pointer; color: var(--text3); padding: 2px; font-size: 16px; line-height: 1; }
/* S15.15 — hide the sources-panel scrollbar entirely. Scrolling
still works (mouse-wheel, touchpad, keyboard); only the visual
thumb is suppressed. ``scrollbar-width: none`` covers Firefox,
the ``::-webkit-scrollbar`` rule covers Chrome / Safari / Edge. */
.qs-right-scroll { flex: 1; overflow-y: auto; padding: 10px 18px 18px; scrollbar-width: none; -ms-overflow-style: none; }
.qs-right-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* composer-card-v1 (2026-05-28): Claude-style unified composer.
Single rounded card with the textarea on top and the tools row
(model picker + web-search + send) underneath. The outer
``.qs-input-bar`` no longer carries a border-top — the card
provides all the framing. */
.qs-input-bar {
flex-shrink: 0;
/* S15.22 — top padding 14 → 0 so the composer card hugs the
chat fade-out band directly. The fade-mask on .qs-chat now
does the visual "soften" by itself; the previous 14px gap of
solid bg made fade end too far above the card. */
padding: 0 36px 22px;
border-top: none;
background: var(--bg);
}
/* composer-card width-cap (2026-05-28): Claude's composer doesn't
span the entire chat column; it stays ~760px wide and centers
under the conversation. Same here so the composer reads as one
focused control instead of a wall-to-wall input strip. The
chat messages above still use the full column width (changing
that is a larger redesign — kept for a future pass). */
.qs-input-card {
/* S15.12 — Claude-style ambient glow. See .paper-chat-composer
for the rationale; this is the Ask Graph composer (same effect,
wider card, slightly larger radius). */
background: var(--card);
border: 1px solid transparent;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(28, 58, 47, 0.10),
0 2px 6px rgba(28, 58, 47, 0.05),
0 12px 28px -4px rgba(28, 58, 47, 0.09),
0 32px 64px -8px rgba(28, 58, 47, 0.08);
transition: box-shadow 0.18s ease, border-color 0.18s ease;
display: flex;
flex-direction: column;
max-width: 760px;
margin: 0 auto;
width: 100%;
}
/* S15.13 — focus state keeps the exact same ambient glow as the
default state; no accent ring. Reduces the "outlined box" feel
on click. The textarea's own :focus outline is already removed
elsewhere so there's no visible cursor frame. */
.qs-input-card:focus-within {
box-shadow:
0 0 0 1px rgba(28, 58, 47, 0.10),
0 2px 6px rgba(28, 58, 47, 0.05),
0 12px 28px -4px rgba(28, 58, 47, 0.09),
0 32px 64px -8px rgba(28, 58, 47, 0.08);
}
.qs-input {
width: 100%;
flex: 1 1 auto;
resize: none;
border: none;
padding: 14px 18px 4px;
font-size: 14.5px;
font-family: var(--font-sans);
color: var(--text);
background: transparent;
line-height: 1.55;
/* S15.20 — composer card target height = 120px. With tools row
≈ 50px and card padding/gap ≈ 2px, the textarea needs ≈ 68px
of base height (was 24px). 200px max retained for long input. */
min-height: 68px;
max-height: 200px;
outline: none;
box-shadow: none;
display: block;
}
.qs-input::placeholder { color: var(--text3); }
.qs-send {
/* S15.14 — circular send. Uses the NovusGraph accent green
(``--accent``) directly so the button reads as a brand-tinted
primary, not a dark blob. */
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--accent);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.15s, transform 0.1s, background 0.15s;
flex-shrink: 0;
}
.qs-send:hover { background: #5A8E80; opacity: 1; }
.qs-send:active { transform: scale(0.96); }
.qs-send:disabled { background: var(--text3); cursor: not-allowed; opacity: 0.6; }
/* Stop-generating state — same button, dark fill + square icon
(ChatGPT pattern). Stays clickable so the click triggers abort. */
.qs-send.is-stopping {
background: #1a2421;
color: #fff;
}
.qs-send.is-stopping:hover { background: #000; opacity: 1; }
/* qr-stopped — annotation appended after a user-aborted stream.
Soft grey, no background, sits below whatever partial answer the
user managed to read before clicking stop. */
.paper-chat-msg-body .qr-stopped {
margin-top: 10px;
font-size: 12.5px;
color: var(--text3);
font-style: italic;
}
.qs-mode-chips { display: flex; gap: 6px; margin-top: 8px; }
/* Phase A12: tool row hosting Ask Graph's model picker + Search
toggle. Mirrors paper-chat's .paper-chat-toolbar-row spacing
so the two surfaces' composers feel identical. */
/* composer-card-v1: now lives INSIDE .qs-input-card, splits
left tools (model picker + web-search) from the right-side
send button. Border-top hairline visually divides text vs.
controls without separating them into different containers. */
.qs-tools-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 10px;
flex-wrap: wrap;
}
.qs-tools-left {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
/* S15.28 — push the model picker to the right so it sits right
beside the send button instead of hugging the left edge. */
margin-left: auto;
}
.qs-mode-chip { font-size: 10.5px; padding: 3px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text3); cursor: pointer; font-family: var(--font-sans); transition: all 0.12s; }
.qs-mode-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.06); }
.qs-mode-chip:hover { border-color: var(--accent); color: var(--accent); }
/* Chat messages — Ask Graph (#qsChat) now uses the same
.paper-chat-msg* class lattice PaperChat does (Phase A11),
so the message-level styling rules above
(.paper-chat-msg / .paper-chat-msg-user / -assistant /
-body / -actions / -stages) cover both surfaces. Only
chat-list-wide CSS (.qs-chat, .qs-input-bar, .qs-mode-chips)
stays qs-specific.
Inline cite-ref chip + streaming cursor styles, formerly
scoped to .qs-ai-body, now scoped to .paper-chat-msg-body
so they apply on both surfaces. */
.paper-chat-msg-body .cite-ref { display: inline-block; white-space: nowrap; color: var(--accent); font-weight: 700; font-size: 10.5px; cursor: pointer; padding: 1px 5px; border-radius: 3px; transition: all 0.15s; border: 1px solid rgba(74,124,111,0.12); background: rgba(74,124,111,0.05); font-family: var(--font-mono); letter-spacing: 0.02em; vertical-align: middle; line-height: 1.6; }
.paper-chat-msg-body .cite-ref:hover { background: rgba(74,124,111,0.15); border-color: rgba(74,124,111,0.3); }
.paper-chat-msg-body .cite-ref.highlight { background: rgba(74,124,111,0.2); border-color: rgba(74,124,111,0.35); }
.paper-chat-msg-body.streaming::after { content: ''; display: inline-block; width: 2px; height: 14px; background: var(--accent); margin-left: 2px; animation: blink 0.6s step-end infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }
/* Phase A11: 5-icon action toolbar CSS lives on
.paper-chat-msg-actions / .paper-chat-msg-action below — both
surfaces use those classes now, so no per-surface override. */
/* chat-parity: assistant stage indicator on paper-chat. Visual
rules are deliberately copied from .qs-stage so the two chat
surfaces feel identical when "Searching graph sources…" appears.
Sits above the assistant body and disappears once the first
delta arrives (see paperChat.js _stages handling). */
.paper-chat-msg-stages { margin: 2px 0 6px; display: flex; flex-direction: column; gap: 0; }
/* ask-graph-stages-v3 (Manus-inspired): stage rows can now carry
a nested sub-line under the main label ("via Gemini Flash",
"20 papers · 8 evidence · …"). Align-items shifts to flex-start
so the icon stays top-anchored when the text column grows
vertically. The icon picks up a 1 px nudge below to align with
the label baseline. */
.paper-chat-msg-stage { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--text3); transition: color 0.3s ease; }
.paper-chat-msg-stage-text { display: flex; flex-direction: column; gap: 1px; }
.paper-chat-msg-stage-label { line-height: 1.4; }
.paper-chat-msg-stage-sub {
font-size: 11px;
color: var(--text3);
line-height: 1.3;
}
.paper-chat-msg-stage-sub:empty { display: none; }
.paper-chat-msg-stage.done .paper-chat-msg-stage-sub,
.paper-chat-msg-stage.active .paper-chat-msg-stage-sub { color: var(--text3); }
.paper-chat-msg-stage.active { color: var(--text); }
.paper-chat-msg-stage.done { color: var(--accent); }
/* `.skipped` is for the kg_search stage when the backend router
decided "don't bother with the graph for this query". Same dim
tone as idle stages so the user can see at-a-glance whether
graph retrieval ran or not, without it screaming for attention. */
.paper-chat-msg-stage.skipped { color: var(--text3); }
.paper-chat-msg-stage-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.paper-chat-msg-stage.active .paper-chat-msg-stage-icon { animation: spin 0.8s linear infinite; }
/* Right panel source cards */
/* chat-sources-chatgpt-style (2026-05-28): cards are a passive
list of citation targets, ChatGPT-style. No visible divider,
no hover affordance, no whole-card click — the answer's [N]
chip is the only navigation entry point. ``.highlight`` is the
short-lived grey rounded backdrop that fires when the user
clicks a citation in the answer (qsScrollToSrc adds the class
for 2s). */
/* sources-panel-gpt-style-v1: rows, not cards. Each source is an
activity-feed row separated by a hairline divider — the rounded
card-with-background look is gone. Padding kept generous on the
left so the cite number circle has breathing room, but no left
border-radius and no card backdrop.
Hover: very subtle slate tint, no shadow.
Cite-hit highlight: 2px mint accent on the left edge (matches the
`.qs-sources-chip` accent) so the user can scan from the [N] in
the answer to the row on the right. */
.qs-src {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 4px;
margin: 0;
border-radius: 0;
border-left: 2px solid transparent;
/* sources-panel-click-to-open-paper (2026-05-30): cards are now
clickable — Tier A opens /paper/, Tier B triggers import.
Use a pointer when the card has a paper_id or arxiv handle so
the affordance is visible without lying about Tier C cards
that have no opening target. */
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
position: relative;
}
.qs-src.qs-src-no-target { cursor: default; }
.qs-src.qs-src-importing { cursor: progress; opacity: 0.7; }
/* Hairline divider between every row except the last in a group. */
.qs-src-group-body .qs-src + .qs-src {
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.qs-src:hover { background: rgba(15, 23, 42, 0.035); }
.qs-src.highlight {
background: rgba(46, 124, 111, 0.08);
border-left-color: rgba(46, 124, 111, 0.8);
}
.qs-src-num {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(0, 0, 0, 0.05);
color: var(--text2);
font-size: 11px;
font-weight: 500;
font-family: var(--font-mono);
line-height: 1;
}
.qs-src-body { flex: 1; min-width: 0; }
.qs-src-sub {
font-size: 12px;
color: var(--text3);
font-family: var(--font-mono);
margin-top: 2px;
word-break: break-word;
}
.qs-src-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.qs-src-cite { font-size: 11px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); min-width: 22px; }
.qs-src-type { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.qs-src-type.paper { background: var(--accent); }
.qs-src-type.claim { background: #607080; }
.qs-src-type.evidence_atom { background: #8B6FB0; }
.qs-src-type.formula_family { background: #B8913A; }
.qs-src-type.community_gap { background: #2F8B7F; }
/* qs-source-card-compact-v1 (2026-05-29): redo of the community_gap
card from the 5–6 line "quoted canonical_gap + multi-line paper +
Matched on:" layout to a ChatGPT-style 3-line compact:
Line 1 — paper title (primary)
Line 2 — "Community gap · year · paper_id" (dim, compact)
Line 3 — canonical_gap (italic, single-line, ellipsis)
Full canonical_gap is still available on hover via title=. The
.qs-src-tag-line / .qs-src-gap-text / .qs-src-matched classes from
the previous design are no longer emitted by the renderer; CSS
removed too. */
.qs-src-meta-compact {
font-size: 11px;
color: var(--text3);
letter-spacing: 0.01em;
margin-top: 2px;
}
/* S15.29 — first-letter accent retired; meta line reads uniform. */
.qs-src-gap-line {
font-style: italic;
color: var(--text3);
font-size: 12px;
margin-top: 2px;
/* Single-line ellipsis — full text on title= hover. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tighter padding on each card now that there's less vertical content
to give space to. Pre-compact rule was .qs-src { padding: 10px 12px } */
.qs-src { padding: 8px 10px; }
/* qs-source-card-compact-v1.1: title forced to exactly one line. The
2-line wrap was a real complaint — long paper titles took 2 of the
3 available rows. Smaller font + nowrap + ellipsis keeps the title
to one row; full text is on hover via title= (added in the
community_gap renderer + paper renderer). */
.qs-src-title {
font-size: 12.5px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qs-src-relevance { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-left: auto; padding: 1px 6px; border-radius: 3px; }
.qs-src-relevance.high { color: #4A7C6F; background: rgba(74,124,111,0.1); }
.qs-src-relevance.mid { color: #607080; background: rgba(96,112,128,0.1); }
.qs-src-relevance.low { color: var(--text3); background: rgba(128,128,128,0.08); }
.qs-src-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
word-break: break-word;
}
/* Legacy classes from the old card layout. Kept so any pre-S10b
markup still in the DOM during a transient render doesn't go
completely unstyled; the new ChatGPT-style renderer doesn't
emit them at all. */
.qs-src-meta { display: none; }
.qs-src-snippet { display: none; }
.qs-src-deeplink { display: none; }
.qs-src.uncited { opacity: 0.7; }
.qs-src.uncited:hover { opacity: 1; }
/* Source panel grouping */
.qs-src-section { padding: 0 18px; }
.qs-src-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); padding: 14px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.qs-src-section-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.qs-src-section-toggle:hover { color: var(--text2); }
.qs-src-section-arrow { font-size: 9px; transition: transform 0.15s; }
.uncited-section .qs-src-section-body { display: none; }
.uncited-section.expanded .qs-src-section-body { display: block; }
.uncited-section.expanded .qs-src-section-arrow { transform: rotate(90deg); }
/* sources-panel-gpt-style-v1: group headers go from "labelled section
with count chip on the right" to a quiet "Used in answer · 15"
single inline row, demoted to a subtle marker color. No background,
no underline. */
.qs-src-group { margin-bottom: 2px; }
.qs-src-group-header {
display: flex; align-items: center; gap: 6px;
padding: 14px 0 4px;
cursor: pointer;
font-size: 11.5px; font-weight: 500;
color: var(--text3);
letter-spacing: 0.01em;
text-transform: none;
}
.qs-src-group-header:hover { color: var(--text2); }
.qs-src-group-arrow { font-size: 8px; color: var(--text3); transition: transform 0.15s; width: 10px; opacity: 0.7; }
.qs-src-group:not(.collapsed) .qs-src-group-arrow { transform: rotate(90deg); }
.qs-src-group-label { font-weight: 500; }
.qs-src-group.collapsed .qs-src-group-body { display: none; }
/* Mode-specific result sections in chat */
.qr-error { background: rgba(180,60,60,0.08); border: 1px solid rgba(180,60,60,0.2); border-radius: 8px; padding: 16px; color: #9b4444; font-size: 13px; }
.qr-section { margin-top: 16px; }
.qr-section h4 { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.qr-trace-summary { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 16px; white-space: pre-line; }
.qr-claim { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); line-height: 1.5; }
.grade-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.grade-direct { background: rgba(74,124,111,0.15); color: #4A7C6F; }
.grade-referenced { background: rgba(96,112,128,0.15); color: #607080; }
.grade-inferred { background: rgba(184,145,58,0.12); color: #B8913A; }
.grade-unresolved { background: rgba(160,90,90,0.12); color: #a05a5a; }
.qr-atom { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.qra-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #607080; background: rgba(96,112,128,0.1); padding: 2px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.qr-family { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.qrf-sf { font-size: 10px; color: #8B6FB0; background: rgba(139,111,176,0.1); padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.qrf-conf { font-size: 10px; color: var(--text3); margin-left: 6px; }
.qr-explanation { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }
.qr-family-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; }
.qrfc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.qrfc-desc { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
.qrfc-kw { display: flex; gap: 4px; flex-wrap: wrap; }
.chip-sm { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(74,124,111,0.08); color: var(--accent); border: 1px solid rgba(74,124,111,0.15); }
.qr-hyp-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 10px; }
.qrhc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #B8913A; background: rgba(184,145,58,0.08); border: 1px solid rgba(184,145,58,0.15); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
.qrhc-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.qrhc-rationale { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; }
.qrhc-families { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.qrhc-expand { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--text2); cursor: pointer; background: none; font-family: var(--font-sans); transition: all 0.15s; }
.qrhc-expand:hover { border-color: var(--accent); color: var(--accent); }
.qrhc-expand.loading { pointer-events: none; opacity: 0.6; }
.qrhc-expanded { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.qrhc-expanded dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); margin-top: 8px; }
.qrhc-expanded dd { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin: 2px 0 0 0; }
.qr-existing-idea { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); line-height: 1.5; }
.qr-existing-idea div { font-size: 12px; color: var(--text2); margin-top: 4px; }
/* Grounded Hypothesis Cards */
.ghc { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: var(--d-card-pad) var(--d-card-pad-x); margin-bottom: var(--d-card-gap); position: relative; }
.ghc.ghc-rejected { opacity: 0.45; border-style: dashed; }
.ghc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.ghc-status.st-evidence_backed { color: #2d8a56; background: rgba(45,138,86,0.08); border: 1px solid rgba(45,138,86,0.15); }
.ghc-status.st-needs_validation { color: #B8913A; background: rgba(184,145,58,0.08); border: 1px solid rgba(184,145,58,0.15); }
.ghc-status.st-draft { color: var(--text3); background: rgba(128,128,128,0.06); border: 1px solid var(--border); }
.ghc-status.st-rejected { color: var(--fam-low); background: rgba(192,80,80,0.06); border: 1px solid rgba(192,80,80,0.12); }
.ghc-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.ghc-source-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.ghc-src-chip { font-size: 10px; padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; }
.ghc-src-trick { color: var(--accent); background: rgba(74,124,111,0.08); border: 1px solid rgba(74,124,111,0.12); cursor: pointer; }
.ghc-src-trick:hover { background: rgba(74,124,111,0.15); }
.ghc-src-mech { color: #8B6FB0; background: rgba(139,111,176,0.06); border: 1px solid rgba(139,111,176,0.12); cursor: pointer; }
.ghc-src-mech:hover { background: rgba(139,111,176,0.12); }
.ghc-src-pain { color: #c06050; background: rgba(192,96,80,0.06); border: 1px solid rgba(192,96,80,0.12); font-style: italic; }
.ghc-hyp { font-size: 13.5px; color: var(--text); line-height: 1.65; margin-bottom: 12px; }
.ghc-section { margin-bottom: 10px; }
.ghc-section h5 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); margin: 0 0 4px 0; }
.ghc-section-body { font-size: 12.5px; color: var(--text2); line-height: 1.55; }
.ghc-list { list-style: none; padding: 0; margin: 0; }
.ghc-list li { font-size: 12px; color: var(--text2); padding: 2px 0; padding-left: 14px; position: relative; line-height: 1.5; }
.ghc-list li::before { content: '–'; position: absolute; left: 0; color: var(--text3); }
.ghc-scores { display: flex; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ghc-score { font-size: 10px; color: var(--text3); }
.ghc-score strong { font-weight: 600; }
.ghc-score.sc-high strong { color: #2d8a56; }
.ghc-score.sc-medium strong { color: #B8913A; }
.ghc-score.sc-low strong { color: var(--fam-low); }
.ghc-critic { font-size: 11px; color: var(--text3); margin-top: 8px; padding: 6px 10px; background: rgba(128,128,128,0.04); border-radius: 6px; border: 1px dashed var(--border); }
.ghc-links { display: flex; gap: 6px; margin-top: 10px; }
.ghc-link-btn { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-family: var(--font-sans); }
.ghc-link-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Generate Hypothesis button in trick detail */
.td-gen-hyp { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 16px; border-radius: 8px; background: rgba(74,124,111,0.06); border: 1px solid rgba(74,124,111,0.15); cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--accent); font-weight: 600; transition: all 0.2s; width: 100%; }
.td-gen-hyp:hover { background: rgba(74,124,111,0.12); border-color: var(--accent); }
.td-gen-hyp:disabled { opacity: 0.4; cursor: not-allowed; }
.td-gen-hyp svg { width: 16px; height: 16px; flex-shrink: 0; }
.td-gen-results { margin-top: 16px; }
.td-gen-loading { font-size: 12px; color: var(--text3); padding: 16px; text-align: center; }
/* Grounded hypothesis modal */
.ghm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.ghm-modal { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; width: 90vw; max-width: 720px; max-height: 85vh; overflow-y: auto; padding: 24px 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.ghm-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.ghm-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ghm-form label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); }
.ghm-form input, .ghm-form select { font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font-family: var(--font-sans); }
.ghm-form input:focus, .ghm-form select:focus { outline: none; border-color: var(--accent); }
.ghm-actions { display: flex; gap: 8px; }
.ghm-btn { padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); border: none; }
.ghm-btn-primary { background: var(--accent); color: #fff; }
.ghm-btn-primary:hover { opacity: 0.9; }
.ghm-btn-secondary { background: none; border: 1px solid var(--border); color: var(--text2); }
.ghm-btn-secondary:hover { border-color: var(--text3); }
/* ── Evidence Badge / Traceable Claim System ── */
.ev-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; margin-left: 4px; border-radius: 4px; font-size: 10px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.02em; cursor: pointer; transition: all 0.15s; vertical-align: middle; line-height: 1.6; border: 1px solid transparent; }
.ev-badge.ev-hypothesis { background: rgba(74,124,111,0.08); color: var(--accent); border-color: rgba(74,124,111,0.15); }
.ev-badge.ev-hypothesis:hover { background: rgba(74,124,111,0.16); border-color: rgba(74,124,111,0.3); }
.ev-badge.ev-transfer { background: rgba(59,130,246,0.07); color: #3b7dd8; border-color: rgba(59,130,246,0.14); }
.ev-badge.ev-transfer:hover { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.28); }
.ev-badge.ev-critic { background: rgba(139,111,176,0.07); color: #8B6FB0; border-color: rgba(139,111,176,0.14); }
.ev-badge.ev-critic:hover { background: rgba(139,111,176,0.14); border-color: rgba(139,111,176,0.28); }
.ev-badge.ev-risk { background: rgba(192,96,80,0.07); color: #b05a48; border-color: rgba(192,96,80,0.14); }
.ev-badge.ev-risk:hover { background: rgba(192,96,80,0.14); border-color: rgba(192,96,80,0.28); }
.ev-badge.ev-citation { background: rgba(74,124,111,0.06); color: var(--accent); border-color: rgba(74,124,111,0.12); padding: 0 5px; font-size: 10.5px; font-weight: 700; border-radius: 3px; margin: 0 1px; }
.ev-badge.ev-citation:hover { background: rgba(74,124,111,0.15); border-color: rgba(74,124,111,0.3); }
.ev-badge.ev-reliability { background: rgba(74,124,111,0.06); color: var(--accent); border-color: rgba(74,124,111,0.12); }
.ev-badge.ev-reliability:hover { background: rgba(74,124,111,0.14); border-color: rgba(74,124,111,0.28); }
.ev-badge.ev-transferconf { background: rgba(59,130,246,0.06); color: #3b7dd8; border-color: rgba(59,130,246,0.12); }
.ev-badge.ev-transferconf:hover { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.28); }
.ev-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
/* Evidence Popover (Layer 2: hover preview) */
.ev-popover { position: fixed; z-index: 9999; max-width: 400px; min-width: 280px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); padding: 0; pointer-events: auto; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; font-family: var(--font-sans); }
.ev-popover.visible { opacity: 1; transform: translateY(0); }
.ev-popover-header { padding: 10px 14px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.ev-popover-header .ev-pop-id { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); }
.ev-popover-header .ev-pop-type { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; }
.ev-popover-claim { padding: 8px 14px; font-size: 12px; color: var(--text); line-height: 1.55; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-style: italic; }
.ev-popover-nodes { padding: 8px 14px; }
.ev-pop-node { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 11px; line-height: 1.45; }
.ev-pop-node-icon { flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 8px; margin-top: 1px; }
.ev-pop-node-icon.nt-claim { background: rgba(74,124,111,0.12); color: var(--accent); }
.ev-pop-node-icon.nt-trick { background: rgba(74,124,111,0.12); color: var(--accent); }
.ev-pop-node-icon.nt-mechanism { background: rgba(139,111,176,0.12); color: #8B6FB0; }
.ev-pop-node-icon.nt-family { background: rgba(168,130,80,0.12); color: #a8824a; }
.ev-pop-node-icon.nt-pattern { background: rgba(59,130,246,0.10); color: #3b7dd8; }
.ev-pop-node-icon.nt-target { background: rgba(192,96,80,0.10); color: #c06050; }
.ev-pop-node-icon.nt-paper { background: rgba(128,128,128,0.10); color: var(--text3); }
.ev-pop-node-icon.nt-pass { background: rgba(74,124,111,0.12); color: var(--accent); }
.ev-pop-node-icon.nt-fail { background: rgba(192,96,80,0.12); color: #c06050; }
.ev-pop-node-icon.nt-verdict { background: rgba(168,130,80,0.12); color: #a8824a; }
.ev-pop-node-icon.nt-reasoning { background: rgba(59,130,246,0.10); color: #3b7dd8; }
.ev-pop-node-icon.nt-domain { background: rgba(168,130,80,0.12); color: #a8824a; }
.ev-pop-node-icon.nt-role { background: rgba(139,111,176,0.12); color: #8B6FB0; }
.ev-pop-node-icon.nt-score { background: rgba(59,130,246,0.10); color: #3b7dd8; }
.ev-pop-node-label { color: var(--text2); }
.ev-pop-node-label strong { color: var(--text); font-weight: 600; }
.ev-pop-arrow { padding: 0 0 0 4px; color: var(--text3); font-size: 9px; line-height: 1; }
.ev-popover-reasoning { padding: 8px 14px 10px; font-size: 11px; color: var(--text3); line-height: 1.5; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.ev-popover-footer { padding: 6px 14px 8px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text3); cursor: pointer; }
.ev-popover-footer:hover { color: var(--accent); }
/* Evidence Trace Panel (Layer 3: expanded inline) */
.ev-trace { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--bg) 97%, var(--accent)); }
.ev-trace-header { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); cursor: pointer; }
.ev-trace-header:hover { background: rgba(74,124,111,0.03); }
.ev-trace-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); }
.ev-trace-toggle { font-size: 10px; color: var(--text3); }
.ev-trace-body { padding: 12px 14px; }
.ev-trace-chain { position: relative; padding-left: 20px; }
.ev-trace-node { position: relative; padding: 6px 0 6px 16px; }
.ev-trace-node::before { content: ''; position: absolute; left: -14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); z-index: 1; }
.ev-trace-node:not(:last-child)::after { content: ''; position: absolute; left: -11px; top: 20px; bottom: -6px; width: 2px; background: var(--border); }
.ev-trace-node.nt-claim::before { border-color: var(--accent); background: rgba(74,124,111,0.15); }
.ev-trace-node.nt-trick::before { border-color: var(--accent); background: rgba(74,124,111,0.15); }
.ev-trace-node.nt-mechanism::before { border-color: #8B6FB0; background: rgba(139,111,176,0.15); }
.ev-trace-node.nt-family::before { border-color: #a8824a; background: rgba(168,130,80,0.15); }
.ev-trace-node.nt-pattern::before { border-color: #3b7dd8; background: rgba(59,130,246,0.15); }
.ev-trace-node.nt-target::before { border-color: #c06050; background: rgba(192,96,80,0.15); }
.ev-trace-node.nt-paper::before { border-color: var(--text3); background: rgba(128,128,128,0.15); }
.ev-trace-node.nt-pass::before { border-color: var(--accent); background: rgba(74,124,111,0.15); }
.ev-trace-node.nt-fail::before { border-color: #c06050; background: rgba(192,96,80,0.25); }
.ev-trace-node.nt-verdict::before { border-color: #a8824a; background: rgba(168,130,80,0.15); }
.ev-trace-node.nt-domain::before { border-color: #a8824a; background: rgba(168,130,80,0.15); }
.ev-trace-node.nt-role::before { border-color: #8B6FB0; background: rgba(139,111,176,0.15); }
.ev-trace-node.nt-score::before { border-color: #3b7dd8; background: rgba(59,130,246,0.15); }
.ev-trace-node-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); margin-bottom: 1px; }
.ev-trace-node-label { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.4; }
.ev-trace-node-detail { font-size: 11px; color: var(--text2); line-height: 1.5; margin-top: 2px; }
.ev-trace-node-link { font-size: 10px; color: var(--accent); cursor: pointer; margin-top: 2px; }
.ev-trace-node-link:hover { text-decoration: underline; }
.ev-trace-reasoning { margin-top: 10px; padding: 10px 12px; background: rgba(128,128,128,0.04); border-radius: 6px; border: 1px dashed var(--border); }
.ev-trace-reasoning-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); margin-bottom: 4px; }
.ev-trace-reasoning-text { font-size: 12px; color: var(--text2); line-height: 1.6; }
/* Cross-view breadcrumb */
.ev-breadcrumb { display: flex; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: 12px; background: rgba(59,130,246,0.04); border: 1px solid rgba(59,130,246,0.12); border-radius: 8px; font-size: 11px; color: var(--text2); }
.ev-breadcrumb-back { color: #3b7dd8; cursor: pointer; font-weight: 600; white-space: nowrap; }
.ev-breadcrumb-back:hover { text-decoration: underline; }
.ev-breadcrumb-sep { color: var(--text3); font-size: 9px; }
.ev-breadcrumb-current { color: var(--text3); font-family: var(--font-mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .qs-right { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; } .qs-right.collapsed { width: 0; } }
/* Paper Search View — expanded right panel */
.qs-right.paper-search-mode { width: 60%; min-width: 500px; max-width: 800px; }
@media (max-width: 1200px) { .qs-right.paper-search-mode { width: 55%; min-width: 420px; } }
.qs-ps-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; position: sticky; top: -10px; background: var(--card); z-index: 2; margin: -10px -18px 0; flex-wrap: wrap; }
.qs-ps-search { flex: 1; min-width: 120px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: var(--font-sans); color: var(--text); background: var(--bg); outline: none; transition: border-color 0.15s; }
.qs-ps-search:focus { border-color: var(--accent); }
.qs-ps-search::placeholder { color: var(--text3); }
.qs-ps-chip { padding: 3px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 10.5px; font-family: var(--font-sans); color: var(--text3); background: var(--card); cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.qs-ps-chip:hover { border-color: var(--accent); color: var(--accent); }
.qs-ps-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.04); }
.qs-ps-chip.disabled { opacity: 0.4; cursor: default; }
.qs-ps-chip.disabled:hover { border-color: var(--border); color: var(--text3); }
.qs-ps-group { margin-bottom: 16px; }
.qs-ps-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); padding: 6px 0 8px; display: flex; align-items: center; gap: 8px; }
.qs-ps-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.qs-ps-group-count { font-weight: 400; color: var(--text3); font-size: 10px; }
.qs-ps-group-desc { font-size: 11px; color: var(--text3); line-height: 1.4; padding-bottom: 8px; }
.qs-ps-empty { padding: 16px 0; text-align: center; }
.qs-ps-empty-title { font-size: 13px; font-weight: 500; color: var(--text2); margin-bottom: 4px; }
.qs-ps-empty-desc { font-size: 12px; color: var(--text3); line-height: 1.5; }
/* Paper row — left accent border by match quality */
.qs-paper { padding: 12px 0 12px 10px; border-bottom: 1px solid var(--border); transition: background 0.12s; position: relative; border-left: 3px solid transparent; }
.qs-paper.mq-direct { border-left-color: #4A7C6F; }
.qs-paper.mq-inferred { border-left-color: #607080; }
.qs-paper.mq-weak { border-left-color: rgba(128,128,128,0.2); }
.qs-paper:last-child { border-bottom: none; }
.qs-paper:hover { background: rgba(74,124,111,0.025); }
.qs-paper-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.qs-paper-rank { font-size: 10px; font-weight: 700; color: var(--text3); font-family: var(--font-mono); min-width: 22px; flex-shrink: 0; margin-top: 2px; }
.qs-paper-cite { font-size: 11px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); min-width: 24px; flex-shrink: 0; margin-top: 1px; }
.qs-paper-info { flex: 1; min-width: 0; }
.qs-paper-title { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-paper-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: var(--text3); font-family: var(--font-mono); }
.qs-paper-meta span { white-space: nowrap; }
.qs-paper-authors { font-family: var(--font-sans); color: var(--text2); font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-paper-dot { color: var(--border); }
.qs-paper-snippet { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 5px; padding-left: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Relevance summary */
.qs-paper-relevance { padding-left: 54px; margin-top: 3px; font-size: 12px; color: var(--text2); line-height: 1.4; font-style: italic; }
/* Match signals — dimmed, secondary to relevance summary */
.qs-paper-signals { padding-left: 54px; margin-top: 2px; font-size: 10px; color: var(--text3); line-height: 1.5; opacity: 0.7; }
.qs-paper:hover .qs-paper-signals { opacity: 1; }
.qs-sig-label { font-weight: 600; color: var(--text3); font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 3px; }
.qs-sig-item { display: inline; }
.qs-sig-type { color: var(--text2); font-weight: 500; }
.qs-sig-terms { color: var(--accent); }
/* Graph evidence summary */
.qs-paper-graph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; padding-left: 54px; font-size: 10.5px; }
.qs-ev-chip { padding: 2px 7px; border-radius: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.qs-ev-chip svg { width: 10px; height: 10px; }
.qs-ev-chip.claims { color: #4A7C6F; background: rgba(74,124,111,0.08); }
.qs-ev-chip.atoms { color: #8B6FB0; background: rgba(139,111,176,0.08); }
.qs-ev-chip.families { color: #B8913A; background: rgba(184,145,58,0.08); }
.qs-ev-trace { font-size: 10px; color: var(--text3); font-style: italic; }
.qs-ev-trace.traced { color: var(--accent); font-style: normal; font-weight: 500; }
/* Relevance tag */
.qs-paper-match { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; margin-top: 1px; letter-spacing: 0.2px; }
.qs-paper-match.direct { color: #4A7C6F; background: rgba(74,124,111,0.1); }
.qs-paper-match.inferred { color: #607080; background: rgba(96,112,128,0.1); }
.qs-paper-match.weak { color: var(--text3); background: rgba(128,128,128,0.06); }
/* Quality distribution summary */
.qs-ps-quality-summary { font-size: 11px; color: var(--text3); padding: 0 18px 10px; }
.qs-ps-quality-summary .qs-qs-num { font-weight: 700; font-family: var(--font-mono); }
.qs-ps-quality-summary .qs-qs-direct { color: #4A7C6F; }
.qs-ps-quality-summary .qs-qs-inferred { color: #607080; }
/* Evidence bridge — compact chip layout for paper-search view */
.qs-ps-bridge { padding: 12px 0 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.qs-ps-bridge.compact { padding: 10px 0 6px; margin-top: 16px; border-top: 1px solid var(--border); border-bottom: none; margin-bottom: 0; }
.qs-ps-bridge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); margin-bottom: 8px; }
.qs-ps-bridge.compact .qs-ps-bridge-label { margin-bottom: 6px; }
.qs-ps-bridge-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text); cursor: pointer; transition: color 0.12s; }
.qs-ps-bridge-item:hover { color: var(--accent); }
.qs-ps-bridge-cite { font-size: 11px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); min-width: 20px; }
.qs-ps-bridge-type { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.qs-ps-bridge-type.formula_family { background: #B8913A; }
.qs-ps-bridge-type.claim { background: #607080; }
.qs-ps-bridge-type.evidence_atom { background: #8B6FB0; }
.qs-ps-bridge-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qs-ps-bridge-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 5px; font-size: 11px; color: var(--text2); cursor: pointer; transition: all 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; border: 1px solid var(--border); background: var(--bg); }
.qs-ps-bridge-chip:hover { border-color: var(--accent); color: var(--accent); }
.qs-ps-bridge-chip .qs-ps-bridge-cite { font-size: 10px; min-width: auto; }
.qs-ps-bridge-chip.formula_family { border-color: rgba(184,145,58,0.25); background: rgba(184,145,58,0.04); }
.qs-ps-bridge-chip.claim { border-color: rgba(96,112,128,0.25); background: rgba(96,112,128,0.04); }
.qs-ps-bridge-chip.evidence_atom { border-color: rgba(139,111,176,0.25); background: rgba(139,111,176,0.04); }
/* Show more button for collapsed weak matches */
.qs-ps-show-more { display: block; width: 100%; padding: 8px 0; border: 1px dashed var(--border); border-radius: 6px; background: none; color: var(--text3); font-size: 11.5px; font-family: var(--font-sans); cursor: pointer; transition: all 0.15s; margin-top: 4px; }
.qs-ps-show-more:hover { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.03); }
.qs-ps-expand-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--text3); font-size: 10.5px; font-family: var(--font-sans); cursor: pointer; transition: all 0.12s; }
.qs-ps-expand-btn:hover { border-color: var(--accent); color: var(--accent); }
.qs-ps-expand-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.04); }
.qs-ps-expand-btn svg { width: 12px; height: 12px; }
.qs-right.paper-search-expanded { width: 65%; min-width: 600px; max-width: 1000px; }
.qs-ps-mech-disclaimer { font-size: 10px; color: var(--text3); font-style: italic; margin-bottom: 6px; line-height: 1.4; }
/* Per-row actions */
.qs-paper-actions { display: flex; gap: 4px; margin-top: 6px; padding-left: 54px; opacity: 0; transition: opacity 0.15s; }
.qs-paper:hover .qs-paper-actions { opacity: 1; }
.qs-pa-btn { font-size: 10.5px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--text2); cursor: pointer; font-family: var(--font-sans); transition: all 0.12s; display: inline-flex; align-items: center; gap: 4px; }
.qs-pa-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.04); }
.qs-pa-btn svg { width: 11px; height: 11px; }
/* Related Mechanisms section */
.qs-ps-mechanisms { padding: 14px 0 8px; border-top: 1px solid var(--border); margin-top: 12px; }
.qs-ps-mechanisms.compact { padding: 8px 0 4px; margin-top: 8px; border-top: none; }
.qs-ps-mech-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); margin-bottom: 8px; }
.qs-ps-mechanisms.compact .qs-ps-mech-label { margin-bottom: 5px; }
.qs-ps-mech-list { display: flex; gap: 6px; flex-wrap: wrap; }
.qs-ps-mech { padding: 5px 10px; border: 1px solid rgba(184,145,58,0.2); background: rgba(184,145,58,0.04); border-radius: 6px; font-size: 11.5px; color: #8A6B25; cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 5px; }
.qs-ps-mechanisms.compact .qs-ps-mech { padding: 3px 8px; font-size: 10.5px; border-radius: 4px; }
.qs-ps-mech:hover { background: rgba(184,145,58,0.1); border-color: rgba(184,145,58,0.35); }
.qs-ps-mech-sf { font-size: 9px; color: #8B6FB0; background: rgba(139,111,176,0.1); padding: 1px 5px; border-radius: 3px; }
/* Settings */
.st-coming-badge { display: inline-flex; align-items: center; font: 600 10px var(--font-sans); padding: 2px 8px; border-radius: 4px; background: rgba(210, 153, 34, 0.12); color: #a87d1a; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.st-section { margin-bottom: 32px; }
.st-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.st-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
/* S15.11 — Settings page, retuned to NovusGraph's cool-mint palette
(--accent / --bg / --bg-warm / --border / --text / --text2 / --text3
/ --card from :root). Layout / typography / structure stay from
the user mock; only the colour values switch over so light + dark
themes both render correctly. Danger (sign-out / Clear All) and
"Coming soon" badge keep semantic colours but use accent-tinted
replacements for the warning badge so it feels native. */
#v-settings.view.active { background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; font-family: var(--font-sans); }
.s-container { display: flex; max-width: 1200px; margin: 0 auto; padding: 60px 40px; gap: 60px; align-items: flex-start; }
.s-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 24px; }
.s-profile-card { background-color: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(20,30,28,0.03); }
.s-profile-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.s-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background-color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 14px; overflow: hidden; flex-shrink: 0; letter-spacing: 0.2px; }
.s-profile-info { display: flex; flex-direction: column; }
.s-profile-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.s-profile-sub { font-size: 13px; color: var(--accent); font-weight: 500; }
.s-profile-footer { border-top: 1px solid var(--border); padding-top: 12px; font-size: 13px; color: var(--text3); }
.s-nav-group { margin-bottom: 24px; }
.s-nav-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; padding-left: 12px; }
.s-nav-menu { display: flex; flex-direction: column; gap: 2px; }
.s-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text2); text-decoration: none; font-size: 14.5px; border-radius: 8px; transition: background-color 0.15s, color 0.15s; cursor: pointer; font-family: var(--font-sans); }
.s-nav-item svg { width: 16px; height: 16px; stroke: var(--text3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s; }
.s-nav-item:hover { background-color: var(--bg-warm); color: var(--text); }
.s-nav-item:hover svg { stroke: var(--text2); }
.s-nav-item.active { background-color: var(--accent-light); font-weight: 500; color: var(--accent); }
.s-nav-item.active svg { stroke: var(--accent); }
.s-nav-item.danger { color: #c44; }
.s-nav-item.danger svg { stroke: #c44; }
.s-nav-item.danger:hover { background-color: rgba(204,68,68,0.06); color: #b33; }
.s-content { flex: 1; max-width: 800px; min-width: 0; }
.s-page-header { margin-bottom: 40px; }
.s-page-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.s-page-title-row h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: var(--text); }
.s-badge-warning { background-color: var(--accent-light); color: var(--accent); font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.s-page-desc { font-size: 15px; color: var(--text2); line-height: 1.6; }
.s-section { margin-bottom: 48px; }
.s-section-subtitle { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.s-setting-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); gap: 24px; }
.s-setting-row:last-child { border-bottom: none; }
.s-setting-info { flex: 1; }
.s-setting-name { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.s-setting-desc { font-size: 14px; color: var(--text3); line-height: 1.5; }
.s-toggle-switch { width: 44px; height: 24px; background-color: var(--border); border-radius: 12px; position: relative; cursor: pointer; transition: background-color 0.3s ease; flex-shrink: 0; }
.s-toggle-switch.active { background-color: var(--accent); }
.s-toggle-thumb { width: 20px; height: 20px; background-color: var(--card-hover, #fff); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(20,30,28,0.10); }
.s-toggle-switch.active .s-toggle-thumb { transform: translateX(20px); }
.s-btn-danger { background-color: var(--card); color: #c44; border: 1px solid color-mix(in srgb, #c44 30%, var(--border)); padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: var(--font-sans); }
.s-btn-danger:hover { background-color: rgba(204,68,68,0.06); border-color: #c44; }
.s-info-box { background-color: var(--bg-warm); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; font-size: 14.5px; color: var(--text2); line-height: 1.6; }
@media (max-width: 880px) {
.s-container { flex-direction: column; gap: 24px; padding: 40px 20px; }
.s-sidebar { width: 100%; position: static; }
}
.st-row:last-child { border-bottom: none; }
.st-row-info { flex: 1; min-width: 0; }
.st-row-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.st-row-desc { font-size: 12px; color: var(--text3); line-height: 1.5; }
.st-notice { font-size: 12.5px; color: var(--text2); line-height: 1.65; padding: 12px 16px; background: color-mix(in srgb, var(--bg-warm) 60%, transparent); border-radius: 8px; border: 1px solid var(--border); }
.st-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.st-toggle input { opacity: 0; width: 0; height: 0; }
.st-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: 0.2s; }
.st-toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.st-toggle input:checked + .st-toggle-slider { background: var(--accent); }
.st-toggle input:checked + .st-toggle-slider::before { transform: translateX(18px); }
.st-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; font-family: var(--font-sans); cursor: pointer; background: none; color: var(--text2); transition: all 0.15s; flex-shrink: 0; }
.st-btn:hover { border-color: var(--text2); color: var(--text); }
.st-btn-danger { color: #a05a5a; border-color: rgba(160,90,90,0.3); }
.st-btn-danger:hover { background: rgba(160,90,90,0.08); border-color: #a05a5a; color: #a05a5a; }
/* billing-mvp-v1 Phase 3 FE — Settings → Billing section */
.st-balance-pill { font: 600 16px var(--font-sans); color: var(--text); padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--bg-warm) 60%, transparent); flex-shrink: 0; }
.st-balance-pill.is-low { color: #a05a5a; border-color: rgba(160,90,90,0.4); }
.st-topup-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.st-topup-buttons .st-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
.st-tx-list { font-size: 12.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.st-tx-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--bg-warm) 30%, transparent); }
.st-tx-row-left { color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-tx-row-right { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
.st-tx-row-right.is-recharge { color: #2c7a4b; }
.st-tx-row-right.is-consumption { color: #a05a5a; }
.st-tx-empty { color: var(--text3); font-style: italic; padding: 6px 0; }
/* Coverage bars */
.cov-item { padding: 8px 0; }
.cov-item + .cov-item { border-top: 1px solid var(--border); padding-top: 10px; }
.cov-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cov-label { font-size: 13px; color: var(--text); font-weight: 500; }
.cov-pct { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.cov-pct.high { color: var(--fam-high); }
.cov-pct.med { color: var(--fam-med); }
.cov-pct.low { color: var(--fam-low); }
.cov-bar { height: 6px; border-radius: 3px; background: var(--bg-warm); overflow: hidden; }
.cov-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.cov-fill.high { background: var(--fam-high); }
.cov-fill.med { background: var(--fam-med); }
.cov-fill.low { background: var(--fam-low); }
.cov-detail { font-size: 10px; color: var(--text3); margin-top: 4px; font-family: var(--font-mono); }
/* Quality breakdown */
.dash-quality { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .dash-quality { grid-template-columns: 1fr; } }
.qual-block { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: var(--d-card-pad) var(--d-card-pad-x); }
.qual-block h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text3); margin-bottom: 6px; }
.qual-hero-line { font-size: 13px; color: var(--text); margin-bottom: 10px; font-weight: 500; }
.qual-hero-line strong { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.qual-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.qual-row .ql { color: var(--text3); }
.qual-row .qv { font-weight: 600; font-family: var(--font-mono); color: var(--text2); }
.qual-row .qv.high { color: var(--fam-high); }
.qual-row .qv.med { color: var(--fam-med); }
.qual-row .qv.low { color: var(--fam-low); }
.qual-summary { font-size: 11px; color: var(--text3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.45; font-style: italic; }
/* Super family map cards */
.dash-sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sf-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; cursor: pointer; transition: all 0.15s; }
.sf-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(45,43,40,0.06); }
.sf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sf-name { font-size: 15px; font-weight: 700; color: var(--text); }
.sf-count { font-size: 11px; color: var(--text3); font-weight: 500; }
.sf-mechanisms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sf-mech { font-size: 11px; padding: 3px 9px; border-radius: 5px; background: var(--bg-warm); color: var(--text2); font-weight: 500; }
.sf-footer { font-size: 11px; color: var(--accent); font-weight: 600; }
/* Entry points */
.dash-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.entry-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden; }
.entry-card:hover { border-color: var(--accent); box-shadow: 0 2px 14px rgba(74,124,111,0.1); transform: translateY(-1px); }
.entry-card .ec-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.entry-card .ec-icon svg { width: 18px; height: 18px; }
.entry-card .ec-icon.paper { background: var(--accent-light); color: var(--accent); }
.entry-card .ec-icon.family { background: var(--fam-high-bg); color: var(--fam-high); }
.entry-card .ec-icon.idea { background: var(--level-reuse); color: var(--level-reuse-t); }
.entry-card .ec-icon.quality { background: var(--fam-med-bg); color: var(--fam-med); }
.entry-card h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.entry-card p { font-size: 12px; color: var(--text2); line-height: 1.45; }
.entry-card .ec-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text3); opacity: 0; transition: opacity 0.15s; }
.entry-card:hover .ec-arrow { opacity: 1; }
/* Atom type horizontal bars */
.atom-hbars { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
.atom-hbar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.atom-hbar-label { font-size: 12px; color: var(--text2); width: 120px; flex-shrink: 0; }
.atom-hbar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-warm); overflow: hidden; }
.atom-hbar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.5s ease; }
.atom-hbar-value { font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text); width: 50px; text-align: right; flex-shrink: 0; }
/* ── Paper Detail Summary Strip ── */
.detail-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 4px; align-items: center; }
.ds-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 10px; border-radius: 6px; font-weight: 500; white-space: nowrap; }
.ds-chip.ds-green { background: var(--fam-high-bg); color: var(--fam-high); }
.ds-chip.ds-amber { background: var(--fam-med-bg); color: var(--fam-med); }
.ds-chip.ds-gray { background: var(--bg-warm); color: var(--text3); }
.ds-chip.ds-blue { background: var(--level-reuse); color: var(--level-reuse-t); }
.ds-chip.ds-accent { background: var(--accent-light); color: var(--accent); }
.ds-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }
/* Trace evidence button */
.trace-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--accent); background: var(--accent-light); border: none; cursor: pointer; font-family: var(--font-sans); transition: all 0.12s; }
.trace-btn:hover { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); }
.trace-btn svg { width: 12px; height: 12px; }
/* Evidence tracing action buttons */
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 2px; }
.action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; font-family: var(--font-sans); border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.action-trace { background: color-mix(in srgb, #2a7 6%, var(--card)); border-color: color-mix(in srgb, #2a7 35%, var(--border)); }
.action-trace:hover { border-color: #2a7; color: #2a7; background: color-mix(in srgb, #2a7 12%, var(--bg)); }
.action-graph { background: color-mix(in srgb, #48b 6%, var(--card)); border-color: color-mix(in srgb, #48b 35%, var(--border)); }
.action-graph:hover { border-color: #48b; color: #48b; background: color-mix(in srgb, #48b 12%, var(--bg)); }
.action-source { border-color: color-mix(in srgb, var(--text2) 15%, var(--border)); color: var(--text2); font-weight: 500; }
.action-source:hover { border-color: var(--text2); color: var(--text); }
.ev-card-selected { background: color-mix(in srgb, var(--accent) 5%, var(--card)) !important; border-left: 3px solid var(--accent) !important; }
.ev-locate-link { font-size: 10.5px; color: var(--accent); cursor: pointer; margin-left: auto; font-weight: 500; transition: all 0.15s; text-decoration: none; }
.ev-locate-link:hover { text-decoration: underline; color: color-mix(in srgb, var(--accent) 80%, #000); }
.ev-located-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); font-size: 11.5px; color: var(--text2); margin-bottom: 12px; transition: opacity 0.3s; }
.ev-located-bar .ev-loc-label { font-weight: 600; color: var(--accent); }
.ev-located-bar .ev-loc-dismiss { margin-left: auto; cursor: pointer; color: var(--text3); font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.ev-located-bar .ev-loc-dismiss:hover { background: var(--border); }
/* Family link in equations */
.eq-fam-link { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); cursor: pointer; font-family: var(--font-sans); border: none; transition: all 0.12s; margin-top: 4px; }
.eq-fam-link:hover { background: var(--accent-light); text-decoration: underline; }
/* Paper families tab */
.paper-fam-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; transition: all 0.15s; }
.paper-fam-card:hover { box-shadow: 0 2px 10px rgba(45,43,40,0.06); }
.paper-fam-head { display: flex; align-items: flex-start; gap: 10px; }
.paper-fam-id { font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: var(--accent-light); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; font-weight: 500; margin-top: 2px; }
.paper-fam-info { flex: 1; }
.paper-fam-name { font-size: 14px; font-weight: 600; color: var(--text); }
.paper-fam-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.paper-fam-view { margin-top: 8px; }
/* Paper opportunity card */
.paper-opp-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; }
.paper-opp-target { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; margin-bottom: 6px; }
.paper-opp-target.video_world_models { background: color-mix(in srgb, #4A7C9F 10%, var(--bg)); color: #4A7C9F; }
.paper-opp-target.autoregressive_video { background: color-mix(in srgb, #6B5B8D 10%, var(--bg)); color: #6B5B8D; }
.paper-opp-target.efficient_inference { background: color-mix(in srgb, #5A8A6B 10%, var(--bg)); color: #5A8A6B; }
.paper-opp-target.multimodal_reasoning { background: color-mix(in srgb, #8A6B5A 10%, var(--bg)); color: #8A6B5A; }
.paper-opp-target.rl_and_planning { background: color-mix(in srgb, #5A7A8A 10%, var(--bg)); color: #5A7A8A; }
.paper-opp-idea { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 6px; }
.paper-opp-source { font-size: 11px; color: var(--text3); }
/* Empty state */
.detail-empty { text-align: center; padding: 40px 20px; }
.detail-empty svg { display: block; margin: 0 auto 12px; opacity: 0.25; }
.detail-empty p { font-size: 13px; color: var(--text3); line-height: 1.5; }
/* ── Graph status line for paper cards ── */
.pc-graph { display: flex; gap: 0; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 11px; }
.gs-item { color: var(--text3); white-space: nowrap; }
.gs-sep { color: var(--border); margin: 0 5px; font-size: 9px; }
.gs-item.gs-on { color: var(--text2); }
.gs-item.gs-off { color: var(--text3); opacity: 0.6; }
.gs-item.gs-strong { color: var(--fam-high); font-weight: 600; }
.gs-item.gs-moderate { color: var(--fam-med); }
.gs-item.gs-partial { color: var(--fam-low); }
.gs-item.gs-none { color: var(--text3); opacity: 0.5; }
.gs-item.gs-hyp { color: var(--fam-role-distill); font-weight: 500; }
.qb.eq { background: color-mix(in srgb, #6B5B8D 10%, var(--bg)); color: #6B5B8D; }
.qb.claim { background: var(--overlay-reused); color: var(--overlay-reused-t); }
/* ── Filter chip toggles (Families page) ── */
.fc-indicator { display: inline-flex; gap: 3px; margin-left: auto; }
.fc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fc-dot.idea { background: var(--fam-role-distill); }
.fc-dot.canon { background: var(--fam-role-canon); }
.fc-dot.lineage { background: var(--accent); }
/* ── Ideas page (Transfer Opportunities) ── */
#v-ideas.active { display: block; height: 100vh; overflow: hidden; }
#v-ideas .ideas-shell { display: flex; height: 100%; overflow: hidden; }
.ideas-list-pane { flex: 1; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* .ideas-detail-pane shape is shared via inspector-section-v1. */
.ideas-detail-pane.collapsed { width: 0; overflow: hidden; opacity: 0; }
/* .ideas-header / .ideas-title-row / .ideas-search shape is shared by
the page-header-v1 rules near the top of this file. */
.ideas-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.ideas-toolbar select { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-family: var(--font-sans); color: var(--text2); background: transparent; cursor: pointer; }
.ideas-scroll { padding: 8px 40px 20px; max-width: 980px; }
/* Idea card (list) */
/* .ic base / hover / selected are shared via object-card-v1.
.ic-badges chrome shared too — keep page-specific margin-bottom
+ child reset. .ic-transfer-pair / .ic-idea typography are
shared; only page-specific layout flags remain. */
.ic-badges { margin-bottom: 6px; }
.ic-badges > * { margin-top: 0; margin-bottom: 0; }
.ic-transfer-pair { margin-bottom: 4px; letter-spacing: -0.01em; }
.ic-idea { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-source { font-size: 11px; color: var(--text3); margin-top: 6px; }
/* Target area badge (reusable) */
.ta-badge { display: inline-flex; align-items: center; font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.ta-badge.video_world_models { background: color-mix(in srgb, #4A7C9F 10%, var(--bg)); color: #4A7C9F; }
.ta-badge.autoregressive_video { background: color-mix(in srgb, #6B5B8D 10%, var(--bg)); color: #6B5B8D; }
.ta-badge.efficient_inference { background: color-mix(in srgb, #5A8A6B 10%, var(--bg)); color: #5A8A6B; }
.ta-badge.multimodal_reasoning { background: color-mix(in srgb, #8A6B5A 10%, var(--bg)); color: #8A6B5A; }
.ta-badge.rl_and_planning { background: color-mix(in srgb, #5A7A8A 10%, var(--bg)); color: #5A7A8A; }
.novelty-badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.novelty-badge.incremental { background: var(--fam-med-bg); color: var(--fam-med); }
.novelty-badge.promising_transfer { background: var(--fam-high-bg); color: var(--fam-high); }
.novelty-badge.speculative { background: var(--fam-low-bg); color: var(--fam-low); }
/* Idea detail pane */
/* .id-head padding is shared via inspector-section-v1. */
.id-back { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text3); font-family: var(--font-sans); padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.id-back:hover { color: var(--text); }
/* .id-title font is shared via inspector-section-v1 (17 px serif 700;
margin-bottom 10 px override is in the shared block). */
.id-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
/* .id-section margin + .id-section-label base font are shared via
inspector-section-v1; the semantic colour modifiers below are kept
as-is because they override the shared base colour intentionally. */
.id-section-label.why { color: var(--accent); }
.id-section-label.conditions { color: var(--text3); }
.id-section-label.risks { color: var(--fam-low); }
.id-section-label.validation { color: var(--accent); }
.id-section-label.evidence { color: var(--text3); }
.id-text { font-size: 12px; color: var(--text2); line-height: 1.6; }
.id-list { margin: 2px 0 0 16px; padding: 0; font-size: 12px; line-height: 1.6; }
.id-list.risk-list { color: var(--fam-low); }
.id-list.cond-list { color: var(--text2); }
.id-nav { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.id-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--text2); cursor: pointer; font-family: var(--font-sans); transition: all 0.12s; }
.id-nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.id-evidence-chip { font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 4px; background: var(--accent-light); color: var(--accent); cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 3px; }
.id-evidence-chip:hover { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); text-decoration: underline; }
.id-score-bar { height: 4px; border-radius: 2px; background: var(--border); margin-top: 4px; overflow: hidden; }
.id-score-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s; }
.detail-empty .de-title { font-size: 14px; font-weight: 500; color: var(--text2); margin-bottom: 4px; }
/* ── Formal Tricks page ── */
#v-tricks.active { display: block; height: 100vh; overflow: hidden; }
#v-tricks .tk-shell { display: flex; height: 100%; overflow: hidden; }
.tk-list-pane { flex: 1; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* .tk-detail-pane shape is shared via inspector-section-v1. */
.tk-detail-pane.collapsed { width: 0; overflow: hidden; opacity: 0; }
/* .tk-header / .tk-title-row / .tk-search shape is shared by
the page-header-v1 rules near the top of this file. */
.tk-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.tk-toolbar select { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-family: var(--font-sans); color: var(--text2); background: transparent; cursor: pointer; }
.tk-scroll { padding: 8px 40px 20px; max-width: 980px; }
/* Trick card (list) */
/* .tkc base / hover / selected are shared via object-card-v1.
Keep the fadeSlideIn entrance + page-specific text trimming. */
.tkc { animation: fadeSlideIn 0.25s ease both; }
.tkc-name { margin-bottom: 3px; }
.tkc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
/* .tkc-badges chrome shared via object-card-v1. */
.tkc-badge { font-size: 10px; padding: 1px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tkc-badge.q-good { background: var(--fam-high-bg); color: var(--fam-high); }
.tkc-badge.q-mixed { background: var(--fam-med-bg); color: var(--fam-med); }
.tkc-badge.q-overly_generic { background: var(--fam-low-bg); color: var(--fam-low); }
.tkc-badge.q-needs_split { background: color-mix(in srgb, #8A6B5A 10%, var(--bg)); color: #8A6B5A; }
.tkc-badge.kind-primitive { background: color-mix(in srgb, var(--text3) 12%, var(--bg)); color: var(--text3); font-style: italic; }
.tkc-badge.kind-reusable { background: var(--fam-high-bg); color: var(--fam-high); }
.tkc-badge.transfer-no { background: none; color: var(--text3); font-size: 9px; opacity: 0.7; padding: 0; font-weight: 400; font-style: italic; }
.tkc-cd { font-size: 10px; padding: 1px 8px; border-radius: 4px; font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); }
.tkc-domain-pills { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
.tkc-domain { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); color: var(--text2); }
.tkc-stat { font-size: 11px; color: var(--text3); margin-top: 4px; }
/* Trick detail pane */
/* .td-head padding is shared via inspector-section-v1. */
.td-back { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text3); font-family: var(--font-sans); padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.td-back:hover { color: var(--text); }
/* .td-title font is shared via inspector-section-v1. */
.td-id { font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.td-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
/* .td-body padding + the head/body border-top + .td-section margin +
.td-section h4 label are shared via inspector-section-v1.
(The Tricks-only border-top is asserted in the shared block.) */
.td-desc-box { font-size: 13px; color: var(--text2); line-height: 1.6; padding: 10px 14px; background: color-mix(in srgb, var(--accent) 4%, var(--bg)); border-radius: 8px; border-left: 3px solid var(--accent); margin-bottom: 14px; }
.td-problem { font-size: 12px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }
.td-aliases { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.td-alias { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, var(--bg)); color: var(--text2); font-family: var(--font-mono); }
.td-rep-trick { font-size: 12px; color: var(--text2); line-height: 1.5; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; }
.td-domain-bar { display: flex; gap: 3px; flex-wrap: wrap; }
.td-domain-chip { font-size: 11px; padding: 3px 10px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); font-weight: 500; }
.td-role-chip { font-size: 11px; padding: 3px 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 6%, var(--bg)); color: var(--text2); }
.td-fam-link { font-size: 12px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.12s; margin-bottom: 4px; color: var(--text2); }
.td-fam-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.td-cd-meter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.td-cd-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.td-cd-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }
.td-cd-label { font-size: 13px; font-weight: 600; color: var(--accent); min-width: 80px; }
/* Auth UI */
.sb-auth { padding: 8px 12px; margin-top: 4px; }
.sb-auth-user { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: default; border-radius: 6px; }
/* S15.10 — Profile entry in the sidebar footer uses .sb-item so it
matches Home / Problem Chronicle / Settings exactly (size, font,
active-state colour). Only override: replace the 16px SVG icon
with a 16px circular initials chip. */
.sb-item-profile .sb-profile-avatar { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; font: 600 8.5px var(--font-sans); display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.2px; line-height: 1; }
/* S15.10 — Public Profile page (alphaXiv-style layout). */
.profile-page { max-width: 980px; margin: 0 auto; padding: 32px 24px 48px; }
.profile-header { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.profile-avatar-big { width: 120px; height: 120px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 56px var(--font-sans); letter-spacing: 0.5px; overflow: hidden; }
.profile-name { font: 600 28px var(--font-serif); color: var(--text); margin-top: 4px; }
.profile-handle { font: 400 13px var(--font-sans); color: var(--text3); }
.profile-edit-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: transparent; border: none; cursor: pointer; font: 500 13px var(--font-sans); color: var(--text2); border-radius: 6px; margin-top: 4px; }
.profile-edit-link:hover { color: var(--accent); background: var(--accent-light); }
.profile-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.profile-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 8px; }
.profile-stat-n { font: 600 16px var(--font-sans); color: var(--text); line-height: 1.1; }
.profile-stat-l { font: 400 11.5px var(--font-sans); color: var(--text3); margin-top: 2px; }
.profile-stat-sep { width: 1px; height: 28px; background: var(--border); margin: 0 4px; }
.profile-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font: 500 13px var(--font-sans); color: var(--text2); }
.profile-action-btn:hover:not(:disabled) { background: var(--bg-warm); color: var(--text); }
.profile-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.profile-action-btn.profile-action-danger { color: #c44; }
.profile-action-btn.profile-action-danger:hover { background: rgba(204,68,68,0.08); }
.profile-tabs { display: flex; justify-content: center; gap: 32px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.profile-tab { background: transparent; border: none; padding: 10px 4px; margin-bottom: -1px; font: 500 14px var(--font-sans); color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; }
.profile-tab:hover { color: var(--text2); }
.profile-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.profile-body { display: flex; gap: 32px; align-items: flex-start; }
.profile-body-main { flex: 1; min-width: 0; }
.profile-side { width: 280px; flex-shrink: 0; }
.profile-chips { display: flex; gap: 16px; margin-bottom: 24px; padding: 4px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; width: fit-content; }
.profile-chip { font: 500 13px var(--font-sans); color: var(--text3); padding: 6px 4px; cursor: pointer; }
.profile-chip:hover { color: var(--text2); }
.profile-chip.is-active { color: var(--accent); font-weight: 600; }
.profile-empty { text-align: center; padding: 60px 0; font: 400 13px var(--font-sans); color: var(--text3); }
.profile-side-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.profile-side-title { font: 600 13px var(--font-sans); color: var(--text); margin: 0 0 12px; }
.profile-side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tag { font: 400 12px var(--font-sans); color: var(--text2); background: var(--bg-warm); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 880px) {
.profile-body { flex-direction: column; }
.profile-side { width: 100%; }
}
.sb-auth-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; font-family: var(--font-sans); flex-shrink: 0; overflow: hidden; }
.sb-auth-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Cap info to the avatar's height so the flex container never
grows past 22 px — that's what locks the avatar y between
expanded and collapsed states. ``overflow: hidden`` is
defensive; the text already truncates with ellipsis. */
.sb-auth-info { flex: 1; min-width: 0; height: 22px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
/* Tight line-heights so the two-line info column doesn't push
``.sb-auth-user`` taller than the avatar — keeps the avatar at
the same y in both expanded and collapsed sidebar states. */
.sb-auth-name { font-size: 11.5px; line-height: 1; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-auth-email { font-size: 10px; line-height: 1; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.sb-auth-login-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--text2); font-size: 11.5px; font-family: var(--font-sans); cursor: pointer; transition: all 0.15s; }
.sb-auth-login-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(74,124,111,0.04); }
.sb-auth-login-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sb-auth-user-icon { display: none; }
/* Keep ``.sb-auth`` container chrome identical across expanded /
collapsed so the avatar doesn't jump position when the sidebar
width changes. Previously we stripped the border-top and zeroed
the inner ``.sb-auth-user`` padding for collapsed, which yanked
the avatar 4 px left and 7 px up — visible as a snap during
the transition. Now only the text inside (``.sb-auth-info``)
is hidden in collapsed; the avatar's coordinates stay put.
Border line is made invisible (transparent color) rather than
removed, so the 1 px space is preserved and the avatar doesn't
shift up by a pixel when the line disappears. */
.sidebar.collapsed .sb-auth { border-top-color: transparent; }
.sidebar.collapsed .sb-auth-login-btn { border: none; padding: 0; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-warm); font-size: 0; gap: 0; }
.sidebar.collapsed .sb-auth-login-icon { display: none; }
.sidebar.collapsed .sb-auth-user-icon { display: block; width: 14px; height: 14px; }
.sidebar.collapsed .sb-auth-login-btn:hover { background: var(--border); border-color: transparent; }
.sidebar.collapsed .sb-auth-info { display: none; }
/* Personal Research Hub menu */
.sb-user-menu { position: absolute; bottom: 60px; left: 12px; right: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 28px rgba(0,0,0,0.10); z-index: 100; display: none; max-height: calc(100vh - 120px); overflow-y: auto; }
.sb-user-menu.open { display: block; }
.sb-user-menu::-webkit-scrollbar { width: 4px; }
.sb-user-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sb-hub-card { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.sb-hub-card-row { display: flex; align-items: center; gap: 10px; }
.sb-hub-card-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.sb-hub-card-plan { font-size: 10px; color: var(--accent); font-weight: 500; margin-top: 1px; }
.sb-hub-card-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--text3); }
.sb-hub-card-stats span { display: flex; align-items: center; gap: 3px; }
.sb-hub-card-stats strong { color: var(--text2); font-weight: 600; }
.sb-hub-section { padding: 8px 16px 4px; font-size: 9.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; }
.sb-user-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 12px; color: var(--text2); cursor: pointer; transition: background 0.1s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-sans); }
.sb-user-menu-item:hover { background: var(--bg-warm); color: var(--text); }
.sb-user-menu-item.danger { color: #c44; }
.sb-user-menu-item.danger:hover { background: rgba(204,68,68,0.06); }
.sb-user-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.55; }
.sb-user-menu-item .hub-badge { margin-left: auto; font-size: 9px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--text3) 10%, var(--bg)); color: var(--text3); font-weight: 500; flex-shrink: 0; }
.sb-user-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* Hub pages */
.hub-page { max-width: 640px; margin: 0 auto; padding: 40px 24px; }
.hub-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.hub-page-header h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.hub-back { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 14px; color: var(--text3); cursor: pointer; transition: all 0.12s; font-family: var(--font-sans); }
.hub-back:hover { border-color: var(--accent); color: var(--accent); }
.hub-empty { text-align: center; padding: 60px 20px; }
.hub-empty-icon { margin-bottom: 20px; }
.hub-empty h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.hub-empty p { font-size: 13px; color: var(--text3); line-height: 1.7; max-width: 420px; margin: 0 auto 24px; }
.hub-empty-actions { display: flex; gap: 10px; justify-content: center; }
.hub-action-btn { padding: 8px 20px; border-radius: 7px; font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: all 0.12s; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.hub-action-btn:hover { background: #3D6B5F; }
.hub-action-btn.secondary { background: none; color: var(--accent); }
.hub-action-btn.secondary:hover { background: var(--accent-light); }
/* Workspace page */
.hub-ws-card { padding: 16px 20px; background: var(--bg-warm); border-radius: 10px; margin-bottom: 24px; }
.hub-ws-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.hub-ws-value { font-size: 15px; font-weight: 600; color: var(--text); font-family: var(--font-serif); }
.hub-ws-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.hub-ws-stat { padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.hub-ws-num { display: block; font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.hub-ws-desc { font-size: 11px; color: var(--text3); margin-top: 2px; display: block; }
.hub-ws-sections { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hub-ws-section-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13px; color: var(--text2); cursor: pointer; transition: background 0.1s; border-bottom: 1px solid var(--border); }
.hub-ws-section-item:last-child { border-bottom: none; }
.hub-ws-section-item:hover { background: var(--bg-warm); }
.hub-ws-soon { font-size: 10px; color: var(--text3); padding: 2px 8px; background: color-mix(in srgb, var(--text3) 8%, var(--bg)); border-radius: 4px; }
/* Integrations page */
.hub-integrations-list { display: flex; flex-direction: column; gap: 10px; }
.hub-integ-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.12s; }
.hub-integ-card:hover { border-color: var(--accent); background: var(--accent-light); }
.hub-integ-icon { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.hub-integ-info { flex: 1; min-width: 0; }
.hub-integ-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.hub-integ-desc { font-size: 11.5px; color: var(--text3); line-height: 1.5; }
/* Appearance modal */
.hub-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.2s; }
.hub-modal-overlay.open { opacity: 1; visibility: visible; }
.hub-modal { background: var(--card); border-radius: 14px; width: 420px; max-width: 92vw; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
.hub-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; }
.hub-modal-header h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.hub-modal-close { background: none; border: none; font-size: 22px; color: var(--text3); cursor: pointer; padding: 0 4px; line-height: 1; }
.hub-modal-close:hover { color: var(--text); }
.hub-modal-body { padding: 20px 24px 28px; }
.hub-setting-group { margin-bottom: 20px; }
.hub-setting-group:last-child { margin-bottom: 0; }
.hub-setting-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.hub-setting-desc { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.hub-setting-options { display: flex; gap: 6px; }
.hub-opt { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: none; font-size: 12px; color: var(--text3); cursor: pointer; font-family: var(--font-sans); transition: all 0.12s; }
.hub-opt:hover { border-color: var(--accent); color: var(--accent); }
.hub-opt.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.hub-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); font-size: 12px; color: var(--text2); font-family: var(--font-sans); z-index: 300; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.hub-toast.show { opacity: 1; }
/* Auth modal */
.auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.2s; }
.auth-overlay.open { opacity: 1; visibility: visible; }
.auth-modal { background: var(--card); border-radius: 14px; width: 380px; max-width: 92vw; box-shadow: 0 8px 40px rgba(0,0,0,0.12); overflow: hidden; transform: translateY(10px); transition: transform 0.2s; }
.auth-overlay.open .auth-modal { transform: translateY(0); }
.auth-modal-header { padding: 28px 28px 0; text-align: center; }
.auth-modal-header h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.auth-modal-header p { font-size: 12.5px; color: var(--text3); line-height: 1.5; }
.auth-modal-body { padding: 20px 28px 28px; }
.auth-modal-body .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.auth-modal-body .auth-divider::before, .auth-modal-body .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-input { display: block; width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: var(--font-sans); color: var(--text); background: var(--bg); outline: none; transition: border-color 0.15s; }
.auth-input:focus { border-color: var(--accent); }
.auth-input + .auth-input { margin-top: 10px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: all 0.15s; }
.auth-btn-primary { background: var(--accent); color: #fff; margin-top: 12px; }
.auth-btn-primary:hover { background: #3D6B5F; }
.auth-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn-oauth { background: var(--bg); border: 1px solid var(--border); color: var(--text); margin-top: 10px; }
.auth-btn-oauth:hover { border-color: var(--accent); color: var(--accent); }
.auth-btn-oauth svg { width: 16px; height: 16px; }
.auth-error { font-size: 11.5px; color: #c44; margin-top: 8px; text-align: center; min-height: 16px; }
.auth-footer { text-align: center; margin-top: 14px; font-size: 11.5px; color: var(--text3); }
.auth-footer a { color: var(--accent); cursor: pointer; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--text3); font-size: 18px; line-height: 1; padding: 4px; }
.auth-close:hover { color: var(--text); }
/* ── Formula Knowledge Admin ── */
.fk-status-card { padding: 16px 20px; background: var(--bg-warm); border-radius: 10px; margin-bottom: 24px; border: 1px solid var(--border); }
.fk-status-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fk-status-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fk-status-badge { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; text-transform: capitalize; }
.fk-badge-fresh { background: rgba(46,160,67,0.12); color: #2ea043; }
.fk-badge-stale { background: rgba(210,153,34,0.12); color: #d29a22; }
.fk-badge-refreshing { background: rgba(56,132,244,0.12); color: #3884f4; }
.fk-badge-partial_failure { background: rgba(196,68,68,0.12); color: #c44444; }
.fk-badge-completed { background: rgba(46,160,67,0.12); color: #2ea043; }
.fk-badge-failed { background: rgba(196,68,68,0.12); color: #c44444; }
.fk-badge-pending { background: rgba(140,140,140,0.12); color: var(--text3); }
.fk-status-meta { font-size: 12px; color: var(--text3); line-height: 1.6; margin-bottom: 12px; }
.fk-status-actions { display: flex; gap: 8px; }
.fk-btn-refresh { background: var(--accent); color: white; border-color: var(--accent); }
.fk-btn-refresh:hover { opacity: 0.9; color: white; border-color: var(--accent); }
.fk-btn-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.fk-ws-live { font-size: 10px; color: #2ea043; padding: 2px 8px; background: rgba(46,160,67,0.08); border-radius: 4px; font-weight: 600; }
/* Job table */
.fk-job-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fk-job-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fk-job-table td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); color: var(--text2); }
.fk-job-row { cursor: pointer; transition: background 0.1s; }
.fk-job-row:hover { background: var(--bg-warm); }
.fk-job-id { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.fk-empty { font-size: 13px; color: var(--text3); padding: 24px 0; text-align: center; }
/* Summary card */
.fk-summary-card { padding: 16px 20px; background: var(--bg-warm); border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border); }
.fk-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.fk-summary-label { color: var(--text3); }
.fk-link { color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 12px; }
.fk-link:hover { text-decoration: underline; }
.fk-notice { font-size: 12.5px; line-height: 1.5; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.fk-notice-warn { background: rgba(210,153,34,0.08); color: #b8860b; border: 1px solid rgba(210,153,34,0.2); }
.fk-notice-info { background: rgba(56,132,244,0.08); color: #3884f4; border: 1px solid rgba(56,132,244,0.2); }
[data-theme="dark"] .fk-notice-warn { color: #e8b84a; }
[data-theme="dark"] .fk-notice-info { color: #6eaaff; }
/* Job detail */
.fk-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.fk-detail-item { padding: 10px 14px; background: var(--bg-warm); border-radius: 8px; border: 1px solid var(--border); }
.fk-detail-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.fk-detail-value { font-size: 14px; font-weight: 500; color: var(--text); }
.fk-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.fk-phase-ok { color: #2ea043; font-weight: 700; }
.fk-phase-fail { color: #c44; font-weight: 700; }
.fk-phase-skip { color: var(--text3); }
.fk-phase-table td { font-size: 13px; }
.fk-phase-details-row td { padding-top: 0; border-bottom: none; }
.fk-phase-details { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-detail-chip { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--text3) 8%, var(--bg)); color: var(--text3); font-family: var(--font-mono); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.fk-raw-json { margin-top: 24px; }
.fk-json-pre { font-size: 11px; font-family: var(--font-mono); background: var(--bg-warm); padding: 14px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; max-height: 400px; overflow-y: auto; color: var(--text2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* Refresh modal */
.fk-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; align-items: center; justify-content: center; }
.fk-modal-overlay.open { display: flex; }
.fk-modal { background: var(--bg); border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
.fk-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 0; }
.fk-modal-header h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.fk-modal-close { background: none; border: none; font-size: 22px; color: var(--text3); cursor: pointer; padding: 4px; line-height: 1; }
.fk-modal-close:hover { color: var(--text); }
.fk-modal-body { padding: 16px 20px; }
.fk-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.fk-btn-confirm { background: var(--accent); color: white; border-color: var(--accent); font-weight: 500; }
.fk-btn-confirm:hover { opacity: 0.9; color: white; border-color: var(--accent); }
.fk-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.fk-form-group { margin-bottom: 16px; }
.fk-form-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 8px; display: block; }
.fk-radio-group { display: flex; flex-direction: column; gap: 4px; }
.fk-radio { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; gap: 0 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s; align-items: start; }
.fk-radio:hover { background: var(--bg-warm); }
.fk-radio input { grid-row: 1 / 3; margin-top: 3px; accent-color: var(--accent); }
.fk-radio > span:first-of-type { font-size: 13px; font-weight: 500; color: var(--text); }
.fk-radio-desc { font-size: 11px; color: var(--text3); line-height: 1.4; grid-column: 2; }
.fk-checkbox { grid-template-rows: auto; }
.fk-modal-warning { font-size: 12px; color: var(--text3); line-height: 1.5; padding: 10px 12px; background: rgba(210,153,34,0.06); border: 1px solid rgba(210,153,34,0.15); border-radius: 6px; }
@media (max-width: 600px) {
.fk-detail-grid { grid-template-columns: 1fr 1fr; }
.fk-modal { width: 95vw; }
}
/* ── Field Map ── */
#v-field-map.active { display: block; height: 100vh; overflow: hidden; }
.fm-shell { display: flex; height: 100%; overflow: hidden; position: relative; }
/* field-map-align-v1: body width drops 1100 → 980 to match the
page-header max-width used everywhere else; top padding goes to 0
so the shared .page-header (which has its own padding-top:14px)
owns the leading whitespace. */
/* field-map-layout-v1: drop max-width + margin:auto so the main pane
fills its flex slot (matches the other workbench pages). The
shared .page-header inside still has its own 980 max-width. */
.fm-content { flex: 1; overflow-y: auto; padding: 0 36px 60px; min-width: 0; }
.fm-header { margin-bottom: 8px; }
.fm-title { font: 600 26px/1.3 var(--font-serif); color: var(--text); letter-spacing: -0.3px; }
.fm-meta { font: 400 13px/1.5 var(--font-sans); color: var(--text3); margin-top: 6px; }
/* Section nav */
/* field-map-align-v1: nav now uses the shared .tabs / .tab pill
classes (same shape as paperDetail tabs). The fm-nav wrapper
keeps its sticky-on-scroll behaviour and bottom rule but defers
to .tab for the pill shape inside. */
.fm-nav { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); display: flex; gap: 4px; flex-wrap: wrap; }
.fm-nav-item { /* alias of .tab — kept for backwards compatibility with
any legacy markup; new markup should use .tab + .active */ }
/* field-map-align-v1: section divider tightened — title font drops
17 → 14 px and switches to serif so it sits at the same visual
weight as .section-block h4 used in paperDetail's right pane. The
underline rule is kept as Field Map's section-marker. */
.fm-section { margin-bottom: 28px; scroll-margin-top: 50px; }
.fm-section h2 { font: 700 14px/1.4 var(--font-serif); color: var(--text); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
/* Overview */
.fm-overview { display: grid; gap: 12px; }
.fm-ov-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.fm-ov-item p { font: 400 13.5px/1.6 var(--font-sans); color: var(--text2); margin-top: 4px; }
.fm-ov-label { font: 600 11px/1 var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.fm-ov-tension { border-left: 3px solid #D29922; }
/* Belief cards */
.fm-beliefs { display: grid; gap: 12px; }
/* field-map-layout-v1: .fm-belief-card base/hover/selected are
shared via .object-card alias group near the top of this file. */
.fm-bc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fm-bc-conf { font: 500 12px var(--font-mono); color: var(--text3); margin-left: auto; }
.fm-bc-text { font: 400 14px/1.6 var(--font-sans); color: var(--text); margin-bottom: 10px; }
.fm-bc-evidence { display: flex; gap: 12px; font: 400 12px var(--font-sans); color: var(--text3); margin-bottom: 8px; }
.fm-bc-why, .fm-bc-oq { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 6px; }
.fm-bc-oq { color: var(--text3); font-style: italic; }
/* Tags */
.fm-tag { display: inline-block; font: 500 11px/1 var(--font-sans); padding: 3px 8px; border-radius: 4px; background: var(--accent-light); color: var(--accent); margin-right: 4px; }
.fm-tag-strength { background: rgba(210,153,34,0.1); color: #a87d1a; }
.fm-tag-strong { background: rgba(74,124,111,0.12); color: var(--accent); }
.fm-tag-weak { background: rgba(180,160,120,0.12); color: #8a7a50; }
.fm-tag-action { background: rgba(180,80,60,0.1); color: #a84a32; }
.fm-tag-strongest { background: rgba(74,124,111,0.18); color: #2d5a4a; font-weight: 600; }
.fm-tag-supported { background: rgba(74,124,111,0.12); color: var(--accent); }
.fm-tag-partially_supported { background: rgba(210,153,34,0.1); color: #a87d1a; }
.fm-tag-candidate { background: rgba(142,150,143,0.12); color: var(--text3); }
.fm-tag-active { background: rgba(74,124,111,0.15); color: var(--accent); }
.fm-tag-ev-strong { background: rgba(74,124,111,0.14); color: #2d5a4a; font-weight: 600; }
.fm-tag-ev-moderate { background: rgba(210,153,34,0.12); color: #8a6a12; }
.fm-tag-ev-weak { background: rgba(142,150,143,0.12); color: var(--text3); }
.fm-tag-type { background: rgba(90,142,196,0.10); color: #3a6a9a; }
/* Bottlenecks */
.fm-bottlenecks { display: grid; gap: 12px; }
/* field-map-layout-v1: .fm-bn-card base shared via .object-card alias;
the red border-left is the page-specific bottleneck-severity marker. */
.fm-bn-card { border-left: 3px solid #c44; }
.fm-bn-name { font: 600 14px/1.4 var(--font-sans); color: var(--text); margin-bottom: 6px; }
.fm-bn-desc { font: 400 13px/1.55 var(--font-sans); color: var(--text2); }
.fm-bn-meta { display: flex; gap: 6px; margin-top: 8px; }
.fm-bn-impl { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 8px; }
/* Method families */
.fm-families { display: grid; gap: 14px; }
/* field-map-layout-v1: .fm-mf-card base shared via .object-card alias;
the .fm-mf-risk amber-border is the page-specific evidence-risk
marker. */
.fm-mf-card.fm-mf-risk { border-color: #D29922; }
.fm-mf-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fm-mf-header h3 { font: 600 15px/1.3 var(--font-sans); color: var(--text); }
.fm-risk-badge { font: 600 10px/1 var(--font-sans); padding: 3px 8px; border-radius: 4px; background: rgba(210,153,34,0.15); color: #a87d1a; }
.fm-mf-desc { font: 400 13px/1.55 var(--font-sans); color: var(--text2); margin-bottom: 10px; }
.fm-mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.fm-mf-label { font: 600 11px/1 var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 4px; }
.fm-mf-grid p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.fm-mf-papers, .fm-mf-variants { font: 400 12px/1.5 var(--font-sans); color: var(--text3); margin-top: 6px; }
.fm-paper-id { font: 500 11px var(--font-mono); color: var(--accent); background: var(--accent-light); padding: 1px 6px; border-radius: 3px; cursor: default; }
/* Limitations */
.fm-limitations { display: grid; gap: 12px; }
/* field-map-layout-v1: .fm-lim-card base shared via .object-card alias. */
.fm-lim-name { font: 600 13px/1.4 var(--font-sans); color: var(--text); margin-bottom: 4px; }
.fm-lim-card p { font: 400 13px/1.55 var(--font-sans); color: var(--text2); }
.fm-lim-meta { display: flex; gap: 6px; margin-top: 8px; }
.fm-lim-impl { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 8px; }
/* Consensus */
.fm-consensus { display: grid; gap: 12px; }
/* field-map-layout-v1: .fm-ec-card base shared via .object-card alias;
strong/shallow border-left markers are page-specific consensus tier. */
.fm-ec-card.fm-ec-strong { border-left: 3px solid var(--accent); }
.fm-ec-card.fm-ec-shallow { border-left: 3px solid #bbb; }
.fm-ec-name { font: 600 13.5px/1.4 var(--font-sans); color: var(--text); margin-bottom: 6px; }
.fm-ec-meta { display: flex; gap: 6px; margin-bottom: 6px; }
.fm-ec-card p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
/* Research Opportunities */
.fm-opportunities { display: grid; gap: 14px; }
/* field-map-layout-v1: .fm-ro-card base shared via .object-card alias. */
.fm-ro-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fm-ro-id { font: 700 12px var(--font-mono); color: var(--accent); }
.fm-ro-header h3 { font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.fm-ro-card > p { font: 400 13px/1.55 var(--font-sans); color: var(--text2); margin-bottom: 10px; }
.fm-ro-approaches { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-bottom: 8px; }
.fm-ro-approaches ul { margin: 4px 0 0 18px; }
.fm-ro-approaches li { margin-bottom: 2px; }
.fm-ro-meta { display: flex; gap: 6px; margin-bottom: 8px; }
.fm-ro-derived { font: 400 12px/1.5 var(--font-sans); color: var(--text3); }
.fm-belief-ref { font: 500 11px var(--font-mono); color: var(--accent); background: var(--accent-light); padding: 1px 6px; border-radius: 3px; cursor: pointer; }
.fm-belief-ref:hover { background: var(--accent); color: white; }
/* Contested */
.fm-contested { display: grid; gap: 10px; }
.fm-cb-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; opacity: 0.8; }
.fm-cb-issue { font: 600 12px/1.4 var(--font-sans); color: #a87d1a; margin-bottom: 4px; }
.fm-cb-card p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.fm-cb-meta { display: flex; gap: 6px; margin-top: 6px; }
/* Upgrade table */
.fm-upgrade-table { width: 100%; border-collapse: collapse; font: 400 13px/1.5 var(--font-sans); }
.fm-upgrade-table th { text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text); font-size: 12px; }
.fm-upgrade-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 12.5px; }
.fm-upgrade-table tr:hover td { background: var(--accent-light); }
/* Drawer */
/* field-map-layout-v1: .fm-drawer is now a permanent right
inspector pane (no more absolute / translateX / open / wide
class). Width / border-left / background / overflow come from
the shared .inspector-pane block (inspector-section-v1). The
close + expand buttons + header are removed from markup; their
CSS goes with them. */
.fm-drawer { display: flex; flex-direction: column; }
.fm-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
/* Drawer inner */
.fm-drawer-inner h3 { font: 500 14px/1.5 var(--font-sans); color: var(--text); margin-bottom: 10px; }
.fm-dl { margin-top: 18px; margin-bottom: 8px; }
.fm-dl-label { font: 700 10px/1 var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: 0.8px; }
.fm-dl-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fm-dl-support { display: flex; gap: 14px; font: 400 12px var(--font-sans); color: var(--text3); margin-bottom: 10px; }
.fm-dl-cluster { display: flex; gap: 6px; margin-bottom: 6px; }
.fm-dl-papers { font: 400 12px var(--font-sans); color: var(--text3); margin-bottom: 10px; }
/* Confidence bars */
.fm-conf-hint { font: 400 11px/1.5 var(--font-sans); color: var(--text3); margin-bottom: 8px; font-style: italic; }
.fm-conf-breakdown { margin-bottom: 12px; }
.fm-conf-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fm-conf-label { font: 500 11px var(--font-sans); color: var(--text3); width: 70px; text-align: right; }
.fm-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.fm-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.fm-bar-fill.fm-bar-breadth { background: #5A8EC4; }
.fm-bar-fill.fm-bar-agree { background: #8AAD5E; }
.fm-conf-val { font: 500 11px var(--font-mono); color: var(--text3); width: 36px; }
/* Claim filters */
.fm-dl-filter { display: flex; gap: 6px; margin-bottom: 10px; }
.fm-filter-btn { font: 500 11px/1 var(--font-sans); padding: 4px 10px; border-radius: 4px; background: var(--card); border: 1px solid var(--border); color: var(--text3); cursor: pointer; transition: all 0.15s; }
.fm-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.fm-filter-btn.fm-filter-active { background: var(--accent); color: white; border-color: var(--accent); }
/* Paper groups */
.fm-paper-group { margin-bottom: 12px; }
.fm-paper-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.fm-paper-group-count { font: 400 11px var(--font-sans); color: var(--text3); }
/* Member claims */
.fm-dl-claims { display: grid; gap: 8px; }
.fm-claim-item { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.fm-claim-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.fm-claim-text { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.fm-depth-badge { font: 600 10px/1 var(--font-sans); padding: 2px 6px; border-radius: 3px; }
.fm-depth-deep { background: rgba(74,124,111,0.15); color: var(--accent); }
.fm-depth-grounded { background: rgba(90,142,196,0.15); color: #3a6a9a; }
.fm-depth-shallow { background: rgba(142,150,143,0.12); color: var(--text3); }
/* Collapsible sections */
.fm-collapse { margin-top: 4px; }
.fm-dl-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.fm-dl-toggle:hover .fm-dl-label { color: var(--text); }
.fm-collapse-icon { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text3); transition: transform 0.2s; }
.fm-collapsed .fm-collapse-icon { transform: rotate(-90deg); }
.fm-collapse-body { transition: max-height 0.25s ease; overflow: hidden; }
.fm-collapsed .fm-collapse-body { display: none; }
/* Conflicts */
.fm-conflict-item { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid #D29922; border-radius: 6px; margin-bottom: 8px; }
.fm-conflict-type { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.fm-sev-high { background: rgba(180,60,60,0.12); color: #a83232; }
.fm-sev-medium { background: rgba(210,153,34,0.12); color: #8a6a12; }
.fm-sev-low { background: rgba(142,150,143,0.12); color: var(--text3); }
.fm-conflict-item p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.fm-conflict-res { margin-top: 4px; font-style: italic; }
.fm-rev-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.fm-rev-item:last-child { border-bottom: none; }
.fm-rev-arrow { font: 500 12px var(--font-mono); color: var(--text3); margin-left: 6px; }
.fm-rev-item p { font: 400 12px/1.4 var(--font-sans); color: var(--text2); margin-top: 2px; }
/* Evidence role groups */
.fm-ev-role-group { margin-bottom: 12px; }
.fm-ev-role-label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; padding: 3px 0; }
.fm-ev-role-primary { color: var(--accent); }
.fm-ev-role-contextual { color: #5A8EC4; }
.fm-ev-role-weak { color: var(--text3); }
/* Evidence items */
.fm-ev-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.fm-ev-item { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; }
.fm-ev-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.fm-ev-content { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.fm-ev-quote { font: 400 12px/1.5 var(--font-mono); color: var(--text3); margin: 6px 0 0; padding: 6px 10px; border-left: 2px solid var(--border); background: rgba(0,0,0,0.02); border-radius: 0 4px 4px 0; }
/* Empty & show-more */
.fm-empty-state { font: 400 12.5px/1.5 var(--font-sans); color: var(--text3); font-style: italic; padding: 6px 0; }
.fm-show-more { font: 500 12px/1 var(--font-sans); color: var(--accent); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 6px 14px; cursor: pointer; margin-top: 8px; width: 100%; transition: all 0.15s; }
.fm-show-more:hover { background: var(--accent-light); border-color: var(--accent); }
/* Dark theme overrides */
[data-theme="dark"] .fm-belief-card { border-color: var(--border); }
[data-theme="dark"] .fm-belief-card:hover { border-color: var(--accent); }
[data-theme="dark"] .fm-mf-card, [data-theme="dark"] .fm-bn-card,
[data-theme="dark"] .fm-lim-card, [data-theme="dark"] .fm-ec-card,
[data-theme="dark"] .fm-ro-card, [data-theme="dark"] .fm-cb-card,
[data-theme="dark"] .fm-ov-item, [data-theme="dark"] .fm-claim-item { border-color: var(--border); }
[data-theme="dark"] .fm-drawer { background: var(--bg); border-left-color: var(--border); }
[data-theme="dark"] .fm-drawer.open { box-shadow: -4px 0 20px rgba(0,0,0,0.3); }
[data-theme="dark"] .fm-nav { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .fm-conflict-item, [data-theme="dark"] .fm-ev-item { border-color: var(--border); }
[data-theme="dark"] .fm-ev-quote { background: rgba(255,255,255,0.02); }
/* ── Claim Graph ── */
#v-claim-graph.active { display: block; height: 100vh; overflow: hidden; }
.cg-shell { display: flex; height: 100%; overflow: hidden; position: relative; }
/* claim-graph-layout-v1: drop the centered max-width + margin:auto
so the main pane fills its flex slot (matches Library / Family /
Tricks / Hypotheses). The shared .page-header inside still keeps
its own 980 max-width for the header strip. */
.cg-content { flex: 1; overflow-y: auto; padding: 0 36px 60px; min-width: 0; }
.cg-empty { font: 400 14px/1.6 var(--font-sans); color: var(--text3); padding: 60px 0; text-align: center; }
/* Header / paper selector */
.cg-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cg-title { font: 600 26px/1.3 var(--font-serif); color: var(--text); letter-spacing: -0.3px; }
.cg-paper-select select { font: 500 13px var(--font-sans); color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 28px 6px 10px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238E968F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; max-width: 400px; }
/* Stats row */
.cg-health { margin-bottom: 16px; }
/* claim-graph-header-v1: the .cg-stats / .cg-stat / .cg-stat-num
tiles were collapsed into the page-header meta line; the rules are
intentionally gone. */
/* Belief distribution bar */
.cg-dist { margin-bottom: 12px; }
.cg-dist-title { font: 500 11px var(--font-sans); color: var(--text3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
.cg-dist-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--border); }
.cg-dist-seg { display: flex; align-items: center; justify-content: center; font: 600 10px var(--font-mono); color: white; transition: width 0.3s ease; min-width: 2px; }
.cg-dist-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.cg-dist-leg-item { display: inline-flex; align-items: center; gap: 4px; font: 400 11px var(--font-sans); color: var(--text2); }
.cg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cg-dist-compare { font: 400 12px var(--font-sans); color: var(--text3); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Conflicts summary */
.cg-conflicts-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cg-conflicts-label { font: 500 12px var(--font-sans); color: var(--text2); }
/* Tags */
.cg-tag { display: inline-block; font: 500 11px/1 var(--font-sans); padding: 3px 8px; border-radius: 4px; background: var(--accent-light); color: var(--accent); }
.cg-tag-conflict { background: rgba(168,85,247,0.1); color: #7c3aed; }
.cg-tag-warn { background: rgba(239,68,68,0.1); color: #dc2626; }
.cg-tag-quant { background: rgba(59,130,246,0.1); color: #2563eb; }
/* Filters */
.cg-filters { margin-bottom: 14px; padding: 10px 0 6px; border-top: 1px solid var(--border); }
.cg-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cg-filter-row .cg-type-select { margin-left: auto; font: 500 12px var(--font-sans); color: var(--text2); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 24px 4px 8px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238E968F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; max-width: 220px; }
.cg-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cg-filter-label { font: 500 11px var(--font-sans); color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; min-width: 50px; }
.cg-chip { font: 500 12px/1 var(--font-sans); padding: var(--d-chip-pad-y) 10px; border-radius: 4px; color: var(--text3); cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.cg-chip:hover { background: var(--accent-light); color: var(--accent); }
.cg-chip-on { background: var(--accent); color: white; }
/* Claim cards */
.cg-claim-list { display: grid; gap: 10px; }
.cg-claim-count { font: 400 12px var(--font-sans); color: var(--text3); margin-bottom: 8px; }
/* claim-graph-layout-v1: .cg-claim-card base/hover/selected are
shared via .object-card alias group near the top of this file.
Per-domain meta layout stays per-page. */
.cg-cc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cg-cc-status { font: 600 11px/1 var(--font-sans); padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.cg-status-well { background: rgba(34,197,94,0.12); color: #16a34a; }
.cg-status-sup { background: rgba(59,130,246,0.12); color: #2563eb; }
.cg-status-partial { background: rgba(245,158,11,0.12); color: #d97706; }
.cg-status-under { background: rgba(239,68,68,0.12); color: #dc2626; }
.cg-status-contested { background: rgba(168,85,247,0.12); color: #7c3aed; }
.cg-status-unknown { background: rgba(142,150,143,0.12); color: var(--text3); }
.cg-cc-conf { font: 500 12px var(--font-mono); color: var(--text3); margin-left: auto; }
.cg-cc-type { font: 400 11px var(--font-sans); color: var(--text3); }
.cg-cc-scope { font: 400 11px var(--font-sans); color: var(--text3); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-cc-text { font: 400 13.5px/1.6 var(--font-sans); color: var(--text); margin-bottom: 8px; }
.cg-cc-bottom { display: flex; gap: 12px; flex-wrap: wrap; }
.cg-cc-ev { font: 400 12px var(--font-sans); color: var(--text3); }
.cg-cc-sup { color: #16a34a; }
.cg-cc-chal { color: #dc2626; }
.cg-cc-issue { color: #d97706; }
.cg-cc-cluster { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cg-cc-canon { font: 400 11.5px/1.4 var(--font-sans); color: var(--text3); }
.cg-cc-main-issue { font: 500 11px var(--font-sans); color: #7c3aed; background: rgba(168,85,247,0.08); padding: 2px 7px; border-radius: 3px; }
.cg-no-belief { color: var(--text3); font-style: italic; }
/* Drawer */
/* claim-graph-layout-v1: .cg-drawer is now a permanent right
inspector pane (no more absolute / translateX / open class).
Width and border-left / background come from the shared
.inspector-pane block (see inspector-section-v1). The drawer
header / × close button used to live here too — they're now
removed in markup, so their CSS goes with them. */
.cg-drawer { display: flex; flex-direction: column; }
.cg-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.cg-drawer-inner { display: flex; flex-direction: column; gap: 4px; }
/* Drawer levels */
.cg-dl { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; }
.cg-dl-label { font: 600 12px/1 var(--font-sans); color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.cg-dl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cg-dl-text { font: 400 13.5px/1.6 var(--font-sans); color: var(--text); margin-bottom: 8px; }
.cg-dl-prev { font: 400 11px var(--font-sans); color: var(--text3); font-style: italic; }
.cg-dl-scope { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-bottom: 6px; }
.cg-dl-why { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 4px; }
.cg-dl-res { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 4px; font-style: italic; }
.cg-dl-weak { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; font: 400 12px var(--font-sans); color: var(--text3); }
/* Revision block */
.cg-revision { background: rgba(168,85,247,0.05); border: 1px solid rgba(168,85,247,0.15); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.cg-revision p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-top: 4px; }
.cg-revision span { font: 400 12px var(--font-sans); color: var(--text2); }
/* Collapse sections */
.cg-collapse { margin-bottom: 2px; }
.cg-dl-toggle { cursor: pointer; user-select: none; }
.cg-dl-toggle:hover .cg-dl-label { color: var(--text); }
.cg-collapse-icon { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--text3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.cg-collapse:not(.cg-collapsed) .cg-collapse-icon { transform: rotate(90deg); }
.cg-collapsed .cg-collapse-body { display: none; }
.cg-collapse-body { padding-left: 4px; }
/* Conflict items */
.cg-conflict-item { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; }
.cg-conflict-head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cg-conflict-item p { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); }
.cg-sev-critical { background: rgba(239,68,68,0.12); color: #dc2626; }
.cg-sev-high { background: rgba(245,158,11,0.12); color: #d97706; }
.cg-sev-moderate { background: rgba(59,130,246,0.12); color: #2563eb; }
.cg-sev-low { background: rgba(142,150,143,0.12); color: var(--text3); }
/* Evidence summary */
.cg-ev-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cg-ev-total { font: 500 12px var(--font-sans); color: var(--text2); margin-right: 4px; }
.cg-empty-state { font: 400 12px var(--font-sans); color: var(--text3); font-style: italic; padding: 4px 0; }
/* Semantic triple */
.cg-triple { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: rgba(74,124,111,0.05); border: 1px solid rgba(74,124,111,0.12); border-radius: 6px; padding: 8px 12px; margin: 8px 0; font: 500 12.5px var(--font-sans); }
.cg-triple-s { color: var(--accent); }
.cg-triple-r { color: var(--text2); font-style: italic; }
.cg-triple-o { color: var(--accent); }
.cg-triple-arrow { color: var(--text3); font-size: 11px; }
.cg-triple-q { color: var(--text3); font: 400 11px var(--font-sans); }
/* Argument metrics */
.cg-arg-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.cg-arg-metric { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 4px; }
.cg-arg-val { display: block; font: 600 16px/1 var(--font-mono); color: var(--accent); }
.cg-arg-label { display: block; font: 400 10px/1 var(--font-sans); color: var(--text3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.cg-quant-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
/* Missing / limitations */
.cg-dl-missing { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); margin-bottom: 8px; }
.cg-missing-item { padding-left: 12px; position: relative; }
.cg-missing-item::before { content: "–"; position: absolute; left: 0; color: var(--text3); }
/* Quote */
.cg-quote { font: 400 12.5px/1.5 var(--font-sans); color: var(--text2); border-left: 3px solid var(--accent-light); padding: 6px 12px; margin: 6px 0; background: rgba(74,124,111,0.03); border-radius: 0 4px 4px 0; }
/* Debug JSON toggle */
.cg-debug-toggle { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cg-debug-btn { font: 500 11px var(--font-sans); color: var(--text3); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; transition: all 0.15s; }
.cg-debug-btn:hover { border-color: var(--accent); color: var(--accent); }
.cg-debug-json { font: 400 11px/1.4 var(--font-mono); color: var(--text3); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-top: 8px; overflow-x: auto; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
/* Dark theme overrides */
[data-theme="dark"] .cg-drawer { background: var(--bg); border-left-color: var(--border); }
[data-theme="dark"] .cg-drawer.open { box-shadow: -4px 0 20px rgba(0,0,0,0.3); }
[data-theme="dark"] .cg-conflict-item { border-color: var(--border); }
[data-theme="dark"] .cg-triple { background: rgba(74,124,111,0.08); border-color: rgba(74,124,111,0.18); }
[data-theme="dark"] .cg-revision { background: rgba(168,85,247,0.08); border-color: rgba(168,85,247,0.2); }
[data-theme="dark"] .cg-quote { background: rgba(74,124,111,0.05); }
/* ── Community Signals (Paper Detail header strip) ──
Discovery-side social mentions. Visually separate from scientific
evidence — the footnote makes that boundary explicit. */
.cs-card { margin: 8px 0 10px; background: var(--card); border: 1px solid var(--bg-warm); border-radius: var(--radius); overflow: hidden; }
.cs-card[open] .cs-header::after { transform: rotate(90deg); }
.cs-header { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; user-select: none; list-style: none; }
.cs-header::-webkit-details-marker { display: none; }
.cs-header::after { content: '›'; margin-left: auto; font-size: 14px; color: var(--text3); transition: transform 0.15s; }
.cs-label { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; }
.cs-meta { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.cs-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.cs-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-source { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg); color: var(--text2); font-variant-numeric: tabular-nums; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-pill { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.cs-tone-good { background: rgba(74,124,111,0.14); color: #2F6759; }
.cs-tone-warn { background: rgba(217,119,6,0.14); color: #9A5500; }
.cs-tone-info { background: var(--bg); color: var(--text2); }
.cs-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-claim { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; padding: 6px 8px; background: var(--bg); border-radius: 4px; align-items: flex-start; }
.cs-claim-source { flex-shrink: 0; color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; min-width: 90px; max-width: 140px; line-height: 1.4; }
.cs-claim-type { color: var(--text2); font-weight: 500; }
.cs-claim-text { color: var(--text2); flex: 1; }
.cs-claim-hidden { display: none; }
.cs-show-more { align-self: flex-start; font: 500 12px var(--font-sans); color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px 0; }
.cs-show-more:hover { text-decoration: underline; }
.cs-footnote { font-size: 11px; color: var(--text3); font-style: italic; padding-top: 8px; border-top: 1px solid var(--bg-warm); }
.cs-empty { padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.cs-empty-label { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; }
.cs-empty-meta { font-size: 12px; color: var(--text3); }
/* Dark theme */
[data-theme="dark"] .cs-source,
[data-theme="dark"] .cs-claim,
[data-theme="dark"] .cs-tone-info { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .cs-tone-good { background: rgba(107,175,158,0.20); color: #8FCDB9; }
[data-theme="dark"] .cs-tone-warn { background: rgba(242,192,103,0.16); color: #F2C067; }
[data-theme="dark"] .cs-footnote { border-top-color: rgba(255,255,255,0.08); }
/* ── Cluster Community Pulse (Claim Graph drawer, Phase 47) ──
Sits next to the L3 cluster block. Read-only — paper-level + method-
level signals aggregated from the discovery store. */
.cg-cp { margin: 10px 0 12px; background: var(--card); border: 1px solid var(--bg-warm); border-radius: var(--radius); overflow: hidden; }
.cg-cp[open] .cg-cp-head::after { transform: rotate(90deg); }
.cg-cp-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; user-select: none; list-style: none; }
.cg-cp-head::-webkit-details-marker { display: none; }
.cg-cp-head::after { content: '›'; margin-left: auto; font-size: 14px; color: var(--text3); transition: transform 0.15s; }
.cg-cp-label { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; }
.cg-cp-meta { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.cg-cp-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.cg-cp-section { display: flex; flex-direction: column; gap: 6px; }
.cg-cp-sec-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
.cg-cp-aggmode { font-size: 11px; color: var(--text3); font-style: italic; }
.cg-cp-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-cp-src { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg); color: var(--text2); font-variant-numeric: tabular-nums; }
.cg-cp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-cp-pill { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.cg-cp-good { background: rgba(74,124,111,0.14); color: #2F6759; }
.cg-cp-warn { background: rgba(217,119,6,0.14); color: #9A5500; }
.cg-cp-info { background: var(--bg); color: var(--text2); }
.cg-cp-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cg-cp-claim { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; padding: 6px 8px; background: var(--bg); border-radius: 4px; align-items: flex-start; }
.cg-cp-claim-src { flex-shrink: 0; color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; min-width: 90px; max-width: 140px; line-height: 1.4; }
.cg-cp-claim-type { color: var(--text2); font-weight: 500; }
.cg-cp-claim-text { color: var(--text2); flex: 1; }
.cg-cp-method { padding: 6px 8px; background: var(--bg); border-radius: 4px; display: flex; flex-direction: column; gap: 6px; }
.cg-cp-method-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-cp-method-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.cg-cp-method-meta { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.cg-cp-interps { list-style: disc inside; margin: 0; padding: 0 4px; font-size: 12px; color: var(--text2); line-height: 1.5; }
.cg-cp-footnote { font-size: 11px; color: var(--text3); font-style: italic; padding-top: 8px; border-top: 1px solid var(--bg-warm); }
.cg-cp-empty { padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.cg-cp-empty-msg { font-size: 12px; color: var(--text3); }
[data-theme="dark"] .cg-cp-src,
[data-theme="dark"] .cg-cp-claim,
[data-theme="dark"] .cg-cp-method,
[data-theme="dark"] .cg-cp-info { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .cg-cp-good { background: rgba(107,175,158,0.20); color: #8FCDB9; }
[data-theme="dark"] .cg-cp-warn { background: rgba(242,192,103,0.16); color: #F2C067; }
[data-theme="dark"] .cg-cp-footnote { border-top-color: rgba(255,255,255,0.08); }
/* ── Dashboard hero: import affordances (PDF +, classify hint, drag-over) ─── */
.hero-cmd-upload {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid var(--border);
border-radius: 7px;
padding: 6px 7px;
cursor: pointer;
color: var(--text2);
display: flex;
align-items: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hero-cmd-upload:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-light);
}
.hero-cmd-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.hero-cmd-box.drag-over .hero-cmd-input {
background: var(--accent-light);
box-shadow: 0 0 0 2px var(--accent);
}
[data-theme="dark"] .hero-cmd-upload { border-color: rgba(255,255,255,0.12); }
.hero-result-panel { max-width: 720px; margin: 0 auto; padding: 16px 0; }
/* ── Research Profile (profile-ui-polish-v1) ─────────────────────── */
/* page outer */
.rp-page { max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; }
.rp-page-header { margin-bottom: 24px; }
.rp-page-header h2 {
margin: 0 0 4px 0;
font: 600 24px/1.3 var(--font-sans, system-ui);
letter-spacing: -0.01em;
}
.rp-page-subtitle { font-size: 13px; color: var(--text3); }
.rp-content { display: flex; flex-direction: column; gap: 20px; }
.rp-loading { padding: 28px; color: var(--text3); font-size: 13px; }
.rp-loading-mini { padding: 16px; color: var(--text3); font-size: 12px; }
.rp-empty-mini { padding: 18px; color: var(--text3); text-align: center; font-size: 12px; }
.rp-error {
padding: 16px 18px;
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 12px;
}
[data-theme="dark"] .rp-error {
background: rgba(239,68,68,0.12);
color: #fca5a5;
border-color: rgba(239,68,68,0.3);
}
/* research-profile-onboarding-v1 — completeness banner. */
.rp-onboarding {
margin: 12px 0 18px;
padding: 14px 16px;
border-radius: 10px;
border-left: 4px solid;
display: flex;
flex-direction: column;
gap: 10px;
}
.rp-onboarding--weak {
background: #fef3c7;
border-left-color: #b45309;
color: #78350f;
}
.rp-onboarding--partial {
background: #eef2ff;
border-left-color: #4338ca;
color: #312e81;
}
.rp-onboarding-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.rp-onboarding-headline {
font-weight: 600;
font-size: 14px;
}
.rp-onboarding-cta {
background: currentColor;
color: #fff !important;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12.5px;
cursor: pointer;
}
.rp-onboarding-cta:hover { opacity: 0.9; }
.rp-onboarding-body {
font-size: 12.5px;
line-height: 1.45;
}
.rp-onboarding-body strong { color: inherit; }
.rp-onboarding-body em { font-style: italic; }
.rp-onboarding-strip {
display: flex;
gap: 8px;
margin-top: 4px;
}
.rp-onb-tile {
background: rgba(255, 255, 255, 0.55);
border: 1px solid transparent;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
min-width: 110px;
text-align: left;
flex: 1;
}
.rp-onb-tile:hover { background: rgba(255, 255, 255, 0.85); }
.rp-onb-tile--weak { border-color: #f59e0b; }
.rp-onb-tile--ok { border-color: #6366f1; }
.rp-onb-tile--strong { border-color: #10b981; }
.rp-onb-tile-label {
font-size: 11.5px;
font-weight: 600;
margin-bottom: 2px;
}
.rp-onb-tile-count {
font-size: 11px;
opacity: 0.8;
}
[data-theme="dark"] .rp-onboarding--weak {
background: #3a2a06;
color: #fde68a;
}
[data-theme="dark"] .rp-onboarding--partial {
background: #1f1f3a;
color: #c7d2fe;
}
[data-theme="dark"] .rp-onb-tile {
background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .rp-onb-tile:hover { background: rgba(255, 255, 255, 0.16); }
/* source-inbox-url-import-v1 — dashboard panel for non-paper sources. */
#si-section { margin-top: 24px; }
.si-subtitle {
color: var(--text3);
font-size: 12.5px;
margin: 4px 0 12px;
}
.si-url-form {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.si-url-input {
flex: 1;
min-width: 260px;
padding: 7px 10px;
border: 1px solid rgba(80,110,100,0.25);
border-radius: 6px;
font-size: 13px;
font-family: inherit;
background: rgba(255,255,255,0.6);
}
.si-import-btn {
padding: 7px 14px;
border: none;
border-radius: 6px;
background: #4338ca;
color: #fff;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.si-import-btn:disabled { opacity: 0.5; cursor: wait; }
.si-import-btn:hover:not(:disabled) { background: #3730a3; }
.si-form-status {
font-size: 12px;
flex-basis: 100%;
margin-top: 4px;
}
.si-form-status--ok { color: #166534; }
.si-form-status--info { color: #4338ca; }
.si-form-status--err { color: #991b1b; }
.si-form-status--warn { color: #92400e; }
/* Sprint 12 — per-import "Use enhanced extraction" toggle. */
.si-enhanced-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
color: var(--text3);
cursor: pointer;
user-select: none;
}
.si-enhanced-toggle:hover { color: var(--text1); }
.si-enhanced-checkbox {
margin: 0;
width: 12px;
height: 12px;
accent-color: #4338ca;
cursor: pointer;
}
.si-enhanced-label { line-height: 1; }
/* Sprint 12 — extraction-mode header on the source detail drawer. */
.si-extraction-header { margin-top: 12px; }
.si-extraction-header h3 { margin: 0 0 4px; font-size: 12px; }
.si-extraction-row { font-size: 12px; color: var(--text3); }
.si-extraction-mode {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
}
.si-extraction-mode--enhanced {
background: #ede9fe; color: #5b21b6;
border: 1px solid #ddd6fe;
}
.si-extraction-mode--unavailable {
background: #fef3c7; color: #92400e;
border: 1px solid #fde68a;
}
.si-extraction-mode--heuristic {
background: #f3f4f6; color: #4b5563;
border: 1px solid #e5e7eb;
}
.si-extraction-summary { color: var(--text3); }
.si-extraction-note { color: #92400e; }
/* Sprint 12 — per-claim provenance pill rendered inline with the
claim text. Smaller than the review state pill so the row stays
readable. */
.si-claim-method {
display: inline-block;
padding: 0 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: 1px;
}
.si-claim-method--llm {
background: #ede9fe; color: #5b21b6;
border: 1px solid #ddd6fe;
}
.si-claim-method--merged {
background: #dcfce7; color: #166534;
border: 1px solid #bbf7d0;
}
.si-claim-method--heuristic {
background: #f3f4f6; color: #4b5563;
border: 1px solid #e5e7eb;
}
.si-body { margin-top: 4px; }
.si-loading, .si-empty {
font-size: 12.5px;
color: var(--text3);
padding: 12px 4px;
}
.si-empty--error { color: #991b1b; }
.si-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.si-card {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(80,110,100,0.16);
border-radius: 8px;
padding: 12px 14px;
}
.si-card-head { margin-bottom: 4px; }
.si-card-title {
font-size: 14px;
font-weight: 600;
color: var(--text1);
text-decoration: none;
}
.si-card-title:hover { text-decoration: underline; }
.si-card-meta {
font-size: 11.5px;
color: var(--text3);
margin-bottom: 6px;
}
.si-card-summary {
font-size: 12.5px;
color: var(--text2);
line-height: 1.45;
margin-bottom: 8px;
}
.si-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.si-chip {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid transparent;
}
.si-chip-ext {
color: #92400e;
background: #fffbeb;
border-color: #fde68a;
font-weight: 600;
}
.si-chip-count {
color: var(--text3);
background: rgba(80,110,100,0.08);
}
.si-chip-status {
font-weight: 600;
}
.si-chip-status--inbox {
color: #4338ca; background: #eef2ff; border-color: #c7d2fe;
}
.si-chip-status--accepted {
color: #166534; background: #ecfdf5; border-color: #a7f3d0;
}
.si-chip-status--rejected {
color: #991b1b; background: #fef2f2; border-color: #fecaca;
}
.si-chip-status--archived {
color: var(--text3); background: rgba(80,110,100,0.08);
}
.si-actions {
display: flex;
gap: 6px;
}
.si-btn {
padding: 5px 10px;
font-size: 12px;
border: 1px solid rgba(80,110,100,0.18);
border-radius: 6px;
background: #fff;
color: var(--text1);
font-family: inherit;
cursor: pointer;
}
.si-btn:hover { background: #f8fafc; }
.si-btn--secondary { background: transparent; }
.si-btn--danger {
border-color: #fca5a5;
color: #991b1b;
}
.si-btn--danger:hover { background: #fef2f2; }
/* Detail drawer */
.si-drawer {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
pointer-events: none;
}
.si-drawer.is-open { pointer-events: auto; }
.si-drawer-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 0.16s ease-out;
}
.si-drawer.is-open .si-drawer-overlay { opacity: 1; }
.si-drawer-panel {
position: relative;
margin-left: auto;
width: min(560px, 92vw);
height: 100vh;
background: #fff;
box-shadow: -8px 0 24px rgba(0,0,0,0.16);
padding: 24px 22px 32px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.16s ease-out;
}
.si-drawer.is-open .si-drawer-panel { transform: translateX(0); }
.si-drawer-close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--text3);
}
.si-drawer-close:hover { color: var(--text1); }
.si-drawer-title {
font-size: 17px;
margin: 0 24px 8px 0;
}
.si-drawer-title a { color: var(--text1); text-decoration: none; }
.si-drawer-title a:hover { text-decoration: underline; }
.si-drawer-meta {
font-size: 12px;
color: var(--text3);
margin-bottom: 16px;
}
.si-drawer-section { margin-bottom: 18px; }
.si-drawer-section h3 {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text3);
margin: 0 0 6px;
}
.si-drawer-section p,
.si-drawer-section pre {
font-size: 13px;
color: var(--text2);
line-height: 1.5;
}
.si-text-excerpt {
white-space: pre-wrap;
max-height: 280px;
overflow-y: auto;
font-family: inherit;
background: #f8fafc;
border: 1px solid #eee;
border-radius: 6px;
padding: 10px;
}
.si-claim-list, .si-link-list {
margin: 0;
padding-left: 18px;
font-size: 12.5px;
}
.si-claim-list li, .si-link-list li {
margin-bottom: 6px;
line-height: 1.45;
}
.si-claim-conf {
color: var(--text3);
font-size: 11px;
margin-left: 4px;
}
.si-link-list code {
font-family: ui-monospace, monospace;
font-size: 11.5px;
}
.si-link-ctx {
color: var(--text3);
font-style: italic;
font-size: 11.5px;
}
/* source-inbox-review-v1 — per-claim review controls in drawer */
.si-review-progress {
display: flex;
gap: 6px;
margin: 6px 0 12px;
flex-wrap: wrap;
}
.si-rp-chip {
font-size: 11px;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid transparent;
}
.si-rp-chip--accepted { color: #166534; background: #ecfdf5; border-color: #a7f3d0; }
.si-rp-chip--rejected { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.si-rp-chip--needs { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.si-rp-chip--candidate { color: var(--text3); background: rgba(80,110,100,0.08); }
.si-claim {
list-style: none;
margin-left: -18px; /* undo parent indent */
padding: 8px 10px;
border: 1px solid rgba(80,110,100,0.12);
border-radius: 6px;
margin-bottom: 8px;
}
.si-claim--accepted {
border-left: 3px solid #10b981;
background: rgba(16,185,129,0.04);
}
.si-claim--rejected {
border-left: 3px solid #ef4444;
background: rgba(239,68,68,0.04);
opacity: 0.7;
}
.si-claim--needs_verification {
border-left: 3px solid #f59e0b;
background: rgba(245,158,11,0.04);
}
.si-claim-text {
font-size: 12.5px;
line-height: 1.45;
color: var(--text2);
margin-bottom: 6px;
}
.si-claim-conf {
color: var(--text3);
font-size: 11px;
margin-left: 4px;
}
.si-claim-actions {
display: flex;
gap: 5px;
align-items: center;
flex-wrap: wrap;
}
.si-claim-state {
font-size: 10.5px;
padding: 2px 7px;
border-radius: 4px;
font-weight: 600;
}
.si-claim-state--accepted { color: #166534; background: #ecfdf5; }
.si-claim-state--rejected { color: #991b1b; background: #fef2f2; }
.si-claim-state--needs_verification { color: #92400e; background: #fffbeb; }
.si-claim-btn {
padding: 3px 9px;
font-size: 11px;
border: 1px solid rgba(80,110,100,0.18);
border-radius: 5px;
background: #fff;
color: var(--text1);
cursor: pointer;
font-family: inherit;
}
.si-claim-btn:hover:not(:disabled) { background: #f8fafc; }
.si-claim-btn:disabled { opacity: 0.5; cursor: wait; }
.si-claim-btn[aria-pressed="true"] {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.si-claim-btn--accept[aria-pressed="true"] {
background: #10b981; border-color: #10b981;
}
.si-claim-btn--reject[aria-pressed="true"] {
background: #ef4444; border-color: #ef4444;
}
.si-claim-btn--needs[aria-pressed="true"] {
background: #f59e0b; border-color: #f59e0b;
}
.si-claim-btn--revert {
border-style: dashed;
color: var(--text3);
}
[data-theme="dark"] .si-claim {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .si-claim-btn {
background: rgba(255,255,255,0.06);
color: #eee;
border-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .si-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .si-url-input { background: rgba(255,255,255,0.04); color: #eee; border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .si-drawer-panel { background: #0e1015; color: #eee; }
[data-theme="dark"] .si-text-excerpt { background: rgba(255,255,255,0.04); color: #eee; border-color: rgba(255,255,255,0.08); }
/* post-import-reading-queue-v1 — small status chip next to the paper
title in Paper Detail. Tells the user what the L1 manifest +
queue_status say about deep-reading progress. */
.pd-reading-chip {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
vertical-align: middle;
border: 1px solid transparent;
white-space: nowrap;
}
.pd-reading-chip--complete {
background: #ecfdf5;
color: #166534;
border-color: #a7f3d0;
}
.pd-reading-chip--partial {
background: #fffbeb;
color: #92400e;
border-color: #fde68a;
}
.pd-reading-chip--pending {
background: #eef2ff;
color: #4338ca;
border-color: #c7d2fe;
}
.pd-reading-chip--pending::before {
content: "⟳ ";
font-weight: 400;
}
.pd-reading-chip--failed {
background: #fef2f2;
color: #991b1b;
border-color: #fecaca;
}
[data-theme="dark"] .pd-reading-chip--complete { background: #064e3b; color: #d1fae5; }
[data-theme="dark"] .pd-reading-chip--partial { background: #3a2a06; color: #fde68a; }
[data-theme="dark"] .pd-reading-chip--pending { background: #1f1f3a; color: #c7d2fe; }
[data-theme="dark"] .pd-reading-chip--failed { background: #3a0c0c; color: #fecaca; }
/* Home dashboard banner — small, links to research-profile when
the active profile is weak (i.e. For-you ranking will be muted). */
.mip-profile-hint {
margin: 12px 0 0;
padding: 10px 14px;
background: #fffbeb;
border-left: 3px solid #f59e0b;
border-radius: 8px;
font-size: 12.5px;
color: #92400e;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mip-profile-hint a {
color: inherit;
font-weight: 600;
text-decoration: underline;
}
[data-theme="dark"] .mip-profile-hint {
background: #3a2a06;
color: #fde68a;
}
/* card primitive */
.rp-card {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(80,110,100,0.16);
border-radius: 16px;
padding: 24px 26px;
box-shadow: 0 12px 32px rgba(20,40,30,0.04);
backdrop-filter: blur(4px);
}
[data-theme="dark"] .rp-card {
background: rgba(30,38,34,0.6);
border-color: rgba(140,160,150,0.18);
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.rp-card-head { margin-bottom: 16px; }
.rp-card-head h3 {
margin: 0 0 4px 0;
font: 600 16px/1.3 var(--font-sans);
letter-spacing: -0.005em;
}
.rp-card-sub { font-size: 12px; color: var(--text3); line-height: 1.5; }
.rp-card-sub code {
font-size: 11px;
background: rgba(0,0,0,0.04);
padding: 1px 5px;
border-radius: 3px;
}
[data-theme="dark"] .rp-card-sub code { background: rgba(255,255,255,0.06); }
.rp-empty h3 { margin: 0 0 8px 0; font-size: 15px; font-weight: 600; }
.rp-empty p { margin: 0; color: var(--text3); font-size: 13px; line-height: 1.6; }
/* summary card (v4 compressed) */
.rp-summary { padding: 20px 24px; }
.rp-summary-head { margin-bottom: 16px; }
.rp-summary-title {
font: 700 19px/1.25 var(--font-serif, var(--font-sans));
letter-spacing: -0.01em;
margin-bottom: 4px;
color: var(--text1);
}
.rp-summary-subline {
font-size: 12px;
color: var(--text3);
margin-bottom: 12px;
}
.rp-summary-subline code {
background: rgba(0,0,0,0.04);
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
}
[data-theme="dark"] .rp-summary-subline code { background: rgba(255,255,255,0.06); }
.rp-summary-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.rp-stat {
padding: 10px 13px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(80,110,100,0.12);
border-radius: 10px;
}
[data-theme="dark"] .rp-stat {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.14);
}
.rp-stat-num {
font: 600 19px/1.1 var(--font-sans);
color: var(--text1);
margin-bottom: 3px;
letter-spacing: -0.01em;
}
.rp-stat-label {
font-size: 11.5px;
font-weight: 600;
color: var(--text2);
margin-bottom: 1px;
text-transform: lowercase;
}
.rp-stat-sub { font-size: 10.5px; color: var(--text3); }
.rp-stat-primary .rp-stat-num { color: #047857; }
.rp-stat-core .rp-stat-num { color: #047857; }
.rp-stat-ff .rp-stat-num { color: #991b1b; }
.rp-stat-rescue .rp-stat-num { color: #92400e; }
.rp-stat-cluster .rp-stat-num { color: #1e40af; }
[data-theme="dark"] .rp-stat-primary .rp-stat-num,
[data-theme="dark"] .rp-stat-core .rp-stat-num { color: #6ee7b7; }
[data-theme="dark"] .rp-stat-ff .rp-stat-num { color: #fca5a5; }
[data-theme="dark"] .rp-stat-rescue .rp-stat-num { color: #fcd34d; }
[data-theme="dark"] .rp-stat-cluster .rp-stat-num { color: #93c5fd; }
.rp-summary-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* pills */
.rp-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
background: rgba(0,0,0,0.05);
color: var(--text2);
line-height: 1.4;
}
[data-theme="dark"] .rp-pill { background: rgba(255,255,255,0.07); }
.rp-pill code {
background: transparent;
font-size: 10.5px;
padding: 0 2px;
}
.rp-pill-on { background: #d1fae5; color: #047857; }
.rp-pill-off { background: rgba(0,0,0,0.05); color: var(--text3); }
.rp-pill-status { background: rgba(16,185,129,0.15); color: #047857; font-weight: 600; }
.rp-pill-resc { background: #fef3c7; color: #92400e; }
.rp-pill-front { background: #ede9fe; color: #6d28d9; }
.rp-pill-cluster { background: rgba(59,130,246,0.10); color: #1e40af; }
[data-theme="dark"] .rp-pill-on { background: rgba(16,185,129,0.18); color: #6ee7b7; }
[data-theme="dark"] .rp-pill-status { background: rgba(16,185,129,0.18); color: #6ee7b7; }
[data-theme="dark"] .rp-pill-resc { background: rgba(245,158,11,0.18); color: #fcd34d; }
[data-theme="dark"] .rp-pill-front { background: rgba(139,92,246,0.18); color: #c4b5fd; }
[data-theme="dark"] .rp-pill-cluster { background: rgba(59,130,246,0.18); color: #93c5fd; }
/* category pills (in preview list) */
.rp-cat-core { background: rgba(16,185,129,0.15); color: #047857; }
.rp-cat-adjacent { background: rgba(59,130,246,0.12); color: #1e40af; }
.rp-cat-neutral { background: rgba(0,0,0,0.06); color: var(--text2); }
.rp-cat-negative { background: rgba(220,38,38,0.10); color: #991b1b; }
.rp-cat-false-friend { background: rgba(220,38,38,0.20); color: #991b1b; font-weight: 600; }
[data-theme="dark"] .rp-cat-core { background: rgba(16,185,129,0.18); color: #6ee7b7; }
[data-theme="dark"] .rp-cat-adjacent { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-theme="dark"] .rp-cat-neutral { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .rp-cat-negative { background: rgba(239,68,68,0.18); color: #fca5a5; }
[data-theme="dark"] .rp-cat-false-friend { background: rgba(239,68,68,0.25); color: #fca5a5; }
/* buttons */
.rp-btn {
padding: 8px 16px;
border: 1px solid rgba(80,110,100,0.2);
background: rgba(255,255,255,0.6);
color: var(--text1);
border-radius: 8px;
font: 500 13px var(--font-sans);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.rp-btn:hover { background: rgba(255,255,255,0.95); border-color: rgba(80,110,100,0.35); }
.rp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[data-theme="dark"] .rp-btn {
background: rgba(255,255,255,0.06);
border-color: rgba(140,160,150,0.22);
}
[data-theme="dark"] .rp-btn:hover { background: rgba(255,255,255,0.12); }
.rp-btn-primary {
background: #047857;
border-color: #047857;
color: #fff;
}
.rp-btn-primary:hover { background: #065f46; border-color: #065f46; }
[data-theme="dark"] .rp-btn-primary {
background: #10b981;
border-color: #10b981;
color: #052e1f;
}
[data-theme="dark"] .rp-btn-primary:hover { background: #34d399; border-color: #34d399; }
.rp-btn-ghost { background: transparent; }
.rp-status, .rp-form-status {
font-size: 12px;
color: var(--text3);
line-height: 1.5;
}
.rp-status-error { color: #b91c1c; }
[data-theme="dark"] .rp-status-error { color: #fca5a5; }
/* workspace two-column — Builder left, Recs sticky right */
.rp-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
gap: 20px;
align-items: start;
}
@media (max-width: 1100px) {
.rp-workspace { grid-template-columns: 1fr; }
.rp-workspace-recs { position: static !important; }
}
.rp-workspace-col { min-width: 0; }
.rp-workspace-recs {
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
.rp-workspace-recs .rp-recs { padding: 20px 22px; }
.rp-workspace-recs .rp-rec-row { padding: 12px 14px; }
.rp-workspace-recs .rp-rec-title { font-size: 13.5px; margin-bottom: 6px; }
.rp-workspace-recs .rp-rec-score { font-size: 15px; }
.rp-workspace-recs .rp-rec-rank { font-size: 12px; }
/* edit form */
.rp-form { display: flex; flex-direction: column; gap: 18px; }
.rp-field { display: flex; flex-direction: column; gap: 4px; }
.rp-field-label {
font: 600 12.5px/1.4 var(--font-sans);
color: var(--text2);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.rp-field-hint { font-size: 11.5px; color: var(--text3); margin-bottom: 6px; }
.rp-input {
width: 100%;
padding: 10px 12px;
font: 400 13px/1.55 var(--font-sans);
border: 1px solid rgba(80,110,100,0.16);
border-radius: 8px;
background: rgba(255,255,255,0.55);
color: var(--text1);
resize: vertical;
box-sizing: border-box;
}
.rp-input:focus {
outline: none;
border-color: #047857;
background: #fff;
box-shadow: 0 0 0 3px rgba(4,120,87,0.12);
}
[data-theme="dark"] .rp-input {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.22);
}
[data-theme="dark"] .rp-input:focus {
background: rgba(255,255,255,0.08);
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.rp-input-large { min-height: 180px; }
.rp-input-list { min-height: 90px; font: 400 12.5px/1.5 var(--font-mono, ui-monospace, monospace); }
/* toggle */
.rp-toggle-row {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
background: rgba(255,255,255,0.35);
border: 1px solid rgba(80,110,100,0.12);
border-radius: 10px;
}
[data-theme="dark"] .rp-toggle-row {
background: rgba(255,255,255,0.03);
border-color: rgba(140,160,150,0.16);
}
.rp-toggle {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.rp-toggle input { opacity: 0; width: 0; height: 0; }
.rp-toggle-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.18);
border-radius: 34px;
transition: 0.2s;
}
.rp-toggle-slider:before {
position: absolute;
content: "";
height: 16px; width: 16px;
left: 3px; top: 3px;
background: #fff;
border-radius: 50%;
transition: 0.2s;
}
.rp-toggle input:checked + .rp-toggle-slider { background: #047857; }
.rp-toggle input:checked + .rp-toggle-slider:before { transform: translateX(16px); }
[data-theme="dark"] .rp-toggle-slider { background: rgba(255,255,255,0.18); }
[data-theme="dark"] .rp-toggle input:checked + .rp-toggle-slider { background: #10b981; }
.rp-toggle-body { flex: 1; }
.rp-toggle-title { font: 600 13px var(--font-sans); margin-bottom: 3px; }
.rp-toggle-sub { font-size: 11.5px; color: var(--text3); line-height: 1.5; }
.rp-toggle-sub code {
font-size: 11px;
background: rgba(0,0,0,0.06);
padding: 1px 4px;
border-radius: 3px;
}
[data-theme="dark"] .rp-toggle-sub code { background: rgba(255,255,255,0.07); }
.rp-form-actions {
display: flex;
align-items: center;
gap: 12px;
padding-top: 6px;
}
/* preview list */
.rp-paper-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 720px;
overflow-y: auto;
margin: 0 -10px;
padding: 0 10px;
}
.rp-paper-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.45);
border: 1px solid rgba(80,110,100,0.10);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
}
.rp-paper-row:hover {
background: rgba(255,255,255,0.85);
border-color: rgba(80,110,100,0.22);
}
[data-theme="dark"] .rp-paper-row {
background: rgba(255,255,255,0.03);
border-color: rgba(140,160,150,0.12);
}
[data-theme="dark"] .rp-paper-row:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(140,160,150,0.22);
}
.rp-paper-rank {
font: 500 12px var(--font-mono, monospace);
color: var(--text3);
padding-top: 2px;
}
.rp-paper-body { min-width: 0; }
.rp-paper-title {
font: 600 13.5px/1.4 var(--font-sans);
color: var(--text1);
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
}
.rp-paper-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 4px;
}
.rp-paper-meta code {
font-size: 11px;
color: var(--text3);
background: rgba(0,0,0,0.04);
padding: 1px 5px;
border-radius: 3px;
}
[data-theme="dark"] .rp-paper-meta code { background: rgba(255,255,255,0.06); }
.rp-paper-reason {
font-size: 11.5px;
color: var(--text3);
margin-top: 4px;
line-height: 1.5;
font-style: italic;
}
.rp-paper-score {
font: 600 15px/1 var(--font-mono, monospace);
color: var(--text1);
padding-top: 4px;
}
/* ── builder card (profile-ui-simplify-v2) ──────────────────────── */
.rp-builder { padding: 24px 28px; }
.rp-builder .rp-card-head { margin-bottom: 20px; }
.rp-step { margin-bottom: 22px; }
.rp-step:last-child { margin-bottom: 0; }
.rp-step-label {
display: block;
font: 600 14px/1.4 var(--font-sans);
color: var(--text1);
margin-bottom: 4px;
}
.rp-step-hint {
font-size: 12px;
color: var(--text3);
margin-bottom: 10px;
line-height: 1.55;
}
.rp-step-hint code {
font-size: 11px;
background: rgba(0,0,0,0.05);
padding: 1px 5px;
border-radius: 3px;
}
[data-theme="dark"] .rp-step-hint code { background: rgba(255,255,255,0.06); }
.rp-focus-input {
width: 100%;
padding: 12px 14px;
font: 500 15px/1.4 var(--font-serif, var(--font-sans));
border: 1.5px solid rgba(80,110,100,0.18);
border-radius: 10px;
background: #fff;
color: var(--text1);
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-focus-input:focus {
outline: none;
border-color: #047857;
box-shadow: 0 0 0 3px rgba(4,120,87,0.14);
}
[data-theme="dark"] .rp-focus-input {
background: rgba(255,255,255,0.05);
border-color: rgba(140,160,150,0.24);
color: var(--text1);
}
[data-theme="dark"] .rp-focus-input:focus {
background: rgba(255,255,255,0.10);
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.rp-divider {
border-top: 1px solid rgba(80,110,100,0.12);
margin: 22px 0;
}
[data-theme="dark"] .rp-divider { border-top-color: rgba(140,160,150,0.14); }
/* chip editors */
.rp-chip-step .rp-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px 10px;
background: rgba(255,255,255,0.45);
border: 1px solid rgba(80,110,100,0.14);
border-radius: 10px;
min-height: 42px;
}
[data-theme="dark"] .rp-chip-step .rp-chip-row {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.18);
}
.rp-chip-editable {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 4px 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
background: rgba(0,0,0,0.06);
color: var(--text2);
}
[data-theme="dark"] .rp-chip-editable { background: rgba(255,255,255,0.08); }
.rp-chip-core { background: rgba(16,185,129,0.16); color: #047857; }
.rp-chip-adj { background: rgba(59,130,246,0.14); color: #1e40af; }
.rp-chip-neg { background: rgba(220,38,38,0.12); color: #991b1b; }
.rp-chip-front { background: rgba(139,92,246,0.14); color: #6d28d9; }
[data-theme="dark"] .rp-chip-core { background: rgba(16,185,129,0.20); color: #6ee7b7; }
[data-theme="dark"] .rp-chip-adj { background: rgba(59,130,246,0.20); color: #93c5fd; }
[data-theme="dark"] .rp-chip-neg { background: rgba(239,68,68,0.20); color: #fca5a5; }
[data-theme="dark"] .rp-chip-front { background: rgba(139,92,246,0.22); color: #c4b5fd; }
.rp-chip-x {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent;
border-radius: 50%;
cursor: pointer;
font-size: 14px; line-height: 1;
color: inherit;
opacity: 0.55;
padding: 0;
transition: opacity 0.12s, background 0.12s;
}
.rp-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.12); }
[data-theme="dark"] .rp-chip-x:hover { background: rgba(255,255,255,0.15); }
.rp-chip-input {
flex: 1;
min-width: 140px;
padding: 4px 8px;
font: 400 13px var(--font-sans);
border: none;
background: transparent;
color: var(--text1);
outline: none;
}
.rp-chip-input::placeholder { color: var(--text3); }
/* must_not_confuse */
.rp-mnc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rp-mnc-card {
position: relative;
padding: 12px 36px 12px 14px;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(80,110,100,0.14);
border-radius: 10px;
font-size: 12.5px;
}
[data-theme="dark"] .rp-mnc-card {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.18);
}
.rp-mnc-term {
font: 600 13px var(--font-mono, monospace);
color: var(--text1);
margin-bottom: 6px;
}
.rp-mnc-line {
color: var(--text2);
line-height: 1.5;
margin-bottom: 2px;
}
.rp-mnc-line strong { color: var(--text1); font-weight: 600; }
.rp-mnc-x {
position: absolute;
top: 8px; right: 8px;
width: 22px; height: 22px;
border: none; background: transparent;
border-radius: 50%;
cursor: pointer; font-size: 16px; line-height: 1;
color: var(--text3);
opacity: 0.6;
padding: 0;
}
.rp-mnc-x:hover { opacity: 1; background: rgba(0,0,0,0.08); color: #991b1b; }
[data-theme="dark"] .rp-mnc-x:hover { background: rgba(255,255,255,0.10); color: #fca5a5; }
.rp-mnc-form {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
background: rgba(255,255,255,0.45);
border: 1px dashed rgba(80,110,100,0.22);
border-radius: 10px;
margin-bottom: 10px;
}
[data-theme="dark"] .rp-mnc-form {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.28);
}
.rp-mnc-input { padding: 8px 10px; font-size: 13px; min-height: unset; }
.rp-mnc-form-actions { display: flex; gap: 8px; }
.rp-btn-small { padding: 5px 12px; font-size: 12px; }
/* Advanced fold */
.rp-advanced { margin: 0; }
.rp-advanced-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: transparent;
border: none;
cursor: pointer;
font: 500 12px var(--font-sans);
color: var(--text3);
border-radius: 6px;
}
.rp-advanced-toggle:hover {
background: rgba(0,0,0,0.04);
color: var(--text1);
}
[data-theme="dark"] .rp-advanced-toggle:hover { background: rgba(255,255,255,0.05); }
.rp-advanced-caret { width: 12px; font-size: 9px; }
.rp-advanced-body { padding-left: 18px; margin-top: 8px; }
/* recommendation rows */
.rp-recs { padding: 22px 24px; }
.rp-rec-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(80,110,100,0.10);
border-radius: 10px;
margin-bottom: 8px;
transition: background 0.15s, border-color 0.15s;
}
.rp-rec-row:hover {
background: rgba(255,255,255,0.85);
border-color: rgba(80,110,100,0.22);
}
[data-theme="dark"] .rp-rec-row {
background: rgba(255,255,255,0.03);
border-color: rgba(140,160,150,0.12);
}
[data-theme="dark"] .rp-rec-row:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(140,160,150,0.22);
}
.rp-rec-rank {
font: 600 13px var(--font-mono, monospace);
color: var(--text3);
padding-top: 2px;
}
.rp-rec-body { min-width: 0; }
.rp-rec-title {
font: 600 14.5px/1.4 var(--font-serif, var(--font-sans));
color: var(--text1);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.rp-rec-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.rp-rec-meta code {
font-size: 11px;
color: var(--text3);
background: rgba(0,0,0,0.04);
padding: 1px 6px;
border-radius: 3px;
}
[data-theme="dark"] .rp-rec-meta code { background: rgba(255,255,255,0.06); }
.rp-rec-score {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
padding-top: 4px;
min-width: 96px;
}
/* research-profile-score-calibration-v1: match-label + 0–100 display.
Replaces the old single 1.00 readout. */
.rp-rec-label {
font: 600 11px/1.2 var(--font-sans, system-ui);
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.02em;
white-space: nowrap;
text-transform: uppercase;
}
.rp-match-strong-match {
background: #0e8a4f;
color: #ffffff;
}
.rp-match-good-match {
background: #e8f4ed;
color: #0e6b3d;
border: 1px solid #c2e0cf;
}
.rp-match-adjacent {
background: #f3f4f6;
color: #4b5563;
border: 1px solid #e5e7eb;
}
.rp-match-weak {
background: transparent;
color: var(--text3);
border: 1px dashed #d1d5db;
}
[data-theme="dark"] .rp-match-good-match {
background: rgba(46, 160, 67, 0.12);
color: #4ade80;
border-color: rgba(46, 160, 67, 0.3);
}
[data-theme="dark"] .rp-match-adjacent {
background: rgba(255, 255, 255, 0.05);
color: var(--text2);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .rp-match-weak {
border-color: rgba(255, 255, 255, 0.15);
}
.rp-rec-pct {
font: 700 14px/1 var(--font-mono, monospace);
color: var(--text2);
}
.rp-rec-footer {
margin-top: 10px;
text-align: center;
}
/* ── paper-annotation-v1 ───────────────────────────────────────── */
.annotations-tab {
padding: 12px 16px;
font-size: 13px;
line-height: 1.5;
}
.ann-empty {
padding: 32px 12px;
text-align: center;
color: var(--text3);
font-size: 13px;
}
.ann-error { color: #c44; }
.ann-composer-add {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.ann-sort {
display: inline-flex;
gap: 4px;
background: var(--bg2, #f5f5f1);
border-radius: 6px;
padding: 3px;
}
.ann-sort-btn {
border: 0;
background: transparent;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
color: var(--text2);
cursor: pointer;
}
.ann-sort-btn:hover { background: rgba(74, 124, 111, 0.08); }
.ann-sort-btn.active {
background: var(--accent, #4a7c6f);
color: #fff;
}
.ann-threads { display: flex; flex-direction: column; gap: 18px; }
.ann-thread {
border: 1px solid var(--border, #e3e3df);
border-radius: 8px;
padding: 10px 12px;
background: var(--bg1, #fff);
}
.ann-thread-header {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 8px;
padding: 4px 6px 8px 6px;
border-bottom: 1px dashed var(--border, #e3e3df);
border-radius: 4px;
cursor: pointer;
transition: background 120ms ease;
}
.ann-thread-header:hover {
background: rgba(74, 124, 111, 0.06);
}
.ann-thread-header:active {
background: rgba(74, 124, 111, 0.12);
}
.ann-thread-header:focus-visible {
outline: 2px solid var(--accent, #4a7c6f);
outline-offset: 2px;
}
.ann-thread-para {
font-size: 11px;
color: var(--text3);
font-family: ui-monospace, monospace;
}
.ann-thread-quote {
font-size: 12px;
color: var(--text2);
font-style: italic;
}
.ann-item { padding: 6px 0; }
.ann-item + .ann-item {
border-top: 1px dotted var(--border, #eee);
margin-top: 4px;
padding-top: 8px;
}
.ann-meta { font-size: 11px; color: var(--text3); margin-bottom: 3px; }
.ann-mine-tag {
background: var(--accent, #4a7c6f);
color: #fff;
font-size: 10px;
padding: 1px 5px;
border-radius: 3px;
margin-left: 4px;
}
.ann-body { color: var(--text1); font-size: 13px; white-space: pre-wrap; }
.ann-no-body { color: var(--text3); font-size: 11px; font-style: italic; }
.ann-actions {
display: flex;
gap: 8px;
margin-top: 4px;
align-items: center;
}
.ann-vote, .ann-reply-btn, .ann-delete-btn {
border: 1px solid transparent;
background: transparent;
font-size: 11px;
color: var(--text2);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.ann-vote:hover, .ann-reply-btn:hover { background: rgba(74, 124, 111, 0.08); }
.ann-vote.active {
background: rgba(74, 124, 111, 0.16);
color: var(--accent, #4a7c6f);
font-weight: 600;
}
.ann-delete-btn:hover { background: rgba(196, 68, 68, 0.10); color: #c44; }
.ann-reply {
margin-left: 22px;
border-left: 2px solid var(--border, #e3e3df);
padding-left: 10px;
}
.ann-reply-composer {
margin: 8px 0 4px 22px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ann-reply-composer textarea {
width: 100%;
border: 1px solid var(--border, #e3e3df);
border-radius: 6px;
padding: 6px 8px;
font-family: inherit;
font-size: 12px;
resize: vertical;
}
.ann-reply-composer button {
align-self: flex-end;
font-size: 11px;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid var(--border, #e3e3df);
background: var(--bg1, #fff);
cursor: pointer;
}
.ann-reply-composer .ann-reply-submit {
background: var(--accent, #4a7c6f);
color: #fff;
border-color: var(--accent, #4a7c6f);
}
.ann-tab-count {
display: inline-block;
margin-left: 5px;
background: var(--accent, #4a7c6f);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 8px;
min-width: 16px;
text-align: center;
}
/* ── v4 polish: ghost suggestions / wire row / dirty indicator ─── */
/* ghost suggestion chips (shown when chip group is empty) */
.rp-chip-ghost-label {
font-size: 11px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 6px 4px 0;
}
.rp-chip-ghost {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px dashed rgba(80,110,100,0.30);
background: transparent;
border-radius: 999px;
font: 500 12px var(--font-sans);
color: var(--text2);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rp-chip-ghost:hover {
background: rgba(255,255,255,0.7);
border-color: rgba(80,110,100,0.55);
border-style: solid;
color: var(--text1);
}
[data-theme="dark"] .rp-chip-ghost {
border-color: rgba(140,160,150,0.32);
color: var(--text2);
}
[data-theme="dark"] .rp-chip-ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(140,160,150,0.55);
color: var(--text1);
}
/* category-tinted ghosts (subtle) */
.rp-chip-ghost.rp-chip-core { color: #047857; border-color: rgba(16,185,129,0.35); }
.rp-chip-ghost.rp-chip-adj { color: #1e40af; border-color: rgba(59,130,246,0.35); }
.rp-chip-ghost.rp-chip-neg { color: #991b1b; border-color: rgba(220,38,38,0.30); }
.rp-chip-ghost.rp-chip-front { color: #6d28d9; border-color: rgba(139,92,246,0.35); }
[data-theme="dark"] .rp-chip-ghost.rp-chip-core { color: #6ee7b7; }
[data-theme="dark"] .rp-chip-ghost.rp-chip-adj { color: #93c5fd; }
[data-theme="dark"] .rp-chip-ghost.rp-chip-neg { color: #fca5a5; }
[data-theme="dark"] .rp-chip-ghost.rp-chip-front { color: #c4b5fd; }
/* compact wire row (replaces the big toggle card) */
.rp-wire-row {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: rgba(255,255,255,0.40);
border: 1px solid rgba(80,110,100,0.10);
border-radius: 10px;
margin: 4px 0;
}
[data-theme="dark"] .rp-wire-row {
background: rgba(255,255,255,0.03);
border-color: rgba(140,160,150,0.14);
}
.rp-wire-body { flex: 1; min-width: 0; }
.rp-wire-title { font: 600 13px var(--font-sans); margin-bottom: 2px; }
.rp-wire-sub { font-size: 11.5px; color: var(--text3); line-height: 1.45; }
/* dirty indicator */
.rp-dirty {
font-size: 12px;
color: #b45309;
font-weight: 500;
}
[data-theme="dark"] .rp-dirty { color: #fcd34d; }
/* paper-card hierarchy refinement (title up, score muted) */
.rp-rec-title {
font: 700 14.5px/1.4 var(--font-serif, var(--font-sans));
color: var(--text1);
}
.rp-rec-score {
font: 600 14px/1 var(--font-mono, monospace);
color: var(--text3);
padding-top: 4px;
}
.rp-rec-row { padding: 12px 14px; gap: 12px; margin-bottom: 6px; }
/* compact recommendations title */
.rp-recs .rp-card-head h3 { font-size: 15px; }
/* tighter focus input on the right column */
.rp-workspace-recs .rp-card-head { margin-bottom: 12px; }
/* shrink Add input visually so empty rows don't dominate */
.rp-chip-input {
font-size: 12px;
min-width: 100px;
}
.rp-chip-input::placeholder { opacity: 0.6; }
/* ── v5 polish ────────────────────────────────────────────────── */
/* chip block grouping (Selected vs Suggested) */
.rp-chip-step .rp-chip-row {
padding: 4px 0;
background: transparent;
border: none;
min-height: 0;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.rp-chip-block {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px 10px;
background: rgba(255,255,255,0.45);
border: 1px solid rgba(80,110,100,0.12);
border-radius: 10px;
min-height: 38px;
}
[data-theme="dark"] .rp-chip-block {
background: rgba(255,255,255,0.04);
border-color: rgba(140,160,150,0.16);
}
.rp-chip-block-ghost {
background: rgba(255,255,255,0.20);
border-style: dashed;
border-color: rgba(80,110,100,0.18);
}
[data-theme="dark"] .rp-chip-block-ghost {
background: rgba(255,255,255,0.02);
border-color: rgba(140,160,150,0.20);
}
.rp-chip-block-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--text3);
padding: 0 6px 0 2px;
margin-right: 2px;
flex-shrink: 0;
}
/* further compress summary card */
.rp-summary { padding: 16px 22px; }
.rp-summary-head { margin-bottom: 14px; }
.rp-summary-title {
font: 700 17px/1.25 var(--font-serif, var(--font-sans));
margin-bottom: 3px;
}
.rp-summary-subline { font-size: 11px; margin-bottom: 8px; }
.rp-summary-stats { gap: 8px; margin-bottom: 14px; }
.rp-stat { padding: 9px 12px; }
.rp-stat-num { font-size: 17px; margin-bottom: 2px; }
.rp-stat-label { font-size: 11px; }
.rp-stat-sub { font-size: 10px; }
.rp-summary-actions { gap: 8px; }
/* further mute the score in recommendation rows */
.rp-rec-score {
font: 500 12.5px/1 var(--font-mono, monospace);
color: var(--text3);
opacity: 0.7;
padding-top: 6px;
letter-spacing: 0.02em;
}
.rp-rec-row:hover .rp-rec-score { opacity: 1; }
/* widen the right column floor a touch and tighten gap */
.rp-workspace {
grid-template-columns: minmax(0, 1fr) minmax(460px, 1fr);
gap: 18px;
}
/* "Coming next" tag on the disabled cluster review button */
.rp-btn-soon { opacity: 0.55; cursor: not-allowed; }
.rp-btn-soon-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font: 600 9.5px var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(139,92,246,0.18);
color: #6d28d9;
}
[data-theme="dark"] .rp-btn-soon-tag {
background: rgba(139,92,246,0.25);
color: #c4b5fd;
}
/* ── paper-annotation v1.1 — floating selection toolbar ──────── */
/* Style matches Apryse's native selection menu: compact icon row,
white background, thin border, hover background only. */
.ann-floating-toolbar {
position: fixed;
z-index: 10000;
display: inline-flex;
align-items: center;
gap: 1px;
background: var(--bg1, #fff);
border: 1px solid var(--border, #d0d0cc);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
padding: 3px 4px;
user-select: none;
}
.ann-fb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
border-radius: 4px;
cursor: pointer;
color: var(--text2, #555);
}
.ann-fb-btn svg { width: 16px; height: 16px; display: block; }
.ann-fb-btn:hover {
background: var(--bg2, #f0f0ed);
color: var(--text1, #1a1a1a);
}
.ann-fb-btn:active { background: rgba(74, 124, 111, 0.18); }
.ann-fb-divider {
width: 1px;
height: 18px;
background: var(--border, #e0e0dc);
margin: 0 3px;
display: inline-block;
}
.ann-fb-close { color: var(--text3, #777); }
.ann-fb-close:hover { color: #c44; background: rgba(196, 68, 68, 0.10); }
/* Custom tooltip — appears immediately on hover. Replaces native
browser tooltip so styling stays consistent with Apryse's own. */
.ann-fb-btn[data-tip] { position: relative; }
.ann-fb-btn[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #2a2a2a;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
z-index: 10002;
letter-spacing: 0.01em;
}
.ann-fb-btn[data-tip]:hover::before {
/* Little upward-pointing arrow stub between button and tooltip. */
content: "";
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #2a2a2a;
pointer-events: none;
z-index: 10002;
}
.ann-floating-popover {
position: fixed;
z-index: 10001;
width: 320px;
background: var(--bg1, #fff);
border: 1px solid var(--border, #d8d8d4);
border-radius: 10px;
box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
}
.ann-fp-quote {
font-size: 11px;
color: var(--text3, #777);
font-style: italic;
border-left: 3px solid var(--accent, #4a7c6f);
padding-left: 8px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ann-fp-input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border, #d8d8d4);
border-radius: 6px;
padding: 8px 10px;
font-family: inherit;
font-size: 13px;
resize: vertical;
min-height: 70px;
outline: none;
}
.ann-fp-input:focus { border-color: var(--accent, #4a7c6f); }
.ann-fp-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.ann-fp-btn {
font-size: 12px;
padding: 5px 12px;
border-radius: 5px;
border: 1px solid var(--border, #d8d8d4);
background: var(--bg1, #fff);
cursor: pointer;
color: var(--text1, #1a1a1a);
}
.ann-fp-cancel:hover { background: var(--bg2, #f5f5f1); }
.ann-fp-submit {
background: var(--accent, #4a7c6f);
color: #fff;
border-color: var(--accent, #4a7c6f);
}
.ann-fp-submit:hover { background: #3e6a5e; }
.ann-fp-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
[data-theme="dark"] .ann-floating-toolbar,
[data-theme="dark"] .ann-floating-popover {
background: #2a2a2a;
border-color: #444;
}
[data-theme="dark"] .ann-fb-btn { color: #ccc; }
[data-theme="dark"] .ann-fb-btn:hover { background: #3a3a3a; color: #fff; }
[data-theme="dark"] .ann-fb-divider { background: #444; }
[data-theme="dark"] .ann-fb-close { color: #999; }
[data-theme="dark"] .ann-fp-input {
background: #1f1f1f;
border-color: #444;
color: #eee;
}
[data-theme="dark"] .ann-fp-btn { background: #2a2a2a; border-color: #444; color: #eee; }
/* ── Cluster Review (profile-cluster-review-v1) ───────────────────── */
.rpcr-shell {
display: flex;
flex-direction: column;
gap: 14px;
}
.rpcr-topbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.rpcr-title {
font-size: 18px;
font-weight: 600;
color: var(--rp-text-strong, #1f2a26);
flex: 1;
}
.rpcr-title-strong { font-weight: 700; }
.rpcr-summary-counts {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.rpcr-count {
display: inline-block;
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid rgba(80,110,100,0.25);
background: rgba(255,255,255,0.6);
color: #333;
}
.rpcr-count-core { background: rgba(85, 170, 100, 0.18); border-color: rgba(85,170,100,0.45); }
.rpcr-count-adjacent { background: rgba(120, 170, 200, 0.18); border-color: rgba(120,170,200,0.45); }
.rpcr-count-neutral { background: rgba(180, 180, 180, 0.18); border-color: rgba(150,150,150,0.40); }
.rpcr-count-negative { background: rgba(220, 130, 130, 0.18); border-color: rgba(220,130,130,0.45); }
.rpcr-count-ff { background: rgba(220, 170, 90, 0.22); border-color: rgba(220,170,90,0.50); }
.rpcr-count-dirty { background: rgba(255, 220, 90, 0.28); border-color: rgba(200,160,40,0.6); font-weight: 600; }
.rpcr-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid rgba(80,110,100,0.2);
}
.rpcr-search {
flex: 0 0 240px;
padding: 5px 9px;
border: 1px solid rgba(80,110,100,0.30);
border-radius: 6px;
background: rgba(255,255,255,0.85);
font-size: 13px;
}
.rpcr-filter { font-size: 13px; }
.rpcr-filter select {
margin-left: 4px;
padding: 4px 8px;
border: 1px solid rgba(80,110,100,0.3);
border-radius: 6px;
background: rgba(255,255,255,0.85);
font-size: 13px;
}
.rpcr-spacer { flex: 1; }
.rpcr-table-wrap {
border: 1px solid rgba(80,110,100,0.18);
border-radius: 8px;
overflow: hidden;
}
.rpcr-row {
display: grid;
grid-template-columns: 60px 1fr 160px 80px 1.4fr;
align-items: start;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid rgba(80,110,100,0.10);
font-size: 13px;
}
.rpcr-row:last-child { border-bottom: none; }
.rpcr-row-head {
font-weight: 600;
background: rgba(80,110,100,0.06);
color: #455;
}
.rpcr-row-edited {
background: rgba(255, 220, 90, 0.10);
}
.rpcr-cell-cid {
font-variant-numeric: tabular-nums;
color: #678;
font-size: 12px;
}
.rpcr-label {
font-weight: 500;
color: #1f2a26;
}
.rpcr-label-sub {
font-size: 11px;
color: #8a9590;
margin-top: 2px;
}
.rpcr-edited-tag {
background: rgba(255, 200, 30, 0.5);
color: #553;
padding: 0 5px;
border-radius: 6px;
font-weight: 600;
}
.rpcr-cat-select {
width: 100%;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid rgba(80,110,100,0.30);
background: rgba(255,255,255,0.9);
font-size: 12px;
}
.rpcr-cat-core { background: rgba(85, 170, 100, 0.20); }
.rpcr-cat-adjacent { background: rgba(120, 170, 200, 0.20); }
.rpcr-cat-neutral { background: rgba(180, 180, 180, 0.15); }
.rpcr-cat-negative { background: rgba(220, 130, 130, 0.20); }
.rpcr-cat-false_friend { background: rgba(220, 170, 90, 0.25); }
.rpcr-cell-n {
font-variant-numeric: tabular-nums;
text-align: right;
color: #557;
}
.rpcr-sample-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
color: #444;
}
.rpcr-sample-list li {
padding: 1px 0;
display: flex;
justify-content: space-between;
gap: 8px;
}
.rpcr-no-samples { color: #999; }
.rpcr-score {
font-variant-numeric: tabular-nums;
color: #678;
font-size: 11px;
}
.rpcr-empty {
padding: 24px;
text-align: center;
color: #888;
}
.rpcr-preview-panel { display: contents; }
.rpcr-preview {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(80,110,100,0.20);
border-radius: 8px;
padding: 12px;
}
.rpcr-preview-head {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
margin-bottom: 8px;
color: #335;
}
.rpcr-preview-close { margin-left: auto; }
.rpcr-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rpcr-preview-col-title {
font-size: 12px;
font-weight: 600;
color: #557;
margin-bottom: 4px;
}
.rpcr-pv-list {
list-style: decimal;
padding-left: 22px;
margin: 0;
font-size: 12px;
color: #234;
}
.rpcr-pv-list li { padding: 2px 0; }
.rpcr-pv-score {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: #557;
display: inline-block;
min-width: 48px;
}
.rpcr-pv-delta {
font-variant-numeric: tabular-nums;
font-weight: 600;
display: inline-block;
min-width: 60px;
}
.rpcr-tag-new {
font-size: 10px;
padding: 1px 5px;
border-radius: 6px;
background: rgba(255,220,90,0.4);
color: #553;
font-weight: 500;
}
.rpcr-preview-band {
margin-top: 10px;
padding: 8px 10px;
border-radius: 6px;
}
.rpcr-preview-promoted { background: rgba(85, 170, 100, 0.12); }
.rpcr-preview-suppressed { background: rgba(220, 130, 130, 0.12); }
/* dark mode tweaks */
[data-theme="dark"] .rpcr-search,
[data-theme="dark"] .rpcr-filter select,
[data-theme="dark"] .rpcr-cat-select {
background: rgba(20,20,20,0.85);
color: #ddd;
border-color: #444;
}
[data-theme="dark"] .rpcr-label { color: #ddd; }
[data-theme="dark"] .rpcr-label-sub { color: #999; }
[data-theme="dark"] .rpcr-count { background: rgba(50,50,50,0.6); color: #ddd; }
[data-theme="dark"] .rpcr-preview { background: rgba(35,35,35,0.6); }
[data-theme="dark"] .rpcr-pv-list { color: #ddd; }
[data-theme="dark"] .rpcr-row-head { background: rgba(255,255,255,0.04); color: #aaa; }
[data-theme="dark"] .rpcr-row-edited { background: rgba(255,220,90,0.08); }
/* ── Library toolbar dropdowns (library-date-filter-v1) ───────────── */
/* Hide the legacy native