:root {
/* ── Brand palette — mirrors auth-rudy.css amber/paper theme ─────────── */
--canvas: var(--rudy-paper-deep, #ede6d9);
--sidebar: var(--rudy-paper-deep, #ede6d9);
--surface-1: var(--rudy-card, #fdfbf7);
--surface-2: var(--rudy-paper-deep, #ede6d9);
--hairline: var(--rudy-border, #e0d9c8);
--ink: var(--rudy-ink, #1c2333);
--ink-muted: var(--rudy-muted, #4b5468);
--ink-subtle: color-mix(in oklch, var(--rudy-muted, #4b5468) 68%, white);
--accent: var(--rudy-primary, #c2570a);
--accent-hover: color-mix(in oklch, var(--rudy-primary, #c2570a) 85%, black);
--accent-subtle: color-mix(in oklch, var(--rudy-primary, #c2570a) 12%, white);
/* Hyperlinks read as blue everywhere in Rudy prose, even though the brand
accent is amber — orange links inside body copy get lost against surrounding
ink and confuse the accent-vs-actionable contrast we use elsewhere. */
--link: #2563eb;
--link-hover: color-mix(in oklch, #2563eb 85%, black);
/* Code/snippet blocks: a warm near-black, not a cool gray, so it still reads as
part of the Rudy palette rather than a generic dev-tool dark theme. */
--code-bg: #1f1b16;
--code-fg: #f2ece0;
--code-border: color-mix(in oklch, var(--code-fg) 12%, transparent);
/* Syntax highlighting inside code-bg only — a separate small palette from the app's
accent/link rules, the same way status/strength colors are their own carve-out. */
--code-key: #e2b686;
--code-string: #93c793;
--code-number: #93c793;
--code-keyword: #e2b686;
--code-comment: #8f887a;
/* ── Type scale ─────────────────────────────────────────────────────── */
--fs-xs: 11px; --lh-xs: 16px; /* hints, kbd shortcuts */
--fs-sm: 12px; --lh-sm: 16px; /* metadata, timestamps */
--fs-base: 13px; --lh-base: 20px; /* default UI */
--fs-md: 14px; --lh-md: 22px; /* chat body, input */
--fs-lg: 16px; --lh-lg: 24px; /* emphasis */
--fs-xl: 20px; --lh-xl: 28px; /* section heads */
--fs-2xl: 30px; --lh-2xl: 36px; /* greeting, page title */
/* ── Spacing (4px grid) ─────────────────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
/* ── Radii ──────────────────────────────────────────────────────────── */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 999px;
/* ── Elevation ──────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
--shadow-md: 0 4px 12px rgba(0,0,0,.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,.12);
/* ── Liquid glass (neutral white) ───────────────────────────────────── */
--glass-shadow:
0 1px 4px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.04),
0 10px 15px rgba(0, 0, 0, 0.06);
--glass-border: rgba(255, 255, 255, 0.92);
--glass-border-outer: rgba(0, 0, 0, 0.06);
--glass-blur: blur(20px) saturate(1.05);
/* ── Chat thread ────────────────────────────────────────────────────── */
/* Narrower than page width — a reading column, not the whole viewport.
ChatGPT sits around 48rem, Claude around 46–48rem; anything wider
turns bullet lists into wide walls that scan poorly. */
--chat-thread-max: 48rem;
--canvas-panel: var(--rudy-paper-deep, #ede6d9);
/* ── Motion ─────────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* ── Focus ring ─────────────────────────────────────────────────────── */
--ring: 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-subtle);
/* Backwards-compat aliases used in prose / strength pills */
--bg: var(--surface-1);
--bg-subtle: var(--canvas);
--bg-hover: var(--surface-2);
--border: var(--hairline);
--border-strong: var(--hairline);
--text-primary: var(--ink);
--text-secondary: var(--ink-muted);
--text-muted: var(--ink-subtle);
--confirmed: #16A34A;
--confirmed-bg: #DCFCE7;
--strong: #2563EB;
--strong-bg: #DBEAFE;
--less-likely: #D97706;
--less-likely-bg: #FEF3C7;
--unlikely: #DC2626;
--unlikely-bg: #FEE2E2;
/* ── Strength pill ramp ──────────────────────────────────────────────
Confirmed and Strong read as one green ladder, Likely as blue — the
same vocabulary STRENGTH_CONFIG already uses on the legacy surface
(src/common/utils/strength-config.ts). Deliberately separate tokens
from --strong / --less-likely above: ~20 non-strength consumers
(intro chips, request states, avatar rotations) depend on those hues
staying blue/amber. */
--strength-confirmed: #14532D;
--strength-confirmed-bg: #BBF7D0;
--strength-strong: #15803D;
--strength-strong-bg: #F0FDF4;
--strength-likely: var(--strong);
--strength-likely-bg: var(--strong-bg);
--strength-unlikely: var(--unlikely);
--strength-unlikely-bg: var(--unlikely-bg);
/* ── Semantic status colors ──────────────────────────────────────────── */
--status-good: #15803d;
--status-good-bg: #DCFCE7;
--status-warn: #d97706;
--status-warn-bg: color-mix(in srgb, #d97706 15%, white);
--status-error: #dc2626;
--status-error-bg: color-mix(in srgb, #dc2626 15%, white);
--status-critical: #b45309;
/* ── Canvas-* aliases (resolve to main design tokens) ───────────────── */
--canvas-bg: var(--surface-1);
--canvas-border: var(--hairline);
--canvas-text-muted: var(--ink-muted);
}
* { font-family: var(--font-sans), system-ui, sans-serif; }
code, pre { font-family: var(--font-mono), monospace; }
/* ─── Display font utility ─── */
.font-display {
font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
letter-spacing: -0.02em;
}
/* ─── Interactive baseline ─── */
button, [role="button"] { transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std); }
button:active, [role="button"]:active { transform: scale(0.98); }
/* ─── Focus rings ─── */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-md); }
textarea:focus-visible,
input:focus-visible {
box-shadow: none;
outline: none;
}
/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-subtle); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
/* ─── Prose styles for agent message markdown ─── */
.prose-rudy {
line-height: 1.65;
color: var(--text-primary);
}
.prose-rudy p { margin-bottom: 0.6rem; font-size: var(--fs-md); }
.prose-rudy p:last-child { margin-bottom: 0; }
.prose-rudy h1, .prose-rudy h2, .prose-rudy h3 {
font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
font-weight: 600;
color: var(--text-secondary);
margin-top: 1.25rem;
margin-bottom: 0.4rem;
font-size: var(--fs-base);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.prose-rudy h2:first-child, .prose-rudy h3:first-child { margin-top: 0; }
.prose-rudy ul { list-style: none; padding-left: 0; margin-bottom: 0.5rem; }
.prose-rudy ul li { font-size: var(--fs-md); padding: 0.2rem 0; color: var(--text-primary); }
.prose-rudy ul li::before { content: "·"; margin-right: 0.5rem; color: var(--text-muted); }
.prose-rudy ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 0.5rem; }
.prose-rudy ol li { font-size: var(--fs-md); padding: 0.15rem 0; }
.prose-rudy strong { font-weight: 600; color: var(--text-primary); }
.prose-rudy em { color: var(--text-secondary); }
.prose-rudy code {
background: var(--surface-2);
border: 1px solid var(--border);
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-size: var(--fs-sm);
color: var(--accent);
}
.prose-rudy pre {
background: var(--surface-1);
border: 1px solid var(--border);
padding: 0.875rem 1rem;
border-radius: 8px;
overflow-x: auto;
margin-bottom: 0.75rem;
}
.prose-rudy pre code { background: none; border: none; padding: 0; color: var(--text-primary); }
.prose-rudy blockquote {
border-left: 3px solid var(--accent);
padding: 0.375rem 0.75rem;
background: var(--accent-subtle);
border-radius: 0 6px 6px 0;
margin: 0.5rem 0;
font-size: var(--fs-md);
color: var(--text-secondary);
}
.prose-rudy hr {
border: none;
border-top: 1px solid var(--border);
margin: 0.875rem 0;
}
/* ─── Path table — renders markdown tables as product-native rows ─── */
.prose-rudy table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
margin: 0.75rem 0;
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
}
.prose-rudy thead tr {
background: var(--bg-subtle);
border-bottom: 1px solid var(--border);
}
.prose-rudy th {
padding: 0.5rem 0.75rem;
text-align: left;
font-weight: 600;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
white-space: nowrap;
}
.prose-rudy td {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
vertical-align: middle;
}
.prose-rudy tbody tr:last-child td { border-bottom: none; }
.prose-rudy tbody tr:hover { background: var(--bg-hover); }
.prose-rudy a {
color: var(--link);
text-decoration: none;
font-weight: 500;
transition: color var(--dur-fast) var(--ease-std);
}
.prose-rudy a:hover { color: var(--link-hover); text-decoration: underline; }
/* ─── Strength pill ─── */
.strength-confirmed {
display: inline-flex; align-items: center; gap: 4px;
background: var(--strength-confirmed-bg); color: var(--strength-confirmed);
font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px;
border-radius: var(--radius-full); white-space: nowrap;
}
.strength-strong {
display: inline-flex; align-items: center; gap: 4px;
background: var(--strength-strong-bg); color: var(--strength-strong);
font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px;
border-radius: var(--radius-full); white-space: nowrap;
}
.strength-less-likely {
display: inline-flex; align-items: center; gap: 4px;
background: var(--strength-likely-bg); color: var(--strength-likely);
font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px;
border-radius: var(--radius-full); white-space: nowrap;
}
.strength-unlikely {
display: inline-flex; align-items: center; gap: 4px;
background: var(--strength-unlikely-bg); color: var(--strength-unlikely);
font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px;
border-radius: var(--radius-full); white-space: nowrap;
}
/* ─── Intro status chip ─── */
.intro-status-chip {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: var(--radius-full);
font-size: var(--fs-xs); font-weight: 600;
flex-shrink: 0; white-space: nowrap;
background: var(--accent-subtle); color: var(--accent);
font-size: 9px;
}
.intro-status-chip--done { background: var(--confirmed-bg); color: var(--confirmed); }
.intro-status-chip--active { background: var(--less-likely-bg); color: var(--less-likely); }
.intro-status-chip--prior { background: var(--surface-2); color: var(--ink-muted); }
/* ─── Avatar initials ─── */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 0.6875rem;
font-weight: 700;
flex-shrink: 0;
letter-spacing: 0;
}
/* ─── SC design language ──────────────────────────────────────────────────────
Super Connector names use accent color; prospect/contact names stay ink.
.sc-name — accent text color for connector names
.sc-avatar — small link-icon badge on the connector avatar's corner
.sc-chip — small role pill ("Insider", "Customer", etc.) */
.sc-name {
color: var(--rudy-accent, #d2643a);
font-weight: 600;
}
/* A colored ring around the whole avatar (tried twice: a thin muted one was invisible,
a thicker accent one bled into a neighboring LinkedIn icon in a tight flex gap) never
read as clearly distinct from the target avatar's own random hash color sitting right
next to it. A small badge in the corner — the same "verified checkmark" pattern users
already recognize — doesn't fight with the avatar's own color and needs no JSX changes
anywhere `.sc-avatar` is already applied (ChatTable, PathsTable, SuperConnectorAccounts,
etc.) since it's a pure ::after overlay. */
.sc-avatar {
position: relative;
border-radius: 999px;
}
/* Soft-bg + outline pill treatment, matching the STRENGTH column's "Strong"/"Confirmed"
pills — a lightning-bolt icon (lucide Zap, already used elsewhere in this codebase for
the same super-connector/boost semantics) instead of the link-chain icon, since these
avatars are specifically Super Connectors. */
.sc-avatar::after {
content: "";
position: absolute;
right: -1.5px;
bottom: -1.5px;
width: 14px;
height: 14px;
border-radius: 999px;
background-color: color-mix(in oklch, var(--rudy-accent, #d2643a) 14%, white);
border: 1px solid var(--rudy-accent, #d2643a);
background-image: url('data:image/svg+xml;utf8,');
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
transition: background-color 120ms ease, background-image 120ms ease;
}
/* Hover tooltip on the badge itself - matches DESIGN.md's Tooltip spec (dark ink bg,
light surface-1 text, 6px radius, 12px caption text). Pure CSS, same reasoning as the
badge above: no JSX changes needed at any .sc-avatar call site. */
.sc-avatar::before {
/* Centering this on the avatar (left:50%/translateX(-50%)) bled it past the left edge
of the table's scroll/card container whenever the avatar sits in the leftmost column
(every .sc-avatar call site so far - RudyConnectorList, RudyPathsList - is a table's
first column, hard up against an `overflow: auto`/`overflow-hidden` ancestor that
clips anything crossing its edge). Left-aligning to the avatar's own left edge keeps
the whole tooltip inside that boundary, since there's always room to the right. */
content: "Connector";
position: absolute;
left: 0;
bottom: calc(100%);
z-index: 20;
white-space: nowrap;
background: var(--surface-1);
border: 1px solid var(--hairline);
color: var(--rudy-primary);
font-size: 8px;
font-weight: 500;
padding: 2px 5px 2px 14px;
border-radius: var(--radius-sm);
/* Same lightning-bolt glyph as the .sc-avatar::after badge, so the tooltip's icon
matches the badge it's labeling. */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: 4px center;
background-size: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
.sc-avatar:hover::before {
opacity: 1;
visibility: visible;
}
/* Superconnector tier: amber star, matching the SUPERCONNECTOR column badge, so the tier
reads off the avatar even when that column is scrolled away. Base .sc-avatar (bolt) is a
Connector; call sites that don't know the tier (paths, chat tables) keep the base look. */
.sc-avatar--superconnector::before {
content: "Superconnector";
}
.sc-avatar--superconnector::after {
background-color: #fef3c7;
border-color: #f59e0b;
background-image: url('data:image/svg+xml;utf8,');
}
.sc-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.sc-chip--connector {
background: color-mix(in oklch, var(--ink-muted) 10%, white);
color: var(--ink-muted);
}
.sc-chip--insider {
background: var(--confirmed-bg, rgba(22, 163, 74, 0.08));
color: var(--confirmed, #16a34a);
}
.sc-chip--customer {
background: var(--strong-bg, rgba(217, 119, 6, 0.08));
color: var(--strong, #d97706);
}
/* ─── Typing dots ─── */
@keyframes blink {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
.typing-dot { animation: blink 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
/* ─── Sidebar item stagger ─── */
@keyframes item-in {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
.sidebar-item-animate { animation: item-in var(--dur-base) var(--ease-out) both; }
/* ─── Message enter animation ─── */
@keyframes msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-animate { animation: msg-in var(--dur-slow) var(--ease-out); }
.animate-fade-in { animation: msg-in 0.4s var(--ease-out) both; }
/* ─── Floating chat widget enter (docked bottom-right, Linear-style) ─── */
@keyframes widget-in {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-widget-in { animation: widget-in 0.28s var(--ease-out) both; }
/* Onboarding progress dock open/close — grows from the bottom-right corner on expand,
pops in on collapse. Reduced-motion is neutralized by the global rule above. */
@keyframes rudy-dock-in {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.rudy-dock-in { animation: rudy-dock-in 0.16s var(--ease-std) both; transform-origin: bottom right; }
@keyframes rudy-dock-fab-in {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
.rudy-dock-fab-in { animation: rudy-dock-fab-in 0.16s var(--ease-std) both; }
/* ─── Chat thread layout ─── */
.chat-thread-scroll {
position: relative;
flex: 1;
overflow-y: auto;
scroll-behavior: smooth;
}
/* .chat-thread-footer::before {
content: "";
position: sticky;
top: 0;
left: 0;
right: 0;
display: block;
height: 32px;
margin:-46px -20px 0;
pointer-events: none;
background: linear-gradient(
180deg,
transparent 0%,
color-mix(in srgb, var(--rudy-background) 50%, transparent) 50%, #fff6 100%);
} */
.chat-thread-inner {
max-width: var(--chat-thread-max);
margin-inline: auto;
padding: var(--sp-6) var(--sp-4) var(--sp-8);
}
@media (max-width: 767px) {
.chat-thread-inner {
padding: var(--sp-3) var(--sp-2) var(--sp-5);
}
.user-turn__stack {
max-width: 92%;
}
/* .chat-thread-footer::before {
margin:-40px -20px 0;
} */
}
@media (min-width: 768px) {
.chat-thread-inner {
padding-inline: var(--sp-6);
}
}
.chat-thread-header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--hairline);
background: var(--surface-1);
flex-shrink: 0;
}
.chat-thread-header--home-mobile {
border-bottom: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: var(--sp-2) var(--sp-3);
}
.chat-thread-header__account {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
font-size: var(--fs-sm);
color: var(--ink-subtle);
transition: color var(--dur-fast) var(--ease-std);
}
.chat-thread-header__account:hover {
color: var(--ink);
}
.chat-thread-header__title {
flex: 1;
min-width: 0;
font-size: var(--fs-base);
font-weight: 500;
color: var(--ink);
line-height: var(--lh-base);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.chat-thread-header__title {
font-size: var(--fs-md);
}
}
.chat-thread-header__status {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
font-size: var(--fs-xs);
color: var(--ink-subtle);
padding: 2px 8px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.chat-thread-header__share {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
color: var(--ink-subtle);
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.chat-thread-header__share:hover {
color: var(--ink);
background: rgba(0, 0, 0, 0.05);
}
/* ── Share chat modal ─────────────────────────────────────────────── */
.share-chat-backdrop {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.share-chat-modal {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius-xl);
padding: var(--sp-6);
width: 90%;
max-width: 480px;
box-shadow: var(--shadow-lg);
}
.share-chat-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-2);
}
.share-chat-modal__title {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink);
}
.share-chat-modal__close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
color: var(--ink-subtle);
transition: color 0.15s, background 0.15s;
}
.share-chat-modal__close:hover {
color: var(--ink);
background: rgba(0, 0, 0, 0.05);
}
.share-chat-modal__desc {
font-size: var(--fs-base);
color: var(--ink-subtle);
line-height: 1.5;
margin-bottom: var(--sp-4);
}
.share-chat-modal__loading {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-base);
color: var(--ink-subtle);
padding: var(--sp-3) 0;
}
.share-chat-modal__spinner {
width: 16px;
height: 16px;
animation: spin 0.8s linear infinite;
}
.share-chat-modal__error-row {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.share-chat-modal__error {
font-size: var(--fs-base);
color: #ef4444;
flex: 1;
}
.share-chat-modal__retry {
font-size: var(--fs-sm);
color: var(--accent);
text-decoration: underline;
flex-shrink: 0;
}
.share-chat-modal__retry:hover {
color: var(--accent-hover);
}
.share-chat-modal__link-row {
display: flex;
gap: var(--sp-2);
align-items: stretch;
}
.share-chat-modal__url {
flex: 1;
min-width: 0;
font-size: var(--fs-base);
color: var(--ink);
background: rgba(0, 0, 0, 0.03);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: var(--sp-2) var(--sp-3);
outline: none;
}
.share-chat-modal__url:focus {
border-color: var(--accent);
}
.share-chat-modal__copy {
display: flex;
align-items: center;
gap: 6px;
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-base);
font-weight: 500;
color: white;
background: var(--accent);
border-radius: var(--radius-lg);
white-space: nowrap;
transition: background 0.15s;
flex-shrink: 0;
}
.share-chat-modal__copy:hover {
background: var(--accent-hover);
}
.share-chat-modal__copy--done {
background: #22c55e;
}
.chat-thread-footer {
flex-shrink: 0;
border-top: none;
background: transparent;
padding: 0 var(--sp-5) var(--sp-5);
}
@media (max-width: 767px) {
.chat-thread-header {
padding: 0 var(--sp-2) var(--sp-3);
gap: var(--sp-2);
}
.chat-thread-footer {
padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
}
.chat-thread-footer__inner {
max-width: var(--chat-thread-max);
margin-inline: auto;
}
/* ─── User turn ─── */
.user-turn {
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.user-turn__stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-2);
max-width: min(88%, 40rem);
}
.user-turn__avatar,
.user-turn__avatar-fallback {
flex-shrink: 0;
margin-top: 2px;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
}
.user-turn__avatar {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--accent-subtle);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.user-turn__avatar-fallback {
background: var(--surface);
color: var(--ink-subtle);
border: 1px solid var(--hairline);
}
.user-attachment-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-full);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-muted);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: var(--shadow-sm);
}
.user-attachment-chip__meta {
font-size: var(--fs-xs);
color: var(--ink-subtle);
}
.user-bubble {
font-size: var(--fs-md);
line-height: var(--lh-md);
border-radius: var(--radius-xl);
padding: var(--sp-3) var(--sp-4);
color: var(--ink);
background: var(--accent-subtle);
border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
box-shadow: var(--shadow-sm);
}
.assistant-turn {
display: flex;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.assistant-turn__avatar {
flex-shrink: 0;
margin-top: 2px;
width: 34px;
height: 34px;
border-radius: 100%;
overflow: hidden;
border: 1px solid var(--hairline);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.assistant-turn__body {
flex: 1;
min-width: 0;
}
.chat-typing {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
margin-bottom: var(--sp-5);
}
.chat-typing__label {
font-size: var(--fs-base);
color: var(--ink-subtle);
line-height: var(--lh-base);
}
.chat-suggest {
margin-top: var(--sp-6);
}
.chat-suggest__label {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
padding-inline: var(--sp-1);
margin-bottom: var(--sp-3);
}
.chat-suggest__list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.chat-suggest-btn {
width: 100%;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
text-align: left;
border-radius: var(--radius-lg);
border: 1px solid var(--hairline);
background: var(--surface-1);
box-shadow: var(--shadow-sm);
transition:
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std),
box-shadow var(--dur-fast) var(--ease-std);
}
.chat-suggest-btn:hover {
background: var(--surface-1);
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
box-shadow: var(--shadow-md);
}
.chat-suggest-btn__text {
font-size: var(--fs-sm);
color: var(--ink-muted);
line-height: var(--lh-sm);
transition: color var(--dur-fast) var(--ease-std);
}
.chat-suggest-btn:hover .chat-suggest-btn__text {
color: var(--accent);
}
/* ─── Report sections (assistant) ─── */
.report-intro {
font-size: var(--fs-lg);
line-height: var(--lh-lg);
color: var(--ink);
margin-bottom: var(--sp-4);
}
.report-intro pre{
white-space: pre-wrap;
word-wrap: break-word;
background: var(--accent-subtle);
padding: var(--sp-3);
border-radius: var(--radius-md);
}
.report-intro .report-body__p {
font-size: var(--fs-lg);
line-height: var(--lh-lg);
margin-bottom: 0;
}
.report-sections {
display: flex;
flex-direction: column;
gap: 0;
}
.report-section {
padding: 0;
margin-bottom: 0;
}
.report-section + .report-section {
margin-top: var(--sp-5);
padding-top: var(--sp-5);
border-top: 1px solid var(--hairline);
}
.report-section--card {
padding: var(--sp-4) var(--sp-5);
margin-top: var(--sp-4);
border-top: none;
border-radius: var(--radius-lg);
}
.report-section--card + .report-section {
border-top: none;
}
.report-section--loading {
pointer-events: none;
}
.report-section__label {
/* Not uppercased: Rudy occasionally emits inline markdown links inside
section headings (`## Confirm assigning [Name](url) as the connector`).
text-transform: uppercase used to shout link syntax + URLs verbatim at
the reader. Sentence case + slightly heavier weight keeps the section
legible without mangling embedded names/links. */
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink);
margin-bottom: var(--sp-3);
}
.report-section__label a {
color: var(--link);
text-decoration: none;
}
.report-section__label a:hover {
text-decoration: underline;
}
.report-section__body {
font-size: var(--fs-md);
line-height: var(--lh-md);
color: var(--ink);
}
.report-body__p {
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink);
margin-bottom: var(--sp-2);
}
.report-body__p:last-child {
margin-bottom: 0;
}
.report-list {
margin: var(--sp-2) 0;
padding: 0;
list-style: none;
}
/* A list that directly follows a lead-in paragraph ("Pick one:") belongs to it —
pull it tight so the pair reads as one unit, not two spaced-apart blocks. */
.report-body__p + .report-list {
margin-top: calc(-1 * var(--sp-1));
}
.report-list--ordered {
list-style: decimal;
padding-left: 1.25rem;
}
/* Ordered lists carry the numeral from list-style: decimal already;
the manual "·" span used for unordered lists would double up as `1. ·`. */
.report-list--ordered .report-list__bullet { display: none; }
.report-list__item {
display: flex;
gap: var(--sp-2);
font-size: var(--fs-md);
line-height: 1.5;
color: var(--ink);
padding: 0.1rem 0;
}
.report-list__bullet {
color: var(--ink-subtle, #9ca3af);
flex-shrink: 0;
}
.report-quote {
border-left: 3px solid var(--accent);
padding: var(--sp-2) var(--sp-3);
background: var(--accent-subtle);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: var(--sp-2) 0;
font-size: var(--fs-md);
color: var(--ink-muted);
}
/* Positioning parent for the hover-revealed Copy button. Kept as its own
wrapper so `.report-quote` itself stays a pure content block (no anchor
position, no padding-right reserved for a button that may not show). */
.report-quote-wrap {
position: relative;
}
.report-quote-wrap > .report-quote {
/* Reserve space on the right so the last line of drafted text never runs
under the Copy button when it appears. */
padding-right: calc(var(--sp-3) + 72px);
}
.report-quote__copy {
position: absolute;
top: 6px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: var(--radius-md);
border: 1px solid var(--hairline);
background: var(--surface-1);
color: var(--ink-muted);
font-size: var(--fs-xs);
font-weight: 500;
opacity: 0;
transition: color var(--dur-fast) var(--ease-std),
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std),
opacity var(--dur-fast) var(--ease-std);
}
.report-quote-wrap:hover .report-quote__copy,
.report-quote-wrap:focus-within .report-quote__copy,
.report-quote__copy:focus-visible {
opacity: 1;
}
.report-quote__copy:hover {
color: var(--ink);
background: var(--surface-2);
border-color: color-mix(in srgb, var(--ink-muted) 30%, transparent);
}
.report-quote__copy--done {
opacity: 1;
color: var(--confirmed);
border-color: color-mix(in srgb, var(--confirmed) 30%, transparent);
background: color-mix(in srgb, var(--confirmed) 8%, white);
}
.report-divider {
border: none;
border-top: 1px solid var(--hairline);
margin: var(--sp-4) 0;
}
/* Markdown headings from Rudy — always compact, always let their child
content (typically an entity name + LinkedIn/domain link) render.
Scale is intentionally modest: the chat body should not feel like a doc. */
.report-heading {
color: var(--ink);
line-height: 1.35;
margin: var(--sp-3) 0 var(--sp-1);
}
.report-heading:first-child { margin-top: 0; }
.report-heading a { color: var(--link); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-std); }
.report-heading a:hover { color: var(--link-hover); text-decoration: underline; }
/* Inline hyperlink inside assistant prose. Not tied to --accent — the accent
color is used for actionable UI (CTAs, focused chips) and mixing links
into the same color washes both out. See rudy.css :root --link. */
.rudy-link {
color: var(--link);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-std);
}
.rudy-link:hover { color: var(--link-hover); text-decoration: underline; }
/* Snapped to the shared --fs-* scale — inline markdown headings should
step from the existing chat-body sizes, not sit at off-scale rems that
drift as the body scale changes. */
.report-heading--lg { font-size: var(--fs-lg); font-weight: 600; }
.report-heading--md { font-size: var(--fs-md); font-weight: 600; }
.report-heading--sm { font-size: var(--fs-md); font-weight: 600; }
.report-inline-code {
background: var(--surface);
border: 1px solid var(--hairline);
padding: 0.1rem 0.35rem;
border-radius: var(--radius-sm);
font-size: 0.85em;
color: var(--accent);
font-family: var(--font-mono), monospace;
}
.report-chips {
margin: var(--sp-3) 0;
}
/* ─── Chat tables ─── */
.chat-table-frame {
margin: var(--sp-3) 0;
border-radius: var(--radius-lg);
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.chat-table-frame__toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--hairline);
background: color-mix(in srgb, var(--surface-2) 60%, var(--surface-1));
}
.chat-table-frame__hint {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: auto;
font-size: var(--fs-xs);
color: var(--ink-subtle);
}
.chat-table-frame__expand {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-md);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
background: var(--accent-subtle);
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.chat-table-frame__expand:hover {
background: color-mix(in srgb, var(--accent) 20%, white);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-table-frame__scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent) 35%, transparent) transparent;
}
.chat-table-frame__scroll::-webkit-scrollbar {
height: 6px;
}
.chat-table-frame__scroll::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: var(--radius-full);
}
.chat-table-frame__scroll--overflow {
background:
linear-gradient(to right, var(--surface-1), transparent 20px) left center / 20px 100% no-repeat,
linear-gradient(to left, var(--surface-1), transparent 20px) right center / 20px 100% no-repeat;
}
.chat-table {
border-radius: 0;
border: none;
margin: 0;
box-shadow: none;
background: transparent;
}
.chat-table__el {
width: -moz-max-content;
width: max-content;
min-width: 100%;
border-collapse: collapse;
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
}
.chat-table__head {
background: color-mix(in srgb, var(--surface-2) 60%, var(--surface-1));
border-bottom: 1px solid var(--hairline);
}
.chat-table__th {
padding: var(--sp-2) var(--sp-3);
text-align: left;
font-weight: 600;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ink-subtle);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 1;
background: color-mix(in srgb, var(--surface-2) 60%, var(--surface-1));
min-width: 88px;
}
.chat-table__row {
transition: background var(--dur-fast) var(--ease-std);
}
.chat-table__row:hover {
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.chat-table__td {
padding: 0.65rem var(--sp-3);
min-height: 52px;
border-bottom: 1px solid var(--hairline);
color: var(--ink);
vertical-align: middle;
font-size: var(--fs-base);
min-width: 88px;
max-width: 280px;
}
.chat-table__td:last-child {
max-width: none;
}
.chat-table__row:last-child .chat-table__td {
border-bottom: none;
}
/* ─── Column resize handle ─── */
.chat-table__col-resize {
position: absolute;
top: 0;
right: -2px;
width: 5px;
height: 100%;
cursor: col-resize;
z-index: 2;
}
.chat-table__col-resize:hover,
.is-col-resizing .chat-table__col-resize {
background: var(--accent);
opacity: 0.3;
border-radius: 1px;
}
.is-col-resizing {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* ─── Scope setup modal ─── */
.scope-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: rgba(17, 24, 39, 0.35);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.scope-modal__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(680px, 100%);
max-height: min(740px, 90vh);
overflow: hidden;
border-radius: 18px;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 252, 253, 0.96) 100%);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-lg);
}
.scope-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 24px 28px 20px;
border-bottom: 1px solid var(--hairline);
flex-shrink: 0;
}
.scope-modal__body {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.scope-modal__section {
padding: 20px 28px;
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}
.scope-modal__section--last {
padding-bottom: 24px;
}
.scope-modal__section--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.scope-modal__split-col {
padding: 20px 28px;
}
.scope-modal__split-col:first-child {
border-right: 1px solid rgba(229, 231, 235, 0.7);
}
.scope-modal__role-card {
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.scope-modal__role-card:hover {
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
background: rgba(255, 255, 255, 0.95);
}
.scope-modal__role-card--active {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
background: var(--accent-subtle);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.scope-modal__owner-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
text-align: left;
transition: background 0.12s ease, border-color 0.12s ease;
}
.scope-modal__owner-row:hover {
background: rgba(255, 255, 255, 0.85);
}
.scope-modal__owner-row--active {
background: var(--accent-subtle);
border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.scope-modal__checkbox {
width: 15px;
height: 15px;
border-radius: 4px;
flex-shrink: 0;
border: 2px solid var(--hairline);
background: transparent;
display: grid;
place-items: center;
transition: border-color 0.12s ease, background 0.12s ease;
}
.scope-modal__checkbox--checked {
border-color: var(--accent);
background: var(--accent);
}
.scope-modal__pill {
padding: 5px 11px;
border-radius: 20px;
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 400;
color: var(--ink-muted);
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.scope-modal__pill:hover {
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.scope-modal__pill--active {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
background: var(--accent-subtle);
color: var(--accent);
font-weight: 600;
}
.scope-modal__textarea {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 11px 14px;
font-size: 13px;
color: var(--ink);
line-height: 1.5;
resize: none;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scope-modal__textarea::-moz-placeholder {
color: var(--ink-subtle);
}
.scope-modal__textarea::placeholder {
color: var(--ink-subtle);
}
.scope-modal__textarea:focus {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
@media (max-width: 640px) {
.scope-modal__section--split {
grid-template-columns: 1fr;
}
.scope-modal__split-col:first-child {
border-right: none;
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}
}
/* ─── Table expand modal (overlay) ─── */
.chat-table-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-5);
}
.chat-table-modal__backdrop {
position: absolute;
inset: 0;
border: none;
padding: 0;
background: rgba(17, 24, 39, 0.42);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
cursor: default;
}
.chat-table-modal__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(960px, calc(100vw - 2 * var(--sp-5)));
max-width: 100%;
min-width: 0;
max-height: min(88dvh, 100%);
background: var(--surface-1);
border-radius: var(--radius-xl);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.chat-table-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--hairline);
background: rgba(249, 250, 251, 0.98);
flex-shrink: 0;
}
.chat-table-modal__title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink);
}
.chat-table-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
border: 1px solid var(--hairline);
color: var(--ink-subtle);
background: var(--surface-1);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.chat-table-modal__close:hover {
background: var(--surface-2);
color: var(--ink);
}
.chat-table-modal__scroll {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: var(--sp-4);
}
.chat-table-modal__body {
display: block;
min-width: -moz-min-content;
min-width: min-content;
}
.chat-table-modal__body .chat-table {
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--surface-1);
}
.chat-table-modal__body .chat-table__td {
max-width: none;
white-space: nowrap;
}
.chat-table-modal__body .chat-table__el {
width: -moz-max-content;
width: max-content;
min-width: 100%;
}
@media (max-width: 767px) {
.chat-table-modal {
padding: 0;
align-items: stretch;
height: 100dvh;
}
.chat-table-modal__panel {
width: 100%;
max-width: 100%;
max-height: 100dvh;
height: 100dvh;
border-radius: 0;
border: none;
}
.chat-table-modal__scroll {
padding: var(--sp-3);
overflow: auto;
}
.chat-table-frame__expand span {
display: none;
}
.chat-table-frame {
margin-inline: 0;
border-radius: var(--radius-md);
}
.chat-table-frame__toolbar {
padding: var(--sp-1) var(--sp-2);
}
.chat-table-frame__scroll {
max-width: 100%;
}
.chat-table__el {
min-width: 100%;
width: -moz-max-content;
width: max-content;
}
.chat-table__th {
min-width: 64px;
padding: var(--sp-1) var(--sp-2);
font-size: 10px;
}
.chat-table__td {
min-width: 64px;
max-width: 120px;
padding: var(--sp-2);
font-size: var(--fs-sm);
white-space: normal;
word-break: break-word;
vertical-align: top;
}
.chat-table__td:has([class*="strength-"]) {
max-width: none;
white-space: nowrap;
vertical-align: middle;
}
.chat-table__contact {
gap: var(--sp-1);
}
.chat-table__contact-name {
font-size: var(--fs-sm);
line-height: 1.3;
}
.assistant-turn__body {
overflow-x: hidden;
}
}
.chat-table__contact {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.chat-table__contact-name {
font-weight: 600;
color: var(--ink);
}
.chat-table__footer {
padding: var(--sp-2) var(--sp-3);
border-top: 1px solid var(--hairline);
background: rgba(249, 250, 251, 0.9);
}
.chat-table__expand {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--accent);
transition: color var(--dur-fast) var(--ease-std);
}
.chat-table__expand:hover {
color: var(--accent-hover);
}
.status-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--fs-sm);
color: var(--ink-muted);
line-height: var(--lh-sm);
}
.status-chip--hot {
color: var(--ink);
font-weight: 500;
}
.status-chip--review {
color: #b45309;
}
/* ─── Tool timeline ─── */
.tool-timeline {
padding: var(--sp-1) 0 var(--sp-2);
margin-bottom: var(--sp-3);
}
.tool-timeline__item {
display: flex;
gap: var(--sp-3);
min-height: 28px;
}
.tool-timeline__item--last .tool-timeline__line {
display: none;
}
.tool-timeline__track {
display: flex;
flex-direction: column;
align-items: center;
width: 12px;
flex-shrink: 0;
padding-top: 6px;
}
.tool-timeline__dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--hairline);
}
.tool-timeline__dot--active {
background: var(--status-warn);
box-shadow: 0 0 0 3px var(--status-warn-bg);
}
.tool-timeline__dot--done {
background: var(--status-good);
}
.tool-timeline__dot--error {
background: var(--status-error);
}
.tool-timeline__line {
flex: 1;
width: 1px;
min-height: 12px;
margin-top: 4px;
background: var(--hairline);
}
.tool-timeline__content {
flex: 1;
min-width: 0;
padding-bottom: var(--sp-2);
}
.tool-timeline__row {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 0;
}
.tool-timeline__icon-svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--ink-subtle);
}
.tool-timeline__label {
flex: 1;
font-size: var(--fs-sm);
color: var(--ink-muted);
min-width: 0;
}
.tool-timeline__ellipsis {
opacity: 0.6;
}
.tool-timeline__status {
font-size: var(--fs-xs);
font-weight: 500;
flex-shrink: 0;
}
.tool-timeline__status--active {
color: var(--status-warn);
}
.tool-timeline__status--done {
color: var(--status-good);
}
.tool-timeline__status--error {
color: var(--status-error);
}
.tool-timeline__debug {
margin-top: var(--sp-2);
padding: var(--sp-2);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
font-size: var(--fs-xs);
font-family: var(--font-mono), monospace;
overflow-x: auto;
max-height: 160px;
}
.tool-timeline__expand-toggle {
margin-top: var(--sp-1);
margin-left: calc(16px + var(--sp-2)); /* align with tool label text */
padding: 0;
background: none;
border: none;
color: var(--text-tertiary);
font-size: var(--fs-xs);
cursor: pointer;
text-decoration: none;
}
.tool-timeline__expand-toggle:hover {
color: var(--text-secondary);
text-decoration: underline;
}
/* ─── Narration (agent timeline) — contained, bounded section ───────────────
Two problems this addresses:
(1) A long tool loop can emit 20+ narration lines; without a max-height the
assistant turn stretches past the viewport and the eventual answer
sits off-screen.
(2) Without a visible container, narration lines read as loose text
interleaved with the assistant's prose, not as a distinct "the agent
is thinking" region — which is how designers read this block.
Fixed cap + inner scroll addresses (1); the subtle surface + hairline
border + inset padding addresses (2). */
.chat-narration {
max-height: 14rem;
overflow-y: auto;
padding: var(--sp-2) var(--sp-3);
background: color-mix(in srgb, var(--ink) 3%, transparent);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--ink-subtle) 40%, transparent) transparent;
}
.chat-narration::-webkit-scrollbar { width: 4px; }
.chat-narration::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--ink-subtle) 40%, transparent);
border-radius: var(--radius-full);
}
/* The collapsed/expanded state (post-turn) sits under a "Worked for Ns" disclosure
with its own left indent — don't double the indent when it renders inside a
chat-narration surface. */
.chat-narration.chat-narration--nested {
margin-left: 0;
}
/* ─── Drafted-message header (Message for {Name} + copy) ────────────────────
Sits atop DraftPreviewCard / OutlookIntroDraft canvas-document shells so
the reader always knows the recipient at a glance. */
.canvas-document__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--hairline);
background: rgba(0, 0, 0, 0.015);
}
.canvas-document__title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
}
.canvas-document__copy {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--hairline);
background: var(--surface-1);
color: var(--ink-muted);
font-size: var(--fs-xs);
font-weight: 500;
transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.canvas-document__copy:hover {
color: var(--ink);
background: var(--surface-2);
border-color: color-mix(in srgb, var(--ink-muted) 30%, transparent);
}
.canvas-document__copy--done {
color: var(--confirmed);
border-color: color-mix(in srgb, var(--confirmed) 30%, transparent);
background: color-mix(in srgb, var(--confirmed) 8%, white);
}
/* ─── Artifact CTAs ─── */
.artifact-cta {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 10px 0 4px;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-full);
font-size: var(--fs-sm);
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition:
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std),
box-shadow var(--dur-fast) var(--ease-std);
}
.artifact-cta--accent {
padding: 9px 15px 9px 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
background: var(--accent-subtle);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent);
box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.artifact-cta--accent:hover {
background: #dde5ff;
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.artifact-cta__count {
opacity: 0.6;
font-weight: 500;
letter-spacing: 0;
}
.artifact-cta--success {
background: var(--confirmed-bg);
border-color: rgba(22, 163, 74, 0.25);
color: var(--confirmed);
}
.artifact-cta--muted {
background: var(--surface);
border-color: var(--hairline);
color: var(--ink-muted);
}
.artifact-cta--warning {
background: var(--less-likely-bg);
border-color: rgba(217, 119, 6, 0.25);
color: var(--less-likely);
}
.artifact-cta--outline {
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-md);
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-size: var(--fs-sm);
font-weight: 500;
}
.artifact-cta--outline:hover {
background: var(--accent-subtle);
}
.artifact-cta__arrow {
opacity: 0.55;
transition: transform var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std);
}
.artifact-cta:hover .artifact-cta__arrow {
transform: translateX(3px);
opacity: 1;
}
/* ─── App shell: responsive sidebar ─── */
.app-sidebar {
width: clamp(220px, 16vw, 280px);
}
/*
* Sidebar overlay blur — Chromium allows ONE backdrop-filter in a paint stack.
* Blur lives on the full-screen scrim only; panel is a tinted layer on top.
* body.sidebar-overlay-open disables .glass-panel blur so the scrim can sample chat.
*/
body.sidebar-overlay-open .glass-panel,
body.sidebar-overlay-open .glass-sidebar,
body.sidebar-overlay-open .glass-card,
body.sidebar-overlay-open .chat-thread-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.sidebar-overlay-open .glass-panel {
background: rgba(255, 255, 255, 0.97);
}
.app-sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 140;
border: none;
padding: 0;
margin: 0;
cursor: default;
background: rgba(17, 24, 39, 0.2);
backdrop-filter: blur(16px);
}
.app-sidebar--overlay {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: stretch;
justify-content: flex-start;
pointer-events: none;
padding: 0;
}
.app-sidebar--overlay .app-sidebar__panel {
position: relative;
pointer-events: auto;
width: min(320px, 88vw);
height: 100%;
flex-shrink: 0;
overflow: visible;
background: rgba(255, 255, 255, 0.9);
border-right: 1px solid rgba(255, 255, 255, 0.65);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08);
}
.app-sidebar__panel-inner {
position: relative;
z-index: 1;
height: 100%;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Nested glass-sidebar breaks backdrop-filter (overflow:hidden + isolation on children) */
.app-sidebar--overlay .glass-sidebar {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.app-sidebar--overlay .liquid-glass-zone {
isolation: auto;
}
.app-mobile-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.92);
color: var(--ink-subtle);
flex-shrink: 0;
transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.app-mobile-nav-btn:hover {
color: var(--ink);
background: rgba(255, 255, 255, 1);
}
@keyframes sidebar-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sidebar-slide-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* .app-chat-panel {
border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
.app-chat-panel {
border-radius: var(--radius-xl);
}
} */
@media (min-width: 1280px) {
.app-shell {
gap: var(--sp-2);
}
/* .app-chat-panel {
border-radius: 1rem;
} */
}
@media (max-width: 1023px) {
.app-shell {
padding: 0;
gap: 0;
}
/* .app-chat-panel {
border-radius: 0;
} */
}
@media (max-width: 767px) {
.app-sidebar-rail {
display: none;
}
}
@media (prefers-reduced-transparency: reduce) {
.app-sidebar-backdrop {
backdrop-filter: none;
background: rgba(17, 24, 39, 0.45);
}
.app-sidebar--overlay .app-sidebar__panel {
background: rgba(255, 255, 255, 0.98);
}
}
/* ─── Inline canvas layout (sidebar | chat | canvas) ─── */
.chat-body {
display: flex;
flex: 1;
min-height: 0;
min-width: 0;
}
.chat-pane {
min-width: 0;
transition: flex 0.32s var(--ease-out);
}
.chat-pane--full {
flex: 1 1 100%;
}
.chat-pane--with-canvas {
flex: 1 1 65%;
min-width: 0;
}
.is-resizing-canvas {
cursor: col-resize;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.is-resizing-canvas .chat-pane,
.is-resizing-canvas .canvas-pane {
transition: none;
}
.canvas-resize-handle {
flex: 0 0 8px;
width: 8px;
position: relative;
z-index: 10;
cursor: col-resize;
touch-action: none;
background: transparent;
transition: background var(--dur-fast) var(--ease-std);
}
.canvas-resize-handle::before {
content: "";
position: absolute;
inset: 0 -8px;
}
.canvas-resize-handle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 36px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--accent) 22%, transparent);
transition: background var(--dur-fast) var(--ease-std), height var(--dur-fast) var(--ease-std);
}
.canvas-resize-handle:hover::after,
.canvas-resize-handle:active::after,
.is-resizing-canvas .canvas-resize-handle::after {
background: color-mix(in srgb, var(--accent) 55%, transparent);
height: 48px;
}
.canvas-resize-handle:hover,
.is-resizing-canvas .canvas-resize-handle {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.canvas-pane--resizable {
flex: 0 0 auto !important;
min-width: unset !important;
max-width: unset !important;
}
.canvas-pane {
display: none;
flex-direction: column;
min-width: 0;
overflow: hidden;
flex-shrink: 0;
background: var(--canvas-panel);
border-left: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.canvas-pane--open {
display: flex;
flex: 0 1 35%;
min-width: 240px;
animation: canvas-slide-in 0.32s var(--ease-out);
}
.canvas-pane--open.canvas-pane--resizable {
flex: 0 0 auto;
min-width: 240px;
max-width: none;
}
@media (min-width: 1280px) {
.chat-pane--with-canvas {
flex: 1 1 68%;
}
}
@media (max-width: 1023px) and (min-width: 768px) {
.chat-pane--with-canvas {
flex: 1 1 58%;
}
}
@media (max-width: 1023px) {
.canvas-pane--mobile-full {
position: fixed;
inset: 0;
z-index: 160;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
border-left: none;
border-radius: 0;
}
.canvas-pane--collapsed-mobile {
display: none;
}
.canvas-resize-handle {
display: none;
}
.canvas-body {
padding: var(--sp-3);
}
.canvas-header {
padding: var(--sp-3);
}
.canvas-document {
max-width: none;
margin-inline: 0;
}
}
@media (max-width: 767px) {
.canvas-pane--open {
flex: 1 1 100%;
min-width: 0;
max-width: none;
width: 100%;
}
/* Clear the app's own fixed mobile header (SidebarShell renders it `fixed top-0`, and
the content pane reserves 3.5rem for it with `pt-14`). The full-screen canvas above
is `inset: 0`, so without this it starts at viewport top and its header — icon,
artifact title, "Download as CSV", save/download/close — renders underneath that
header instead of below it, leaving the table looking like it begins with no chrome
at all. Only below `md`: from 768px up there is no mobile header to clear. */
.canvas-pane--mobile-full {
top: 3.5rem;
}
}
@keyframes canvas-slide-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
.canvas-shell {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
background: var(--canvas-panel);
}
.canvas-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--hairline);
background: var(--surface-1);
flex-shrink: 0;
}
.canvas-header__left {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
}
.canvas-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-lg);
background: color-mix(in oklch, var(--ink-muted) 8%, white);
color: var(--ink-muted);
flex-shrink: 0;
}
.canvas-header__title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.canvas-header__subtitle {
font-size: var(--fs-xs);
color: var(--ink-subtle);
margin-top: 1px;
}
.canvas-header__right {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
.canvas-badge {
font-size: 10px;
font-weight: 500;
color: var(--confirmed);
background: var(--confirmed-bg);
border: 1px solid rgba(22, 163, 74, 0.2);
border-radius: var(--radius-full);
padding: 2px 8px;
}
.canvas-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
border: 1px solid var(--hairline);
background: var(--surface-1);
color: var(--ink-subtle);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.canvas-close:hover {
background: var(--surface-2);
color: var(--ink);
}
/* Tab strip for a turn that emits more than one panel directive at once (e.g.
draft_intro_ask called once per connector for a cross-connector draft selection) —
see ArtifactPanel's draftAskGroup. */
.canvas-tabs {
display: flex;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3) 0;
border-bottom: 1px solid var(--hairline);
background: var(--surface-1);
flex-shrink: 0;
overflow-x: auto;
}
.canvas-tab {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-subtle);
padding: var(--sp-2) var(--sp-3);
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.canvas-tab:hover {
color: var(--ink);
}
.canvas-tab--active {
color: var(--ink);
border-bottom-color: var(--accent);
}
.canvas-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--sp-3);
}
.canvas-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
gap: var(--sp-2);
color: var(--ink-subtle);
}
.canvas-empty__title {
font-size: var(--fs-md);
font-weight: 500;
color: var(--ink-muted);
}
.canvas-empty__text {
font-size: var(--fs-sm);
max-width: 280px;
}
/* ─── Canvas document ─── */
.canvas-document {
display: flex;
flex-direction: column;
min-height: 100%;
max-width: 52rem;
margin-inline: auto;
background: var(--surface-1);
border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: var(--radius-xl);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 24px color-mix(in srgb, var(--accent) 8%, transparent);
overflow: hidden;
}
.canvas-format-tabs {
display: flex;
gap: var(--sp-1);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--hairline);
background: var(--surface-2);
}
.canvas-format-tab {
font-size: var(--fs-sm);
font-weight: 500;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-full);
color: var(--ink-muted);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.canvas-format-tab:hover {
background: rgba(255, 255, 255, 0.8);
color: var(--ink);
}
.canvas-format-tab--active {
background: var(--surface-1);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.canvas-doc-toolbar {
display: flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.8);
}
.canvas-doc-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-muted);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.canvas-doc-action:hover {
background: var(--surface-2);
color: var(--ink);
}
.canvas-mode-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--hairline);
background: var(--accent-subtle);
}
.canvas-mode-bar__label {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--accent);
}
.canvas-mode-bar__actions {
display: flex;
gap: var(--sp-2);
}
.canvas-mode-btn {
font-size: var(--fs-sm);
font-weight: 500;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-md);
transition: background var(--dur-fast) var(--ease-std);
}
.canvas-mode-btn--ghost {
color: var(--ink-muted);
border: 1px solid var(--hairline);
background: var(--surface-1);
}
.canvas-mode-btn--ghost:hover {
background: var(--surface-2);
}
.canvas-mode-btn--primary {
color: #fff;
background: var(--accent);
}
.canvas-mode-btn--primary:hover {
background: var(--accent-hover);
}
.canvas-doc-content {
flex: 1;
padding: var(--sp-5) var(--sp-6);
}
.canvas-doc-content--form {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.canvas-subject {
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--hairline);
}
.canvas-subject__label {
display: block;
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-subtle);
margin-bottom: var(--sp-1);
}
.canvas-subject__value {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink);
line-height: var(--lh-lg);
}
.canvas-subject__input {
width: 100%;
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink);
line-height: var(--lh-lg);
background: transparent;
border: none;
outline: none;
padding: 0;
}
.canvas-subject__input::-moz-placeholder {
color: var(--ink-subtle);
font-weight: 400;
}
.canvas-subject__input::placeholder {
color: var(--ink-subtle);
font-weight: 400;
}
.canvas-body-text {
font-size: var(--fs-md);
line-height: 1.7;
color: var(--ink);
}
.canvas-editor {
width: 100%;
font-size: var(--fs-md);
line-height: 1.7;
color: var(--ink);
background: transparent;
border: none;
resize: none;
outline: none;
min-height: 280px;
}
.canvas-form-prompt {
font-size: var(--fs-md);
color: var(--ink-muted);
}
.canvas-context-input {
width: 100%;
font-size: var(--fs-md);
color: var(--ink);
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: var(--sp-3) var(--sp-4);
resize: none;
outline: none;
transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.canvas-context-input:focus {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.canvas-regenerate-btn {
align-self: flex-start;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-lg);
font-size: var(--fs-md);
font-weight: 600;
color: #fff;
background: var(--accent);
transition: background var(--dur-fast) var(--ease-std);
}
.canvas-regenerate-btn:disabled {
opacity: 0.4;
}
.canvas-regenerate-btn:not(:disabled):hover {
background: var(--accent-hover);
}
.canvas-assumptions {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--hairline);
background: var(--surface-2);
}
.canvas-assumptions__toggle {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--ink-subtle);
width: 100%;
text-align: left;
}
.canvas-assumptions__toggle:hover {
color: var(--ink-muted);
}
.canvas-assumptions__preview {
color: var(--ink-muted);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.canvas-assumptions__chips {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.canvas-assumptions__chip {
font-size: var(--fs-xs);
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--surface-1);
border: 1px solid var(--hairline);
color: var(--ink-muted);
}
.canvas-confirmed {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid rgba(22, 163, 74, 0.2);
background: var(--confirmed-bg);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--confirmed);
}
.canvas-footer {
display: flex;
gap: var(--sp-2);
padding: var(--sp-4);
border-top: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.9);
position: sticky;
bottom: 0;
}
.canvas-footer-btn {
flex: 1;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-lg);
font-size: var(--fs-md);
font-weight: 600;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.canvas-footer-btn--secondary {
color: var(--ink-muted);
background: var(--surface-1);
border: 1px solid var(--hairline);
}
.canvas-footer-btn--secondary:hover {
background: var(--surface-2);
border-color: rgba(0, 0, 0, 0.1);
}
.canvas-footer-btn--primary {
color: #fff;
background: var(--accent);
border: 1px solid transparent;
}
.canvas-footer-btn--primary:hover {
background: var(--accent-hover);
}
@media (prefers-reduced-motion: reduce) {
.canvas-pane--open,
.chat-pane { transition: none; animation: none; }
}
/* ─── Warm account chips (cross-account composer) ─── */
.warm-account-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.warm-account-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 200px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
line-height: 1.3;
}
.warm-account-chip--pinned {
background: var(--accent-subtle);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
color: var(--accent);
font-weight: 500;
}
.warm-account-chip--suggested {
background: transparent;
border: 1px dashed var(--hairline);
color: var(--ink-subtle);
}
.warm-account-chip--add {
background: transparent;
border: 1px dashed #cbd5e1;
color: var(--ink-subtle);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.warm-account-chip--add:hover {
border-color: #94a3b8;
color: #475569;
}
.warm-account-chip__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.warm-account-chip__pin,
.warm-account-chip__remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
color: inherit;
opacity: 0.6;
cursor: pointer;
font-size: 13px;
line-height: 1;
}
.warm-account-chip__pin:hover,
.warm-account-chip__remove:hover {
opacity: 1;
}
/* ─── Composer (thread) ───────────────────────────────────────────────────
Two shapes, one DOM. At rest it is a single-line pill: input plus the two
send-side controls, nothing else. Focus (or a draft, an attachment, a drag,
an in-flight run) unfolds it into a card — the input takes its own row and
the buttons drop to a gutter beneath it. The grid does the reflow, so React
never remounts the textarea and the caret survives the morph. */
.composer-shell {
/* Both radii live here so the glow ring, the card and the ring's inner inset
all derive from the same two numbers. */
--composer-radius: 26px;
--composer-radius-rest: 999px;
--composer-inset: 18px;
--composer-morph: 260ms;
/* Slow out, no overshoot — the card is growing under the user's caret, so a
springy curve reads as the text jumping. */
--composer-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding-top: var(--sp-2);
}
.composer-form {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Anchors the slash palette above the card without letting it stretch the
form's flex column. */
.composer-stack {
position: relative;
}
/* Rotating border glow — SplashScreen pattern (overflow + padded inner card) */
.composer-glow-ring {
position: relative;
border-radius: var(--composer-radius);
}
.composer-glow-ring--active {
overflow: hidden;
padding: 2px;
}
.composer-glow-ring__spin {
position: absolute;
inset: -1000%;
background: conic-gradient(
from 90deg at 50% 50%,
transparent 0%,
transparent 60%,
color-mix(in srgb, var(--accent) 15%, transparent) 100%
);
animation: composer-glow-spin 5s linear infinite;
pointer-events: none;
}
@keyframes composer-glow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── The card ── */
.composer-card {
position: relative;
z-index: 1;
background: var(--surface-1);
border: 1px solid var(--hairline);
/* No drop shadow anywhere in the composer — the border and the thread's own
scroll fade do the separating. */
box-shadow: none;
/* Padding is what animates the height: the content box stays one line tall, so
growing the bottom gutter from 8px to 44px grows the card continuously —
which `height: auto` could never do. */
border-radius: var(--composer-radius-rest);
padding: 8px var(--composer-inset);
transition:
padding var(--composer-morph) var(--composer-ease),
border-radius var(--composer-morph) var(--composer-ease),
border-color var(--dur-base) var(--ease-std);
}
.composer-card[data-expanded="true"] {
border-radius: var(--composer-radius);
/* 44px bottom = the 32px button row plus its 6px surround, top and bottom. */
padding: 12px var(--composer-inset) 44px var(--composer-inset);
}
.composer-glow-ring--active .composer-card {
border-radius: calc(var(--composer-radius) - 4px);
}
.composer-card:hover {
border-color: color-mix(in srgb, var(--hairline) 50%, var(--accent));
}
/* Focus only warms the border. Deliberately no halo and no lift: the composer
is where the caret rests by default, so either would effectively never turn
off — and at full accent the border alone already reads as loud. */
.composer-card:focus-within {
border-color: color-mix(in srgb, var(--accent) 26%, var(--hairline));
}
.composer-card--loading .composer-input,
.composer-card--loading .composer-tool-btn {
pointer-events: none;
}
.composer-card--loading .composer-input {
opacity: 0.65;
}
.composer-shell--dragging .composer-card {
border-color: var(--accent);
border-style: dashed;
}
/* ── The morph ──
Nothing here reflows. The buttons are pinned to the card's inner bottom-right
and bottom-left corners in *both* states, so the only things that change are
the card's padding, the input's right inset and two offsets — all of which
interpolate. A grid- or flex-direction swap would land the same layout but
snap, because grid-template-areas and height:auto are not animatable. */
.composer-body {
position: static;
}
.composer-lead,
.composer-trail {
position: absolute;
display: flex;
align-items: center;
gap: 2px;
z-index: 2;
transition:
bottom var(--composer-morph) var(--composer-ease),
inset-inline-start var(--composer-morph) var(--composer-ease),
inset-inline-end var(--composer-morph) var(--composer-ease),
opacity var(--composer-morph) var(--composer-ease),
transform var(--composer-morph) var(--composer-ease),
/* visibility is discrete — a plain transition flips it half-way through the
fade. Holding it until the fade ends keeps the button from blinking out
at 50% opacity, while expand un-hides it immediately. */
visibility 0s linear var(--composer-morph);
}
.composer-trail { inset-inline-end: 4px; bottom: 4px; }
/* The add button only exists once the composer is open — it is the one control
the resting pill trades away for its single line. Dropping a file and pasting
one both still work while collapsed. */
.composer-lead {
/* 11px, not the card's 18px text inset: the glyph inside a 32px disc starts
~8px in, which lands it on the same optical edge as the first character. */
inset-inline-start: 11px;
bottom: 4px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px) scale(0.9);
}
.composer-card[data-expanded="true"] .composer-lead {
pointer-events: auto;
bottom: 6px;
opacity: 1;
visibility: visible;
transform: none;
transition:
bottom var(--composer-morph) var(--composer-ease),
inset-inline-start var(--composer-morph) var(--composer-ease),
opacity var(--composer-morph) var(--composer-ease),
transform var(--composer-morph) var(--composer-ease),
visibility 0s linear 0s;
}
.composer-card[data-expanded="true"] .composer-trail {
inset-inline-end: 11px;
bottom: 6px;
}
.composer-input {
/* Block, not the textarea default of inline-block: as an inline it sits on a
line box and drags 3px of descender space into the card, which pushes the
card 3px taller than its padding says and leaves the pinned buttons sitting
low inside a cap that only clears them by 4px. */
display: block;
width: 100%;
resize: none;
border: none;
outline: none;
background: transparent;
min-height: 24px;
max-height: 200px;
font-size: 15px;
line-height: 24px;
color: var(--ink);
padding: 0;
margin: 0;
/* Collapsed, the text has to clear the two pinned buttons; expanded, it owns
the full width and the buttons sit in the gutter below it. */
padding-inline-end: 60px;
transition: padding-inline-end var(--composer-morph) var(--composer-ease);
}
.composer-card[data-expanded="true"] .composer-input {
padding-inline-end: 0;
}
.composer-input::-moz-placeholder {
color: var(--ink-subtle);
}
.composer-input::placeholder {
color: var(--ink-subtle);
}
.composer-input:disabled {
opacity: 0.55;
}
/* ── Pinned integration cards (/tool:) ── */
/* A compact horizontal card, not the grid tile from the Tools page: that one
stacks icon over name over description with the action pinned to the bottom,
which is ~120px tall and would dwarf the composer. Same logos and the same
connect/disconnect actions, laid out on one line. */
.composer-tools {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.composer-tool-card {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 7px 7px 7px 9px;
border-radius: var(--radius-lg);
border: 1px solid var(--hairline);
background: var(--surface-2);
}
.composer-tool-card__logo {
width: 26px;
height: 26px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
background: var(--surface-1);
border: 1px solid var(--hairline);
font-size: var(--fs-sm);
font-weight: 700;
}
.composer-tool-card__body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.composer-tool-card__name {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink);
}
.composer-tool-card__desc {
font-size: var(--fs-xs);
color: var(--ink-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-tool-card__state {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-muted);
text-transform: capitalize;
}
.composer-tool-card__action {
flex-shrink: 0;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--rudy-primary-fg, white);
background: var(--accent);
transition: background var(--dur-fast) var(--ease-std);
}
.composer-tool-card__action:hover:not(:disabled) { background: var(--accent-hover); }
.composer-tool-card__action:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-tool-card__action--ghost {
background: transparent;
color: var(--ink-subtle);
border: 1px solid var(--hairline);
}
.composer-tool-card__action--ghost:hover:not(:disabled) {
background: var(--surface-1);
color: var(--ink);
}
.composer-tool-card__remove {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: var(--radius-full);
color: var(--ink-subtle);
line-height: 1;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.composer-tool-card__remove:hover { background: var(--surface-1); color: var(--ink); }
/* ── Rows above the input ── */
.composer-attachments {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: 10px;
}
.composer-context.warm-account-chips {
margin-bottom: 10px;
}
/* ── Drop target ── */
.composer-dropzone {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
border-radius: inherit;
background: color-mix(in srgb, var(--surface-1) 88%, var(--accent));
color: var(--accent);
font-size: var(--fs-sm);
font-weight: 600;
pointer-events: none;
}
/* ── Buttons ── */
/* Ghost discs rather than bordered pills: one outline per control is what made
the old toolbar read as a row of little boxes. */
.composer-tool-btn,
.composer-add__trigger {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-muted);
background: transparent;
border: none;
transition:
background var(--dur-fast) var(--ease-std),
color var(--dur-fast) var(--ease-std);
}
.composer-tool-btn:hover:not(:disabled),
.composer-add__trigger:hover:not(:disabled) {
color: var(--ink);
background: color-mix(in srgb, var(--surface-2) 65%, transparent);
}
.composer-tool-btn:disabled,
.composer-add__trigger:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.composer-add {
position: relative;
flex-shrink: 0;
}
.composer-add__trigger[aria-expanded="true"] {
color: var(--ink);
background: var(--surface-2);
}
.composer-add__menu {
position: absolute;
bottom: calc(100% + var(--sp-2));
left: 0;
z-index: 20;
min-width: 184px;
padding: var(--sp-1);
border-radius: var(--radius-lg);
background: var(--surface-1);
border: 1px solid var(--hairline);
display: flex;
flex-direction: column;
gap: 2px;
transform-origin: bottom left;
animation: composer-pop-in var(--dur-fast) var(--ease-std);
}
@keyframes composer-pop-in {
from { opacity: 0; transform: translateY(4px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.composer-add__item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
color: var(--ink);
text-align: left;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-std);
}
.composer-add__item:hover {
background: var(--surface-2);
}
.composer-voice-state {
max-width: 200px;
}
.composer-send {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--rudy-primary-fg, white);
border: none;
transition:
background var(--dur-fast) var(--ease-std),
transform var(--dur-fast) var(--ease-std),
color var(--dur-fast) var(--ease-std);
}
.composer-send:hover:not(:disabled) {
background: var(--accent-hover);
}
/* Press feedback is a squeeze, not a hop: the button sits on a fixed baseline
and a translate there reads as the whole row twitching. */
.composer-send:active:not(:disabled) {
transform: scale(0.94);
}
/* --ink-subtle is a blue-grey, and mixing it into the disc turned the resting
send button lavender against a cream page. Build the disabled state out of
the paper tones instead. */
.composer-send:disabled {
cursor: not-allowed;
background: var(--surface-2);
color: color-mix(in srgb, var(--ink-muted) 42%, var(--surface-2));
}
.composer-send--busy {
background: var(--accent) !important;
color: var(--rudy-primary-fg, white) !important;
cursor: pointer;
pointer-events: auto;
}
.composer-send--busy:hover {
background: var(--accent-hover) !important;
}
/* ── Slash palette ── */
.composer-slash {
position: absolute;
bottom: calc(100% + var(--sp-2));
left: 0;
right: 0;
z-index: 25;
max-height: 300px;
overflow-y: auto;
padding: var(--sp-1);
border-radius: var(--radius-lg);
background: var(--surface-1);
border: 1px solid var(--hairline);
display: flex;
flex-direction: column;
gap: 2px;
transform-origin: bottom center;
animation: composer-pop-in var(--dur-fast) var(--ease-std);
}
.composer-slash--empty { padding: 0; }
.composer-slash__empty {
margin: 0;
padding: 10px var(--sp-3);
font-size: var(--fs-sm);
color: var(--ink-subtle);
}
.composer-slash__item {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: var(--sp-2);
width: 100%;
padding: var(--sp-2) var(--sp-2);
border-radius: var(--radius-md);
text-align: left;
color: var(--ink);
transition: background var(--dur-fast) var(--ease-std);
}
/* Hover and keyboard selection are the same highlight — two competing
highlights in one list is how you lose track of what Enter will run. */
.composer-slash__item.is-active {
background: var(--surface-2);
}
.composer-slash__icon {
color: var(--accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.composer-slash__logo {
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.composer-slash__label {
font-size: var(--fs-md);
font-weight: 500;
}
.composer-slash__hint {
font-size: var(--fs-sm);
color: var(--ink-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-slash__cmd {
font-size: var(--fs-xs);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--ink-subtle);
background: var(--surface-2);
border-radius: var(--radius-sm, 6px);
padding: 2px 6px;
}
@media (max-width: 640px) {
.composer-slash__hint { display: none; }
}
/* ── Hint row ── */
/* Reference text, not chrome: it is out of the way until the composer opens. */
.composer-hint {
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
gap: 5px;
color: var(--ink-subtle);
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
opacity var(--composer-morph) var(--composer-ease),
max-height var(--composer-morph) var(--composer-ease),
color var(--dur-base) var(--ease-std);
}
.composer-hint[data-shown="true"] {
max-height: 24px;
opacity: 1;
}
.composer-hint--loading {
color: var(--accent);
font-weight: 500;
max-height: 24px;
opacity: 1;
}
.composer-hint__sep { opacity: 0.45; }
/* Plain glyphs, not bordered key caps: five little boxes under the composer
competed with the composer itself. */
.composer-kbd {
font-family: inherit;
font-size: inherit;
color: var(--ink-muted);
font-weight: 600;
background: none;
border: none;
padding: 0;
}
.composer-hint__help {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--hairline);
transition:
color var(--dur-fast) var(--ease-std),
text-decoration-color var(--dur-fast) var(--ease-std);
}
.composer-hint__help:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.composer-card,
.composer-hint,
.composer-input,
.composer-lead,
.composer-trail { transition: none; }
.composer-slash,
.composer-add__menu { animation: none; }
}
/* ── Composer "compact" variant — single rounded-pill row (onboarding surface) ── */
.composer-form--compact { display: flex; }
.composer-pill {
position: relative;
display: flex; align-items: center; gap: 8px; width: 100%;
border-radius: 999px; border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
background: var(--surface-1, #fff); padding: 8px 8px 8px 18px;
transition: border-color .15s ease;
}
.onboarding-composer .composer-pill{
border-radius: 12px;
}
.composer-pill:hover {
border-color: rgba(0, 0, 0, .2);
}
/* Matches the thread composer: warmed border and a deeper lift, no wide halo. */
.composer-pill:focus-within {
border-color: color-mix(in srgb, var(--rudy-accent, #d2643a) 30%, rgba(0, 0, 0, .14));
}
.composer-input--compact {
min-height: 0; max-height: 120px; margin-bottom: 0; padding: 6px 0;
line-height: 1.3;
}
.composer-pill__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.composer-icon-btn {
display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border-radius: 999px; border: none; background: transparent; color: var(--canvas-text-muted, #6b7280);
cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.composer-icon-btn:hover:not(:disabled) { background: var(--canvas-border, rgba(0,0,0,.06)); color: inherit; }
.composer-icon-btn:disabled { cursor: not-allowed; opacity: .45; }
.composer-icon-btn--send {
background: var(--rudy-accent, #d2643a); color: #fff;
}
.composer-icon-btn--send:hover:not(:disabled) { background: var(--rudy-accent, #d2643a); opacity: .92; }
.composer-icon-btn--send:active:not(:disabled) { transform: scale(.94); }
.composer-icon-btn--send:disabled { background: var(--canvas-border, rgba(0,0,0,.14)); opacity: .6; }
@media (prefers-reduced-motion: reduce) {
.composer-glow-ring__spin {
animation: none;
opacity: 0.55;
}
}
.composer-error {
font-size: var(--fs-xs);
color: #ef4444;
margin: 0;
}
.composer-pin {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3);
}
.composer-pin__text {
font-size: var(--fs-sm);
color: var(--ink-muted);
flex: 1;
min-width: 140px;
}
.composer-pin__btn {
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
transition: background var(--dur-fast) var(--ease-std);
}
.composer-pin__btn--ghost {
color: var(--ink-subtle);
border: 1px solid var(--hairline);
background: transparent;
}
.composer-pin__btn--ghost:hover {
background: var(--surface-1);
}
.composer-pin__btn--accent {
font-weight: 500;
color: var(--accent);
background: var(--accent-subtle);
border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
}
.composer-pin__btn--accent:hover {
background: color-mix(in oklch, var(--accent) 20%, white);
}
/* ─── Home hero + prompt cards ─────────────────────────────────────────────
Cards, not chips. The chip row ("Find warm paths") sent a vague one-liner on
click; these show the full ask and drop it into the composer for editing, so
the text is the point and has to be readable. Kept flat — hairline border,
surface-1, no shadow until hover — so the grid sits under the composer
without outweighing it. */
.home-prompts {
margin-bottom: 10px;
}
.home-prompts__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
padding: 0 2px;
}
.home-prompts__label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-subtle);
}
.home-prompts__pick {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-subtle);
transition: color var(--dur-fast) var(--ease-std);
}
.home-prompts__pick:hover { color: var(--accent); }
.home-prompts__pick svg { width: 12px; height: 12px; }
/* One grouped list, not a card grid: each row is icon / title + full summary /
arrow, so nothing gets truncated and the set reads like a short menu of plays.
Flat rows inside one hairline container; hover tints the row rather than
lifting a card. */
.home-prompts__grid {
display: flex;
flex-direction: column;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--surface-1);
overflow: hidden;
}
.home-prompt {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto auto;
-moz-column-gap: 12px;
column-gap: 12px;
row-gap: 2px;
align-items: center;
padding: 12px 16px;
text-align: left;
cursor: pointer;
background: transparent;
transition: background var(--dur-fast) var(--ease-std);
}
.home-prompt + .home-prompt { border-top: 1px solid var(--hairline); }
/* srgb, not oklch: these mix warm paper against the blue-grey ink tokens, and
oklch takes the shortest arc between two nearly opposite hues — which runs
through cyan. Rectangular interpolation cannot swing hue. */
.home-prompt:hover { background: color-mix(in srgb, var(--surface-1) 70%, var(--accent-subtle)); }
.home-prompt:focus-visible {
outline: none;
background: color-mix(in srgb, var(--surface-1) 70%, var(--accent-subtle));
box-shadow: inset 2px 0 0 var(--accent);
}
.home-prompt__icon {
grid-row: 1 / 3;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--accent-subtle);
color: var(--accent);
transition: background var(--dur-fast) var(--ease-std);
}
.home-prompt:hover .home-prompt__icon {
background: color-mix(in oklch, var(--accent) 20%, white);
}
.home-prompt__icon svg { width: 15px; height: 15px; }
.home-prompt__title {
grid-column: 2;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
}
.home-prompt__text {
grid-column: 2;
font-size: 12.5px;
line-height: 1.45;
color: var(--ink-subtle);
}
/* Always-visible affordance: a muted arrow at rest says "this row does something";
on hover/focus it turns accent and a "Use prompt" label slides in beside it. */
.home-prompt__cta {
grid-column: 3;
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink-subtle);
transition: color var(--dur-fast) var(--ease-std);
}
.home-prompt__cta-label {
font-size: 12px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
transform: translateX(4px);
transition:
opacity var(--dur-fast) var(--ease-std),
transform var(--dur-fast) var(--ease-std);
}
.home-prompt__arrow {
width: 16px;
height: 16px;
transition: transform var(--dur-fast) var(--ease-std);
}
.home-prompt:hover .home-prompt__cta,
.home-prompt:focus-visible .home-prompt__cta { color: var(--accent); }
.home-prompt:hover .home-prompt__cta-label,
.home-prompt:focus-visible .home-prompt__cta-label {
opacity: 1;
transform: none;
}
.home-prompt:hover .home-prompt__arrow,
.home-prompt:focus-visible .home-prompt__arrow { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
.home-prompt__cta-label,
.home-prompt:hover .home-prompt__arrow { transform: none; }
}
/* Setup nudge — a single quiet line, not a banner. Content-width and centered
(not stretched full-bleed like the starter row's container) so it reads as one
more compact chip under the starters instead of a heavier bar competing with
the composer above it. */
.home-setup {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
margin-top: var(--sp-5, 20px);
padding: 8px 14px;
border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--hairline));
background: color-mix(in srgb, var(--accent) 5%, var(--surface-1));
font-size: var(--fs-sm);
color: var(--ink-muted);
transition: border-color var(--dur-fast) var(--ease-std);
}
.home-setup:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
}
.home-setup__dot {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--accent);
}
.home-setup__text { flex: 1; min-width: 0; }
.home-setup__cta {
flex-shrink: 0;
font-weight: 600;
color: var(--accent);
}
.home-skill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 7px var(--sp-3);
border-radius: var(--radius-full);
background: var(--surface-1);
border: 1px solid var(--hairline);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition:
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std);
}
.home-skill:hover {
background: color-mix(in srgb, var(--surface-2) 45%, var(--surface-1));
border-color: color-mix(in srgb, var(--hairline) 55%, var(--ink-subtle));
}
.home-skill:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}
.home-skill__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm, 6px);
background: #ede9fe;
color: #7c3aed;
}
.home-skill__icon svg { width: 12px; height: 12px; }
.home-hero__avatar {
border-radius: var(--radius-full);
-o-object-fit: cover;
object-fit: cover;
border: 1px solid var(--hairline);
}
/* ─── Thread loading states ─── */
.chat-loading-state {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: var(--sp-8);
}
.chat-loading-state__card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-6);
border-radius: var(--radius-xl);
}
.chat-typing__body {
flex: 1;
min-width: 0;
}
.chat-typing-skeletons {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-top: var(--sp-3);
width: 100%;
}
/* ─── Chip select (inline in chat) ─── */
.chip-select__question {
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink);
margin-bottom: var(--sp-3);
line-height: var(--lh-md);
}
.chip-select__options {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.chip-select__chip {
font-size: var(--fs-sm);
font-weight: 500;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-full);
border: 1px solid var(--hairline);
transition:
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std),
color var(--dur-fast) var(--ease-std);
}
.chip-select__chip--idle {
background: rgba(255, 255, 255, 0.72);
color: var(--ink-muted);
}
.chip-select__chip--idle:hover {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent);
background: rgba(255, 255, 255, 0.95);
}
.chip-select__chip--selected {
background: var(--ink);
color: white;
border-color: var(--ink);
}
.chip-select__chip--disabled {
background: rgba(255, 255, 255, 0.5);
color: var(--ink-subtle);
cursor: default;
}
.chip-select__textarea {
width: 100%;
resize: none;
border-radius: var(--radius-lg);
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.72);
padding: var(--sp-3);
font-size: var(--fs-base);
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease-std);
}
.chip-select__textarea:focus {
outline: none;
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.chip-select__textarea::-moz-placeholder {
color: var(--ink-subtle);
}
.chip-select__textarea::placeholder {
color: var(--ink-subtle);
}
.chip-select__other {
margin-top: var(--sp-3);
}
.chip-select__submit {
margin-top: var(--sp-2);
width: 100%;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-lg);
background: var(--accent);
color: white;
font-size: var(--fs-base);
font-weight: 600;
transition: background var(--dur-fast) var(--ease-std);
}
.chip-select__submit:hover:not(:disabled) {
background: var(--accent-hover);
}
.chip-select__submit:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ─── Modal / popover entrance ─── */
@keyframes modal-in {
from { opacity: 0; transform: scale(0.97) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-animate { animation: modal-in var(--dur-base) var(--ease-out); }
/* ─── Liquid glass surfaces (neutral white) ─── */
.glass-panel {
background: var(--surface-1);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-sm);
}
.glass-sidebar {
background: var(--sidebar);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-sm);
}
.glass-pill {
background: var(--surface-1);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-sm);
}
.glass-pill:focus-within {
border-color: var(--accent);
background: var(--surface-1);
box-shadow:
var(--shadow-sm),
0 0 0 3px var(--accent-subtle);
}
.glass-card {
background: var(--surface-1);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-sm);
}
.glass-card:hover {
background: var(--surface-1);
border-color: var(--ink-subtle);
box-shadow: var(--shadow-md);
}
/* ─── Matte CTAs (flat paper card, no blur/shine) ─── */
.liquid-cta {
position: relative;
z-index: 0;
overflow: hidden;
border: 1px solid var(--hairline);
background: var(--surface-1);
box-shadow: var(--shadow-sm);
transition:
transform 0.2s var(--ease-std),
box-shadow 0.2s var(--ease-std),
border-color 0.2s ease,
background 0.2s ease;
}
.liquid-cta:hover {
transform: translateY(-1px);
border-color: var(--accent);
background: var(--surface-1);
box-shadow: var(--shadow-md);
}
.liquid-cta:active {
transform: translateY(0);
transition-duration: 0.1s;
box-shadow: var(--shadow-sm);
}
.liquid-cta svg,
.liquid-cta span,
.liquid-cta p {
position: relative;
z-index: 2;
}
.glass-sidebar .liquid-cta {
box-shadow: var(--shadow-sm);
}
/* Pill capsule — primary actions (New Chat) */
.liquid-cta--pill {
border-radius: 999px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
/* Card variant — suggestion tiles */
.liquid-cta--card {
border-radius: 1rem;
text-align: left;
}
@media (prefers-reduced-motion: reduce) {
.liquid-cta:hover {
transform: none;
}
}
/* ─── Sidebar — clean interactions ─── */
.sidebar-row,
.sidebar-thread,
.sidebar-link,
.sidebar-cta,
.sidebar-popover-item {
transition:
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.sidebar-row {
border-radius: 0.75rem;
}
.sidebar-row:hover {
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.sidebar-row:active {
transform: scale(0.99);
}
.sidebar-row--active {
background: var(--surface-2);
color: var(--ink);
font-weight: 500;
box-shadow: none;
}
.sidebar-row--active:hover {
background: #eceef2;
box-shadow: none;
}
/* Thread list — thin nesting line; active bar overlays left edge (same for recent + account) */
.sidebar-thread-list {
--thread-pl: 0.2rem;
margin-left: 0.25rem;
padding-left: var(--thread-pl);
border-left: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.sidebar-thread-list--nested {
margin-left: 0.5rem;
}
.sidebar-thread-line {
position: relative;
}
.sidebar-thread-indicator {
position: absolute;
left: calc(-1 * (var(--thread-pl) + 2px));
width: 2px;
top: 0px;
bottom: 0px;
border-radius: 9999px;
background: var(--accent);
pointer-events: none;
}
.sidebar-thread {
border-radius: 0;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.sidebar-thread:hover {
color: var(--ink);
}
.sidebar-thread:active {
transform: scale(0.99);
}
.sidebar-thread--active {
background: var(--surface-2);
color: var(--ink);
font-weight: 500;
}
.sidebar-thread--active:hover {
background: #eceef2;
color: var(--ink);
}
.sidebar-link {
padding: 2px 6px;
margin: -2px -6px;
border-radius: 0.375rem;
}
.sidebar-link:hover {
color: var(--accent);
background: rgba(255, 255, 255, 0.65);
}
.sidebar-link:active {
transform: scale(0.97);
}
.sidebar-cta {
border-radius: 9999px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.72);
}
.sidebar-cta:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--ink);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
transform: translateY(-1px);
}
.sidebar-cta:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.sidebar-action-btn {
border-radius: 0.5rem;
transition:
background 0.2s ease,
color 0.2s ease,
opacity 0.2s ease,
transform 0.15s ease;
}
.sidebar-action-btn:hover {
background: rgba(255, 255, 255, 0.85);
color: var(--accent);
}
.sidebar-action-btn:active {
transform: scale(0.92);
}
.sidebar-action-btn--danger:hover {
color: #ef4444;
background: rgba(254, 242, 242, 0.9);
}
.sidebar-popover-item {
border-radius: 0.5rem;
}
.sidebar-popover-item:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
}
.sidebar-popover-item--active {
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
font-weight: 600;
}
.sidebar-icon-btn {
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.sidebar-icon-btn:hover {
background: rgba(255, 255, 255, 0.85);
color: var(--ink);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.sidebar-icon-btn:active {
transform: scale(0.94);
}
.sidebar-icon-btn--active {
background: rgba(255, 255, 255, 0.95);
color: var(--accent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sidebar-icon-btn--active:hover {
background: rgba(255, 255, 255, 1);
}
.sidebar-chevron {
transition: transform 0.25s ease;
}
.sidebar-chevron--open {
transform: rotate(180deg);
}
/* Sidebar rail — Rudy↔toggle flip button */
.sidebar-flip-btn {
perspective: 600px;
background: none;
border: none;
padding: 0;
cursor: pointer;
border-radius: 10px;
transition: background 0.2s ease;
}
.sidebar-flip-btn:hover {
background: rgba(255, 255, 255, 0.7);
}
.sidebar-flip-btn:active {
transform: scale(0.94);
}
.sidebar-flip-inner {
width: 26px;
height: 26px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-flip-btn:hover .sidebar-flip-inner {
transform: rotateY(180deg);
}
.sidebar-flip-front,
.sidebar-flip-back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sidebar-flip-back {
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
.sidebar-flip-inner {
transition: none;
}
.sidebar-row,
.sidebar-thread,
.sidebar-link,
.sidebar-cta,
.sidebar-action-btn,
.sidebar-popover-item,
.sidebar-icon-btn,
.sidebar-chevron {
transition: none;
}
.sidebar-row:hover,
.sidebar-cta:hover,
.sidebar-row:active,
.sidebar-thread:active,
.sidebar-link:active,
.sidebar-cta:active,
.sidebar-action-btn:active,
.sidebar-icon-btn:active {
transform: none;
}
}
@supports not (backdrop-filter: blur(1px)) {
.glass-panel { background: rgba(255, 255, 255, 0.97); }
.glass-sidebar { background: rgba(252, 252, 252, 0.97); }
.glass-pill { background: rgba(255, 255, 255, 0.98); }
.glass-card { background: rgba(255, 255, 255, 0.97); }
.app-sidebar-backdrop {
backdrop-filter: none;
background: rgba(17, 24, 39, 0.45);
}
.app-sidebar--overlay .app-sidebar__panel { background: rgba(252, 252, 253, 0.98); }
}
/* App shell — neutral gray canvas, subtle white depth */
.app-shell {
position: relative;
gap: var(--sp-2);
background:
radial-gradient(ellipse 70% 55% at 15% 8%, rgba(255, 255, 255, 0.85), transparent 65%),
radial-gradient(ellipse 60% 50% at 88% 92%, rgba(255, 255, 255, 0.6), transparent 60%),
linear-gradient(165deg, #efefef 0%, var(--rudy-background) 45%, #f2f2f2 100%);
overflow: hidden;
}
.app-shell > * {
position: relative;
z-index: 1;
}
/* Ambient sliding light-beam backdrop (RudyRaysBackground) — themed version
of the classic rotated-strip "rainbow background" effect: many thin,
full-height strips with a colored box-shadow glow slide left→right at
staggered speeds/delays, giving a slow shimmer behind the mostly
transparent chat panels. Rendered as the first child of .app-shell so the
`.app-shell > *` rule above would normally lift it to z-index: 1 — the
child-combinator + class selector here has higher specificity and wins. */
.app-shell > .rudy-rays {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: 0.04;
}
.rudy-ray {
position: absolute;
height: 100%;
width: 0;
top: 0;
right: -25vw;
transform: rotate(10deg);
transform-origin: top right;
animation-name: rudy-ray-slide;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rudy-ray-slide {
from { right: -25vw; }
to { right: 125vw; }
}
.rudy-glow-h {
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 0;
box-shadow: 0 0 50vh 40vh var(--canvas);
}
.rudy-glow-v {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 100vh;
box-shadow: 0 0 35vw 25vw var(--canvas);
}
@media (prefers-reduced-motion: reduce) {
.rudy-ray {
animation: none;
display: none;
}
}
body {
background-color: var(--canvas);
}
/* ─── Path table row stagger ─── */
@keyframes row-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.path-row-animate { animation: row-in var(--dur-slow) var(--ease-out) both; }
/* ─── PathsTable panel mode ─── */
.paths-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--surface-1);
margin: -12px -12px 0 -12px;
}
.paths-panel-header {
flex-shrink: 0;
/* Warm surface (matches the card list and search/chip fills below) instead
of a flat cool gray — the mismatch made this read as a pasted-on slab. */
background: var(--surface-1);
box-shadow: 0 1px 0 var(--hairline), 0 6px 12px -8px rgba(28, 24, 18, 0.12);
position: relative;
z-index: 1;
}
.paths-panel-stats {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--hairline);
overflow-x: auto;
scrollbar-width: none;
}
.paths-panel-stats::-webkit-scrollbar { display: none; }
.paths-panel-stats__div {
width: 1px;
background: var(--hairline);
align-self: stretch;
flex-shrink: 0;
margin-block: var(--sp-2);
}
.paths-panel-controls {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3);
}
.paths-panel-search {
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
padding: 5px 10px;
transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.paths-panel-search:focus-within {
border-color: color-mix(in srgb, var(--ink-muted) 40%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-muted) 8%, transparent);
}
.paths-panel-search__input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: var(--fs-xs);
color: var(--ink);
min-width: 0;
}
.paths-panel-search__input::-moz-placeholder {
color: var(--ink-subtle);
}
.paths-panel-search__input::placeholder {
color: var(--ink-subtle);
}
.paths-panel-search__clear {
color: var(--ink-subtle);
display: inline-flex;
align-items: center;
padding: 1px;
border-radius: 3px;
transition: color var(--dur-fast);
}
.paths-panel-search__clear:hover { color: var(--ink); }
.paths-panel-filters {
display: flex;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.paths-panel-filters::-webkit-scrollbar { display: none; }
.paths-panel-filter-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 500;
white-space: nowrap;
border: 1px solid var(--hairline);
background: #fff;
color: var(--ink-subtle);
transition: all var(--dur-fast) var(--ease-std);
}
.paths-panel-filter-chip:hover {
border-color: color-mix(in srgb, var(--ink-muted) 30%, transparent);
color: var(--ink);
}
.paths-panel-filter-chip--active {
background: color-mix(in oklch, var(--ink) 8%, white);
border-color: color-mix(in srgb, var(--ink-muted) 30%, transparent);
color: var(--ink);
font-weight: 600;
}
.paths-panel__list-wrap {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.paths-panel__empty {
text-align: center;
color: var(--ink-subtle);
font-size: var(--fs-sm);
padding: var(--sp-4) var(--sp-3);
}
/* ─── Panel contact cards ───────────────────────────────────────────────────
A narrow panel can't fit Contact/Company/Via·Signal/Strength/Action as table
columns without truncating every field to a few characters — each card gets
the full panel width per field instead of splitting it five ways. */
.paths-card-list {
display: flex;
flex-direction: column;
}
.paths-card {
padding: var(--sp-3);
border-bottom: 1px solid var(--hairline);
transition: background var(--dur-fast) var(--ease-std);
background: #fff5;
/* border-radius: var(--radius-md); */
}
.paths-card:hover {
background: rgba(0, 0, 0, 0.015);
}
.paths-card__top {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
}
.paths-card__top > .strength-confirmed,
.paths-card__top > .strength-strong,
.paths-card__top > .strength-less-likely,
.paths-card__top > .strength-unlikely {
margin-left: auto;
flex-shrink: 0;
}
.paths-card__name-row {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.paths-card__name {
font-weight: 600;
font-size: 13px;
color: var(--ink);
line-height: 1.3;
}
.paths-card__subtitle {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
font-size: var(--fs-xs);
color: var(--ink-subtle);
margin-top: 2px;
line-height: 1.35;
}
.paths-card__via {
display: flex;
align-items: center;
gap: 4px;
margin-top: var(--sp-2);
padding-left: 34px;
font-size: var(--fs-sm);
color: var(--ink);
}
.paths-card__via-label {
color: var(--ink-subtle);
font-weight: 400;
}
/* Same font-size/line-height as .paths-card__name (the target's name) — this had none
of its own, silently inheriting whatever size cascaded down instead of matching the
other name in the same row; confirmed live as a visible size mismatch between the
connector name and the target name side by side. */
.paths-card__via-name {
font-weight: 600;
font-size: 13px;
line-height: 1.3;
}
/* "Investor · Chairman and CEO" — who the SC is to your company, plus their role.
Secondary weight so it informs the name without competing with it. */
.paths-card__via-meta {
font-size: 11px;
color: var(--ink-subtle, #64748b);
margin-left: 6px;
}
.paths-card__arrow {
flex-shrink: 0;
color: var(--ink-subtle);
margin-top: 5px;
}
.paths-card__connector {
flex: 0 1 auto;
min-width: 0;
max-width: 40%;
}
.paths-card__connector .paths-card__via-name,
.paths-card__connector .paths-card__connector-meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paths-card__summary {
margin-top: 2px;
padding-left: 34px;
font-size: var(--fs-xs);
color: var(--ink-subtle);
line-height: 1.4;
}
.paths-card__more {
margin-top: var(--sp-1);
margin-left: 34px;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-muted);
transition: color var(--dur-fast) var(--ease-std);
}
/* ReasoningSummary's "more"/"less" toggle — flows inline right after the truncated
text's own ellipsis (character-truncated in JS, not line-clamped, specifically so
this can sit beside it on the same line) instead of PathsTable's block-level
"+N more paths" usage of the same base class, which starts its own line below. */
.paths-card__more--inline {
display: inline;
margin: 0 0 0 4px;
}
.paths-card__more:hover {
color: var(--ink);
}
.paths-card__draft-cta {
display: block;
margin-top: var(--sp-1);
border: none;
background: none;
padding: 0;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--rudy-accent, #d2643a);
cursor: pointer;
}
.paths-card__draft-cta:hover {
opacity: .8;
}
.paths-card__alt-list {
margin-top: var(--sp-1);
margin-left: 34px;
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.paths-card__alt {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--fs-xs);
color: var(--ink-muted);
}
.paths-card__alt-name {
font-weight: 500;
}
.paths-card__alt > .strength-confirmed,
.paths-card__alt > .strength-strong,
.paths-card__alt > .strength-less-likely,
.paths-card__alt > .strength-unlikely {
margin-left: auto;
}
.paths-card__reaches {
margin: 6px 0 0 34px;
padding: 0;
list-style: none;
}
.paths-card__reach-item {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 3px 0;
}
.paths-card__reach-name {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: var(--ink);
flex-wrap: wrap;
}
.paths-card__footer {
display: flex;
justify-content: flex-end;
margin-top: var(--sp-2);
}
.paths-card__cta {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--accent);
transition: color var(--dur-fast) var(--ease-std);
}
.paths-card__cta:hover {
color: var(--accent-hover);
}
.paths-card__connector-meta {
font-size: 11px;
color: var(--ink-subtle, #64748b);
margin-top: 1px;
}
.paths-card__signal {
margin-top: var(--sp-1);
padding-left: 34px;
}
.paths-card__summary-row {
display: flex;
align-items: flex-start;
gap: 4px;
}
.paths-card__signal .paths-card__summary {
padding-left: 0;
flex: 1;
min-width: 0;
}
.paths-card__reasoning-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: var(--radius-sm, 4px);
color: var(--ink-subtle);
transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.paths-card__reasoning-toggle:hover {
color: var(--accent);
background: var(--accent-subtle, rgba(59, 130, 246, 0.06));
}
.paths-card__chevron {
transition: transform var(--dur-fast) var(--ease-std);
}
.paths-card__chevron--open {
transform: rotate(180deg);
}
.paths-card__reasoning {
font-size: var(--fs-xs);
color: var(--ink-subtle);
line-height: 1.4;
margin-top: var(--sp-1);
padding: var(--sp-2);
background: var(--surface-sunken, rgba(0, 0, 0, 0.02));
border-radius: var(--radius-md, 6px);
}
/* ─── Super-connector-first: account groups ──────────────────────────────────
Shares the paths-panel surface, header slab, stat cards, and .paths-card rows
so the SC lens is visually identical to the paths table — only the grouping
(by account, with the connector's own standing folded into each header) and
the panel-level "Draft an ask" selection differ. */
.sc-relation-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
background: var(--accent-subtle);
color: var(--accent);
white-space: nowrap;
}
.sc-acct {
border-bottom: 1px solid var(--hairline);
}
.sc-acct:last-child {
border-bottom: 0;
}
.sc-acct__header {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
padding: var(--sp-3);
text-align: left;
transition: background var(--dur-fast) var(--ease-std);
}
.sc-acct__header:hover {
background: rgba(0, 0, 0, 0.015);
}
.sc-acct__chevron {
color: var(--ink-muted);
transition: transform var(--dur-fast) var(--ease-std);
flex-shrink: 0;
}
.sc-acct__chevron--open {
transform: rotate(90deg);
}
.sc-acct__name {
font-weight: 600;
font-size: 13px;
color: var(--ink);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-acct__relation {
font-size: var(--fs-xs);
color: var(--ink-subtle);
line-height: 1.4;
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sc-acct__count {
margin-left: auto;
font-size: var(--fs-xs);
color: var(--ink-subtle);
white-space: nowrap;
flex-shrink: 0;
}
/* People rows inside an account reuse .paths-card; indent them under the header. */
.sc-acct__body .paths-card {
padding-left: calc(var(--sp-3) + 16px);
}
.onboarding-paths .paths-card {
padding: 8px;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.sc-acct__expand {
margin-left: calc(var(--sp-3) + 16px);
padding: var(--sp-1) 0;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--accent);
transition: color var(--dur-fast) var(--ease-std);
}
.sc-acct__expand:hover {
color: var(--accent-hover);
}
.sc-check {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1.5px solid var(--hairline);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
transition: all var(--dur-fast) var(--ease-std);
}
.sc-check--on {
background: var(--accent);
border-color: var(--accent);
}
.sc-draft-bar {
/* Was `position: sticky; bottom: 0` while living as a sibling of .paths-panel
instead of a child of its own flex column — sticky had no scrolling ancestor to
stick against, so on a long list this bar just scrolled away with everything
else instead of staying pinned, confirmed live. Fixed at the JSX layer
(SuperConnectorPathsFound.tsx now renders this as .paths-panel's own
flex-shrink:0 footer, below the flex:1/overflow-y:auto list-wrap) — a normal
in-flow footer inside a fixed-height flex column is always visible without
needing sticky at all. */
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--accent-subtle);
border-top: 1px solid var(--hairline);
}
/* Inline (chat-embedded) variant — own rounded chrome instead of relying on a
panel's shared border. */
.sc-draft-bar--inline {
margin-top: var(--sp-1);
border-top: none;
border-radius: var(--radius-md);
}
/* Solid pill CTA — same treatment as .rudy-plays-list__save-btn. Was plain
accent-colored text with no button chrome, which read as low-priority/easy to
miss next to the rest of the panel's real buttons — confirmed live. */
.sc-draft-bar__cta {
font-size: var(--fs-sm);
font-weight: 600;
padding: 6px 16px;
border-radius: 999px;
white-space: nowrap;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
transition: background var(--dur-fast) var(--ease-std);
}
.sc-draft-bar__cta:hover { background: var(--accent-hover); }
/* Dismiss on the sticky (page-level, OnboardingChat.tsx) draft bar only — clears
every contributing card's own selection so scrolling away from the card that's
actually checked doesn't leave a bar with no visible connection to anything. */
.sc-draft-bar__dismiss {
flex-shrink: 0;
color: var(--ink-subtle);
transition: color var(--dur-fast) var(--ease-std);
}
.sc-draft-bar__dismiss:hover { color: var(--ink); }
.sc-door {
padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 16px);
border-bottom: 1px solid var(--hairline);
display: flex;
align-items: flex-start;
gap: var(--sp-2);
}
.sc-door__text {
font-size: var(--fs-xs);
color: var(--ink-subtle);
line-height: 1.4;
min-width: 0;
flex: 1;
}
/* ─── Shared panel section header (AccountNetwork, ContactBrief) ───────────────
The uppercase group label between paths-card lists, on the paths-panel surface. */
.panel-section {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.panel-section__title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.panel-section__count {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-subtle);
}
.panel-section__hint {
font-size: var(--fs-xs);
color: var(--ink-subtle);
}
/* Committee reachability rail (AccountNetwork): a colored left edge groups members
by whether they're in motion / reachable / need a way in. Rows inside are .paths-card. */
.panel-rail {
border-left: 2px solid var(--hairline);
margin: 0 var(--sp-3) var(--sp-2);
}
.panel-rail__label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--fs-xs);
font-weight: 600;
padding: var(--sp-2) 0 2px var(--sp-2);
}
.panel-rail__dot {
width: 6px;
height: 6px;
border-radius: 999px;
flex-shrink: 0;
}
.panel-rail .paths-card {
padding-left: var(--sp-2);
}
/* The connector/route line on a card (who routes you in) — mirrors .paths-card__via
but without the fixed 34px indent, since these cards vary in avatar presence. */
.paths-card__route {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-top: var(--sp-1);
font-size: var(--fs-xs);
color: var(--ink-muted);
}
.paths-card__route b { color: var(--ink); font-weight: 600; }
/* Best-move focal card (ContactBrief) — the one recommended step. */
.brief-bestmove {
margin: var(--sp-2) var(--sp-3) 0;
padding: var(--sp-2) var(--sp-3);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--accent-subtle) 55%, transparent);
}
.brief-bestmove__label {
font-size: 10px;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.brief-bestmove__text {
font-size: var(--fs-sm);
color: var(--ink-muted);
line-height: 1.4;
}
.brief-signal {
font-size: var(--fs-xs);
color: var(--ink-muted);
background: var(--surface);
border-radius: 999px;
padding: 2px 8px;
}
/* ─── Rolodex spinner — RudyMark card flip ─── */
/* Two faces overlaid; scaleX alternates between them to simulate a card flip.
No 3D context needed — works everywhere. */
@keyframes rolodex-face-front {
0%, 25% { transform: scaleX(1); }
38% { transform: scaleX(0); }
62%, 75% { transform: scaleX(0); }
88%, 100% { transform: scaleX(1); }
}
@keyframes rolodex-face-back {
0%, 38% { transform: scaleX(0); }
51% { transform: scaleX(1); }
75%, 88% { transform: scaleX(1); }
100% { transform: scaleX(0); }
}
.rolodex-front { animation: rolodex-face-front 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.rolodex-back { animation: rolodex-face-back 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
/* ─── Skeleton shimmer ─── */
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-radius: var(--radius-sm);
}
/* ─── Panel shadow ─── */
.panel-shadow {
box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.08);
}
/* ─── Liquid glass magnifying lens (interactive hover only) ─── */
.liquid-glass-zone {
position: relative;
isolation: isolate;
}
.liquid-glass-lens {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
pointer-events: none;
z-index: 50;
opacity: 0;
transition: opacity 0.2s ease;
will-change: transform, opacity;
transform-origin: center center;
overflow: hidden;
}
.liquid-glass-lens--visible {
opacity: 1;
}
.use-backdrop-filter .liquid-glass-lens__clone {
display: none;
}
.liquid-glass-lens__clone {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
z-index: 1;
contain: strict;
will-change: filter;
}
.liquid-glass-lens__clone-world {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
will-change: transform;
transform-origin: top left;
}
.liquid-glass-lens__snapshot {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.liquid-glass-lens__inner {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 3;
pointer-events: none;
border: 0.5px solid rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.03);
}
.liquid-glass-lens__inner--backdrop {
background: transparent;
}
.liquid-glass-lens__svg {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.liquid-glass-lens {
display: none;
}
}
/* ── Timeline (engagement history, most recent touch first) ─────────────────
Same canonical path data as the table view, shaped for a "when/who last
engaged" question. Rail + dot on the left, date as the anchor. */
.rudy-timeline { list-style: none; margin: 0; padding: 2px 0 2px 2px; display: flex; flex-direction: column; }
.rudy-timeline__item {
display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-3);
padding: 12px 4px 12px 16px; position: relative;
}
.rudy-timeline__item::before { /* the rail */
content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px;
background: var(--canvas-border, rgba(0,0,0,.10));
}
.rudy-timeline__item:first-child::before { top: 18px; }
.rudy-timeline__item:last-child::before { bottom: calc(100% - 18px); }
.rudy-timeline__item::after { /* the dot */
content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px;
border-radius: 50%; background: var(--rudy-accent, #d2643a);
box-shadow: 0 0 0 3px var(--canvas-bg, #fff);
}
.rudy-timeline__date {
font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px;
color: var(--canvas-text-muted, #6b7280); white-space: nowrap;
}
.rudy-timeline__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rudy-timeline__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.rudy-timeline__contact { font-weight: 600; font-size: 14px; }
.rudy-timeline__account { font-size: 13px; color: var(--canvas-text-muted, #6b7280); }
.rudy-timeline__strength {
font-size: 11px; text-transform: capitalize; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.12));
color: var(--canvas-text-muted, #6b7280);
}
.rudy-timeline__meta {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280);
}
.rudy-timeline__empty { padding: 16px 4px; font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280); }
@media (max-width: 560px) {
.rudy-timeline__item { grid-template-columns: 1fr; gap: 4px; }
.rudy-timeline__date { padding-top: 0; }
}
/* ── CoverageMatrix (deals × buying committee × warm-path coverage) ─────────
Gaps are the product: an unreachable buyer reads loudest. */
.rudy-coverage__summary {
display: flex; flex-wrap: wrap; gap: 16px; padding: var(--sp-2) var(--sp-1) var(--sp-3);
font-size: 13px; color: var(--canvas-text-muted, #6b7280);
border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.08)); margin-bottom: 4px;
}
.rudy-coverage__summary strong { color: var(--canvas-text, #111827); font-variant-numeric: tabular-nums; }
.rudy-coverage__ok strong { color: var(--status-good); }
.rudy-coverage__gap strong { color: var(--status-critical); }
.rudy-coverage { display: flex; flex-direction: column; gap: 6px; }
.rudy-coverage__deal { padding: 12px 4px; border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.06)); }
.rudy-coverage__deal:last-child { border-bottom: 0; }
.rudy-coverage__head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 8px; margin-bottom: 8px;
}
.rudy-coverage__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.rudy-coverage__name { font-weight: 600; font-size: 14px; }
.rudy-coverage__stage, .rudy-coverage__amount {
font-size: var(--fs-sm); padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.12)); color: var(--canvas-text-muted, #6b7280);
}
.rudy-coverage__amount { font-variant-numeric: tabular-nums; }
.rudy-coverage__flag { font-size: 12px; font-weight: 600; color: var(--status-critical); white-space: nowrap; }
.rudy-coverage__flag--ok { color: var(--status-good); font-weight: 500; }
.rudy-coverage__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rudy-coverage__person {
display: grid; grid-template-columns: 8px 1fr auto; align-items: baseline; gap: 10px;
font-size: 13px; padding: 3px 0;
}
.rudy-coverage__dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--status-good); align-self: center;
}
.rudy-coverage__person--gap .rudy-coverage__dot { background: var(--status-warn); }
.rudy-coverage__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; min-width: 0; }
.rudy-coverage__person-name { font-weight: 500; }
.rudy-coverage__role { font-size: var(--fs-sm); color: var(--canvas-text-muted, #6b7280); text-transform: capitalize; }
.rudy-coverage__path {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
font-size: 12px; color: var(--canvas-text-muted, #6b7280); text-align: right;
}
.rudy-coverage__strength { text-transform: capitalize; }
.rudy-coverage__none { color: var(--status-critical); font-weight: 500; }
.rudy-coverage__empty { padding: 16px 4px; font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280); }
@media (max-width: 560px) {
.rudy-coverage__person { grid-template-columns: 8px 1fr; }
.rudy-coverage__path { justify-content: flex-start; text-align: left; grid-column: 2; }
}
/* ── NetworkView (connector reach, widest first) ────────────────────────────
A bar encodes reach so the strongest connectors read at a glance. */
.rudy-network { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rudy-network__group { display: flex; flex-direction: column; gap: 5px; }
.rudy-network__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.rudy-network__connector { font-weight: 600; font-size: var(--fs-md); }
.rudy-network__count { font-size: var(--fs-sm); color: var(--canvas-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.rudy-network__bar {
height: 4px; border-radius: 999px; background: var(--rudy-accent, #d2643a); opacity: .55; min-width: 6%;
}
.rudy-network__targets { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rudy-network__target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-base); }
.rudy-network__target-name { font-weight: 500; }
.rudy-network__target-account, .rudy-network__target-strength, .rudy-network__more {
font-size: var(--fs-sm); color: var(--canvas-text-muted, #6b7280);
}
.rudy-network__target-strength { text-transform: capitalize; }
.rudy-network__more { padding-top: 2px; }
.rudy-network__empty { padding: 16px 4px; font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280); }
/* ── Table cell density (measured from content, never the column name) ───────
Generated columns are model-named ("Email copy", "Talking points", …), so the
data decides: short values stay tight, prose gets room, and NO cell may set an
unbounded row height. Anything clamped stays reachable via Read more. */
.chat-table__td--short { white-space: nowrap; }
.chat-table__td--medium { min-width: 180px; }
.chat-table__td--long { min-width: 300px; }
.chat-table__clamp {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.chat-table__cell-more {
display: block; width: 100%; text-align: left; background: none; border: 0;
padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.chat-table__cell-more-hint {
display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 500;
color: var(--rudy-accent, #d2643a);
}
.chat-table__cell-more:hover .chat-table__cell-more-hint { text-decoration: underline; }
.chat-table__cell-more:focus-visible { outline: 2px solid var(--rudy-accent, #d2643a); outline-offset: 2px; border-radius: 3px; }
/* Identity column stays anchored while scrolling a wide table sideways. */
.chat-table__th:first-child, .chat-table__td:first-child {
position: sticky; left: 0; z-index: 1;
background: var(--canvas-bg, #fff);
}
.chat-table__row:hover .chat-table__td:first-child { background: var(--canvas-bg-hover, #faf9f7); }
/* Full-text reader: prose at a readable measure, not squeezed into a column. */
.chat-cell-detail {
max-width: 62ch; white-space: pre-wrap; font-size: 14px; line-height: 1.65;
padding: 4px 2px;
}
/* ── RecordCards (one card per row; long-form text at reading width) ────────
For rows the user acts on one at a time. The body is the deliverable, so it
gets ~62ch of measure instead of a squeezed table column. */
.rudy-cards { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rudy-card {
background: var(--canvas-bg, #fff);
border: 1px solid var(--canvas-border, rgba(0,0,0,.08));
border-radius: 12px; padding: var(--sp-3) var(--sp-4);
}
.rudy-card__head { display: flex; align-items: center; gap: 10px; }
.rudy-card__avatar {
width: 34px; height: 34px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-base); font-weight: 600; letter-spacing: .02em;
background: var(--rudy-accent-soft, rgba(210,100,58,.12)); color: var(--rudy-accent, #d2643a);
}
.rudy-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rudy-card__name { font-weight: 600; font-size: 14px; }
.rudy-card__meta {
font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rudy-card__links { display: flex; gap: 8px; flex: none; }
.rudy-card__links a {
width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center;
justify-content: center; font-size: 12px; text-decoration: none;
color: var(--canvas-text-muted, #6b7280);
border: 1px solid var(--canvas-border, rgba(0,0,0,.10));
}
.rudy-card__links a:hover { color: var(--rudy-accent, #d2643a); border-color: currentColor; }
.rudy-card__tie {
display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: var(--sp-2);
font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280);
}
.rudy-card__strength { text-transform: capitalize; }
.rudy-card__body {
margin-top: var(--sp-3); padding-top: var(--sp-3);
border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-card__subject { margin: 0 0 6px; font-size: var(--fs-base); font-weight: 600; }
.rudy-card__text {
margin: 0; font-size: var(--fs-base); line-height: 1.65; max-width: 62ch;
white-space: pre-wrap; color: var(--canvas-text, #111827);
}
.rudy-card__actions { display: flex; gap: 8px; margin-top: 12px; }
.rudy-card__actions button {
font-size: var(--fs-base); padding: 5px 12px; border-radius: 999px; cursor: pointer;
background: none; color: inherit;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-card__actions button:hover { border-color: var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a); }
.rudy-card__actions button:focus-visible { outline: 2px solid var(--rudy-accent, #d2643a); outline-offset: 2px; }
.rudy-cards__empty { padding: 16px 4px; font-size: var(--fs-base); color: var(--canvas-text-muted, #6b7280); }
/* ── SkillProposalCard ─────────────────────────────────────────────────────── */
.skill-proposal {
border: 1px solid var(--hairline, #e0d9c8);
border-radius: var(--radius-lg);
padding: 14px 16px;
background: var(--surface-1, #fdfbf7);
margin: 8px 0;
max-width: 480px;
}
.skill-proposal__header {
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px; color: var(--accent, #c2570a);
}
.skill-proposal__icon { flex-shrink: 0; }
.skill-proposal__title { font-size: var(--fs-base, 13px); font-weight: 600; }
.skill-proposal__summary {
font-size: var(--fs-sm, 12px); line-height: var(--lh-sm, 16px);
color: var(--ink-muted, #4b5468); margin: 0 0 10px;
}
.skill-proposal__fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.skill-proposal__field { display: flex; gap: 8px; font-size: var(--fs-sm, 12px); }
.skill-proposal__field-label { color: var(--ink-muted, #4b5468); min-width: 72px; flex-shrink: 0; }
.skill-proposal__field-value { color: var(--ink, #1c2333); font-weight: 500; }
.skill-proposal__label {
display: flex; flex-direction: column; gap: 3px;
font-size: var(--fs-sm, 12px); color: var(--ink-muted, #4b5468);
}
.skill-proposal__input {
font-size: var(--fs-base, 13px); padding: 5px 8px; border-radius: 6px;
border: 1px solid var(--hairline, #e0d9c8); background: var(--canvas, #ede6d9);
color: var(--ink, #1c2333); outline: none;
}
.skill-proposal__input:focus { border-color: var(--accent, #c2570a); }
.skill-proposal__steps {
font-size: var(--fs-sm, 12px); color: var(--ink-muted, #4b5468);
margin-bottom: 12px; cursor: pointer;
}
.skill-proposal__steps summary {
font-weight: 500; -webkit-user-select: none; -moz-user-select: none; user-select: none; list-style: disclosure-closed;
}
.skill-proposal__steps[open] summary { list-style: disclosure-open; }
.skill-proposal__steps ol {
margin: 6px 0 0; padding-left: 20px;
display: flex; flex-direction: column; gap: 3px;
}
.skill-proposal__steps li { line-height: var(--lh-sm, 16px); }
.skill-proposal__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-proposal__btn {
font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid transparent; font-weight: 500; transition: all 120ms ease;
}
.skill-proposal__btn--primary {
background: var(--accent, #c2570a); color: #fff; border-color: var(--accent, #c2570a);
}
.skill-proposal__btn--primary:hover { background: var(--accent-hover); }
.skill-proposal__btn--secondary {
background: none; color: var(--ink, #1c2333);
border-color: var(--hairline, #e0d9c8);
}
.skill-proposal__btn--secondary:hover { border-color: var(--accent, #c2570a); color: var(--accent, #c2570a); }
.skill-proposal__btn--ghost {
background: none; color: var(--ink-muted, #4b5468); border: none; padding: 5px 8px;
}
.skill-proposal__btn--ghost:hover { color: var(--ink, #1c2333); }
.skill-proposal__btn:focus-visible { outline: 2px solid var(--accent, #c2570a); outline-offset: 2px; }
/* ── TargetListCard ────────────────────────────────────────────────────────── */
.target-list-card {
border: 1px solid var(--hairline, #e0d9c8);
border-radius: var(--radius-lg);
padding: 0;
background: var(--surface-1, #fdfbf7);
margin: 8px 0;
overflow: hidden;
}
.target-list-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--hairline, #e0d9c8);
}
.target-list-card__title {
margin: 0;
font-size: var(--fs-md, 14px);
font-weight: 600;
color: var(--ink, #1c2333);
}
.target-list-card__meta {
margin: 0;
font-size: var(--fs-sm, 12px);
color: var(--ink-muted, #4b5468);
white-space: nowrap;
}
.target-list-card__table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.target-list-card__table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-base, 13px);
line-height: var(--lh-base, 20px);
}
.target-list-card__table th {
text-align: left;
padding: var(--sp-2) var(--sp-4);
font-size: var(--fs-xs, 11px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-muted, #4b5468);
background: var(--canvas, #ede6d9);
border-bottom: 1px solid var(--hairline, #e0d9c8);
white-space: nowrap;
}
.target-list-card__table td {
padding: var(--sp-2) var(--sp-4);
color: var(--ink, #1c2333);
border-bottom: 1px solid var(--hairline, #e0d9c8);
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.target-list-card__table tbody tr:last-child td {
border-bottom: none;
}
.target-list-card__table tbody tr:hover {
background: color-mix(in oklch, var(--canvas, #ede6d9) 40%, transparent);
}
/* ── Source badges ─────────────────────────────────────────────────────────── */
.source-badge {
display: inline-block;
font-size: var(--fs-xs, 11px);
font-weight: 600;
line-height: 1;
padding: 3px 8px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.badge--graph {
background: color-mix(in oklch, var(--accent, #c2570a) 12%, white);
color: var(--accent, #c2570a);
}
.badge--crm {
background: color-mix(in oklch, #2563eb 10%, white);
color: #2563eb;
}
.badge--web {
background: color-mix(in oklch, #059669 10%, white);
color: #059669;
}
.badge--default {
background: color-mix(in oklch, var(--ink-muted, #4b5468) 10%, white);
color: var(--ink-muted, #4b5468);
}
/* ── Action buttons ────────────────────────────────────────────────────────── */
.target-list-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--hairline, #e0d9c8);
}
.action-btn {
font-size: var(--fs-sm, 12px);
font-weight: 500;
padding: 5px 14px;
border-radius: var(--radius-full);
cursor: pointer;
border: 1px solid transparent;
transition: all 120ms ease;
}
.action-btn:focus-visible {
outline: 2px solid var(--accent, #c2570a);
outline-offset: 2px;
}
.action-btn:disabled {
opacity: 0.5;
cursor: default;
}
.action-btn--primary {
background: var(--accent, #c2570a);
color: #fff;
border-color: var(--accent, #c2570a);
}
.action-btn--primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.action-btn--secondary {
background: none;
color: var(--ink, #1c2333);
border-color: var(--hairline, #e0d9c8);
}
.action-btn--secondary:hover:not(:disabled) {
border-color: var(--accent, #c2570a);
color: var(--accent, #c2570a);
}
/* ── Memory save confirmation ──────────────────────────────────────────────── */
.memory-confirmed {
display: inline-flex; align-items: baseline; gap: 6px;
font-size: var(--fs-sm, 12px); line-height: var(--lh-sm, 16px);
color: var(--ink-muted, #4b5468); font-style: italic;
margin: 4px 0 0;
}
.memory-confirmed__dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #22c55e; flex-shrink: 0; position: relative; top: -1px;
}
/* ── NetworkBuildStatus — onboarding-skill entry stat strip ────────────────── */
.rudy-network-status { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
.rudy-network-status__total { font-size: 13.5px; color: var(--canvas-text, #111827); }
.rudy-network-status__total strong { font-variant-numeric: tabular-nums; }
.rudy-network-status__categories {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.rudy-network-status__category {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.1));
font-size: 12.5px;
}
.rudy-network-status__category-label { color: var(--canvas-text-muted, #6b7280); }
.rudy-network-status__category-count { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ── ChoiceChips — generic chip row for onboarding-skill decision points ───── */
/* Numbered intake eyebrow above the chips / investor card ("2 OF 5",
"4 OF 5 · FOLLOW-UP") — small accent-coloured uppercase label. */
.rudy-choice-eyebrow {
display: block; margin-bottom: 6px;
font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: var(--rudy-accent, #d2643a);
}
.rudy-investor__eyebrow { margin-bottom: 10px; }
/* Step counter hoisted to head the question text (see OnboardingAssistantBubble):
sits above the question with a little breathing room between steps. */
.rudy-step-eyebrow { margin-top: 4px; margin-bottom: 4px; }
.rudy-choice-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rudy-choice-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
background: none; color: inherit;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-choice-chip__arrow { opacity: .55; font-size: 12px; }
.rudy-choice-chip:hover { border-color: var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a); }
.rudy-choice-chip:focus-visible { outline: 2px solid var(--rudy-accent, #d2643a); outline-offset: 2px; }
.rudy-choice-chip--primary {
background: var(--rudy-accent, #d2643a); color: #fff; border-color: var(--rudy-accent, #d2643a);
}
.rudy-choice-chip--primary:hover { opacity: .9; color: #fff; }
.rudy-choice-chips--disabled .rudy-choice-chip {
opacity: .5; cursor: default; pointer-events: none;
}
.rudy-choice-chips--disabled .rudy-choice-chip:hover { border-color: var(--canvas-border, rgba(0,0,0,.14)); color: inherit; }
.rudy-choice-chips--disabled .rudy-choice-chip--primary:hover { opacity: .5; }
/* ── Workflow-trigger-scheduling skill cards ───────────────────────────────── */
.rudy-trigger-card {
margin-top: 10px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
box-shadow: 0 1px 2px rgba(0,0,0,.04);
font-size: 13px;
line-height: 1.5;
}
.rudy-trigger-card--highlight {
border-color: color-mix(in srgb, var(--rudy-accent, #d2643a) 45%, var(--canvas-border, rgba(0,0,0,.14)));
background: color-mix(in srgb, var(--rudy-accent, #d2643a) 5%, transparent);
box-shadow: 0 1px 3px color-mix(in srgb, var(--rudy-accent, #d2643a) 12%, transparent);
}
.rudy-trigger-card--success {
border-color: color-mix(in srgb, #16a34a 45%, var(--canvas-border, rgba(0,0,0,.14)));
background: color-mix(in srgb, #16a34a 5%, transparent);
}
/* While the turn that produced this card is still streaming — same convention
.rudy-choice-chips--disabled / .rudy-checklist-item--disabled already use. */
.rudy-trigger-card--disabled { opacity: .55; pointer-events: none; }
.rudy-trigger-card__title {
font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
color: var(--canvas-text-muted, #6b7280);
}
.rudy-trigger-card__name { font-weight: 600; font-size: 15px; margin-top: 2px; }
.rudy-trigger-card__muted { color: var(--canvas-text-muted, #6b7280); margin-top: 3px; }
.rudy-trigger-card__label { font-weight: 600; color: inherit; }
.rudy-trigger-card__summary {
margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
display: flex; flex-direction: column; gap: 4px; color: var(--canvas-text-muted, #6b7280);
}
.rudy-trigger-card__preview {
margin-top: 10px; padding: 8px 10px; border-radius: 8px;
background: color-mix(in srgb, currentColor 5%, transparent);
color: var(--canvas-text-muted, #6b7280);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rudy-trigger-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rudy-trigger-card__chip {
font-size: 12.5px; padding: 6px 12px; min-height: 32px; border-radius: 999px; cursor: pointer;
background: none; color: inherit;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rudy-trigger-card__chip:hover { border-color: var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a); }
.rudy-trigger-card__chip--selected {
background: var(--rudy-accent, #d2643a); color: #fff; border-color: var(--rudy-accent, #d2643a);
}
.rudy-trigger-card__chip--selected:hover { color: #fff; }
.rudy-trigger-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rudy-trigger-card__btn {
font-size: 12.5px; font-weight: 500; padding: 8px 14px; min-height: 34px; border-radius: 8px; cursor: pointer;
background: none; color: inherit;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.rudy-trigger-card__btn:hover { border-color: var(--rudy-accent, #d2643a); }
.rudy-trigger-card__btn:disabled { opacity: .5; cursor: default; }
.rudy-trigger-card__btn:disabled:hover { border-color: var(--canvas-border, rgba(0,0,0,.14)); }
.rudy-trigger-card__btn--primary {
background: var(--rudy-accent, #d2643a); color: #fff; border-color: var(--rudy-accent, #d2643a);
}
.rudy-trigger-card__btn--primary:hover { opacity: .9; border-color: var(--rudy-accent, #d2643a); }
/* ── SuperConnectorPicker — onboarding-skill candidate picker ──────────────── */
/* A plain rounded card, not the ChatTableFrame data-table chrome (expand icon, thin
scroll-shadowed header) — this is a chat-turn choice card, not a table. */
.rudy-picker__card {
border: 1px solid var(--canvas-border, rgba(0,0,0,.08)); border-radius: 16px;
padding: 16px 18px; margin: 4px 0 6px;
}
.rudy-picker__headline { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-family: "Instrument Serif", serif; }
.rudy-picker__subtitle { margin: 0 0 10px; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-picker__guide-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--rudy-primary, #d4491f); }
.rudy-picker__retry-link { padding: 0; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: var(--canvas-text-muted, #6b7280); }
.rudy-picker__retry-link:hover { color: var(--canvas-text, #111827); }
.rudy-picker__guide-toggle:hover { opacity: 0.85; }
.rudy-picker__guide { margin: 0 0 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 8px; background: var(--paper-deep, rgba(0,0,0,0.03)); }
.rudy-picker__guide > div { display: flex; flex-direction: column; gap: 1px; }
.rudy-picker__guide dt { font-size: 12px; font-weight: 600; color: var(--canvas-text, #111827); }
.rudy-picker__guide dd { margin: 0; font-size: 12px; line-height: 1.45; color: var(--canvas-text-muted, #6b7280); }
.rudy-picker__recommendation { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--rudy-accent, #d2643a); }
.rudy-picker__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rudy-picker__row { border-radius: 10px; transition: background-color .12s ease; }
.rudy-picker__row--selected { background: var(--rudy-accent-soft, rgba(210,100,58,.1)); }
.rudy-picker__label {
display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
}
.rudy-picker__label input[type="checkbox"] { accent-color: var(--rudy-accent, #d2643a); width: 15px; height: 15px; }
.rudy-picker__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rudy-picker__name { font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.rudy-picker__meta { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-picker__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rudy-picker__category {
font-size: 11.5px; color: var(--canvas-text-muted, #6b7280); white-space: nowrap;
}
/* Bare LinkedIn brand mark inline with the name — no boxed chip, no border; the
glyph itself is the affordance (matches the workbench connector tables). */
.rudy-picker__linkedin {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; line-height: 0; opacity: 0.85;
}
.rudy-picker__linkedin:hover { opacity: 1; }
.rudy-picker__add { display: flex; gap: 8px; margin-bottom: 12px; }
.rudy-picker__add-category {
font-size: 12.5px; padding: 6px 8px; border-radius: 8px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: none; color: inherit;
}
.rudy-picker__add input {
flex: 1; font-size: 13px; padding: 6px 10px; border-radius: 8px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: none; color: inherit;
}
.rudy-picker__add button {
font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
background: none; color: inherit; border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-picker__add button:disabled { opacity: .5; cursor: not-allowed; }
.rudy-picker__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-picker__count { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-picker__footer-actions { display: flex; align-items: center; gap: 8px; }
.rudy-picker__add-toggle {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
background: none; color: inherit; border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-picker__add-toggle:hover { border-color: var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a); }
.rudy-picker__add-toggle:disabled { opacity: .5; cursor: not-allowed; }
/* Persistent "added so far" chip - the solo picker's own record of who's been added,
shown above search/filter so it survives a filtered/emptied list (see SoloConnectorPicker). */
.rudy-picker__added-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; padding: 3px 10px; border-radius: 999px;
background: var(--rudy-accent-soft, rgba(210,100,58,.12)); color: var(--rudy-accent, #d2643a);
}
/* Checked but not yet committed (Continue/Add all hasn't fired) - plain, no icon, so it
doesn't read as "done" or "in progress". */
.rudy-picker__added-chip--selected {
background: var(--canvas-bg-hover, rgba(0,0,0,.05)); color: var(--canvas-text-muted, #6b7280);
}
/* Mid in-flight bulk add - muted, same tone as --selected, spinner icon does the "in
progress" signaling. */
.rudy-picker__added-chip--pending {
background: var(--canvas-bg-hover, rgba(0,0,0,.05)); color: var(--canvas-text-muted, #6b7280);
}
.rudy-picker__confirm {
font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
background: var(--rudy-accent, #d2643a); color: #fff; border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-picker__confirm:disabled { opacity: .4; cursor: not-allowed; }
.rudy-picker__skip {
font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
background: none; color: var(--canvas-text-muted, #6b7280); border: 0;
}
.rudy-picker__skip:hover { color: var(--canvas-text, #111827); }
.rudy-picker__skipped { color: var(--canvas-text-muted, #6b7280); font-size: 13px; }
/* ── SuperConnectorPicker post-submit receipt ("BATCH 1 / Working with these") ── */
.rudy-picker__batch { background: var(--rudy-accent-soft, rgba(210,100,58,.06)); }
.rudy-picker__batch-caption {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--canvas-text-muted, #6b7280); margin-bottom: 4px;
}
.rudy-picker__batch-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.rudy-picker__batch-pill {
display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
padding: 5px 12px; border-radius: 999px; color: var(--rudy-accent, #d2643a);
border: 1px solid var(--rudy-accent, #d2643a); background: #fff;
}
/* ── InvestorAdd — onboarding "am I missing any investors?" search + add ────── */
.rudy-investor__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rudy-investor__chip {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
padding: 4px 10px; border-radius: 999px; color: var(--rudy-accent, #d2643a);
border: 1px solid var(--rudy-accent, #d2643a); background: var(--rudy-accent-soft, rgba(210,100,58,.1));
}
.rudy-investor__chip button {
border: none; background: none; cursor: pointer; color: inherit;
font-size: 14px; line-height: 1; padding: 0; opacity: .7;
}
.rudy-investor__chip button:hover { opacity: 1; }
.rudy-investor__chip button:disabled { opacity: .4; cursor: not-allowed; }
.rudy-investor__search { position: relative; margin-bottom: 12px; }
.rudy-investor__search input {
width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 12px; border-radius: 8px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: none; color: inherit;
}
.rudy-investor__search input:focus { outline: none; border-color: var(--rudy-accent, #d2643a); }
.rudy-investor__menu {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
overflow: hidden; border-radius: 8px; background: var(--canvas-surface, #fff);
border: 1px solid var(--canvas-border, rgba(0,0,0,.12)); box-shadow: 0 10px 30px -12px rgba(0,0,0,.3);
}
.rudy-investor__menu button {
display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left;
padding: 8px 12px; font-size: 12.5px; border: none; background: none; cursor: pointer; color: inherit;
}
.rudy-investor__menu button:hover { background: var(--rudy-accent-soft, rgba(210,100,58,.1)); }
.rudy-investor__menu-text { display: flex; flex-direction: column; min-width: 0; }
.rudy-investor__menu-name { font-weight: 500; }
.rudy-investor__menu-meta {
font-size: 10.5px; color: var(--canvas-text-muted, #6b7280);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.rudy-investor__menu-kind {
margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
color: var(--canvas-text-muted, #6b7280);
}
.rudy-investor__menu-add { border-top: 1px solid var(--canvas-border, rgba(0,0,0,.1)); color: var(--rudy-accent, #d2643a); }
.rudy-investor__menu-empty {
display: block; padding: 8px 12px; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280);
}
/* ── Connector-run 5-step header (SuperConnectorPicker, design's ActivationRun) ── */
.rudy-runsteps {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-runsteps__eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--rudy-accent, #d2643a);
}
.rudy-runsteps__current { font-size: 13px; font-weight: 500; }
.rudy-runsteps__dots { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.rudy-runsteps__dot { height: 6px; width: 16px; border-radius: 999px; background: var(--canvas-border, rgba(0,0,0,.15)); }
.rudy-runsteps__dot--done { background: var(--rudy-accent, rgba(210,100,58,.5)); opacity: .5; }
.rudy-runsteps__dot--active { width: 24px; background: var(--rudy-accent, #d2643a); }
.rudy-runsteps__count { margin-left: 4px; font-size: 11px; color: var(--canvas-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
/* ── FindingsProse — shortlist paths grouped by connector (onboarding inline) ── */
.rudy-findings { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 6px; }
.rudy-findings__footer {
display: flex; align-items: center; gap: 12px;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.08));
}
.rudy-findings__included { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-findings__group { display: flex; flex-direction: column; gap: 6px; }
.rudy-findings__connector {
display: flex; align-items: center; gap: 6px; margin: 0;
font-size: 13.5px; font-weight: 700; color: var(--canvas-text, inherit);
}
.rudy-findings__list {
list-style: none; margin: 0; padding: 0 0 0 14px;
display: flex; flex-direction: column; gap: 8px;
border-left: 1px solid var(--canvas-border, rgba(0,0,0,.1));
}
.rudy-findings__row { display: flex; gap: 8px; align-items: flex-start; }
.rudy-findings__row--off { opacity: .5; }
.rudy-findings__check {
flex-shrink: 0; margin-top: 1px; background: none; border: none; padding: 0; cursor: pointer;
}
.rudy-findings__line { margin: 0; font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rudy-findings__name { font-weight: 600; }
.rudy-findings__meta { color: var(--canvas-text-muted, #6b7280); }
.rudy-findings__row .paths-card__summary { padding-left: 0 !important; margin: 2px 0 0; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
/* ── SetupChecklistCard — design's inline "Make me accurate" 3-row accordion ──── */
.rudy-setup__card {
border: 1px solid var(--canvas-border, rgba(0,0,0,.08)); border-radius: 16px;
padding: 16px 18px; margin: 4px 0 6px;
}
.rudy-setup__eyebrow {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--canvas-text-muted, #6b7280);
}
.rudy-setup__title { margin: 4px 0 0; font-family: "Instrument Serif", serif; font-size: 20px; line-height: 1.25; }
.rudy-setup__sub { margin: 4px 0 12px; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-setup__rows { display: flex; flex-direction: column; gap: 8px; }
.rudy-setup__row { border: 1px solid var(--canvas-border, rgba(0,0,0,.1)); border-radius: 12px; overflow: hidden; }
.rudy-setup__row--connected { border-color: var(--rudy-accent, rgba(210,100,58,.4)); background: var(--rudy-accent-soft, rgba(210,100,58,.03)); }
.rudy-setup__row-head {
display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; text-align: left;
background: none; border: none; cursor: pointer; color: inherit;
}
.rudy-setup__row-head:disabled { cursor: default; }
.rudy-setup__row-icon {
display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
background: var(--canvas-border, rgba(0,0,0,.08)); color: var(--canvas-text-muted, #6b7280);
}
.rudy-setup__row-icon--connected { background: var(--rudy-accent, #d2643a); color: #fff; }
.rudy-setup__row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rudy-setup__row-label { font-size: 13px; font-weight: 500; line-height: 1.3; }
.rudy-setup__row-sub { font-size: 11.5px; color: var(--canvas-text-muted, #6b7280); line-height: 1.35; }
.rudy-setup__row-badge { margin-left: auto; flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--rudy-accent, #d2643a); }
.rudy-setup__row-body { padding: 0 12px 12px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07)); }
.rudy-setup__stack { display: flex; flex-direction: column; gap: 12px; }
.rudy-setup__footer {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-setup__count { font-size: 11.5px; color: var(--canvas-text-muted, #6b7280); min-width: 0; }
.rudy-setup__footer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rudy-setup__confirm {
font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
background: var(--rudy-accent, #d2643a); color: #fff; border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-setup__confirm:disabled { opacity: .5; cursor: not-allowed; }
/* ── ResearchBillboard — case-study deck while a connector read runs ─────────── */
.rudy-billboard { margin: 4px 0 6px; }
/* Deck embedded inside the live SC-activation card — the card owns the chrome. */
.rudy-billboard--embedded { margin: 0; }
.rudy-billboard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.rudy-billboard__eyebrow {
display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--rudy-accent, #d2643a);
}
.rudy-billboard__pulse {
width: 6px; height: 6px; border-radius: 999px; background: var(--rudy-accent, #d2643a);
animation: rudy-billboard-pulse 1.6s ease-in-out infinite;
}
@keyframes rudy-billboard-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .rudy-billboard__pulse { animation: none; } }
.rudy-billboard__reading { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-billboard__card {
display: grid; grid-template-columns: minmax(0,1fr) 12rem; gap: 16px;
border: 1px solid var(--rudy-accent, rgba(210,100,58,.25)); border-radius: 16px;
padding: 20px; background: var(--rudy-accent-soft, rgba(210,100,58,.05));
}
@media (max-width: 640px) { .rudy-billboard__card { grid-template-columns: 1fr; } }
.rudy-billboard__card-eyebrow {
margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--rudy-accent, #d2643a);
}
.rudy-billboard__card-headline { margin: 8px 0 0; font-family: "Instrument Serif", serif; font-size: 24px; line-height: 1.2; }
.rudy-billboard__card-body { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: inherit; }
.rudy-billboard__play {
margin-top: 16px; padding: 12px; border-radius: 12px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.08)); background: var(--canvas-surface, #fff);
}
.rudy-billboard__play-caption {
display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--canvas-text-muted, #6b7280); margin-bottom: 6px;
}
.rudy-billboard__play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rudy-billboard__play-icon { color: var(--rudy-accent, #d2643a); flex-shrink: 0; }
.rudy-billboard__play-name { font-size: 13px; font-weight: 600; }
.rudy-billboard__play-blurb { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-billboard__stat {
display: flex; flex-direction: column; justify-content: center; gap: 6px;
padding: 16px; border-radius: 12px; background: var(--rudy-accent-soft, rgba(210,100,58,.08));
}
.rudy-billboard__stat-num { font-family: "Instrument Serif", serif; font-size: 44px; line-height: 1; color: var(--rudy-accent, #d2643a); }
.rudy-billboard__stat-label { font-size: 12px; line-height: 1.3; color: var(--canvas-text-muted, #6b7280); }
.rudy-billboard__nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rudy-billboard__nav > button {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: var(--canvas-surface, #fff); color: var(--canvas-text-muted, #6b7280);
}
.rudy-billboard__nav > button:hover { color: inherit; border-color: var(--rudy-accent, #d2643a); }
.rudy-billboard__dots { display: flex; flex: 1; align-items: center; gap: 6px; }
.rudy-billboard__dot { height: 6px; width: 12px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: var(--canvas-border, rgba(0,0,0,.15)); transition: all .2s ease; }
.rudy-billboard__dot--active { width: 28px; background: var(--rudy-accent, #d2643a); }
.rudy-billboard__count { font-size: 11px; color: var(--canvas-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
/* ── FounderBooking — small-band close / enterprise verdict ─────────────────── */
.rudy-founder__card {
border: 1px solid var(--rudy-accent, #d2643a); border-radius: 16px;
padding: 18px; margin: 4px 0 6px; background: var(--rudy-accent-soft, rgba(210,100,58,.05));
}
.rudy-founder__head { display: flex; align-items: flex-start; gap: 12px; }
.rudy-founder__icon {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
background: var(--rudy-accent-soft, rgba(210,100,58,.15)); color: var(--rudy-accent, #d2643a);
}
.rudy-founder__title { margin: 0; font-family: "Instrument Serif", serif; font-size: 20px; line-height: 1.25; }
.rudy-founder__body { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: inherit; }
.rudy-founder__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
background: var(--rudy-accent, #d2643a); color: #fff; text-decoration: none;
}
.rudy-founder__cta:hover { opacity: .95; }
.rudy-founder__handy { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rudy-accent, rgba(210,100,58,.2)); }
.rudy-founder__handy-caption {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--canvas-text-muted, #6b7280); margin-bottom: 8px;
}
.rudy-founder__handy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rudy-founder__handy-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.rudy-founder__handy-check { color: var(--rudy-accent, #d2643a); flex-shrink: 0; margin-top: 2px; }
/* ── PlaysStudioPicker — conversational per-play setup (onboarding "plays" item) ── */
.rudy-plays__active { margin: 0 0 12px; }
.rudy-plays__active-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rudy-plays__active-pill {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
padding: 4px 10px; border-radius: 999px; color: var(--rudy-accent, #d2643a);
border: 1px solid var(--rudy-accent, #d2643a); background: var(--rudy-accent-soft, rgba(210,100,58,.08));
}
.rudy-plays__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rudy-plays__row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--canvas-border, rgba(0,0,0,.08));
}
.rudy-plays__row-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rudy-plays__row-icon { color: var(--canvas-text-muted, #6b7280); flex-shrink: 0; margin-top: 2px; }
.rudy-plays__row-name { display: block; font-size: 13px; font-weight: 500; }
.rudy-plays__row-webhook {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe;
}
.rudy-plays__row-desc { display: block; font-size: 11.5px; color: var(--canvas-text-muted, #6b7280); margin-top: 1px; }
.rudy-plays__configure {
flex-shrink: 0; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
background: none; color: var(--rudy-accent, #d2643a); border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-plays__configure:hover { background: var(--rudy-accent-soft, rgba(210,100,58,.1)); }
.rudy-plays__configure:disabled { opacity: .5; cursor: not-allowed; }
.rudy-plays__footer-actions { display: flex; align-items: center; gap: 8px; }
.rudy-plays__skip {
font-size: 12.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
background: none; color: var(--canvas-text-muted, #6b7280); border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-plays__skip:hover { color: inherit; }
.rudy-plays__skip:disabled { opacity: .5; cursor: not-allowed; }
/* ── EstimateBuilder — editable network-size estimate (real per-category counts) ── */
.rudy-estimate__card {
border: 1px solid var(--canvas-border, rgba(0,0,0,.08)); border-radius: 16px;
padding: 16px 18px; margin: 4px 0 6px;
}
.rudy-estimate__card--done { background: var(--rudy-accent-soft, rgba(210,100,58,.06)); }
.rudy-estimate__header {
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
padding-bottom: 12px; border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-estimate__eyebrow {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--canvas-text-muted, #6b7280); margin-bottom: 4px;
}
.rudy-estimate__total { display: flex; align-items: baseline; gap: 8px; }
.rudy-estimate__total-num { font-family: "Instrument Serif", serif; font-size: 34px; line-height: 1; }
.rudy-estimate__total-label { font-size: 13px; color: var(--canvas-text-muted, #6b7280); }
.rudy-estimate__reset {
display: inline-flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer;
background: none; border: none; color: var(--canvas-text-muted, #6b7280);
}
.rudy-estimate__reset:hover { color: inherit; }
.rudy-estimate__rows { display: flex; flex-direction: column; }
.rudy-estimate__row { padding: 10px 0; border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.05)); }
.rudy-estimate__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rudy-estimate__row-label { font-size: 13.5px; font-weight: 500; }
.rudy-estimate__row-right { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.rudy-estimate__row-count { font-family: "Instrument Serif", serif; font-size: 18px; }
.rudy-estimate__row-count--changed { color: var(--rudy-accent, #d2643a); }
.rudy-estimate__adjust {
font-size: 11px; cursor: pointer; background: none; border: none;
color: var(--canvas-text-muted, #6b7280); text-decoration: underline; text-underline-offset: 2px;
}
.rudy-estimate__adjust:hover { color: inherit; }
.rudy-estimate__adjust:disabled { opacity: .5; cursor: not-allowed; }
.rudy-estimate__editor {
margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
padding: 10px; border-radius: 10px; background: var(--rudy-accent-soft, rgba(210,100,58,.05));
}
.rudy-estimate__editor textarea {
width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border-radius: 8px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: var(--canvas-surface, #fff);
color: inherit; resize: vertical;
}
.rudy-estimate__editor textarea:focus { outline: none; border-color: var(--rudy-accent, #d2643a); }
.rudy-estimate__stepper { display: inline-flex; align-items: center; gap: 4px; }
.rudy-estimate__stepper button {
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: none; color: var(--canvas-text-muted, #6b7280);
}
.rudy-estimate__stepper button:hover { color: inherit; border-color: var(--rudy-accent, #d2643a); }
.rudy-estimate__stepper button:disabled { opacity: .5; cursor: not-allowed; }
.rudy-estimate__stepper input {
width: 64px; height: 26px; text-align: center; font-size: 12px; border-radius: 6px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14)); background: var(--canvas-surface, #fff); color: inherit;
-moz-appearance: textfield;
}
.rudy-estimate__stepper input::-webkit-inner-spin-button,
.rudy-estimate__stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rudy-estimate__footer {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-estimate__hint { font-size: 11.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-estimate__confirm {
font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; flex-shrink: 0;
background: var(--rudy-accent, #d2643a); color: #fff; border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-estimate__confirm:disabled { opacity: .4; cursor: not-allowed; }
/* ── GraphBuildProgress — "reading around them now" state ──────────────────── */
.rudy-graph-build__names {
list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.rudy-graph-build__names li {
font-size: 12.5px; padding: 3px 10px; border-radius: 999px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.1));
}
.rudy-graph-build__note { margin: 0; font-size: 13px; color: var(--canvas-text-muted, #6b7280); }
/* ── ScActivationLiveProgress — real live counters while "Build their graphs" runs ──
Card chrome now lives in the component itself (shadcn tokens, same shell as
ResearchStepsTimeline) — only the see-all/meanwhile leaf controls stay as raw CSS. */
.rudy-sc-progress__reveal {
margin-top: 10px; padding: 8px 10px; border-radius: 10px;
border: 1px solid var(--rudy-accent, #d2643a);
background: color-mix(in oklch, var(--rudy-accent, #d2643a) 8%, var(--rudy-card, #fff));
}
.rudy-sc-progress__reveal-count { margin: 0; font-size: 12px; font-weight: 600; color: var(--foreground, #1a1a1a); }
.rudy-sc-progress__reveal-name { margin: 3px 0 0; font-size: 12px; }
.rudy-sc-progress__see-all {
display: block; margin-top: 6px; margin-left: 0; border: none; background: none; padding: 0;
font-size: 12.5px; font-weight: 600; color: var(--rudy-accent, #d2643a); cursor: pointer;
}
.rudy-sc-progress__see-all:hover { opacity: .8; }
.rudy-sc-progress__see-all:disabled { opacity: .5; cursor: default; }
.rudy-sc-progress__meanwhile {
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline, #e5e7eb);
display: flex; flex-direction: column; gap: 6px;
}
.rudy-sc-progress__meanwhile p { margin: 0; font-size: 12px; }
.rudy-sc-progress__meanwhile-cta {
align-self: flex-start; border: none; background: none; padding: 0;
font-size: 13px; font-weight: 500; color: var(--rudy-accent, #d2643a); cursor: pointer;
}
.rudy-sc-progress__meanwhile-cta:hover { opacity: .8; }
.rudy-onboarding-finished__link {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 999px;
background: var(--rudy-accent, #d2643a); color: #fff; text-decoration: none;
}
.rudy-onboarding-finished__link:hover { opacity: .92; }
.rudy-onboarding-finished__link-icon { width: 15px; height: 15px; flex-shrink: 0; }
/* ── OnboardingFinishedCard — full success mock (mascot, doing-list, starters) ──
Deliberately NOT a bordered/shadowed panel — this flows as plain chat content
like every other assistant turn, not a boxed widget sitting inside the chat.
Presence comes from a soft borderless glow behind the hero + a color-coordinated
badge/tint system carried through the doing-list and starter tiles, not from a box. */
.rudy-onboarding-finished-card__hero {
position: relative; display: flex; align-items: center; gap: 24px;
padding: 8px 0 24px; flex-wrap: wrap;
}
.rudy-onboarding-finished-card__mascot {
position: relative; z-index: 1;
width: 100%; max-width: 270px; height: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0;
}
.rudy-onboarding-finished-card__hero-copy { position: relative; z-index: 1; flex: 1; min-width: 260px; }
.rudy-onboarding-finished-card__headline {
display: flex; align-items: center; gap: 10px;
margin: 0; font-size: 30px; font-weight: 600; color: var(--canvas-text, #111827); line-height: 1.15;
}
.rudy-onboarding-finished-card__headline-icon { width: 22px; height: 22px; color: var(--rudy-accent, #d2643a); flex-shrink: 0; }
.rudy-onboarding-finished-card__subtext {
margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--canvas-text-muted, #6b7280);
max-width: 44ch;
}
.rudy-onboarding-finished-card__section { padding: 22px 0 0; }
.rudy-onboarding-finished-card__section-label {
display: block; margin-bottom: 16px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; color: var(--canvas-text-muted, #6b7280);
}
/* flex-wrap, not a grid — a grid forces N equal-width columns that shrink text into
a cramped single line once the chat column is narrower than N * min-width. Each
item keeps its own natural width here and wraps to a new line on its own terms. */
.rudy-onboarding-finished-card__doing-grid {
display: flex; flex-wrap: wrap; gap: 22px 20px; justify-content: space-between; border: 1px solid var(--canvas-border, rgba(0,0,0,.05)); background: var(--rudy-accent-soft, rgba(210,100,58,.06)); padding: 16px 12px; border-radius: 12px;
}
.rudy-onboarding-finished-card__doing-item {
position: relative;
display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.4;
color: var(--canvas-text, #111827); width: 130px; flex: 0 0 auto;
}
.rudy-onboarding-finished-card__doing-icon { width: 16px; height: 16px; }
/* Vertical separators between items — only when width guarantees all 5 sit on
one row (flex-wrap below this makes a stray line appear at each new row's
first item, so it's gated off there instead of guessed at). */
@media (min-width: 900px) {
.rudy-onboarding-finished-card__doing-item:not(:first-child)::before {
content: ""; position: absolute; left: -15px; top: 4px; bottom: 4px;
width: 1px; background: var(--canvas-border, rgba(0,0,0,.1));
}
}
.rudy-onboarding-finished-card__starters {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (max-width: 480px) {
.rudy-onboarding-finished-card__starters { grid-template-columns: 1fr; }
}
/* Row action buttons (icon → content → arrow), not filled color cards — same
neutral-border/no-fill language as .rudy-choice-chip elsewhere in this chat.
Only the small icon badge carries color; the row itself stays flat until hovered. */
.rudy-onboarding-finished-card__starter {
display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.08)); text-decoration: none;
background: #fff2; transition: border-color .15s ease, background .15s ease;
}
.rudy-onboarding-finished-card__starter:hover {
border-color: var(--rudy-accent, #d2643a50); background: var(--canvas-hover, #fff8);
}
.rudy-onboarding-finished-card__starter-body {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.rudy-onboarding-finished-card__starter-icon { width: 18px; height: 18px; }
.rudy-onboarding-finished-card__starter-title { font-size: 13.5px; font-weight: 600; color: var(--canvas-text, #111827); }
.rudy-onboarding-finished-card__starter-desc { font-size: 11.5px; line-height: 1.4; color: var(--canvas-text-muted, #6b7280); }
.rudy-onboarding-finished-card__starter-arrow {
width: 16px; height: 16px; flex-shrink: 0; color: var(--canvas-text-muted, #6b7280);
transition: transform .15s ease, color .15s ease;
}
.rudy-onboarding-finished-card__starter:hover .rudy-onboarding-finished-card__starter-arrow {
color: var(--rudy-accent, #d2643a); transform: translateX(2px);
}
/* Colored circle behind each icon — matches the mock's soft pastel badges instead
of a bare line icon floating with no visual weight. */
.rudy-onboarding-finished-card__badge {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
}
.rudy-onboarding-finished-card__badge--blue { color: #2563eb; }
.rudy-onboarding-finished-card__badge--orange { color: #ea580c; }
.rudy-onboarding-finished-card__badge--pink { color: #db2777; }
.rudy-onboarding-finished-card__badge--green { color: #16a34a; }
.rudy-onboarding-finished-card__badge--sky { color: #0284c7; }
.rudy-onboarding-finished-card__badge--amber { color: #d97706; }
.rudy-onboarding-finished-card__badge--purple { color: #9333ea; }
.rudy-onboarding-finished-card__footer {
display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap;
padding: 18px 0 0;
}
.rudy-onboarding-finished-card__footer-text {
display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--canvas-text, #111827);
}
.rudy-onboarding-finished-card__footer-icon { width: 16px; height: 16px; color: var(--rudy-accent, #d2643a); flex-shrink: 0; fill: currentColor; }
.rudy-onboarding-finished-card__footer-btn {
flex-shrink: 0; font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 999px;
border: 1px solid var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a);
text-decoration: none; background: transparent;
}
.rudy-onboarding-finished-card__footer-btn:hover { background: var(--rudy-accent, #d2643a); color: #fff; }
/* Narrow chat column (mobile) — shrink hero art/type, let doing-items span full
width instead of clumping 2-per-row with an uneven last row, stack the footer. */
@media (max-width: 480px) {
.rudy-onboarding-finished-card__hero { gap: 16px; padding: 4px 0 20px; }
.rudy-onboarding-finished-card__mascot { max-width: 140px; }
.rudy-onboarding-finished-card__hero-copy { min-width: 100%; }
.rudy-onboarding-finished-card__headline { font-size: 22px; }
.rudy-onboarding-finished-card__doing-grid { justify-content: flex-start; padding: 14px; gap: 16px 14px; }
.rudy-onboarding-finished-card__doing-item { width: calc(50% - 7px); }
.rudy-onboarding-finished-card__footer { flex-direction: column; align-items: stretch; }
.rudy-onboarding-finished-card__footer-btn { text-align: center; }
}
/* ── OnboardingChecklist — "finish setup first" branch ─────────────────────── */
/* Once a chat-embedded item widget is no longer the latest turn, its buttons/
dropzones/checkboxes go inert — same convention .rudy-choice-chips--disabled
already uses for ChoiceChips. */
.rudy-checklist-item--disabled { opacity: .55; pointer-events: none; }
.rudy-checklist__subtitle { margin: 0 0 10px; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-checklist__list { list-style: none; margin: 0 0 12px; padding: 0; }
.rudy-checklist__row { border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.06)); }
.rudy-checklist__row:last-child { border-bottom: none; }
.rudy-checklist__row-header {
display: flex; align-items: flex-start; gap: 10px; width: 100%;
padding: 10px 2px; cursor: pointer; background: none; border: none; text-align: left; color: inherit;
border-radius: 8px; transition: background-color .12s ease;
}
.rudy-checklist__row-header:hover { background: var(--rudy-accent-soft, rgba(210,100,58,.06)); }
.rudy-checklist__required { font-weight: 500; font-size: 11px; color: var(--rudy-accent, #d2643a); text-transform: none; }
.rudy-checklist__skip-badge {
margin-left: 6px; font-weight: 600; font-size: 10px; text-transform: uppercase;
letter-spacing: .03em; padding: 1px 7px; border-radius: 999px;
background: var(--canvas-border, rgba(0,0,0,.08)); color: var(--canvas-text-muted, #6b7280);
vertical-align: middle;
}
.rudy-checklist__status {
width: 18px; height: 18px; border-radius: 999px; margin-top: 1px; flex: none;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--canvas-border, rgba(0,0,0,.25)); background: none;
color: #fff; transition: background-color .15s ease, border-color .15s ease;
}
.rudy-checklist__status--done {
background: var(--rudy-accent, #d2643a); border-color: var(--rudy-accent, #d2643a);
}
.rudy-checklist__status-check { width: 11px; height: 11px; }
.rudy-checklist__row-text { display: flex; flex-direction: column; min-width: 0; }
.rudy-checklist__row-label { font-weight: 600; font-size: 13.5px; }
.rudy-checklist__row-label--done { text-decoration: line-through; opacity: .55; }
.rudy-checklist__row-sub { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-checklist__row-body { padding: 4px 2px 16px 18px; }
.rudy-checklist__body-stack { display: flex; flex-direction: column; gap: 10px; }
.rudy-checklist__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--canvas-border, rgba(0,0,0,.08)); }
.rudy-checklist__tab {
padding: 6px 4px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent;
background: none; font-size: 12.5px; font-weight: 600; color: var(--canvas-text-muted, #6b7280);
cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.rudy-checklist__tab:hover { color: var(--ink); }
.rudy-checklist__tab--active { color: var(--rudy-accent, #d2643a); border-bottom-color: var(--rudy-accent, #d2643a); }
.rudy-checklist__done-btn, .rudy-checklist__placeholder button {
align-self: flex-start; font-size: 12.5px; padding: 5px 16px; border-radius: 999px; cursor: pointer;
background: none; color: inherit; border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-checklist__placeholder p { margin: 0 0 8px; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-checklist__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-checklist__count { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-checklist__finish-btn {
font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
background: var(--rudy-accent, #d2643a); color: #fff; border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-checklist__finish-btn:disabled { opacity: .4; cursor: not-allowed; }
.rudy-checklist__body-actions { display: flex; gap: 8px; }
.rudy-checklist__done-btn--primary {
background: var(--rudy-accent, #d2643a); color: #fff; border-color: var(--rudy-accent, #d2643a);
}
.rudy-ingest__zone {
display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px;
border: 1px dashed var(--canvas-border, rgba(0,0,0,.18));
}
.rudy-ingest__zone-tag {
align-self: flex-start; font-size: 8px; font-weight: 600; text-transform: uppercase;
letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
border: 1px solid var(--rudy-accent, #d2643a); color: var(--rudy-accent, #d2643a);
}
.rudy-ingest__zone-hint { margin: 0; font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-ingest__zone-empty { margin: 0; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-ingest__divider {
display: flex; align-items: center; gap: 10px; margin: 4px 0;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--canvas-text-muted, #6b7280);
}
.rudy-ingest__divider::before, .rudy-ingest__divider::after {
content: ""; flex: 1; height: 1px; background: var(--canvas-border, rgba(0,0,0,.12));
}
.rudy-plays-list__hint { margin: 0; font-size: 12.5px; color: var(--canvas-text-muted, #6b7280); }
.rudy-plays-list__rows { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rudy-plays-list__row {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-plays-list__row-label { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.rudy-plays-list__row-label input[type="checkbox"] { margin-top: 3px; accent-color: var(--rudy-accent, #d2643a); }
.rudy-plays-list__row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rudy-plays-list__row-title { font-size: 13.5px; font-weight: 600; }
.rudy-plays-list__row-desc {
font-size: 12px; color: var(--canvas-text-muted, #6b7280);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.rudy-plays-list__tag {
flex-shrink: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--canvas-text-muted, #6b7280); padding-top: 2px;
}
.rudy-plays-list__footer {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--canvas-border, rgba(0,0,0,.07));
}
.rudy-plays-list__count { font-size: 12px; color: var(--canvas-text-muted, #6b7280); }
.rudy-plays-list__save-btn {
font-size: 13px; padding: 5px 16px; border-radius: 999px; cursor: pointer;
background: var(--rudy-accent, #d2643a); color: #fff; border: 1px solid var(--rudy-accent, #d2643a);
}
.rudy-plays-list__save-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ─── Launcher feedback icon (top-right on pages with their own composer) ─────
A brief nudge on arrival so the icon gets noticed: the megaphone wiggles and a
soft accent ring pulses out, three times, then it settles for good. Never loops,
since it sits beside the composer for the whole visit. */
.launcher-feedback-cta::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 45%, transparent);
animation: launcher-feedback-ring 1.6s ease-out 0.8s 3;
pointer-events: none;
}
.launcher-feedback-cta__icon {
transform-origin: 30% 70%;
animation: launcher-feedback-wiggle 1.6s ease-in-out 0.8s 3;
}
@keyframes launcher-feedback-ring {
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 45%, transparent); }
70%, 100% { box-shadow: 0 0 0 10px color-mix(in oklch, var(--accent) 0%, transparent); }
}
@keyframes launcher-feedback-wiggle {
0%, 40%, 100% { transform: rotate(0deg); }
8% { transform: rotate(-14deg); }
16% { transform: rotate(12deg); }
24% { transform: rotate(-8deg); }
32% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
.launcher-feedback-cta::after,
.launcher-feedback-cta__icon { animation: none; }
}
/* Rudy Rules: RuleProposals (agent/RuleProposals.tsx). Built on .rudy-trigger-card. */
.rudy-rules-card__scope { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.rudy-rules-card__rows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rudy-rules-card__row {
padding: 10px 12px; border-radius: 8px;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
display: flex; flex-direction: column; gap: 6px;
}
.rudy-rules-card__row--muted { color: var(--canvas-text-muted, #6b7280); border-style: dashed; }
.rudy-rules-card__head { display: flex; align-items: flex-start; gap: 10px; }
.rudy-rules-card__check { margin-top: 3px; accent-color: var(--rudy-accent, #d2643a); }
.rudy-rules-card__what { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rudy-rules-card__what > span:first-child { font-weight: 600; }
.rudy-rules-card__result { font-size: 12px; font-weight: 500; white-space: nowrap; }
.rudy-rules-card__result--saved { color: var(--status-good, #15803d); }
.rudy-rules-card__result--forbidden,
.rudy-rules-card__result--failed { color: var(--status-error, #dc2626); }
.rudy-rules-card__ends { display: flex; align-items: center; gap: 8px; padding-left: 24px; }
.rudy-rules-card__select {
font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: none; color: inherit;
border: 1px solid var(--canvas-border, rgba(0,0,0,.14));
}
.rudy-rules-card__notyet { margin: 2px 0 2px 18px; padding: 0; list-style: disc; }
.rudy-rules-card__error { color: var(--status-error, #dc2626); font-size: 12.5px; align-self: center; }
.rudy-rules-card__done { margin-top: 12px; }
/* Rudy launcher side sheet (RudyFloatingLauncher): slides in from the right edge. */
.rudy-launcher-sheet { animation: rudy-launcher-sheet-in 200ms var(--ease-std) both; }
@keyframes rudy-launcher-sheet-in {
from { transform: translateX(24px); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rudy-launcher-sheet { animation: none; } }