/* =============================================================================
/onboard, Carcin chat UI
1:1 port of Bryan's carcin-cloud chat shell (Next.js + Tailwind + shadcn),
rebuilt in vanilla CSS so it lives inside carcin.ai (static CF Pages, no
React). Tokens, shadows, animations, scrollbars all mirror the source at
.ref-carcin-cloud/app/globals.css. When Bryan ships an anon /preview/chat
route upstream, this whole folder gets retired in favor of an iframe/link.
Colorway: `dawn` (one of Bryan's 6 brand colorways). Matches carcin.ai's
amber gold while staying inside Bryan's design system. Swap to .void
(purple), .cosmos (blue), .eclipse (red), .lab (light purple), or
.glacier (light blue) by changing the class on .
============================================================================= */
/* Brand fonts: Inter + JetBrains Mono. Same as carcin.ai + carcin-cloud. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* === BRAND COLORWAYS + DERIVED TOKENS ===
Loaded ahead of this file via
in index.html. Defines all 6 colorways (dawn/void/cosmos/eclipse/lab/
glacier) plus the color-mix derivation for --card/--border/
--muted-foreground/etc. Onboard ships with dawn (the :root default in
tokens.css). The earlier @import url('/tokens.css') approach failed
silently (nested @imports + Google Fonts CDN ordering); explicit
guarantees the tokens load before onboard.css parses. */
/* Dark shadow recipe · default for dawn/void/cosmos/eclipse.
The accent-tinted shadows now read the colorway accent via color-mix
so swapping colorway swaps the focus glow + success halo. */
:root {
--shadow-card:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.2),
0 0.5px 1px rgba(0, 0, 0, 0.15);
--shadow-float:
0 0 0 1px rgba(255, 255, 255, 0.06),
0 16px 48px -6px rgba(0, 0, 0, 0.35),
0 6px 12px -2px rgba(0, 0, 0, 0.2);
--shadow-composer:
0 1px 3px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
--shadow-composer-focus:
0 0 0 1px color-mix(in srgb, var(--brand-accent) 50%, transparent),
0 4px 16px color-mix(in srgb, var(--brand-accent) 30%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-inset: inset 0 1px 1px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 4px 16px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}
/* Light shadow recipe · lab and glacier. White inset highlights flip
to dark, drop shadows lighten, the accent glow stays accent-tinted. */
.lab, .glacier {
--shadow-card:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 1px 2px rgba(15, 23, 42, 0.06),
0 0.5px 1px rgba(15, 23, 42, 0.04);
--shadow-float:
0 0 0 1px rgba(15, 23, 42, 0.05),
0 16px 48px -6px rgba(15, 23, 42, 0.12),
0 6px 12px -2px rgba(15, 23, 42, 0.06);
--shadow-composer:
0 1px 3px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 1);
--shadow-composer-focus:
0 0 0 1px color-mix(in srgb, var(--brand-accent) 50%, transparent),
0 4px 16px color-mix(in srgb, var(--brand-accent) 22%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 1);
--shadow-inset: inset 0 1px 1px rgba(15, 23, 42, 0.06);
--shadow-glow: 0 4px 16px color-mix(in srgb, var(--brand-accent) 25%, transparent);
}
/* === BASE === */
html, body {
height: 100%;
background: var(--background);
color: var(--foreground);
}
body {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
font-feature-settings: "ss01", "ss02", "cv01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.5;
overflow: hidden; /* chat shell never scrolls the page */
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.025em;
line-height: 1.2;
}
button, input, textarea, select {
font: inherit;
color: inherit;
background: transparent;
border: 0;
outline: 0;
}
button { cursor: pointer; }
/* Bryan-style scrollbars: 4px wide, transparent track.
Thumb derived from --foreground so light colorways get a dark thumb. */
* {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--foreground) 18%, transparent);
border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 32%, transparent); }
/* Brand label utility (mono uppercase, 0.18em tracking, 11px) */
.brand-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* === SHELL LAYOUT ===
Bryan's layout: sidebar (left) + main column. Sidebar is collapsible.
On mobile (< 768px), sidebar slides over the main column as an overlay. */
.shell {
display: flex;
height: 100dvh;
width: 100%;
}
/* === SIDEBAR ===
Mirrors app.carcin.ai's icon-only collapsed mode. Default width 48px
(icon-only); .expanded class bumps to 260px and reveals labels.
.collapsed (full hide) is used for desktop dead-end recovery, not
the primary state. */
.sidebar {
width: 48px; /* icon-only by default */
flex-shrink: 0;
background: var(--sidebar);
border-right: 1px solid var(--sidebar-border);
color: var(--sidebar-foreground);
display: flex;
flex-direction: column;
transition: width 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
}
.sidebar.expanded { width: 260px; }
.sidebar.collapsed { width: 0; border-right: 0; overflow: hidden; }
/* Items tagged .expand-only are hidden in the icon-only state and
appear when the sidebar expands. Mirrors shadcn's
`group-data-[collapsible=icon]:hidden` pattern. */
.sidebar .expand-only { display: none; }
.sidebar.expanded .expand-only { display: inline-flex; }
.sidebar.expanded .sidebar-history { display: block; }
.sidebar.expanded .sidebar-brand-name { display: inline; }
.sidebar.expanded .nav-label { display: inline; }
.sidebar-header {
display: flex;
align-items: center;
justify-content: center; /* icon-only centers the mark */
gap: 8px;
padding: 8px;
min-height: 56px; /* matches h-14 */
}
.sidebar.expanded .sidebar-header {
justify-content: space-between;
padding: 12px 12px 8px;
}
.sidebar-brand {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--sidebar-foreground);
transition: background 0.15s var(--ease-smooth);
}
.sidebar-brand:hover { background: var(--sidebar-accent); }
.sidebar-brand .mark { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar-brand-name {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sidebar-primary);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius-md);
color: var(--sidebar-foreground);
transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.icon-btn:hover { background: var(--sidebar-accent); color: var(--sidebar-primary); }
.icon-btn svg { width: 16px; height: 16px; }
/* Primary nav (icon list). Each row is a 32x32 square in collapsed
mode, expands to a full row with label when sidebar is expanded.
Mirrors Bryan's SidebarMenuButton in app-sidebar.tsx. */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
}
.sidebar.expanded .sidebar-nav { padding: 4px 8px; }
.nav-row {
display: flex;
align-items: center;
justify-content: center; /* center icon when collapsed */
gap: 10px;
width: 100%;
height: 32px;
padding: 0;
border-radius: var(--radius-md);
color: var(--sidebar-foreground);
background: transparent;
border: 0;
text-decoration: none;
font-size: 13px;
font-weight: 500;
position: relative;
cursor: pointer;
transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.sidebar.expanded .nav-row {
justify-content: flex-start;
padding: 0 10px;
}
.nav-row:hover { background: var(--sidebar-accent); color: var(--sidebar-primary); }
.nav-row.active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-label { white-space: nowrap; }
/* Tooltip on hover when sidebar is collapsed (icons need labels then) */
.sidebar:not(.expanded) .nav-row:hover::after,
.sidebar:not(.expanded) .sidebar-brand:hover::after {
content: attr(data-tip);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--card);
color: var(--foreground);
font-size: 12px;
padding: 5px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow-float);
white-space: nowrap;
z-index: 100;
pointer-events: none;
}
.sidebar-section-label {
padding: 14px 16px 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.sidebar-history { display: none; flex: 1; overflow-y: auto; padding: 0 8px; }
.sidebar-history-empty {
padding: 8px 12px;
font-size: 13px;
color: var(--muted-foreground);
line-height: 1.5;
}
/* Footer pinned to bottom: trash (clear chat) + signin/avatar row.
In icon-only mode only icons show; expanded shows labels. */
.sidebar-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
border-top: 1px solid var(--sidebar-border);
}
.sidebar.expanded .sidebar-footer { padding: 8px; }
/* Avatar circle for the sign-in row. For anon shows "?" placeholder;
logged-in upstream would show first initial / pic. */
.sidebar-avatar {
width: 22px; height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-family: 'Inter', sans-serif;
flex-shrink: 0;
}
.sidebar-signin .sidebar-avatar { width: 22px; height: 22px; }
/* Context file list. Each row is a clickable item that opens the file
in the artifact rail. Icon + title + subtitle. Active state when
that file is currently open in the rail. */
.sidebar-context {
padding: 0 8px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-context-loading {
padding: 8px 12px;
font-size: 12px;
color: var(--muted-foreground);
}
.context-file {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--sidebar-foreground);
background: transparent;
border: 0;
text-align: left;
width: 100%;
transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.context-file:hover { background: var(--sidebar-accent); }
.context-file.active {
background: color-mix(in srgb, var(--primary) 10%, transparent);
color: var(--brand-fg);
}
.context-file.active .context-file-title { color: var(--primary); }
.context-file-icon {
flex-shrink: 0;
width: 16px; height: 16px;
color: var(--muted-foreground);
margin-top: 1px;
}
.context-file.active .context-file-icon { color: var(--primary); }
.context-file-text {
display: flex; flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.context-file-title {
font-size: 13px;
font-weight: 500;
color: var(--sidebar-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.context-file-subtitle {
font-size: 11px;
color: var(--muted-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-history {
flex: 1;
overflow-y: auto;
padding: 0 8px;
}
.sidebar-history-empty {
padding: 8px 12px;
font-size: 13px;
color: var(--muted-foreground);
line-height: 1.5;
}
/* (footer + sign-in styles consolidated above into .sidebar-footer +
.sidebar-avatar; .sidebar-signin is just a .nav-row variant) */
/* === MAIN COLUMN === */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--background);
}
.header {
position: sticky;
top: 0;
height: 56px; /* Bryan: h-14 */
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background: var(--sidebar);
border-bottom: 1px solid var(--sidebar-border);
z-index: 5;
}
/* mobile-only normally hides on desktop. EXCEPT when the sidebar has
been collapsed on desktop, in which case the only way back to the
sidebar is this button (the collapse toggle disappeared with the
sidebar that contained it). Body class set by JS on toggle. */
.header .mobile-only { display: none; }
body.desktop-sidebar-collapsed .header .mobile-only { display: inline-flex; }
.header-spacer { flex: 1; }
/* Context toggle, lives at the top-right of the chat header. The only
way (for now) to surface the right panel. Uses the same icon-button
chrome as the sidebar but with a label, since this is a primary
affordance not a utility action. Active when the panel is open. */
.header-context-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: var(--radius-md);
color: var(--sidebar-foreground);
border: 1px solid var(--sidebar-border);
background: transparent;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.header-context-btn:hover {
background: var(--sidebar-accent);
color: var(--sidebar-primary);
border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.header-context-btn.active {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}
.header-context-btn svg { width: 14px; height: 14px; }
.header-context-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* === CONVERSATION ===
Bryan: flex flex-col gap-8 p-4, role="log", stick-to-bottom scroll. */
.conversation {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 0; /* inner content provides padding */
scroll-behavior: smooth;
}
.conversation-inner {
display: flex;
flex-direction: column;
gap: 32px; /* gap-8 */
padding: 24px; /* p-4 → bumped for breathing room */
max-width: 820px;
width: 100%;
margin: 0 auto;
flex: 1;
}
/* Greeting · empty-state hero. Mirrors app.carcin.ai's "Welcome back,
Lucas." pattern: big title, muted subtitle, dark pill CTA below.
No mark icon (app's logged-in view doesn't show one either). */
.greeting {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
margin: auto 0;
}
.greeting-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 30px;
letter-spacing: -0.025em;
color: var(--foreground);
text-align: center;
animation: fade-up 0.5s 0.2s var(--ease-spring) both;
}
.greeting-subtitle {
margin-top: 8px;
font-size: 14px;
color: rgba(255, 245, 230, 0.6);
text-align: center;
max-width: 48ch;
animation: fade-up 0.5s 0.35s var(--ease-spring) both;
}
.greeting-cta {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 18px;
background: color-mix(in srgb, var(--foreground) 6%, transparent);
border: 1px solid var(--border);
border-radius: 100px;
color: var(--foreground);
font-size: 14px;
font-weight: 500;
cursor: pointer;
animation: fade-up 0.5s 0.5s var(--ease-spring) both;
transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring);
}
.greeting-cta:hover {
background: color-mix(in srgb, var(--primary) 12%, transparent);
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
transform: translateY(-1px);
}
.greeting-cta svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.greeting-cta:hover svg { color: var(--primary); }
@media (min-width: 768px) {
.greeting-title { font-size: 34px; }
}
/* === MESSAGES ===
Bryan: gap-2 flex flex-col, max-w-[95%], user is-user ml-auto. */
.message {
display: flex;
flex-direction: column;
gap: 8px; /* gap-2 */
max-width: 95%;
animation: message-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.message.is-user { margin-left: auto; align-items: flex-end; }
.message.is-assistant { align-items: flex-start; }
.message-content {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
max-width: 100%;
overflow: hidden;
font-size: 14px;
line-height: 1.55;
color: var(--foreground);
}
.message.is-user .message-content {
background: var(--primary);
color: var(--primary-foreground);
padding: 10px 14px;
border-radius: 18px 18px 4px 18px;
font-weight: 500;
}
.message.is-assistant .message-content p { margin: 0; }
.message.is-assistant .message-content p + p { margin-top: 12px; }
/* Pills (industry/yes-no/etc options), from existing chat protocol */
.pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.pill {
display: inline-flex;
align-items: center;
padding: 8px 14px;
background: rgba(255, 245, 230, 0.04);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: var(--foreground);
transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring);
}
.pill:hover {
background: color-mix(in srgb, var(--primary) 10%, transparent);
border-color: var(--primary);
transform: translateY(-1px);
}
.pill:active { transform: translateY(0); }
.pill.selected {
background: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
/* === CONFIRM CARD ===
Rendered when the assistant emits [CONFIRM:{...json...}]. A summary
of every field collected so far (business, email, industry, ZIP,
optional notes) with Looks-good / Edit actions. Uses card chrome
from Bryan's design tokens (--card, --border, --radius, --shadow-card)
so it slots in as a first-class artifact-style render, not a basic
message bubble. */
.confirm-card {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
animation: fade-up 0.3s var(--ease-spring) both;
}
.confirm-rows { padding: 4px 0; }
.confirm-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
padding: 12px 18px;
align-items: start;
border-bottom: 1px solid var(--border);
}
.confirm-row:last-child { border-bottom: 0; }
.confirm-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted-foreground);
padding-top: 3px;
}
.confirm-value {
font-size: 14px;
font-weight: 500;
color: var(--foreground);
line-height: 1.5;
word-break: break-word;
}
.confirm-trades {
display: flex; flex-wrap: wrap; gap: 6px;
}
.confirm-trade {
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
border-radius: 100px;
font-size: 12px;
font-weight: 500;
}
.confirm-actions {
display: flex; gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--border);
background: rgba(255, 245, 230, 0.02);
}
.confirm-btn {
flex: 1;
height: 40px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
transition: background 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring), opacity 0.2s ease;
}
.confirm-btn--yes {
background: var(--primary);
color: var(--primary-foreground);
}
.confirm-btn--yes:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 80%, white); transform: translateY(-1px); }
.confirm-btn--edit {
flex: 0 0 auto;
padding: 0 18px;
background: transparent;
color: var(--muted-foreground);
border: 1px solid var(--border);
}
.confirm-btn--edit:hover:not(:disabled) {
background: rgba(255, 245, 230, 0.04);
color: var(--foreground);
border-color: var(--muted-foreground);
}
.confirm-btn:disabled { opacity: 0.55; cursor: default; }
/* === SUCCESS STATE ===
Rendered after /api/chat-submit returns a submission_id. Replaces the
composer area with a confirmation banner so the visitor knows their
info landed and to expect a follow-up. */
.success-card {
width: 100%;
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
border-radius: var(--radius-lg);
padding: 22px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
text-align: center;
animation: fade-up 0.4s var(--ease-spring) both;
}
.success-icon {
display: grid; place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--primary);
color: var(--primary-foreground);
box-shadow: var(--shadow-glow);
}
.success-icon svg { width: 22px; height: 22px; }
.success-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--foreground);
}
.success-sub {
font-size: 13px;
color: var(--muted-foreground);
max-width: 42ch;
}
/* Thinking indicator, Bryan's dot-pulse animation */
.thinking {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 14px;
background: rgba(255, 245, 230, 0.04);
border-radius: 18px 18px 18px 4px;
}
.thinking-dot {
width: 6px; height: 6px;
background: var(--muted-foreground);
border-radius: 50%;
animation: thinking-dot 1.4s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.thinking-dot:nth-child(3) { animation-delay: 0.3s; }
/* === COMPOSER ===
Bryan's prompt-input: textarea with grow-on-type, send button on the
right, optional attach buttons on the left. Focus state glows with the
colorway accent. */
.composer-wrap {
padding: 0 24px 24px;
max-width: 820px;
width: 100%;
margin: 0 auto;
}
/* Composer mirrors app.carcin.ai: paperclip attach on left, model
chip with sparkles, textarea fills middle, up-arrow send circle on
right. Card surface, focus pulls amber glow. */
.composer {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 10px 10px 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 22px;
box-shadow: var(--shadow-composer);
transition: border-color 0.18s var(--ease-smooth), box-shadow 0.18s var(--ease-smooth);
}
.composer:focus-within {
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
box-shadow: var(--shadow-composer-focus);
}
.composer-attach {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
color: var(--muted-foreground);
transition: color 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
flex-shrink: 0;
}
.composer-attach:hover:not(:disabled) { color: var(--foreground); background: var(--accent); }
.composer-attach:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-attach svg { width: 16px; height: 16px; }
.composer-model {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 100px;
background: color-mix(in srgb, var(--primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
color: var(--primary);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.composer-model svg { width: 12px; height: 12px; }
.composer-input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
resize: none;
font: 15px/1.5 'Inter', sans-serif;
color: var(--foreground);
padding: 8px 4px;
min-height: 24px;
max-height: 200px;
overflow-y: auto;
}
.composer-input::placeholder { color: var(--muted-foreground); }
.composer-send {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--primary);
color: var(--primary-foreground);
transition: background 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring), opacity 0.15s ease;
flex-shrink: 0;
}
.composer-send:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 80%, white); transform: scale(1.05); }
.composer-send:active:not(:disabled) { transform: scale(0.95); }
.composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
.composer-send svg { width: 16px; height: 16px; }
/* Suggestion chips below the composer. Mirrors app.carcin.ai's
subtle outlined pills that prime common asks. Click sends the
underlying prompt as if typed. */
.composer-suggestions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.suggestion {
padding: 8px 14px;
border-radius: 100px;
background: transparent;
border: 1px solid var(--border);
color: rgba(255, 245, 230, 0.7);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring);
}
.suggestion:hover {
background: color-mix(in srgb, var(--primary) 6%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, transparent);
color: var(--foreground);
transform: translateY(-1px);
}
/* === ARTIFACT RAIL ===
The third panel. Mirrors components/chat/carcin-artifact-rail.tsx:
slides in from the right when an artifact is open (roadmap, dashboard,
audit report, etc.), zero width when closed. ChatShell decides width
allocation; here .artifact-rail.open expands and the .main column
shares space with it.
v1 ships the layout primitive only; no artifact controller yet. */
.artifact-rail {
flex-shrink: 0;
width: 0;
background: var(--background);
border-left: 1px solid var(--border);
overflow: hidden;
position: relative;
transition: width 0.3s var(--ease-spring);
}
.artifact-rail.open {
width: clamp(360px, 36vw, 540px);
}
.artifact-close {
position: absolute;
top: 12px; right: 12px;
z-index: 20;
display: grid;
place-items: center;
width: 28px; height: 28px; /* size-7 */
border-radius: 8px;
color: rgba(255, 245, 230, 0.6); /* text-muted-foreground/60 */
transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.artifact-close:hover {
background: var(--muted);
color: var(--foreground);
}
.artifact-close svg { width: 16px; height: 16px; }
.artifact-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.artifact-content[hidden] { display: none; }
/* === ACCORDIONS (right panel) ===
Two collapsible sections matching shadcn/Bryan vocabulary: trigger
row with chevron + title + optional meta count on the right, body
slides open with grid-template-rows trick for smooth height anim. */
.accordions {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 8px 0;
}
.accordion {
border-bottom: 1px solid var(--border);
}
.accordion-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--foreground);
transition: background 0.15s var(--ease-smooth);
}
.accordion-trigger:hover { background: rgba(255, 245, 230, 0.03); }
.accordion-chevron {
width: 14px; height: 14px;
color: var(--muted-foreground);
flex-shrink: 0;
transition: transform 0.2s var(--ease-spring);
}
.accordion.expanded .accordion-chevron { transform: rotate(90deg); }
.accordion-title {
flex: 1;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
}
.accordion-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-foreground);
}
/* Accordion body: max-height collapse pattern. Default 0 + overflow
hidden so collapsed bodies render nothing. Expanded gets a generous
max-height (any bigger content scrolls inside via .accordions). The
inner-padding goes on a wrapper so it disappears too when collapsed. */
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s var(--ease-spring);
}
.accordion.expanded .accordion-body { max-height: 2000px; }
.accordion-body-inner {
padding: 0 22px 18px;
}
.accordion-intro {
font-size: 12.5px;
line-height: 1.55;
color: var(--muted-foreground);
margin: 0 0 14px;
}
/* === LIVE PREVIEW ("Your Carcin") ===
Empty state: subtle icon + helper copy. Populated state: stack of
field cards that fill as conversation extracts business/email/
industry/zip. Updates on every assistant turn. */
.live-preview {
display: flex;
flex-direction: column;
gap: 10px;
}
.live-preview-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 22px 8px;
text-align: center;
}
.live-preview-empty svg {
width: 32px; height: 32px;
color: var(--muted-foreground);
opacity: 0.55;
}
.live-preview-empty p {
font-size: 13px;
color: var(--muted-foreground);
line-height: 1.55;
max-width: 32ch;
}
.live-field {
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
animation: fade-up 0.3s var(--ease-spring) both;
}
.live-field-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.live-field-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--foreground);
letter-spacing: -0.005em;
word-break: break-word;
}
.live-field.is-pill .live-field-value {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
border-radius: 100px;
font-size: 12.5px;
align-self: flex-start;
}
/* Intro paragraph above the file list inside the panel. Sets the
"this is what Carcin starts with" frame so the file rows aren't
just an unlabeled list. */
.context-intro {
font-size: 13.5px;
line-height: 1.6;
color: var(--muted-foreground);
margin: 0 0 22px;
}
.context-files {
display: flex;
flex-direction: column;
gap: 6px;
}
/* File list rows (inside the right panel, NOT the sidebar). Bigger and
more substantial than the sidebar version because they have more room
to breathe and they're the primary content. */
.context-file-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
background: var(--card);
border: 1px solid var(--border);
cursor: pointer;
text-align: left;
width: 100%;
transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), transform 0.15s var(--ease-spring);
}
.context-file-row:hover {
background: var(--accent);
border-color: color-mix(in srgb, var(--primary) 45%, transparent);
transform: translateY(-1px);
}
.context-file-row .context-file-icon {
flex-shrink: 0;
width: 18px; height: 18px;
color: var(--primary);
margin-top: 2px;
}
.context-file-row .context-file-text {
display: flex; flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.context-file-row .context-file-title {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--foreground);
letter-spacing: -0.005em;
}
.context-file-row .context-file-subtitle {
font-size: 12px;
color: var(--muted-foreground);
line-height: 1.4;
}
/* Back arrow above the file detail. Returns to the list view. */
.artifact-back {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px 0 6px;
border-radius: var(--radius-md);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-foreground);
background: transparent;
border: 0;
cursor: pointer;
margin-bottom: 10px;
transition: color 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
}
.artifact-back:hover {
color: var(--foreground);
background: var(--accent);
}
.artifact-back svg { width: 14px; height: 14px; }
.artifact-header {
flex-shrink: 0;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.artifact-title-group {
display: flex; flex-direction: column; gap: 4px;
min-width: 0; flex: 1;
}
.artifact-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
}
.artifact-title {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
}
.artifact-path {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted-foreground);
margin-top: 2px;
}
.artifact-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px 28px;
}
/* Rendered markdown body (matches Bryan's prose feel). Tight headings,
readable line-height, gold link color, mono code blocks with the
surface color. */
.artifact-md h1, .artifact-md h2, .artifact-md h3, .artifact-md h4 {
color: var(--foreground);
letter-spacing: -0.02em;
line-height: 1.25;
margin: 24px 0 10px;
}
.artifact-md h1:first-child, .artifact-md h2:first-child { margin-top: 0; }
.artifact-md h1 { font-size: 22px; font-weight: 800; }
.artifact-md h2 { font-size: 17px; font-weight: 700; padding-top: 18px; border-top: 1px solid var(--border); margin-top: 26px; }
.artifact-md h2:first-child { border-top: 0; padding-top: 0; }
.artifact-md h3 { font-size: 14px; font-weight: 600; color: var(--primary); }
.artifact-md p, .artifact-md li {
font-size: 13.5px;
line-height: 1.65;
color: var(--foreground);
}
.artifact-md p { margin: 10px 0; }
.artifact-md strong { color: var(--foreground); font-weight: 700; }
.artifact-md em { color: var(--muted-foreground); font-style: italic; }
.artifact-md ul, .artifact-md ol {
margin: 10px 0 10px 22px;
color: var(--foreground);
}
.artifact-md li { margin: 5px 0; }
.artifact-md a {
color: var(--primary);
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--primary) 40%, transparent);
}
.artifact-md a:hover { border-bottom-color: var(--primary); }
.artifact-md code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.88em;
background: var(--muted);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
color: var(--primary);
}
.artifact-md pre {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px;
overflow-x: auto;
font-size: 12px;
line-height: 1.5;
margin: 12px 0;
}
.artifact-md pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--foreground);
}
.artifact-md blockquote {
margin: 12px 0;
padding: 10px 16px;
border-left: 3px solid var(--primary);
background: color-mix(in srgb, var(--primary) 6%, transparent);
color: var(--muted-foreground);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.artifact-md blockquote p { color: var(--muted-foreground); font-style: italic; }
.artifact-md table {
width: 100%;
border-collapse: collapse;
margin: 14px 0;
font-size: 12.5px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.artifact-md thead { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.artifact-md th {
text-align: left;
padding: 8px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
border-bottom: 1px solid var(--border);
}
.artifact-md td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
vertical-align: top;
color: var(--foreground);
line-height: 1.5;
}
.artifact-md tr:last-child td { border-bottom: 0; }
.artifact-md hr {
border: 0;
height: 1px;
background: var(--border);
margin: 22px 0;
}
/* JSON renders pretty-printed in a single code block */
.artifact-json {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
line-height: 1.5;
color: var(--foreground);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
white-space: pre;
overflow-x: auto;
}
/* Mobile: artifact rail takes the full main column instead of squeezing */
@media (max-width: 900px) {
.artifact-rail.open {
position: fixed;
inset: 0 0 0 0;
width: 100vw;
z-index: 40;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}
}
/* === MOBILE === */
@media (max-width: 767px) {
.sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 30;
transform: translateX(-100%);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}
.sidebar.open { transform: translateX(0); }
.sidebar.collapsed { width: 260px; } /* mobile uses open/closed, not collapsed */
.header .mobile-only { display: inline-flex; }
.sidebar-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 29;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease-smooth);
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.conversation-inner { padding: 16px; }
.composer-wrap { padding: 0 16px 16px; }
}
/* === RESUMED TOAST ===
Fires once on cold-boot when loadSavedSession() restored a previous
conversation from the server. Tells the user their work persisted
instead of leaving them confused by the pre-populated history.
Auto-dismisses after 5 seconds. */
.resumed-toast {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%) translateY(-12px);
z-index: 50;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: var(--card);
border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
border-radius: 100px;
color: var(--foreground);
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-float);
opacity: 0;
transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-spring);
}
.resumed-toast.in {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.resumed-toast svg {
width: 14px; height: 14px; color: var(--primary);
}
/* === ANIMATIONS (Bryan's exact keyframes) === */
@keyframes fade-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes message-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes thinking-dot {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Inline link inside a streamed assistant message body. Was inline-styled
in renderInlineMarkdown for years; lifted out so colorway swaps carry. */
.message-content a.md-link {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.message-content a.md-link:hover { color: color-mix(in srgb, var(--primary) 80%, white); }
/* === FINDINGS ACCORDION (v4) ============================================== */
/*
Right-rail third accordion. Fills with cards as Carcin emits
[FINDING:{type:...}] blocks during the value ladder. Card types:
gbp_audit, competitor_compare, site_score (with pending skeleton),
playbook, sample_copy. Unknown types fall back to a raw JSON view.
*/
.findings-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 2px 12px;
}
.findings-empty {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 12px;
color: var(--muted-foreground);
font-size: 13px;
line-height: 1.45;
border: 1px dashed var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--primary) 2%, transparent);
}
.findings-empty svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.findings-empty p { margin: 0; }
.finding-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
animation: fade-up 0.32s var(--ease-smooth) both;
}
.finding-card-head {
display: flex;
flex-direction: column;
gap: 2px;
}
.finding-card-type {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
font-weight: 600;
}
.finding-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--foreground);
line-height: 1.3;
}
.finding-card-subtitle {
font-size: 12px;
color: var(--muted-foreground);
line-height: 1.35;
}
.finding-card-body { font-size: 13px; color: var(--foreground); line-height: 1.45; }
/* --- spsw_asset (Growth Report) ----------------------------------------- */
.spsw { display: flex; flex-direction: column; gap: 12px; }
.spsw-section { display: flex; flex-direction: column; gap: 5px; }
.spsw-label {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted-foreground); font-weight: 600;
}
.spsw-insight { font-size: 13px; color: var(--foreground); line-height: 1.5; }
.spsw-conclusion { font-size: 13.5px; color: var(--foreground); font-weight: 600; line-height: 1.4; }
.spsw-dir { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.spsw-dir:first-of-type { border-top: none; }
.spsw-dir-month {
font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
font-weight: 700; color: var(--primary); flex-shrink: 0;
}
.spsw-dir-body { flex: 1; min-width: 0; }
.spsw-dir-action { font-size: 12.5px; color: var(--foreground); line-height: 1.4; }
.spsw-dir-outcome { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.35; }
/* --- per-gate customer rating (spec 003) -------------------------------- */
.gate-rate {
display: flex; align-items: center; gap: 6px;
margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border);
}
.gate-rate-q { font-size: 11.5px; color: var(--muted-foreground); margin-right: 2px; }
.gate-rate-btn {
background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm, 7px);
padding: 2px 7px; font-size: 13px; line-height: 1; cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.gate-rate-btn:hover { background: var(--muted, rgba(255,255,255,0.05)); }
.gate-rate-btn:active { transform: scale(0.9); }
.gate-rate-btn.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.gate-rate-status { font-size: 11px; color: var(--muted-foreground); margin-left: 2px; }
/* --- gbp_audit ---------------------------------------------------------- */
.audit-row {
display: flex;
gap: 8px;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.audit-row:first-child { border-top: none; padding-top: 4px; }
.audit-dot {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
margin-top: 6px;
}
.audit-red .audit-dot { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }
.audit-yellow .audit-dot { background: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.audit-green .audit-dot { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.18); }
.audit-row-body { flex: 1; min-width: 0; }
.audit-label { font-weight: 500; color: var(--foreground); }
.audit-fix { margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
/* --- competitor_compare ------------------------------------------------- */
.compare-grid {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.compare-row { display: grid; grid-template-columns: 70px 1fr 1fr; align-items: stretch; }
.compare-row:not(:first-child) { border-top: 1px solid var(--border); }
.compare-row--head { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.compare-cell {
padding: 7px 10px;
font-size: 12px;
color: var(--foreground);
word-break: break-word;
}
.compare-cell--label {
color: var(--muted-foreground);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
border-right: 1px solid var(--border);
}
.compare-cell--head { font-weight: 600; }
.compare-cell + .compare-cell { border-left: 1px solid var(--border); }
.compare-na { color: var(--muted-foreground); opacity: 0.6; }
.compare-rewrite {
padding: 10px 12px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.compare-rewrite-label {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
font-weight: 600;
margin-bottom: 4px;
}
.compare-rewrite-text { font-size: 13px; font-weight: 500; line-height: 1.4; }
/* --- site_score --------------------------------------------------------- */
.score-gauge {
display: flex;
align-items: baseline;
gap: 4px;
padding: 4px 0 8px;
border-bottom: 1px solid var(--border);
}
.score-num { font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1; }
.score-suffix { font-size: 12px; color: var(--muted-foreground); }
.score-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.score-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; font-size: 12px; align-items: center; }
.score-row-icon {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 700;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
}
.score-row-key { color: var(--foreground); }
.score-row-val { color: var(--muted-foreground); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
/* score skeleton (pending site_score) */
.score-skeleton { display: flex; flex-direction: column; gap: 8px; }
.score-gauge--skel {
width: 60px; height: 24px;
border-radius: 6px;
background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 10%, transparent));
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-bottom: none;
}
.score-skel-line {
height: 10px;
border-radius: 4px;
background: linear-gradient(90deg, rgba(176,151,130,0.10), rgba(176,151,130,0.22), rgba(176,151,130,0.10));
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
}
.score-skel-line.short { width: 60%; }
@keyframes shimmer {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
/* --- playbook ----------------------------------------------------------- */
.playbook-months { display: flex; flex-direction: column; gap: 8px; }
.playbook-month {
padding: 9px 10px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--primary) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.playbook-month-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 3px;
}
.playbook-month-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 700; color: var(--primary);
letter-spacing: 0.03em;
}
.playbook-month-theme {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted-foreground);
}
.playbook-month-action { font-size: 13px; font-weight: 500; color: var(--foreground); line-height: 1.35; }
.playbook-month-outcome { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.playbook-blurred {
position: relative;
margin-top: 10px;
padding: 12px 10px 50px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--primary) 2%, transparent);
border: 1px solid var(--border);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.playbook-month--blurred {
filter: blur(2.5px);
padding: 7px 8px;
background: color-mix(in srgb, var(--primary) 4%, transparent);
border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}
.playbook-month--blurred .playbook-month-theme { display: none; }
.playbook-unlock-cta {
position: absolute;
bottom: 10px; left: 50%;
transform: translateX(-50%);
appearance: none;
border: 0;
cursor: pointer;
padding: 8px 14px;
border-radius: 100px;
background: var(--foreground);
color: var(--background);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: var(--shadow-float);
transition: transform 0.18s var(--ease-spring), background 0.18s var(--ease-smooth);
}
.playbook-unlock-cta:hover { transform: translateX(-50%) translateY(-1px); background: var(--primary); color: var(--brand-primary-fg, #1a0f08); }
/* --- sample_copy -------------------------------------------------------- */
.copy-block { display: flex; flex-direction: column; gap: 4px; }
.copy-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-foreground);
margin-top: 6px;
}
.copy-label:first-child { margin-top: 0; }
.copy-headline { font-size: 16px; font-weight: 700; color: var(--foreground); line-height: 1.25; }
.copy-subhead { font-size: 13px; color: var(--foreground); line-height: 1.4; }
.copy-cta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-cta {
display: inline-block;
padding: 6px 12px;
border-radius: 100px;
background: var(--primary);
color: var(--brand-primary-fg, #1a0f08);
font-size: 12px;
font-weight: 600;
}
.copy-cta-secondary { font-size: 12px; color: var(--muted-foreground); }
/* --- unknown type fallback --------------------------------------------- */
.finding-raw {
margin: 0;
padding: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--muted-foreground);
background: color-mix(in srgb, var(--primary) 4%, transparent);
border-radius: var(--radius-sm);
overflow-x: auto;
max-height: 240px;
}
/* --- loading state ------------------------------------------------------ */
.finding-card.is-loading { opacity: 0.92; }
/* === CONTEXT EDITOR ======================================================
Password modal, full-page editor overlay, AI chat panel. Activated by
the pencil icon on each context file row in the Carcin accordion. */
/* Pencil edit button on each context file row */
.context-edit-btn {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--muted-foreground);
opacity: 0;
transition: opacity 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
margin-left: auto;
align-self: center;
}
.context-file-row:hover .context-edit-btn { opacity: 1; }
.context-edit-btn:hover {
background: color-mix(in srgb, var(--primary) 15%, transparent);
color: var(--primary);
}
.context-edit-btn svg { width: 14px; height: 14px; }
/* Password modal overlay */
.editor-modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.2s var(--ease-smooth);
}
.editor-modal-overlay.open { opacity: 1; }
.editor-modal {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-float);
padding: 28px 32px;
width: min(380px, 90vw);
display: flex;
flex-direction: column;
gap: 16px;
transform: scale(0.95) translateY(8px);
transition: transform 0.25s var(--ease-spring);
}
.editor-modal-overlay.open .editor-modal { transform: scale(1) translateY(0); }
.editor-modal-title {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--foreground);
letter-spacing: -0.01em;
}
.editor-modal-subtitle {
font-size: 13px;
color: var(--muted-foreground);
margin-top: -8px;
}
.editor-modal-input {
width: 100%;
padding: 10px 14px;
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--foreground);
font-size: 14px;
transition: border-color 0.15s var(--ease-smooth);
}
.editor-modal-input:focus {
border-color: var(--primary);
outline: none;
}
.editor-modal-error {
font-size: 12px;
color: #ef4444;
min-height: 18px;
}
.editor-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.editor-modal-btn {
padding: 8px 18px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
transition: background 0.15s var(--ease-smooth), transform 0.1s var(--ease-spring);
}
.editor-modal-btn--cancel {
color: var(--muted-foreground);
border: 1px solid var(--border);
}
.editor-modal-btn--cancel:hover { background: var(--accent); color: var(--foreground); }
.editor-modal-btn--submit {
background: var(--primary);
color: var(--primary-foreground);
}
.editor-modal-btn--submit:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 80%, white); }
.editor-modal-btn--submit:disabled { opacity: 0.5; cursor: not-allowed; }
/* Full-page editor overlay */
.context-editor-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: var(--background);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s var(--ease-spring);
}
.context-editor-overlay.open { transform: translateX(0); }
.context-editor {
display: flex;
flex-direction: column;
height: 100%;
}
/* Editor header */
.context-editor-header {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: var(--sidebar);
flex-shrink: 0;
flex-wrap: wrap;
}
.context-editor-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 8px;
border-radius: var(--radius-md);
color: var(--muted-foreground);
font-size: 13px;
font-weight: 500;
transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.context-editor-back:hover { background: var(--accent); color: var(--foreground); }
.context-editor-back svg { width: 16px; height: 16px; }
.context-editor-title-group {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.context-editor-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary);
}
.context-editor-title {
font-size: 16px;
font-weight: 700;
color: var(--foreground);
letter-spacing: -0.01em;
}
.context-editor-path {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted-foreground);
}
/* Model selector */
.context-editor-model {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.context-editor-model-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.context-editor-model-select {
padding: 5px 10px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
color: var(--primary);
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 26px;
}
.context-editor-model-select:focus { outline: none; border-color: var(--primary); }
/* Save/Revert buttons */
.context-editor-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.context-editor-btn {
padding: 7px 16px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
transition: background 0.15s var(--ease-smooth), transform 0.1s var(--ease-spring), opacity 0.15s ease;
}
.context-editor-btn--save {
background: var(--primary);
color: var(--primary-foreground);
}
.context-editor-btn--save:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 80%, white); transform: translateY(-1px); }
.context-editor-btn--save:disabled { opacity: 0.5; cursor: not-allowed; }
.context-editor-btn--revert {
color: var(--muted-foreground);
border: 1px solid var(--border);
opacity: 0.5;
pointer-events: none;
}
.context-editor-btn--revert.has-override {
opacity: 1;
pointer-events: auto;
}
.context-editor-btn--revert:hover { background: var(--accent); color: var(--foreground); }
/* Editor body: textarea left, AI chat right */
.context-editor-body {
display: flex;
flex: 1;
min-height: 0;
}
.context-editor-textarea-wrap {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
}
.context-editor-textarea {
flex: 1;
width: 100%;
padding: 20px 24px;
background: var(--background);
color: var(--foreground);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
line-height: 1.6;
border: 0;
outline: 0;
resize: none;
tab-size: 2;
}
/* AI chat panel (right side of editor) */
.context-editor-ai {
width: clamp(300px, 35%, 420px);
display: flex;
flex-direction: column;
background: var(--sidebar);
}
.context-editor-ai-history {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.editor-ai-msg {
max-width: 92%;
font-size: 13px;
line-height: 1.5;
padding: 10px 14px;
border-radius: 14px;
animation: fade-up 0.2s var(--ease-spring) both;
word-break: break-word;
}
.editor-ai-msg--user {
align-self: flex-end;
background: var(--primary);
color: var(--primary-foreground);
border-radius: 14px 14px 4px 14px;
font-weight: 500;
}
.editor-ai-msg--assistant {
align-self: flex-start;
background: color-mix(in srgb, var(--foreground) 6%, transparent);
color: var(--foreground);
border-radius: 14px 14px 14px 4px;
}
.editor-ai-thinking {
color: var(--muted-foreground);
font-style: italic;
}
.editor-ai-success {
color: #10b981;
font-weight: 500;
}
.editor-ai-error {
color: #ef4444;
}
/* AI input form */
.context-editor-ai-form {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border);
}
.context-editor-ai-input {
flex: 1;
padding: 10px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
color: var(--foreground);
font-size: 13px;
line-height: 1.4;
resize: none;
min-height: 20px;
max-height: 120px;
overflow-y: auto;
transition: border-color 0.15s var(--ease-smooth);
}
.context-editor-ai-input:focus {
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
outline: none;
}
.context-editor-ai-input::placeholder { color: var(--muted-foreground); }
.context-editor-ai-send {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--primary);
color: var(--primary-foreground);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s var(--ease-smooth), transform 0.1s var(--ease-spring);
}
.context-editor-ai-send:hover { background: color-mix(in srgb, var(--primary) 80%, white); transform: scale(1.05); }
.context-editor-ai-send svg { width: 14px; height: 14px; }
/* Mobile: stack editor vertically */
@media (max-width: 767px) {
.context-editor-body { flex-direction: column; }
.context-editor-textarea-wrap { border-right: 0; border-bottom: 1px solid var(--border); flex: 1; }
.context-editor-ai { width: 100%; height: 50%; }
.context-editor-header { gap: 10px; padding: 10px 14px; }
.context-editor-model { order: 10; width: 100%; }
.context-editor-actions { order: 11; }
}