: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);
/* ── 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: "Super 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;
}
.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-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 + starters ──────────────────────────────────────────────────
Starters are chips, not cards. Three tall bordered boxes sat directly under a
40px composer pill and outweighed it — and their descriptions restated titles
that already say the whole thing ("Find warm paths"). The description survives
as the tooltip, so nothing is lost for someone who hovers. Same chip shape as
the skills row beneath, so the page has one language below the input. */
.home-starters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
/* The starters are the end of the hero block; the user's own content below
needs a clear break from it, not the same 8px rhythm. */
margin-bottom: 10px;
}
.home-starter {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 6px 14px 6px 6px;
border-radius: var(--radius-full);
background: var(--surface-1);
border: 1px solid var(--hairline);
font-size: 13px;
font-weight: 500;
color: var(--ink);
text-align: left;
white-space: nowrap;
cursor: pointer;
transition:
background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std);
}
/* 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-starter: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-starter:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}
.home-starter__icon {
width: 26px;
height: 26px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--accent-subtle);
color: var(--accent);
transition: background var(--dur-fast) var(--ease-std);
}
/* Deepens rather than inverts. The old rule flipped the tile to solid accent
with a white glyph, which was the loudest state on the page. */
.home-starter:hover .home-starter__icon {
background: color-mix(in oklch, var(--accent) 20%, white);
}
.home-starter__icon svg { width: 14px; height: 14px; }
@media (max-width: 520px) {
.home-starter { font-size: 12.5px; }
}
/* 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; }