/* Open Runde — served via jsDelivr from github.com/lauridskern/open-runde */
@font-face { font-family: 'Open Runde'; font-weight: 400; font-style: normal; font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Regular.woff') format('woff'); }
@font-face { font-family: 'Open Runde'; font-weight: 500; font-style: normal; font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Medium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Medium.woff') format('woff'); }
@font-face { font-family: 'Open Runde'; font-weight: 600; font-style: normal; font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Semibold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Semibold.woff') format('woff'); }
@font-face { font-family: 'Open Runde'; font-weight: 700; font-style: normal; font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Bold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Bold.woff') format('woff'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
/* Notebook paper canvas */
--bg: #f9f8f6;
--surface: #ffffff;
--surface2: #f4f3f1;
--surface3: #eceae8;
--border: rgba(175, 170, 162, 0.25);
--border-light: rgba(175, 170, 162, 0.15);
--text: #302e2b;
--text-dim: #524f4b;
--text-muted: #847e78;
--accent: #8b6f47;
--accent-hover: #9a7d54;
--accent-dim: rgba(139, 111, 71, 0.1);
--accent-contrast: #ffffff;
--link-color: #2563eb;
--green: #10b981;
--green-dim: rgba(16, 185, 129, 0.12);
--amber: #f59e0b;
--amber-dim: rgba(245, 158, 11, 0.1);
--warn-amber: #b8531a;
--red: #FF2D55;
--red-hover: #e0264a;
--red-dim: rgba(255, 45, 85, 0.1);
--purple: #7c3aed;
/* Channels only, so the selection layer injected into the draft iframe can
build its own alpha values from the same token this file uses. */
--purple-rgb: 124, 58, 237;
--purple-dim: rgba(124, 58, 237, 0.08);
--cyan: #0ea5e9;
--radius: 16px;
--radius-sm: 10px;
--mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
--sans: 'Open Runde', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--pane-split: 38%;
/* Semantic tokens */
--card-bg: #ffffff;
--bubble-bg: #ffffff;
--bubble-border: rgba(180, 170, 150, 0.2);
--bubble-shadow: 0px 1px 3px rgba(60, 50, 40, 0.06);
--code-color: var(--code-color);
--input-bg: #fffdf6;
--presence-bg: rgba(255, 255, 255, 0.95);
--presence-shadow: 0 2px 8px rgba(60, 50, 40, 0.08);
--preview-bg: #ffffff;
--logo-filter: none;
--fade-gradient: #ffffff;
/* Warm brown shadows instead of black */
--shadow-sm: 0 1px 3px rgba(60, 50, 40, 0.06);
--shadow-md: 2px 3px 12px rgba(60, 50, 40, 0.08);
--shadow-lg: 4px 6px 24px rgba(60, 50, 40, 0.1);
/* Highlighter colors */
--hl-yellow: rgba(250, 220, 50, 0.35);
--hl-pink: rgba(255, 140, 180, 0.3);
--hl-green: rgba(100, 220, 120, 0.3);
--hl-blue: rgba(100, 180, 255, 0.25);
/* Tape / physical elements */
--tape: rgba(255, 252, 235, 0.55);
--tape-shadow: rgba(60, 50, 40, 0.06);
--cream: #fffdf6;
--sticky: #fff8c5;
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* --hand already resolves: Kalam is loaded in production (public/index.html:10)
for the dashboard letter. No new font request needed. */
--hand: 'Kalam', cursive;
/* The note is a different sheet from the composer pad, so it gets its own
stock — a shade deeper than --cream. The card behind it is deeper again,
which is what reads as a second sheet rather than a drop shadow. */
--note-stock: #faf9f4; --note-stock-back: #f2f1ea;
/* VERIFIED MISSING FROM PROD 2026-07-31: styles.css defines --spring but not
--ease. Every transition below references var(--ease); with the token
undefined the whole declaration is invalid at computed-value time and the
card snaps open with no animation at all. This value already appears in
prod as a literal — it just never got a name. */
--ease: cubic-bezier(0.22,1,0.36,1);
/* Sidebar — cooler/lighter than canvas */
--sidebar-width: 240px;
--sidebar-collapsed: 56px;
--sidebar-bg: #f6f5f4;
--sidebar-border: rgba(170, 168, 165, 0.18);
--sidebar-hover: rgba(60, 56, 52, 0.05);
--sidebar-active: rgba(139, 111, 71, 0.08);
--sidebar-active-text: var(--text);
/* Manila folder tones — warm kraft objects on the desk (Pages folders) */
--manila: #e7d6b0;
--manila-edge: #d8c399;
--manila-open: #f4ecd8;
--manila-text: #6f6048;
/* Page thumbnail placeholder palette — muted earth/sage family (one brand reads
as a calm set, not a rainbow). JS picks a token by slug hash; values live here
per the theme-token contract. Keep the count in sync with _thumbColor. */
--thumb-1: #5f8a6e;
--thumb-2: #6b8f6a;
--thumb-3: #52806a;
--thumb-4: #778f5e;
--thumb-5: #8a8f5c;
--thumb-6: #9a8a5c;
--thumb-7: #8f7d54;
--thumb-8: #638a76;
--thumb-9: #5a8568;
--thumb-10: #728c64;
--thumb-11: #6d9472;
--thumb-12: #7a9568;
/* Notebook line colors — visible, not hidden */
--notebook-rule: rgba(165, 190, 215, 0.38);
--notebook-margin: rgba(220, 130, 130, 0.35);
}
/* ---- Custom tooltip (replaces native title) ---- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: #302e2b; color: #fff;
font-family: var(--sans); font-size: 11px; font-weight: 500;
padding: 5px 10px; border-radius: 6px; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 0.15s;
z-index: 1000;
}
[data-tooltip]:hover::after { opacity: 1; }
/* Dark mode removed — one world, done well. */
body {
font-family: var(--sans);
font-size: 15px;
background-color: var(--bg);
background-image:
linear-gradient(to right, transparent 59px, var(--notebook-margin) 59px, var(--notebook-margin) 60px, transparent 60px),
repeating-linear-gradient(to bottom, transparent, transparent 31px, var(--notebook-rule) 31px, var(--notebook-rule) 32px);
color: var(--text);
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
/* Paper fiber texture overlay */
body::after {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.035'/%3E%3C/svg%3E");
pointer-events: none;
mix-blend-mode: overlay;
z-index: 10000;
}
/* Main content area — right of sidebar */
.main-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
height: 100vh;
}
/* ---- TOP BAR — frosted glass shelf, notebook lines show through ---- */
.topbar {
height: 36px;
background: rgba(250, 249, 247, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(180, 170, 150, 0.18);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
flex-shrink: 0;
z-index: 10;
box-shadow: 0 1px 0 rgba(160, 155, 150, 0.10);
}
/* On non-chat pages the bar holds nothing, so collapse the empty strip. Desktop
only — on mobile (≤768px) the bar still hosts the hamburger menu. Toggled by
updateTopbar() in router.js. */
@media (min-width: 769px) {
.topbar.topbar-empty { display: none; }
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar .logo {
font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 10px;
color: var(--text-dim);
}
.topbar .logo img { height: 22px; width: auto; filter: var(--logo-filter); }
.topbar .model-badge {
font-size: 11px; padding: 3px 10px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 12px; color: var(--text-dim); font-family: var(--mono);
}
.topbar .lock-badge {
font-size: 11px; padding: 3px 8px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 12px; color: var(--accent); font-family: var(--mono);
cursor: help;
}
.persona-badge {
font-size: 12px; padding: 2px 8px 2px 3px;
background: none; border: none;
border-radius: 0; color: var(--text-dim); font-weight: 500;
font-family: var(--serif);
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.persona-badge .persona-thumb {
width: 20px; height: 20px; border-radius: 2px; object-fit: cover; flex-shrink: 0;
}
/* Photo upload in settings */
.photo-upload-area {
display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.photo-preview {
width: 56px; height: 56px; border-radius: 4px; overflow: hidden;
background: #fffdf6; border: 3px solid white;
box-shadow: 1px 2px 6px rgba(60, 50, 40, 0.12);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; cursor: pointer; transition: all 0.2s;
position: relative; transform: rotate(-1.5deg);
}
.photo-preview:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 2px 4px 12px rgba(60, 50, 40, 0.15); }
.photo-preview img {
width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
.photo-preview .photo-placeholder {
color: var(--text-muted); font-size: 10px; text-align: center; line-height: 1.3;
}
.photo-preview .photo-overlay {
position: absolute; inset: 0; background: rgba(0,0,0,0.5);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s; border-radius: 2px;
}
.photo-preview:hover .photo-overlay { opacity: 1; }
.photo-preview .photo-overlay svg { width: 18px; height: 18px; color: white; }
.photo-actions {
display: flex; flex-direction: column; gap: 4px;
}
.photo-actions button {
padding: 4px 10px; background: var(--surface3); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text-dim); font-size: 11px;
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.photo-actions button:hover { background: var(--surface2); color: var(--text); }
.photo-actions .remove-photo { border-color: rgba(255,45,85,0.3); color: var(--red); }
.photo-actions .remove-photo:hover { background: var(--red-dim); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.cost-display {
font-size: 12px; font-family: var(--mono); color: var(--green);
background: var(--green-dim); padding: 4px 10px; border-radius: 12px; font-weight: 600;
}
.topbar-btn {
padding: 6px 12px; background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text-dim); font-size: 12px;
cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px;
}
.topbar-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border-light); }
.topbar-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
/* Theme toggle */
.theme-toggle { padding: 6px 8px; display: flex; align-items: center; }
.theme-toggle.hidden { display: none !important; }
.logo .logo-dark { display: none; }
/* ---- SIDEBAR ---- */
.sidebar {
width: var(--sidebar-width);
height: 100vh;
position: fixed;
left: 0; top: 0; bottom: 0;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
z-index: 60;
flex-shrink: 0;
transition: width 0.2s ease;
overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); cursor: pointer; }
.sidebar-header {
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
gap: 10px;
overflow: hidden;
}
.sidebar-header .logo {
font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 10px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
}
.sidebar-header .logo img { height: 22px; width: auto; }
.sidebar-header .logo .logo-icon { display: none; }
.sidebar.collapsed .sidebar-header .logo .logo-full { display: none; }
.sidebar.collapsed .sidebar-header .logo .logo-icon { display: block; }
/* ---- Team Switcher ---- */
.team-switcher { padding: 8px 10px 0; position: relative; }
.team-switcher-btn {
width: 100%; display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--bg);
color: var(--text); font-size: 13px; font-weight: 500;
font-family: inherit; cursor: pointer; transition: all 0.15s; text-align: left;
}
.team-switcher-btn:hover { border-color: var(--accent); background: var(--surface2); }
.team-switcher-btn.open { border-color: var(--accent); }
.team-switcher-icon { flex-shrink: 0; color: var(--text-muted); }
.team-switcher-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-switcher-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; }
.team-switcher-btn.open .team-switcher-chevron { transform: rotate(180deg); }
.team-switcher-dropdown {
display: none; position: absolute; left: 10px; right: 10px; top: calc(100% + 4px);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); z-index: 80; padding: 4px;
max-height: 200px; overflow-y: auto;
}
.team-switcher-dropdown.open { display: block; }
.team-switcher-option {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; border: none; background: none; border-radius: 6px;
font-size: 13px; font-weight: 500; font-family: inherit;
color: var(--text-dim); cursor: pointer; transition: all 0.1s; text-align: left;
}
.team-switcher-option:hover { background: var(--sidebar-hover); color: var(--text); }
.team-switcher-option.active { background: var(--sidebar-active); color: var(--sidebar-active-text); font-weight: 600; }
.team-switcher-option .team-check { width: 16px; display: flex; justify-content: center; flex-shrink: 0; color: var(--accent); }
.sidebar.collapsed .team-switcher { display: none !important; }
.sidebar-nav {
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.sidebar-spacer { flex: 1; min-height: 0; }
/* The blank middle of the rail collapses it (see initSidebar), so it says so —
with the same double-chevron the collapse button draws, at the same 2px
stroke. One action, one mark: the gesture and the button are the same thing,
so pointing at them should look the same. White halo underneath keeps it
legible against the rail; `pointer` catches a browser that refuses the image.
`w-resize` was the other candidate and promises a drag we don't support.
Expanded only: collapsed, the rail already carries `pointer` for the opposite
action, and a ‹‹ over a click that expands would point the wrong way.
The advertised region is narrower than the click region on purpose — the gaps
between nav items also collapse, but nobody aims at a 2px gap. */
.sidebar:not(.collapsed) .sidebar-spacer {
cursor: url("data:image/svg+xml;utf8,") 12 12, pointer;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s, color 0.1s;
color: var(--text-dim);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.1px;
line-height: 20px;
font-family: var(--sans);
white-space: nowrap;
border: none;
background: none;
width: 100%;
text-align: left;
}
.sidebar-nav-item:hover { background: var(--sidebar-hover); color: var(--text); }
.sidebar-nav-item.active { background: rgba(139, 111, 71, 0.08); color: var(--text); font-weight: 600; }
.sidebar-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; transition: color 0.1s; }
/* Duotone on touch. At rest the nav is one tone — plain outlines, nothing
competing with the content for attention. The mass only fills in when a row is
hovered or is where you are, so the fill is a STATE rather than decoration: it
answers "am I on this" instead of just sitting there.
Warm duotone (prototype column B) kept the mass on permanently. It read well,
but six filled icons at rest is a lot of furniture for a rail you are mostly
not looking at — and it spent the fill, so hover and active had only opacity
steps left to distinguish themselves with.
The mass is the brown accent, not currentColor: hover and active take the row
colour to --text, and a near-black fill lands as a cold grey slab on a warm
surface. The stroke stays neutral and keeps following the row, so the two
layers carry different jobs — mass is warmth, stroke is legibility.
Active fills deeper than hover, which is the only place the nav says "you are
here" without the label (the collapsed 56px rail has no label to read). */
.sidebar-nav-item svg .duo-mass {
fill: var(--accent);
fill-opacity: 0;
transition: fill-opacity 0.1s;
}
.sidebar-nav-item:hover svg .duo-mass { fill-opacity: 0.28; }
.sidebar-nav-item.active svg .duo-mass { fill-opacity: 0.36; }
.sidebar-nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 10px; }
/* Start fresh — warm green, inviting. It carries the same .duo-mass/.duo-line
layers as the rest of the nav so the markup is one pattern, but its mass stays
SOLID: it is the only primary action here, and a 30% wash would demote it to
just another destination. The plus is white on the filled blob rather than
currentColor, which at full green would be invisible.
The ID beats the shared hover/active opacity steps, so the blob holds its
weight in every state. */
#nav-chat { color: var(--green); }
#nav-chat svg .duo-mass { fill: var(--green); fill-opacity: 1; }
#nav-chat svg .duo-line { stroke: #fff; }
#nav-chat:hover { background: var(--sidebar-hover); }
#nav-chat.active { color: var(--green); background: rgba(16, 185, 129, 0.08); }
.sidebar-section-header {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-muted);
padding: 20px 12px 6px;
white-space: nowrap;
}
.sidebar.collapsed .sidebar-section-header { display: none; }
/* ---- Ongoing Chat card ---- */
.ongoing-chat {
margin: 4px 8px 0;
padding: 12px 14px;
background: var(--card-bg);
border: none;
border-radius: 6px;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.ongoing-chat:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.ongoing-chat-header {
display: flex; align-items: center; gap: 6px;
margin-bottom: 6px;
}
.ongoing-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green), 0 0 12px rgba(16, 185, 129, 0.3);
animation: ongoingPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ongoingPulse {
0%, 100% { box-shadow: 0 0 6px var(--green), 0 0 12px rgba(16, 185, 129, 0.3); }
50% { box-shadow: 0 0 8px var(--green), 0 0 20px rgba(16, 185, 129, 0.4); }
}
.ongoing-label {
font-size: 12px; font-weight: 500; color: var(--green);
letter-spacing: -0.1px; flex: 1;
}
.ongoing-edit-icon {
color: var(--text-muted); opacity: 0.5;
transition: opacity 0.15s; cursor: pointer;
}
.ongoing-chat:hover .ongoing-edit-icon { opacity: 1; }
.ongoing-edit-icon:hover { color: var(--accent) !important; }
.ongoing-share-icon {
width: 24px; height: 24px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 6px; background: transparent;
color: var(--text-muted); cursor: pointer; opacity: 0.5;
transition: opacity 0.15s, transform 0.3s var(--spring), box-shadow 0.3s;
}
.ongoing-chat:hover .ongoing-share-icon,
.ongoing-chat.is-shared .ongoing-share-icon,
.ongoing-share-icon:focus-visible { opacity: 1; }
.ongoing-share-icon:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.ongoing-shared-badge {
display: inline-flex;
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ongoing-share-icon[hidden],
.ongoing-shared-badge[hidden] { display: none; }
.ongoing-chat-title {
font-size: 14px; font-weight: 600; color: var(--text);
line-height: 1.3; overflow: hidden;
display: -webkit-box; line-clamp: 2; -webkit-box-orient: vertical;
}
.sidebar.collapsed .ongoing-chat { display: none !important; }
.sidebar-footer {
padding: 8px;
border-top: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar-collapse-btn {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--radius-sm);
cursor: pointer; color: var(--text-muted); font-size: 12px;
background: none; border: none; width: 100%; font-family: inherit;
transition: background 0.1s;
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover); color: var(--text-dim); }
.sidebar-collapse-btn svg {
width: 18px; height: 18px; flex-shrink: 0;
stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: transform 0.2s;
}
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-collapse-btn .nav-label { display: none; }
.sidebar.collapsed .sidebar-collapse-btn { justify-content: center; padding: 10px; }
/* ---- PAGE CONTAINERS ---- */
.page { display: none; flex: 1; overflow: hidden; }
.page.active { display: flex; }
/* FOUC prevention — data-init-page set synchronously by inline script before first paint */
html[data-init-page="history"] #page-chat,
html[data-init-page="knowledge"] #page-chat,
html[data-init-page="pages"] #page-chat,
html[data-init-page="console"] #page-chat,
html[data-init-page="meta-ads"] #page-chat { display: none; }
html[data-init-page="history"] #page-history,
html[data-init-page="knowledge"] #page-knowledge,
html[data-init-page="pages"] #page-pages,
html[data-init-page="console"] #page-console,
html[data-init-page="meta-ads"] #page-meta-ads { display: flex; }
.page-chat { flex-direction: column; position: relative; }
.chat-panes { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
.page-history { flex-direction: column; background: var(--bg); }
.page-knowledge { flex-direction: column; background: var(--bg); overflow-y: auto; }
/* Pages view = flat workspace panel matched to the side panel (--sidebar-bg),
not the ruled notebook desk. */
.page-pages { flex-direction: column; background: var(--sidebar-bg); overflow-y: auto; }
/* The pages view renders its own header/controls, so the shared topbar is empty
there. Hide it on desktop to reclaim the dead band above "Your Pages". On mobile
the topbar still carries the hamburger (sidebar toggle), so only suppress it at
desktop widths. */
@media (min-width: 769px) {
#main-container:has(> #page-pages.active) > #topbar { display: none; }
}
/* ---- SHOPIFY CONNECTION (Console) ---- */
.shopify-console-panel { max-width: 820px; }
.shopify-console-header { align-items: flex-start; margin-bottom: 18px; }
.shopify-console-header .console-section-desc { margin: 5px 0 0; max-width: 680px; }
.connection-card { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.connection-card-brand { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: var(--green); color: var(--surface); font-family: var(--serif); font-size: 30px; font-weight: 700; }
.connection-card-main { min-width: 0; }
.connection-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.connection-card-title-row h2 { color: var(--text); font-size: 20px; margin-bottom: 4px; }
.connection-card-title-row p { color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.connection-badge { flex-shrink: 0; padding: 5px 9px; border-radius: 999px; background: var(--surface2); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.connection-badge[data-state="connected"] { background: var(--green-dim); color: var(--green); }
.connection-badge[data-state="warning"] { background: var(--amber-dim); color: var(--warn-amber); }
.connection-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.connection-details[hidden], .connection-form[hidden], .connection-actions[hidden] { display: none; }
.connection-details > div { min-width: 0; padding: 12px; background: var(--surface2); border-radius: var(--radius-sm); }
.connection-details span { display: block; color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
.connection-details strong { display: block; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-form { margin-top: 22px; }
.connection-form > label { display: block; color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.connection-form-row { display: flex; gap: 8px; }
.connection-form-row input { flex: 1; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); font: inherit; }
.connection-form-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.connection-primary-btn, .connection-secondary-btn, .connection-danger-btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); font: 700 13px var(--sans); cursor: pointer; transition: transform 150ms ease-out, opacity 150ms ease-out; }
.connection-primary-btn { border: 0; background: var(--text); color: var(--surface); }
.connection-secondary-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.connection-danger-btn { border: 1px solid var(--red); background: var(--surface); color: var(--red); }
.connection-primary-btn:active, .connection-secondary-btn:active, .connection-danger-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.connection-primary-btn:hover, .connection-secondary-btn:hover, .connection-danger-btn:hover { transform: translateY(-1px); }
}
.connection-primary-btn:disabled, .connection-secondary-btn:disabled, .connection-danger-btn:disabled { cursor: wait; opacity: .55; transform: none; }
.connection-help { color: var(--text-muted); font-size: 12px; line-height: 1.45; margin-top: 8px; }
.connection-permission-note { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); }
.connection-actions { display: flex; gap: 8px; margin-top: 20px; }
.shopify-safety-note { display: flex; gap: 8px; margin: 18px 8px 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.shopify-safety-note strong { flex-shrink: 0; color: var(--text-dim); }
@media (max-width: 620px) {
.connection-card { grid-template-columns: 44px 1fr; padding: 18px; gap: 12px; }
.connection-card-brand { width: 44px; height: 44px; border-radius: 11px; font-size: 24px; }
.connection-card-title-row { flex-direction: column; gap: 10px; }
.connection-details { grid-template-columns: 1fr; }
.connection-form-row { flex-direction: column; }
.shopify-safety-note { align-items: flex-start; flex-direction: column; }
}
/* ---- HISTORY PAGE ---- */
/* ---- History toolbar: filters + search ---- */
.history-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 24px 0; flex-shrink: 0;
max-width: 760px; margin-left: auto; margin-right: auto; width: 100%;
box-sizing: content-box;
}
.history-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.history-filter {
padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
background: var(--surface); color: var(--text-dim); font-size: 13px;
font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.history-filter:hover { border-color: rgba(139, 111, 71, 0.3); color: var(--text); }
.history-filter.active {
background: #8b6f47; color: white; border-color: #8b6f47;
}
.history-search-bar {
display: flex; align-items: center; gap: 8px; position: relative;
}
.history-search-icon {
position: absolute; left: 12px; color: var(--text-muted); pointer-events: none;
}
.history-search-input {
padding: 7px 14px 7px 36px; border-radius: 20px; border: 1px solid var(--border);
background: var(--surface); color: var(--text); font-size: 13px;
font-family: inherit; outline: none; transition: border-color 0.15s;
width: 200px;
}
.history-search-input::placeholder { color: var(--text-muted); }
.history-search-input:focus { border-color: var(--accent); width: 260px; }
.history-toolbar-right { display: flex; align-items: center; gap: 6px; }
.history-action-btn {
width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface); color: var(--text-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.12s; padding: 0; flex-shrink: 0;
}
.history-action-btn:hover { color: var(--text); border-color: var(--text-muted); }
.history-action-btn.history-action-danger:hover { color: var(--error, #ef4444); border-color: var(--error, #ef4444); }
/* ---- History cards ---- */
.history-page-body { flex: 1; overflow-y: auto; padding: 12px 24px 24px; }
.history-page-body-inner { max-width: 760px; margin: 0 auto; width: 100%; }
.history-card {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-radius: 0;
border: none; position: relative;
background: transparent;
cursor: pointer;
border-bottom: 1px solid var(--border-light, var(--border));
}
/* Animated warm bar — grows from nub to full height */
.history-card::before {
content: ''; position: absolute; left: 0; top: 50%;
width: 3px; height: 8px; border-radius: 0 3px 3px 0;
background: rgba(139, 111, 71, 0.5); opacity: 0;
transform: translateY(-50%);
transition: height 0.2s ease-out, opacity 0.15s ease-out;
}
.history-card:hover::before { height: 100%; opacity: 1; }
/* Left icon — subtle, no circle */
.hc-icon {
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease-out;
}
.history-card:hover .hc-icon { transform: translateX(4px); }
.hc-icon-doc { color: #8b6f47; opacity: 0.7; }
.hc-icon-chat { color: var(--text-muted); opacity: 0.7; }
.history-card .hc-body {
flex: 1; min-width: 0;
transition: transform 0.3s ease-out;
}
.history-card:hover .hc-body { transform: translateX(4px); }
.history-card .hc-title {
font-size: 14px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 2px;
}
.hc-shared-badge {
display: inline-flex;
margin-left: 7px;
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: 1px;
}
.history-card .hc-subtitle {
font-size: 12px; color: var(--text-muted); margin-bottom: 2px;
}
.hc-byline { color: var(--text-dim); }
/* Attachment indicator (inline with subtitle) */
.hc-attachments {
display: inline-flex; align-items: center; gap: 3px;
font-size: 12px; color: var(--text-muted);
}
.hc-attachments svg { flex-shrink: 0; opacity: 0.6; position: relative; top: 1px; }
/* Delete action button — fades in on hover */
.hc-actions {
opacity: 0; transition: opacity 0.15s ease-out;
margin-left: auto; flex-shrink: 0;
display: flex; align-items: center; gap: 4px;
}
.history-card:hover .hc-actions { opacity: 1; }
.hc-action-btn {
width: 28px; height: 28px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
color: var(--text-muted); cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: all 0.12s;
}
.hc-action-btn:hover { color: var(--text); border-color: var(--text-muted); }
.hc-action-btn.hc-share:hover {
transform: translateY(-2px);
color: var(--text-muted);
border-color: var(--border);
box-shadow: var(--shadow-sm);
}
.hc-action-btn.hc-share.is-shared { color: var(--accent); }
.hc-action-btn.hc-share:disabled {
cursor: wait;
opacity: 0.6;
transform: none;
}
/* One durable owner-facing sharing surface, anchored from chat or History. */
.chat-share-panel {
position: fixed;
z-index: 15000;
width: min(380px, calc(100vw - 24px));
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--cream);
box-shadow: var(--shadow-lg);
}
.chat-share-panel[hidden] { display: none; }
.chat-share-heading {
margin: 0 0 5px;
color: var(--text);
font: 600 19px/1.25 var(--serif);
}
.chat-share-summary,
.chat-share-consequence {
color: var(--text-muted);
font-size: 13px;
line-height: 1.5;
}
.chat-share-consequence {
margin-top: 16px;
color: var(--text-dim);
}
.chat-share-consequence[hidden] { display: none; }
.chat-share-link-row {
display: flex;
gap: 8px;
margin-top: 17px;
}
.chat-share-link-row[hidden] { display: none; }
.chat-share-link {
flex: 1;
min-width: 0;
height: 38px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text-dim);
font: 12px var(--mono);
}
.chat-share-link:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.chat-share-copy,
.chat-share-primary {
border: 0;
border-radius: 8px;
background: var(--accent);
color: var(--accent-contrast);
font: 600 13px var(--sans);
cursor: pointer;
transition: transform 0.3s var(--spring), box-shadow 0.3s, opacity 0.15s;
}
.chat-share-copy { padding: 0 14px; }
.chat-share-primary {
min-height: 40px;
margin-top: 18px;
padding: 0 16px;
}
.chat-share-copy:hover,
.chat-share-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.chat-share-copy:disabled,
.chat-share-primary:disabled,
.chat-share-stop:disabled {
cursor: wait;
opacity: 0.55;
transform: none;
}
.chat-share-stop {
margin-top: 17px;
border: 0;
background: transparent;
color: var(--text-muted);
font: 500 13px var(--sans);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.chat-share-stop[hidden] { display: none; }
.chat-share-stop:hover { color: var(--text); }
.chat-share-copy-status {
min-height: 17px;
margin-top: 5px;
color: var(--text-muted);
font-size: 11px;
}
.hc-action-btn.hc-rename:hover { color: #8b6f47; border-color: rgba(139, 111, 71, 0.4); }
.hc-action-btn.hc-delete:hover { color: var(--error, #ef4444); border-color: var(--error, #ef4444); }
/* Inline rename input (history cards + ongoing chat) */
.hc-title-input {
font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
background: var(--input-bg); border: 1px solid var(--accent);
border-radius: 6px; padding: 2px 8px; width: 100%;
outline: none; line-height: 1.4;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08);
}
/* Admin-only metadata (hidden unless admin mode) */
.hc-admin-meta {
display: none; margin-top: 4px;
font-size: 11px; font-family: var(--mono); color: var(--text-muted);
}
body.admin-mode .hc-admin-meta { display: block; }
.history-empty {
text-align: center; color: var(--text-muted); font-size: 14px;
padding: 64px 32px;
}
.history-load-error {
display: grid;
justify-items: center;
gap: 12px;
}
.history-retry,
.board-recents-retry {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
padding: 7px 12px;
font: inherit;
cursor: pointer;
box-shadow: 0 2px 0 var(--border);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.history-retry:hover,
.board-recents-retry:hover {
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--border);
}
.history-retry:disabled,
.board-recents-retry:disabled {
cursor: wait;
opacity: 0.65;
}
/* ---- KNOWLEDGE BASE PAGE ---- */
/* Edge to edge, like .pages-page-body and .gallery-inner. This was the only one
of the three file surfaces with a 1200px cap, which cost the column view a
whole column's worth of width on a 27" display and made Your Files look like
a different application from Pages and Gallery. Padding matches theirs too,
so the title, the cards and the column heads all share one left edge. */
.knowledge-page-body { padding: 20px 12px 24px 16px; width: 100%; }
/* Page header: no rules of its own. It wears .pages-page-header /
.pages-page-title / .pages-view-toggle, so "Your Files" is the same 19px on
the same 16/14 padding over the same --sidebar-bg as "Pages" and "Gallery",
and the view pills are the same 34x28 with the same white cap when selected.
These used to be a private set of .kb-* rules that had quietly drifted to
18px, a 16px-radius bordered strip, and 36x32 pills — no decision, just age.
`.kb-page-header` and `.kb-view-toggle` remain as JS hooks and carry nothing.
The upload CTA wears .btn-build, the same hero button as "New page" and
"Create an asset" — gradient, inset highlight, and the lift-off-the-desk
hover the design philosophy asks for. `.kb-upload-btn` survives as the JS
hook only; it carries no styling of its own, so the three CTAs cannot drift
apart the way they did when this one was a flat --accent rectangle with an
opacity hover. */
/* Upload modal */
.kb-upload-modal {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s;
}
.kb-upload-modal.visible { opacity: 1; }
.kb-upload-modal-backdrop {
position: absolute; inset: 0; background: rgba(0,0,0,0.4);
}
.kb-upload-modal-content {
position: relative; background: var(--surface);
border-radius: var(--radius-lg, 12px); padding: 28px;
width: 90%; max-width: 600px; box-shadow: 0 12px 40px rgba(0,0,0,0.15);
transform: translateY(8px); transition: transform 0.2s;
}
.kb-upload-modal.visible .kb-upload-modal-content { transform: translateY(0); }
.kb-upload-modal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.kb-upload-modal-header h3 {
font-size: 16px; font-weight: 600; color: var(--text); margin: 0;
}
.kb-upload-modal-close {
background: none; border: none; cursor: pointer;
color: var(--text-muted); padding: 4px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.kb-upload-modal-close:hover { background: var(--surface2); }
/* Upload zone (now inside modal) */
.kb-upload-zone {
border: 2px dashed var(--border-light); border-radius: var(--radius);
padding: 80px 32px; text-align: center; cursor: pointer;
transition: all 0.15s; background: var(--surface);
}
.kb-upload-zone:hover, .kb-upload-zone.drag-over {
border-color: var(--accent); background: var(--surface2);
}
.kb-upload-zone.drag-over { border-style: solid; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); }
.kb-upload-inner svg { color: var(--text-muted); margin-bottom: 8px; }
.kb-upload-inner p { color: var(--text-dim); font-size: 14px; margin: 4px 0; }
.kb-upload-hint { font-size: 12px !important; color: var(--text-muted) !important; }
/* Forms inside upload modal */
.kb-upload-modal-forms .kb-desc-form,
.kb-upload-modal-forms .kb-paste-form {
margin-top: 16px;
}
/* PDF parsing state */
.kb-upload-parsing {
text-align: center;
padding: 24px 16px;
color: var(--text-dim);
font-size: 14px;
line-height: 1.5;
}
.kb-upload-parsing strong { color: var(--text); }
.kb-upload-parsing-spinner {
width: 24px; height: 24px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
margin: 0 auto 12px;
animation: spin 0.8s linear infinite;
}
/* Fade-in animation for new cards */
.kb-fade-in {
animation: kbFadeIn 0.4s ease-out;
}
@keyframes kbFadeIn {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
.kb-section { margin-bottom: 24px; }
.kb-section-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
}
/* ---- Category sections ---- */
.kb-category-section { margin-bottom: 28px; }
.kb-category-header {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
cursor: pointer; user-select: none; border-radius: 6px;
padding: 4px 6px; margin-left: -6px; margin-right: -6px;
transition: background 0.15s;
}
.kb-category-header:hover { background: var(--surface2); }
.kb-category-chevron {
margin-left: auto; color: var(--text-muted);
transition: transform 0.2s ease;
}
.kb-category-section.collapsed .kb-category-chevron {
transform: rotate(-90deg);
}
.kb-category-collapse {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.25s ease;
}
.kb-category-section.collapsed .kb-category-collapse {
grid-template-rows: 0fr;
}
.kb-category-collapse-inner {
overflow: hidden;
}
.kb-category-icon { font-size: 18px; line-height: 1; }
.kb-category-label {
font-size: 14px; font-weight: 600; color: var(--text);
}
.kb-category-count {
font-size: 11px; font-weight: 600; color: var(--text-muted);
background: var(--surface2); padding: 1px 8px;
border-radius: 10px; min-width: 20px; text-align: center;
}
.kb-category-hint {
font-size: 12px; color: var(--text-muted); margin: 0 0 12px 0;
line-height: 1.4;
}
/* ---- Card grid (visual workspace) ---- */
.kb-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.kb-card {
display: flex; flex-direction: column;
padding: 18px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface);
cursor: pointer; transition: all 0.2s; position: relative;
min-height: 100px;
}
.kb-card:hover {
border-color: var(--accent); background: var(--surface2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
/* Category accent borders on hover */
.kb-card-brand:hover { border-color: #8b5cf6; }
.kb-card-product:hover { border-color: #10b981; }
.kb-card-audience:hover { border-color: #3b82f6; }
.kb-card-content:hover { border-color: #ec4899; }
.kb-card-playbook:hover { border-color: #f59e0b; }
.kb-card-icon { font-size: 24px; line-height: 1; margin-bottom: 10px; }
.kb-card-icon-emoji { font-size: 24px; }
.kb-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-card-name {
font-size: 14px; font-weight: 600; color: var(--text);
line-height: 1.3; margin-bottom: 6px;
}
.kb-card-desc {
font-size: 12px; color: var(--text-dim); line-height: 1.4;
display: -webkit-box; line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; margin-bottom: 10px;
}
.kb-card-tags {
display: flex; flex-wrap: nowrap; gap: 4px;
overflow: hidden; position: relative; margin-bottom: 12px;
-webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.kb-card-tags .kb-tag { flex-shrink: 0; }
.kb-tag {
font-size: 10px; font-weight: 500; color: var(--text-muted);
background: var(--surface2); padding: 2px 8px;
border-radius: 8px; letter-spacing: 0.02em;
}
.kb-card-meta {
font-size: 11px; color: var(--text-muted); margin-top: auto;
display: flex; align-items: center; gap: 6px;
padding-top: 8px;
}
.kb-meta-memorized {
color: var(--accent-orange, #c75900);
font-weight: 600;
}
.kb-badge-team,
.kb-badge-personal,
.kb-badge-new {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 600; padding: 1px 7px;
border-radius: 10px; letter-spacing: 0.02em;
}
.kb-badge-team { color: var(--accent); background: var(--sidebar-active); }
.kb-badge-personal { color: var(--text-muted); background: var(--surface2); }
.kb-badge-new { color: #16a34a; background: #dcfce7; }
.kb-card-delete {
position: absolute; top: 8px; right: 8px;
background: none; border: none; color: var(--text-muted);
font-size: 16px; cursor: pointer; padding: 4px 6px;
border-radius: 4px; transition: all 0.15s; line-height: 1;
opacity: 0;
}
.kb-card:hover .kb-card-delete { opacity: 1; }
.kb-card-delete:hover { color: var(--red); background: var(--red-dim); }
/* Refinement form (post-upload review panel) */
.kb-refine-form {
padding: 18px 20px;
border-top: 1px solid var(--border-light);
background: var(--surface);
}
.kb-refine-header { margin-bottom: 14px; }
.kb-refine-header h4 {
margin: 0 0 4px 0; font-size: 14px; font-weight: 600;
}
.kb-refine-hint {
margin: 0; font-size: 12px; color: var(--text-muted);
line-height: 1.4;
}
.kb-refine-rows {
display: flex; flex-direction: column; gap: 12px;
margin-bottom: 16px;
max-height: 340px; overflow-y: auto;
}
.kb-refine-row {
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 12px;
background: var(--surface2);
}
.kb-refine-filename {
font-size: 12px; font-weight: 600; color: var(--text);
margin-bottom: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kb-refine-field {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 10px;
}
.kb-refine-label-text {
font-size: 11px; font-weight: 500; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.kb-refine-desc {
width: 100%; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--surface); color: var(--text);
font-size: 13px; font-family: inherit;
box-sizing: border-box;
resize: vertical; min-height: 44px; line-height: 1.4;
}
.kb-refine-desc:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--sidebar-active);
}
.kb-refine-error, .console-refine-error, .console-paste-error {
margin: 10px 0;
padding: 8px 12px;
font-size: 12.5px;
color: #a04040;
background: #fdf2f2;
border: 1px solid #f2c4c4;
border-radius: 6px;
}
.kb-refine-pin {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
cursor: pointer; user-select: none;
font-size: 13px;
}
.kb-refine-pin input[type="checkbox"] {
margin: 0; cursor: pointer;
}
.kb-refine-pin-label { font-weight: 500; }
.kb-refine-pin-hint {
font-size: 11px; color: var(--text-muted);
flex-basis: 100%; margin-left: 22px;
}
/* ---- List view overrides ---- */
.kb-list-view .kb-card-grid {
display: grid;
/* icon | name | desc | tags | meta | delete */
grid-template-columns: 28px minmax(140px, 200px) 1fr minmax(100px, 180px) auto 28px;
column-gap: 16px; row-gap: 0;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 12px);
overflow: hidden;
}
.kb-list-view .kb-card {
display: grid; grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: 10px 14px; min-height: auto;
border-radius: 0; border: none;
border-bottom: 1px solid var(--border-light);
}
.kb-list-view .kb-card:last-child { border-bottom: none; }
.kb-list-view .kb-card:hover {
transform: none; border-color: var(--border-light);
background: var(--surface2); box-shadow: none;
}
.kb-list-view .kb-card-icon {
font-size: 16px; margin-bottom: 0; line-height: 1;
}
.kb-list-view .kb-card-icon-emoji { font-size: 16px; }
.kb-list-view .kb-card-body {
display: contents;
}
.kb-list-view .kb-card-name {
font-size: 13px; margin-bottom: 0; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.kb-list-view .kb-card-desc {
font-size: 12px; margin-bottom: 0;
line-clamp: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-list-view .kb-card-tags {
margin-bottom: 0; max-width: 180px;
}
.kb-list-view .kb-card-meta {
margin-top: 0; padding-top: 0; white-space: nowrap;
font-size: 11px;
}
.kb-list-view .kb-card-delete {
position: static; opacity: 0;
padding: 2px 4px; justify-self: end;
}
.kb-list-view .kb-card:hover .kb-card-delete { opacity: 1; }
.kb-list-view .kb-card-rename-icon { display: none; }
/* Hide accent borders in list view — rows use bottom border */
.kb-list-view .kb-card-brand:hover,
.kb-list-view .kb-card-product:hover,
.kb-list-view .kb-card-audience:hover,
.kb-list-view .kb-card-content:hover,
.kb-list-view .kb-card-playbook:hover { border-color: var(--border-light); }
/* Preview modal enhancements */
.kb-preview-meta {
font-size: 12px; color: var(--text-muted); margin-top: 8px;
}
.kb-preview-tags {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
align-items: center;
}
.kb-tags-overflow { display: none; }
.kb-tags-overflow .kb-tag { margin: 0; }
.kb-tags-toggle {
background: none; border: none; color: var(--accent);
font-size: 11px; font-weight: 500; cursor: pointer;
padding: 2px 6px;
}
.kb-tags-toggle:hover { text-decoration: underline; }
@media (max-width: 600px) {
.kb-card-grid {
grid-template-columns: 1fr;
}
}
/* Paste button in upload zone */
.kb-paste-btn {
background: none; border: none; color: var(--accent); font-size: 13px;
cursor: pointer; padding: 4px 8px; margin-top: 4px;
text-decoration: underline; text-underline-offset: 2px;
}
.kb-paste-btn:hover { opacity: 0.8; }
/* Paste form */
.kb-paste-form {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.kb-paste-textarea {
width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); color: var(--text); resize: vertical;
outline: none; transition: border-color 0.15s; min-height: 120px;
margin-bottom: 4px;
}
.kb-paste-textarea:focus { border-color: var(--accent); }
.kb-paste-form .kb-desc-label { margin-top: 12px; }
.kb-paste-form .kb-desc-label:first-child { margin-top: 0; }
.kb-input-error { border-color: var(--red) !important; }
/* Rename icon on cards */
.kb-card-rename-icon {
font-size: 12px; margin-left: 6px; opacity: 0; cursor: pointer;
transition: opacity 0.15s;
}
.kb-card:hover .kb-card-rename-icon { opacity: 0.5; }
.kb-card-rename-icon:hover { opacity: 1 !important; }
/* Rename inline input */
.kb-card-rename-input {
width: 100%; padding: 2px 6px; font-size: 13px; font-weight: 600;
border: 1px solid var(--accent); border-radius: 4px;
background: var(--bg); color: var(--text); outline: none;
font-family: inherit;
}
.kb-desc-form {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.kb-desc-form-header { margin-bottom: 8px; }
.kb-desc-form-files {
font-size: 13px; font-weight: 500; color: var(--text);
}
.kb-desc-label {
display: block; font-size: 13px; color: var(--text-muted);
margin-bottom: 6px;
}
.kb-desc-input {
width: 100%; padding: 8px 12px; font-size: 14px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); color: var(--text);
outline: none; transition: border-color 0.15s;
}
.kb-desc-input:focus { border-color: var(--accent); }
.kb-desc-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}
.kb-desc-skip, .kb-desc-upload {
padding: 6px 16px; border-radius: 6px; font-size: 13px;
font-weight: 500; cursor: pointer; border: none; transition: all 0.15s;
}
.kb-desc-skip {
background: none; color: var(--text-muted);
}
.kb-desc-skip:hover { color: var(--text); }
.kb-desc-upload {
background: var(--accent); color: white;
}
.kb-desc-upload:hover { opacity: 0.9; }
.kb-empty { text-align: center; color: var(--text-muted); padding: 48px 24px; }
.kb-empty p { margin: 4px 0; font-size: 14px; }
.kb-empty-hint { font-size: 13px !important; max-width: 360px; margin: 8px auto 0 !important; line-height: 1.5; }
.kb-loading { text-align: center; color: var(--text-muted); padding: 48px; font-size: 14px; }
.kb-preview-modal {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.kb-preview-modal.visible { opacity: 1; pointer-events: auto; }
.kb-preview-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.kb-preview-content {
position: relative; background: var(--surface);
border-radius: var(--radius); max-width: 700px; width: 90%;
max-height: 80vh; display: flex; flex-direction: column;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.kb-preview-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 20px 20px 16px; gap: 16px;
}
.kb-preview-header h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.kb-preview-close {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none; font-size: 12px; font-weight: 500;
color: var(--text-muted); cursor: pointer; padding: 5px 10px;
border-radius: 6px; flex-shrink: 0; white-space: nowrap;
}
.kb-preview-close svg { flex-shrink: 0; }
.kb-preview-close:hover { color: var(--text); background: var(--bg-offset, rgba(0,0,0,0.05)); }
.kb-preview-toolbar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 20px; border-bottom: 1px solid var(--border);
}
.kb-preview-copy {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border); color: var(--text-muted);
cursor: pointer; padding: 5px 12px; border-radius: 6px;
font-size: 12px; font-weight: 500;
}
.kb-preview-copy svg { flex-shrink: 0; }
.kb-preview-copy:hover { color: var(--text); background: var(--bg-offset, rgba(0,0,0,0.05)); }
.kb-preview-share {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border); color: var(--text-muted);
cursor: pointer; padding: 5px 12px; border-radius: 6px;
font-size: 12px; font-weight: 500;
}
.kb-preview-share svg { flex-shrink: 0; }
.kb-preview-share:hover:not(:disabled) { color: var(--text); background: var(--bg-offset, rgba(0,0,0,0.05)); }
.kb-preview-share:disabled { opacity: 0.6; cursor: not-allowed; }
.kb-preview-pill {
display: inline-flex; background: var(--bg-offset, #f0ebe3);
border-radius: 8px; padding: 3px; gap: 2px;
}
.kb-preview-tab {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: none; border-radius: 6px;
padding: 5px 12px; font-size: 12px; font-weight: 500;
color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.kb-preview-tab svg { flex-shrink: 0; }
.kb-preview-tab:hover { color: var(--text); }
.kb-preview-tab.active {
background: var(--surface, #fff); color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.kb-preview-body {
padding: 20px; overflow-y: auto; flex: 1;
font-size: 13px; line-height: 1.6; color: var(--text);
}
.kb-preview-body pre {
white-space: pre-wrap; word-wrap: break-word;
font-family: var(--mono); margin: 0;
}
/* Skeleton loading */
.kb-skeleton-line {
height: 12px; border-radius: 6px;
background: var(--border-light, #e8e0d6);
animation: kb-pulse 1.2s ease-in-out infinite;
}
.kb-skeleton-line + .kb-skeleton-line { margin-top: 10px; }
.kb-skeleton-line:nth-child(2) { width: 85%; animation-delay: 0.1s; }
.kb-skeleton-line:nth-child(3) { width: 70%; animation-delay: 0.2s; }
.kb-skeleton-line:nth-child(4) { width: 90%; animation-delay: 0.3s; }
.kb-skeleton-line:nth-child(5) { width: 60%; animation-delay: 0.4s; }
.kb-skeleton-line:nth-child(6) { width: 80%; animation-delay: 0.5s; }
.kb-skeleton-line:nth-child(7) { width: 50%; animation-delay: 0.6s; }
.kb-skeleton-heading {
height: 18px; width: 45%; border-radius: 6px; margin-bottom: 16px;
background: var(--border-light, #e8e0d6);
animation: kb-pulse 1.2s ease-in-out infinite;
}
.kb-skeleton-block + .kb-skeleton-block { margin-top: 24px; }
@keyframes kb-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* Page-level skeleton */
.kb-skeleton-header-row {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 16px; margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
}
.kb-skeleton-section { margin-bottom: 28px; }
.kb-skeleton-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.kb-skeleton-card {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px; border-radius: var(--radius);
border: 1px solid var(--border-light);
}
/* Topbar title for non-chat pages */
.topbar-title { font-size: 14px; font-weight: 600; color: var(--text); }
/* Mobile menu button (hidden on desktop) */
.mobile-menu-btn { display: none !important; }
/* Sidebar overlay for mobile */
.sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.3); z-index: 59;
}
.sidebar-overlay.visible { display: block; }
/* ---- RESPONSIVE ---- */
@media (min-width: 769px) {
.main-container {
margin-left: var(--sidebar-width);
transition: margin-left 0.2s ease;
}
body.sidebar-collapsed .main-container {
margin-left: var(--sidebar-collapsed);
}
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
transform: translateX(-100%);
z-index: 200;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
.sidebar.mobile-open { transform: translateX(0); }
.main-container { margin-left: 0 !important; }
.mobile-menu-btn { display: flex !important; }
}
/* ---- LAYOUT ---- */
.pane-agent {
width: var(--pane-split); display: flex; flex-direction: column;
min-width: 300px; border-right: none;
}
/* Transparent container — notebook canvas peeks through around the floating page */
.pane-output {
flex: 1; display: flex; flex-direction: column;
min-width: 320px;
background: transparent;
position: relative;
border-radius: 0;
box-shadow: none;
border: none;
padding: 12px 20px 16px 8px;
margin: 0;
}
/* Dog-ear moved to .artifact-page — pane-output no longer has one */
.pane-output::after { display: none; }
/* THE PAGE — one unified floating element with shadow + dog-ear */
.artifact-page {
background: #ffffff;
border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 0 12px 12px 12px;
box-shadow: 4px 6px 24px rgba(60, 50, 40, 0.08), 0 1px 3px rgba(60, 50, 40, 0.04);
position: relative;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Dog-ear fold — canvas peeks through the corner */
.artifact-page::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28px; height: 28px;
background: linear-gradient(225deg, var(--bg) 50%, rgba(180, 170, 150, 0.15) 50%);
border-radius: 0 12px 0 0;
z-index: 10;
pointer-events: none;
}
/* Strip paper styling when retro monitor is active */
.artifact-page.retro-active {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.artifact-page.retro-active::after {
display: none;
}
/* ---- RESIZER — subtle warm divider ---- */
.pane-resizer {
width: 4px; cursor: col-resize; background: transparent;
position: relative; flex-shrink: 0; z-index: 5;
transition: background 0.15s;
}
.pane-resizer:hover, .pane-resizer.dragging {
background: rgba(139, 111, 71, 0.15);
}
.pane-resizer::after {
content: ''; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 3px; height: 32px;
background: var(--text-muted); border-radius: 2px;
opacity: 0.18; transition: opacity 0.15s;
}
.pane-resizer:hover::after, .pane-resizer.dragging::after { opacity: 0.45; }
/* ---- PHASE LAYOUT ---- */
/* Dashboard: full-width, no output pane */
.phase-dashboard .pane-resizer,
.phase-dashboard .pane-output { display: none; }
.phase-dashboard .pane-agent { width: 100%; }
.phase-dashboard .chat-log {
display: flex; flex-direction: column; align-items: center;
justify-content: flex-start; padding-top: 40px;
}
.phase-dashboard .chat-log {
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent);
mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent);
}
.phase-dashboard .pane-agent.scrolled-bottom .chat-log {
-webkit-mask-image: none;
mask-image: none;
}
.phase-dashboard .input-area {
max-width: 680px; margin: 0 auto; width: 100%;
/* +8 to clear the pad's shadow throw, same reason as .input-area */
border-top: none; background: transparent; padding: 0 20px 32px;
}
.phase-dashboard .input-wrap textarea {
background: transparent; border: none;
}
/* Chat: full-width, no output pane, input at bottom */
.phase-chat .pane-resizer,
.phase-chat .pane-output { display: none; }
.phase-chat .pane-agent { width: 100%; }
/* Chat+Output: split pane with slide-in animation */
.phase-chat-output .pane-agent {
transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phase-chat-output .pane-resizer {
animation: fadeIn 0.3s ease 0.2s both;
}
.phase-chat-output .pane-output {
animation: slideInFromRight 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes slideInFromRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.pane-header {
height: 44px; padding: 0 28px;
border: none; border-bottom: 1px solid rgba(180, 170, 150, 0.1);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0; background: transparent;
gap: 12px; min-width: 0;
}
.pane-header h3 {
font-size: 14px; font-weight: 600;
font-family: var(--serif); font-style: normal;
letter-spacing: 0; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0; flex: 1;
}
.pane-header-left {
display: flex; align-items: center; gap: 10px;
min-width: 0; flex: 1; overflow: visible;
}
.pane-header-left h3 { flex: unset; }
.pane-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; }
/* ---- Header word count ---- */
.header-word-count {
font-family: var(--sans); font-size: 11px; color: #b0a694;
white-space: nowrap;
}
/* ---- Draft / Saved status labels ---- */
.file-status-draft {
color: var(--text-muted);
font-style: italic;
}
.file-status-saved {
color: var(--green);
}
/* ---- Filed toast ---- */
.filed-toast {
position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-12px);
background: var(--card-bg, #fffdf8); color: var(--text);
font-family: var(--sans); font-size: 13px;
padding: 10px 18px; border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
border: 1px solid rgba(180, 170, 150, 0.2);
opacity: 0; transition: opacity 0.3s, transform 0.3s;
z-index: 1000; pointer-events: auto;
}
.filed-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.filed-toast-link {
color: var(--accent); cursor: pointer; text-decoration: underline;
text-underline-offset: 2px;
}
.filed-toast-link:hover { text-decoration-thickness: 2px; }
/* ---- Version indicator & dropdown ---- */
.version-indicator { position: relative; flex-shrink: 0; }
.version-trigger {
display: flex; align-items: center; gap: 4px;
font-family: var(--sans); font-size: 11px; font-weight: 500;
color: #8a7e70; background: rgba(180, 170, 150, 0.1);
border: 1px solid rgba(180, 170, 150, 0.15); border-radius: 6px;
padding: 3px 8px; cursor: pointer; white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.version-trigger:hover {
background: rgba(180, 170, 150, 0.18); border-color: rgba(180, 170, 150, 0.3);
}
.version-trigger svg { opacity: 0.5; }
.version-dropdown {
display: none; position: absolute; top: calc(100% + 6px); left: 0;
min-width: 240px; max-width: 320px; max-height: 320px;
background: var(--card-bg, #fffdf8); border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 100; overflow: hidden;
animation: versionDropIn 0.15s ease-out;
}
.version-dropdown.open { display: flex; flex-direction: column; }
@keyframes versionDropIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.version-dropdown-header {
font-family: var(--sans); font-size: 11px; font-weight: 600;
color: #8a7e70; padding: 10px 14px 6px; text-transform: uppercase;
letter-spacing: 0.5px;
}
.version-list {
overflow-y: auto; max-height: 220px; padding: 0 6px 6px;
}
.version-item {
display: flex; align-items: center; gap: 8px;
padding: 7px 8px; border-radius: 6px; cursor: pointer;
font-family: var(--sans); font-size: 12px; color: var(--text);
transition: background 0.1s;
}
.version-item:hover { background: rgba(180, 170, 150, 0.1); }
.version-item--active { background: rgba(180, 170, 150, 0.15); font-weight: 600; }
.version-item-num {
font-weight: 600; color: #8a7e70; min-width: 24px; font-size: 11px;
}
.version-item-label {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--text); font-size: 12px;
}
.version-item-label--edit {
font-style: italic; color: var(--text-muted);
}
.version-item-label .restored-note {
font-size: 10px; color: #a09080; font-style: italic;
}
.version-item-time {
font-size: 10px; color: #a09080; white-space: nowrap; flex-shrink: 0;
}
/* ---- Version banner (historical view) ---- */
.version-banner {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 28px; gap: 12px;
background: rgba(180, 170, 150, 0.08);
border-bottom: 1px solid rgba(180, 170, 150, 0.12);
font-family: var(--sans); font-size: 12px; color: #8a7e70;
animation: versionBannerIn 0.2s ease-out;
}
@keyframes versionBannerIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.version-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.version-banner-btn {
font-family: var(--sans); font-size: 11px; font-weight: 500;
color: #8a7e70; background: rgba(180, 170, 150, 0.1);
border: 1px solid rgba(180, 170, 150, 0.15); border-radius: 6px;
padding: 4px 10px; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.version-banner-btn:hover { background: rgba(180, 170, 150, 0.2); }
.version-banner-btn-primary {
color: var(--accent); border-color: var(--accent);
background: rgba(var(--accent-rgb, 139, 90, 43), 0.08);
}
.version-banner-btn-primary:hover {
background: rgba(var(--accent-rgb, 139, 90, 43), 0.15);
}
/* ---- Stale page draft banner (a teammate deployed since your last edit) ---- */
.page-stale-banner {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 28px; gap: 12px;
background: rgba(214, 158, 46, 0.30);
border-left: 3px solid rgba(214, 158, 46, 0.85);
border-bottom: 1px solid rgba(214, 158, 46, 0.45);
font-family: var(--sans); font-size: 13px; font-weight: 500; color: #6b5210;
animation: versionBannerIn 0.2s ease-out;
}
.page-stale-text { display: flex; align-items: center; gap: 8px; }
.page-stale-text::before { content: "⚠"; font-size: 14px; }
.page-stale-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* Shake + glow when the user tries to chat without resolving the banner.
One-shot per banner appearance (JS toggles the class for ~600ms then removes). */
@keyframes staleBannerPulse {
0%, 100% { transform: translateX(0); background: rgba(214, 158, 46, 0.30); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); background: rgba(214, 158, 46, 0.55); }
20%, 40%, 60%, 80% { transform: translateX(4px); background: rgba(214, 158, 46, 0.55); }
}
.page-stale-banner.pulsing { animation: staleBannerPulse 0.6s ease-in-out; }
/* Inline tip above the chat input — fires on the first send attempt while a
stale banner is showing, then auto-hides. Quiet visual partner to the banner. */
@keyframes chatStaleTipIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-stale-tip {
display: flex; align-items: center; gap: 8px;
margin: 0 0 8px;
padding: 6px 10px;
background: rgba(214, 158, 46, 0.15);
border-left: 2px solid rgba(214, 158, 46, 0.85);
border-radius: 4px;
font-family: var(--sans); font-size: 12px; color: #6b5210;
animation: chatStaleTipIn 0.2s ease-out;
}
.chat-stale-tip-arrow { font-size: 13px; }
/* ---- Side-by-side diff ---- */
.output-rendered.diff-view { max-width: none; }
.diff-side-by-side { width: 100%; }
.diff-pair { display: flex; gap: 12px; margin-bottom: 4px; }
.diff-pair-header {
margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 8px;
}
.diff-cell { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 3px; }
.diff-col-header {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-dim);
}
.diff-cell-del {
background: rgba(220, 53, 69, 0.08);
border-left: 3px solid rgba(220, 53, 69, 0.35);
text-decoration: line-through; color: #b44; opacity: 0.7;
}
.diff-cell-add {
background: rgba(34, 139, 34, 0.08);
border-left: 3px solid rgba(34, 139, 34, 0.4);
}
.diff-cell-changed {
background: rgba(180, 170, 150, 0.06);
border-left: 3px solid rgba(180, 170, 150, 0.3);
}
/* Inline word-level diff classes */
.diff-del {
background: rgba(220, 53, 69, 0.12); text-decoration: line-through;
color: #b44; border-radius: 2px; padding: 0 2px;
}
.diff-add {
background: rgba(34, 139, 34, 0.15);
border-radius: 2px; padding: 0 2px;
}
/* Historical view dims the content slightly */
.artifact-page--historical .output-content { opacity: 0.85; }
/* Header copy button — hidden (copy lives in the footer status bar) */
.copy-btn { display: none !important; }
/* "File this away" button in header — plain text, physical-object style */
.save-to-kb-btn {
font-family: var(--sans); font-size: 11px;
color: #8a7e70; padding: 5px 10px; border-radius: 6px;
border: 1px solid rgba(180, 170, 150, 0.15); background: transparent;
cursor: pointer; transition: all 0.15s;
}
.save-to-kb-btn:hover { color: var(--text); background: rgba(180, 170, 150, 0.08); border-color: rgba(180, 170, 150, 0.25); }
.save-to-kb-btn.copied { color: var(--green); border-color: var(--green); }
/* Inline "File this away" form — replaces window.prompt */
.kb-inline-form {
position: absolute; top: 100%; right: 0; z-index: 50;
background: var(--card-bg); border: 1px solid rgba(180, 170, 150, 0.25);
border-radius: 6px; padding: 10px; margin-top: 4px;
box-shadow: var(--shadow-md); min-width: 260px;
animation: chipSlideIn 0.15s ease;
}
.kb-inline-input {
width: 100%; padding: 6px 10px; font-size: 13px; font-family: inherit;
border: 1px solid var(--border); border-radius: 4px;
background: var(--surface); color: var(--text); outline: none;
}
.kb-inline-input:focus { border-color: #8b6f47; box-shadow: 0 0 0 2px rgba(139, 111, 71, 0.1); }
.kb-inline-actions { display: flex; gap: 6px; margin-top: 8px; }
.kb-inline-save {
padding: 5px 12px; font-size: 12px; font-family: inherit;
background: #8b6f47; color: white; border: none; border-radius: 4px;
cursor: pointer; font-weight: 500;
}
.kb-inline-save:hover { background: #9a7d54; }
.kb-inline-cancel {
padding: 5px 12px; font-size: 12px; font-family: inherit;
background: none; color: var(--text-muted); border: 1px solid var(--border);
border-radius: 4px; cursor: pointer;
}
.kb-inline-cancel:hover { color: var(--text); background: var(--surface2); }
.kb-inline-error { font-size: 11px; color: var(--red); margin-top: 6px; }
/* ---- SETTINGS DRAWER ---- */
.settings-drawer {
position: fixed; top: 36px; right: 0; bottom: 0; width: 400px;
background: var(--surface); border-left: 1px solid var(--border);
z-index: 60; transform: translateX(100%); transition: transform 0.25s ease;
display: flex; flex-direction: column;
}
.settings-drawer.open { transform: translateX(0); }
.settings-backdrop {
position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.25);
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.settings-backdrop.visible { opacity: 1; pointer-events: auto; }
.drawer-close {
background: none; border: none; font-size: 22px; color: var(--text-dim);
cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: var(--radius-sm);
}
.drawer-close:hover { background: var(--surface2); color: var(--text); }
.settings-drawer-save {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px; margin-top: 8px;
background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.settings-drawer-save:hover { background: var(--accent-hover); }
.settings-drawer-save:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-drawer-save.saved { background: var(--green); }
/* Gear icon — hidden by default, shown in admin mode on chat page */
.settings-gear-btn { display: none; }
body.admin-mode .settings-gear-btn.gear-visible { display: flex; }
/* Layout swap */
.chat-panes.layout-swapped { flex-direction: row-reverse; }
/* Layout toggle group — hidden by default, shown on chat page */
.layout-toggle-group { display: none; align-items: center; gap: 2px; }
.layout-toggle-group.layout-toggle-visible { display: flex; }
.layout-toggle-btn {
display: flex; align-items: center; justify-content: center;
padding: 5px 6px; background: none; border: none;
border-radius: var(--radius-sm); cursor: pointer;
color: var(--text-muted); transition: all 0.15s;
}
.layout-toggle-btn:hover { background: var(--surface2); color: var(--text); }
.layout-toggle-btn.active { background: var(--surface3); color: var(--text); }
.settings-drawer .drawer-header {
padding: 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.settings-drawer .drawer-header h3 { font-size: 14px; font-weight: 600; }
.settings-drawer .drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.setting-group { margin-bottom: 20px; }
/* Sub-group divider inside a settings card (e.g. Tools → Integrations) so a
capability toggle reads as separate from the tool allowlist above it. */
.setting-group.cs-integrations { border-top: 1px solid var(--border); padding-top: 16px; }
.setting-group label {
display: block; font-size: 12px; font-weight: 600; color: var(--text-dim);
margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.setting-group select,
.setting-group input[type="number"],
.setting-group input[type="text"] {
width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text); font-size: 13px;
font-family: var(--mono); outline: none; transition: border-color 0.15s;
}
.setting-group select:focus,
.setting-group input:focus { border-color: var(--accent); }
.setting-group select option { background: var(--surface); }
.setting-group textarea {
width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text); font-size: 12px;
font-family: var(--mono); line-height: 1.5; resize: vertical;
min-height: 120px; outline: none; transition: border-color 0.15s;
}
.setting-group textarea:focus { border-color: var(--accent); }
.setting-group .pricing-hint {
font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono);
}
.setting-group .hint {
font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4;
}
/* Inline toggle label (checkbox + text on one line) */
.setting-group .setting-toggle-label {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; font-weight: 500; user-select: none;
margin-bottom: 0;
}
.setting-group .setting-toggle-label input[type="checkbox"] {
margin: 0; width: auto; cursor: pointer;
}
/* Disabled slider/number when Use Thinking is off */
.setting-group input[type="range"]:disabled,
.setting-group input[type="number"]:disabled {
opacity: 0.45; cursor: not-allowed;
}
.setting-divider {
margin: 24px 0 20px;
border: none; border-top: 1px solid var(--border);
}
.setting-section-title {
font-size: 11px; font-weight: 700; color: var(--purple);
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
.setting-section-title::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.tool-toggles { display: flex; flex-direction: column; gap: 6px; }
.tool-toggle {
display: flex; align-items: center; gap: 10px; padding: 6px 8px;
border-radius: var(--radius-sm); cursor: pointer; transition: background 0.1s;
}
.tool-toggle:hover { background: var(--surface2); }
.tool-toggle input[type="checkbox"] { accent-color: var(--accent); }
.tool-toggle .tool-label { font-size: 13px; font-family: var(--mono); }
.tool-toggle .tool-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
/* ---- Skills list (settings drawer) ---- */
.sd-skills-list { display: flex; flex-direction: column; gap: 8px; }
.sd-skill-category-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 2px; }
.sd-skill-row { padding: 3px 0 3px 8px; font-size: 13px; }
.sd-skill-name { font-family: var(--mono); font-weight: 600; }
.sd-skill-desc { color: var(--text-muted); margin-left: 6px; }
/* ---- CHAT LOG ---- */
.chat-log {
flex: 1; overflow-y: auto; padding: 24px 24px 32px;
display: flex; flex-direction: column; gap: 20px;
}
.chat-log > .msg,
.chat-log > .chat-admin-banner,
.chat-log > .turn-divider,
.chat-log > .study-card,
.chat-log > .narration-ticker,
.chat-log > .run-bundle,
.chat-log > .tool-group,
.chat-log > .completion-card,
.chat-log > .error-card,
.chat-log > .turn-save-notice,
.chat-log > .page-building-card,
.chat-log > .page-deployed-card,
.chat-log > .brand-swatch-card,
.chat-log > .page-headsup-wrap,
.chat-log > .work-slip,
.chat-log > .research-board { max-width: 768px; width: 100%; margin-inline: auto; }
.chat-admin-banner {
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface2);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
text-align: center;
}
.chat-log::-webkit-scrollbar { width: 5px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ---- DASHBOARD: Proactive Creative Board ---- */
.dashboard {
width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px 32px;
}
/* === Highlighter marks === */
mark.hl {
background: none;
color: inherit;
padding: 1px 4px;
margin: 0 -2px;
border-radius: 3px 4px 2px 5px;
}
mark.hl.yellow { background: var(--hl-yellow); }
mark.hl.pink { background: var(--hl-pink); }
mark.hl.green { background: var(--hl-green); }
mark.hl.blue { background: var(--hl-blue); }
/* === Tape strip === */
.tape-strip {
position: absolute;
background: var(--tape);
box-shadow: 0 1px 2px var(--tape-shadow);
z-index: 5;
pointer-events: none;
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(200, 190, 170, 0.15);
}
.tape-strip.top-center {
width: 60px; height: 18px;
top: -8px; left: 50%; margin-left: -30px;
transform: rotate(-1deg);
}
.tape-strip.top-left {
width: 50px; height: 16px;
top: -6px; left: 10px;
transform: rotate(-8deg);
}
.tape-strip.top-right {
width: 50px; height: 16px;
top: -6px; right: 10px;
transform: rotate(6deg);
}
.tape-strip.cross-left {
width: 55px; height: 16px;
top: 8px; left: -8px;
transform: rotate(-35deg);
}
.tape-strip.cross-right {
width: 55px; height: 16px;
top: 8px; right: -8px;
transform: rotate(35deg);
}
/* === Paper clip === */
.paper-clip {
position: absolute;
top: -8px; right: 16px;
width: 16px; height: 40px;
z-index: 6;
}
.paper-clip::before {
content: '';
position: absolute;
top: 0; left: 3px;
width: 10px; height: 36px;
border: 2px solid #a0a0a0;
border-radius: 0 0 6px 6px;
border-top: none;
}
.paper-clip::after {
content: '';
position: absolute;
top: -4px; left: 1px;
width: 14px; height: 24px;
border: 2px solid #b0b0b0;
border-radius: 8px 8px 0 0;
border-bottom: none;
}
/* === Pushpin === */
.pushpin {
position: absolute;
width: 12px; height: 12px;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(0,0,0,0.2);
z-index: 6;
}
.pushpin.red { background: radial-gradient(circle at 40% 35%, #f55, #d44); }
.pushpin.green { background: radial-gradient(circle at 40% 35%, #5a5, #3a7); }
.pushpin.blue { background: radial-gradient(circle at 40% 35%, #58f, #36c); }
.pushpin.yellow { background: radial-gradient(circle at 40% 35%, #fc5, #da3); }
/* Blu-tack — small irregular adhesive blob peeking from BEHIND objects */
/* Physics: blu-tack goes on the wall, object sits on top. You see small bits
peeking from corners/edges. z-index: -1 so it sits behind the parent. */
.blu-tack {
position: absolute;
width: 14px; height: 10px;
background: #9ab8cc;
border-radius: 60% 50% 45% 55% / 55% 60% 45% 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.25);
z-index: -1;
opacity: 0.82;
}
/* Slight squish variations — real tack isn't uniform */
.blu-tack.squish-1 { border-radius: 55% 45% 50% 60% / 50% 55% 60% 45%; width: 14px; height: 10px; }
.blu-tack.squish-2 { border-radius: 50% 60% 55% 45% / 60% 45% 50% 55%; width: 16px; height: 12px; }
.blu-tack.squish-3 { border-radius: 45% 55% 60% 50% / 55% 50% 45% 60%; width: 15px; height: 11px; }
/* === Silver thumbtack — kindergarten callback, informational/general pinning === */
.thumbtack {
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
z-index: 6;
}
.thumbtack.silver {
background: radial-gradient(circle at 40% 30%, #e8e8e8, #b0b0b0 60%, #888 100%);
box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.15);
}
/* === Staple — electric stapler wire, for permanent/completed items === */
.staple {
position: absolute;
width: 16px; height: 6px;
z-index: 6;
}
/* Bridge (top bar visible) */
.staple::before {
content: '';
position: absolute;
top: 0; left: 1px; right: 1px;
height: 2px;
background: linear-gradient(180deg, #d4d4d4, #a8a8a8);
border-radius: 0.5px;
box-shadow: 0 0.5px 1px rgba(0,0,0,0.2);
}
/* Two legs (entry points, slightly darker) */
.staple::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 2px; height: 3px;
background: #999;
border-radius: 0 0 0.5px 0.5px;
box-shadow: 10px 0 0 #999; /* second leg */
}
/* === Agent letter — personalized note on the desk === */
.dash-letter {
position: relative;
background: var(--surface);
padding: 20px 22px 24px;
border-radius: 2px;
box-shadow: var(--shadow-md);
transform: rotate(-0.3deg);
transition: all 0.3s var(--spring);
margin-bottom: 24px;
}
.dash-letter:hover {
transform: rotate(0deg) translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Polaroid photo — taped to top-right of letter like a real note */
.letter-polaroid {
position: absolute;
top: -8px; right: 16px;
width: 56px;
padding: 4px 4px 14px;
background: #fff;
box-shadow: 1px 2px 8px rgba(60, 50, 40, 0.18);
transform: rotate(3deg);
z-index: 2;
}
.letter-polaroid img {
width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
/* No extra fastening on polaroid — letter's tape holds everything (one fastening per object rule) */
.letter-polaroid-fallback {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 1;
background: linear-gradient(135deg, #e8d5c4, #d4bfa8);
font-size: 22px; font-weight: 700; color: var(--text-dim);
font-family: var(--serif);
}
.letter-date {
font-family: 'Kalam', cursive;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 8px;
}
.letter-body {
font-family: 'Kalam', cursive;
font-size: 16px;
line-height: 1.55;
color: var(--text);
padding-right: 60px; /* keep text from overlapping polaroid */
}
.letter-cta {
font-family: 'Kalam', cursive;
font-size: 16px;
font-weight: 600;
color: var(--accent);
margin-top: 2px;
cursor: pointer;
display: inline-block;
transition: all 0.2s var(--spring);
border-bottom: 2px solid transparent;
}
.letter-cta:hover {
transform: translateY(-1px);
border-bottom-color: var(--accent);
}
.letter-signoff {
font-family: 'Kalam', cursive;
font-size: 16px;
color: var(--text-dim);
margin-top: 6px;
}
/* === Cork board — suggestion cards === */
.dash-board {
border-radius: 8px;
padding: 22px 20px 20px;
position: relative;
overflow: hidden;
background-color: #c4a47a;
background-image:
radial-gradient(ellipse at 15% 25%, rgba(210,175,130,0.5) 0%, transparent 45%),
radial-gradient(ellipse at 85% 75%, rgba(180,145,100,0.4) 0%, transparent 40%),
radial-gradient(ellipse at 50% 10%, rgba(220,185,140,0.3) 0%, transparent 35%),
radial-gradient(circle at 25% 80%, rgba(170,135,90,0.35) 0%, transparent 25%),
radial-gradient(circle at 75% 30%, rgba(190,155,110,0.25) 0%, transparent 30%),
linear-gradient(160deg, #cbb08a 0%, #b89468 50%, #c4a47a 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.05),
0 2px 4px rgba(60, 50, 40, 0.12),
0 6px 16px rgba(60, 50, 40, 0.14),
0 12px 40px rgba(60, 50, 40, 0.1);
margin-bottom: 20px;
}
.dash-board::before {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
border: 3px solid rgba(80, 60, 40, 0.25);
pointer-events: none;
z-index: 0;
}
/* Board grid */
.board-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
position: relative;
z-index: 1;
}
/* Suggestion card on board — isolation trick for blu-tack peek-behind effect.
Card background lives on ::before so blu-tack at z-index:-1 sits behind the
card face but peeks from edges that extend beyond the card bounds. */
.s-card {
background: transparent;
padding: 16px 14px 12px;
border-radius: 2px;
box-shadow: 1px 2px 10px rgba(60, 50, 40, 0.18), 0 0 0 1px rgba(60, 50, 40, 0.03);
position: relative;
cursor: pointer;
transition: all 0.25s var(--spring);
isolation: isolate;
}
.s-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--cream);
border-radius: inherit;
z-index: 0;
pointer-events: none;
}
.s-card > .badge, .s-card > .title, .s-card > .desc, .s-card > .meta {
position: relative;
z-index: 1;
}
.s-card > .blu-tack { z-index: -1; }
.s-card:nth-child(1) { transform: rotate(-0.7deg); }
.s-card:nth-child(2) { transform: rotate(0.4deg); }
.s-card:nth-child(3) { transform: rotate(0.5deg); }
.s-card:nth-child(4) { transform: rotate(-0.3deg); }
.s-card:nth-child(5) { transform: rotate(0.6deg); }
.s-card:nth-child(6) { transform: rotate(-0.4deg); }
.s-card:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 2px 6px 20px rgba(60, 50, 40, 0.22);
z-index: 10;
}
.s-card .badge {
display: inline-block;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--accent);
margin-bottom: 6px;
}
.s-card .title {
font-family: var(--serif);
font-size: 14px; font-weight: 600;
color: var(--text);
margin-bottom: 4px;
line-height: 1.3;
}
.s-card .desc {
font-size: 12px;
color: var(--text-dim);
line-height: 1.45;
}
.s-card .meta {
font-size: 10px;
color: var(--text-muted);
margin-top: 6px;
font-style: italic;
}
.s-card.urgent::before { background: var(--sticky); }
.s-card.urgent .badge { color: #b45309; }
.s-card.idea::before { background: #fff5f5; }
/* Stagger entry animation for cards */
@keyframes cardStagger {
from { opacity: 0; transform: translateY(12px) rotate(0deg); }
to { opacity: 1; }
}
.s-card.entering {
animation: cardStagger 0.4s var(--spring) both;
}
.s-card.entering:nth-child(1) { animation-delay: 0ms; }
.s-card.entering:nth-child(2) { animation-delay: 100ms; }
.s-card.entering:nth-child(3) { animation-delay: 200ms; }
.s-card.entering:nth-child(4) { animation-delay: 300ms; }
.s-card.entering:nth-child(5) { animation-delay: 400ms; }
.s-card.entering:nth-child(6) { animation-delay: 500ms; }
/* Letter sections — "This month" recap and "Suggested" CTA inside the letter */
.letter-section {
border-top: 1px dashed rgba(160, 140, 120, 0.3);
margin-top: 14px;
padding-top: 12px;
}
.letter-section-label {
font-family: 'Kalam', cursive;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 6px;
letter-spacing: 0.3px;
}
.letter-section-body {
font-family: 'Kalam', cursive;
font-size: 16px;
line-height: 1.55;
color: var(--text);
}
.letter-section-body strong { font-weight: 400; color: var(--text-muted); }
.letter-section-body mark.hl { background: var(--hl-green); padding: 0 2px; border-radius: 2px; }
/* Mini polaroid recents on board */
.board-recents {
margin-top: 14px;
display: flex;
gap: 12px;
align-items: flex-end;
position: relative;
z-index: 1;
}
.board-resume {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
padding: 14px 16px;
border: none;
border-radius: 8px;
background: var(--card-bg);
box-shadow: 0 1px 3px rgba(60, 50, 40, 0.12);
color: var(--text);
font-family: var(--sans);
text-align: left;
cursor: pointer;
transition:
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.18s ease;
}
.board-resume:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(60, 50, 40, 0.18);
}
.board-resume:disabled {
cursor: wait;
opacity: 0.7;
}
.board-recents-error {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
color: var(--text-muted);
font-size: 12px;
}
.board-resume-label {
color: var(--text-muted);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.board-resume-title {
color: var(--text);
font-size: 15px;
font-weight: 600;
}
.board-resume-meta {
color: var(--text-muted);
font-size: 12px;
}
.board-recents-label {
font-family: 'Kalam', cursive;
font-size: 14px;
color: rgba(255,255,255,0.6);
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
letter-spacing: 1px;
}
.mini-pol {
background: #fff;
padding: 5px;
box-shadow: 1px 2px 8px rgba(60, 50, 40, 0.15);
cursor: pointer;
transition: all 0.25s var(--spring);
position: relative;
width: 82px;
flex-shrink: 0;
}
.mini-pol:nth-child(2) { transform: rotate(-2deg); }
.mini-pol:nth-child(3) { transform: rotate(1.5deg); }
.mini-pol:nth-child(4) { transform: rotate(-0.5deg); }
.mini-pol:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 2px 4px 16px rgba(60, 50, 40, 0.2);
z-index: 10;
}
.mini-pol .mp-icon {
width: 100%; height: 44px;
background: linear-gradient(135deg, #eae8e5, #dbd9d6);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.mini-pol-doc .mp-icon {
background: linear-gradient(135deg, #fef3e2, #fde8c8);
}
.mini-pol-chat .mp-icon {
background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
}
.mini-pol .mp-type {
font-family: var(--sans);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
text-align: center;
margin-top: 3px;
}
.mini-pol .mp-label {
font-family: 'Open Runde', sans-serif;
font-size: 10px;
line-height: 1.3;
color: var(--text-dim);
margin-top: 4px;
padding: 0 1px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
}
/* === Skeleton shimmer (loading state) === */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg,
var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
border-radius: 4px;
}
/* Skeleton line — shimmer bar for text placeholders */
.skeleton-line {
height: 12px; width: 100%;
border-radius: 6px;
background: linear-gradient(90deg,
rgba(200,185,165,0.3) 25%, rgba(220,200,175,0.5) 50%, rgba(200,185,165,0.3) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.xshort { width: 25%; }
/* Skeleton polaroid — square block inside the real polaroid frame */
.skeleton-polaroid {
display: block;
width: 100%; aspect-ratio: 1;
}
/* Skeleton card — ghost card on the board, matches real .s-card sizing */
.skeleton-card { pointer-events: none; padding: 16px 14px 12px; }
.skeleton-card::before {
background-image: linear-gradient(90deg,
var(--cream) 20%, rgba(200,185,160,0.5) 50%, var(--cream) 80%
) !important;
background-size: 200% 100% !important;
background-position: -200% 0;
animation: shimmer 1.8s ease infinite !important;
}
.skeleton-card .skeleton-line {
background: linear-gradient(90deg,
rgba(180,160,130,0.25) 25%, rgba(200,180,150,0.4) 50%, rgba(180,160,130,0.25) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
}
/* Skeleton mini-polaroid */
.skeleton-pol { pointer-events: none; opacity: 0.6; }
/* Skeleton history card */
.skeleton-history-card { pointer-events: none; display: flex; align-items: center; gap: 12px; }
/* Skeleton knowledge page */
.kb-skeleton-wrap { padding: 32px 40px; max-width: 900px; margin: 0 auto; }
.kb-skeleton-section { margin-bottom: 32px; }
.kb-skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* === Dashboard responsive === */
@media (max-width: 640px) {
.board-grid { grid-template-columns: 1fr; }
.board-recents { flex-wrap: wrap; }
.board-recents-label { writing-mode: horizontal-tb; transform: none; }
}
.msg { display: flex; gap: 12px; animation: fadeIn 0.15s ease; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-avatar {
width: 32px; height: 32px; border-radius: 2px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
/* User avatar — hidden. The index card IS the user. */
.msg-user .msg-avatar { display: none; }
.msg-user .msg-sender { display: none; }
/* Agent avatar — Polaroid photo: square, white border, slight rotation */
.msg-assistant .msg-avatar {
background: #fffdf6; border-radius: 2px;
border: 3px solid white;
box-shadow: 1px 2px 6px rgba(60, 50, 40, 0.12);
transform: rotate(-1.5deg);
color: var(--text-dim); font-family: var(--serif);
}
.msg-assistant .msg-avatar.has-photo {
background: none; padding: 0; overflow: hidden;
border: 3px solid white;
}
.msg-assistant .msg-avatar.has-photo img {
width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
.msg-body { flex: 1; min-width: 0; }
/* Agent sender — handwritten label under the Polaroid */
.msg-sender { font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.msg-assistant .msg-sender {
font-family: var(--serif); font-style: italic;
font-size: 12px; color: var(--text-muted);
}
.msg-content { font-size: 15px; line-height: 1.5; color: var(--text); }
/* The founder's own words sit on the right, so who said what is legible without
reading a word of it. Capped at 72% and sized to content, or a two-word reply
would stretch a card the full width of the pane and lose that at a glance. */
.msg-user { justify-content: flex-end; }
.msg-user .msg-body { flex: 0 1 auto; max-width: 72%; }
/* User messages — index card, taped at the corner.
The pink margin rule is gone: the desk is already ruled paper, so the card's
own margin was a second paper metaphor in the same frame. Lifted further off
the desk than a resting card — agent card, user card, input pad now read as
one ladder of heights rather than three unrelated shadows.
22px on the right, not 18: that is the gutter the corner tape needs, and at
18px a full first line came within 1.7px of the tape's inner edge. */
.msg-user .msg-content {
background: #fffdf6;
border: none;
border-radius: 6px;
padding: 14px 22px 14px 18px;
box-shadow: 3px 5px 16px rgba(60, 50, 40, 0.12), 0 1px 2px rgba(60, 50, 40, 0.06);
position: relative;
}
/* A torn strip of tape across the top-right corner, replacing a literal 📌
emoji — which rendered as a different object on every platform and was the
one mark here not drawn by us.
The geometry is measured, not eyeballed. With the origin at the card's
top-right corner and x running negative into the card, a 45° strip occupies
the band |y − x − d| ≤ h/2·√2, where d is how far from the corner its axis
crosses each edge. The text box begins 14px down and 22px in, so its corner
sits at y − x = 36 and staying off it needs d + h/2·√2 ≤ 36. At h=16 and
d=19 that leaves 5.7px of clearance, both torn tips clear the edges by 3.6px,
and 79% of the tape lies on the card. It rises 7.7px into .chat-log's 20px
gap and reaches 8.7px into its 24px padding, so it collides with neither the
message above nor the scroll container. Changing the size or the padding
means redoing this — the three numbers are linked. */
.msg-user .msg-content::before {
content: '';
position: absolute; top: 2px; right: -8px;
width: 34px; height: 16px;
transform: rotate(45deg);
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.20) 0 3px, transparent 3px 7px),
linear-gradient(180deg, rgba(214, 198, 166, 0.72), rgba(196, 178, 144, 0.72));
clip-path: polygon(5% 0, 9% 21%, 3% 47%, 8% 73%, 2% 100%, 97% 100%, 92% 75%, 98% 49%, 93% 23%, 96% 0);
filter: drop-shadow(0 1px 1.5px rgba(60, 50, 40, 0.13));
z-index: 1;
}
/* Assistant messages — card bubble */
.msg-assistant .msg-content {
background: #fff;
border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 12px;
box-shadow: rgba(60, 50, 40, 0.08) 4px 6px 24px,
rgba(60, 50, 40, 0.04) 0px 1px 3px;
padding: 18px 22px 18px 18px;
width: fit-content;
max-width: 100%;
}
/* When the bubble has a thinking disclosure, promote the white bubble up to
.msg-body so thinking + text live inside the same bubble. */
.msg-assistant.msg-mind .msg-body {
background: #fff;
border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 12px;
box-shadow: rgba(60, 50, 40, 0.08) 4px 6px 24px,
rgba(60, 50, 40, 0.04) 0px 1px 3px;
padding: 14px 18px;
flex: 0 1 auto;
max-width: 100%;
}
.msg-assistant.msg-mind .msg-content {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
width: auto;
max-width: 100%;
}
.msg-assistant.msg-mind .msg-sender { margin-bottom: 4px; }
.msg-content p { margin-bottom: 8px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content strong { font-weight: 600; }
.msg-content code {
background: var(--surface3); padding: 2px 6px; border-radius: 4px;
font-size: 13px; font-family: var(--mono); color: var(--code-color);
}
.msg-content pre {
background: var(--surface2); padding: 12px 14px; border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow-x: auto; margin: 8px 0; font-size: 12px; font-family: var(--mono); line-height: 1.5;
}
/* Codeblock — proper rendering of triple-backtick fences. Header bar with
language label + copy button; monospace body. Replaces the bare
styling above for markdown-rendered output. */
.codeblock {
position: relative;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin: 10px 0;
overflow: hidden;
font-size: 13px;
}
.codeblock-copy {
position: absolute;
top: 8px;
right: 8px;
background: var(--surface);
border: 1px solid var(--border-light);
color: var(--text-dim);
font-family: inherit;
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 5px;
cursor: pointer;
z-index: 1;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.codeblock-copy:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); }
.codeblock-copy:active { transform: translateY(0); }
.codeblock-copy.copied {
background: var(--green, #10b981);
color: #fff;
border-color: var(--green, #10b981);
}
.codeblock pre {
margin: 0;
padding: 12px 56px 12px 14px; /* right padding reserves space for Copy */
background: transparent;
border: none;
border-radius: 0;
overflow-wrap: anywhere;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.55;
color: var(--text);
white-space: pre-wrap;
}
.codeblock code { font-family: inherit; background: transparent; padding: 0; }
/* ---- TOOL CARDS (humanized) ---- */
.tool-group { padding-left: 44px; display: flex; flex-direction: column; gap: 4px; }
.tool-card {
background: var(--surface); border: 1px solid var(--border-light);
border-radius: 8px; overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
box-shadow: var(--shadow-sm);
}
.tool-card:hover { border-color: var(--border-light); }
.tool-card-header {
padding: 8px 12px; cursor: pointer;
display: flex; align-items: center; gap: 10px;
list-style: none; user-select: none;
}
.tool-card-header::-webkit-details-marker { display: none; }
.tool-card-icon {
width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
}
.tool-card-icon.file-read { background: rgba(0, 122, 255, 0.1); color: var(--accent); }
.tool-card-icon.file-write { background: var(--green-dim); color: var(--green); }
.tool-card-icon.file-edit { background: var(--amber-dim); color: var(--amber); }
.tool-card-icon.file-search { background: var(--purple-dim); color: var(--purple); }
.tool-card-icon.file-list { background: rgba(34, 211, 238, 0.12); color: var(--cyan); }
.tool-card-icon.web-search { background: rgba(168, 85, 247, 0.12); color: var(--purple); }
.tool-card-icon.web-fetch { background: rgba(59, 130, 246, 0.12); color: var(--accent); }
.tool-card-info { flex: 1; min-width: 0; }
.tool-card-action {
font-size: 12px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-card-detail {
font-size: 11px; color: var(--text-dim); margin-top: 1px;
font-family: var(--mono); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
/* Display-only spend chip on a tool card (e.g. search_x). Admin-mode only via
the .tool-group gate. */
.tool-card-cost {
font-size: 11px; color: var(--green); margin-top: 2px;
font-family: var(--mono); font-weight: 600;
}
.tool-card-status {
flex-shrink: 0; width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
}
.tool-card-spinner {
width: 14px; height: 14px; border: 2px solid var(--border);
border-top-color: var(--accent); border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.tool-card-check { color: var(--green); font-size: 14px; font-weight: 700; }
.tool-card-chev { color: var(--text-muted); font-size: 9px; transition: transform 0.15s; }
.tool-card[open] .tool-card-chev { transform: rotate(90deg); }
.tool-card-result {
padding: 8px 12px; border-top: 1px solid var(--border);
font-size: 11px; font-family: var(--mono); color: var(--text-dim);
max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
background: var(--bg);
}
.tool-card-result.web-search-results {
font-family: var(--sans); display: flex; flex-direction: column; gap: 6px;
white-space: normal;
}
.web-search-result {
display: flex; flex-direction: column; gap: 1px;
}
.web-search-result-title {
font-size: 11px; font-weight: 500; color: var(--text);
}
.web-search-result-url {
font-size: 10px; color: var(--text-muted);
}
/* User-facing skill note — quiet paper chip in the message flow, all users */
/* padding-left matches .tool-group (44px) so the pill aligns with the tool cards. */
/* ---- SKILL SHELF — playbooks the agent pulled for this stretch of work ----
One shelf accumulates sideways instead of one full-width pill stacking per
skill. The label owns its own row so it can't be stranded mid-line when the
books wrap. */
.skill-shelf-row { max-width: 768px; width: 100%; margin-inline: auto; padding-left: 44px; box-sizing: border-box; }
.skill-shelf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
margin: 10px 0;
}
.skill-shelf-lead {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--text-muted);
}
.skill-shelf-lead svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.skill-shelf-books { display: flex; flex-wrap: wrap; gap: 11px 13px; }
/* A closed booklet seen cover-on. Three cues carry it: a flat spine down the
left, a page block offset behind the cover (two solid box-shadows, no extra
elements), and a faint debossed frame inset in the cover.
Deliberately no :hover lift — nothing here is clickable, and a lift on a
non-interactive element reads as a broken affordance. */
.skill-book {
position: relative;
display: flex;
align-items: center;
width: 112px;
min-height: 62px;
padding: 10px 11px 10px 17px;
background: var(--cream);
border: 1px solid rgba(150, 128, 96, 0.38);
border-radius: 1px 4px 4px 1px;
font-family: var(--serif);
font-size: 11.5px;
font-weight: 500;
line-height: 1.28;
color: #33291c;
box-shadow:
2px 2px 0 -0.5px #f4ecda,
3.5px 3.5px 0 -0.5px #e9dfc6,
4px 6px 10px rgba(60, 50, 40, 0.17);
animation: skillBookIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
/* A long unbroken slug shouldn't stretch or overflow the cover */
overflow: hidden;
overflow-wrap: anywhere;
}
.skill-book::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 7px;
border-radius: 1px 0 0 1px;
background: var(--spine, var(--accent));
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.13);
}
.skill-book::after {
content: '';
position: absolute;
left: 12px;
right: 5px;
top: 5px;
bottom: 5px;
border: 1px solid rgba(90, 70, 40, 0.07);
border-radius: 1px;
pointer-events: none;
}
@keyframes skillBookIn {
from { opacity: 0; transform: translateY(-7px) rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
.skill-book { animation: none; }
}
/* Skill injection card — super admin visibility */
.skill-card .skill-icon { font-size: 1rem; }
.skill-card-preview { max-height: 200px; overflow-y: auto; font-size: 0.8rem; opacity: 0.8; }
.skill-card-section { padding: 6px 12px 8px; border-top: 1px solid var(--border); }
.skill-card-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 4px; }
.skill-card-ref { font-size: 0.78rem; color: var(--text-dim); font-family: monospace; padding: 1px 0; }
.tool-card.pending .tool-card-icon { animation: pulseGlow 1.5s infinite; }
/* Super-admin subagent trace inspector. Server authorization controls whether
these events exist; the admin-mode selector is only a visual backstop. */
.subagent-trace-group {
display: none; width: calc(100% - 44px); margin: 5px 0 8px 44px;
border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
overflow: hidden; flex-shrink: 0;
}
body.admin-mode .subagent-trace-group { display: block; }
/* Founder work slip — one warm desk note per assistant turn. The grouped
line-items make parallel work legible without exposing the machinery. */
.chat-log > .work-slip {
position: relative; width: 100%; max-width: 720px; margin: 4px auto 7px;
padding: 0; border: 1px solid var(--bubble-border); background: var(--cream);
color: var(--text); box-shadow: var(--shadow-sm);
clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 98%, 91% 96%, 86% 99%, 80% 96%, 74% 98%, 68% 96%, 61% 99%, 54% 96%, 47% 98%, 40% 96%, 33% 99%, 26% 96%, 19% 98%, 12% 96%, 6% 99%, 0 96%);
transform-origin: top left;
}
.work-slip[open] { padding-bottom: 10px; }
.work-slip.is-settled { animation: workSlipSettle 360ms var(--spring) both; }
.work-slip.is-replay { animation: none; }
.work-slip-summary {
display: flex; align-items: center; gap: 11px; min-height: 50px;
padding: 9px 17px 8px 23px; list-style: none; cursor: pointer;
color: var(--text);
}
.work-slip-summary::after {
content: "›"; flex: 0 0 auto; margin-left: auto; color: var(--text-muted);
font: 600 18px/1 var(--sans); transform: rotate(0); transition: transform 160ms ease-out;
}
.work-slip[open] > .work-slip-summary::after { transform: rotate(90deg); }
.work-slip-summary::-webkit-details-marker { display: none; }
.work-slip-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-slip-clip {
position: absolute; top: 4px; left: 16px; width: 13px; height: 31px;
border: 2px solid var(--text-dim); border-radius: 9px;
border-bottom-color: var(--border); transform: rotate(7deg); pointer-events: none;
}
.work-slip-clip::after {
content: ""; position: absolute; top: 4px; left: 2px; width: 5px; height: 20px;
border: 2px solid var(--text-muted); border-top: 0; border-radius: 0 0 5px 5px;
}
.work-slip-summary-copy { display: grid; min-width: 0; gap: 1px; padding-left: 10px; }
.work-slip-summary-text { font: 650 14px/1.3 var(--sans); overflow-wrap: anywhere; }
.work-slip-summary-info { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; }
.work-slip-summary-meta,
.work-slip-summary-elapsed { color: var(--text-muted); font: 600 10.5px/1.3 var(--sans); }
.work-slip-summary-elapsed { white-space: nowrap; font-variant-numeric: tabular-nums; }
.work-slip-summary-meta:not(:empty) + .work-slip-summary-elapsed:not(:empty) {
padding-left: 8px; border-left: 1px solid var(--border);
}
.work-slip-summary-meta:empty { display: none; }
.work-slip-summary-elapsed:empty { display: none; }
.work-slip-body { padding: 0 14px 7px 16px; }
.work-slip-rows { display: flex; flex-direction: column; gap: 5px; }
.work-slip-row {
display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 8px;
align-items: start; padding: 7px 9px 6px 7px;
border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 5px;
animation: workSlipRowIn 220ms ease-out both;
}
.work-slip-row.is-static { animation: none; }
.work-slip.is-replay .work-slip-row { animation: none; }
.work-slip.is-replay .work-slip-row.just-finished .work-slip-check,
.work-slip.is-replay .work-slip-row.is-working .work-slip-check { animation: none; }
.work-slip-row.is-working {
border-color: var(--accent); background: var(--accent-dim);
}
.work-slip-row.is-done { opacity: 0.72; }
.work-slip-row.is-hiccup { border-color: var(--warn-amber); }
.work-slip-check {
position: relative; width: 17px; height: 17px; display: grid; place-items: center; margin-top: 1px;
border: 1.5px solid var(--text-muted); border-radius: 50%;
color: var(--accent); font: 700 12px/1 var(--sans);
}
.work-slip-row.is-working .work-slip-check {
width: 10px; height: 10px; margin: 5px 3px; border: 0; border-radius: 50%;
background: var(--accent); animation: presenceBreathe 3s ease-in-out infinite;
}
.work-slip-row.is-working .work-slip-check::after {
content: ""; position: absolute; inset: -4px; border: 1px solid var(--accent); border-radius: 50%;
animation: workSlipPulse 1.8s ease-out infinite;
}
.work-slip-row.is-done .work-slip-check { border-color: var(--accent); background: var(--accent-dim); }
.work-slip-row.just-finished .work-slip-check { animation: workSlipTick 240ms var(--spring) both; }
.work-slip-row.is-hiccup .work-slip-check { border-color: var(--warn-amber); color: var(--warn-amber); }
.work-slip-row-copy { min-width: 0; }
.work-slip-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.work-slip-label { min-width: 0; font: 600 12.5px/1.35 var(--sans); overflow-wrap: anywhere; }
.work-slip-row-state {
flex: 0 0 auto; color: var(--text-muted); font: 600 9.5px/1.3 var(--sans);
text-transform: uppercase; letter-spacing: 0.055em;
}
.work-slip-row.is-working .work-slip-row-state { color: var(--accent); }
.work-slip-row.is-hiccup .work-slip-row-state { color: var(--warn-amber); }
.work-slip-row-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.work-slip-subline { color: var(--text-muted); font: 10.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.work-slip-sources { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.work-slip-sources::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7;
}
.work-slip-files { display: flex; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.work-slip-file {
display: inline; max-width: 100%; color: var(--text-muted);
font: 500 9.75px/1.3 var(--mono); overflow-wrap: anywhere;
}
.work-slip-hiccup { color: var(--warn-amber); }
.work-slip-overflow,
.work-slip-expectation { margin: 7px 3px 0 27px; color: var(--text-muted); font: 11px/1.35 var(--sans); }
.work-slip-overflow:empty { display: none; }
.work-slip-expectation { opacity: 0; transform: translateY(3px); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.work-slip-expectation.is-visible { opacity: 1; transform: translateY(0); }
.work-slip.is-settled .work-slip-expectation,
.work-slip.is-stopped .work-slip-expectation { display: none; }
.work-slip.is-settled .work-slip-summary { min-height: 46px; color: var(--text); }
.work-slip.is-settled .work-slip-summary-text { font-size: 13px; }
.work-slip.is-stopped .work-slip-summary { color: var(--text-muted); }
@keyframes workSlipRowIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes workSlipSettle {
0% { transform: rotate(0) scale(1); }
55% { transform: rotate(-0.4deg) scale(0.985); }
100% { transform: rotate(0) scale(1); }
}
@keyframes workSlipTick {
0% { transform: scale(0.75); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes workSlipPulse {
0% { opacity: 0.65; transform: scale(0.75); }
75%, 100% { opacity: 0; transform: scale(1.55); }
}
@media (max-width: 640px) {
.chat-log > .work-slip { max-width: none; }
.work-slip-summary { min-height: 48px; padding: 8px 11px 8px 19px; }
.work-slip-body { padding: 0 9px 7px 11px; }
.work-slip-row { padding-right: 7px; }
.work-slip-row-heading { align-items: flex-start; }
.work-slip-row-state { padding-top: 2px; }
.work-slip-clip { left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.work-slip,
.work-slip.is-settled,
.work-slip-row,
.work-slip-row.just-finished .work-slip-check,
.work-slip-row.is-working .work-slip-check,
.work-slip-row.is-working .work-slip-check::after { animation: none; }
.work-slip-summary::after { transition: none; }
.work-slip-expectation { transition: opacity 180ms ease-out; transform: none; }
}
.subagent-trace-group > summary {
min-height: 38px; display: grid; grid-template-columns: 24px auto minmax(100px, 1fr) 12px;
align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer; list-style: none;
}
.subagent-trace-group > summary::-webkit-details-marker,
.subagent-trace-child > summary::-webkit-details-marker { display: none; }
.subagent-trace-group[open] > summary .tool-card-chev,
.subagent-trace-child[open] > summary .tool-card-chev { transform: rotate(90deg); }
.subagent-trace-icon { display: inline-flex; color: var(--accent); }
.subagent-trace-title { font-size: 12px; font-weight: 600; color: var(--text); }
.subagent-trace-summary { justify-self: end; color: var(--text-muted); font: 10px/1.3 var(--mono); }
.subagent-trace-children { border-top: 1px solid var(--border); }
.subagent-file-coordination {
border-top: 1px solid var(--border); padding: 10px 14px 12px;
background: var(--surface2); color: var(--text-dim);
}
.subagent-file-coordination h4 {
margin-bottom: 7px; color: var(--text); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.subagent-file-coordination-events { display: grid; gap: 6px; }
.subagent-file-coordination-event {
padding: 7px 9px; border: 1px solid var(--border-light); border-left: 3px solid var(--accent);
border-radius: 5px; background: var(--surface); font-size: 10px;
}
.subagent-file-coordination-event.is-warning { border-left-color: var(--warn-amber); }
.subagent-file-coordination-event.is-error { border-left-color: var(--red); }
.subagent-file-coordination-event.is-success { border-left-color: var(--green); }
.subagent-file-coordination-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.subagent-file-coordination-heading strong { color: var(--text); font-size: 11px; }
.subagent-file-coordination-heading code { min-width: 0; color: var(--text-dim); overflow-wrap: anywhere; }
.subagent-file-coordination-event p { margin: 3px 0 0; line-height: 1.4; }
.subagent-file-coordination-event .subagent-file-coordination-meta { color: var(--text-muted); font-family: var(--mono); }
.subagent-parent-result {
border-top: 1px solid var(--border); padding: 11px 14px 14px;
background: var(--surface2); color: var(--text-dim);
}
.subagent-parent-result.is-error { border-left: 3px solid var(--red); }
.subagent-parent-result h4 {
margin-bottom: 6px; color: var(--text); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.subagent-parent-result pre {
max-height: 240px; overflow: auto; padding: 9px; border: 1px solid var(--border-light);
border-radius: 6px; background: var(--surface); color: var(--text-dim);
white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.5 var(--mono);
}
.subagent-parent-result .subagent-trace-muted { padding: 0; }
.subagent-trace-child { border-bottom: 1px solid var(--border); }
.subagent-trace-child:last-child { border-bottom: 0; }
.subagent-trace-child-summary {
min-height: 36px; display: grid;
grid-template-columns: 9px minmax(90px, 1.3fr) minmax(130px, 1.6fr) 62px 58px 70px 72px auto 12px;
align-items: center; gap: 7px; padding: 7px 11px; cursor: pointer; list-style: none;
color: var(--text-muted); font: 10px/1.25 var(--mono);
}
.subagent-trace-child-summary strong { color: var(--text); font: 600 11px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; }
.subagent-trace-child-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subagent-trace-child-summary em { color: var(--warn-amber); font-style: normal; }
.subagent-trace-status { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.subagent-trace-status.is-running { background: var(--amber); animation: presenceBreathe 3s ease-in-out infinite; }
.subagent-trace-status.is-complete { background: var(--green); }
.subagent-trace-status.is-error { background: var(--red); }
@media (prefers-reduced-motion: reduce) {
.subagent-trace-status.is-running { animation: none; }
}
.subagent-trace-tabs { display: flex; gap: 2px; padding: 8px 11px 0; border-top: 1px solid var(--border-light); }
.subagent-trace-tabs button {
border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted);
padding: 5px 8px; cursor: pointer; font-size: 10px;
}
.subagent-trace-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.subagent-trace-panel { max-height: 390px; overflow: auto; padding: 10px 14px 14px; font-size: 11px; color: var(--text-dim); }
.subagent-trace-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; }
.subagent-trace-kv div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px; }
.subagent-trace-kv dt { color: var(--text-muted); }
.subagent-trace-kv dd { min-width: 0; overflow-wrap: anywhere; }
.subagent-trace-kv code { font-size: 10px; }
.subagent-trace-panel section { margin-top: 12px; }
.subagent-trace-panel h4 { margin-bottom: 4px; color: var(--text); font-size: 10px; text-transform: uppercase; }
.subagent-trace-panel pre {
padding: 8px; border-radius: 6px; background: var(--surface2); color: var(--text-dim);
white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.5 var(--mono);
}
.subagent-trace-muted { color: var(--text-muted); padding: 10px 0; }
.subagent-cache-table-wrap { overflow-x: auto; }
.subagent-cache-table { width: 100%; border-collapse: collapse; font: 10px/1.3 var(--mono); }
.subagent-cache-table th, .subagent-cache-table td { padding: 5px 7px; text-align: right; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.subagent-cache-table th:first-child, .subagent-cache-table td:first-child,
.subagent-cache-table th:last-child, .subagent-cache-table td:last-child { text-align: left; }
.subagent-trace-fingerprints { margin-top: 10px; }
@media (max-width: 760px) {
.subagent-trace-group { width: 100%; margin-left: 0; }
.subagent-trace-child-summary { grid-template-columns: 9px minmax(80px, 1fr) minmax(100px, 1.5fr) 52px 12px; }
.subagent-trace-child-summary > span:nth-of-type(n+4),
.subagent-trace-child-summary > em { display: none; }
.subagent-trace-kv { grid-template-columns: 1fr; }
}
@keyframes pulseGlow {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ── Retrieved chunks panel (admin-only) ── */
.chunks-card { display: none; flex-shrink: 0; }
body.admin-mode .chunks-card { display: block; }
.chunks-card-body { max-height: 400px; }
.chunk-item {
padding: 4px 0;
border-bottom: 1px solid var(--border-light);
}
.chunk-item:last-child { border-bottom: none; }
.chunk-summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
user-select: none;
padding: 2px 0;
}
.chunk-summary::-webkit-details-marker { display: none; }
.chunk-item[open] > .chunk-summary .tool-card-chev { transform: rotate(90deg); }
.chunk-section {
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-secondary);
background: var(--surface-alt, var(--surface));
padding: 1px 6px;
border-radius: 3px;
}
.chunk-match {
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chunk-match--hybrid { background: var(--cyan-dim, #e0f7fa); color: var(--cyan, #00838f); }
.chunk-match--semantic { background: var(--purple-dim, #f3e5f5); color: var(--purple, #7b1fa2); }
.chunk-match--keyword { background: var(--orange-dim, #fff3e0); color: var(--orange, #e65100); }
.chunk-match--personal { background: var(--purple-dim, #f3e5f5); color: var(--purple, #7b1fa2); }
.chunk-match--team { background: var(--orange-dim, #fff3e0); color: var(--orange, #e65100); }
.chunk-score {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-muted);
margin-left: auto;
}
.chunk-full-content {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
padding: 6px 8px 6px 20px;
background: var(--bg);
border-radius: 4px;
margin-top: 4px;
max-height: 300px;
overflow-y: auto;
}
.turn-marker {
font-size: 10px; color: var(--text-muted); padding: 2px 0;
}
.turn-marker summary {
display: flex; align-items: center; gap: 10px;
cursor: pointer; list-style: none;
}
.turn-marker summary::-webkit-details-marker { display: none; }
.turn-marker summary::before, .turn-marker summary::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.turn-marker-details { text-align: center; padding-top: 5px; }
.telemetry-chev { display: inline-block; font-size: 8px; transition: transform 0.15s ease; }
details[open] > summary .telemetry-chev { transform: rotate(90deg); }
.turn-pill {
font-family: var(--mono);
font-size: 11px;
color: var(--text-muted);
opacity: 0.7;
letter-spacing: 0.02em;
}
.turn-pill.warn { color: var(--warn-amber); opacity: 1; }
.turn-pill.start {
font-weight: 500;
opacity: 0.85;
}
.completion-card {
color: var(--text-dim); font-size: 11px; margin-bottom: 8px;
background: var(--green-dim);
border: 1px solid color-mix(in srgb, var(--green) 32%, var(--border));
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
overflow: hidden; flex-shrink: 0;
}
.completion-summary {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
color: var(--green); font-size: 11px; font-weight: 600;
cursor: pointer; list-style: none;
}
.completion-summary::-webkit-details-marker { display: none; }
.completion-summary::marker { content: ''; }
.completion-card[open] .completion-summary {
border-bottom: 1px solid color-mix(in srgb, var(--green) 24%, var(--border-light));
}
.completion-stats {
display: flex; gap: 20px; flex-wrap: wrap;
margin: 10px; padding: 12px 14px;
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--green) 20%, var(--border));
border-radius: calc(var(--radius-sm) - 2px);
box-shadow: inset 0 1px 0 var(--border-light);
}
.completion-stats .stat { font-size: 11px; }
.completion-stats .stat .label {
color: var(--text-dim); display: block; margin-bottom: 2px; font-weight: 600;
}
.completion-stats .stat .value {
color: var(--text); font-weight: 700; font-size: 15px; font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.error-card {
background: var(--red-dim); border: 1px solid rgba(255,45,85,0.2);
border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--red);
}
.turn-save-notice {
color: var(--text-muted);
font-size: 12px;
line-height: 1.4;
}
.turn-save-notice strong {
color: inherit;
font-weight: 600;
}
/* ---- Developer elements: hidden for normal users, visible in admin mode ---- */
.persona-badge { display: none; }
.topbar .model-badge { display: none; }
.topbar .cost-display { display: none; }
.lock-badge { display: none; }
.turn-marker { display: none; }
.tool-group { display: none; }
.completion-card { display: none; }
body.admin-mode .persona-badge { display: flex; }
body.admin-mode .topbar .model-badge { display: inline-block; }
body.admin-mode .topbar .cost-display { display: inline-block; }
body.admin-mode .lock-badge { display: inline-block; }
body.admin-mode .turn-marker { display: block; }
body.admin-mode .tool-group { display: flex; flex-direction: column; }
body.admin-mode .completion-card { display: block; }
/* ---- MONOLOGUE (unified: thinking + writing narration) ---- */
.msg-monologue {
animation: monoSlideIn 0.25s ease-out;
--mono-accent: var(--purple);
}
.msg-monologue.mono-green { --mono-accent: var(--green); }
@keyframes monoSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-monologue .msg-avatar { display: none; }
.msg-monologue .msg-body { max-width: 85%; }
/* --- Sender label --- */
.msg-monologue .msg-sender {
color: var(--mono-accent); opacity: 0.55;
font-size: 10.5px; margin-bottom: 2px;
}
.mono-icon {
font-size: 13px; margin-right: 3px; opacity: 0.9;
font-style: normal; display: inline-block;
}
.mono-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
opacity: 0.6; font-weight: 500; font-style: normal;
}
/* --- Streaming — sticky note (active) --- */
.msg-monologue .msg-content {
font-size: 13px; color: var(--text-dim); line-height: 1.55;
background: #fff8c5;
border: none;
border-radius: 2px;
padding: 12px 14px; position: relative;
box-shadow: 2px 3px 8px rgba(60, 50, 40, 0.1);
transform: rotate(-0.6deg);
cursor: default;
transition: background 0.3s, border-color 0.3s, border-radius 0.3s, padding 0.3s,
opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
/* Sticky note lifts and straightens on hover — feels alive */
.msg-monologue:not(.finalized) .msg-content:hover {
transform: rotate(0deg) scale(1.04) translateY(-4px);
box-shadow: 4px 8px 24px rgba(60, 50, 40, 0.15);
z-index: 20;
}
.msg-monologue.mono-green .msg-content {
background: #e8f5e9;
}
.msg-monologue .msg-content p { margin: 0 0 4px 0; }
.msg-monologue .msg-content p:last-child { margin-bottom: 0; }
.msg-monologue .msg-content strong { color: var(--text); font-weight: 600; }
.msg-monologue .msg-content em { font-style: italic; opacity: 0.9; }
.msg-monologue .msg-content code {
font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
background: rgba(60, 50, 40, 0.08);
}
/* Icon bob while streaming */
.msg-monologue:not(.finalized) .mono-icon {
animation: monoBob 2s ease-in-out infinite;
}
@keyframes monoBob {
0%, 100% { transform: translateY(0) scale(1); }
40% { transform: translateY(-2px) scale(1.12); }
60% { transform: translateY(-1px) scale(1.06); }
}
/* Streaming — subtle glow on sticky note */
.msg-monologue .msg-content.streaming {
box-shadow: 2px 3px 8px rgba(60, 50, 40, 0.1),
0 0 12px rgba(245, 200, 50, 0.15);
}
/* Blinking cursor that follows the text */
.msg-monologue .msg-content.streaming::after {
content: '\25CD'; color: var(--mono-accent); opacity: 0.5;
animation: monoCursor 0.8s ease-in-out infinite;
font-weight: 300; font-size: 14px; margin-left: 1px;
}
@keyframes monoCursor {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.1; }
}
/* --- Finalized — sticky note folds away --- */
.msg-monologue.finalized .msg-content {
background: transparent; border-color: transparent;
border-radius: 0; padding: 0;
animation: none; box-shadow: none;
transform: rotate(0deg);
}
.msg-monologue.finalized .msg-content::after { display: none; }
/* --- Collapsed — single inline trace --- */
.msg-monologue.finalized.collapsed { cursor: pointer; }
.msg-monologue.finalized.collapsed .msg-body {
display: flex; align-items: baseline; gap: 6px;
}
.msg-monologue.finalized.collapsed .msg-sender {
flex-shrink: 0; margin-bottom: 0;
}
.msg-monologue.finalized.collapsed .msg-content {
opacity: 0.3; font-size: 12px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-height: 1.6em; flex: 1; min-width: 0;
}
.msg-monologue.finalized.collapsed .msg-content p {
display: inline; margin: 0;
}
.msg-monologue.finalized.collapsed .msg-content p + p::before {
content: ' ';
}
.msg-monologue.finalized.collapsed:hover .msg-content { opacity: 0.5; }
.msg-monologue.finalized.collapsed:hover .mono-chevron { opacity: 0.7; }
/* Chevron affordance */
.mono-chevron {
display: none; font-size: 10px; color: var(--text-dim);
opacity: 0.5; transition: transform 0.2s, opacity 0.2s;
flex-shrink: 0; user-select: none;
}
.msg-monologue.finalized.collapsed .mono-chevron { display: inline-block; }
/* --- Expanded — full text, still no bubble --- */
.msg-monologue.finalized.collapsed.expanded .msg-body { display: block; }
.msg-monologue.finalized.collapsed.expanded .msg-content {
white-space: normal; overflow: visible; max-height: none;
text-overflow: unset; opacity: 0.4; margin-top: 4px; font-size: 13px;
}
.msg-monologue.finalized.collapsed.expanded .msg-content p {
display: block; margin: 0 0 4px 0;
}
.msg-monologue.finalized.collapsed.expanded .msg-content p + p::before {
content: none;
}
.msg-monologue.finalized.collapsed.expanded .mono-chevron {
transform: rotate(90deg);
}
/* ==================================================================
* NATIVE THINKING — raw model cognition (tester-mode observability)
* Distinct from Haiku monologue (which is a yellow sticky note).
* This is a cooler "lab notebook" card — muted gray, monospace font,
* collapsible. Meant to feel like a developer trace, not personality.
* ================================================================== */
.msg-native-thinking {
animation: monoSlideIn 0.25s ease-out;
margin: 6px 0;
}
.msg-native-thinking .msg-body {
max-width: 85%;
background: rgba(90, 100, 110, 0.06);
border-left: 2px solid rgba(90, 100, 110, 0.35);
border-radius: 3px;
padding: 8px 12px;
transition: background 0.3s, opacity 0.3s;
}
.msg-native-thinking .native-think-sender {
display: flex; align-items: center; gap: 6px;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
color: rgba(90, 100, 110, 0.85);
margin-bottom: 4px;
}
.native-think-icon { font-size: 12px; filter: grayscale(0.3); }
.native-think-label { font-weight: 500; }
/* Animated dots while streaming */
.native-think-dots {
display: inline-flex; gap: 3px; margin-left: 4px;
}
.native-think-dots span {
width: 3px; height: 3px; border-radius: 50%;
background: rgba(90, 100, 110, 0.5);
animation: nativeThinkDot 1.2s ease-in-out infinite;
}
.native-think-dots span:nth-child(2) { animation-delay: 0.15s; }
.native-think-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes nativeThinkDot {
0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
30% { opacity: 1; transform: scale(1.4); }
}
.msg-native-thinking.finalized .native-think-dots { display: none; }
/* Content — monospace, preserves line breaks */
.native-think-content {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11.5px; line-height: 1.5;
color: rgba(60, 70, 80, 0.85);
white-space: pre-wrap; word-break: break-word;
}
.native-think-content.streaming::after {
content: '▌'; opacity: 0.4; margin-left: 1px;
animation: monoCursor 0.8s ease-in-out infinite;
}
/* Finalized — fade a touch so it recedes visually */
.msg-native-thinking.finalized .msg-body {
background: rgba(90, 100, 110, 0.03);
border-left-color: rgba(90, 100, 110, 0.2);
}
/* Collapsed — single-line preview with chevron */
.msg-native-thinking.finalized.collapsed { cursor: pointer; }
.msg-native-thinking.finalized.collapsed .msg-body {
display: flex; align-items: baseline; gap: 8px;
padding: 4px 10px;
}
.msg-native-thinking.finalized.collapsed .native-think-sender {
margin-bottom: 0; flex-shrink: 0;
}
.msg-native-thinking.finalized.collapsed .native-think-content {
opacity: 0.4; font-size: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1; min-width: 0;
}
.msg-native-thinking.finalized.collapsed:hover .native-think-content { opacity: 0.7; }
.msg-native-thinking.finalized.collapsed:hover .native-think-chevron { opacity: 0.7; }
.native-think-chevron {
display: none; font-size: 10px; opacity: 0.4;
color: rgba(90, 100, 110, 0.7);
transition: transform 0.2s, opacity 0.2s;
flex-shrink: 0;
}
.msg-native-thinking.finalized.collapsed .native-think-chevron { display: inline-block; }
/* Expanded — show full text */
.msg-native-thinking.finalized.collapsed.expanded .msg-body {
display: block; padding: 8px 12px;
}
.msg-native-thinking.finalized.collapsed.expanded .native-think-sender {
margin-bottom: 4px;
}
.msg-native-thinking.finalized.collapsed.expanded .native-think-content {
white-space: pre-wrap; overflow: visible;
text-overflow: unset; opacity: 0.75; font-size: 11.5px;
}
.msg-native-thinking.finalized.collapsed.expanded .native-think-chevron {
transform: rotate(90deg);
}
/* ---- MIND WRAPPER — consolidated thinking + reasoning per agent turn ----
Replaces stacking Haiku sticky notes. Native reasoning renders as an entry
inside instead of a separate chip. Easing + motion tuned per
docs/solutions/thinking-consolidation-prototype.html (web-animation-design skill):
- Enter/exit: ease-out-cubic (0.215, 0.61, 0.355, 1)
- Morph: ease-in-out-cubic (0.645, 0.045, 0.355, 1)
- Hover: ease (default)
Only transform + opacity animate (GPU path). */
/* .msg-mind is a marker class on .msg.msg-assistant — no standalone bubble
styling. The nested .bubble-thinking below is the collapsible disclosure. */
.bubble-thinking {
margin-bottom: 0;
transition: margin-bottom 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bubble-thinking.expanded { margin-bottom: 8px; }
.bubble-thinking.expanded + .msg-content {
border-top: 1px dashed var(--border-light);
padding-top: 8px;
}
@keyframes mindEnter {
from { opacity: 0; transform: translateY(6px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mind-header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
cursor: pointer;
user-select: none;
border-radius: 4px;
transition: background 120ms ease;
}
.mind-header:hover { background: rgba(120, 85, 40, 0.04); }
.mind-header .mind-icon { font-size: 14px; }
.mind-header .mind-label {
font-variant: small-caps;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--accent);
font-size: 12px;
}
.mind-header .mind-status-text {
font-weight: 600;
color: var(--accent);
font-size: 12px;
white-space: nowrap;
}
.bubble-thinking:not(.finalized) .mind-status-text {
animation: mindStatusPulse 1.6s ease-in-out infinite;
will-change: opacity;
}
.bubble-thinking:not(.finalized) .mind-status-text::after {
content: "";
display: inline-block;
animation: mindStatusDots 1.4s steps(4, end) infinite;
white-space: pre;
}
@keyframes mindStatusPulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes mindStatusDots {
0% { content: ""; }
25% { content: "."; }
50% { content: ".."; }
75% { content: "..."; }
100% { content: ""; }
}
.mind-header .mind-count {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
white-space: nowrap;
margin-left: auto;
}
.mind-header .mind-count:empty { display: none; }
.mind-header .mind-count:empty + .mind-chev { margin-left: auto; }
.mind-header .mind-chev {
transition: transform 220ms cubic-bezier(0.215, 0.61, 0.355, 1);
color: var(--text-muted);
font-size: 13px;
display: inline-block;
will-change: transform;
}
.bubble-thinking.expanded .mind-header .mind-chev { transform: rotate(90deg); }
.mind-timeline-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 280ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bubble-thinking.expanded .mind-timeline-wrap { grid-template-rows: 1fr; }
.mind-timeline {
overflow: hidden;
min-height: 0;
padding: 0 16px;
border-top: 1px solid transparent;
opacity: 0;
transition:
padding-top 280ms cubic-bezier(0.645, 0.045, 0.355, 1),
padding-bottom 280ms cubic-bezier(0.645, 0.045, 0.355, 1),
border-top-color 280ms cubic-bezier(0.645, 0.045, 0.355, 1),
opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1) 40ms;
}
.bubble-thinking.expanded .mind-timeline {
padding: 4px 16px 14px 16px;
border-top-color: var(--border-light);
opacity: 1;
}
.mind-entry {
padding: 10px 0;
border-bottom: 1px dashed var(--border-light);
font-size: 14px;
line-height: 1.55;
color: var(--text);
animation: mindEntryIn 220ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
will-change: transform, opacity;
}
@keyframes mindEntryIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.mind-entry:last-child { border-bottom: none; }
.mind-entry .entry-tag {
font-size: 10px;
font-variant: small-caps;
letter-spacing: 0.1em;
font-weight: 600;
margin-right: 8px;
padding: 2px 6px;
border-radius: 3px;
}
.mind-entry[data-kind="haiku"] .entry-tag { background: #fff2b8; color: #7a5a1c; }
.mind-entry[data-kind="native"] .entry-tag { background: #efe5f2; color: #5a3e70; }
.mind-entry[data-kind="native"] .entry-text {
font-family: "SF Mono", Menlo, monospace;
font-size: 12px;
color: #4a3360;
white-space: pre-wrap;
}
.mind-dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
animation: mindDotPulse 1.2s ease-in-out infinite;
transition:
opacity 240ms cubic-bezier(0.215, 0.61, 0.355, 1),
transform 240ms cubic-bezier(0.215, 0.61, 0.355, 1);
will-change: opacity, transform;
}
@keyframes mindDotPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.bubble-thinking.finalized .mind-dot {
opacity: 0;
transform: scale(0.5);
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.msg-mind,
.mind-entry,
.mind-dot,
.mind-header,
.mind-header .mind-chev,
.mind-timeline-wrap,
.mind-timeline {
animation: none;
transition: none;
}
}
/* ---- CHAT MARKDOWN (left pane) ---- */
.msg-content h1, .msg-content h2, .msg-content h3,
.msg-content h4, .msg-content h5, .msg-content h6 {
font-weight: 700;
line-height: 1.3;
color: var(--text);
margin-bottom: 6px;
}
.msg-content h1 { font-size: 22px; margin-top: 22px; }
.msg-content h2 { font-size: 19px; margin-top: 20px; }
.msg-content h3 { font-size: 17px; margin-top: 18px; font-weight: 600; }
.msg-content h4 { font-size: 15px; margin-top: 14px; font-weight: 600; }
.msg-content h5 { font-size: 14px; margin-top: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.msg-content h6 { font-size: 13px; margin-top: 10px; font-weight: 600; color: var(--text-dim); }
/* First heading in a bubble shouldn't push down from the top padding */
.msg-content > h1:first-child,
.msg-content > h2:first-child,
.msg-content > h3:first-child,
.msg-content > h4:first-child,
.msg-content > h5:first-child,
.msg-content > h6:first-child { margin-top: 0; }
.msg-content table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12px; }
.msg-content th, .msg-content td {
border: 1px solid var(--border); padding: 5px 8px; text-align: left;
}
.msg-content th { background: var(--surface); font-weight: 600; font-size: 11px; }
.msg-content tr:nth-child(even) { background: var(--surface); }
.msg-content ul, .msg-content ol { margin: 8px 0 10px 22px; }
.msg-content li { margin-bottom: 4px; }
.msg-content li > ul, .msg-content li > ol { margin-top: 4px; margin-bottom: 4px; }
.msg-content blockquote {
border-left: 3px solid var(--accent);
margin: 12px 0;
padding: 4px 0 4px 16px;
background: transparent;
color: var(--text-dim);
font-size: 15px;
line-height: 1.55;
font-style: italic;
}
.msg-content blockquote p { margin: 0; }
.msg-content blockquote p + p { margin-top: 8px; }
.msg-content hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.msg-content a { color: var(--link-color); text-decoration: none; }
.msg-content a:hover { text-decoration: underline; }
.msg-content img { max-width: 100%; border-radius: var(--radius-sm); }
/* Image generating indicator (spinner + text in chat bubble) */
.generating-text {
display: inline-flex;
align-items: center;
gap: 6px;
font-style: italic;
color: var(--text-muted);
animation: pulse-gen 2s ease-in-out infinite;
}
@keyframes pulse-gen {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.generating-spinner {
animation: spin-gen 1.2s linear infinite;
stroke: var(--accent);
flex-shrink: 0;
}
.generating-phase {
transition: opacity 0.2s ease;
}
.generating-timer {
font-family: var(--font-mono);
font-size: 0.75rem;
opacity: 0.5;
}
@keyframes spin-gen {
to { transform: rotate(360deg); }
}
/* Download button overlay on generated images */
.generated-image-wrapper {
position: relative;
display: inline-block;
}
.generated-image-wrapper .generated-image-download {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #1a1a1a;
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
text-decoration: none;
}
.generated-image-wrapper:hover .generated-image-download {
opacity: 1;
}
.generated-image-wrapper .generated-image-download:hover {
background: #f0f0f0;
transform: translateY(-1px) rotate(-3deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Glowing inline typing cursor while Sarah is talking */
.streaming-cursor {
display: inline-block;
width: 3px;
height: 1.1em;
background: var(--accent);
margin-left: 2px;
vertical-align: text-bottom;
border-radius: 1.5px;
box-shadow: 0 0 6px rgba(0, 122, 255, 0.5);
animation: chatCursorPulse 0.8s ease-in-out infinite;
}
@keyframes chatCursorPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ---- TYPING INDICATOR ---- */
.typing-dots span {
display: inline-block;
font-size: 24px; line-height: 1;
color: var(--text-muted);
animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ---- DRAFT COLLAPSE (after file is saved) ---- */
.msg-draft-collapsed .msg-content {
max-height: 120px;
overflow: hidden;
opacity: 0.6;
position: relative;
}
.msg-draft-collapsed .msg-content::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40px;
background: linear-gradient(transparent, var(--fade-gradient));
pointer-events: none;
}
.msg-draft-collapsed .draft-toggle {
display: block;
padding: 4px 0;
font-size: 11px;
color: var(--accent);
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
.msg-draft-collapsed .draft-toggle:hover { text-decoration: underline; }
.msg-draft-collapsed.expanded .msg-content {
max-height: none;
opacity: 0.75;
}
.msg-draft-collapsed.expanded .msg-content::after { display: none; }
/* ---- WRITING NARRATION TICKER (fixed-height, zero bounce) ---- */
.narration-ticker {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
margin: 0;
}
.narration-ticker > .narration-ticker-inner {
overflow: hidden;
}
.narration-ticker.visible {
grid-template-rows: 1fr;
opacity: 1;
}
.narration-ticker-inner {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 12px;
font-size: 12.5px;
color: var(--green);
opacity: 0.65;
}
.narration-ticker-icon {
flex-shrink: 0;
font-size: 13px;
animation: monoBob 2s ease-in-out infinite;
}
.narration-ticker-label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
opacity: 0.7;
flex-shrink: 0;
}
.narration-ticker-text {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-style: italic;
color: var(--text-dim);
transition: opacity 0.3s ease;
}
.narration-ticker-text.cross-fade {
opacity: 0;
}
/* Finalized — collapse to trace */
.narration-ticker.finalized {
opacity: 0.4;
cursor: pointer;
transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.narration-ticker.finalized .narration-ticker-inner {
max-height: 20px;
gap: 6px;
}
.narration-ticker.finalized .narration-ticker-icon {
animation: none;
font-size: 11px;
}
.narration-ticker.finalized:hover {
opacity: 0.6;
}
/* Removing — shrink to nothing */
.narration-ticker.removing {
grid-template-rows: 0fr;
opacity: 0;
margin: 0;
}
/* ---- LIVE FILE STREAMING ---- */
.output-source.streaming,
.output-rendered.streaming {
position: relative;
}
/* Inline streaming cursor — avatar pill that follows the text */
.stream-cursor {
display: inline-flex;
align-items: center;
gap: 5px;
vertical-align: baseline;
margin-left: 4px;
padding: 2px 8px 2px 2px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(99, 102, 241, 0.12));
border: 1.5px solid rgba(16, 185, 129, 0.35);
animation: cursorPulse 2s ease-in-out infinite;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
position: relative;
top: -1px;
}
/* Streaming cursor avatar — Polaroid style */
.stream-cursor-avatar {
width: 18px; height: 18px; border-radius: 2px;
overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid white;
background: var(--purple);
color: white; font-size: 10px; font-weight: 700;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.stream-cursor-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
.stream-cursor-label {
color: var(--green);
font-weight: 600;
letter-spacing: 0.02em;
}
@keyframes cursorPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.15); }
}
/* Fade-out when streaming ends */
.stream-cursor.fade-out {
animation: cursorFadeOut 0.5s ease forwards;
}
@keyframes cursorFadeOut {
to { opacity: 0; transform: scale(0.8); }
}
/* Glow effect on the output pane while streaming */
.output-content.streaming-active {
box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.05);
border-left: 2px solid rgba(16, 185, 129, 0.3);
}
.file-tab.writing {
color: var(--green) !important;
position: relative;
}
.file-tab.writing::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--green), var(--accent), var(--green));
background-size: 200% 100%;
animation: writeShimmer 1.5s linear infinite;
}
@keyframes writeShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* output-header-status removed — presence indicator replaces it */
.output-header-status-legacy {
display: none; /* kept as no-op for safety */
animation: fadeIn 0.3s ease;
}
.output-header-status .status-dot {
width: 6px; height: 6px; background: var(--green); border-radius: 50%;
animation: pulse 1s infinite;
}
.output-header-status .status-bar {
width: 60px; height: 3px; background: var(--border); border-radius: 2px;
overflow: hidden;
}
.output-header-status .status-bar-fill {
height: 100%; background: var(--green); border-radius: 2px;
transition: width 0.3s ease;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Scrollbar lights up green during streaming */
.output-content.streaming-active::-webkit-scrollbar-thumb {
background: rgba(16, 185, 129, 0.4);
}
/* Edit highlight — source mode (phase 1: shown for 2s) */
.edit-highlight {
background: rgba(16, 185, 129, 0.2);
border-left: 3px solid var(--green);
margin-left: -3px;
padding-left: 3px;
animation: editFlashSource 2s ease-in-out infinite;
}
@keyframes editFlashSource {
0%, 100% { background: rgba(16, 185, 129, 0.2); }
50% { background: rgba(16, 185, 129, 0.35); }
}
/* Edit highlight — rendered WYSIWYG view (phase 2: persistent green glow) */
.edit-highlight-rendered {
background: rgba(16, 185, 129, 0.12);
border-left: 3px solid var(--green);
padding: 8px 12px 8px 16px;
margin: 4px 0 4px -3px;
border-radius: 4px;
transition: background 1.8s ease-out, border-color 1.8s ease-out;
animation: editPulseRendered 2.5s ease-in-out 2;
}
.edit-highlight-rendered > *:first-child { margin-top: 0; }
.edit-highlight-rendered > *:last-child { margin-bottom: 0; }
@keyframes editPulseRendered {
0%, 100% { background: rgba(16, 185, 129, 0.12); }
50% { background: rgba(16, 185, 129, 0.25); }
}
.edit-highlight-rendered.fade {
background: transparent;
border-left-color: transparent;
}
/* Append highlight — shows newly appended content in preview */
.append-highlight {
border-left: 3px solid var(--green);
background: rgba(16, 185, 129, 0.08);
margin-top: 8px;
padding-top: 16px;
transition: background 1.5s ease, border-color 1.5s ease;
}
.append-highlight.fade {
background: transparent;
border-left-color: transparent;
}
/* ---- OUTPUT STATUS BAR (footer inside the page) ---- */
.output-status {
padding: 0 28px;
border: none;
border-top: 1px solid rgba(180, 170, 150, 0.1);
background: transparent;
flex-shrink: 0;
height: 0;
overflow: hidden;
opacity: 0;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 11px; color: #b0a694;
transition: height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}
.output-status.visible {
height: 40px;
opacity: 1;
}
/* Status bar layout */
.status-left {
display: flex; align-items: center; gap: 6px;
font-family: var(--sans);
}
.status-right {
display: flex; align-items: center; gap: 6px;
margin-left: auto;
}
/* Footer buttons — physical-object style */
.status-btn {
font-family: var(--sans); font-size: 11px;
padding: 5px 14px; border-radius: 8px;
cursor: pointer; transition: all 0.15s;
color: #5a5248; background: rgba(180, 170, 150, 0.08);
border: 1px solid rgba(180, 170, 150, 0.15);
}
.status-btn:hover { background: rgba(180, 170, 150, 0.15); color: var(--text); }
.status-btn-primary {
color: white; background: #3a3530; border: none;
}
.status-btn-primary:hover { background: #4a4540; }
/* ---- PRESENCE INDICATOR (inside status bar) ---- */
.presence-indicator {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
transition: opacity 0.4s ease;
}
.presence-avatar {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: white;
overflow: hidden; flex-shrink: 0;
}
/* Polaroid-style for agent presence */
.presence-avatar.agent {
background: #fffdf6; border-radius: 2px;
border: 2px solid white;
box-shadow: 1px 1px 4px rgba(60, 50, 40, 0.1);
color: var(--text-dim); font-family: var(--serif);
}
.presence-avatar.user { background: var(--accent); }
.presence-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
.presence-name { color: var(--text-dim); white-space: nowrap; font-size: 12px; }
.presence-action {
color: var(--green); font-size: 11px;
animation: presenceBreathe 3s ease-in-out infinite;
}
@keyframes presenceBreathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Editable source view */
.output-source.editable {
outline: none; cursor: text;
border: 1px solid transparent;
transition: border-color 0.2s;
min-height: 200px;
}
.output-source.editable:focus {
border-color: rgba(99, 102, 241, 0.4);
box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.03);
}
.output-source.editable::selection {
background: rgba(99, 102, 241, 0.3);
}
/* WYSIWYG editable area — inherits the serif document style */
.output-rendered.editable {
outline: none; cursor: text;
border: 1px solid transparent;
transition: border-color 0.2s;
min-height: 200px;
padding: 24px 32px;
overflow-y: auto;
line-height: 1.75;
color: var(--text);
font-family: var(--serif);
font-size: 14.5px;
}
.output-rendered.editable:focus {
border-color: transparent;
}
.output-rendered.editable::selection {
background: rgba(139, 111, 71, 0.2);
}
.output-rendered.editable h1 { font-size: 24px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(180, 170, 150, 0.1); }
.output-rendered.editable h2 { font-size: 20px; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(180, 170, 150, 0.08); }
.output-rendered.editable h3 { font-size: 17px; margin: 20px 0 8px; }
.output-rendered.editable p { margin: 0 0 12px; }
.output-rendered.editable blockquote {
border-left: 3px solid rgba(139, 111, 71, 0.3); padding-left: 12px;
margin: 12px 0; color: var(--text-dim); background: rgba(250, 248, 241, 0.5);
}
.output-rendered.editable hr {
border: none; border-top: 1px solid rgba(180, 170, 150, 0.1); margin: 24px 0;
}
.output-rendered.editable ul, .output-rendered.editable ol { padding-left: 24px; margin: 8px 0 12px; }
.output-rendered.editable code { background: var(--surface3); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
/* Pre in editable mode — prose, not code (matches non-editable) */
.output-rendered.editable pre {
background: transparent; border: none; border-radius: 0;
padding: 0; margin: 0; overflow-x: visible;
font-family: var(--serif); font-size: 14.5px; line-height: 1.75;
white-space: pre-wrap; word-wrap: break-word;
}
/* Formatting toolbar — icon buttons */
.toolbar-btn {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
background: transparent; border: 1px solid transparent;
border-radius: 6px; color: var(--text-dim);
cursor: pointer; position: relative;
transition: background 0.12s, color 0.12s;
}
.toolbar-btn:hover { background: var(--surface3); color: var(--text); }
.toolbar-btn:active { transform: scale(0.95); }
.toolbar-btn.active {
background: rgba(0, 122, 255, 0.1); color: var(--accent);
}
.toolbar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.toolbar-divider {
width: 1px; height: 18px; background: var(--border);
margin: 0 4px; flex-shrink: 0;
}
/* Toolbar tooltips (CSS-only) */
.toolbar-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; top: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
padding: 4px 8px; background: var(--text); color: var(--bg);
font-size: 11px; font-family: inherit; font-weight: 500;
white-space: nowrap; border-radius: 5px;
pointer-events: none; opacity: 0; z-index: 100;
transition: opacity 0.15s ease 0.4s;
}
.toolbar-btn[data-tooltip]:hover::after { opacity: 1; }
/* Link popover */
.link-popover {
position: absolute; top: calc(100% + 4px); left: 0;
display: flex; align-items: center; gap: 6px;
padding: 6px 8px; background: var(--surface);
border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
z-index: 200; opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.link-popover.visible {
opacity: 1; pointer-events: auto; transform: translateY(0);
}
.link-popover input {
width: 220px; padding: 5px 8px; font-size: 12px;
font-family: inherit; border: 1px solid var(--border);
border-radius: 5px; background: var(--bg); color: var(--text);
outline: none; transition: border-color 0.15s;
}
.link-popover input:focus { border-color: var(--accent); }
.link-popover input::placeholder { color: var(--text-muted); }
.link-popover-apply {
padding: 5px 10px; font-size: 12px; font-weight: 500;
font-family: inherit; background: var(--accent); color: white;
border: none; border-radius: 5px; cursor: pointer;
transition: opacity 0.12s;
}
.link-popover-apply:hover { opacity: 0.85; }
.link-popover-remove {
padding: 5px; background: none; border: none;
color: var(--text-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 4px; transition: color 0.12s, background 0.12s;
}
.link-popover-remove:hover { color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.08); }
/* Source toggle button — hidden (developer tool, not for founders) */
.source-btn { display: none !important; }
/* Inline edit toolbar — appears on content focus */
.inline-edit-toolbar {
display: flex; align-items: center; gap: 2px;
padding: 4px 10px; background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
flex-shrink: 0; overflow: visible;
opacity: 0; max-height: 0;
transition: opacity 0.2s ease, max-height 0.2s ease;
}
.inline-edit-toolbar.visible {
opacity: 1; max-height: 44px;
}
/* ---- MAGIC WAND FLOATING BUTTON ---- */
.magic-wand-btn {
position: absolute; z-index: 300;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
cursor: pointer;
opacity: 0; pointer-events: none;
transform: scale(0.8);
transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s;
}
.magic-wand-btn.visible {
opacity: 1; pointer-events: auto; transform: scale(1);
}
.magic-wand-btn:hover {
background: var(--purple-dim); border-color: var(--purple);
}
.magic-wand-btn:active { transform: scale(0.92); }
.magic-wand-btn svg { width: 16px; height: 16px; color: var(--purple); }
.magic-wand-btn.rewriting { pointer-events: none; opacity: 0.5; }
/* ---- QUEUED PAGE SELECTIONS — the staged work slip ----
Same paper object as the run slip in the chat log; the paper rule itself is
scoped to `.chat-log > .work-slip`, so the staged copy re-declares it here.
Before send it's on your desk, above the composer; after send the same slip
animates into the conversation. Which side of the desk the paper is on IS
the state, and no label competes with that. */
.selection-context {
position: relative; max-width: 768px; width: 100%; margin: 0 auto 8px;
padding: 0; border: 1px solid var(--bubble-border); background: var(--cream);
color: var(--text); box-shadow: var(--shadow-sm);
clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 98%, 91% 96%, 86% 99%, 80% 96%, 74% 98%, 68% 96%, 61% 99%, 54% 96%, 47% 98%, 40% 96%, 33% 99%, 26% 96%, 19% 98%, 12% 96%, 6% 99%, 0 96%);
transform-origin: top left;
}
.selection-context[hidden] { display: none; }
.selection-context .work-slip-row {
grid-template-columns: 17px minmax(0, 1fr) 22px;
padding: 4px 7px 3px;
animation: none;
}
.selection-context .work-slip-row.is-pulsing {
border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-dim);
}
/* The purple thread: outline, widen chevron, in-page marker, and this badge.
One colour connects a row to its element — which is what makes a separate
row of chips unnecessary. The slip's paper, text and clip stay warm. */
.selection-context .work-slip-check {
width: 15px; height: 15px;
border: 1.5px solid var(--purple); background: var(--purple);
color: #fff; font: 700 11px/1 var(--sans);
}
.selection-context .work-slip-row.is-working .work-slip-check {
width: 10px; height: 10px; margin: 5px 3px; border: 0; background: var(--purple);
}
.selection-context .work-slip-row.is-working .work-slip-check::after { border-color: var(--purple); }
.selection-context .work-slip-row.is-working { border-color: var(--purple); background: var(--purple-dim); }
.selection-context .work-slip-row.is-done { opacity: 0.62; }
/* Stale shows in the border and the summary line, never in the number. The
number is identity — it says which element this row points at, and it has to
keep matching the marker in the page even when the row has gone stale. */
.selection-context .work-slip-row.is-stale {
border-color: var(--warn-amber); border-style: dashed;
}
/* One line each, so a row is 37px and six rows are a number we can budget.
The chat pane is ~408px wide in the split view, where the prototype's 768px
let long quoted labels sit on one line by luck — here they wrap to two and
the 388px full stack becomes 500px+. The founder already has the element
outlined and numbered in the page; the row label is an identifier, not the
content, so it truncates rather than growing the pile. */
.selection-context .work-slip-label,
.selection-context .work-slip-subline {
overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selection-context .work-slip-label { font: 600 12.5px/1.15 var(--sans); }
.selection-context .work-slip-subline { margin-top: 2px; font: 10.5px/1.15 var(--sans); }
.selection-context .work-slip-overflow { margin: 0 3px 0 27px; }
.selection-context .work-slip-dismiss {
width: 22px; height: 22px; display: grid; place-items: center; margin-top: -2px;
padding: 0; border: 0; border-radius: 50%; background: transparent;
color: var(--text-muted); cursor: pointer; font: 16px/1 var(--sans);
}
.selection-context .work-slip-dismiss:hover { background: var(--accent-dim); color: var(--accent); }
.selection-context .work-slip-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The cap message lives INSIDE the slip, not as a fourth stacked element above
the composer — the stack is already three siblings deep. */
.selection-context .work-slip-cap {
margin: 4px 3px 0 27px; color: var(--warn-amber); font: 11px/1.35 var(--mono);
}
/* ---- SELECTION CHIP (above chat input) — warm paper scrap ---- */
.selection-chip {
display: none; align-items: center; gap: 8px;
padding: 6px 10px 6px 12px; margin-bottom: 8px;
background: var(--card-bg);
border: 1px solid rgba(180, 170, 150, 0.25);
border-radius: 3px;
font-size: 12px; color: var(--text-dim);
box-shadow: var(--shadow-sm);
animation: chipSlideIn 0.15s ease;
}
.selection-chip.visible { display: flex; }
.selection-chip-icon {
flex-shrink: 0; width: 14px; height: 14px; opacity: 0.7;
}
.selection-chip-text {
flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
font-family: var(--mono); font-size: 11px;
max-width: 260px;
}
.selection-chip-dismiss {
flex-shrink: 0; width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--purple);
border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
opacity: 0.5; transition: opacity 0.12s, background 0.12s;
padding: 0;
}
.selection-chip-dismiss:hover { opacity: 1; background: rgba(124, 58, 237, 0.12); }
@keyframes chipSlideIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes chipDismiss {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.75) translateY(6px); }
}
/* ---- ATTACHMENT CHIPS — Stacked paper cards ---- */
/* ── Container ── */
.attachment-chips:not(:empty) {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: 6px;
padding-left: 16px;
max-width: 768px;
margin-inline: auto;
align-items: flex-end;
padding-bottom: 4px;
}
/* ── Each chip: square paper card ── */
.attachment-chip {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 4px;
width: 104px;
height: 112px;
padding: 10px 10px 10px;
background: transparent;
border: none;
border-radius: 0;
font-family: var(--sans);
color: var(--text-dim);
filter: drop-shadow(0 3px 5px rgba(80, 60, 30, 0.09)) drop-shadow(0 7px 14px rgba(80, 60, 30, 0.06));
margin-right: -20px;
transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease;
cursor: pointer;
z-index: 1;
transform-origin: bottom center;
overflow: visible;
text-align: left;
animation: chipSlideIn 0.15s ease;
}
.attachment-chip.chip-dismissing {
animation: chipDismiss 0.2s ease-out forwards;
pointer-events: none;
}
/* ── Inner background with clip-path for paper shape ── */
.paper-bg {
position: absolute;
inset: 0;
background: #fffefa;
border: 1px solid rgba(180, 170, 150, 0.32);
border-radius: 4px;
border-top-right-radius: 0;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
box-shadow: none;
z-index: -1;
pointer-events: none;
transition: box-shadow 0.35s ease, background 0.3s ease, border-color 0.3s ease;
}
/* ── Folded corner flap ── */
.paper-fold {
position: absolute;
top: 0;
right: 0;
width: 22px;
height: 22px;
overflow: visible;
pointer-events: none;
z-index: 30;
filter: drop-shadow(-1px 1px 2px rgba(60, 50, 30, 0.18));
}
.paper-fold::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 22px 0 0 22px;
border-color: transparent transparent transparent #e4dfd6;
z-index: 31;
}
/* ── Hide the file icon ── */
.attachment-chip-file-icon {
display: none;
}
/* ── Alternating rotations (natural paper scatter) ── */
.attachment-chip:nth-child(1) { transform: rotate(-3.2deg) translateY(-1px); z-index: 2; }
.attachment-chip:nth-child(2) { transform: rotate(2.5deg) translateY(1px); z-index: 3; }
.attachment-chip:nth-child(3) { transform: rotate(-2deg) translateY(-2px); z-index: 4; }
.attachment-chip:nth-child(4) { transform: rotate(3.8deg) translateY(0px); z-index: 5; }
.attachment-chip:nth-child(5) { transform: rotate(-1.5deg) translateY(-1px); z-index: 6; }
.attachment-chip:last-child { margin-right: 0; }
/* ── Hover: lift & straighten ── */
.attachment-chip:hover {
transform: rotate(0deg) translateY(-6px) scale(1.03);
z-index: 20;
}
.attachment-chip:hover .paper-bg {
box-shadow:
0 8px 20px rgba(80, 60, 30, 0.14),
0 3px 6px rgba(80, 60, 30, 0.07);
border-color: rgba(139, 111, 71, 0.35);
background: #ffffff;
}
/* ── File name ── */
.attachment-chip-name {
font-weight: 600;
color: var(--text, #302e2b);
overflow: hidden;
text-overflow: ellipsis;
font-size: 10.5px;
letter-spacing: -0.01em;
line-height: 1.3;
max-width: 88px;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
text-align: left;
word-break: break-word;
position: relative;
z-index: 2;
}
/* ── File size ── */
.attachment-chip-size {
font-size: 9px;
color: var(--text-muted, #847e78);
opacity: 0.55;
white-space: nowrap;
font-weight: 400;
line-height: 1;
position: relative;
z-index: 2;
margin-top: auto;
}
/* ── Dismiss button (top-left, hover-reveal) ── */
.attachment-chip-dismiss {
position: absolute;
top: -7px;
left: -7px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(180, 170, 150, 0.45);
background: #fefcf7;
color: var(--text-muted, #847e78);
font-size: 11px;
font-weight: 600;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: scale(0.7);
transition: opacity 0.25s cubic-bezier(.34,1.56,.64,1), transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
z-index: 25;
padding: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.attachment-chip:hover .attachment-chip-dismiss {
opacity: 1;
transform: scale(1);
}
.attachment-chip-dismiss:hover {
background: rgba(255, 45, 85, 0.08);
border-color: rgba(255, 45, 85, 0.5);
color: #FF2D55;
}
/* ── Image chip: thumbnail inside the paper card ── */
.attachment-chip.image-chip { padding-left: 10px; height: 136px; }
.attachment-chip-thumb {
width: 80px;
height: 44px;
border-radius: 3px;
object-fit: cover;
flex-shrink: 0;
background: #fff;
border: 1px solid rgba(180, 170, 150, 0.25);
position: relative;
z-index: 2;
}
/* ── Text chip: taller card with preview ── */
.attachment-chip.text-chip {
width: 160px;
height: 112px;
cursor: pointer;
padding: 10px;
}
.text-chip-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
height: 100%;
}
.text-chip-header {
display: flex;
align-items: center;
gap: 4px;
}
.text-chip-header .attachment-chip-icon {
font-size: 12px;
flex-shrink: 0;
display: inline;
margin-left: 0;
}
.text-chip-header .attachment-chip-size {
flex: 1;
font-size: 9px;
color: var(--text-muted);
opacity: 0.55;
}
.text-chip-header .attachment-chip-dismiss { display: none; }
.text-chip-preview {
font-size: 9px;
line-height: 1.35;
color: var(--text-dim);
display: -webkit-box;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 0.65;
}
/* ── Misc chip icon (clipboard etc.) ── */
.attachment-chip-icon {
font-size: 12px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
/* ── PDF loading state ── */
.file-chip--loading { animation: chip-pulse 1.5s ease-in-out infinite; }
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.attachment-chip-loading {
font-size: 9px;
color: var(--text-muted);
font-style: italic;
position: relative;
z-index: 2;
}
.attachment-chip-warning {
font-size: 11px;
cursor: help;
position: relative;
z-index: 2;
}
/* ── Error toast for attachment failures ── */
/* Top-anchored, matching .filed-toast — see the note on .kb-error-toast below. */
.attach-error-toast {
position: fixed; top: 24px; left: 50%; z-index: 9999;
transform: translateX(-50%) translateY(-12px);
background: #c0392b; color: #fff;
padding: 10px 20px; border-radius: 8px; font-size: 13px;
opacity: 0; transition: opacity 0.3s, transform 0.3s;
pointer-events: none; white-space: nowrap;
}
.attach-error-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Inline error for KB upload/paste forms ── */
.kb-paste-error {
margin: 8px 0 0; padding: 8px 12px;
background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
border-radius: 6px; font-size: 13px; line-height: 1.4;
}
/* ── Error toast for KB upload failures ── */
/* All four toasts anchor top: .filed-toast always has, and the other three sat at
the bottom, so the same click could confirm at the top and fail at the bottom.
They enter downward from -12px — sliding up into a top anchor reads backwards. */
.kb-error-toast {
position: fixed; top: 24px; left: 50%; z-index: 9999;
transform: translateX(-50%) translateY(-12px);
background: #c0392b; color: #fff;
padding: 10px 20px; border-radius: 8px; font-size: 13px;
opacity: 0; transition: opacity 0.3s, transform 0.3s;
pointer-events: none; white-space: nowrap;
}
.kb-error-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.kb-success-toast {
position: fixed; top: 24px; left: 50%; z-index: 9999;
transform: translateX(-50%) translateY(-12px);
background: var(--accent, #8b6f47); color: #fff;
padding: 10px 20px; border-radius: 8px; font-size: 13px;
opacity: 0; transition: opacity 0.3s, transform 0.3s;
pointer-events: none; white-space: nowrap;
}
.kb-success-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* showToast() names the class it wants and builds `${cls}--visible` from it, so
a class with no rule here is not a styling slip — it is an invisible toast.
Eight call sites asked for `toast-error` and none of them ever appeared,
including the one that says a queued selection was dropped. These two wrap
rather than `nowrap`: they carry sentences, not single words. */
.toast-error, .toast-warn {
position: fixed; top: 24px; left: 50%; z-index: 9999;
transform: translateX(-50%) translateY(-12px);
color: #fff; max-width: min(520px, calc(100vw - 48px));
padding: 10px 20px; border-radius: 8px; font-size: 13px; line-height: 1.45;
opacity: 0; transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
}
.toast-error { background: #c0392b; }
.toast-warn { background: var(--warn-amber, #b8531a); }
.toast-error--visible, .toast-warn--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Preview popover — shows full pasted text */
.text-preview-popover {
position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
min-width: 300px; max-width: 460px;
background: var(--card-bg); border: 1px solid var(--border-light);
border-radius: 6px; box-shadow: var(--shadow-lg);
z-index: 100; animation: chipSlideIn 0.12s ease;
}
.text-preview-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; border-bottom: 1px solid var(--border-light);
font-size: 12px; color: var(--text-muted);
}
.text-preview-close {
border: none; background: transparent; color: var(--text-muted);
cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.text-preview-close:hover { color: var(--text); }
.text-preview-content {
padding: 10px 12px; margin: 0;
max-height: 280px; overflow: auto;
font-size: 12px; line-height: 1.5; color: var(--text);
font-family: inherit; white-space: pre-wrap; word-break: break-word;
}
/* Image preview popover */
.image-preview-popover {
position: absolute; bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
min-width: 200px; max-width: 400px;
background: var(--card-bg); border: 1px solid var(--border-light);
border-radius: 6px; box-shadow: var(--shadow-lg);
z-index: 100; animation: chipSlideIn 0.12s ease;
}
.image-preview-body {
padding: 8px;
}
.image-preview-body img {
display: block; width: 100%; max-height: 300px;
object-fit: contain; border-radius: 4px;
}
/* Drag-over state for input area */
/* Restates the pad's own four shadows before adding the ring: box-shadow
replaces rather than augments, so listing only the ring would flatten the pad
to a plain sheet for as long as a file is held over it. */
.input-area.drag-over .input-wrap {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 2px 0 #f3ecda,
0 4px 0 #e8dcc1,
0 8px 18px rgba(60, 50, 40, 0.14),
0 0 0 2px rgba(0, 122, 255, 0.3);
}
/* Attachment indicators in sent user messages — mini paper cards */
.msg-attachments {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 8px;
align-items: flex-end;
}
/* ── Mini paper card in sent messages ── */
.msg-paper-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 82px;
height: 88px;
padding: 8px 8px 8px;
gap: 3px;
background: transparent;
border: none;
margin-right: -14px;
filter: drop-shadow(0 2px 4px rgba(80, 60, 30, 0.08)) drop-shadow(0 5px 10px rgba(80, 60, 30, 0.05));
transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease;
transform-origin: bottom center;
overflow: visible;
cursor: default;
}
.msg-paper-card:last-child { margin-right: 0; }
/* Reuse existing .paper-bg and .paper-fold from input chips */
/* Alternating rotations for sent cards */
.msg-paper-card:nth-child(1) { transform: rotate(-2.5deg) translateY(-1px); z-index: 2; }
.msg-paper-card:nth-child(2) { transform: rotate(2deg) translateY(0px); z-index: 3; }
.msg-paper-card:nth-child(3) { transform: rotate(-1.5deg) translateY(-1px); z-index: 4; }
.msg-paper-card:nth-child(4) { transform: rotate(3deg) translateY(1px); z-index: 5; }
.msg-paper-card:nth-child(5) { transform: rotate(-2deg) translateY(0px); z-index: 6; }
.msg-paper-card:hover {
transform: rotate(0deg) translateY(-4px) scale(1.04);
z-index: 20;
}
.msg-paper-card:hover .paper-bg {
box-shadow:
0 6px 16px rgba(80, 60, 30, 0.12),
0 2px 5px rgba(80, 60, 30, 0.06);
border-color: rgba(139, 111, 71, 0.3);
background: #ffffff;
}
.msg-paper-name {
font-weight: 600;
color: var(--text, #302e2b);
font-size: 9.5px;
letter-spacing: -0.01em;
line-height: 1.25;
max-width: 68px;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
position: relative;
z-index: 2;
}
.msg-paper-size {
font-size: 8px;
color: var(--text-muted, #847e78);
opacity: 0.5;
white-space: nowrap;
line-height: 1;
position: relative;
z-index: 2;
margin-top: auto;
}
/* ── Image card in sent messages ── */
.msg-paper-card--image { height: 104px; }
.msg-paper-card .msg-attachment-thumb {
width: 64px;
height: 36px;
border-radius: 2px;
object-fit: cover;
flex-shrink: 0;
background: #fff;
border: 1px solid rgba(180, 170, 150, 0.2);
position: relative;
z-index: 2;
}
/* ---- PERSISTENT SELECTION HIGHLIGHT ---- */
.rewrite-selection-highlight {
background: rgba(124, 58, 237, 0.15);
border-radius: 2px;
pointer-events: none;
z-index: 1;
}
/* ---- REWRITE SHIMMER ---- */
@keyframes rewriteShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.rewrite-shimmer {
background: linear-gradient(90deg, transparent 0%, var(--purple-dim) 40%, rgba(124, 58, 237, 0.15) 50%, var(--purple-dim) 60%, transparent 100%);
background-size: 200% 100%;
animation: rewriteShimmer 1.5s ease-in-out infinite;
border-radius: 2px;
}
/* ---- REWRITE COST BADGE ---- */
.rewrite-cost-badge {
position: absolute; z-index: 300;
font-size: 10px; font-family: var(--mono);
color: var(--green); background: var(--green-dim);
padding: 2px 8px; border-radius: 10px;
opacity: 1; transition: opacity 0.5s ease;
pointer-events: none;
}
.rewrite-cost-badge.fading { opacity: 0; }
/* Content fade-in animation */
@keyframes contentFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.output-rendered.fade-in { animation: contentFadeIn 0.4s ease both; }
/* ---- STUDY CARD — papers fanning out on the desk ---- */
.study-card {
/* The 768px column comes from `.chat-log > .study-card` above; this adds the 44px
avatar gutter so the files row starts level with the playbooks shelf and the chat
bubbles instead of hanging off to their left. */
padding-left: 44px;
box-sizing: border-box;
margin-bottom: 14px;
animation: studyCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.study-lead {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 9px;
font-size: 12.5px;
color: var(--text-muted);
}
.study-lead svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
/* Sheets wrap instead of fanning. The old deck absolutely positioned each paper
at left: idx * 120 with a 150px width, so 30px always overlapped — and
z-index: 10 - idx put each new paper BEHIND the last, dropping the previous
card's edge onto the next card's filename. It also ran off the 768px column
at the sixth file and could never respond to a narrow pane. */
.study-papers {
display: flex;
flex-wrap: wrap;
gap: 12px 13px;
margin-left: 4px;
}
/* 116x150 is 0.7733; US Letter is 8.5/11 = 0.7727. Portrait, so it reads as a
sheet of paper rather than a card. */
.study-paper {
position: relative;
display: flex;
flex-direction: column;
width: 116px;
height: 150px;
padding: 12px 11px 9px;
background: var(--cream);
border: 1px solid rgba(150, 128, 96, 0.32);
border-radius: 2px;
box-shadow: 1.5px 2.5px 6px rgba(60, 50, 40, 0.14);
cursor: default;
animation: paperFan 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* A real tab on the sheet's top edge, not a nub floating on it */
.study-paper-tab {
position: absolute;
top: -4px;
left: 11px;
width: 26px;
height: 5px;
border-radius: 2px 2px 0 0;
background: var(--tab-color, var(--border));
transition: background 0.3s;
}
.study-paper.reading { --tab-color: #f5b43c; --study-glow: 245, 180, 60; }
.study-paper.done { --tab-color: #4ade80; }
.study-paper.search-paper { --tab-color: #a78bfa; }
.study-paper.search-paper.reading { --tab-color: #a78bfa; --study-glow: 167, 139, 250; }
.study-paper.search-paper.done { --tab-color: #4ade80; }
/* A light travelling the sheet's edge while it's being read. One conic gradient
rotated behind the sheet, masked down to a ring: a constant faint glow with a
brighter comet running round it, so the sheet still reads as active when the
bright part is on the far side. --study-glow is the tab colour as raw
channels, so a search in progress sweeps purple instead of amber. */
@property --study-sheen {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.study-paper.reading::after {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
border-radius: 4px;
pointer-events: none;
background: conic-gradient(from var(--study-sheen),
rgba(var(--study-glow), 0.22) 0turn,
rgba(var(--study-glow), 0.22) 0.52turn,
rgba(var(--study-glow), 0.55) 0.74turn,
rgba(var(--study-glow), 1) 0.88turn,
rgba(255, 255, 255, 0.95) 0.93turn,
rgba(var(--study-glow), 0.6) 0.97turn,
rgba(var(--study-glow), 0.22) 1turn);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: studySheen 2.4s linear infinite;
}
@keyframes studySheen { to { --study-sheen: 360deg; } }
/* Without @property the angle can't interpolate — it would snap round at the
halfway point. Pin the sweep and keep a plain ring instead. */
@supports not (background: conic-gradient(from var(--study-sheen), red, blue)) {
.study-paper.reading::after { background: rgba(var(--study-glow), 0.5); animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.study-paper.reading::after { background: rgba(var(--study-glow), 0.5); animation: none; }
}
/* Bundling — sheets gather away before the paperclip snap. The old rule pulled
the fan back to left: 0 with per-child delays hand-written up to :nth-child(7),
which silently did nothing from the 8th sheet on. Uniform, so it can't run out. */
.study-card.bundling .study-paper {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
transform: scale(0.94);
opacity: 0;
}
.study-paper-title {
font-family: var(--serif);
font-size: 11.5px;
font-weight: 500;
line-height: 1.28;
color: #33291c;
/* Three lines then ellipsis. The old rule was nowrap on a card that got
overlapped, so the filename was the first thing to become unreadable. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
/* Body text on the page — enough to read as a document, not enough to read */
.study-paper-body {
position: relative;
flex: 1;
margin-top: 8px;
overflow: hidden;
background: repeating-linear-gradient(to bottom,
rgba(90, 70, 40, 0.13) 0 1px, transparent 1px 7px);
}
.study-paper-body::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 42%;
height: 8px;
background: var(--cream);
}
.study-paper-cat {
font-size: 9.5px;
color: #6d5f49;
margin-top: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes studyCardIn {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes paperFan {
from { opacity: 0; transform: translateY(-12px) rotate(0deg) scale(0.95); }
}
/* ---- RESEARCH BOARD — cork pinboard for web research ----
Header/meta colours are contrast-checked against the cork base (#c6a67c):
title 6.9:1, meta + status 5.4:1. The old tan board ran the count at 2.6:1. */
.research-board {
background-color: #c6a67c;
background-image:
radial-gradient(circle at 50% 50%, rgba(112,74,36,0.15) 0 1.3px, transparent 1.9px),
radial-gradient(circle at 50% 50%, rgba(146,104,58,0.11) 0 2.1px, transparent 2.8px),
radial-gradient(circle at 50% 50%, rgba(255,238,206,0.15) 0 1px, transparent 1.6px),
radial-gradient(circle at 50% 50%, rgba(96,62,28,0.07) 0 2.4px, transparent 3.4px);
background-size: 11px 9px, 29px 23px, 17px 19px, 43px 37px;
background-position: 0 0, 7px 5px, 3px 9px, 21px 13px;
border: 1px solid #9e7f56;
border-radius: 7px;
box-shadow:
inset 0 1px 0 rgba(255,240,215,0.35),
inset 0 -10px 18px -12px rgba(70,44,16,0.5),
var(--shadow-md);
padding: 13px 15px 16px;
margin-bottom: 14px;
animation: rbAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
position: relative;
}
.rb-header {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.rb-pin-icon { width: 14px; height: 14px; color: #2e2011; flex: none; }
.rb-title {
font-family: var(--serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: #2e2011;
text-shadow: 0 1px 0 rgba(255,240,214,0.28);
flex: 1;
min-width: 0;
}
.rb-count {
font-size: 11px;
color: #453118;
flex: none;
}
.rb-toggle {
font-size: 11px;
color: #453118;
transition: transform 0.3s;
flex: none;
}
.research-board.collapsed .rb-toggle {
transform: rotate(-90deg);
}
.rb-status {
font-size: 11.5px;
color: #453118;
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
margin-bottom: 2px;
}
.rb-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #3d2b12;
flex: none;
animation: rbBlink 1.2s ease-in-out infinite;
}
.research-board.board-done .rb-status::before,
.research-board.board-error .rb-status::before { animation: none; }
@keyframes rbBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* Subtle pulse on border while searching */
.research-board.board-searching {
animation: rbAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
rbPulse 2s ease-in-out infinite 0.5s;
}
/* Items container — collapsible.
auto-fill (not a media query) because the agent pane is a resizable split:
the pane can be narrow on a wide screen, so columns track the board, not the
viewport. 182px min → 3 cols at full width, 2 in a narrow pane, 1 on mobile.
(Above ~188px the narrow pane drops to 1 col; below ~176px the full-width
board packs a 4th column and titles get cramped. Degrades either way, but
keep it in that band if the board's padding ever changes.) */
.rb-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
gap: 11px 12px;
margin-top: 11px;
max-height: 1400px;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
margin-top 0.3s,
opacity 0.3s;
}
.research-board.collapsed .rb-items {
max-height: 0;
margin-top: 0;
opacity: 0;
}
.research-board.collapsed .rb-status {
display: none;
}
/* Individual pin. The wrapper holds the pushpin and does NOT rotate — a real
pin is fixed to the cork and the paper hangs at an angle under it. */
.rb-pin {
position: relative;
display: block;
min-width: 0;
padding-top: 5px;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s;
}
.rb-pin.pinned { opacity: 1; }
.rb-pin-paper {
display: block;
background: var(--cream);
border: 1px solid rgba(140, 115, 80, 0.28);
border-radius: 2px;
padding: 12px 11px 9px;
box-shadow: 1.5px 2.5px 6px rgba(60, 40, 20, 0.22);
transform: scale(0.9) rotate(var(--pin-rotate, 0deg));
transform-origin: 50% 0;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.32s ease;
}
.rb-pin.pinned .rb-pin-paper { transform: scale(1) rotate(var(--pin-rotate, 0deg)); }
/* Hover lifts the paper off the board and straightens it (never a colour change) */
a.rb-pin:hover .rb-pin-paper {
transform: rotate(0deg) translateY(-3px);
box-shadow: 3px 7px 16px rgba(60, 40, 20, 0.26);
}
a.rb-pin:focus-visible { outline: none; }
a.rb-pin:focus-visible .rb-pin-paper {
transform: rotate(0deg) translateY(-3px);
box-shadow: 0 0 0 2px var(--accent), 3px 7px 16px rgba(60, 40, 20, 0.26);
}
/* Red pushpin head — stays upright while the paper rotates beneath it */
.rb-pin-head {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #ff8f8f 0%, #e05252 42%, #a82f22 100%);
box-shadow: 0 1.5px 0 rgba(120, 40, 30, 0.45), 0 3px 5px rgba(60, 30, 10, 0.35);
pointer-events: none;
z-index: 2;
}
.rb-pin-head::after {
content: '';
position: absolute;
top: 2px;
left: 2.5px;
width: 4px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.75);
}
/* Blue head = a search result we only listed. Red = a page read in full. */
.rb-pin.skimmed .rb-pin-head {
background: radial-gradient(circle at 32% 28%, #8fb8ff 0%, #4a7fd0 42%, #2a4f8f 100%);
box-shadow: 0 1.5px 0 rgba(30, 55, 105, 0.45), 0 3px 5px rgba(60, 30, 10, 0.35);
}
.rb-pin-title {
font-family: var(--serif);
font-size: 12.5px;
font-weight: 500;
line-height: 1.32;
color: #33291c;
/* Two lines, then ellipsis — the old 40-char JS clamp cut titles at the exact
point where they start to differ ("Gut Soothe & Glow — …"). */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.rb-pin-source {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: #6d5f49;
margin-top: 6px;
min-width: 0;
}
.rb-pin-source .rb-fav {
width: 9px;
height: 9px;
border-radius: 2px;
background: #a8906c;
flex: none;
}
/* Long hostnames (pubmed.ncbi.nlm.nih.gov) must ellipsis, never overflow the card */
.rb-pin-source .rb-dom {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Overflow pins past the first 6 — folded, not thrown away */
.rb-pin.rb-over { display: none; }
.research-board.rb-open .rb-pin.rb-over { display: block; }
.research-board.rb-open .rb-more { display: none; }
.rb-more {
grid-column: 1 / -1;
justify-self: start;
margin-top: 2px;
font-family: var(--sans);
font-size: 11.5px;
color: #3d2b12;
background: rgba(255, 250, 238, 0.5);
border: 1px dashed rgba(94, 69, 39, 0.4);
border-radius: 5px;
padding: 6px 11px;
cursor: pointer;
transition: background 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rb-more:hover {
background: rgba(255, 250, 238, 0.85);
transform: translateY(-1px);
}
/* Board done — settled state */
.research-board.board-done {
animation: none;
}
/* Board error */
.research-board.board-error {
animation: none;
border-color: #e8a0a0;
}
.research-board.board-error .rb-status {
color: #c0392b;
}
/* Board fading during bundle snap */
.research-board.bundling {
transition: opacity 0.4s, transform 0.4s;
opacity: 0;
transform: scale(0.95);
}
@keyframes rbAppear {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rbPulse {
0%, 100% { border-color: #9e7f56; }
50% { border-color: #bb9a6e; }
}
/* ---- RESEARCH BUNDLE — expandable detail inside paperclip ---- */
.research-bundle .research-bundle-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
padding 0.3s;
padding: 0;
}
.research-bundle.expanded .research-bundle-details {
max-height: 300px;
padding-top: 8px;
}
.bundle-detail-line {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-family: var(--serif);
color: var(--text);
padding: 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bundle-detail-line.muted {
color: var(--text-muted);
font-size: 10px;
}
.bundle-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.bundle-dot.green { background: #4ade80; }
.bundle-dot.purple { background: #a78bfa; }
.bundle-dot.cyan { background: #38bdf8; }
/* ---- PAPER CLIP BUNDLE — collapsed previous run ---- */
.run-bundle {
position: relative;
margin-bottom: 24px;
cursor: pointer;
max-width: 340px;
transform: rotate(-0.7deg);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: bundleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.run-bundle:hover {
transform: translateY(-3px) rotate(0deg);
}
.run-bundle:hover .run-bundle-body {
box-shadow: 4px 8px 20px rgba(60, 50, 40, 0.12);
}
.run-bundle-body {
background: var(--card-bg);
border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 6px;
padding: 12px 16px 12px 42px;
position: relative;
overflow: visible;
box-shadow: 2px 3px 10px rgba(60, 50, 40, 0.06);
transition: box-shadow 0.3s ease;
}
/* Stacked papers peeking out behind — offset in different directions like real loose pages */
.run-bundle-body::before {
content: '';
position: absolute;
top: 1px; left: -7px; right: 4px; bottom: -6px;
background: #fffbf0;
border: 1px solid rgba(170, 160, 140, 0.22);
border-radius: 4px;
z-index: -1;
transform: rotate(1deg);
}
.run-bundle-body::after {
content: '';
position: absolute;
top: 2px; left: 6px; right: -8px; bottom: -9px;
background: #fff6e8;
border: 1px solid rgba(170, 160, 140, 0.18);
border-radius: 4px;
z-index: -2;
transform: rotate(-1.3deg);
}
.run-bundle-clip {
position: absolute;
top: -8px; left: 8px;
width: 28px; height: 52px;
z-index: 5;
pointer-events: none;
filter: drop-shadow(1px 1px 1px rgba(60, 50, 40, 0.1));
}
.run-bundle-title {
font-family: var(--serif);
font-size: 13px;
font-weight: 500;
color: var(--text);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.run-bundle-meta {
font-size: 11px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.run-bundle-dots {
display: flex;
gap: 4px;
}
.run-bundle-dot {
width: 8px; height: 8px;
border-radius: 50%;
}
/* Expanded state — show original content */
.run-bundle-content {
display: none;
padding: 12px 0 0;
}
.run-bundle.expanded .run-bundle-content {
display: block;
}
.run-bundle.expanded .run-bundle-body::before,
.run-bundle.expanded .run-bundle-body::after {
display: none;
}
@keyframes bundleIn {
from { opacity: 0; transform: translateY(-8px) rotate(0deg) scale(0.97); }
60% { opacity: 1; transform: translateY(1px) rotate(-0.8deg) scale(1.005); }
to { opacity: 1; transform: translateY(0) rotate(-0.7deg) scale(1); }
}
/* ---- INPUT — index card prompt area ---- */
/* The bottom gap is larger than the top on purpose. The pad's top edge is bare,
but its bottom throws two hard walls plus a blurred cast shadow — roughly 12px
of ink below the border, and the send key adds its own on top of that. Matching
the 28px top numerically still reads tight, because most of that gap would be
filled with shadow rather than desk. 30px leaves about the same *empty* desk
below the shadow as there is above the pad. */
.input-area {
padding: 28px 24px 30px;
border-top: none;
background: transparent;
flex-shrink: 0;
position: relative;
z-index: 3;
container-type: inline-size;
}
/* A pad of paper, not a field. The pink margin rule that used to sit down the
left edge is gone: the desk underneath is already ruled paper, so the sheet's
own margin was the second paper metaphor in one frame, and it read as a stray
mark rather than as a card.
What separates it from the desk now is depth, not colour. The two hard,
unblurred offsets are edges rather than shadows — the eye reads them as the
thickness of a stack — over a blurred cast shadow that ties the pad back down
to the desk. Same trick the send key uses for its stem, in paper tones. */
.input-wrap {
position: relative; z-index: 2;
max-width: 768px; width: 100%; margin-inline: auto;
display: flex; gap: 10px; align-items: flex-end;
background: #fffdf6;
border: 1px solid rgba(180, 170, 150, 0.2);
border-radius: 12px;
padding: 10px 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 2px 0 #f3ecda,
0 4px 0 #e8dcc1,
0 8px 18px rgba(60, 50, 40, 0.14);
}
/* Paperclip — attach files to your note. Full row height so the clip centres on
the line of text rather than hanging 5px below it, which is where flex-end
left a 36px button on a 46px row. */
.attach-btn {
width: 36px; height: 46px; border-radius: 6px; border: none;
background: transparent; color: var(--text-muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: color 0.15s, transform 0.15s;
padding: 0; position: relative;
}
.attach-btn:hover { color: var(--text); transform: translateY(-1px); }
.attach-btn:active { transform: translateY(0); }
/* The glyph rotates 45° into an ×. The button does not change shape, so the
thing you press to open is the thing you press to close. */
.attach-btn svg { transition: transform 220ms var(--ease); }
.attach-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
/* Floating tooltip — fixed so it escapes overflow:hidden ancestors */
.floating-tooltip {
position: fixed; z-index: 9999;
background: #1a1a1a; color: #fff;
font-size: 12px; line-height: 1; white-space: nowrap;
padding: 6px 10px; border-radius: 6px;
pointer-events: none;
opacity: 0; transform: translateY(4px);
transition: opacity 0.15s, transform 0.15s;
}
.floating-tooltip.visible { opacity: 1; transform: translateY(0); }
.prompt-input-container {
flex: 1; position: relative; min-width: 0;
display: flex; flex-direction: column;
}
/* The field fills the row rather than sitting in it. The row is as tall as its
tallest child — the 46px send key — and align-items: flex-end then dropped a
38px field to the bottom, leaving all 8px of the slack above the text: 28px
of pad over it and 19px under. Matching the key's height moves that slack
inside the field, where the padding splits it evenly.
22px line-height rather than 1.4 (21px) so 46 − 22 = 24 divides into two whole
12s. An odd remainder leaves a 1px lean that is invisible alone and compounds
with anything else off-centre. flex-end stays: once the field wraps to two
lines the key should sit at the bottom of it, not float in the middle. */
.input-wrap textarea {
width: 100%; background: transparent; border: none;
color: var(--text); font-size: 15px;
font-family: inherit; padding: 12px 8px; resize: none;
min-height: 46px; max-height: 120px; line-height: 22px;
outline: none;
}
.input-wrap textarea:focus { box-shadow: none; }
.input-wrap textarea::placeholder { color: transparent; }
/* Sits exactly where the real first line does — same 12px lift off the bottom
and same 22px line box as the textarea, or the text jumps as you start typing. */
.prompt-placeholder {
position: absolute; bottom: 12px; left: 8px; right: 0;
color: var(--text-muted); font-size: 15px; line-height: 22px;
font-family: inherit; pointer-events: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prompt-placeholder.hidden { display: none; }
/* The ghost text fades and drifts 2px rather than sliding — a thought
changing, not a carousel advancing. */
.prompt-placeholder { transition: opacity 130ms var(--ease), transform 130ms var(--ease); }
.prompt-placeholder.swapping { opacity: 0; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .prompt-placeholder { transition: none; } }
/* ---- TOOL DISCOVERY — the note ---- */
/* .card-stack animates (translate only). .card-stack-tilt holds the static
rotate. Keep them as two elements: a rotate inside an animated transform
re-rasterises every glyph on the card each frame. */
.card-stack { --composer-bottom: 30px; --composer-reserve: 92px; position: absolute; z-index: 1; left: 50%; bottom: var(--composer-bottom); width: min(720px,calc(100vw - 32px)); transform: translate3d(-50%,calc(100% + 72px),0); visibility: hidden; pointer-events: none; transition: transform 180ms var(--ease),visibility 0s linear 180ms; }
.card-stack.animating{will-change:transform}
.card-stack-tilt{position:relative;transform:rotate(-.4deg);opacity:0;transition:opacity 130ms var(--ease)}
.card-stack-tilt::before { content:""; position: absolute; z-index: 0; inset: 2px -2px -2px 2px; background: var(--note-stock-back); border: 1px solid rgba(180,170,150,.24); border-radius: 5px; box-shadow: 0 2px 0 #e7e6df,var(--shadow-sm); transform: rotate(.75deg); }
.card-stack.open { transform: translate3d(-50%,0,0); visibility: visible; pointer-events: auto; transition: transform 290ms var(--spring),visibility 0s; }
.card-stack.open .card-stack-tilt { opacity: 1; transition: opacity 160ms var(--ease); }
.reference-card { position: relative; z-index: 1; padding: 24px 28px var(--composer-reserve); background: var(--note-stock); border: 1px solid rgba(180,170,150,.26); border-radius: 5px; box-shadow: 0 2px 0 #efeee7,var(--shadow-md); }
.card-heading { margin: 0 0 22px; color: var(--text-dim); font: 400 22px/1.3 var(--hand); -webkit-font-smoothing: antialiased; }
/* 1fr 1.16fr 0.98fr is MEASURED. Kalam runs wider than the sans it replaced;
at even widths "why a page isn't converting" and "my brand, from a URL" both
wrap. If the copy changes, re-measure — the check is that all 6 titles and
all 6 explainers each hold a single line. */
.reference-groups { display: grid; grid-template-columns: 1fr 1.16fr 0.98fr; }
.reference-group { min-width: 0; }
.reference-group + .reference-group { padding-left: 20px; border-left: 1px solid var(--border-light); }
.reference-group:not(:last-child) { padding-right: 20px; }
.group-label { display: block; margin-bottom: 9px; color: var(--text-dim); font-size: 9px; font-weight: 600; letter-spacing: .11em; }
.reference-item,.attach-reference { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 8px; width: 100%; margin: 0; padding: 5px 0; border: 0; background: transparent; cursor: pointer; text-align: left; transition: transform 150ms var(--spring),text-shadow 150ms ease; }
.reference-item + .reference-item,.reference-item + .attach-reference { margin-top: 9px; }
.reference-item svg,.attach-reference svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--text-muted); }
.reference-copy { min-width: 0; }
/* Kalam for the titles (the colleague speaking), sans for the explainers (the
founder scanning). Kalam below ~14px turns to mush — titles were raised
12px → 15px precisely for this. Do not collapse the split. */
.reference-item b { display: block; color: var(--text-dim); font: 500 15px/1.3 var(--hand); -webkit-font-smoothing: antialiased; }
.reference-item small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 9.5px; line-height: 1.45; }
/* Optical, not structural: Kalam sits higher in its box than the sans, so a
box-aligned icon reads as misaligned. */
.reference-item svg { margin-top: 3px; }
@media (hover:hover) and (pointer:fine) { .reference-item:hover,.attach-reference:hover { transform: translateY(-1px); text-shadow: 0 2px 5px rgba(60,50,40,.12); } }
/* Not italic — Kalam has no true italic and the synthesised slant looks cheap. */
.card-closing { margin: 18px 0 0; color: var(--text-muted); font: 400 14px/1.4 var(--hand); -webkit-font-smoothing: antialiased; }
.card-attach { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-light); }
/* A manila chip — the same stock as the attachment chips the composer shows
once a file IS attached. The control is made of what it produces, so it
reads as a different KIND of thing from the handwritten list without
having to shrink into the background to prove it. */
.attach-reference {
display: inline-grid; grid-template-columns: 15px auto; align-items: center; gap: 8px;
width: auto; margin: 0; padding: 7px 12px; cursor: pointer; text-align: left;
color: var(--manila-text); background: var(--manila-open);
border: 1px solid var(--manila-edge); border-radius: 4px;
box-shadow: 1px 2px 0 rgba(60,50,40,.09);
transform: rotate(-1.1deg);
transition: transform 160ms var(--spring), box-shadow 160ms var(--ease);
}
.attach-reference svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.attach-reference b { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--manila-text); }
/* Picked up off the card: it straightens as it lifts. */
@media (hover:hover) and (pointer:fine) {
.attach-reference:hover { transform: rotate(-.2deg) translateY(-2px); box-shadow: 1px 4px 8px rgba(60,50,40,.14); }
}
.attach-reference:active { transform: rotate(-1.1deg) translateY(0); box-shadow: 1px 1px 0 rgba(60,50,40,.09); }
@media (max-width:560px) {
.card-stack { width: calc(100vw - 24px); }
.reference-card { padding: 18px 18px var(--composer-reserve); }
.card-heading { margin-bottom: 15px; font-size: 20px; }
.reference-groups { grid-template-columns: 1fr; gap: 16px; }
.reference-group:not(:last-child) { padding-right: 0; }
.reference-group + .reference-group { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border-light); }
.reference-item + .reference-item,.reference-item + .attach-reference { margin-top: 6px; }
.card-closing { margin-top: 14px; }
}
@media (prefers-reduced-motion:reduce) { .attach-btn,.attach-btn svg,.card-stack,.card-stack.open,.card-stack-tilt,.card-stack.open .card-stack-tilt,.reference-item,.attach-reference{transition:none}*{scroll-behavior:auto} }
/* Production uses a split, user-resizable agent pane. Keep the verbatim port
above mechanically verifiable, then replace its viewport-centred geometry
with insets against the composer's containing block. */
.card-stack {
left: 24px;
right: 24px;
width: auto;
max-width: 720px;
margin-inline: auto;
transform: translate3d(0,calc(100% + 72px),0);
}
.card-stack.open { transform: translate3d(0,0,0); }
/* Server-driven groups can disappear. The measured three-column proportions
remain normative when all three groups survive; smaller sets divide the
available card width without leaving an empty labelled column. */
.reference-groups[data-column-count="1"] { grid-template-columns: 1fr; }
.reference-groups[data-column-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.reference-groups[data-column-count="3"] { grid-template-columns: 1fr 1.16fr 0.98fr; }
/* The pane, not the viewport, determines when the note becomes a single
column. At the 300px minimum pane width, 12px insets leave the card fully
inside the agent side of the split. */
@container (max-width:560px) {
.card-stack { left: 12px; right: 12px; width: auto; }
.reference-card { padding: 18px 18px var(--composer-reserve); }
.card-heading { margin-bottom: 15px; font-size: 20px; }
.reference-groups,
.reference-groups[data-column-count] { grid-template-columns: 1fr; gap: 16px; }
.reference-group:not(:last-child) { padding-right: 0; }
.reference-group + .reference-group { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border-light); }
.reference-item + .reference-item,.reference-item + .attach-reference { margin-top: 6px; }
.card-closing { margin-top: 14px; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
/* clip is deprecated but still the only thing some older engines honour, so
it stays under the modern clip-path rather than being replaced by it. */
clip: rect(0,0,0,0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Send — the Enter key, not a send icon. Carrying the return arrow means the
button also states the shortcut, which is one less thing to learn.
Built as two elements, the way a cap is moulded: the button is the skirt,
::before is the raised top face, and the skirt left showing between them is
what you can see of the sides.
Seen from a low angle, which is why the bottom band is 11px against 3px at
the top and 5px at the sides: from below the eye clears the near edge of the
cap and looks straight at its front wall, while the back wall hides behind
the face entirely. An even ring would be the view from directly overhead —
flatter, and less like an object you could pick up.
The front wall is shaded as a wall: the button's gradient holds one tone down
to where the face ends, then turns and darkens over the last 11px. That turn
is what stops the band reading as a slice cut across the button, which is
exactly how it read when the same asymmetry was tried with a flat fill.
It floats rather than standing on a wall. The near layer is tight and dark
and the far ones are wide and faint — an object hovering above a surface
throws a small hard shadow directly under itself and a large soft one around
it. Three equally-blurred layers just read as haze, which is what the first
pass at this did. The two outer layers carry negative spread so they pull in
under the key instead of haloing it. */
.send-btn {
position: relative;
width: 72px; height: 46px; border-radius: 8px; padding: 0;
/* The bottom border is darker than the other three on purpose. It is the one
edge that sits against its own darkest gradient stop AND against the cast
shadow, so at a single uniform alpha it dissolved into a soft ramp while
the top and sides stayed crisp — the button looked like it was melting into
the pad. This is also just true of a real object: the underside edge is the
one in shade. */
border: 1px solid rgba(120, 110, 95, 0.38);
border-bottom-color: rgba(94, 84, 68, 0.5);
/* Faceted, not shaded: each side of the skirt is a flat tone with a hard mitre
between them, the way a chamfer joins. Top faces the light, left catches it,
right is turned away, and the front wall (drawn by ::after) is darkest
because it faces the desk.
A mitre runs from an OUTER corner to the INNER corner beside it. Because the
frame is 3px at the top, 5px at the sides and 11px at the front, those four
lines are not concurrent — no single conic can draw all of them, which is
why a centred 45° conic put its seams through open flat instead of through
the corners. So the top two mitres come from a conic placed at the one point
that satisfies both, and the front wall is cut as its own trapezoid.
Centre: the ray through (0,0) must also pass through (5,3), so it lies on
y = (3/5)x; at x = w/2 = 36 that is y = 21.6 — 46.96% down. From there the
outer corners sit at 59.04° and 300.96°. Recompute all of this if the size
or the insets change. */
background:
radial-gradient(14px 11px at 8px 6px, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
conic-gradient(from 59.04deg at 50% 46.96%,
#d9d1c4 0deg 120.96deg,
#e9e3d9 120.96deg 241.93deg,
#f3efe8 241.93deg 360deg);
/* so the wall trapezoid takes the cap's rounded corners instead of squaring
them off; outer box-shadow is unaffected by overflow */
overflow: hidden;
color: #37332e;
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow:
0 1px 1px rgba(60, 50, 40, 0.26),
0 4px 6px -1px rgba(60, 50, 40, 0.18),
0 10px 16px -4px rgba(60, 50, 40, 0.14),
0 20px 30px -10px rgba(60, 50, 40, 0.12);
transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s;
}
/* The top face. Its depth is in its own gradients, not in a shadow cast around
it — a dished cap is darker where the surface curves away at the rim and
lightest where it faces you in the middle, so a rim vignette says "this is a
bowl" where a drop shadow only says "this is a sticker sitting on something".
Three layers: light landing on the crown, the vignette that turns the rim
down, and the base tone falling off toward the front. The only shadow left is
the 1px highlight along the very top edge, which is the lit lip. */
.send-btn::before {
content: '';
position: absolute; top: 3px; left: 5px; right: 5px; bottom: 11px;
border-radius: 5px 5px 4px 4px;
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
radial-gradient(118% 132% at 50% 44%, rgba(255, 255, 255, 0) 52%, rgba(146, 132, 110, 0.17) 100%),
linear-gradient(to bottom, #fdfbf7 0%, #f7f3ec 58%, #efe9df 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
pointer-events: none;
}
/* The front wall. Its top edge is exactly the face's bottom edge (5px in on each
side, 11px up from the base) and its bottom edge is the full width of the cap,
so the two diagonals ARE the mitres — they start where the face's corners are
rather than near them. */
.send-btn::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 11px;
background: linear-gradient(to bottom, #c9c0af 0%, #bbb2a0 100%);
clip-path: polygon(0 100%, 5px 0, calc(100% - 5px) 0, 100% 100%);
pointer-events: none;
}
/* The face spans 3px to 35px, so its centre is 19px down while the button's is
23px. 8px of bottom margin lifts the glyph the 4px that closes the gap —
centred on the face you are looking at, not on the box. */
.send-btn svg { position: relative; z-index: 1; display: block; margin-bottom: 8px; }
/* Rises off the desk rather than changing colour, which is the rule for every
hover in this product. The face is a separate element, so its own bevel
shadow rides along untouched — only the cast layers here. */
.send-btn:hover {
transform: translateY(-1px);
box-shadow:
0 1px 1px rgba(60, 50, 40, 0.26),
0 6px 8px -1px rgba(60, 50, 40, 0.19),
0 14px 22px -4px rgba(60, 50, 40, 0.15),
0 28px 40px -10px rgba(60, 50, 40, 0.13);
}
/* Pressed: the cap descends and the shadow tightens under it. Losing the wide
ambient layer is what sells the drop — a floating object's shadow gets
smaller and sharper as it approaches the surface, not darker. The underside
shade deepens because less light reaches under a key that is nearly down. */
.send-btn:active,
.send-btn.is-pressed {
transform: translateY(2px);
box-shadow:
0 1px 1px rgba(60, 50, 40, 0.28),
0 2px 4px -1px rgba(60, 50, 40, 0.16);
}
/* Pressed, the dish deepens: the rim vignette tightens and darkens and the crown
light retreats, which is what happens to a curved surface as it tips away from
the light. The tell is in the gradient, same as at rest. */
.send-btn:active::before,
.send-btn.is-pressed::before {
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 55%),
radial-gradient(112% 124% at 50% 46%, rgba(255, 255, 255, 0) 42%, rgba(146, 132, 110, 0.25) 100%),
linear-gradient(to bottom, #f9f6f1 0%, #f2eee6 58%, #e9e3d8 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
/* Signal 1 of the "not sent yet" stack: while page selections are queued the
key names the pending work. When a founder wonders "what now?", the send
button is where they look — a neutral arrow there is a tool that took their
order and went quiet. The cap widens the way a real Enter key does; the whole
keycap construction below (crown, face, bevel) is preserved in purple. */
.send-btn.has-selections {
width: auto; min-width: 72px; padding: 0 15px;
border-color: rgba(76, 29, 149, 0.55);
border-bottom-color: rgba(59, 20, 120, 0.62);
background:
radial-gradient(14px 11px at 8px 6px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
conic-gradient(from 59.04deg at 50% 46.96%,
#6b31d0 0deg 120.96deg,
#7c3aed 120.96deg 241.93deg,
#8f57f2 241.93deg 360deg);
color: #fff;
}
.send-btn.has-selections::before {
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 62%),
radial-gradient(118% 132% at 50% 44%, rgba(255, 255, 255, 0) 52%, rgba(46, 16, 101, 0.22) 100%),
linear-gradient(to bottom, #9366f7 0%, #7c3aed 58%, #6b2fd6 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset;
}
.send-btn.has-selections::after { background: linear-gradient(to bottom, #5b21b6 0%, #4c1d95 100%); }
.send-btn.has-selections:active::before,
.send-btn.has-selections.is-pressed::before {
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 55%),
radial-gradient(112% 124% at 50% 46%, rgba(255, 255, 255, 0) 42%, rgba(46, 16, 101, 0.3) 100%),
linear-gradient(to bottom, #8a5cf0 0%, #7434e3 58%, #6127c8 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.send-btn.has-selections svg { display: none; }
.send-btn-count {
position: relative; z-index: 1; margin-bottom: 8px;
font: 650 12.5px/1 var(--sans); white-space: nowrap; letter-spacing: 0.005em;
}
/* One bump when the pile grows — a single physical acknowledgment, never a
loop. A pulsing send button reads as "working", which is the opposite of
what this state means. */
.send-btn.is-bumped { animation: send-count-bump 320ms var(--spring); }
@keyframes send-count-bump {
0% { transform: scale(1); }
45% { transform: scale(1.07); }
100% { transform: scale(1); }
}
/* Resting on the pad: nothing to travel, so nothing to float on. */
.send-btn:disabled {
opacity: 0.35; cursor: not-allowed; transform: none;
box-shadow: 0 1px 2px rgba(60, 50, 40, 0.10);
}
/* Pressing Enter sends, but :active only fires for the mouse — the key would
stay still for the one input most people actually use. app.js stamps
.is-pressed for the length of this transition so the cap answers the
keyboard the same way it answers a click. */
@media (prefers-reduced-motion: reduce) {
.send-btn, .stop-btn { transition: opacity 0.15s; }
.send-btn:hover, .send-btn:active, .send-btn.is-pressed,
.stop-btn:hover, .stop-btn:active { transform: none; }
}
/* ---- STOP BUTTON ---- */
/* The same cap, in red. It stands in for send the moment a run starts, so it
takes send's exact box — 58x46, same radius, same face insets, same low angle
— and only the colour ramp changes. A circle made the one control that appears
mid-run the one control shaped unlike anything else on the pad, and it changed
the field's width every time the agent began working.
Red rather than another warm brown because stopping is the only destructive
thing this pad can do; it should not read as send wearing a different hat. */
.stop-btn {
position: relative;
width: 72px; height: 46px; border-radius: 8px; padding: 0;
border: 1px solid rgba(150, 14, 45, 0.42);
border-bottom-color: rgba(112, 6, 32, 0.58);
/* Same mitre geometry as send — same box, same insets, so the same angles.
Built on --red (#FF2D55), the pink-red this product already uses for
destructive actions, rather than a second red invented for one button. */
background:
radial-gradient(14px 11px at 8px 6px, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 70%),
conic-gradient(from 59.04deg at 50% 46.96%,
#e02950 0deg 120.96deg,
#fa4467 120.96deg 241.93deg,
#ff6b85 241.93deg 360deg);
overflow: hidden;
color: #fff;
cursor: pointer; display: none; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow:
0 1px 1px rgba(120, 10, 36, 0.30),
0 4px 6px -1px rgba(120, 10, 36, 0.22),
0 10px 16px -4px rgba(120, 10, 36, 0.17),
0 20px 30px -10px rgba(120, 10, 36, 0.13);
transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s;
animation: fadeIn 0.2s ease;
}
/* Same dish as send's face, in red: crown light, rim vignette, base fall-off.
The highlights are much weaker than the white cap's — on a saturated colour a
0.95 white wash desaturates the face to pink froth, which is exactly what the
first pass at this looked like. */
.stop-btn::before {
content: '';
position: absolute; top: 3px; left: 5px; right: 5px; bottom: 11px;
border-radius: 5px 5px 4px 4px;
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%),
radial-gradient(118% 132% at 50% 44%, rgba(255, 255, 255, 0) 52%, rgba(122, 6, 32, 0.26) 100%),
linear-gradient(to bottom, #ff5273 0%, #ff2d55 58%, #ee1f46 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
pointer-events: none;
}
.stop-btn::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 11px;
background: linear-gradient(to bottom, #c4173c 0%, #a80f31 100%);
clip-path: polygon(0 100%, 5px 0, calc(100% - 5px) 0, 100% 100%);
pointer-events: none;
}
.stop-btn svg { position: relative; z-index: 1; display: block; margin-bottom: 8px; }
.stop-btn:hover {
transform: translateY(-1px);
box-shadow:
0 1px 1px rgba(120, 10, 36, 0.30),
0 6px 8px -1px rgba(120, 10, 36, 0.23),
0 14px 22px -4px rgba(120, 10, 36, 0.18),
0 28px 40px -10px rgba(120, 10, 36, 0.14);
}
.stop-btn:active {
transform: translateY(2px);
box-shadow:
0 1px 1px rgba(120, 10, 36, 0.32),
0 2px 4px -1px rgba(120, 10, 36, 0.20);
}
.stop-btn:active::before {
background:
radial-gradient(150% 120% at 50% -25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
radial-gradient(112% 124% at 50% 46%, rgba(255, 255, 255, 0) 42%, rgba(122, 6, 32, 0.34) 100%),
linear-gradient(to bottom, #f74a6c 0%, #f0264e 58%, #df1a40 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset;
}
.stop-btn.visible { display: flex; }
/* ---- OUTPUT CONTENT — scrolls inside the artifact page ---- */
.output-content {
flex: 1; overflow: auto; position: relative;
background: transparent;
}
/* Dog-ear fold — sits on the output pane, not the scrollable content */
/* Page-settle animation when content first appears */
@keyframes pageSettle {
0% { opacity: 0; transform: translateY(-8px) scale(1.01); box-shadow: 0 16px 50px rgba(60,50,40,0.18); }
60% { opacity: 1; transform: translateY(1px) scale(0.998); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.output-content.page-settle { animation: pageSettle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.output-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; text-align: center; padding: 32px; gap: 8px;
}
.output-empty-icon {
font-size: 32px;
opacity: 0.4;
animation: emptyPulse 4s ease-in-out infinite;
}
@keyframes emptyPulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.output-empty p {
max-width: 280px; line-height: 1.5;
color: var(--text-dim); font-size: 15px; font-weight: 500;
margin: 0;
}
.output-empty .output-empty-hint {
font-size: 13px; font-weight: 400;
color: var(--text-muted); margin-top: 2px;
}
/* ---- AMBIENT GLOW (agent working) ---- */
.pane-output.pane-glow::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
box-shadow:
inset 0 0 60px rgba(16, 185, 129, 0.07),
inset 0 0 120px rgba(16, 185, 129, 0.03);
animation: ambientGlow 3s ease-in-out infinite;
opacity: 1;
transition: opacity 0.8s ease;
}
.pane-output.pane-glow-out::before {
opacity: 0;
}
@keyframes ambientGlow {
0%, 100% {
box-shadow:
inset 0 0 60px rgba(16, 185, 129, 0.07),
inset 0 0 120px rgba(16, 185, 129, 0.03);
}
50% {
box-shadow:
inset 0 0 80px rgba(16, 185, 129, 0.12),
inset 0 0 150px rgba(16, 185, 129, 0.05);
}
}
/* Document dimming while agent prepares */
.output-content.output-dimmed {
opacity: 0.4;
transition: opacity 0.4s ease;
}
.output-source {
padding: 16px; font-size: 12px; font-family: var(--mono);
line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.output-preview { width: 100%; height: 100%; border: none; background: var(--preview-bg); }
/* ---- RENDERED MARKDOWN — serif document on white page ---- */
.output-rendered {
padding: 24px 32px; font-size: 16px; line-height: 1.7;
font-family: var(--serif); color: var(--text);
max-width: 800px; overflow-wrap: break-word;
}
.output-rendered h1 { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(180, 170, 150, 0.15); }
.output-rendered h2 { font-size: 23px; font-weight: 700; line-height: 1.25; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(180, 170, 150, 0.1); }
.output-rendered h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 24px 0 8px; }
.output-rendered h4 { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 20px 0 6px; }
.output-rendered h5 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 18px 0 4px; color: var(--text-dim); }
.output-rendered h6 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; color: var(--text-dim); }
.output-rendered p { margin: 0 0 12px; }
.output-rendered p:last-child { margin-bottom: 0; }
.output-rendered strong { font-weight: 600; }
.output-rendered em { font-style: italic; }
.output-rendered code {
background: var(--surface3); padding: 2px 6px; border-radius: 4px;
font-size: 14.5px; font-family: var(--mono); color: var(--code-color);
}
/* Pre blocks — agent wraps content in code fences, so markdown renders as .
In a content creation tool, this should look like a DOCUMENT, not source code. */
.output-rendered pre {
background: transparent; border: none; border-radius: 0;
padding: 0; margin: 0; overflow-x: visible;
font-family: var(--serif); font-size: 16px; line-height: 1.7;
white-space: pre-wrap; word-wrap: break-word;
}
.output-rendered pre code {
background: none; padding: 0; border-radius: 0; color: var(--text);
font-family: inherit; font-size: inherit; line-height: inherit;
}
.output-rendered ul, .output-rendered ol { margin: 12px 0 16px 28px; }
.output-rendered li { margin-bottom: 6px; }
.output-rendered li > ul, .output-rendered li > ol { margin-top: 6px; margin-bottom: 6px; }
.output-rendered blockquote {
border-left: 3px solid var(--accent);
margin: 16px 0; padding: 4px 0 4px 18px;
background: transparent; color: var(--text-dim);
font-size: 16px; line-height: 1.6; font-style: italic;
}
.output-rendered blockquote p { margin-bottom: 8px; }
.output-rendered blockquote p:last-child { margin-bottom: 0; }
.output-rendered hr {
border: none; border-top: 1px solid rgba(180, 170, 150, 0.1); margin: 24px 0;
}
.output-rendered a { color: var(--link-color); text-decoration: none; }
.output-rendered a:hover { text-decoration: underline; }
.output-rendered table { border-collapse: collapse; margin: 16px 0; width: 100%; font-size: 15px; }
.output-rendered th, .output-rendered td {
border: 1px solid var(--border); padding: 10px 14px; text-align: left;
}
.output-rendered th { background: rgba(250, 248, 241, 0.5); font-weight: 600; }
.output-rendered tr:nth-child(even) { background: rgba(250, 248, 241, 0.3); }
.output-rendered img { max-width: 100%; border-radius: var(--radius-sm); }
/* Manila folder tab bar — transparent, tabs float above the page */
.file-tabs-wrapper {
display: flex; align-items: stretch; flex-shrink: 0;
background: transparent; border-bottom: none;
position: relative; padding: 0 0 0 8px;
gap: 2px; z-index: 2;
}
.file-tabs-arrow {
display: none; align-items: center; justify-content: center;
width: 24px; flex-shrink: 0; background: transparent;
border: none; color: var(--text-dim); cursor: pointer;
font-size: 13px; padding: 0; z-index: 2;
transition: color 0.1s, background 0.1s;
}
.file-tabs-arrow:hover { color: var(--text); }
.file-tabs-arrow.visible { display: flex; }
.file-tabs {
display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0;
scroll-behavior: smooth;
}
.file-tabs::-webkit-scrollbar { height: 0; }
/* Manila folder tabs — rounded tops, seamless with page */
.file-tab {
padding: 7px 16px 6px; font-size: 12px; font-family: var(--sans);
font-weight: 400;
border: 1px solid rgba(180, 170, 150, 0.2);
border-bottom: none; border-radius: 10px 10px 0 0;
color: #8a7e70; cursor: pointer; white-space: nowrap;
transition: transform 0.2s ease, background 0.2s ease, color 0.15s;
max-width: 200px; position: relative; top: 1px;
background: rgba(250, 248, 241, 0.7);
}
.file-tab { display: flex; align-items: center; gap: 6px; }
.file-tab span:first-child { overflow: hidden; text-overflow: ellipsis; }
/* Reaching for a folder — lift on hover */
.file-tab:not(.active):hover {
color: #5a5248; background: rgba(255, 254, 250, 0.85);
transform: translateY(-2px);
}
/* Active tab — pulled forward, seamless with page background */
.file-tab.active {
color: #3a3530; background: #ffffff; font-weight: 500;
border-bottom: 1px solid #ffffff;
box-shadow: 0 -2px 8px rgba(60, 50, 40, 0.04);
z-index: 3;
}
/* Hide tab delete × for cleaner look — visible on hover for multi-file */
.file-tab-delete {
opacity: 0; font-size: 14px; line-height: 1; color: var(--text-dim);
cursor: pointer; padding: 0 2px; border-radius: 3px; transition: opacity 0.15s, color 0.15s;
}
.file-tab:hover .file-tab-delete { opacity: 0.6; }
.file-tab-delete:hover { opacity: 1 !important; color: var(--red); }
.close-btn {
width: 26px; height: 26px; border-radius: var(--radius-sm);
border: none; background: var(--surface2); color: var(--text-dim);
cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: var(--border); color: var(--text); }
/* ---- HISTORY DRAWER ---- */
.history-drawer {
position: fixed; top: 36px; left: 0; bottom: 0; width: 320px;
background: var(--surface); border-right: 1px solid var(--border);
z-index: 50; transform: translateX(-100%); transition: transform 0.25s ease;
display: flex; flex-direction: column;
}
.history-drawer.open { transform: translateX(0); }
.history-drawer .drawer-header {
padding: 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.history-drawer .drawer-header h3 { font-size: 14px; font-weight: 600; }
.history-drawer .drawer-body { flex: 1; overflow-y: auto; padding: 8px; }
.history-item {
padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
transition: background 0.1s; margin-bottom: 2px;
}
.history-item:hover { background: var(--surface2); }
.history-item .hi-prompt {
font-size: 13px; color: var(--text); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.history-item .hi-meta {
display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); font-family: var(--mono);
}
.history-item .hi-meta .hi-cost { color: var(--green); }
.history-actions {
padding: 12px; border-top: 1px solid var(--border);
display: flex; gap: 8px;
}
.history-actions button {
flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
background: var(--surface2); color: var(--text-dim); font-size: 12px;
cursor: pointer; transition: all 0.15s;
}
.history-actions button:hover { background: var(--surface3); color: var(--text); }
.history-actions button.danger { border-color: rgba(255,45,85,0.3); color: var(--red); }
.history-actions button.danger:hover { background: var(--red-dim); }
/* ---- NEW RUN BTN ---- */
.new-run-btn {
padding: 6px 12px; background: var(--green-dim); border: 1px solid rgba(16,185,129,0.3);
border-radius: var(--radius-sm); color: var(--green); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 5px;
}
.new-run-btn:hover { background: rgba(16,185,129,0.25); border-color: rgba(16,185,129,0.5); }
/* No-select during drag */
body.resizing { cursor: col-resize !important; user-select: none !important; }
body.resizing * { cursor: col-resize !important; user-select: none !important; }
body.resizing iframe { pointer-events: none; }
/* ============================================================
AUTH OVERLAY — Login screen
============================================================ */
/* ---- Auth: Split-panel login (mirrors Companio layout) ---- */
.auth-overlay {
position: fixed; inset: 0; z-index: 9999;
display: flex; flex-direction: row;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
background: var(--card-bg);
padding: 24px;
gap: 0;
}
.auth-overlay.visible { opacity: 1; pointer-events: auto; }
/* Left: Brand panel + form */
.auth-brand {
width: 380px; min-width: 320px; max-width: 420px;
display: flex; flex-direction: column;
justify-content: space-between;
padding: 24px 32px 32px;
margin-right: 120px;
}
.auth-brand-content {
display: flex; flex-direction: column; gap: 0;
}
.auth-brand-logo {
width: 48px; height: 48px;
margin-bottom: 0;
}
.auth-brand-text {
margin-top: 48px;
}
.auth-brand-text h1 {
font-size: 20px; font-weight: 500; line-height: 1.4;
color: var(--text); margin: 0 0 8px;
font-family: var(--serif);
}
.auth-tagline {
font-size: 15px; color: var(--text-dim); line-height: 1.5;
font-family: var(--serif); font-style: italic;
}
/* Form in left panel (like Companio — form at bottom) */
#auth-form,
#auth-forgot-form,
#setpw-form {
display: flex; flex-direction: column;
margin-top: auto;
padding-bottom: 24px;
}
/* The ID `display: flex` above outranks the [hidden] attribute, so without
this the sign-in and forgot-password forms would both show at once. */
#auth-form[hidden],
#auth-forgot-form[hidden] { display: none; }
.auth-form-fields {
display: flex; flex-direction: column; gap: 16px;
}
.auth-field {
display: flex; flex-direction: column; gap: 6px;
}
#auth-form label,
#auth-forgot-form label,
#setpw-form label {
font-size: 12px; font-weight: 400;
color: var(--text-dim);
}
#auth-form input,
#auth-forgot-form input,
#setpw-form input {
padding: 8px 12px;
border: 1px solid rgba(180, 170, 150, 0.3);
border-radius: 8px;
font-size: 13px; font-family: inherit;
background: var(--card-bg);
color: var(--text);
outline: none; transition: border-color 0.15s;
box-shadow: 0 1px 2px rgba(60,50,40,0.06);
}
#auth-form input:focus,
#auth-forgot-form input:focus,
#setpw-form input:focus {
border-color: #8b6f47;
box-shadow: 0 0 0 3px rgba(139,111,71,0.1);
}
/* Warm leather brown submit */
#auth-form button[type="submit"],
#auth-forgot-form button[type="submit"],
#setpw-form button[type="submit"] {
padding: 8px 16px;
background: #8b6f47; color: #fff;
border: none; border-radius: 8px;
font-size: 13px; font-weight: 500; font-family: inherit;
cursor: pointer; transition: background 0.15s, transform 0.1s;
margin-top: 20px;
white-space: nowrap;
width: fit-content;
box-shadow: 0 1px 4px rgba(60,50,40,0.12);
}
#auth-form button[type="submit"]:hover,
#auth-forgot-form button[type="submit"]:hover,
#setpw-form button[type="submit"]:hover { background: #9a7d54; }
#auth-form button[type="submit"]:active,
#auth-forgot-form button[type="submit"]:active,
#setpw-form button[type="submit"]:active { transform: scale(0.98); }
#auth-form button[type="submit"]:disabled,
#auth-forgot-form button[type="submit"]:disabled,
#setpw-form button[type="submit"]:disabled { opacity: 0.5; cursor: wait; }
.auth-link-btn {
background: none;
border: none;
color: var(--accent);
font: inherit;
cursor: pointer;
padding: 6px 0 0;
text-decoration: underline;
}
.auth-error {
color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px;
}
/* Right: Decorative panel (light gray with icons) */
.auth-decor {
flex: 1; min-width: 0;
background: #f8fafc;
border-radius: 16px;
border: 1px solid #f1f5f9;
display: flex; flex-direction: column;
justify-content: space-between;
padding: 36px;
overflow: hidden;
}
.auth-decor-icons {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-end;
align-items: flex-start;
padding-top: 8px;
}
.auth-icon {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
opacity: 0.85;
transition: opacity 0.2s;
}
.auth-icon:hover { opacity: 1; }
.auth-decor-footer {
display: flex; gap: 8px; align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.auth-decor-footer a {
font-size: 12px; color: var(--text-dim);
text-decoration: none;
}
.auth-decor-footer a:hover {
text-decoration: underline;
text-decoration-color: #396AF7;
}
.auth-decor-footer span {
font-size: 12px; color: var(--text-dim);
}
/* Responsive: stack on narrow screens */
@media (max-width: 768px) {
.auth-overlay {
flex-direction: column;
padding: 16px;
}
.auth-brand {
width: 100%; min-width: 0; max-width: none;
margin-right: 0;
padding: 16px 20px 24px;
}
.auth-brand-text { margin-top: 24px; }
.auth-brand-text h1 { font-size: 18px; }
.auth-brand-logo { width: 36px; height: 36px; }
.auth-tagline { font-size: 13px; }
.auth-decor { display: none; }
}
/* ---- Sidebar User Profile ---- */
.sidebar-user {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--radius-sm);
position: relative; min-height: 44px;
}
.sidebar-user-info {
display: flex; align-items: center; gap: 10px;
flex: 1; min-width: 0; cursor: pointer;
border-radius: var(--radius-sm); padding: 2px 4px;
transition: background 0.1s;
}
.sidebar-user-info:hover { background: var(--sidebar-hover); }
.sidebar-user-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--accent); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
text-transform: uppercase;
}
.sidebar-user-name {
font-size: 13px; font-weight: 500; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar.collapsed .sidebar-user-name { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 8px 4px; }
.sidebar.collapsed .sidebar-user-info { padding: 2px; justify-content: center; }
.sidebar.collapsed .sidebar-user-menu-btn { display: none; }
.sidebar-user-menu-btn {
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; color: var(--text-muted);
cursor: pointer; transition: all 0.1s; flex-shrink: 0;
position: relative; /* anchors the unread dot */
}
.sidebar-user-menu-btn:hover { background: var(--sidebar-hover); color: var(--text); }
/* Dropdown menu (opens upward from user area) */
.sidebar-user-menu {
display: none; position: absolute;
bottom: calc(100% + 6px); left: 4px; right: 4px;
background: var(--surface); border: 1px solid var(--border);
/* Warm, not black. Every shadow in this product is rgba(60,50,40,·) — a
black one under a cream menu reads grey against the desk. */
border-radius: var(--radius-sm); box-shadow: 0 -4px 16px rgba(60, 50, 40, 0.12);
padding: 4px; z-index: 100;
min-width: 180px;
}
.sidebar-user-menu.open { display: block; }
/* ---- What's new (COM-213) ----
A section in the menu, following the Team block's label-plus-list pattern
rather than being a new component. */
.sidebar-menu-news { padding: 8px 12px 4px; }
/* The thread. Dots down the left joined by a hairline, so three entries read
as one running list rather than three unrelated buttons. */
.news-list { position: relative; margin: 2px 0; }
.news-list::before {
content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px;
width: 1px; border-left: 1px dotted rgba(175, 170, 162, .7);
}
.news-item {
position: relative; display: block; width: 100%; text-align: left;
font-size: 13px; line-height: 1.35; color: var(--text-dim); text-decoration: none;
padding: 7px 8px 7px 20px; border-radius: 6px; margin-left: -8px;
transition: background .1s, color .1s;
}
.news-item::before {
content: ''; position: absolute; left: 9px; top: 12px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--surface3); box-shadow: 0 0 0 2px var(--surface);
}
.news-item:hover { background: var(--sidebar-hover); color: var(--text); }
/* These two and Full changelog are the only keyboard stops in the menu that
are not buttons, so they need the treatment the rest of the menu gets. */
.news-item:focus-visible {
background: var(--sidebar-hover); color: var(--text);
outline: 2px solid var(--accent); outline-offset: -2px;
}
.news-item.unread { color: var(--text); font-weight: 500; }
.news-item.unread::before { background: var(--accent); }
.news-all {
font-size: 12.5px; color: var(--text-muted); font-weight: 500;
padding: 6px 8px; margin: 2px 0 0 -8px; border-radius: 6px;
text-decoration: none;
width: calc(100% + 8px); display: flex; align-items: center; gap: 6px;
transition: background .1s, color .1s;
}
.news-all:hover { background: var(--sidebar-hover); color: var(--text); }
.news-all:focus-visible {
background: var(--sidebar-hover); color: var(--text);
outline: 2px solid var(--accent); outline-offset: -2px;
}
.news-all svg { width: 13px; height: 13px; opacity: .7; }
/* The only nag. One dot that says "there is something in here", gone the
moment they look. A count would make this a chore list. */
.sidebar-user-menu-btn[data-unread="true"]::after {
content: ''; position: absolute; top: 2px; right: 2px;
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.sidebar-menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 12px; border-radius: 6px;
font-size: 13px; font-weight: 500; color: var(--text-dim);
background: none; border: none; cursor: pointer;
transition: all 0.1s; font-family: inherit; text-align: left;
}
.sidebar-menu-item:hover { background: var(--sidebar-hover); color: var(--text); }
.sidebar-menu-item svg {
width: 16px; height: 16px; flex-shrink: 0;
}
.sidebar-menu-item.menu-danger { color: var(--red); }
.sidebar-menu-item.menu-danger:hover { background: var(--red-dim); }
.sidebar-menu-divider {
border: none; border-top: 1px solid var(--border);
margin: 4px 8px;
}
/* Team display in user menu */
.sidebar-menu-team { padding: 8px 12px 4px; }
.sidebar-menu-label {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px;
}
.sidebar-menu-team-name {
font-size: 13px; font-weight: 500; color: var(--text);
display: flex; align-items: center; gap: 8px;
padding: 4px 0;
}
.sidebar-menu-team-option {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 6px 0; border: none; background: none; border-radius: 6px;
font-size: 13px; color: var(--text-dim); cursor: default;
font-family: inherit; text-align: left;
}
.sidebar-menu-team-option.clickable { cursor: pointer; padding: 6px 8px; transition: all 0.1s; }
.sidebar-menu-team-option.clickable:hover { background: var(--sidebar-hover); color: var(--text); }
.sidebar-menu-team-option.active { color: var(--text); font-weight: 600; }
.sidebar-menu-team-option .team-check {
width: 16px; display: flex; justify-content: center; flex-shrink: 0; color: var(--accent);
}
/* Admin toggle indicator (pill/badge in menu item) */
.admin-toggle-indicator {
margin-left: auto; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 7px; border-radius: 10px;
background: var(--surface3); color: var(--text-muted);
}
.admin-toggle-indicator::after { content: 'OFF'; }
body.admin-mode .admin-toggle-indicator {
background: var(--green-dim); color: var(--green);
}
body.admin-mode .admin-toggle-indicator::after { content: 'ON'; }
/* Collapsed sidebar: click avatar opens menu */
.sidebar.collapsed .sidebar-user-menu {
left: calc(var(--sidebar-collapsed) + 4px);
right: auto; bottom: 0;
min-width: 200px;
}
/* ---- Admin Quick-Access Toolbar ---- */
.admin-toolbar {
display: none; align-items: center; gap: 16px;
padding: 6px 16px; background: var(--surface2);
border-bottom: 1px solid var(--border);
font-size: 12px; flex-shrink: 0;
}
body.admin-mode .admin-toolbar { display: flex; }
.admin-toolbar-group {
display: flex; align-items: center; gap: 6px;
}
.admin-toolbar-group label {
font-size: 11px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.admin-toolbar-group select,
.admin-toolbar-group input {
padding: 4px 8px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface);
color: var(--text); font-size: 12px; font-family: var(--mono);
outline: none;
}
.admin-toolbar-group select { min-width: 180px; cursor: pointer; }
.admin-toolbar-group input[type="number"] { width: 80px; }
.admin-toolbar-group select:focus,
.admin-toolbar-group input:focus { border-color: var(--accent); }
.admin-toolbar-apply {
padding: 4px 14px; border-radius: 6px;
background: var(--accent); color: white; border: none;
font-size: 11px; font-weight: 600; cursor: pointer;
transition: background 0.15s; margin-left: auto;
}
.admin-toolbar-apply:hover { background: var(--accent-hover); }
.admin-toolbar-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-toolbar-set-default {
padding: 4px 12px; border-radius: 6px;
background: transparent; color: var(--accent); border: 1px solid var(--accent);
font-size: 11px; font-weight: 600; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.admin-toolbar-set-default:hover { background: var(--accent); color: white; }
.admin-toolbar-set-default:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-toolbar-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.admin-toolbar-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
/* ---- Super Admin effective-system-prompt viewer ---- */
.admin-toolbar-prompt {
margin-left: auto; padding: 4px 12px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
font-size: 11px; font-weight: 600; cursor: pointer;
transition: transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.admin-toolbar-prompt + .admin-toolbar-apply { margin-left: 0; }
.admin-toolbar-prompt.is-ready { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.admin-toolbar-prompt:active { transform: scale(0.97); }
body.system-prompt-open { overflow: hidden; }
.system-prompt-modal {
position: fixed; inset: 0; z-index: 12000;
display: grid; place-items: center; padding: 3vh 3vw;
background: var(--presence-bg);
}
.system-prompt-modal[hidden],
.system-prompt-empty[hidden],
.system-prompt-sections-view[hidden],
.system-prompt-raw-view[hidden] { display: none; }
.system-prompt-dialog {
width: min(1440px, 94vw); height: min(920px, 94vh); min-height: 0;
display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-lg); overflow: hidden;
}
.system-prompt-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
padding: 18px 22px 12px; border-bottom: 1px solid var(--border-light);
}
.system-prompt-header h2 { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.system-prompt-header p { margin-top: 4px; color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.system-prompt-close {
width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%;
background: var(--surface2); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.system-prompt-close:active { transform: scale(0.96); }
.system-prompt-scope {
padding: 10px 22px; border-bottom: 1px solid var(--border-light);
color: var(--text-dim); font-size: 12px; line-height: 1.45;
}
.system-prompt-controls {
display: flex; align-items: center; gap: 9px; padding: 10px 22px;
border-bottom: 1px solid var(--border); background: var(--surface2);
}
.system-prompt-view-switch { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.system-prompt-view-switch button,
.system-prompt-copy-all,
.system-prompt-section-heading button,
.system-prompt-raw-block button {
min-height: 32px; padding: 6px 11px; border: 1px solid transparent; border-radius: 6px;
background: transparent; color: var(--text-dim); font: 600 11px var(--sans); cursor: pointer;
transition: transform 140ms ease-out, background 140ms ease-out, border-color 140ms ease-out;
}
.system-prompt-view-switch button[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.system-prompt-view-switch button:active,
.system-prompt-copy-all:active,
.system-prompt-section-heading button:active,
.system-prompt-raw-block button:active { transform: scale(0.97); }
.system-prompt-copy-all,
.system-prompt-section-heading button,
.system-prompt-raw-block button { border-color: var(--border); background: var(--surface); }
.system-prompt-copy-all { margin-left: auto; }
.system-prompt-copy-all:disabled { opacity: 0.45; cursor: default; }
.system-prompt-search-label,
.system-prompt-selector-label { color: var(--text-dim); font-size: 11px; font-weight: 600; }
#system-prompt-search,
#system-prompt-section-select {
min-height: 34px; border: 1px solid var(--border); border-radius: 7px;
background: var(--surface); color: var(--text); padding: 6px 9px; font: 12px var(--sans); outline: none;
}
#system-prompt-search { width: min(300px, 24vw); }
#system-prompt-search:focus,
#system-prompt-section-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.system-prompt-search-count { min-width: 62px; color: var(--text-muted); font: 11px var(--mono); }
.system-prompt-empty { align-self: center; justify-self: center; padding: 28px; color: var(--text-muted); text-align: center; }
.system-prompt-sections-view {
min-height: 0; display: grid; grid-template-columns: minmax(270px, 32%) minmax(0, 1fr);
}
.system-prompt-tree {
min-height: 0; overflow: auto; padding: 10px; border-right: 1px solid var(--border); background: var(--surface2);
}
.system-prompt-tree-item {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 7px 8px 7px calc(8px + var(--prompt-tree-depth) * 14px); border: 1px solid transparent;
border-radius: 6px; background: transparent; color: var(--text-dim); text-align: left; font: 12px var(--sans); cursor: pointer;
}
.system-prompt-tree-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-prompt-tree-item.is-selected { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.system-prompt-owner {
display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px 6px;
border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
color: var(--text-muted); font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: 0.04em;
}
.system-prompt-owner.owner-admin { color: var(--purple); background: var(--purple-dim); }
.system-prompt-owner.owner-team { color: var(--accent); background: var(--accent-dim); }
.system-prompt-owner.owner-generated { color: var(--cyan); }
.system-prompt-owner.owner-knowledge { color: var(--green); background: var(--green-dim); }
.system-prompt-section-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 16px 18px 18px; }
.system-prompt-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.system-prompt-section-heading h3 { font-size: 15px; line-height: 1.3; }
.system-prompt-provenance { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 6px; color: var(--text-muted); font-size: 11px; }
#system-prompt-section-text,
.system-prompt-raw-block pre {
min-height: 0; margin: 0; padding: 16px; overflow: auto;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
color: var(--text); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
#system-prompt-section-text mark,
.system-prompt-raw-block mark { background: var(--hl-yellow); color: inherit; }
.system-prompt-raw-view { min-height: 0; overflow: auto; padding: 14px 18px 20px; }
.system-prompt-raw-block header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.system-prompt-raw-block header div { display: flex; flex-direction: column; gap: 2px; }
.system-prompt-raw-block header strong { font-size: 12px; }
.system-prompt-raw-block header span { color: var(--text-muted); font: 10px var(--mono); }
.system-prompt-raw-block pre { max-height: 58vh; }
.system-prompt-block-delimiter { padding: 14px 0; color: var(--text-muted); text-align: center; font: 10px var(--mono); }
.system-prompt-copy-status { min-height: 28px; padding: 6px 22px; border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: 11px; }
.system-prompt-selector-label,
#system-prompt-section-select { display: none; }
.system-prompt-modal button:focus-visible,
.system-prompt-modal input:focus-visible,
.system-prompt-modal select:focus-visible,
.system-prompt-modal pre:focus-visible,
.admin-toolbar-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.admin-toolbar-prompt:hover,
.system-prompt-close:hover,
.system-prompt-copy-all:hover:not(:disabled),
.system-prompt-section-heading button:hover,
.system-prompt-raw-block button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.system-prompt-tree-item:hover { background: var(--surface3); }
}
@media (max-width: 760px) {
.system-prompt-modal { padding: 0; place-items: stretch; }
.system-prompt-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.system-prompt-header { padding: 13px 14px 9px; }
.system-prompt-header h2 { font-size: 18px; }
.system-prompt-scope { padding: 8px 14px; }
.system-prompt-controls { padding: 8px 14px; flex-wrap: wrap; }
.system-prompt-search-label { order: 3; }
#system-prompt-search { order: 4; width: min(240px, 60vw); }
.system-prompt-search-count { order: 5; }
.system-prompt-sections-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); padding: 10px 12px 12px; }
.system-prompt-tree { display: none; }
.system-prompt-selector-label,
#system-prompt-section-select { display: block; }
#system-prompt-section-select { width: 100%; margin: 5px 0 10px; }
.system-prompt-section-panel { padding: 0; }
.system-prompt-section-heading { align-items: center; }
.system-prompt-raw-view { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.admin-toolbar-prompt,
.system-prompt-close,
.system-prompt-view-switch button,
.system-prompt-copy-all,
.system-prompt-section-heading button,
.system-prompt-raw-block button { transition: none; }
}
/* Drawer model-section action buttons: Apply to this chat / Set as team default */
.model-action-row { display: flex; gap: 8px; margin-top: 8px; }
.model-action-btn {
flex: 1; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
cursor: pointer; transition: background 0.15s, color 0.15s;
}
.model-action-btn.primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
.model-action-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.model-action-btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.model-action-btn.secondary:hover { background: var(--accent); color: white; }
.model-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ---- Knowledge Base Memory Section ---- */
.kb-memory-section { margin-top: 16px; }
.kb-memory-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
}
.kb-memory-hint {
font-size: 13px; color: var(--text-muted); margin-bottom: 12px;
}
.kb-memory-preview {
font-family: var(--mono); font-size: 12px; line-height: 1.6;
color: var(--text-dim); background: var(--surface2);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 12px; max-height: 200px; overflow-y: auto;
white-space: pre-wrap; word-break: break-word;
margin-bottom: 12px;
}
.kb-memory-preview.empty {
color: var(--text-muted); font-style: italic; font-family: inherit;
}
.kb-memory-actions {
display: flex; gap: 8px;
}
.kb-memory-btn {
padding: 6px 14px; border-radius: 6px;
background: var(--surface2); border: 1px solid var(--border);
color: var(--text-dim); font-size: 12px; font-weight: 500;
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.kb-memory-btn:hover { background: var(--surface3); color: var(--text); }
.kb-memory-danger { border-color: rgba(255, 45, 85, 0.3); color: var(--red); }
.kb-memory-danger:hover { background: var(--red-dim); color: var(--red); }
/* ==================================================================
PAGES PAGE — Deployed pages management
================================================================== */
/* Edge to edge — no centred cap. A landing page is the widest thing this app
shows, and a 1200px band was spending ~250px of a 1440px screen on margin
that the column view's preview needs. The grid simply fits another card. */
/* Grid and column view share one inset (16px left / 12px right — the column
view's, set by .pcol-head and the preview toolbar) so that toggling views
moves nothing but the content itself. Two different insets meant the title,
the tab strip and the New page button all slid sideways on every toggle. */
.pages-page-body { padding: 20px 12px 24px 16px; width: 100%; }
/* Page header: one sticky row. The title used to sit in a row of its own that
scrolled away, which cost ~50px of height and put the page's name and its
controls on separate lines for no reason — they read as one thing. Now the
title leads the control bar: name, filter, search on the left; view toggle,
gear and New page on the right. The column view spends the reclaimed height
on the columns. */
.pages-page-header {
display: flex; flex-direction: column;
/* Matches .pcol-head (0 12px 0 16px) and .pages-page-body. "Pages" lands on
the same vertical as "FOLDERS" / the first tab beneath it in both views,
and nothing in the bar shifts when the view toggles. */
padding: 16px 12px 14px 16px;
width: 100%;
/* z-index must beat a hovered card (.pages-card:hover { z-index: 10 }), else a
card scrolling under the sticky bar punches through it on scroll. */
position: sticky; top: 0; z-index: 20;
background: var(--sidebar-bg);
}
.pages-page-title {
font-size: 19px; font-weight: 700; color: var(--text); margin: 0;
flex-shrink: 0;
}
.pages-control-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; flex-wrap: wrap; }
.pages-control-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Everything actionable lives here, in reading order: search, filter, view,
gear, New page. Wraps to its own line (aligned right) before it ever collides
with the title. */
.pages-control-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* Hairline separating what you're looking at (search/filter) from how you're
looking at it (view/gear/New page). */
.pages-head-divider { width: 1px; align-self: center; height: 22px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
/* You/team creator filter — text pills. Mirrors the gallery filter; only
rendered when the team's pages mix authors. */
.pages-filter { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; flex-shrink: 0; }
/* Pages omits the group entirely when there's no mix to filter; Gallery's header
is static markup, so it toggles [hidden] instead — which the display above
would otherwise win against. */
.pages-filter[hidden] { display: none; }
/* Status filter — one control, not a fifth and sixth pill. A second segmented
strip beside the creator pills read as one long row of options, and its "All"
looked like a third creator choice. This says only what is applied; the rest
of the answer lives one click down. */
.pages-status-filter {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--text-muted);
background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
padding: 6px 9px 6px 10px; cursor: pointer;
transition: color .12s, background .12s, border-color .12s, box-shadow .12s;
}
.pages-status-filter:hover { color: var(--text-dim); }
.pages-status-filter svg { flex-shrink: 0; opacity: .7; }
.pages-status-filter .fib-caret { opacity: .45; }
/* Offline's dot is the base muted grey — the same one the rows use. Declared
explicitly so it reads as chosen rather than as a class that does nothing. */
.pages-status-dot.is-offline { background: var(--text-muted); }
/* Set state earns the surface + weight of an active pill, so a filter left on
is impossible to miss — an unnoticed filter is a page that looks empty for no
reason. */
.pages-status-filter.is-set {
background: var(--surface); color: var(--text); border-color: rgba(139,111,71,0.35);
box-shadow: var(--shadow-sm);
}
.pages-status-filter.is-set svg { opacity: .8; }
.pages-status-filter[aria-expanded="true"] { background: var(--surface); color: var(--text); }
.pages-status-filter.is-hidden { display: none; }
.pages-status-menu { min-width: 190px; padding: 4px; }
.pages-status-menu .pages-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; }
/* Keeps "Any status" hanging on the same left edge as the three that carry a
dot — a ragged first column would undo the grouping the dots create. */
.psf-dot-slot { width: 7px; height: 7px; flex-shrink: 0; }
.psf-name { flex: 1; text-align: left; }
.pages-filter-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--text-muted); background: none; border: none; padding: 5px 11px; border-radius: 7px; cursor: pointer; transition: color .12s, background .12s, box-shadow .12s; }
.pages-filter-pill:hover { color: var(--text-dim); }
.pages-filter-pill.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* Result count per pill. The whole point is comparing the two numbers, so they
are tabular and sit a shade darker than their own label — the chip has to
read as a separate object, not as more of the word. Zero shows: "Just mine 0"
is the answer to the question the pill asks, and hiding it would be
indistinguishable from a pill that never counted at all. */
.pf-count { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-dim); background: rgba(111,96,72,0.13); border-radius: 20px; padding: 1px 6px; min-width: 19px; text-align: center; transition: background .12s, color .12s; }
.pages-filter-pill.is-active .pf-count { background: rgba(139,111,71,0.20); color: #5a4a30; }
/* Search box */
.pages-search {
display: flex; align-items: center; gap: 7px;
padding: 7px 11px; border-radius: 9px;
background: #fffefb; border: 1px solid var(--border);
transition: border-color .15s, box-shadow .15s;
}
.pages-search:focus-within { border-color: rgba(139,111,71,0.45); box-shadow: 0 0 0 3px rgba(139,111,71,0.08); }
.pages-search svg { color: var(--text-muted); flex-shrink: 0; }
.pages-search input { border: none; outline: none; background: none; font-family: var(--sans); font-size: 13px; color: var(--text); width: 150px; }
/* The hero action — warm "leather button" */
.btn-build {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px; border-radius: 10px; border: none;
background: linear-gradient(to bottom, #9a7d54, #8b6f47);
color: #fff5e6; font-family: var(--sans); font-size: 13px; font-weight: 600;
cursor: pointer; white-space: nowrap;
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 2px 5px rgba(60,50,40,0.22), 0 4px 12px rgba(139,111,71,0.18);
transition: transform .18s var(--spring), box-shadow .18s, filter .15s;
}
.btn-build:hover { transform: translateY(-1.5px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 9px rgba(60,50,40,0.24), 0 8px 20px rgba(139,111,71,0.22); filter: brightness(1.03); }
.btn-build:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 3px rgba(60,50,40,0.25); }
.btn-build svg { flex-shrink: 0; }
/* ---- Manila folder tab strip (scrollable, pinned All + New) ---- */
.folder-tabs-wrap { padding: 4px 12px 0 16px; width: 100%; }
.folder-tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 2px solid var(--manila-edge); }
.folder-tabs > .folder-tab { flex-shrink: 0; }
.folder-tabs > .folder-add { flex-shrink: 0; margin-left: 2px; }
.folder-tabs-scroll {
display: flex; align-items: flex-end; gap: 4px;
flex: 1 1 auto; min-width: 0;
overflow-x: auto; overflow-y: hidden;
padding-top: 8px;
/* No scrollbar, on any platform. macOS overlay bars cost no layout, so a
reserved-but-transparent bar was free here and read as free everywhere.
It is not: a classic scrollbar takes its height out of the content box, so
on Windows every tab inside the scroller was seated ~11px above the sheet
while pinned All/Templates still met it — the strip rendered as two rows.
The edge fades already say "there is more this way"; folder-strip-scroll.js
puts a plain vertical wheel back in reach of the far tabs. */
scrollbar-width: none;
--fade-l: 0px; --fade-r: 0px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.folder-tabs-scroll::-webkit-scrollbar { display: none; }
.folder-tabs-scroll > .folder-tab { flex-shrink: 0; }
/* The 2px that seats a tab on the sheet has to move the scroller, not the tabs
inside it. `overflow-x: auto` forces the computed overflow-y to hidden — the
spec will not pair auto with visible — so a tab nudged 2px below its own
container loses exactly that much off its bottom edge. Shifting the scroller
reproduces the nudge with nothing overhanging to clip. */
.folder-tabs-scroll { position: relative; top: 2px; }
.folder-tabs-scroll > .folder-tab { top: 0; }
.folder-tab {
position: relative; top: 2px;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px 10px;
border-radius: 11px 11px 0 0;
background: linear-gradient(to bottom, #efe2c4, var(--manila));
border: 1px solid var(--manila-edge); border-bottom: none;
color: var(--manila-text);
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
cursor: pointer; user-select: none; white-space: nowrap;
box-shadow: 0 -1px 3px rgba(60,50,40,0.04);
transition: background .15s, transform .18s var(--spring), box-shadow .18s, top .15s;
}
.folder-tab:hover { transform: translateY(-2px); }
.folder-tab .ft-name { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.folder-tab .ft-count { font-size: 10.5px; font-weight: 600; color: var(--manila-text); background: rgba(111,96,72,0.14); border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center; }
.folder-tab .ft-icon { opacity: .65; flex-shrink: 0; }
.folder-tab.is-active {
background: linear-gradient(to bottom, #fbf6e9, var(--manila-open));
color: #4a3f2c; box-shadow: 0 -2px 8px rgba(60,50,40,0.08); z-index: 3;
}
.folder-tab.is-active .ft-count { background: rgba(139,111,71,0.18); color: #5a4a30; }
/* Templates is pinned beside All, so it needs to read as a different kind of
thing at a glance. The star is filled at rest — a folder you can't file into
and can't rename, marked the same way its pages are. */
.folder-tab.is-templates .ft-icon { opacity: .8; fill: rgba(139,111,71,0.16); }
.folder-tab.is-templates.is-active .ft-icon { opacity: 1; fill: rgba(139,111,71,0.3); }
/* The All tab doubles as the folder browser: a caret signals the dropdown, and
the tab takes the "open" look while the index is showing. Shared by Gallery
and Pages (both render .folder-tab). */
.folder-tab .ft-caret { display: inline-flex; opacity: .5; margin-left: 1px; flex-shrink: 0; transition: transform .18s var(--spring), opacity .15s; }
.folder-tab:hover .ft-caret { opacity: .75; }
.folder-tab.is-open .ft-caret { transform: rotate(180deg); opacity: .85; }
.folder-tab.is-open {
background: linear-gradient(to bottom, #fbf6e9, var(--manila-open));
color: #4a3f2c; box-shadow: 0 -2px 8px rgba(60,50,40,0.08); z-index: 3;
}
/* Drop target while dragging a card — physical lift, not a colour flash */
.folder-tab.drag-over {
transform: translateY(-5px);
background: linear-gradient(to bottom, #fff8e6, #f7eccb);
box-shadow: 0 6px 16px rgba(139,111,71,0.25), 0 0 0 2px rgba(139,111,71,0.45);
}
.folder-add {
position: relative; top: 2px;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 8px 12px; border-radius: 11px 11px 0 0;
background: transparent; border: 1px dashed var(--manila-edge); border-bottom: none;
color: var(--manila-text); cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s;
}
.folder-add:hover { background: rgba(231,214,176,0.4); color: #4a3f2c; }
.folder-add .fa-plus { font-size: 16px; font-weight: 600; line-height: 1; }
.folder-add .fa-label { font-size: 12px; font-weight: 600; }
.folder-new-input {
position: relative; top: 2px; flex-shrink: 0;
padding: 8px 12px; border-radius: 11px 11px 0 0;
border: 1px solid var(--accent); border-bottom: none;
background: var(--manila-open);
font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #4a3f2c;
outline: none; width: 150px;
}
/* Folder-tab options (rename / delete) — added with the management step */
.ft-menu-btn { opacity: 0; margin-left: 1px; padding: 0 3px; border: none; background: none; color: var(--manila-text); font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1; cursor: pointer; border-radius: 4px; transition: opacity .12s, background .12s; }
.folder-tab:hover .ft-menu-btn, .folder-tab.is-active .ft-menu-btn { opacity: .7; }
.ft-menu-btn:hover { opacity: 1; background: rgba(111,96,72,0.16); }
.ft-menu { position: fixed; z-index: 200; min-width: 152px; background: #fffcf5; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(60,50,40,0.18), 0 2px 6px rgba(60,50,40,0.08); }
.ft-rename-input { width: 132px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #4a3f2c; background: #fff; border: 1px solid var(--accent); border-radius: 5px; padding: 2px 6px; outline: none; }
/* Card grid */
.pages-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
margin-top: 16px;
}
/* Gentle staggered entrance for grid cards on a tab visit. Opacity-only — NO
transform: each card holds a live