,
marks the first as .lead, and wraps every ![]()
in
— alternating sides — so prose
flows around the figures instead of stacking below them.
CRITICAL: no font / color / background / border-color overrides
below. Every rule inherits silently from the surrounding
.markdown-content cascade so L4's chat-panel typography stays
exactly as it is today. We only add LAYOUT (drop-cap geometry,
float widths, figure box rounding, caption padding).
────────────────────────────────────────────────────────────────────── */
.article-section {
margin: 0 0 28px;
}
.article-section::after {
content: '';
display: block;
clear: both;
}
/* Section-lede drop-cap removed per user feedback ("doesn't look good") — the
first paragraph's first letter renders inline (no float, no min-height guard). */
/* Figure box — geometry only. Background, border-color, and text
color inherit from the chat panel's existing surface styling. */
.article-section .ig {
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
background: var(--surface-secondary, transparent);
border: 1px solid var(--border-primary, transparent);
}
.article-section .ig img {
width: 100%;
height: auto;
display: block;
/* Soft height ceiling so a tall/near-square infographic can't tower
over the prose. `contain` (not cover) bounds the box WITHOUT cropping
any of the artwork — a tall image letterboxes against the figure's
surface tint, a wide one fills the width as before. */
max-height: 440px;
object-fit: contain;
}
.article-section .ig figcaption {
padding: 10px 14px;
font-size: 12px;
line-height: 1.5;
}
.article-section .ig figcaption b {
display: block;
font-size: 13px;
margin-bottom: 2px;
font-weight: 700;
}
/* Floated figures — alternating right / left in document order.
Width strategy: % of container so the figure scales with the pane
width; px cap ceilings the figure on very wide canvases. ~36% (≈300px
at the 1000px measure) reads as a magazine spot illustration beside a
~2/3 prose column — NOT a half-page image. The old 48%/560px made the
figure rival the text column and dominate the page. */
.article-section .ig--right {
float: right;
clear: right;
width: min(36%, 360px);
margin: 0.3em 0 16px 28px;
}
.article-section .ig--left {
float: left;
clear: left;
width: min(36%, 360px);
margin: 0.3em 28px 16px 0;
}
/* Solo figure (figures-only sections) — centred, comfortably sized but
not full-bleed. */
.article-section .ig--solo {
width: min(58%, 460px);
float: none;
margin: 4px auto 22px;
}
/* Mobile: floats clear, figures stack full-width — matches the
compose.js media query at <680px. */
@media (max-width: 680px) {
.article-section .ig--right,
.article-section .ig--left,
.article-section .ig--solo {
float: none;
width: 100%;
margin: 0 0 18px;
}
}
/* Library hierarchy and file-format language ------------------------- */
#libraryPage .lfm-session-row {
border-left: 3px solid rgba(47, 111, 205, 0.55);
}
#libraryPage .lfm-turn-row {
border-left: 3px solid rgba(218, 139, 54, 0.58);
}
#libraryPage .lfm-bucket-row {
border-left: 3px solid rgba(32, 158, 139, 0.58);
}
#libraryPage .lfm-session-row .lfm-folder-icon-svg,
#libraryPage .lfm-tree-session .lfm-folder-icon-svg {
color: #2f6fcd;
}
#libraryPage .lfm-turn-row .lfm-folder-icon-svg,
#libraryPage .lfm-tree-turn .lfm-folder-icon-svg {
color: #dc913e;
}
#libraryPage .lfm-bucket-row .lfm-folder-icon-svg,
#libraryPage .lfm-tree-bucket .lfm-folder-icon-svg {
color: #22a58d;
}
#libraryPage .lfm-tree-session.active {
color: #2058aa;
background: rgba(47, 111, 205, 0.13);
}
#libraryPage .lfm-tree-turn.active {
color: #a65f16;
background: rgba(220, 145, 62, 0.14);
}
#libraryPage .lfm-tree-bucket.active {
color: #117563;
background: rgba(34, 165, 141, 0.14);
}
#libraryPage .lfm-file-glyph {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 29px;
flex: 0 0 auto;
color: #69778b;
}
#libraryPage .lfm-file-glyph .lfm-file-icon-svg {
width: 100%;
height: 100%;
overflow: visible;
color: inherit;
}
#libraryPage .lfm-file-sheet {
fill: currentColor;
fill-opacity: 0.11;
}
#libraryPage .lfm-file-fold {
fill: currentColor;
fill-opacity: 0.22;
}
#libraryPage .lfm-file-ext {
position: absolute;
right: -5px;
bottom: -2px;
max-width: 31px;
padding: 1px 3px;
overflow: hidden;
border-radius: 3px;
color: #fff;
background: currentColor;
font: 750 6.5px/1.35 'Inter', system-ui, sans-serif;
letter-spacing: 0;
text-overflow: clip;
white-space: nowrap;
}
#libraryPage .lfm-file-ext::first-line {
color: #fff;
}
#libraryPage .lfm-file-glyph--excel { color: #16845b; }
#libraryPage .lfm-file-glyph--word { color: #3272c8; }
#libraryPage .lfm-file-glyph--pdf { color: #d34b4b; }
#libraryPage .lfm-file-glyph--powerpoint { color: #d36538; }
#libraryPage .lfm-file-glyph--markdown { color: #45627f; }
#libraryPage .lfm-file-glyph--image { color: #c0589d; }
#libraryPage .lfm-file-glyph--html { color: #168aa2; }
#libraryPage .lfm-file-glyph--json { color: #8b7b1d; }
#libraryPage .lfm-file-glyph--code { color: #4f657e; }
#libraryPage .lfm-file-glyph--excel .lfm-file-ext { background: #16845b; }
#libraryPage .lfm-file-glyph--word .lfm-file-ext { background: #3272c8; }
#libraryPage .lfm-file-glyph--pdf .lfm-file-ext { background: #d34b4b; }
#libraryPage .lfm-file-glyph--powerpoint .lfm-file-ext { background: #d36538; }
#libraryPage .lfm-file-glyph--markdown .lfm-file-ext { background: #45627f; }
#libraryPage .lfm-file-glyph--image .lfm-file-ext { background: #c0589d; }
#libraryPage .lfm-file-glyph--html .lfm-file-ext { background: #168aa2; }
#libraryPage .lfm-file-glyph--json .lfm-file-ext { background: #8b7b1d; }
#libraryPage .lfm-file-glyph--code .lfm-file-ext { background: #4f657e; }
#libraryPage .lfm-file-glyph--generic .lfm-file-ext { background: #69778b; }
#libraryPage .lfm-view--small .lfm-file-glyph,
#libraryPage .lfm-view--medium .lfm-file-glyph,
#libraryPage .lfm-view--large .lfm-file-glyph {
width: 100%;
height: 100%;
}
#libraryPage .lfm-tree-file .lfm-file-glyph {
width: 15px;
height: 18px;
}
#libraryPage .lfm-tree-file .lfm-file-ext {
display: none;
}
.library-viewer-actions {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
}
.library-viewer-chat-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 13px;
border: 1px solid rgba(55, 105, 212, 0.28);
border-radius: 7px;
color: #fff;
background: #3769d4;
box-shadow: 0 2px 7px rgba(55, 105, 212, 0.18);
font: 650 12px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
}
.library-viewer-chat-btn:hover {
background: #2f5fc3;
}
.library-viewer-header #libraryViewerTitle {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════════
L7 MAGAZINE V2 — Anthropic editorial. Scoped to .l7-mag-v2, which the
renderer adds ONLY when the exec-summary masthead block is present
(l7_magazine_v2 flag). OFF → never applies → V1 float layout untouched.
APPROVED mockup: _magazine_mockup_full.html. Principle: SYMMETRY.
────────────────────────────────────────────────────────────────────── */
.l7-mag-v2 {
/* Editorial palette — mirrors editorial-layout.html v2 reference. Page
and illustration share a near-off-white cream so the card top edge
blends seamlessly into the page; only the caption / chart-foot band
is a clean #FFFFFF. Operator: "parchment cream has to be toned down
a bit, towards light-cream moving towards off-white" — bumped from
#F8F7F1 to #FBFAF5 (5 lightness steps brighter, less yellow). */
--mag-paper:#FBFAF5; /* page + illustration background — light cream / near-off-white */
--mag-card:#FFFFFF; /* caption band / chart-foot — clean white */
--mag-ink:#2A2A28; /* body text */
--mag-soft:#403B33; /* deck colour — warm dark, softer than ink */
--mag-faint:#7C766A; /* subtitle / labels grey */
--mag-rule:#EFEDE4; /* hairline — paired with the lighter paper tone */
--mag-clay:#CE7A3E; /* terracotta / burnt orange */
--mag-clay-deep:#B5573B;
--mag-slate:#1E3A5F; /* deep navy ink (headings) */
--mag-green:#6E9080; /* sage-teal accent */
--mag-shadow-bottom:0 10px 20px -14px rgba(30,58,95,.16);
--mag-shadow-right:8px 6px 15px -18px rgba(30,58,95,.09);
--mag-shadow-left:-8px 6px 15px -18px rgba(30,58,95,.09);
background: var(--mag-paper); color: var(--mag-ink);
font-family:'Source Serif 4','Newsreader','Tiempos',Georgia,serif;
line-height:1.62;
-webkit-font-smoothing:antialiased;
}
/* ── Editorial Brief masthead (spec) — classification strip · headline+dek ·
4-KPI band · sources/doc-id footer. Background stays the page cream
(--mag-paper #FBFAF5, set on .l7-mag-v2). Type ramp: navy headline, one
terracotta accent, warm-gray everything else; weights never exceed 600. ── */
.l7-mag-v2 .l7-masthead { padding:0; margin:0 0 26px; border:0; }
/* 1 · classification strip */
.l7-mag-v2 .l7-mast-strip {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:0 0 14px; border-bottom:1px solid #D6CCB8; margin:0 0 30px;
font-family:'Inter','Plus Jakarta Sans',sans-serif;
}
.l7-mag-v2 .l7-mast-strip-l { display:flex; align-items:center; gap:14px; min-width:0; }
.l7-mag-v2 .l7-mast-strip-r { display:flex; align-items:center; gap:10px; min-width:0; }
.l7-mag-v2 .l7-mast-tick { flex:none; width:4px; height:14px; background:#C97A4E; }
.l7-mag-v2 .l7-kicker {
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:11px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
color:#B86A3E; margin:0; white-space:nowrap;
}
.l7-mag-v2 .l7-mast-div { flex:none; width:1px; height:12px; background:#D6CCB8; }
.l7-mag-v2 .l7-mast-vol,
.l7-mag-v2 .l7-mast-date {
font-size:11px; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
color:#8A8278; white-space:nowrap;
}
.l7-mag-v2 .l7-mast-class {
font-size:11px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
color:#5F584D; padding:3px 8px; border:1px solid #C9BFA9; border-radius:2px; white-space:nowrap;
}
/* 2 · headline + deck */
.l7-mag-v2 .l7-title {
font-family:'Source Serif 4','Newsreader','Tiempos',Georgia,serif;
font-size:clamp(30px,3.4vw,38px);
font-weight:500; line-height:1.14; letter-spacing:-.012em;
color:#1A3D5C; margin:0 0 14px;
}
.l7-mag-v2 .l7-deck {
font-family:'Source Serif 4','Newsreader','Tiempos',Georgia,serif;
font-size:clamp(16px,1.9vw,18px);
font-weight:400; line-height:1.55; color:#4A4540;
max-width:620px; margin:0; text-align:left; hyphens:none;
}
/* 3 · KPI band — hairline top+bottom, label → value+unit → methodology */
.l7-mag-v2 .l7-heroband {
display:grid; grid-template-columns:repeat(4,1fr);
border-top:1px solid #D6CCB8; border-bottom:1px solid #D6CCB8;
padding:20px 0 22px; margin:30px 0 0;
}
.l7-mag-v2 .l7-stat { padding:0 16px; border-left:1px solid #E4DCC4; }
.l7-mag-v2 .l7-stat:first-child { padding-left:0; border-left:0; }
.l7-mag-v2 .l7-stat:last-child { padding-right:0; }
.l7-mag-v2 .l7-l {
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
line-height:1.45; color:#8A8278; margin:0 0 14px; min-height:32px;
}
.l7-mag-v2 .l7-n {
font-family:'Source Serif 4','Newsreader','Tiempos',Georgia,serif;
font-size:36px; font-weight:500; line-height:1.0; letter-spacing:-.01em;
color:#C97A4E; margin:0 0 8px; display:flex; align-items:baseline; flex-wrap:wrap;
}
.l7-mag-v2 .l7-n .l7-cur { font-size:.72em; font-weight:500; margin-right:.03em; }
.l7-mag-v2 .l7-n .l7-unit { font-size:.56em; font-weight:500; margin-left:.10em; }
.l7-mag-v2 .l7-n .l7-unit-sm { font-size:.36em; margin-left:.16em; letter-spacing:.02em; }
.l7-mag-v2 .l7-n .yoy { font-size:.5em; font-weight:400; margin-left:.14em; color:#8A8278; }
.l7-mag-v2 .l7-meth {
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:11px; font-weight:400; line-height:1.4; color:#7A7268; margin:0;
}
/* 4 · footer */
.l7-mag-v2 .l7-mast-foot {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px 0 0; margin:0 0 40px;
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:11px; font-weight:400; letter-spacing:.08em; color:#8A8278;
}
.l7-mag-v2 .l7-foot-lbl { font-weight:600; letter-spacing:.14em; color:#5F584D; }
.l7-mag-v2 .l7-foot-id { letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:640px){
.l7-mag-v2 .l7-heroband { grid-template-columns:repeat(2,1fr); gap:24px 0; }
.l7-mag-v2 .l7-stat:nth-child(3) { border-left:0; padding-left:0; }
.l7-mag-v2 .l7-mast-strip, .l7-mag-v2 .l7-mast-foot { flex-wrap:wrap; }
}
/* Editorial float-and-wrap — figure floats right/left (alternating per
section), text wraps beside it for the figure's full height, then flows
full-width below it. No grid, no flexbox side-by-side: just CSS float so
text genuinely wraps under the image. Mirrors the editorial-layout.html
reference. `.split` is a thin float container that clears at section end. */
.l7-mag-v2 .split { margin:12px 0 8px; }
.l7-mag-v2 .split::after { content:''; display:table; clear:both; }
.l7-mag-v2 .article-section { clear:both; }
/* .col-text is the WRAPPING text container. Plain block — no display:flex,
no width, no grid — so float pushes its inline content correctly. */
.l7-mag-v2 .split .col-text > *:last-child { margin-bottom:0; }
/* The illustration card. Default float = right (matches reference's odd
section); .split.flip flips to left for even sections. Width is FIXED
(340px) per the reference — no percentage, no stretching. */
.l7-mag-v2 .col-fig {
float:right; width:340px; margin:6px 0 18px 36px;
background:var(--mag-paper); /* illustration bleeds — same as page */
border:0; /* NO border around the illustration */
border-radius:16px; overflow:hidden;
/* 3-layer shadow: bottom pool + lower-right + lower-left, NO top shadow,
so the card top blends into the page seamlessly. */
box-shadow: var(--mag-shadow-bottom), var(--mag-shadow-right), var(--mag-shadow-left);
shape-outside:margin-box;
}
/* Body paragraphs — Source Serif 4 18.5px, justified, hyphenated. */
.l7-mag-v2 .article-section p {
font-size:18.5px; line-height:1.62;
margin:0 0 22px;
text-align:justify; hyphens:auto;
}
@media (max-width:640px){
.l7-mag-v2 .article-section p { text-align:left; }
}
.l7-mag-v2 .split.flip .col-fig { float:left; margin:6px 36px 18px 0; }
/* Illustration art block. NO padding — the SVG/image must bleed to all
edges. Background is the page cream so any transparent edges blend. */
.l7-mag-v2 .col-fig .art {
display:block; width:100%; padding:0;
background:var(--mag-paper);
}
.l7-mag-v2 .col-fig img { display:block; width:100%; height:auto; }
.l7-mag-v2 .col-fig .inline-chart, .l7-mag-v2 .col-fig canvas, .l7-mag-v2 .col-fig svg {
display:block; width:100%; max-width:100%;
}
/* Caption band — clean WHITE bottom band, subtle text. */
.l7-mag-v2 .col-fig .fig-cap {
background:#FFFFFF;
padding:14px 18px 16px;
border-top:1px solid var(--mag-rule);
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}
/* Caption TITLE — subtle: medium weight, slate (not navy), small caps tracking.
Used to be 16px bold navy 'feature'; user wanted it subtler — caption-style
byline rather than a callout heading. */
.l7-mag-v2 .col-fig .fig-cap b {
display:block;
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:12.5px; font-weight:600;
letter-spacing:.06em; text-transform:uppercase;
color:var(--mag-slate);
margin:0 0 4px;
}
.l7-mag-v2 .col-fig .fig-cap span {
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-size:13px; line-height:1.5; font-weight:400;
color:var(--mag-faint);
}
/* When the writer emits a single descriptive prose alt (no '—' / '|' / ':'
editorial split), the renderer wraps the whole thing in . That reads
loud and prosey — flatten it to the subtle muted style of the subtitle so
it doesn't dominate the card. */
.l7-mag-v2 .col-fig .fig-cap:not(:has(span)) b {
font-weight:400; text-transform:none; letter-spacing:0;
font-size:13px; line-height:1.5; color:var(--mag-faint);
}
/* Section hero illustration — FULL-WIDTH banner. The Gemini data
infographic (panel triptych etc.) renders as an editorial-magazine
banner across the full column, with the alt-text caption beneath it
as a horizontal byline. Reserved for class `l7-section-hero` (set by
the orchestrator). Float-and-wrap (.col-fig) is reserved for in-text
vector illustrations the writer emits separately. Operator: "section
highlight (gemini image) should always be full display, not meant as
split and float; split-and-float image is supposed to be generated
as abstract small image as vector." */
.l7-mag-v2 img.l7-section-hero {
display:block;
clear:both;
width:100%;
height:auto;
margin:8px 0 14px;
border-radius:18px;
background:var(--mag-paper);
box-shadow: var(--mag-shadow-bottom), var(--mag-shadow-right), var(--mag-shadow-left);
}
/* Caption beneath the banner — derived from img alt-text via JS-free
approach: the alt itself isn't visible by default, so the renderer
emits an inline caption span next to the hero (see renderer.js
_v2RenderHeroCaption). When that hook isn't present the banner just
shows with no caption; the section's still tells the story. */
.l7-mag-v2 .l7-section-hero-cap {
display:block;
margin:-6px 0 28px;
padding:0 4px;
font-family:'Source Serif 4','Tiempos Text','Georgia',serif;
color:var(--mag-deep-navy, #1E3A5F);
font-size:18px;
font-weight:600;
letter-spacing:-0.005em;
}
.l7-mag-v2 .l7-section-hero-cap > b {
font-weight:700;
}
.l7-mag-v2 .l7-section-hero-cap > span {
display:block;
margin-top:4px;
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-weight:400;
font-size:14px;
color:var(--mag-slate, #7C766A);
letter-spacing:0;
}
/* Magazine-layout (.l7-mag-v2) section-lede drop-cap removed per user feedback
("doesn't look good") — the first paragraph's first letter renders inline
(no float, no min-height guard, no terra colour). */
/* Chart-card shell — inline charts inside .l7-mag-v2 get the same shadow
family as illustration cards. Full-width by default; the renderer's
_v2ApplySplit already skips the float split for charts, so this rule
takes effect for every emit_chart_svg block in an L7 magazine report. */
.l7-mag-v2 .inline-chart {
clear:both;
margin:14px 0 34px;
border-radius:16px;
overflow:hidden;
background:var(--mag-paper);
box-shadow: var(--mag-shadow-bottom), var(--mag-shadow-right), var(--mag-shadow-left);
}
.l7-mag-v2 .inline-chart .chart-title {
padding:22px 26px 4px;
font-family:'Inter','Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:16px; color:var(--mag-slate);
margin:0 0 2px;
}
.l7-mag-v2 .inline-chart canvas,
.l7-mag-v2 .inline-chart svg { padding:8px 18px 20px; }
/* References section — chat-panel scroll box, twice as tall (680px vs the
chat panel's 340px). Mirrors .references-box (style.css ~7422) but uses
the magazine V2 editorial palette. The renderer adds .l7-references via
_v2TagReferences when the section heading matches /references|sources|
citations|bibliography/. */
.l7-mag-v2 .article-section.l7-references {
max-height: 680px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--mag-rule) transparent;
background: var(--mag-card);
border: 1px solid var(--mag-rule);
border-radius: 12px;
padding: 20px 24px 16px;
margin: 28px 0 12px;
}
.l7-mag-v2 .article-section.l7-references::-webkit-scrollbar { width: 6px; }
.l7-mag-v2 .article-section.l7-references::-webkit-scrollbar-track { background: transparent; }
.l7-mag-v2 .article-section.l7-references::-webkit-scrollbar-thumb {
background: var(--mag-rule); border-radius: 3px;
}
.l7-mag-v2 .article-section.l7-references > h2 {
font-size: 22px; font-weight: 600;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--mag-rule);
color: var(--mag-slate);
}
.l7-mag-v2 .article-section.l7-references > p {
margin: 0;
padding: 8px 0;
border-bottom: 1px solid rgba(228, 218, 194, .5);
font-size: 13.5px; line-height: 1.5;
text-align: left; hyphens: none;
}
.l7-mag-v2 .article-section.l7-references > p:last-child { border-bottom: 0; }
/* Mobile — cards become full width, text left-aligned. */
@media (max-width:640px){
.l7-mag-v2 .col-fig, .l7-mag-v2 .split.flip .col-fig {
float:none; width:100%; margin:8px 0 28px;
}
.l7-mag-v2 .article-section.l7-references { max-height: 520px; }
}
/* Editorial data table. Two shapes:
- default: text-heavy (scenarios, frameworks, narrative cells) — LEFT aligned,
first column nowrap so labels like "Downside" don't break to "Downsid/e".
- .dtable-numeric: pure data — RIGHT aligned + tabular-nums (auto-detected
by _v2TagTables when every non-header data cell parses as a number).
Both wrap inside .dtable-wrap which adds horizontal scroll for wide tables
so columns are never compressed below their content width. */
.l7-mag-v2 .dtable-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 14px 0;
/* Subtle right-edge fade hints scrollability when overflowing. */
background:
linear-gradient(to right, var(--mag-paper), var(--mag-paper)),
linear-gradient(to right, var(--mag-paper), rgba(251,250,245,0)),
linear-gradient(to left, var(--mag-paper), rgba(251,250,245,0));
background-position: left top, left top, right top;
background-repeat: no-repeat;
background-size: 20px 100%, 14px 100%, 14px 100%;
background-attachment: local, scroll, scroll;
}
.l7-mag-v2 table.dtable {
border-collapse: collapse;
font-size: 15.5px;
width: 100%;
min-width: max-content;
}
.l7-mag-v2 table.dtable thead th {
font-family: 'Inter','Plus Jakarta Sans',sans-serif;
font-size: 11.5px; font-weight: 600;
letter-spacing: .10em; text-transform: uppercase;
color: var(--mag-faint);
text-align: left;
padding: 0 22px 10px 0;
border-bottom: 2px solid var(--mag-slate);
background: transparent; white-space: nowrap;
}
.l7-mag-v2 table.dtable thead th:last-child { padding-right: 0; }
.l7-mag-v2 table.dtable tbody td {
padding: 12px 22px 12px 0;
border-bottom: 1px solid var(--mag-rule);
text-align: left;
vertical-align: top;
line-height: 1.5;
}
.l7-mag-v2 table.dtable tbody td:last-child { padding-right: 0; }
/* First column = row label. Keep it on one line and visually anchor it as
the row's name (navy + semibold). Prevents "Downside" wrapping to two
lines just because the column was sized to the longest cell across rows. */
.l7-mag-v2 table.dtable tbody td:first-child {
white-space: nowrap;
font-weight: 600;
color: var(--mag-slate);
}
.l7-mag-v2 table.dtable tbody tr:last-child td { border-bottom: 0; }
/* Numeric variant — right-align + tabular-nums on every column except the row label. */
.l7-mag-v2 table.dtable.dtable-numeric thead th:not(:first-child),
.l7-mag-v2 table.dtable.dtable-numeric tbody td:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* editorial accents on the shared .article-section bits */
.l7-mag-v2 .article-section h2 {
font-family:'Newsreader','Tiempos',Georgia,serif; font-weight:500; font-size:38px;
line-height:1.14; letter-spacing:-.015em; color:var(--mag-ink);
margin:24px 0 14px;
}
.l7-mag-v2 .article-section h3 {
font-family:'Newsreader','Tiempos',Georgia,serif; font-weight:600; font-size:24px;
line-height:1.2; letter-spacing:-.01em; color:var(--mag-ink);
margin:20px 0 10px;
}
.l7-mag-v2 a { color:var(--mag-clay-deep); }
@media (max-width:680px){
.l7-mag-v2 .l7-heroband { grid-template-columns:repeat(2,1fr); }
.l7-mag-v2 .split { grid-template-columns:1fr; gap:22px; }
.l7-mag-v2 .split.flip .col-fig { order:0; }
}
/* Timeseries cell-cited variant (same styling, but inline-flex row) */
.cite-ts-row.cite-cell--cited {
background: rgba(184, 128, 90, 0.12);
border-radius: 4px;
}
.cite-ts-row.cite-cell--cited .cite-ts-value { font-weight: 700; color: #B8805A; }
.slot-status-partial { background: #fef3c7; color: #92400e; }
.slot-value {
font-weight: 600;
font-feature-settings: "tnum" 1;
color: var(--text-primary, #2a1f12);
}
.slot-conflict {
color: #991b1b;
font-weight: 500;
font-feature-settings: "tnum" 1;
}
.slot-freshness {
font-weight: 500;
font-size: 11.5px;
}
.slot-freshness-fresh { color: #166534; }
.slot-freshness-sla { color: #92400e; }
.slot-freshness-stale { color: #991b1b; }
.slot-gap {
font-style: italic;
color: var(--text-secondary, #5a4a3a);
line-height: 1.4;
}
/* ACTIONS */
.cite-card-actions {
flex: 0 0 auto;
padding: 8px 10px;
border-top: 1px solid rgba(26, 15, 5, 0.06);
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(26, 15, 5, 0.015);
}
.cite-card-actions-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cite-card-btn {
flex: 1 1 auto;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid rgba(26, 15, 5, 0.12);
background: rgba(255, 255, 255, 0.7);
color: var(--text-primary);
font-family: inherit;
font-size: 11.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background 0.12s ease, border-color 0.12s ease;
}
.cite-card-btn:hover:not([disabled]) {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(26, 15, 5, 0.2);
}
.cite-card-btn[disabled] {
color: var(--text-tertiary);
cursor: not-allowed;
opacity: 0.55;
background: rgba(26, 15, 5, 0.02);
}
/* References-row flash on "Show in references" click */
@keyframes cite-ref-flash {
0% { background-color: rgba(254, 243, 199, 0.95); }
100% { background-color: transparent; }
}
.cite-ref-flash {
animation: cite-ref-flash 1.5s ease-out;
}
/* Inline cite anchor — subtle hint that it's clickable for the popover */
a.cite {
cursor: pointer;
text-decoration: none;
color: inherit;
font-weight: 500;
border-bottom: 1px dotted currentColor;
padding: 0 1px;
border-radius: 2px;
transition: background 0.12s ease;
}
a.cite:hover {
background: rgba(7, 89, 133, 0.08);
}
/* Inside tables the values are bold, so a same-coloured [N] competes with the
numbers. Keep the citation chip (dotted box, size, position) but tint it a
shade lighter — the box uses currentColor, so a muted colour softens both
the [N] text and its outline, making it secondary to the value. */
table a.cite {
color: var(--text-tertiary, #9a948c);
font-weight: 400;
}
/* ── Slot-aware citation tooltip ───────────────────────────────────────
* When a [N] citation has been bound to a slot via the Stage-6 map,
* decorateCitationsWithSlotTooltips() sets data-slot-id + companion
* attributes and adds the .cite-with-slot class. Hover reveals a
* floating pill showing slot_id (mono) + value + source + description.
* Replaces the previous "user has to click the citation to see slot
* info" path with an at-a-glance hover affordance. */
a.cite-with-slot {
position: relative;
}
/* Reset the generic hover-bg so it doesn't fight the pill. */
a.cite-with-slot:hover {
background: rgba(178, 122, 62, 0.10);
}
a.cite-with-slot::after {
content: attr(data-slot-id);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
/* `--cite-pill-offset-x` is set by `_adjustCitePillPosition` (renderer.js)
* on mouseenter — shifts the pill horizontally to clamp it inside the
* viewport when the [N] sits near the left/right edge of the chat
* pane. Defaults to 0 so unmeasured anchors render exactly as before. */
transform: translate(calc(-50% + var(--cite-pill-offset-x, 0px)), 4px);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.4;
padding: 6px 11px;
background: #1F1B17;
color: #F5EFE6;
border-radius: 7px;
white-space: nowrap;
/* Safety net for slot_ids longer than the JS clamp expects: at most
* 90vw wide; wrap with break-all if it would still overflow. */
max-width: min(280px, calc(100vw - 24px));
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
z-index: 50;
box-shadow:
0 6px 18px rgba(26, 15, 5, 0.22),
0 2px 6px rgba(26, 15, 5, 0.10);
/* Subtle warm-gold accent stripe so the pill reads as part of the
* cream/gold reasoning palette, not a generic system tooltip. */
border: 1px solid rgba(178, 122, 62, 0.55);
}
/* Triangle pointer */
a.cite-with-slot::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1F1B17;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease;
z-index: 51;
}
a.cite-with-slot:hover::after,
a.cite-with-slot:focus::after {
opacity: 1;
transform: translate(calc(-50% + var(--cite-pill-offset-x, 0px)), 0);
}
a.cite-with-slot:hover::before,
a.cite-with-slot:focus::before {
opacity: 1;
}
/* Status-tinted left dot on the pill — green/amber/red micro-signal so
* the user knows at a glance whether the slot was clean, disputed, or
* a gap. Uses the same warm palette family as the rest of the card. */
a.cite-with-slot[data-slot-status]::after {
padding-left: 18px;
}
a.cite-with-slot[data-slot-status="filled"]::after {
box-shadow:
inset 5px 0 0 0 #2E8A82,
0 6px 18px rgba(26, 15, 5, 0.22),
0 2px 6px rgba(26, 15, 5, 0.10);
}
a.cite-with-slot[data-slot-status="partial"]::after {
box-shadow:
inset 5px 0 0 0 #B27A3E,
0 6px 18px rgba(26, 15, 5, 0.22),
0 2px 6px rgba(26, 15, 5, 0.10);
}
a.cite-with-slot[data-slot-status="disputed"]::after {
box-shadow:
inset 5px 0 0 0 #C75B39,
0 6px 18px rgba(26, 15, 5, 0.22),
0 2px 6px rgba(26, 15, 5, 0.10);
}
a.cite-with-slot[data-slot-status="failed"]::after {
box-shadow:
inset 5px 0 0 0 #8C7B6A,
0 6px 18px rgba(26, 15, 5, 0.22),
0 2px 6px rgba(26, 15, 5, 0.10);
}
/* Citation Excerpt In-Card */
.cite-card-expanded {
max-width: min(760px, calc(100vw - 24px));
width: min(760px, calc(100vw - 24px));
box-shadow:
0 16px 40px rgba(26, 15, 5, 0.18),
0 4px 10px rgba(26, 15, 5, 0.08);
}
.cite-card-excerpt-section {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
border-bottom: 0;
transform: translateY(-4px);
overflow: hidden;
pointer-events: none;
transition:
max-height 0.3s cubic-bezier(.2, .8, .2, 1),
opacity 0.2s ease,
padding 0.26s ease,
transform 0.26s ease;
}
.cite-card-excerpt-section.is-open {
/* Let the card body own scrolling; avoid nested scroll clipping near actions. */
max-height: 12000px;
opacity: 1;
padding-top: 10px;
padding-bottom: 12px;
transform: translateY(0);
pointer-events: auto;
overflow: visible;
background: rgba(26, 15, 5, 0.018);
}
.cite-excerpt-loading,
.cite-excerpt-error,
.cite-excerpt-empty {
padding: 12px;
text-align: center;
font-size: 12.5px;
color: var(--text-secondary);
border: 1px dashed rgba(26, 15, 5, 0.15);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
animation: cite-fade-in 0.2s ease-out;
}
.cite-excerpt-error {
color: #c0392b;
}
.cite-excerpt-item {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(26, 15, 5, 0.08);
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
animation: cite-item-in 0.24s ease-out both;
}
.cite-excerpt-item:last-child {
margin-bottom: 0;
}
.cite-excerpt-item-header {
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
word-break: break-all;
}
.cite-excerpt-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px;
padding: 4px 0;
font-size: 12px;
border-bottom: 1px solid rgba(26, 15, 5, 0.06);
}
.cite-excerpt-row:last-of-type {
border-bottom: none;
}
.cite-excerpt-row > span:first-child {
font-weight: 600;
color: var(--text-secondary);
}
.cite-excerpt-row > span:last-child {
color: var(--text-primary);
word-break: break-word;
}
.cite-excerpt-content {
margin-top: 8px;
padding: 10px;
background: white;
border: 1px solid rgba(26, 15, 5, 0.1);
border-radius: 6px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-primary);
white-space: pre-wrap;
word-break: break-word;
animation: cite-fade-in 0.22s ease-out;
}
@keyframes cite-fade-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cite-item-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.artifact-header {
display: flex;
align-items: center;
justify-content: space-between;
/* Tight top padding so the artifact title + tab strip sit closer to
* the top of the canvas viewport — eliminates the dead space the user
* was seeing above the "TCS Quarterly Revenue…" pill. Bottom retains
* the original 14px so the border-bottom has breathing room. */
padding: 6px 20px 10px 20px;
border-bottom: 1px solid var(--border-light);
gap: 16px;
flex-shrink: 0;
}
.artifact-title-wrap {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.artifact-type-badge {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 3px 8px;
border-radius: 4px;
background: var(--bg-cream);
border: 1px solid var(--border-light);
color: var(--accent-coral-dark);
font-family: 'Monaco', 'Menlo', monospace;
flex-shrink: 0;
}
/* Artifact-writer phase pill — disabled (Drafting/Polishing kept coming back). */
.artifact-phase-pill {
display: none !important;
}
.artifact-phase-pill .aph-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex-shrink: 0;
}
.artifact-phase-pill[data-phase="drafting"] {
color: #6b7d8f;
background: rgba(107, 125, 143, 0.08);
border-color: rgba(107, 125, 143, 0.18);
}
.artifact-phase-pill[data-phase="polishing"] {
color: var(--accent-coral-dark, #b66c4d);
background: rgba(192, 139, 92, 0.08);
border-color: rgba(192, 139, 92, 0.22);
}
.artifact-phase-pill[data-phase="drafting"] .aph-dot,
.artifact-phase-pill[data-phase="polishing"] .aph-dot {
animation: aphPulse 1.4s ease-in-out infinite;
}
/* Post-stream "finalizing" state was moved out of the inline pill
* and into the #finalizeIsland dynamic-island element — see the
* .finalize-island rule block below for the liquid-glass treatment.
* Inline-pill rules for "finalizing" intentionally absent here. */
.artifact-phase-pill[data-phase="final"] {
color: #2e7d4f;
background: rgba(46, 125, 79, 0.08);
border-color: rgba(46, 125, 79, 0.22);
}
.artifact-phase-pill[data-phase="final"] .aph-dot {
background: #2e7d4f;
}
@keyframes aphPulse {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.artifact-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.artifact-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
/* Subtle vertical divider between the tab pill and the action-button row
so the two groups read as distinct clusters even when compacted. */
.artifact-actions .artifact-tabs { margin-right: 8px; }
.artifact-actions .artifact-tabs + .artifact-action-btn::before,
.artifact-actions .artifact-tabs + .artifact-download-group::before {
content: ''; position: absolute; left: -5px; top: 6px; bottom: 6px;
width: 1px; background: rgba(26, 15, 5, 0.08);
}
.artifact-actions .artifact-tabs + .artifact-action-btn,
.artifact-actions .artifact-tabs + .artifact-download-group { position: relative; margin-left: 4px; }
/* Glassy tab strip with a fluid sliding indicator. The active "pill"
* is a single ::before on the container that slides between tabs via
* CSS variables (--tab-indicator-left / --tab-indicator-width) updated
* by switchArtifactTab(). The container itself is a frosted-glass
* surface — semi-transparent white over the canvas with a backdrop
* blur and a subtle inner highlight. */
.artifact-tabs {
position: relative;
display: flex;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 999px;
padding: 3px;
margin-right: 4px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 1px 2px rgba(26, 15, 5, 0.06),
0 4px 12px -4px rgba(26, 15, 5, 0.08);
--tab-indicator-left: 3px;
--tab-indicator-width: 0px;
}
.artifact-tabs::before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: var(--tab-indicator-left, 3px);
width: var(--tab-indicator-width, 0);
background: rgba(255, 255, 255, 0.95);
border-radius: 999px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 1px 3px rgba(26, 15, 5, 0.1),
0 2px 6px -1px rgba(26, 15, 5, 0.08);
transition:
left 0.42s cubic-bezier(0.32, 0.72, 0.18, 1),
width 0.42s cubic-bezier(0.32, 0.72, 0.18, 1);
z-index: 0;
pointer-events: none;
}
.artifact-tab {
position: relative;
z-index: 1;
padding: 5px 14px;
border: none;
background: transparent;
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
color: var(--text-tertiary);
cursor: pointer;
transition: color 0.28s cubic-bezier(0.32, 0.72, 0.18, 1);
}
.artifact-tab:hover { color: var(--text-primary); }
.artifact-tab.active { color: var(--text-primary); background: transparent; box-shadow: none; }
/* (.artifacts-floating-btn rule removed — the library opener now lives
* inline as the last .artifact-action-btn in the canvas action row,
* inheriting the standard action-button styling.) */
/* My Files pagination — sits below the grid in each library pane (uploads
* + artifacts). Numbered buttons with first/last + current ± 1 windowing,
* Prev / Next on the ends, and a "X–Y of Z" summary on the right. */
.artifacts-pager {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding: 18px 4px 8px;
margin-top: 6px;
border-top: 1px solid rgba(26, 15, 5, 0.06);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
}
.artifacts-pager-btn {
min-width: 30px;
height: 28px;
padding: 0 9px;
border: 1px solid rgba(26, 15, 5, 0.10);
background: transparent;
border-radius: 6px;
color: var(--text-secondary, #4a4d54);
font: inherit;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.artifacts-pager-btn:hover:not(:disabled) {
background: rgba(26, 15, 5, 0.05);
color: var(--text-primary, #111318);
border-color: rgba(26, 15, 5, 0.18);
}
.artifacts-pager-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.artifacts-pager-btn.active {
background: var(--text-primary, #111318);
color: #fff;
border-color: var(--text-primary, #111318);
}
.artifacts-pager-gap {
padding: 0 4px;
color: var(--text-tertiary, #8b8e96);
user-select: none;
}
.artifacts-pager-summary {
margin-left: auto;
color: var(--text-tertiary, #8b8e96);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.artifact-action-btn {
width: 28px; height: 28px;
border: none; border-radius: 8px;
background: transparent;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-tertiary, #8b8e96);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.artifact-action-btn:hover {
background: rgba(26, 15, 5, 0.06);
color: var(--text-primary, #111318);
}
.artifact-action-btn:active { transform: scale(0.94); }
.artifact-action-btn svg { width: 14px; height: 14px; }
/* Primary-action tint: Validate, Edit and Re-design get a soft coral
hover so they stand apart from passive utilities (copy / download /
expand / close) without being loud. */
.artifact-validate-btn:hover,
.artifact-edit-btn:hover,
.artifact-redesign-btn:hover {
background: rgba(192, 139, 92, 0.12);
color: var(--accent-coral-dark, #a87644);
}
.artifact-edit-btn.active,
.artifact-redesign-btn.active {
background: rgba(192, 139, 92, 0.14);
color: var(--accent-coral-dark, #a87644);
}
.artifact-validate-btn.validated {
color: var(--accent-coral, #c08b5c);
}
/* Insights button — wider pill with icon + text label */
.artifact-insights-btn {
width: auto !important;
padding: 0 12px;
gap: 5px;
font-family: inherit;
color: var(--text-secondary, #5c5f66);
}
.artifact-insights-btn:hover {
background: rgba(217, 119, 87, 0.10) !important;
color: #bf6240 !important;
}
.artifact-insights-btn svg { stroke: currentColor; }
/* ── Insight slash-command assistant bubble status spans ─────────────── */
.insight-bubble-status {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.875rem;
line-height: 1.5;
}
.insight-bubble-status--searching {
color: var(--text-secondary, #6b7280);
}
.insight-bubble-status--searching::after {
content: '';
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: currentColor;
margin-left: 4px;
animation: insight-dot-blink 1.1s ease-in-out infinite;
}
@keyframes insight-dot-blink {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.insight-bubble-status--done {
color: var(--text-primary, #111827);
}
.insight-bubble-status--done strong { color: inherit; }
.insight-bubble-status--error {
color: #dc2626;
}
/* Close sits at the trailing end; give it a slightly more destructive
hover cue so the target is obvious without being alarming. */
.artifact-actions > button:last-child:hover {
background: rgba(192, 57, 43, 0.08);
color: #c0392b;
}
/* ── Artifact download button + format menu ─────────────────────────────
* Single Download button (no caret). Click ALWAYS opens the format menu
* — there is no default extension; the user picks every time. The menu
* is anchored to the button via .artifact-download-group as the
* positioning context. */
.artifact-download-group {
position: relative;
display: inline-flex;
align-items: center;
}
.artifact-download-group .artifact-download-primary {
border-radius: 6px;
}
/* ── Primary download button loading state ────────────────────────────
* When a download is in-flight (native file fetch, server conversion),
* the arrow icon fades out and a coral-ring spinner fades in. Button is
* also `disabled` at the same time so double-clicks can't fire parallel
* downloads. */
.artifact-download-primary.loading {
cursor: wait;
position: relative;
}
.artifact-download-primary.loading svg {
opacity: 0;
transition: opacity 0.12s ease;
}
.artifact-download-primary.loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
border: 1.8px solid var(--border-light);
border-top-color: var(--accent-coral, #c08b5c);
border-radius: 50%;
animation: artifact-download-spin 0.7s linear infinite;
}
@keyframes artifact-download-spin {
to { transform: rotate(360deg); }
}
/* Pulse ring around the whole group while either primary or a menu row
* is downloading — makes the location of the feedback obvious even if
* the user has scrolled away. Uses box-shadow so it doesn't disrupt
* layout. */
.artifact-download-group:has(.artifact-download-primary.loading),
.artifact-download-group:has(.artifact-download-menu-item[aria-disabled="true"]) {
position: relative;
}
.artifact-download-group:has(.artifact-download-primary.loading)::after,
.artifact-download-group:has(.artifact-download-menu-item[aria-disabled="true"])::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 8px;
border: 1.5px solid var(--accent-coral, #c08b5c);
opacity: 0;
animation: artifact-download-halo 1.4s ease-out infinite;
pointer-events: none;
}
@keyframes artifact-download-halo {
0% { opacity: 0.6; transform: scale(0.98); }
100% { opacity: 0; transform: scale(1.12); }
}
/* Dropdown menu — anchored below the group, right-aligned so it doesn't
* spill off the canvas edge. Opens downward (unlike the composer dropdowns
* which open upward). Hidden by default; .open class reveals it. */
.artifact-download-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.14s ease, visibility 0.14s, transform 0.14s ease;
z-index: 1000;
}
.artifact-download-group.open .artifact-download-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.artifact-download-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 13.5px;
color: var(--text-primary);
border: none;
background: transparent;
width: 100%;
text-align: left;
transition: background 0.12s;
}
.artifact-download-menu-item:hover,
.artifact-download-menu-item:focus-visible {
background: var(--bg-cream);
outline: none;
}
.artifact-download-menu-item[aria-disabled="true"] {
opacity: 0.55;
cursor: wait;
}
.artifact-download-menu-label {
font-weight: 500;
}
.artifact-download-menu-ext {
font-family: 'Monaco', 'Menlo', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 2px 7px;
background: var(--bg-cream);
border-radius: 4px;
}
.artifact-download-menu-item:first-child .artifact-download-menu-ext {
color: var(--accent-coral);
background: rgba(192, 139, 92, 0.10);
}
/* Inline spinner shown on a row while a server conversion is in flight */
.artifact-download-menu-spinner {
width: 12px;
height: 12px;
border: 1.5px solid var(--border-light);
border-top-color: var(--accent-coral);
border-radius: 50%;
animation: art-dl-spin 0.7s linear infinite;
display: none;
}
.artifact-download-menu-item[aria-disabled="true"] .artifact-download-menu-spinner {
display: inline-block;
}
.artifact-download-menu-item[aria-disabled="true"] .artifact-download-menu-ext {
display: none;
}
@keyframes art-dl-spin {
to { transform: rotate(360deg); }
}
.artifact-body {
flex: 1;
min-height: 0; /* allow shrink so iframe fills viewport; sheet tabs stay visible */
position: relative;
overflow: hidden;
background: var(--bg-white);
}
.artifact-pane {
display: none;
position: absolute;
inset: 0;
overflow: auto;
}
.artifact-pane.active {
display: block;
}
:is(.artifact-preview-pane, .artifact-validated-pane) {
background: var(--bg-white);
}
/* HTML iframe fills the preview pane */
:is(.artifact-preview-pane, .artifact-validated-pane) iframe {
width: 100%;
height: 100%;
border: none;
background: white;
}
/* Enterprise-grade markdown artifact rendering. Mirrors the docx
styling rules so the canvas preview and the downloaded .docx look
like the same document. Navy → blue → teal heading hierarchy on a
warm cream wash, coral accent rule under the cover h1, navy-header
tables with alternating cream rows, coral pull-quote callouts. */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown {
padding: 44px 64px 60px;
/* Wider editorial measure so the magazine layout (floated figures +
wrapping prose) has room to breathe. At 760px a 48% figure left only
a cramped ~360px prose column; ~1000px gives a clean 1/3-figure :
2/3-prose split. Content still centres in a wider canvas pane. */
max-width: 1000px;
margin: 0 auto;
font-family: 'Source Serif 4', 'Charter', 'Iowan Old Style', Georgia, serif;
font-size: 17px;
line-height: 1.7;
color: #1a202c;
background: #fdfaf6;
border-radius: 8px;
overflow: hidden; /* prevent wide children from escaping the pane */
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown > *:first-child { margin-top: 0; }
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown > *:last-child { margin-bottom: 0; }
/* First h1 acts as the cover headline — coral rule below; subsequent
h1s are smaller and don't get the rule. */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown > h1:first-child {
font-family: 'Georgia', 'Source Serif 4', serif;
font-size: 30px;
font-weight: 700;
color: #1a365d;
margin: 0 0 10px 0;
padding-bottom: 12px;
border-bottom: 3px solid #c08b5c;
line-height: 1.2;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h1 {
font-family: 'Georgia', 'Source Serif 4', serif;
font-size: 24px;
font-weight: 700;
color: #1a365d;
margin: 32px 0 12px 0;
line-height: 1.25;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h2 {
font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
color: #2c5282;
margin: 28px 0 8px 0;
padding-bottom: 5px;
border-bottom: 1px solid #e2e8f0;
line-height: 1.3;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h3 {
font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
color: #2c7a7b;
margin: 22px 0 6px 0;
letter-spacing: 0.2px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h4,
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h5,
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown h6 {
font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
font-weight: 600;
color: #4a5568;
margin: 18px 0 4px 0;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown p {
margin: 0 0 14px 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown strong { font-weight: 700; color: #1a365d; }
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown em { font-style: italic; }
/* Lists — restrained spacing, inherit body serif from .artifact-markdown */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown ul,
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown ol {
padding-left: 24px;
margin: 8px 0 14px 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown li {
margin: 4px 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown li > p { margin: 0; }
/* Code — inline cream chip, blocks with navy accent rule */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown code {
font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Monaco', 'Menlo', monospace;
font-size: 13.5px;
background: rgba(45, 55, 72, 0.06);
padding: 1px 5px;
border-radius: 3px;
color: #2c5282;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown pre {
background: #f7fafc;
border: 1px solid #e2e8f0;
border-left: 3px solid #2c5282;
padding: 12px 16px;
border-radius: 4px;
overflow-x: auto;
font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Monaco', 'Menlo', monospace;
font-size: 13px;
line-height: 1.55;
color: #1a202c;
margin: 14px 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown pre code {
background: transparent;
padding: 0;
color: inherit;
font-size: inherit;
}
/* Blockquotes — coral rule + warm-cream wash for callouts */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown blockquote {
margin: 16px 0;
padding: 10px 16px 10px 18px;
border-left: 3px solid #c08b5c;
background: rgba(192, 139, 92, 0.08);
font-style: italic;
color: #4a5568;
border-radius: 0 4px 4px 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown blockquote p:last-child { margin-bottom: 0; }
/* Links — restrained underline that brightens on hover */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown a {
color: #2c5282;
text-decoration: underline;
text-decoration-color: rgba(44, 82, 130, 0.4);
text-underline-offset: 2px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown a:hover {
text-decoration-color: #2c5282;
}
/* Scroll wrapper for wide tables in the preview / validated panes.
* The markdown renderer wraps every
in
* so the table can scroll horizontally without overflowing the panel. */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown .table-scroll-wrap {
overflow-x: auto;
margin: 18px 0 24px 0;
-webkit-overflow-scrolling: touch;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown .table-scroll-wrap table {
margin: 0; /* margin lives on the wrapper, not the table */
}
/* Tables — Anthropic-style: warm tones, clean horizontal dividers,
* no heavy dark header, generous padding, full container width.
*
* Mirrors the Claude.ai data-table aesthetic: light warm header,
* horizontal-only dividers, sentence-case text, tabular numbers,
* rounded container with near-invisible border.
*
* Layout: `display: table` + `width: 100%` + `table-layout: auto`
* so columns size based on content distribution. */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown table {
display: table;
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
margin: 18px 0 24px 0;
font-family: inherit;
font-size: 14px;
border: 1px solid #e8e2db;
border-radius: 12px;
overflow: hidden;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown thead th {
background: #f3eeea;
color: #3d3833;
font-weight: 600;
padding: 12px 18px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #e0d9d1;
font-family: inherit;
font-size: 13px;
letter-spacing: 0;
white-space: nowrap;
overflow-wrap: normal;
}
/* No vertical borders between header cells — clean horizontal look */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown tbody td {
padding: 11px 18px;
border-bottom: 1px solid #eee9e4;
vertical-align: top;
color: #2d2824;
white-space: normal;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown tbody tr:last-child > td {
border-bottom: none;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown tbody tr:nth-child(even) td {
background: rgba(243, 238, 234, 0.4);
}
/* First-column label cells — slightly bolder for scannability */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown tbody td:first-child {
font-weight: 500;
color: #1a1a1a;
}
/* Hairline rule — used between sections */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-markdown hr {
border: none;
border-top: 1px solid #e0d9d1;
margin: 24px 0;
}
/* SVG artifact — centered */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-svg-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 32px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-svg-wrap svg {
max-width: 100%;
max-height: 80vh;
height: auto;
}
/* CSV/JSON table renderer */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table-wrap {
padding: 24px 32px;
overflow-x: auto;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
border: 1px solid #e8e2db;
border-radius: 12px;
overflow: hidden;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table th,
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table td {
border-bottom: 1px solid #eee9e4;
padding: 10px 14px;
text-align: left;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table tbody tr:last-child > td {
border-bottom: none;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table thead th {
background: #f3eeea;
color: #3d3833;
font-weight: 600;
position: sticky;
top: 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table tbody tr:nth-child(even) {
background: rgba(243, 238, 234, 0.35);
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-table tbody td:first-child {
font-weight: 500;
color: #1a1a1a;
}
/* Code pane */
.artifact-code-pane {
background: var(--bg-white);
}
.artifact-code-pane pre {
margin: 0;
padding: 24px 28px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-white);
white-space: pre;
overflow-x: auto;
min-height: 100%;
}
/* Clickable filename mention in assistant prose. Acts as a fallback when
the canvas didn't auto-open for a generated document — clicking opens it. */
.filename-link {
color: var(--accent-coral);
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
border-radius: 3px;
padding: 0 2px;
transition: background 0.15s, color 0.15s;
}
.filename-link:hover,
.filename-link:focus {
background: rgba(196, 145, 123, 0.10);
text-decoration-style: solid;
outline: none;
}
/* "Open in canvas" button in the chat stream for completed artifacts */
.inline-artifact-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
margin: 12px 0;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.inline-artifact-card:hover {
border-color: var(--accent-coral);
box-shadow: 0 2px 10px rgba(196, 145, 123, 0.12);
}
.inline-artifact-card .artifact-card-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-cream);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-coral);
flex-shrink: 0;
}
.inline-artifact-card .artifact-card-icon svg {
width: 18px;
height: 18px;
}
.inline-artifact-card .artifact-card-info {
flex: 1;
min-width: 0;
}
.inline-artifact-card .artifact-card-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-artifact-card .artifact-card-type {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: 'Monaco', 'Menlo', monospace;
}
.inline-artifact-card .artifact-card-arrow {
color: var(--text-secondary);
flex-shrink: 0;
}
.inline-artifact-card .artifact-card-arrow svg {
width: 18px;
height: 18px;
}
/* ── Artifact streaming / skeleton loading ── */
.inline-artifact-card.artifact-streaming {
border-color: rgba(192, 139, 92, 0.3);
background: linear-gradient(135deg, rgba(192, 139, 92, 0.03), var(--bg-white));
position: relative;
overflow: hidden;
}
.inline-artifact-card.artifact-streaming::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-coral), transparent);
animation: tool-sweep 1.8s ease-in-out infinite;
}
.inline-artifact-card.artifact-streaming .artifact-card-type {
color: var(--accent-coral);
animation: thinking-text-breathe 2s ease-in-out infinite;
}
@keyframes thinking-text-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* (Artifact thought card removed per user feedback — "that card is
also not needed". The thought-card-pulse keyframe below is kept
because it's still referenced by .subagent-card-shimmer (P5) and
.planner-strip-shimmer (P3); same animation, different consumers.) */
@keyframes thought-card-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* (Slow-tool elapsed-time hint removed per user feedback — "timer on
the cards is not required". Defensive cleanup in chat-render.js
strips any leftover .tool-elapsed nodes from cached DOM.) */
/* ── Sub-agent thought card — redesigned ────────────────────────────
* Quiet, contained branch under the parent Task tool. Shares the new
* ink palette and tokens. Slate accent (#7A6F62) so it reads as a
* neutral "branch" rather than competing with the planning/retrieval/
* registry phase colors. No gradient header, no uppercase tracking.
*
* Indented 24px under the parent Task card with a left-rail thread
* connecting them visually.
*/
.subagent-card {
--sa-accent: #7A6F62;
--sa-accent-soft: rgba(122, 111, 98, 0.10);
--sa-accent-tint: rgba(122, 111, 98, 0.05);
margin: 6px 0 14px 24px;
font-variant-numeric: tabular-nums;
position: relative;
/* Thread: a thin vertical line that links the sub-agent card up to
* its parent Task tool card visually. Sits in the left margin. */
}
.subagent-card::before {
content: '';
position: absolute;
left: -14px;
top: -6px;
bottom: 50%;
width: 2px;
background: var(--sa-accent-soft);
border-radius: 1px;
}
.subagent-card::after {
content: '';
position: absolute;
left: -14px;
top: 50%;
width: 12px;
height: 2px;
background: var(--sa-accent-soft);
border-radius: 1px;
}
.subagent-card__inner {
background: #FFFFFF;
border-radius: 10px;
border: 1px solid var(--rt-divider, #F2ECE3);
overflow: hidden;
}
.subagent-card__header {
/* Mirror the phase status row exactly: dot + name, no tinted band,
* no border-bottom. The phase body's left rail provides the visual
* boundary. Same padding/gap/typography as .rtcard__phase-status. */
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 10px 18px;
background: transparent;
border-bottom: 0;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
text-transform: none;
color: var(--rt-ink-primary, #1F1B17);
min-height: 22px;
}
.subagent-card-shimmer {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sa-accent);
box-shadow:
0 0 0 2px #FFFFFF,
0 0 0 3px var(--sa-accent);
animation: rtcard-phase-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.subagent-card-status {
/* The "Sub-agent · running fetch_slot…" status text. Secondary ink for
* the running indicator; primary for the agent name. Mono is reserved
* for the embedded tool name only (when emitted via a child span). */
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--rt-ink-secondary, #5C5048);
}
.subagent-card-status::first-letter {
/* First word "Sub-agent" stays primary ink, rest (the · status text)
* inherits the secondary tone above. */
color: var(--rt-ink-primary, #1F1B17);
}
.subagent-card-tail {
/* Body: matches .rtcard__phase-body — Plus Jakarta Sans 13px with
* 1.65 line-height. The 17px left padding + 2px accent-soft border
* exactly mirrors the phase body so the visual rhythm is identical. */
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px;
line-height: 1.65;
letter-spacing: -0.005em;
color: var(--rt-ink-primary, #1F1B17);
font-variant-numeric: tabular-nums;
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 14em;
overflow-y: auto;
margin: 6px 18px 16px 24px;
padding: 4px 0 0 17px;
border-left: 2px solid var(--sa-accent-soft);
background: transparent;
}
.subagent-card-tail::-webkit-scrollbar { width: 4px; }
.subagent-card-tail::-webkit-scrollbar-track { background: transparent; }
.subagent-card-tail::-webkit-scrollbar-thumb {
background: var(--sa-accent-soft);
border-radius: 2px;
}
/* ── L9 hybrid fan-out: per-source progressive-disclosure cards ──────────
Each MCP source is anonymous while consulting, reveals its name +
contribution once it returns data, and dissolves if it comes back empty. */
/* God-mode "Live findings" card — per-wave cited digests streamed while Nexus runs.
Shares the trace-card visual language: white surface, hairline border, teal live dot
(pulsing while gathering, muted once settled), collapsible body. */
.interim-findings-card {
--if-accent: #0E7C7B; /* teal */
margin: 6px 0 12px 0;
font-variant-numeric: tabular-nums;
}
.interim-findings-card__inner {
background: #FFFFFF;
border-radius: 12px;
border: 1px solid var(--rt-divider, #F2ECE3);
overflow: hidden;
}
.interim-findings-card__header {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 11px 14px;
background: #FCFAF6;
border: 0;
border-bottom: 1px solid var(--rt-divider-hairline, #EAE2D6);
cursor: pointer;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--rt-ink-primary, #1F1B17);
text-align: left;
}
.interim-findings-card__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--if-accent);
flex-shrink: 0;
}
.interim-findings-card--streaming .interim-findings-card__dot {
animation: rtcard-phase-pulse 1.4s ease-in-out infinite;
}
.interim-findings-card--settled .interim-findings-card__dot {
background: var(--rt-ink-tertiary, #9B9183);
}
.interim-findings-card__title { flex: 1 1 auto; }
.interim-findings-card__chev {
flex-shrink: 0;
display: inline-flex;
color: var(--rt-ink-tertiary, #9B9183);
transition: transform 0.18s ease;
}
.interim-findings-card__header[aria-expanded="false"] .interim-findings-card__chev {
transform: rotate(-90deg);
}
.interim-findings-card__body {
max-height: 320px;
overflow-y: auto;
padding: 8px 14px 6px 14px;
font-size: 13.5px;
line-height: 1.5;
color: var(--rt-ink-secondary, #4A443C);
}
.interim-findings-card__body--collapsed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.interim-findings-wave + .interim-findings-wave {
margin-top: 7px;
padding-top: 7px;
border-top: 1px dashed var(--rt-divider-hairline, #EAE2D6);
}
.interim-findings-wave :is(p, ul, ol) { margin: 4px 0; }
.interim-findings-wave ul, .interim-findings-wave ol { padding-left: 18px; }
.hybrid-fanout-card {
--hf-accent: #0E7C7B; /* teal */
--hf-muted: #9B9183; /* warm gray */
margin: 6px 0 14px 0;
font-variant-numeric: tabular-nums;
}
.hybrid-fanout-card__inner {
background: #FFFFFF;
border-radius: 12px;
border: 1px solid var(--rt-divider, #F2ECE3);
padding: 12px 14px 14px 14px;
}
.hybrid-fanout-card__header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--rt-ink-primary, #1F1B17);
}
.hybrid-fanout-card__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--hf-accent);
animation: rtcard-phase-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.hf-sources { display: flex; flex-direction: column; gap: 7px; }
.hf-src {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 11px;
border-radius: 10px;
border: 1px solid var(--rt-divider-hairline, #EAE2D6);
background: #FCFAF6;
overflow: hidden;
max-height: 64px;
transition: opacity .42s ease, max-height .42s ease,
padding .42s ease, margin .42s ease, border-width .42s ease;
}
.hf-src--consulting { background: #FBF8F3; }
.hf-src__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--hf-muted);
animation: rtcard-phase-pulse 1.1s ease-in-out infinite;
flex-shrink: 0;
}
.hf-src__anon {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12.5px; letter-spacing: -0.005em;
color: var(--rt-ink-muted, #8C7B6A);
}
.hf-src--revealed { animation: hf-reveal .42s ease both; }
.hf-src__ico {
width: 30px; height: 30px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px; font-weight: 700;
flex-shrink: 0;
background: rgba(14, 124, 123, 0.10);
color: var(--hf-accent);
}
.hf-src__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.hf-src__name {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
color: var(--rt-ink-primary, #1F1B17);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-src__sub {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 11.5px; letter-spacing: -0.005em;
color: var(--rt-ink-secondary, #5C5048);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-src__check { font-size: 13px; color: var(--hf-accent); flex-shrink: 0; }
.hf-src--gone {
opacity: 0; max-height: 0;
padding-top: 0; padding-bottom: 0;
margin-top: 0; margin-bottom: 0;
border-width: 0;
}
.hf-src--teal .hf-src__ico { background: rgba(14, 124, 123, 0.10); color: #0E7C7B; }
.hf-src--teal .hf-src__check { color: #0E7C7B; }
.hf-src--blue .hf-src__ico { background: rgba(45, 108, 162, 0.10); color: #2D6CA2; }
.hf-src--blue .hf-src__check { color: #2D6CA2; }
.hf-src--amber .hf-src__ico { background: rgba(181, 128, 58, 0.12); color: #9A6B2E; }
.hf-src--amber .hf-src__check { color: #9A6B2E; }
.hf-src--gray .hf-src__ico { background: rgba(140, 123, 106, 0.12); color: #7A6B5A; }
.hf-src--gray .hf-src__check { color: #7A6B5A; }
.hf-src--purple .hf-src__ico { background: rgba(107, 91, 149, 0.12); color: #6B5B95; }
.hf-src--purple .hf-src__check { color: #6B5B95; }
.hf-src--coral .hf-src__ico { background: rgba(197, 106, 74, 0.12); color: #B5563C; }
.hf-src--coral .hf-src__check { color: #B5563C; }
/* ── god-mode per-MCP trace cards (each MCP = a card; tool calls = persistent pills) ── */
/* god-mode "Consulting sources" — per-source audit cards. Premium, calm,
business-friendly: tone-coloured source chips, a hairline step timeline,
plain-language steps, and quiet check/pulse status (never raw tool output). */
.mcp-card {
border: 0.5px solid rgba(31, 27, 23, 0.07); border-radius: 12px;
background: #FCFAF6; padding: 11px 13px 10px; margin-bottom: 9px;
transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mcp-card--done {
background: #FFFFFF; border-color: rgba(31, 27, 23, 0.06);
box-shadow: 0 1px 3px rgba(31, 27, 23, 0.045);
}
.mcp-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mcp-card__ico {
position: relative; overflow: hidden;
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 8.5px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase;
background: rgba(14, 124, 123, 0.12); color: #0E7C7B;
}
.mcp-card__name {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 13px; font-weight: 650; letter-spacing: -0.006em;
color: var(--rt-ink-primary, #1F1B17);
}
.mcp-card__state { margin-left: auto; flex-shrink: 0; width: 8px; height: 8px; }
.mcp-card:not(.mcp-card--done) .mcp-card__state {
border-radius: 50%; background: var(--hf-accent, #0E7C7B);
animation: rtcard-phase-pulse 1.2s ease-in-out infinite;
}
/* per-source tone — the avatar-chip + live-dot colour */
.mcp-card--tone-teal .mcp-card__ico { background: rgba(14, 124, 123, 0.12); color: #0E7C7B; }
.mcp-card--tone-blue .mcp-card__ico { background: rgba(43, 108, 176, 0.12); color: #2B6CB0; }
.mcp-card--tone-purple .mcp-card__ico { background: rgba(107, 70, 193, 0.13); color: #6B46C1; }
.mcp-card--tone-amber .mcp-card__ico { background: rgba(180, 120, 30, 0.14); color: #9C6516; }
.mcp-card--tone-coral .mcp-card__ico { background: rgba(192, 139, 92, 0.16); color: var(--accent-coral-dark, #a87644); }
.mcp-card--tone-gray .mcp-card__ico { background: rgba(92, 80, 72, 0.10); color: #5C5048; }
.mcp-card--tone-blue:not(.mcp-card--done) .mcp-card__state { background: #2B6CB0; }
.mcp-card--tone-purple:not(.mcp-card--done) .mcp-card__state { background: #6B46C1; }
.mcp-card--tone-amber:not(.mcp-card--done) .mcp-card__state { background: #9C6516; }
.mcp-card--tone-coral:not(.mcp-card--done) .mcp-card__state { background: var(--accent-coral-dark, #a87644); }
.mcp-card--tone-gray:not(.mcp-card--done) .mcp-card__state { background: #5C5048; }
/* brand-logo variant — a widened white tile that fits horizontal lockups (RBI /
MoSPI / PIB / web-search). `.mcp-card` prefix beats the per-tone chip tint so the
logo reads on white. The source PNGs are whitespace-trimmed to their content bbox,
so the artwork fills the tile and stays legible at this compact height; caps widened
so a ~3:1 lockup (MoSPI) is height-, not width-, bound. */
.mcp-card .mcp-card__ico--logo { display: flex; align-items: center; width: auto; min-width: 56px; max-width: 300px; height: 64px; padding: 5px 12px; background: #fff; border-radius: 10px; }
.mcp-card__logo { height: 54px; width: auto; max-width: 272px; object-fit: contain; display: block; }
.mcp-card__tools { position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 40px; }
/* the hairline timeline the step-nodes sit on */
.mcp-card__tools::before {
content: ''; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 1.5px;
background: linear-gradient(rgba(31, 27, 23, 0.11), rgba(31, 27, 23, 0.04));
}
.mcp-tool {
position: relative; display: flex; align-items: center; gap: 8px; min-height: 23px;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12.5px; color: var(--rt-ink-secondary, #5C5048);
}
/* the step node on the timeline */
.mcp-tool::before {
content: ''; position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
width: 7px; height: 7px; border-radius: 50%; background: #fff; z-index: 1;
box-shadow: 0 0 0 1.5px rgba(31, 27, 23, 0.18);
}
.mcp-tool--running::before {
background: var(--hf-accent, #0E7C7B); box-shadow: 0 0 0 1.5px rgba(14, 124, 123, 0.35);
animation: rtcard-phase-pulse 1.1s ease-in-out infinite;
}
.mcp-tool--done::before { background: #1FA463; box-shadow: 0 0 0 1.5px rgba(31, 164, 99, 0.22); }
.mcp-tool__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-tool--done .mcp-tool__label { color: var(--rt-ink-primary, #2C261F); }
.mcp-tool__status { flex-shrink: 0; width: 14px; text-align: center; font-size: 10.5px; font-weight: 800; color: #1FA463; }
.mcp-reason {
display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-left: 2px;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12px; color: var(--rt-ink-muted, #8C7B6A);
}
.mcp-reason__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--hf-muted, #B4B2A9); animation: rtcard-phase-pulse 1.1s ease-in-out infinite; }
.mcp-reason__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
/* ── Verbatim append-only log rows (god-mode Nexus progress trace) ──
One row per message, rendered verbatim, sitting on the same hairline timeline
as .mcp-tool. Unlike pills, these WRAP (URLs / queries / result snippets). */
.mcp-line {
position: relative; display: flex; align-items: flex-start; min-height: 22px; padding: 2px 0;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12.5px; line-height: 1.45; color: var(--rt-ink-secondary, #5C5048);
}
.mcp-line::before {
content: ''; position: absolute; left: -26px; top: 9px; width: 6px; height: 6px;
border-radius: 50%; background: #fff; z-index: 1; box-shadow: 0 0 0 1.5px rgba(31, 27, 23, 0.16);
}
.mcp-line__text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.mcp-line--result::before { background: #1FA463; box-shadow: 0 0 0 1.5px rgba(31, 164, 99, 0.22); }
.mcp-line--result .mcp-line__text { color: var(--rt-ink-primary, #2C261F); }
.mcp-line--error::before { background: #C0492B; box-shadow: 0 0 0 1.5px rgba(192, 73, 43, 0.25); }
.mcp-line--error .mcp-line__text { color: #9C3318; }
.mcp-line--settled::before { background: #1FA463; box-shadow: 0 0 0 1.5px rgba(31, 164, 99, 0.18); }
/* full-width narration log (the model's own reasoning + system steps) */
.mcp-narration-log { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding-left: 2px; }
.mcp-narration-log .mcp-line { padding-left: 0; }
.mcp-narration-log .mcp-line::before { display: none; }
.mcp-narration-log .mcp-line__text { font-style: italic; color: var(--rt-ink-muted, #8C7B6A); }
/* single rolling pulse at the very bottom while the turn runs */
.mcp-pulse {
display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-left: 2px;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-size: 12px; color: var(--rt-ink-muted, #8C7B6A);
}
.mcp-pulse__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--hf-accent, #0E7C7B); animation: rtcard-phase-pulse 1.1s ease-in-out infinite; }
.mcp-pulse__text { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
.mcp-reason__dot, .mcp-card__state, .mcp-tool--running::before, .mcp-pulse__dot { animation: none !important; opacity: 0.75; }
}
@keyframes hf-reveal {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hybrid-fanout-card__dot, .hf-src__dot { animation: none; opacity: 0.7; }
.hf-src--revealed { animation: none; }
}
.subagent-card-tail::-webkit-scrollbar-thumb:hover {
background: var(--sa-accent);
}
@media (prefers-reduced-motion: reduce) {
.subagent-card-shimmer { animation: none; opacity: 0.7; }
}
/* ── P3: planner status strip ──
Single-line strip at the top of the assistant message during the
8-15s pre-stream wait. Two phases: "running" (shimmer + "Planning…")
and "done" (level + sub-agent count, briefly visible before tool
calls land and replace it). */
.planner-strip {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 12px;
margin: 0 0 10px 0;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 11px;
letter-spacing: 0.3px;
color: var(--text-secondary, #777);
background: rgba(192, 139, 92, 0.06);
border: 1px solid rgba(192, 139, 92, 0.18);
border-radius: 8px;
}
.planner-strip[data-phase="done"] {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
.planner-strip-row {
display: flex;
align-items: center;
gap: 8px;
}
.planner-strip-shimmer {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-coral, #c0883c);
animation: thought-card-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.planner-strip[data-phase="done"] .planner-strip-shimmer {
background: var(--text-secondary, #777);
animation: none;
opacity: 0.5;
}
/* Stage-1 planner's classification.reasoning, shown on the done-state
strip's second line. Indent to align with the headline text (past the
8px shimmer + 8px gap). Slightly subdued colour and tighter line height
so the strip stays compact even with 1-2 sentences of reasoning. */
.planner-strip-reasoning {
margin-left: 16px;
font-family: var(--font-stack, system-ui, sans-serif);
font-size: 12px;
line-height: 1.4;
color: var(--text-tertiary, #999);
letter-spacing: normal;
font-style: italic;
}
.planner-strip-reasoning[hidden] { display: none; }
/* Live thinking surface — populated by `planner_thought_delta` events
while the strip is in running phase. The model's reasoning streams
into here so the user sees what's happening during the planner's
pre-stream wait (now budgeted at 60s). Capped height with internal
scroll so a long thinking trace doesn't push the rest of the chat
off-screen; we auto-scroll to bottom on each delta to keep the
latest token visible. Cleared once the plan event arrives — the
.planner-strip-reasoning element below takes over with the
final-conclusion summary. */
.planner-strip-thoughts {
margin-left: 16px;
margin-top: 4px;
padding: 6px 8px;
font-family: var(--font-stack, system-ui, sans-serif);
font-size: 11.5px;
line-height: 1.45;
color: var(--text-tertiary, #999);
background: rgba(0, 0, 0, 0.025);
border-left: 2px solid rgba(192, 139, 92, 0.35);
border-radius: 4px;
max-height: 220px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
letter-spacing: normal;
}
.planner-strip-thoughts[hidden] { display: none; }
.planner-strip[data-phase="done"] .planner-strip-thoughts {
/* Once done, prefer the conclusion (.planner-strip-reasoning) over the
full thinking trace; CSS hides the live thoughts even if the model
still has them populated. */
display: none;
}
@media (prefers-reduced-motion: reduce) {
.planner-strip-shimmer { animation: none; opacity: 0.7; }
}
/* (P2 .thinking-tail-preview removed per user feedback — gold pill
stays as it was. The pill now auto-expands while streaming so the
live reasoning is visible directly in the body, with auto-scroll.) */
/* Canvas streaming state */
.artifact-canvas.artifact-streaming .artifact-type-badge {
color: var(--accent-coral);
animation: thinking-text-breathe 2s ease-in-out infinite;
}
/* Skeleton loading in canvas preview pane */
.artifact-skeleton {
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}
.artifact-skeleton .skeleton-header {
display: flex;
flex-direction: column;
gap: 10px;
}
.artifact-skeleton .skeleton-body {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.skeleton-line {
height: 14px;
border-radius: 6px;
background: linear-gradient(110deg, var(--bg-cream) 30%, rgba(192, 139, 92, 0.08) 50%, var(--bg-cream) 70%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-title { width: 50%; height: 22px; }
.skeleton-subtitle { width: 30%; height: 14px; }
.skeleton-full { width: 100%; }
.skeleton-medium { width: 75%; }
.skeleton-short { width: 45%; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-status {
font-family: 'EB Garamond', Georgia, serif;
font-style: italic;
font-size: 14px;
color: var(--text-tertiary);
text-align: center;
padding-top: 8px;
animation: thinking-text-breathe 2s ease-in-out infinite;
}
/* Insights generation loader — pulsating DeepInsights mark + flowing lines */
.insights-gen-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 280px;
padding: 40px 32px;
gap: 28px;
}
.insights-gen-loader__stage {
position: relative;
width: 72px;
height: 72px;
display: grid;
place-items: center;
}
.insights-gen-loader__logo {
width: 68px;
height: 68px;
border-radius: 50%;
background-color: #fff;
background-image: url('assets/logo_deepinsights.png');
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
box-shadow:
0 6px 24px rgba(42, 56, 153, 0.14),
inset 0 0 0 1px rgba(255, 255, 255, 0.55);
animation: insights-gen-pulse 2.4s ease-in-out infinite;
}
.insights-gen-loader__lines {
display: flex;
flex-direction: column;
gap: 11px;
width: min(340px, 90%);
}
.insights-gen-loader__line {
display: block;
height: 9px;
border-radius: 7px;
background: linear-gradient(
90deg,
rgba(42, 56, 153, 0.05) 0%,
rgba(90, 158, 219, 0.16) 40%,
rgba(29, 154, 148, 0.12) 72%,
rgba(42, 56, 153, 0.04) 100%
);
transform-origin: left center;
opacity: 0;
animation: insights-gen-line 2.4s ease-in-out infinite;
}
.insights-gen-loader__line--1 { width: 68%; animation-delay: 0s; }
.insights-gen-loader__line--2 { width: 94%; animation-delay: 0.4s; }
.insights-gen-loader__line--3 { width: 52%; animation-delay: 0.8s; }
.insights-gen-loader__line--4 { width: 78%; animation-delay: 1.2s; }
.insights-gen-loader__status {
margin: 0;
font-family: 'EB Garamond', Georgia, serif;
font-style: italic;
font-size: 15px;
color: var(--text-tertiary);
letter-spacing: 0.01em;
animation: thinking-text-breathe 2.6s ease-in-out infinite;
}
@keyframes insights-gen-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.9; }
}
@keyframes insights-gen-line {
0% { opacity: 0; transform: scaleX(0.25); }
22% { opacity: 1; transform: scaleX(1); }
68% { opacity: 0.88; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(0.96); }
}
@media (prefers-reduced-motion: reduce) {
.insights-gen-loader__logo,
.insights-gen-loader__line,
.insights-gen-loader__status {
animation: none;
}
.insights-gen-loader__line {
opacity: 0.55;
transform: none;
}
}
/* Legacy insights loading bar (kept for backward compat if cached HTML references it) */
.insights-loading-bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 18px;
padding: 32px;
}
.insights-loading-bar__shimmer {
width: 220px;
height: 4px;
border-radius: 2px;
background: linear-gradient(
90deg,
var(--bg-cream) 0%,
var(--accent-gold, #c08b5c) 40%,
var(--bg-cream) 80%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.insights-loading-bar__text {
font-family: 'EB Garamond', Georgia, serif;
font-style: italic;
font-size: 15px;
color: var(--text-tertiary);
animation: thinking-text-breathe 2s ease-in-out infinite;
}
@media (max-width: 1100px) {
.artifact-canvas {
width: 480px;
}
}
@media (max-width: 900px) {
.artifact-canvas {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100vw;
max-width: 100vw;
z-index: 50;
}
}
/* ==================== ASK USER QUESTION CARD ==================== */
.ask-user-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 14px;
padding: 22px 24px;
margin: 16px 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
max-width: 820px;
}
.ask-user-card.submitted {
opacity: 0.7;
}
/* Reuse picker — compact card that fits the chat column comfortably */
.ask-user-card.reuse-picker-card {
border-left: 3px solid var(--accent-coral-dark, #c06a45);
padding: 10px 12px 12px;
margin: 8px 0;
border-radius: 10px;
max-width: 100%;
box-shadow: none;
}
.ask-user-card.reuse-picker-card .ask-user-question {
margin-bottom: 8px;
}
.ask-user-card.reuse-picker-card .ask-user-question:last-of-type {
margin-bottom: 8px;
}
.ask-user-card.reuse-picker-card .ask-user-chip {
padding: 2px 7px;
font-size: 9px;
letter-spacing: 0.6px;
margin-bottom: 4px;
border-radius: 4px;
}
.ask-user-card.reuse-picker-card .ask-user-q-title {
font-family: inherit;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
margin-bottom: 8px;
color: var(--text-secondary);
}
/* Dynamic: wrap into columns when the chat pane has room */
.ask-user-card.reuse-picker-card .ask-user-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 6px;
margin-bottom: 6px;
}
/* Fixed max height — long chats scroll inside the card */
.ask-user-card.reuse-picker-card .reuse-picker-scroll {
max-height: 220px;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 6px;
padding-right: 2px;
scrollbar-width: thin;
}
.ask-user-card.reuse-picker-card .reuse-picker-scroll .ask-user-options {
margin-bottom: 0;
}
/* Collapsed "More artifacts" drawer for Ancillary rows */
.ask-user-card.reuse-picker-card .reuse-picker-more {
border-top: 1px solid var(--border-light, #e8e4df);
margin: 2px 0 6px;
padding: 0;
}
.ask-user-card.reuse-picker-card .reuse-picker-more-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
list-style: none;
cursor: pointer;
padding: 6px 4px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #6b6560);
user-select: none;
}
.ask-user-card.reuse-picker-card .reuse-picker-more-bar::-webkit-details-marker {
display: none;
}
.ask-user-card.reuse-picker-card .reuse-picker-more-bar::before {
content: '▸';
font-size: 10px;
color: var(--text-muted, #9a948c);
flex-shrink: 0;
}
.ask-user-card.reuse-picker-card .reuse-picker-more[open] .reuse-picker-more-bar::before {
content: '▾';
}
.ask-user-card.reuse-picker-card .reuse-picker-more-label {
flex: 1;
min-width: 0;
}
.ask-user-card.reuse-picker-card .reuse-picker-more-count {
font-weight: 500;
font-size: 10px;
color: var(--text-muted, #9a948c);
white-space: nowrap;
}
.ask-user-card.reuse-picker-card .reuse-picker-ancillary-options {
max-height: 140px;
overflow-y: auto;
margin-bottom: 4px;
padding-bottom: 2px;
scrollbar-width: thin;
}
.ask-user-card.reuse-picker-card .ask-user-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 7px 28px 7px 10px;
border-radius: 7px;
min-width: 0;
}
.ask-user-card.reuse-picker-card .ask-user-option-pill {
font-size: 8px;
padding: 1px 5px;
margin-bottom: 0;
letter-spacing: 0.03em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Turn/role pills (reuse picker) */
.ask-user-card.reuse-picker-card .ask-user-option-pill-artifact {
background: rgba(192, 106, 69, 0.12);
color: #9a5535;
}
.ask-user-card.reuse-picker-card .ask-user-option-pill-visual {
background: rgba(59, 130, 246, 0.12);
color: #2563eb;
}
.ask-user-card.reuse-picker-card .ask-user-option-pill-intermediate {
background: rgba(107, 114, 128, 0.14);
color: #4b5563;
}
.ask-user-card.reuse-picker-card .ask-user-option-pill-ancillary {
background: rgba(148, 163, 184, 0.16);
color: #64748b;
}
.ask-user-card.reuse-picker-card .ask-user-option-label {
font-size: 11px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Descriptions bloat the compact card — keep chips scannable */
.ask-user-card.reuse-picker-card .ask-user-option-desc {
display: none;
}
.ask-user-card.reuse-picker-card .ask-user-option-check {
right: 8px;
width: 14px;
height: 14px;
}
/* Free-text "other" doesn't map to artifact ids — hide for reuse */
.ask-user-card.reuse-picker-card .ask-user-other {
display: none;
}
.ask-user-card.reuse-picker-card .ask-user-submit {
width: auto;
min-width: 140px;
padding: 7px 14px;
border-radius: 7px;
font-size: 12px;
margin-top: 4px;
margin-left: auto;
margin-right: 0;
}
@keyframes reuse-picker-fadeout {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); max-height: 0; padding: 0 12px; margin: 0; overflow: hidden; }
}
.ask-user-card.reuse-picker-removing {
animation: reuse-picker-fadeout 0.35s ease-out forwards;
pointer-events: none;
}
.ask-user-question {
margin-bottom: 22px;
}
.ask-user-question:last-of-type {
margin-bottom: 18px;
}
.ask-user-chip {
display: inline-block;
padding: 4px 10px;
background: var(--bg-cream);
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--accent-coral-dark);
font-family: 'Monaco', 'Menlo', monospace;
margin-bottom: 10px;
}
.ask-user-q-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 21px;
font-weight: 500;
line-height: 1.3;
color: var(--text-primary);
margin-bottom: 14px;
}
.ask-user-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.ask-user-option {
display: block;
width: 100%;
text-align: left;
padding: 12px 16px;
padding-right: 40px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
color: var(--text-primary);
transition: all 0.15s;
position: relative;
}
/* L6 consolidate picker — small category pill above each option's title.
* Server sends `kind_label` ("Report", "Dashboard", "Image", "Table" …)
* plus `kind_id` (raw artifact type) so we can colour the chip per
* category. Base style here; per-kind tints below. */
.ask-user-option-pill {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
margin-bottom: 6px;
background: rgba(196, 145, 123, 0.12); /* coral-tinted neutral */
color: var(--accent-coral);
border: 1px solid rgba(196, 145, 123, 0.25);
line-height: 1.4;
vertical-align: middle;
}
.ask-user-option-pill-html {
background: rgba(96, 138, 192, 0.12);
color: #4a78b3;
border-color: rgba(96, 138, 192, 0.28);
}
.ask-user-option-pill-live_table,
.ask-user-option-pill-csv {
background: rgba(76, 154, 108, 0.12);
color: #3f7c54;
border-color: rgba(76, 154, 108, 0.28);
}
.ask-user-option-pill-image,
.ask-user-option-pill-image-generation {
background: rgba(178, 122, 178, 0.12);
color: #8e5a8e;
border-color: rgba(178, 122, 178, 0.28);
}
.ask-user-option-pill-markdown,
.ask-user-option-pill-docx,
.ask-user-option-pill-pptx {
background: rgba(196, 145, 123, 0.12);
color: var(--accent-coral);
border-color: rgba(196, 145, 123, 0.25);
}
.ask-user-option:hover:not(:disabled) {
border-color: var(--accent-coral);
background: #fdfbf8;
}
.ask-user-option.selected {
border-color: var(--accent-coral);
background: rgba(196, 145, 123, 0.08);
}
.ask-user-option:disabled {
cursor: default;
opacity: 0.7;
}
.ask-user-option-label {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
}
.ask-user-option-desc {
font-size: 12px;
color: var(--text-secondary);
margin-top: 3px;
line-height: 1.45;
}
.ask-user-option-check {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--accent-coral);
opacity: 0;
transition: opacity 0.15s;
}
.ask-user-option.selected .ask-user-option-check {
opacity: 1;
}
.ask-user-other {
margin-top: 2px;
}
.ask-user-other-input {
width: 100%;
padding: 10px 14px;
background: var(--bg-cream);
border: 1px solid var(--border-light);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
color: var(--text-primary);
transition: border-color 0.15s;
}
.ask-user-other-input::placeholder {
color: var(--text-tertiary);
font-style: italic;
}
.ask-user-other-input:focus {
outline: none;
border-color: var(--accent-coral);
background: var(--bg-white);
}
.ask-user-other-input:disabled {
opacity: 0.6;
cursor: default;
}
.ask-user-submit {
display: block;
width: 100%;
padding: 12px 20px;
background: var(--accent-coral);
border: none;
border-radius: 10px;
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
margin-top: 6px;
}
.ask-user-submit:hover:not(:disabled) {
background: var(--accent-coral-dark);
}
.ask-user-submit:disabled {
background: #d4c4b8;
cursor: not-allowed;
color: rgba(255, 255, 255, 0.8);
}
/* ==================== HOME PAGE REDESIGN ==================== */
.home-view {
padding: 14vh 48px 48px;
max-height: 100vh;
overflow-y: auto;
scroll-behavior: smooth;
}
.home-hero {
max-width: none;
margin: 0 auto 24px;
text-align: center;
}
@media (max-width: 600px) {
.greeting-text {
white-space: normal;
font-size: 26px;
}
}
.greeting-text {
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(26px, 4.4vw, 40px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.5px;
margin: 0;
white-space: nowrap;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.18) 92%),
var(--brand-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Typewriter caret — visible only while the greeting is being typed out. */
.greeting-text-content {
display: inline;
}
.greeting-text-content--typing::after {
content: '';
display: inline-block;
width: 2px;
height: 0.95em;
margin-left: 4px;
vertical-align: -0.12em;
background: var(--brand-indigo);
opacity: 0.7;
animation: greetingCaret 0.85s steps(2) infinite;
}
@keyframes greetingCaret {
50% { opacity: 0; }
}
/* Three "thinking" dots that appear after the greeting finishes typing. */
.greeting-typing-dots {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 12px;
vertical-align: middle;
}
/* Glues the last word of the greeting to the typing dots so they never
wrap onto a separate line on their own. */
.greeting-tail {
display: inline-block;
white-space: nowrap;
}
.greeting-typing-dots span {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand-indigo);
opacity: 0.35;
animation: greetingDotPulse 1.5s ease-in-out infinite;
}
.greeting-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.greeting-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes greetingDotPulse {
0%, 80%, 100% { opacity: 0.30; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.greeting-text-content--typing::after,
.greeting-typing-dots span {
animation: none;
opacity: 0.5;
}
}
/* Input card: clean + centered */
.home-view .input-container.home-input {
max-width: 820px;
margin: 0 auto 20px;
}
.home-view .input-container.home-input .input-wrapper {
border-radius: 18px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
padding: 4px 8px 4px;
}
/* Suggestion chips — refined pills. Subtle cream gradient, hairline indigo
border. Hover lifts and intensifies the border. */
/* Always a 2×2 grid: exactly 2 pills per row, 2 rows (renderDailyChips emits
4). The grid is centred on the page but is intentionally NOT capped to the
820px chat-box width — long pills may make a row wider than the input above,
and that overflow is accepted (per design) rather than wrapping to 1-per-row. */
.home-chips {
margin: 0 auto 32px;
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
justify-items: center;
gap: 10px 12px;
}
.home-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 14px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
border: 1px solid rgba(42, 56, 153, 0.14);
border-radius: 999px;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--text-secondary);
cursor: pointer;
text-align: center;
white-space: nowrap;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.22s ease,
color 0.22s ease,
background 0.24s ease,
box-shadow 0.28s ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(20, 30, 80, 0.03);
}
.home-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--brand-indigo);
opacity: 0.6;
transition: opacity 0.22s ease, transform 0.22s ease;
flex-shrink: 0;
}
.home-chip-icon svg {
width: 16px;
height: 16px;
}
.home-chip:hover .home-chip-icon {
opacity: 1;
transform: scale(1.06);
}
.home-chip:hover {
border-color: rgba(42, 56, 153, 0.45);
color: var(--brand-indigo);
background: linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 4px 14px rgba(42, 56, 153, 0.10);
}
.home-chip:active {
transform: translateY(0);
}
.home-chip-label {
display: inline-block;
}
/* Section blocks */
.home-section {
max-width: 960px;
margin: 0 auto 48px;
}
.home-section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
padding: 0 4px;
}
.home-section-header h3 {
font-family: 'EB Garamond', Georgia, serif;
font-size: 24px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.3px;
font-feature-settings: "kern" 1, "onum" 1;
}
.home-section-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.home-section.hidden {
display: none;
}
/* Template grid */
.home-template-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.home-template {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 18px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 14px;
cursor: pointer;
transition: all 0.18s ease;
text-align: left;
font-family: inherit;
color: var(--text-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.home-template:hover {
border-color: var(--accent-coral);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(196, 145, 123, 0.12);
}
.home-template-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--bg-cream);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-coral);
flex-shrink: 0;
}
.home-template-icon svg {
width: 18px;
height: 18px;
}
.home-template-body {
flex: 1;
min-width: 0;
}
.home-template-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.15;
margin-bottom: 4px;
letter-spacing: -0.1px;
font-feature-settings: "kern" 1, "onum" 1;
}
.home-template-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
/* Recents strip */
.home-recents {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.home-recent-card {
padding: 14px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
text-align: left;
font-family: inherit;
}
.home-recent-card:hover {
border-color: var(--accent-coral);
box-shadow: 0 6px 18px rgba(196, 145, 123, 0.1);
}
.home-recent-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-recent-meta {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 3px;
}
/* ==================== HOME DASHBOARD ==================== */
.home-dashboard {
width: 100%;
max-width: 780px;
margin: 0 auto;
padding: 8px 0 40px;
display: flex;
flex-direction: column;
gap: 28px;
}
/* Section "View all" / "Manage" link */
.home-section-link {
background: none;
border: none;
font-family: inherit;
font-size: 13px;
color: var(--accent-coral);
cursor: pointer;
font-weight: 500;
padding: 0;
}
.home-section-link:hover {
text-decoration: underline;
}
/* Artifact preview cards on dashboard */
.home-artifacts-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.home-artifact-card {
padding: 14px 16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
text-align: left;
font-family: inherit;
}
.home-artifact-card:hover {
border-color: var(--accent-coral);
box-shadow: 0 6px 18px rgba(196, 145, 123, 0.1);
}
.home-artifact-type {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 8px;
}
.home-artifact-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Plugin summary stats on dashboard */
.home-plugins-summary {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.home-plugin-stat {
padding: 16px 20px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 12px;
flex: 1;
min-width: 120px;
text-align: center;
}
.home-plugin-stat-value {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
font-family: 'EB Garamond', Georgia, serif;
}
.home-plugin-stat-label {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
@media (max-width: 960px) {
.home-template-grid,
.home-recents,
.home-artifacts-preview {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.home-view { padding: 0 20px 48px; }
.greeting-text { font-size: 48px; }
.home-template-grid,
.home-recents,
.home-artifacts-preview { grid-template-columns: 1fr; }
.home-plugins-summary { flex-direction: column; }
}
/* ==================== FLOATING ROUNDED PANELS ==================== */
/* Put breathing room around every major panel and give them all the same
rounded, soft-shadow treatment. */
.app-container {
padding: 12px;
gap: 12px;
background: var(--bg-cream);
}
.left-sidebar {
border-radius: 16px;
border: 1px solid var(--border-light);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
overflow: hidden;
height: calc(100vh - 24px);
flex-shrink: 0;
}
.main-content {
border-radius: 16px;
overflow: hidden;
display: flex;
flex: 1;
min-width: 0;
height: calc(100vh - 24px);
gap: 12px;
background: transparent;
}
.home-view {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 16px;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
flex: 1;
min-width: 0;
}
.home-view .home-topbar {
background: transparent;
}
.chat-view {
background: transparent;
flex: 1;
min-width: 0;
min-height: 0;
height: 100%;
gap: 12px;
}
.chat-view .chat-main {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 16px;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
overflow: hidden;
flex: 1;
min-width: 0;
min-height: 0;
height: 100%;
}
.chat-view .sidebar {
border-radius: 16px;
border: 1px solid var(--border-light);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
overflow: hidden;
height: auto;
}
.artifact-canvas {
border-radius: 16px;
border: 1px solid var(--border-light);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
overflow: hidden;
min-height: 0;
height: 100%;
}
/* Home button in chat header */
.home-btn {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-light);
background: var(--bg-white);
border-radius: 10px;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.15s;
margin-right: 10px;
flex-shrink: 0;
}
.home-btn:hover {
border-color: var(--accent-coral);
color: var(--accent-coral-dark);
}
.home-btn svg {
width: 16px;
height: 16px;
}
/* ==================== INLINE TOOL CALL (detailed view) ==================== */
/* Vertical timeline rail — multiple consecutive tool cards share a coral
left-edge guide like a stepper. */
.message-content .inline-tool-call + .inline-tool-call {
margin-top: 6px;
}
/* ── Tool-grid mode — 2-column wrap when ≥5 tool cards in one message ──
Added by _relayoutInlineToolGrid() in renderer.js when the count of
direct `.inline-tool-call` children of a .message-content reaches the
threshold. Each card carries a `data-grid-pos="0|1"` attribute so we
can flip the right-margin off on the right column without relying on
:nth-of-type (which counts ALL same-type siblings, including non-tool
divs). The stepper rail (::before / ::after) is hidden in grid mode —
the visual cue from the rail only makes sense for a single vertical
column, not a 2-column wrap.
Mobile (≤640px): collapse back to single-column so cards don't get
squeezed below ~140px and become unreadable. */
.message-content.tool-grid-mode > .inline-tool-call {
display: inline-block;
width: calc(50% - 6px);
vertical-align: top;
margin: 6px 12px 0 0;
box-sizing: border-box;
}
.message-content.tool-grid-mode > .inline-tool-call[data-grid-pos="1"] {
margin-right: 0;
}
.message-content.tool-grid-mode > .inline-tool-call::before,
.message-content.tool-grid-mode > .inline-tool-call::after {
display: none;
}
@media (max-width: 640px) {
.message-content.tool-grid-mode > .inline-tool-call {
display: block;
width: 100%;
margin: 6px 0 0 0;
}
}
.inline-tool-call {
position: relative;
animation: tool-card-in 0.25s ease-out;
}
.inline-tool-call::before {
content: '';
position: absolute;
left: -14px;
top: 22px;
bottom: -6px;
width: 2px;
background: linear-gradient(var(--accent-coral) 0%, rgba(196, 145, 123, 0.15) 100%);
border-radius: 1px;
opacity: 0;
transition: opacity 0.25s;
}
.inline-tool-call + .inline-tool-call::before {
opacity: 1;
}
.inline-tool-call::after {
content: '';
position: absolute;
left: -18px;
top: 12px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bg-white);
border: 2px solid var(--accent-coral);
box-sizing: border-box;
transition: all 0.2s;
}
.inline-tool-call.done::after {
background: var(--accent-coral);
}
/* Spinner / check icons */
.inline-tool-header .tool-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.inline-tool-header .tool-spinner svg {
width: 18px;
height: 18px;
color: var(--accent-coral);
animation: tool-spin 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin: center;
opacity: 0.7;
}
@keyframes tool-spin {
from { transform: rotate(0deg); opacity: 0.5; }
50% { opacity: 1; }
to { transform: rotate(360deg); opacity: 0.5; }
}
/* Gradient sweep at bottom of running tool cards */
@keyframes tool-sweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.inline-tool-header .tool-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.inline-tool-header .tool-check svg {
width: 14px;
height: 14px;
color: #3a8a5c;
}
.inline-tool-call.done .tool-spinner { display: none !important; }
.inline-tool-call.done .tool-check { display: inline-flex !important; }
.inline-tool-header .tool-friendly {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Input section code block */
.tool-section.tool-input-section .tool-input-content {
background: rgba(0, 0, 0, 0.04);
color: var(--text-primary);
padding: 10px 12px;
border-radius: 8px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 11.5px;
line-height: 1.5;
overflow-x: auto;
max-height: 160px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
border: 1px solid var(--border-light);
margin: 0;
}
/* Output section */
.tool-output-rendered {
margin-bottom: 8px;
}
/* ── Search Results — Vertical Subway Feed ── */
.tool-result-summary {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-tertiary);
padding: 0 0 6px 28px;
}
.tool-card-result {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px 8px 0;
text-decoration: none;
color: var(--text-primary);
transition: all 0.15s;
position: relative;
margin-left: 10px;
padding-left: 18px;
border-left: 2px solid var(--border-light);
}
/* Subway dot */
.tool-card-result::before {
content: '';
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bg-white);
border: 2px solid var(--accent-coral);
transition: background 0.15s;
}
.tool-card-result:hover::before {
background: var(--accent-coral);
}
.tool-card-result:hover {
text-decoration: none;
color: var(--accent-coral-dark);
}
/* Last item: no bottom border */
.tool-card-result:last-child {
border-left-color: transparent;
}
.tool-card-fav {
width: 20px;
height: 20px;
border-radius: 4px;
background: var(--bg-cream);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
flex-shrink: 0;
overflow: hidden;
}
.tool-card-fav img {
width: 14px;
height: 14px;
display: block;
}
.tool-card-result-title {
flex: 1;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s;
}
.tool-card-result:hover .tool-card-result-title {
color: var(--accent-coral-dark);
}
.tool-card-result-domain {
font-size: 10px;
color: var(--text-tertiary);
flex-shrink: 0;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes tool-card-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==================== CANVAS EXPAND ==================== */
.artifact-canvas.expanded {
position: fixed;
top: 12px;
right: 12px;
bottom: 12px;
left: 12px;
width: auto;
max-width: none;
z-index: 100; /* above left-sidebar overlay (80) so expand covers the rail */
}
.chat-view.artifact-expanded .chat-main,
.chat-view.artifact-expanded .sidebar {
opacity: 0.35;
pointer-events: none;
transition: opacity 0.2s;
}
/* ════════════════════════════════════════════════════════════════════════
* User message — bubble + sources layout
* Right-aligned vertical stack: file/URL chips on top, prose bubble below.
* Replaces the old 3-sibling flex-row which caused jagged wrapping when
* URLs + attachments were combined with prose.
* ════════════════════════════════════════════════════════════════════════ */
.message.user .message-bubble-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
/* 75% cap keeps long user messages from sprawling all the way across
* the message column. Right-edge alignment with the composer below is
* preserved separately by `.message.user { justify-content: flex-end; }`,
* which pushes the wrap (whatever its width) to the column's right
* edge — so the bubble's right edge always lines up with the input
* box, while the cap controls how far it can grow leftward. */
max-width: 75%;
min-width: 0;
}
/* Author label — Apple-style: small slate grey, sits above the bubble so
* the user always knows who's speaking AND when. Two pieces:
* .message-author-name — semibold, the speaker's name
* .message-author-time — lighter, IST date · 24h time
* Separated by a small gap; render as a baseline-aligned inline-flex row
* so name + time stay visually anchored. */
.message-author {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
margin: 0 4px 4px;
user-select: none;
}
.message-author-name {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(15, 23, 42, 0.62);
}
.message-author-time {
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(15, 23, 42, 0.42);
font-variant-numeric: tabular-nums;
}
.message-author-user {
align-self: flex-end;
}
.message-author-assistant {
align-self: flex-start;
margin-bottom: 6px;
}
@media (prefers-color-scheme: dark) {
.message-author-name { color: rgba(255, 255, 255, 0.65); }
.message-author-time { color: rgba(255, 255, 255, 0.42); }
}
.message-sources {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
max-width: 100%;
}
/* Unified source chip — files AND urls use the same pill style so the
* row reads as a coherent "sources" bar. Coral-on-cream for warmth. */
.message-source-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 10px;
background: var(--bg-white);
border: 1px solid rgba(192, 139, 92, 0.22);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
box-shadow: 0 1px 2px rgba(26, 15, 5, 0.04);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
line-height: 1;
max-width: 260px;
}
.message-source-chip:hover {
background: #fefaf5;
border-color: rgba(192, 139, 92, 0.4);
transform: translateY(-1px);
}
.message-source-chip svg {
color: var(--accent-coral);
flex-shrink: 0;
}
.message-source-chip-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
letter-spacing: -0.1px;
}
/* Slight visual distinction so users can tell files from URLs at a glance */
.message-source-chip-url {
/* URL chips get a subtle background tint — same coral family */
background: linear-gradient(180deg, #fefaf5 0%, #fdf5eb 100%);
}
.message-source-chip-url .message-source-chip-label {
color: var(--accent-coral-dark, #a87644);
font-weight: 500;
}
/* Placeholder text when the prose bubble would otherwise be empty
* (e.g. the user dropped a URL alone — we don't want an empty bubble) */
.message-content-placeholder {
opacity: 0.78;
font-style: italic;
font-size: 14px;
}
/* ==================== DOCUMENT ARTIFACT CARD ==================== */
.artifact-document-card-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 32px;
min-height: 100%;
}
.artifact-document-card {
background: var(--bg-cream);
border: 1px solid var(--border-light);
border-radius: 16px;
padding: 40px 36px 32px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.artifact-document-icon {
width: 64px;
height: 64px;
border-radius: 14px;
background: var(--bg-white);
border: 1px solid var(--border-light);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-coral);
}
.artifact-document-icon svg {
width: 28px;
height: 28px;
}
.artifact-document-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 6px;
letter-spacing: -0.2px;
word-break: break-word;
}
.artifact-document-meta {
font-size: 12px;
color: var(--text-tertiary);
font-family: 'Monaco', 'Menlo', monospace;
margin-bottom: 22px;
word-break: break-all;
}
.artifact-document-btn {
display: inline-block;
padding: 10px 24px;
background: var(--accent-coral);
color: white;
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.artifact-document-btn:hover {
background: var(--accent-coral-dark);
text-decoration: none;
}
.tool-output-rendered {
font-size: 13px;
line-height: 1.55;
color: var(--text-primary);
padding: 10px 14px;
}
.tool-output-rendered a {
color: var(--accent-coral-dark);
text-decoration: underline;
}
.tool-output-rendered .search-result {
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
}
.tool-output-rendered .search-result:last-child { border-bottom: none; }
.tool-output-rendered .search-result-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.tool-output-rendered .search-result-url {
font-size: 11px;
color: var(--text-tertiary);
font-family: 'Monaco', 'Menlo', monospace;
margin-bottom: 4px;
word-break: break-all;
}
.tool-output-rendered .search-result-snippet {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ==================== PROJECT FOLDER PICKER ==================== */
/* Folder button in controls */
.folder-btn {
position: relative;
}
.folder-btn.active {
color: var(--accent-coral) !important;
background: rgba(196, 145, 123, 0.08) !important;
}
/* Project indicator below input */
.project-indicator {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px 10px;
font-size: 12px;
color: var(--accent-coral-dark);
}
.project-indicator svg {
flex-shrink: 0;
color: var(--accent-coral);
}
.project-indicator-name {
font-weight: 500;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-indicator-clear {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
background: none;
border-radius: 50%;
cursor: pointer;
color: var(--text-tertiary);
transition: all 0.12s;
padding: 0;
margin-left: 2px;
}
.project-indicator-clear:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--text-primary);
}
/* Chat header project badge */
.chat-project-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(196, 145, 123, 0.08);
border: 1px solid rgba(196, 145, 123, 0.2);
border-radius: 6px;
font-size: 12px;
font-family: inherit;
font-weight: 500;
color: var(--accent-coral-dark);
cursor: pointer;
transition: all 0.15s;
margin-left: 8px;
max-width: 200px;
overflow: hidden;
}
.chat-project-badge:hover {
background: rgba(196, 145, 123, 0.14);
border-color: rgba(196, 145, 123, 0.35);
}
.chat-project-badge svg {
flex-shrink: 0;
}
.chat-project-badge span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==================== HOME VIEW CLEANUP ==================== */
/* Simpler recents section below chips */
.home-recents-section {
max-width: 960px;
margin: 24px auto 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.home-recents-section .home-recents {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
align-items: stretch;
justify-content: stretch;
}
.home-recent-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 18px 14px;
background:
linear-gradient(135deg, rgba(42, 56, 153, 0.022) 0%, rgba(255, 255, 255, 0) 42%, rgba(29, 154, 148, 0.028) 100%),
linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
border: 1px solid rgba(20, 30, 80, 0.07);
border-radius: 14px;
cursor: pointer;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--text-secondary);
text-align: left;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.28s ease,
box-shadow 0.32s ease,
background 0.28s ease;
min-height: 156px;
max-width: none;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 1px 2px rgba(20, 30, 80, 0.025),
0 6px 16px rgba(20, 30, 80, 0.022);
}
.home-recent-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--brand-gradient-rule);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
.home-recent-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
background: radial-gradient(120% 80% at 0% 0%, rgba(42, 56, 153, 0.045) 0%, transparent 55%);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
.home-recent-card:hover {
border-color: rgba(42, 56, 153, 0.20);
color: var(--text-primary);
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 12px 30px rgba(20, 30, 80, 0.08),
0 2px 8px rgba(42, 56, 153, 0.05);
}
.home-recent-card:hover::before { opacity: 1; }
.home-recent-card:hover::after { opacity: 1; }
.home-recent-card--pinned {
background:
linear-gradient(135deg, rgba(42, 56, 153, 0.045) 0%, rgba(255, 255, 255, 0) 50%, rgba(29, 154, 148, 0.05) 100%),
linear-gradient(180deg, #fdfdff 0%, #ffffff 60%);
border-color: rgba(42, 56, 153, 0.18);
}
/* Running session — soft indigo glow on the border to mirror the sidebar. */
.home-recent-card--running {
border-color: rgba(42, 56, 153, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 1px 2px rgba(20, 30, 80, 0.025),
0 0 0 3px rgba(42, 56, 153, 0.05),
0 6px 16px rgba(42, 56, 153, 0.06);
}
.home-recent-running {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
background: rgba(42, 56, 153, 0.09);
color: var(--brand-indigo);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.home-recent-running-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-teal);
box-shadow: 0 0 0 3px rgba(29, 154, 148, 0.18);
animation: homeRecentRunningPulse 1.4s ease-in-out infinite;
}
@keyframes homeRecentRunningPulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.home-recent-card--pinned::before { opacity: 0.55; }
.home-recent-pin {
position: absolute;
top: 10px;
right: 12px;
font-size: 11px;
line-height: 1;
color: var(--brand-indigo);
opacity: 0.85;
}
.home-recent-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: 'EB Garamond', Georgia, serif;
font-weight: 500;
font-size: 17px;
color: var(--brand-indigo);
line-height: 1.22;
letter-spacing: -0.005em;
padding-right: 14px;
word-break: break-word;
position: relative;
z-index: 1;
}
.home-recent-preview {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-tertiary);
word-break: break-word;
flex: 1;
position: relative;
z-index: 1;
padding-right: 64px;
}
/* When the preview body is an artifact, switch to a structured layout:
small indigo title row above a 2-line snippet of the artifact body. */
.home-recent-preview--artifact {
display: flex;
flex-direction: column;
gap: 4px;
-webkit-line-clamp: unset;
overflow: hidden;
}
.home-recent-art-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.22;
color: var(--brand-indigo);
word-break: break-word;
padding-right: 14px;
}
.home-recent-art-snippet {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-tertiary);
word-break: break-word;
}
.home-recent-foot {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--text-tertiary);
white-space: nowrap;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(20, 30, 80, 0.06);
position: relative;
z-index: 1;
}
.home-recent-time {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.home-recent-meta {
font-size: 10.5px;
color: rgba(20, 30, 80, 0.42);
font-variant-numeric: tabular-nums;
letter-spacing: 0.015em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.home-recent-sep {
color: rgba(20, 30, 80, 0.22);
font-size: 10px;
user-select: none;
}
.home-recent-preview--empty {
font-style: italic;
color: rgba(20, 30, 80, 0.32);
letter-spacing: 0.005em;
}
/* Assistant-reply preview (used when no artifact yet) — slightly stronger
contrast than the prompt-only summary so the reader's eye lands on the
actual answer text instead of skimming past it as metadata. */
.home-recent-preview--reply {
color: var(--text-secondary);
}
.home-recent-mono {
position: absolute;
bottom: 12px;
right: 12px;
width: 56px;
height: 56px;
object-fit: contain;
opacity: 0.55;
pointer-events: none;
user-select: none;
transition: opacity 0.36s ease, transform 0.36s ease;
z-index: 0;
}
.home-recent-card:hover .home-recent-mono {
opacity: 0.85;
transform: rotate(-8deg) scale(1.06);
}
.home-recent-badge {
padding: 3px 9px;
border-radius: 999px;
background: rgba(42, 56, 153, 0.07);
color: var(--brand-indigo);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.home-recents-toggle {
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
margin-top: 18px;
border: 1px solid rgba(42, 56, 153, 0.14);
border-radius: 999px;
background: var(--bg-white);
color: var(--text-secondary);
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.22s ease;
box-shadow: 0 1px 2px rgba(20, 30, 80, 0.03);
}
.home-recents-toggle:hover {
border-color: rgba(42, 56, 153, 0.32);
color: var(--brand-indigo);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(42, 56, 153, 0.10);
}
.home-recents-toggle svg {
width: 12px;
height: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════
Fact Validation -- Diff Annotations
═══════════════════════════════════════════════════════════════════════════ */
/* Validated pane inherits .artifact-pane positioning + the shared
:is(.artifact-preview-pane, .artifact-validated-pane) rules for its
artifact body. The padding / font / p-margin rules that used to live
here rendered the pane NARROWER than Preview (64px of extra horizontal
padding), so every table inside came out narrower and formatting
diverged. Leave those to the shared rules. */
/* Correction wrapper */
.artifact-validated-pane .fv-correction {
position: relative;
cursor: help;
border-radius: 3px;
padding: 0 1px;
}
/* Deleted / original text */
.artifact-validated-pane del {
background: #fde8e8;
color: #991b1b;
text-decoration: line-through;
text-decoration-color: #ef4444;
border-radius: 2px;
padding: 1px 4px;
font-style: normal;
}
/* Inserted / corrected text */
.artifact-validated-pane ins {
background: #dcfce7;
color: #166534;
text-decoration: none;
border-radius: 2px;
padding: 1px 4px;
font-weight: 600;
}
/* Outdated data highlight */
.artifact-validated-pane .fv-outdated del {
background: #fef3c7;
color: #92400e;
text-decoration-color: #f59e0b;
}
.artifact-validated-pane .fv-outdated ins {
background: #fef9c3;
color: #713f12;
}
/* Unverifiable claims */
.artifact-validated-pane .fv-unverifiable {
background: #fef9c3;
border-bottom: 2px dashed #facc15;
padding: 1px 4px;
border-radius: 2px;
}
.artifact-validated-pane .fv-unverifiable sup {
color: #854d0e;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 10px;
font-weight: 600;
}
/* Multi-fact tab strip — sits below the dialog .re-head so the close
button + drag handle stay pinned at the top. Wraps onto multiple
rows when there are many facts; the dialog's overflow-y: auto
handles the rest. */
.fv-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 12px;
padding: 8px;
background: rgba(15, 23, 42, 0.04);
border-radius: 10px;
}
.fv-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 999px;
background: #fff;
color: #1f2937;
font: 500 12px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
max-width: 240px;
}
.fv-tab:hover {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.16);
}
.fv-tab-active {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.fv-tab-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fv-tab-dot {
width: 8px;
height: 8px;
border-radius: 999px;
flex: 0 0 auto;
display: inline-block;
}
.fv-tab-dot-correct { background: #22c55e; }
.fv-tab-dot-outdated { background: #f59e0b; }
.fv-tab-dot-inaccurate { background: #ef4444; }
.fv-tab-dot-unverifiable { background: #facc15; }
/* Dark-mode mirror */
@media (prefers-color-scheme: dark) {
.fv-tabs {
background: rgba(255, 255, 255, 0.04);
}
.fv-tab {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.10);
color: #e5e7eb;
}
.fv-tab:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
}
.fv-tab-active {
background: #f8fafc;
border-color: #f8fafc;
color: #0f172a;
}
}
/* Hover tooltip */
.artifact-validated-pane .fv-correction:hover .fv-tooltip {
display: block;
}
.fv-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 0;
background: var(--text-primary, #1a1a1a);
color: #fafafa;
padding: 10px 14px;
border-radius: 10px;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 12px;
line-height: 1.5;
max-width: 360px;
min-width: 200px;
white-space: normal;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
pointer-events: none;
}
.fv-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 16px;
border: 6px solid transparent;
border-top-color: var(--text-primary, #1a1a1a);
}
.fv-tooltip .fv-tooltip-verdict {
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.fv-tooltip .fv-tooltip-verdict.inaccurate { color: #fca5a5; }
.fv-tooltip .fv-tooltip-verdict.outdated { color: #fcd34d; }
.fv-tooltip .fv-tooltip-verdict.unverifiable { color: #fde047; }
.fv-tooltip .fv-tooltip-explanation {
margin-bottom: 6px;
}
.fv-tooltip .fv-tooltip-source {
color: var(--accent-coral, #c9977a);
font-size: 11px;
word-break: break-all;
}
.fv-tooltip .fv-tooltip-freshness {
color: #a3a3a3;
font-size: 11px;
font-style: italic;
margin-top: 4px;
}
/* ========================================================================
Validation Dynamic Island
Floating glassmorphic pill that overlays the artifact body during a
validation run. Driven by SSE events (phase_start, phase_done,
validation_result, error). Auto-collapses after success or hides
immediately on error after a brief shake.
====================================================================== */
.fv-island {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%) translateY(-12px) scale(0.92);
z-index: 25;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
min-height: 40px;
max-width: calc(100% - 48px);
/* Liquid glass — translucent light glass with heavy blur + saturation
boost. Sits on the chat/canvas which is a cream/light surface, so
the dark variant got drowned by the light bg. The dark-mode mirror
under prefers-color-scheme: dark reverts to the dark-glass look. */
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 999px;
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 1px 2px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
/* Spring-ish transition for the morph */
transition:
transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 280ms ease,
background-color 320ms ease,
border-color 320ms ease,
box-shadow 320ms ease;
opacity: 0;
pointer-events: none;
cursor: default;
user-select: none;
}
.fv-island[hidden] { display: none !important; }
.fv-island.fv-island-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.fv-island-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
box-shadow: 0 0 16px rgba(99, 102, 241, 0.45);
}
.fv-island-text {
/* Dark slate on the light-glass island (primary). Dark-mode mirror at
the bottom of this file flips it back to white-on-dark. */
color: rgba(15, 23, 42, 0.92);
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60ch;
}
.fv-island-meta {
color: rgba(15, 23, 42, 0.55);
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 11.5px;
font-weight: 400;
white-space: nowrap;
padding-left: 8px;
border-left: 1px solid rgba(15, 23, 42, 0.12);
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity 240ms ease, max-width 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv-island.fv-island-has-meta .fv-island-meta {
opacity: 1;
max-width: 30ch;
}
/* Per-state palette — the icon's gradient + glow color drive the
"alive" feel. State changes morph the colors smoothly. */
.fv-island[data-state="reading"] .fv-island-icon {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
box-shadow: 0 0 18px rgba(99, 102, 241, 0.55);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.fv-island[data-state="searching"] .fv-island-icon {
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
box-shadow: 0 0 18px rgba(59, 130, 246, 0.55);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.fv-island[data-state="analyzing"] .fv-island-icon {
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
box-shadow: 0 0 18px rgba(139, 92, 246, 0.55);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.fv-island[data-state="processing"] .fv-island-icon {
background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
box-shadow: 0 0 18px rgba(249, 115, 22, 0.55);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.fv-island[data-state="success"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.fv-island[data-state="success"] .fv-island-text { color: #064e3b; }
.fv-island[data-state="success"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv-island[data-state="error"] {
background: rgba(254, 226, 226, 0.88);
border-color: rgba(239, 68, 68, 0.35);
animation: fv-island-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.fv-island[data-state="error"] .fv-island-text { color: #7f1d1d; }
.fv-island[data-state="error"] .fv-island-icon {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 0 22px rgba(239, 68, 68, 0.45);
}
.fv-island[data-state="warning"] {
background: rgba(254, 243, 199, 0.88);
border-color: rgba(251, 191, 36, 0.35);
}
.fv-island[data-state="warning"] .fv-island-text { color: #78350f; }
.fv-island[data-state="warning"] .fv-island-icon {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
box-shadow: 0 0 18px rgba(251, 191, 36, 0.4);
}
@keyframes fv-island-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes fv-island-celebrate {
0% { transform: scale(0.85); }
60% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@keyframes fv-island-shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
40%, 60% { transform: translate3d(3px, 0, 0); }
}
/* ── Polish island ─────────────────────────────────────────────────────
Inherits all positioning + glass styling from .fv-island (the polish
island has both classes). Only the per-state palette differs — the
artifact-writer's polish doesn't progress through reading/searching/
analyzing the way fact-validation does, so we override just the two
states it actually uses: 'polishing' and 'final'. */
.polish-island { cursor: pointer; }
.polish-island[data-state="polishing"] .fv-island-icon {
/* Coral → teal gradient — matches the navy/coral/teal artifact palette
baked into docx-builder, so the island reads as part of the same
design system as the artifact it represents. */
background: linear-gradient(135deg, #C08B5C 0%, #2C7A7B 100%);
box-shadow: 0 0 18px rgba(192, 139, 92, 0.50);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.polish-island[data-state="final"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.polish-island[data-state="final"] .fv-island-text { color: #064e3b; }
.polish-island[data-state="final"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── Finalize island ───────────────────────────────────────────────────
Inherits all positioning + glass styling from .fv-island. Surfaces
the post-stream pipeline state (citation resolution + followup
suggestions) so the user knows the page is still doing work after
the artifact has landed on canvas. Teal/sage gradient on the icon —
the "finalizing pass" color, distinct from polish-island's coral
("artifact-writer polish") and redesign-island's orange ("redesign
transform"). Driven by _renderCanvasFromModel via
_isPostStreamPolishPending. */
.finalize-island { cursor: default; }
.finalize-island[data-state="finalizing"] .fv-island-icon {
background: linear-gradient(135deg, #2C7A7B 0%, #14b8a6 100%);
box-shadow: 0 0 18px rgba(20, 184, 166, 0.50);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.finalize-island[data-state="finalizing"] {
/* Subtly tint the glass toward teal so the island reads as a member
* of the teal palette even before the user has parsed the icon. */
background: rgba(240, 253, 251, 0.85);
border-color: rgba(20, 184, 166, 0.22);
}
/* Keep finalize pipeline behavior intact but suppress its visual pill. */
#finalizeIsland { display: none !important; }
/* ── Image-gen island ──────────────────────────────────────────────────
Fifth sibling in the canvas-status island family. Tracks the parallel
image-generation orchestrator's progress: slides in on
image_gen_started, updates "N of M done" on each image_gen_progress
done/failed event, fades on image_gen_complete. Cobalt → cyan gradient
on the icon — matches the DEA-MER chart palette so it reads as part
of the same design system as the charts it represents. */
.image-gen-island { cursor: default; }
.image-gen-island[data-state="generating"] .fv-island-icon {
background: linear-gradient(135deg, #2E4899 0%, #56CCF2 100%);
box-shadow: 0 0 18px rgba(86, 204, 242, 0.55);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.image-gen-island[data-state="generating"] {
background: rgba(232, 240, 255, 0.85);
border-color: rgba(68, 114, 196, 0.28);
}
.image-gen-island[data-state="complete"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.image-gen-island[data-state="complete"] .fv-island-text { color: #064e3b; }
.image-gen-island[data-state="complete"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── Image-generation deck — canvas layout ────────────────────────────
Multi-image deck artifacts (one or more charts) render as a vertical
stack of full-width image blocks. Each block: caption (title + brief)
above, image (or skeleton/error) below, action row at the bottom.
Designed to read like a print-quality visual brief, not a chat
attachment. */
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-deck {
display: flex;
flex-direction: column;
gap: 32px;
padding: 8px 0 32px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-deck-title {
font-family: 'EB Garamond', Georgia, serif;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.01em;
color: #1a365d;
margin: 0 0 8px 0;
padding-bottom: 14px;
border-bottom: 2px solid #1a365d;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-block {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
background: #FFFFFF;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-block.status-failed {
border-color: rgba(192, 0, 0, 0.22);
background: rgba(192, 0, 0, 0.02);
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-caption {
display: flex;
flex-direction: column;
gap: 4px;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-caption h3 {
font-family: 'Inter', sans-serif;
font-size: 15.5px;
font-weight: 600;
letter-spacing: 0.2px;
color: #2E4899;
margin: 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-caption p {
font-size: 13.5px;
line-height: 1.55;
color: #4a5568;
margin: 0;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10);
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-action {
font-size: 12px;
font-weight: 500;
color: #2E4899;
text-decoration: none;
padding: 5px 12px;
border: 1px solid rgba(46, 72, 153, 0.25);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
transition: background 0.15s ease, border-color 0.15s ease;
}
:is(.artifact-preview-pane, .artifact-validated-pane) .artifact-image-action:hover {
background: rgba(46, 72, 153, 0.06);
border-color: rgba(46, 72, 153, 0.4);
}
.artifact-image-error {
padding: 18px;
color: #7f1d1d;
background: rgba(192, 0, 0, 0.05);
border: 1px dashed rgba(192, 0, 0, 0.25);
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
}
/* Skeleton tile while a per-image generation is in flight. 16:9 aspect
with a shimmer gradient and a caption labelling which image is in
progress. Inherits the aphPulse keyframes already defined for the
phase pill. */
.artifact-image-skeleton {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 8px;
overflow: hidden;
background: rgba(232, 240, 255, 0.5);
border: 1px solid rgba(68, 114, 196, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.artifact-image-skeleton-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(232, 240, 255, 0) 30%,
rgba(46, 72, 153, 0.10) 50%,
rgba(232, 240, 255, 0) 70%
);
background-size: 200% 100%;
animation: artifact-image-skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes artifact-image-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
.artifact-image-skeleton-caption {
position: relative;
z-index: 1;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
color: #2E4899;
margin: 0;
text-align: center;
padding: 12px 24px;
}
/* ── Redesign island ───────────────────────────────────────────────────
Third sibling in the canvas-status island family. Distinct gradient
(coral → orange) so users can tell at a glance which of the three
processes is running, but identical positioning + glass styling for
visual consistency. Driven by design-canvas.js. */
.redesign-island { cursor: pointer; }
.redesign-island[data-state="working"] .fv-island-icon {
background: linear-gradient(135deg, #C08B5C 0%, #f97316 100%);
box-shadow: 0 0 18px rgba(249, 115, 22, 0.50);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.redesign-island[data-state="applying"] .fv-island-icon {
background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
box-shadow: 0 0 18px rgba(236, 72, 153, 0.55);
animation: fv-island-pulse 1.2s ease-in-out infinite;
}
.redesign-island[data-state="success"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.redesign-island[data-state="success"] .fv-island-text { color: #064e3b; }
.redesign-island[data-state="success"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.redesign-island[data-state="error"] {
background: rgba(254, 226, 226, 0.88);
border-color: rgba(239, 68, 68, 0.35);
animation: fv-island-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.redesign-island[data-state="error"] .fv-island-text { color: #7f1d1d; }
.redesign-island[data-state="error"] .fv-island-icon {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 0 22px rgba(239, 68, 68, 0.45);
}
/* ── Indexing island ───────────────────────────────────────────────────
Fourth sibling. Cyan→indigo gradient — distinct from the other three
islands so a glance tells the user which type of background work is
running. Reads as "data being pulled into the system" which matches
the chunking + embedding pipeline that drives it. */
.indexing-island { cursor: pointer; }
.indexing-island[data-state="queuing"] .fv-island-icon {
background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
box-shadow: 0 0 16px rgba(100, 116, 139, 0.45);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.indexing-island[data-state="indexing"] .fv-island-icon {
background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
box-shadow: 0 0 18px rgba(99, 102, 241, 0.55);
animation: fv-island-pulse 1.4s ease-in-out infinite;
}
.indexing-island[data-state="success"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.indexing-island[data-state="success"] .fv-island-text { color: #064e3b; }
.indexing-island[data-state="success"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.indexing-island[data-state="error"] {
background: rgba(254, 226, 226, 0.88);
border-color: rgba(239, 68, 68, 0.35);
animation: fv-island-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.indexing-island[data-state="error"] .fv-island-text { color: #7f1d1d; }
.indexing-island[data-state="error"] .fv-island-icon {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 0 22px rgba(239, 68, 68, 0.45);
}
/* ── Chat-status island ────────────────────────────────────────────────
Fifth island, anchored to the chat view (not the canvas) so it's
visible regardless of canvas state. Fires on chat navigation when
activity happened while the user was elsewhere. Distinct emerald→
teal gradient reads as "fresh / new content arrived". The
.chat-status-island scope nudges position because it lives inside
.chat-main rather than the canvas pane that fv-island assumes. */
.chat-status-island {
/* chat-main has its own offset stack; anchor this island to its top
center so it sits just below the chat header, above the messages. */
position: absolute;
top: 64px;
left: 50%;
transform: translateX(-50%) translateY(-12px) scale(0.92);
cursor: pointer;
z-index: 30;
}
.chat-status-island.fv-island-visible {
transform: translateX(-50%) translateY(0) scale(1);
}
.chat-status-island[data-state="running"] .fv-island-icon {
background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
box-shadow: 0 0 18px rgba(20, 184, 166, 0.50);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.chat-status-island[data-state="finished"] {
background: rgba(209, 250, 229, 0.88);
border-color: rgba(16, 185, 129, 0.35);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 0 18px rgba(16, 185, 129, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chat-status-island[data-state="finished"] .fv-island-text { color: #064e3b; }
.chat-status-island[data-state="finished"] .fv-island-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
animation: fv-island-celebrate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* chat-main needs to be a positioning context for the absolute island. */
.chat-main { position: relative; }
/* ── Artifact tab flash ────────────────────────────────────────────────
When a polish completes for an artifact the user isn't currently
viewing, flash that artifact's tab in the canvas tab strip so the user
knows to navigate back. Cleared when the user clicks the tab. The
flash is a soft accent glow + animated dot pulse — distinctive but
not jarring, since multiple artifacts can be polishing in parallel. */
.artifact-session-tab.has-update {
color: var(--text-primary);
animation: artifact-tab-flash 1.6s ease-in-out infinite;
}
.artifact-session-tab.has-update .ast-dot {
background: #10b981;
opacity: 1;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.65);
animation: artifact-tab-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes artifact-tab-flash {
0%, 100% { background: transparent; }
50% { background: rgba(16, 185, 129, 0.10); }
}
@keyframes artifact-tab-dot-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.45); }
}
/* ── Inline polish note (in chat) ──────────────────────────────────────
Lands inside the assistant's message div right after the artifact
card. Tells the user the artifact is a draft + polish is happening +
they can keep going. Auto-removes when polish completes. */
.message-polish-note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 9px 14px;
background: rgba(192, 139, 92, 0.06);
border: 1px dashed rgba(192, 139, 92, 0.40);
border-radius: 10px;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 12.5px;
color: var(--text-secondary, #4A5568);
line-height: 1.45;
transition: opacity 240ms ease, background 320ms ease, border-color 320ms ease;
}
.message-polish-note .mpn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #C08B5C 0%, #2C7A7B 100%);
color: #fff;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 0 10px rgba(192, 139, 92, 0.40);
animation: fv-island-pulse 1.6s ease-in-out infinite;
}
.message-polish-note.is-final {
background: rgba(16, 185, 129, 0.08);
border-style: solid;
border-color: rgba(16, 185, 129, 0.40);
color: #064e3b;
}
.message-polish-note.is-final .mpn-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
animation: none;
}
.message-polish-note.is-fading {
opacity: 0;
}
/* Validation island stays light glass regardless of OS color scheme —
it lives over the chat/canvas surface which is always cream/light,
so the dark mirror gets dropped on purpose. */
/* Validation summary bar */
.fv-summary {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 14px 18px;
background: var(--bg-cream, #faf8f5);
border: 1px solid var(--border-light, #e5e2dc);
border-radius: 10px;
margin-bottom: 24px;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 13px;
color: var(--text-secondary, #6b6b6b);
}
.fv-summary-title {
font-weight: 600;
color: var(--text-primary, #1a1a1a);
margin-right: 8px;
}
.fv-stat {
display: flex;
align-items: center;
gap: 6px;
}
.fv-stat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fv-stat-dot.correct { background: #22c55e; }
.fv-stat-dot.outdated { background: #f59e0b; }
.fv-stat-dot.inaccurate { background: #ef4444; }
.fv-stat-dot.unverifiable { background: #facc15; }
.fv-stat-count {
font-weight: 600;
color: var(--text-primary, #1a1a1a);
}
/* Corrections table at bottom */
.fv-corrections-table {
margin-top: 32px;
border-top: 2px solid var(--border-light, #e5e2dc);
padding-top: 20px;
}
.fv-corrections-table h4 {
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary, #1a1a1a);
}
.fv-corrections-table table {
width: 100%;
border-collapse: collapse;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 12px;
}
.fv-corrections-table th {
text-align: left;
padding: 8px 10px;
background: var(--bg-cream, #faf8f5);
border-bottom: 2px solid var(--border-light, #e5e2dc);
font-weight: 600;
color: var(--text-secondary, #6b6b6b);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fv-corrections-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-light, #e5e2dc);
vertical-align: top;
line-height: 1.4;
}
.fv-corrections-table .fv-verdict-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fv-verdict-badge.inaccurate { background: #fde8e8; color: #991b1b; }
.fv-verdict-badge.outdated { background: #fef3c7; color: #92400e; }
.fv-verdict-badge.unverifiable { background: #fef9c3; color: #854d0e; }
.fv-verdict-badge.correct { background: #dcfce7; color: #166534; }
/* Sub-tab island inside the Validated pane (Annotated | Facts).
Floating glass pill, centered, sits above the body content. Matches
the dynamic-island vocabulary: same blur, same border, same shadow.
The island floats over the body's scroll content (it lives in the
pane, not in the scroll container) so it stays put while the user
scrolls the annotated artifact or facts table. */
.fv-subtab-island {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 42;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 14px 36px -10px rgba(15, 23, 42, 0.18),
0 1px 2px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.fv-subtab-chip {
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: rgba(15, 23, 42, 0.6);
cursor: pointer;
white-space: nowrap;
transition: background 160ms ease, color 160ms ease,
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv-subtab-chip:hover {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.85);
}
.fv-subtab-chip.active {
background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
color: #0f172a;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.06);
}
/* Verdict tally chips inline in the same floating pill — replaces the
old solid `.fv-summary` bar. Each stat shows a colored dot, the
count, and a soft label, so the user reads the validation breakdown
at a glance without leaving the floating island. */
.fv-island-divider {
width: 1px;
align-self: stretch;
margin: 4px 4px 4px 6px;
background: rgba(15, 23, 42, 0.1);
}
.fv-island-stat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font: 600 11.5px/1 'Plus Jakarta Sans', -apple-system, sans-serif;
color: rgba(15, 23, 42, 0.7);
white-space: nowrap;
}
.fv-island-stat b {
color: #0f172a;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fv-island-stat-label {
color: rgba(15, 23, 42, 0.55);
font-weight: 500;
}
.fv-island-stat-dot {
width: 7px; height: 7px;
border-radius: 999px;
display: inline-block;
}
.fv-island-stat-dot--correct { background: #22c55e; }
.fv-island-stat-dot--outdated { background: #f59e0b; }
.fv-island-stat-dot--inaccurate { background: #ef4444; }
.fv-island-stat-dot--unverifiable { background: #facc15; }
/* The sub-tab body is the effective render target for either Annotated
or Facts. Annotated needs to carry the iframe/markdown render, so
it mimics the artifact-pane sizing. Top padding clears the floating
island so the first line of content isn't tucked under it. */
.fv-subtab-body {
position: absolute;
/* Start BELOW the floating island (top:56px) so content can never
scroll up into the island area. Previously top:0 + padding-top:56px
left the padding scrollable, causing rows to appear behind the island. */
top: 56px; left: 0; right: 0; bottom: 0;
overflow: auto;
}
.fv-subtab-body iframe { width: 100%; height: 100%; border: 0; }
.fv-subtab-body .artifact-markdown,
.fv-subtab-body .artifact-table-wrap,
.fv-subtab-body .artifact-svg-wrap { background: var(--bg-white, #fff); }
/* Facts table */
.fv-facts-body { padding: 0 18px 32px; }
.fv-facts-empty {
padding: 48px 24px;
text-align: center;
color: var(--text-tertiary, #999);
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 13px;
}
.fv-facts-wrap {
width: 100%;
/* overflow-x is intentionally NOT set here — overflow is handled by
.fv-subtab-body which is the real scroll container. The table uses
a min-width so it can grow wider than the pane without breaking
position:sticky on the header row. */
}
.fv-facts-table {
width: 100%;
min-width: 700px;
table-layout: fixed;
/* border-collapse:separate (not collapse) is required so that
position:sticky on
works correctly — collapsed borders cause
body rows to mis-align with the sticky header and borders to
vanish during horizontal scroll. border-spacing:0 restores the
visually-collapsed look. */
border-collapse: separate;
border-spacing: 0;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 12.5px;
background: var(--bg-white, #fff);
}
.fv-facts-table th {
position: sticky;
/* top:0 sticks the header at the top edge of .fv-subtab-body's scrollport.
The 56px padding-top on that container already clears the floating island,
so the header naturally starts below the island and sticks to 0 as the
user scrolls. */
top: 0;
z-index: 2;
text-align: left;
padding: 10px 12px;
background: var(--bg-cream, #faf8f5);
/* Use box-shadow instead of border-bottom so the line travels with
the sticky cell during horizontal scroll (border-bottom gets clipped
at the edge of the scroll container with border-collapse:separate). */
box-shadow: inset 0 -2px 0 var(--border-light, #e5e2dc);
font-weight: 600;
color: var(--text-secondary, #6b6b6b);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fv-facts-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-light, #e5e2dc);
vertical-align: top;
line-height: 1.45;
color: var(--text-primary, #1a1a1a);
/* Allow wrapping inside long unbreakable tokens (URLs, code, hashes)
so cells stay within their column width. `anywhere` is the modern
equivalent of `break-word` and is what we want for URLs. */
overflow-wrap: anywhere;
word-break: break-word;
}
.fv-facts-row.fv-row-applied td { opacity: 0.55; }
.fv-facts-row.fv-row-applied .fv-facts-orig,
.fv-facts-row.fv-row-applied .fv-facts-corrected { text-decoration: line-through; }
.fv-facts-orig { font-weight: 600; }
.fv-facts-corrected {
margin-top: 4px;
color: var(--text-secondary, #6b6b6b);
font-weight: 500;
}
.fv-facts-arrow { color: var(--accent, #14b8a6); font-weight: 700; margin-right: 2px; }
.fv-facts-context-snippet {
color: var(--text-secondary, #6b6b6b);
font-size: 12px;
max-height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;
}
.fv-facts-cell-evidence { font-size: 12px; color: var(--text-secondary, #6b6b6b); }
.fv-facts-evidence-src a { color: var(--accent, #0d9488); text-decoration: none; }
.fv-facts-evidence-src a:hover { text-decoration: underline; }
/* Compact URL line under the source-name link. Smaller, low-contrast,
monospace-like so it reads as "where this came from" without competing
with the actual evidence text. */
.fv-facts-evidence-url {
margin-top: 2px;
font-size: 11px;
color: var(--text-tertiary, #94a3b8);
word-break: break-all;
}
.fv-facts-evidence-url a {
color: inherit;
text-decoration: none;
}
.fv-facts-evidence-url a:hover { text-decoration: underline; }
.fv-facts-evidence-expl { margin-top: 4px; color: var(--text-primary, #1a1a1a); }
.fv-facts-evidence-fresh { margin-top: 4px; color: var(--text-tertiary, #999); font-style: italic; font-size: 11px; }
.fv-src-date { color: var(--text-tertiary, #999); }
.fv-facts-muted { color: var(--text-tertiary, #bbb); }
.fv-facts-state-chip {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-size: 10px;
font-weight: 600;
background: var(--bg-cream, #faf8f5);
color: var(--text-secondary, #6b6b6b);
border-radius: 4px;
text-transform: uppercase;
}
.fv-facts-cell-actions { white-space: nowrap; }
.fv-facts-btn {
display: inline-block;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
border-radius: 6px;
border: 1px solid var(--border-light, #e5e2dc);
background: var(--bg-white, #fff);
color: var(--text-primary, #1a1a1a);
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
}
.fv-facts-btn:hover { background: var(--bg-cream, #faf8f5); }
.fv-facts-btn-apply {
background: var(--accent, #0d9488);
color: #fff;
border-color: var(--accent, #0d9488);
}
.fv-facts-btn-apply:hover { background: #0f766e; }
.fv-facts-btn-dismiss { color: #991b1b; border-color: #fecaca; }
.fv-facts-btn:disabled { opacity: 0.6; cursor: wait; }
/* Telemetry — Validations detail tables */
.vtel-section { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; }
.vtel-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary, #6b6b6b);
margin-bottom: 6px;
}
.vtel-summary-table, .vtel-output-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: #fff;
border: 1px solid var(--border-light, #e5e2dc);
border-radius: 6px;
overflow: hidden;
}
.vtel-summary-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-light, #e5e2dc); }
.vtel-summary-table tr:last-child td { border-bottom: 0; }
.vtel-sum-k { color: var(--text-secondary, #6b6b6b); width: 40%; font-weight: 600; }
.vtel-sum-v { color: var(--text-primary, #1a1a1a); font-family: 'SF Mono', ui-monospace, monospace; font-size: 11.5px; }
.vtel-output-table th {
text-align: left;
padding: 8px 10px;
background: var(--bg-cream, #faf8f5);
border-bottom: 2px solid var(--border-light, #e5e2dc);
font-size: 10.5px;
font-weight: 600;
color: var(--text-secondary, #6b6b6b);
text-transform: uppercase;
}
.vtel-output-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-light, #e5e2dc);
vertical-align: top;
line-height: 1.4;
}
.vtel-output-table tr:last-child td { border-bottom: 0; }
/* Validate button states */
.artifact-validate-btn {
transition: color 0.2s ease;
}
.artifact-validate-btn.validating {
animation: pulse-validate 1.5s ease-in-out infinite;
color: var(--accent-coral, #c9977a);
}
.artifact-validate-btn.validated {
color: #22c55e;
}
@keyframes pulse-validate {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Validated tab highlight */
.artifact-tab[data-tab="validated"] {
color: #22c55e;
}
/* Badge validated indicator */
.artifact-type-badge.validated::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
}
/* ════════════════════════════════════════════════════════════════════════
* Chat search modal
* Triggered from the sidebar "Search chats" button or ⌘K. Overlays the
* entire app with a centred card containing a live-filtering list of
* all chats. Keyboard nav: ↑/↓ to move, ↵ to open, esc to close.
* ════════════════════════════════════════════════════════════════════════ */
/* Small kbd pill shown after the "Search chats" label */
.sidebar-action-kbd {
margin-left: auto;
font-family: 'Monaco', 'Menlo', ui-monospace, monospace;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(26, 15, 5, 0.05);
color: var(--text-tertiary);
border: 1px solid rgba(26, 15, 5, 0.07);
line-height: 1;
}
.left-sidebar.collapsed .sidebar-action-kbd {
display: none;
}
/* Backdrop — dims the app and centers the modal */
.chat-search-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 15, 5, 0.22);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 14vh;
animation: chatSearchFadeIn 0.18s ease-out;
}
.chat-search-modal-backdrop.hidden {
display: none;
}
@keyframes chatSearchFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.chat-search-modal {
width: 640px;
max-width: calc(100vw - 40px);
background: var(--bg-white);
border-radius: 14px;
box-shadow: 0 20px 60px -10px rgba(26, 15, 5, 0.22),
0 6px 18px rgba(26, 15, 5, 0.08);
border: 1px solid rgba(26, 15, 5, 0.06);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 72vh;
animation: chatSearchSlideIn 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes chatSearchSlideIn {
from { opacity: 0; transform: translateY(-8px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Header: search icon + input + close button */
.chat-search-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
}
.chat-search-icon {
width: 18px;
height: 18px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.chat-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-size: 16px;
color: var(--text-primary);
padding: 4px 0;
}
.chat-search-input::placeholder {
color: var(--text-tertiary);
font-weight: 400;
}
.chat-search-close {
background: none;
border: none;
padding: 6px;
border-radius: 6px;
cursor: pointer;
color: var(--text-tertiary);
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.chat-search-close svg {
width: 16px;
height: 16px;
}
.chat-search-close:hover {
background: rgba(26, 15, 5, 0.05);
color: var(--text-primary);
}
/* Results list — scrollable */
.chat-search-results {
flex: 1;
overflow-y: auto;
padding: 6px 0;
min-height: 80px;
}
.chat-search-section-label {
font-family: 'Monaco', 'Menlo', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-tertiary);
padding: 8px 18px 4px;
}
.chat-search-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
cursor: pointer;
transition: background 0.1s;
position: relative;
}
.chat-search-result:hover,
.chat-search-result.selected {
background: var(--bg-cream, #f4f5f7);
}
.chat-search-result-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--text-tertiary);
display: flex;
align-items: center;
justify-content: center;
}
.chat-search-result-icon svg {
width: 16px;
height: 16px;
}
.chat-search-result-title {
flex: 1;
font-size: 14px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
}
.chat-search-result-meta {
font-size: 12px;
color: var(--text-tertiary);
flex-shrink: 0;
}
/* Return arrow — appears on the selected row */
.chat-search-result-enter {
opacity: 0;
font-family: 'Monaco', 'Menlo', ui-monospace, monospace;
font-size: 13px;
color: var(--text-tertiary);
padding: 2px 6px;
border-radius: 4px;
background: rgba(26, 15, 5, 0.05);
transition: opacity 0.12s;
}
.chat-search-result.selected .chat-search-result-enter {
opacity: 1;
}
/* Highlighted match term in titles */
.chat-search-match {
background: rgba(192, 139, 92, 0.22);
color: var(--text-primary);
font-weight: 600;
border-radius: 2px;
padding: 1px 0;
}
/* Empty state */
.chat-search-empty {
padding: 48px 24px;
text-align: center;
color: var(--text-tertiary);
font-family: 'EB Garamond', Georgia, serif;
font-style: italic;
font-size: 15px;
}
/* Footer hints */
.chat-search-footer {
display: flex;
gap: 18px;
padding: 10px 18px;
border-top: 1px solid var(--border-light);
font-size: 11px;
color: var(--text-tertiary);
font-family: 'Plus Jakarta Sans', sans-serif;
background: #fafaf8;
}
.chat-search-footer kbd {
font-family: 'Monaco', 'Menlo', ui-monospace, monospace;
font-size: 10px;
padding: 1px 5px;
border-radius: 3px;
background: var(--bg-white);
border: 1px solid rgba(26, 15, 5, 0.08);
color: var(--text-secondary);
margin-right: 4px;
}
/* ══════════════════════════════════════════════════════════════════════
* Settings: no italics anywhere on this page. Per-page override that
* clears font-style on every settings surface — tab text, titles,
* card names, descriptions, capability bullets, input placeholders,
* etc. Scoped to .settings-page so other pages (artifacts cards,
* inbox article cards, dashboard captions) keep their italics.
* ════════════════════════════════════════════════════════════════════ */
.settings-page,
.settings-page *,
.settings-page *::placeholder,
.settings-page *::before,
.settings-page *::after { font-style: normal; }
/* ══════════════════════════════════════════════════════════════════════
* My Files (Library) page. Reuses `.artifacts-page` for the outer
* frame; adds a top-level Uploads / Artifacts switch and a file-row
* list layout for uploads.
* ════════════════════════════════════════════════════════════════════ */
#libraryPage .library-tab {
padding: 0;
margin: 0;
background: transparent;
border: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--text-tertiary);
cursor: pointer;
transition: color 0.15s ease;
display: inline-flex;
align-items: baseline;
gap: 6px;
position: relative;
}
#libraryPage .library-tab + .library-tab {
margin-left: 28px;
padding-left: 28px;
}
#libraryPage .library-tab + .library-tab::before {
content: '/';
position: absolute;
left: 0; top: 50%;
transform: translateY(-55%);
color: rgba(26, 15, 5, 0.18);
font-weight: 400;
}
#libraryPage .library-tab:hover { color: var(--text-primary); }
#libraryPage .library-tab.active { color: var(--text-primary); }
#libraryPage .library-tab.active::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -23px;
height: 2px;
background: var(--brand-gradient-rule);
border-radius: 2px;
}
#libraryPage .library-tab + .library-tab.active::after { left: 28px; }
#libraryPage .library-sub-tabs { margin-top: 10px; margin-bottom: 28px; }
.library-pane { width: 100%; }
.library-pane.hidden { display: none; }
.library-loading,
.library-error {
padding: 22px 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.library-error { color: #b03a2e; }
/* Card download overlay — appears on hover on each artifact/file card.
* Matches the muted catalogue aesthetic: tiny, top-right, fades in. */
.artifact-card-download {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(255, 253, 249, 0.94);
color: var(--text-secondary, #5a5040);
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.18s ease, transform 0.18s ease, background 0.12s ease, color 0.12s ease;
text-decoration: none;
box-shadow: 0 1px 4px rgba(26, 15, 5, 0.08), 0 0 0 1px rgba(26, 15, 5, 0.06);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.artifact-card:hover .artifact-card-download,
.artifact-card:focus-within .artifact-card-download {
opacity: 1;
transform: translateY(0);
}
.artifact-card-download:hover {
background: var(--accent, #1a0f05);
color: #fffdf9;
}
/* File-type plates for uploaded files (non-image): big serif ext label. */
.library-file-plate-ext {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(26,15,5,0.025), rgba(26,15,5,0.07));
color: var(--text-tertiary, #8a7f6d);
font-family: 'Playfair Display', 'Source Serif Pro', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 48px;
letter-spacing: 0.04em;
user-select: none;
}
.library-file-plate-ext span { opacity: 0.72; }
.library-file-plate-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* File-card size uses the same mono/italic meta styling as the chat
* label on artifact cards, but without the `FROM` prefix. */
.library-file-size {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-tertiary);
text-transform: uppercase;
font-style: normal;
}
/* ══════════════════════════════════════════════════════════════════════
* CREDITS TAB
* ══════════════════════════════════════════════════════════════════════ */
.credits-page {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 840px;
}
/* ── Section wrapper ─────────────────────────────────────────────────── */
.credits-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.credits-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.credits-section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
/* ── Credit pill ─────────────────────────────────────────────────────── */
.credits-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 100px;
border: 1px solid transparent;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.credits-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.credits-pill--ok {
background: #eefaf4;
border-color: #9ee4be;
color: #1a7a47;
}
.credits-pill--ok .credits-pill-dot { background: #2db870; }
.credits-pill--warn {
background: #fff8ec;
border-color: #f5d98b;
color: #8a5a00;
}
.credits-pill--warn .credits-pill-dot { background: #f0a500; }
.credits-pill--danger {
background: #fff2f2;
border-color: #f5aaaa;
color: #8a1a1a;
}
.credits-pill--danger .credits-pill-dot { background: #e03030; }
/* ── Stats grid ──────────────────────────────────────────────────────── */
.credits-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.credits-stat-card {
background: var(--bg-cream);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.credits-stat-value {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.1;
letter-spacing: -0.02em;
}
.credits-stat-value--muted { color: var(--text-tertiary); }
.credits-stat-value--small {
font-size: 13px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
letter-spacing: 0;
}
.credits-stat-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
}
/* ── Progress bar ────────────────────────────────────────────────────── */
.credits-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.credits-bar-track {
position: relative;
height: 6px;
background: var(--border-light);
border-radius: 100px;
overflow: hidden;
display: flex;
}
.credits-bar-fill {
height: 100%;
background: var(--text-primary);
border-radius: 100px 0 0 100px;
transition: width 0.5s ease;
}
.credits-bar-reserved {
height: 100%;
background: var(--text-tertiary);
transition: width 0.5s ease;
}
.credits-bar-labels {
display: flex;
justify-content: space-between;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
color: var(--text-tertiary);
}
/* ── Tier badge ──────────────────────────────────────────────────────── */
.credits-tier-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
background: var(--bg-cream);
border: 1px solid var(--border-light);
color: var(--text-secondary);
}
.credits-tier-badge--pro {
background: #eef2ff;
border-color: #c7d2fe;
color: #3730a3;
}
.credits-tier-badge--team {
background: #fdf4ff;
border-color: #e9d5ff;
color: #6b21a8;
}
.credits-tier-badge--free {
background: var(--bg-cream);
color: var(--text-secondary);
}
/* ── Limits grid ─────────────────────────────────────────────────────── */
.credits-limits-grid {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
}
.credits-limit-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
}
.credits-limit-row:last-child { border-bottom: none; }
.credits-limit-label { color: var(--text-secondary); }
.credits-limit-value {
color: var(--text-primary);
font-weight: 500;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
}
.credits-limits-loading {
padding: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
color: var(--text-tertiary);
}
/* ── Transactions list ───────────────────────────────────────────────── */
.credits-txn-list {
display: flex;
flex-direction: column;
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
}
.credits-txn-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
gap: 12px;
}
.credits-txn-row:last-child { border-bottom: none; }
.credits-txn-row:hover { background: var(--bg-cream); }
.credits-txn-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.credits-txn-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.credits-txn-type {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--bg-cream);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.credits-txn-type--debit { background: #fff2f2; border-color: #f5c6c6; color: #8a1a1a; }
.credits-txn-type--grant { background: #eefaf4; border-color: #9ee4be; color: #1a7a47; }
.credits-txn-type--refund { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.credits-txn-type--reserve { background: #fff8ec; border-color: #f5d98b; color: #8a5a00; }
.credits-txn-model {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.credits-txn-amount {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 600;
min-width: 60px;
text-align: right;
}
.credits-txn-amount--debit { color: var(--text-primary); }
.credits-txn-amount--credit { color: #1a7a47; }
.credits-txn-balance {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--text-tertiary);
min-width: 72px;
text-align: right;
}
.credits-txn-time {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
color: var(--text-tertiary);
min-width: 48px;
text-align: right;
}
.credits-txn-empty {
padding: 24px;
text-align: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
color: var(--text-tertiary);
}
/* ── Refresh button ──────────────────────────────────────────────────── */
.credits-refresh-btn {
background: none;
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 4px 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.credits-refresh-btn:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
/* ── Config note ─────────────────────────────────────────────────────── */
.credits-config-note {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
color: var(--text-tertiary);
}
/* ── Model rates table ───────────────────────────────────────────────── */
.credits-config-table-wrap {
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
}
.credits-config-table {
width: 100%;
border-collapse: collapse;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
}
.credits-config-table thead th {
background: var(--bg-cream);
padding: 10px 14px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid var(--border-light);
}
.credits-config-th--right { text-align: right; }
.credits-config-table tbody tr {
border-bottom: 1px solid var(--border-light);
transition: background 0.1s;
}
.credits-config-table tbody tr:last-child { border-bottom: none; }
.credits-config-table tbody tr:hover { background: var(--bg-cream); }
.credits-config-table tbody td { padding: 10px 14px; color: var(--text-primary); }
.credits-config-model {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
}
.credits-config-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
text-align: right;
color: var(--text-primary);
}
.credits-config-tier {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--bg-cream);
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.credits-config-tier--basic { background: #f0fdf4; border-color: #86efac; color: #166534; }
.credits-config-tier--standard { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.credits-config-tier--premium { background: #fdf4ff; border-color: #d8b4fe; color: #6b21a8; }
/* ── Admin: all-users credits table ───────────────────────────────────── */
.credits-admin-controls {
display: flex;
gap: 8px;
align-items: center;
}
.credits-admin-input {
padding: 6px 10px;
font-size: 13px;
border: 1px solid var(--border-primary);
border-radius: 6px;
background: var(--surface-primary);
color: var(--text-primary);
}
.credits-admin-summary {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.credits-admin-wrap { overflow-x: auto; }
.credits-admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.credits-admin-table th,
.credits-admin-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-primary);
text-align: left;
vertical-align: middle;
}
.credits-admin-table th {
font-weight: 600;
font-size: 12px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.credits-admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.credits-admin-num--muted { color: var(--text-tertiary); }
.credits-admin-uid {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.credits-admin-bar {
width: 100px;
height: 4px;
border-radius: 2px;
background: var(--surface-secondary, #eee);
overflow: hidden;
margin-left: auto;
}
.credits-admin-bar-fill { height: 100%; }
.credits-admin-bar-fill.credits-pill--ok { background: #10b981; }
.credits-admin-bar-fill.credits-pill--warn { background: #f59e0b; }
.credits-admin-bar-fill.credits-pill--danger { background: #ef4444; }
.credits-admin-bar-label {
font-size: 11px;
color: var(--text-tertiary);
text-align: right;
}
/* Tier badge becomes a |