:root {
/* Default = dark. JS can set [data-theme="light"|"dark"]. */
color-scheme: dark;
/* Typography */
--font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-sans-emoji: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
/* Radii / spacing (incrementally adopted) */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
/* Layout widths */
--shell-width: min(980px, 96vw);
--shell-width-narrow: min(720px, 92vw);
--chat-width: var(--shell-width);
--cat-peek-size: 110px;
/* Z-index scale (single source of truth) */
--z-network-panel: 800;
/* Completion modal should sit above the network panel */
--z-modal: 9500;
--z-hero-select: 9998;
--z-loading: 9999;
--z-score-lab: 10000;
--z-floating-job: 99999;
--z-health-widget: 9999;
--z-tooltip: 999999;
/* Core palette */
--bg0: #070914;
--bg1: #0b1025;
--card: rgba(14, 18, 40, 0.62);
--stroke: rgba(255, 255, 255, 0.10);
--stroke2: rgba(255, 255, 255, 0.14);
--text: rgba(255, 255, 255, 0.92);
--muted: rgba(255, 255, 255, 0.62);
--muted2: rgba(255, 255, 255, 0.48);
--gold: #fbbf24;
--cyan: #38bdf8;
--pink: #f472b6;
--blue: #3b82f6;
--success: #10b981;
--warn: #f59e0b;
--accent: #8b5cf6;
--accent2: #22c55e;
--danger: #ef4444;
--shadow: 0 18px 40px rgba(0, 0, 0, 0.275);
/* Brand + focus */
--brand: var(--gold);
--focus: rgba(139, 92, 246, 0.22);
/* Page background (template-driven) */
--app-bg: radial-gradient(900px 500px at 25% 10%, rgba(139, 92, 246, 0.22), transparent 55%),
radial-gradient(900px 500px at 75% 15%, rgba(34, 197, 94, 0.16), transparent 55%),
linear-gradient(180deg, var(--bg0), var(--bg1));
--dot-grid-rgb: 255, 255, 255;
--dot-grid-alpha: 0.08;
--dot-grid-opacity: 0.25;
--theme-brightness-light: 0;
--theme-brightness-dark: 0;
--theme-texture-image-a: none;
--theme-texture-image-b: none;
--theme-texture-alpha-a: 0;
--theme-texture-alpha-b: 0;
--theme-texture-size-a: 220px 220px;
--theme-texture-size-b: 720px 720px;
--theme-texture-blend: soft-light;
/* Home surface (felt template) */
--home-surface-bg: radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.10) 0%, rgba(248,248,248,0.06) 50%, rgba(244,245,246,0.04) 100%),
linear-gradient(180deg, rgba(7,9,20,0.88) 0%, rgba(11,16,37,0.86) 100%);
--home-surface-border: rgba(255, 255, 255, 0.10);
--home-surface-shadow: 0 18px 50px rgba(0, 0, 0, 0.40), 0 1px 6px rgba(0, 0, 0, 0.30);
--felt-type-opacity: 0.16;
--felt-type-title: rgba(255,255,255,0.18);
--felt-type-sub: rgba(255,255,255,0.38);
--felt-weave-opacity: 0.18;
--felt-weave-blend: screen;
--felt-thread-dark-rgb: 0, 0, 0;
--felt-thread-light-rgb: 255, 255, 255;
--felt-thread-a1: 0.030;
--felt-thread-a2: 0.026;
--felt-thread-a3: 0.014;
--felt-thread-a4: 0.012;
--felt-fuzz-opacity: 0.10;
--felt-fuzz-blend: soft-light;
/* UI semantic tokens (used by home + panels) */
--ui-glass-bg: rgba(15, 23, 42, 0.70);
--ui-glass-bg-strong: rgba(15, 23, 42, 0.82);
--ui-glass-border: rgba(99, 102, 241, 0.20);
--ui-glass-border-strong: rgba(99, 102, 241, 0.45);
/* darker, tighter: reduce spread by ~50% */
--ui-glass-shadow: 3px 5px 9px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.10);
--ui-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);
--ui-input-text: #f1f5f9;
--ui-input-placeholder: rgba(148, 163, 184, 0.55);
--ui-chip-bg: rgba(99, 102, 241, 0.06);
--ui-chip-border: rgba(99, 102, 241, 0.15);
--ui-chip-text: #a5b4fc;
--ui-chip-hover-bg: rgba(99, 102, 241, 0.12);
--ui-chip-hover-border: rgba(99, 102, 241, 0.30);
--ui-chip-hover-text: #c7d2fe;
--ui-chip-shadow: 3px 5px 8px rgba(99, 102, 241, 0.10);
--ui-scroll-track: rgba(255, 255, 255, 0.05);
--ui-scroll-thumb: rgba(99, 102, 241, 0.40);
--ui-scroll-thumb-hover: rgba(99, 102, 241, 0.60);
--ui-widget-bg: rgba(15, 15, 20, 0.95);
--ui-widget-bg-hover: rgba(25, 25, 35, 0.95);
--ui-widget-border: rgba(255, 255, 255, 0.08);
--ui-widget-border-hover: rgba(255, 255, 255, 0.15);
--ui-widget-label: rgba(255, 255, 255, 0.60);
--ui-hero-pill-bg: rgba(0, 0, 0, 0.60);
--ui-hero-pill-border: rgba(255, 255, 255, 0.10);
--ui-hero-pill-text: rgba(255, 255, 255, 0.90);
--ui-float-shadow: 3px 5px 8px rgba(0, 0, 0, 0.18);
--ui-avatar-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
--ui-avatar-border: rgba(99, 102, 241, 0.20);
--ui-avatar-placeholder: #6366f1;
--mc-olive-bg: rgba(120, 135, 80, 0.18);
--mc-olive-border: rgba(152, 170, 96, 0.35);
}
:root[data-theme="light"] {
color-scheme: light;
--bg0: #f7f7f8;
--bg1: #f1f2f4;
--card: rgba(255, 255, 255, 0.72);
--stroke: rgba(100, 95, 65, 0.28);
--stroke2: rgba(100, 95, 65, 0.35);
--border: rgba(100, 95, 65, 0.22);
--divider: rgba(100, 95, 65, 0.18);
--text: rgba(12, 18, 34, 0.92);
--muted: rgba(12, 18, 34, 0.66);
--muted2: rgba(12, 18, 34, 0.52);
--shadow: 0 18px 36px rgba(10, 20, 40, 0.05);
--brand: rgba(12, 18, 34, 0.88);
--focus: rgba(12, 18, 34, 0.10);
--app-bg: radial-gradient(900px 520px at 20% 10%, rgba(12, 18, 34, 0.04), transparent 60%),
radial-gradient(900px 520px at 78% 14%, rgba(12, 18, 34, 0.03), transparent 60%),
linear-gradient(180deg, var(--bg0), var(--bg1));
--dot-grid-rgb: 12, 18, 34;
--dot-grid-alpha: 0.10;
--dot-grid-opacity: 0.12;
--theme-texture-blend: multiply;
--home-surface-bg: radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.92) 50%, rgba(244,245,246,0.90) 100%),
linear-gradient(180deg, #fafafa 0%, #f3f4f5 100%);
--home-surface-border: rgba(0, 0, 0, 0.05);
--home-surface-shadow: 0 18px 50px rgba(10, 20, 40, 0.08), 0 1px 6px rgba(10, 20, 40, 0.05);
--felt-type-opacity: 0.20;
--felt-type-title: rgba(12,18,34,0.20);
--felt-type-sub: rgba(12,18,34,0.40);
--felt-weave-opacity: 0.20;
--felt-weave-blend: multiply;
--felt-fuzz-opacity: 0.10;
--felt-fuzz-blend: soft-light;
/* UI semantic tokens */
--ui-glass-bg: rgba(255, 255, 255, 0.78);
--ui-glass-bg-strong: rgba(255, 255, 255, 0.90);
--ui-glass-border: rgba(12, 18, 34, 0.10);
--ui-glass-border-strong: rgba(12, 18, 34, 0.18);
--ui-glass-shadow: 3px 5px 9px rgba(10, 20, 40, 0.14), 0 0 0 1px rgba(10, 20, 40, 0.06);
--ui-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.325);
--ui-input-text: rgba(12, 18, 34, 0.92);
--ui-input-placeholder: rgba(12, 18, 34, 0.45);
--ui-chip-bg: rgba(255, 255, 255, 0.72);
--ui-chip-border: rgba(12, 18, 34, 0.10);
--ui-chip-text: rgba(12, 18, 34, 0.70);
--ui-chip-hover-bg: rgba(255, 255, 255, 0.92);
--ui-chip-hover-border: rgba(12, 18, 34, 0.16);
--ui-chip-hover-text: rgba(12, 18, 34, 0.86);
--ui-chip-shadow: 3px 5px 8px rgba(10, 20, 40, 0.10);
--ui-scroll-track: rgba(12, 18, 34, 0.08);
--ui-scroll-thumb: rgba(12, 18, 34, 0.22);
--ui-scroll-thumb-hover: rgba(12, 18, 34, 0.32);
--ui-widget-bg: rgba(255, 255, 255, 0.92);
--ui-widget-bg-hover: rgba(255, 255, 255, 0.98);
--ui-widget-border: rgba(12, 18, 34, 0.10);
--ui-widget-border-hover: rgba(12, 18, 34, 0.16);
--ui-widget-label: rgba(12, 18, 34, 0.62);
--ui-hero-pill-bg: rgba(255, 255, 255, 0.88);
--ui-hero-pill-border: rgba(12, 18, 34, 0.10);
--ui-hero-pill-text: rgba(12, 18, 34, 0.82);
--ui-float-shadow: 3px 5px 8px rgba(10, 20, 40, 0.14);
--ui-avatar-bg: linear-gradient(180deg, rgba(12, 18, 34, 0.06) 0%, rgba(12, 18, 34, 0.04) 100%);
--ui-avatar-border: rgba(12, 18, 34, 0.12);
--ui-avatar-placeholder: rgba(12, 18, 34, 0.62);
--mc-olive-bg: rgba(140, 155, 92, 0.2);
--mc-olive-border: rgba(116, 130, 70, 0.3);
}
/* ═══════════════════════════════════════════════════════════════════════════
MIDNIGHT THEME - Sleek deep navy with cyan accents (dark mode only)
Toggle: document.documentElement.setAttribute('data-accent', 'midnight')
═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"][data-accent="midnight"] {
/* Core palette - deep navy/slate */
--bg0: #080c14;
--bg1: #0c1018;
--card: rgba(12, 18, 32, 0.75);
--stroke: rgba(56, 189, 248, 0.12);
--stroke2: rgba(56, 189, 248, 0.18);
/* Text - crisp cool whites */
--text: rgba(235, 245, 255, 0.94);
--muted: rgba(140, 175, 210, 0.75);
--muted2: rgba(140, 175, 210, 0.52);
--muted3: rgba(140, 175, 210, 0.35);
/* Accent - electric cyan */
--accent: #22d3ee;
--accent2: #06b6d4;
--gold: #22d3ee;
--cyan: #22d3ee;
--blue: #38bdf8;
--pink: #22d3ee;
--success: #34d399;
--warn: #fbbf24;
--danger: #f87171;
/* Brand + focus */
--brand: #22d3ee;
--focus: rgba(34, 211, 238, 0.22);
/* Background gradient */
--app-bg: radial-gradient(900px 500px at 25% 10%, rgba(34, 211, 238, 0.10), transparent 55%),
radial-gradient(900px 500px at 75% 15%, rgba(6, 182, 212, 0.06), transparent 55%),
linear-gradient(180deg, var(--bg0), var(--bg1));
--dot-grid-rgb: 56, 189, 248;
--dot-grid-alpha: 0.05;
--dot-grid-opacity: 0.15;
/* Shadows */
--shadow: 0 18px 40px rgba(0, 8, 16, 0.45);
/* Glass UI */
--ui-glass-bg: rgba(12, 20, 38, 0.62);
--ui-glass-bg-strong: rgba(14, 22, 42, 0.78);
--ui-glass-border: rgba(56, 189, 248, 0.14);
--ui-glass-border-strong: rgba(56, 189, 248, 0.24);
--ui-glass-shadow: 0 8px 32px rgba(0, 8, 24, 0.5);
/* Input */
--ui-input-text: rgba(235, 245, 255, 0.92);
--ui-input-placeholder: rgba(140, 175, 210, 0.48);
/* Float shadow */
--ui-float-shadow: 0 12px 36px rgba(0, 8, 24, 0.55);
/* Olive overrides for midnight */
--mc-olive-bg: rgba(34, 211, 238, 0.12);
--mc-olive-border: rgba(34, 211, 238, 0.22);
}
/* Midnight theme - component overrides (dark mode only) */
:root[data-theme="dark"][data-accent="midnight"] .relTag {
background: rgba(34, 211, 238, 0.12);
border-color: rgba(34, 211, 238, 0.22);
color: rgba(180, 220, 240, 0.9);
}
:root[data-theme="dark"][data-accent="midnight"] .relTag--colleague {
background: rgba(34, 211, 238, 0.15);
border-color: rgba(34, 211, 238, 0.28);
}
:root[data-theme="dark"][data-accent="midnight"] .aiChatMessage.user {
background: rgba(34, 211, 238, 0.1);
border-color: rgba(34, 211, 238, 0.25);
border-right-color: rgba(34, 211, 238, 0.6);
}
:root[data-theme="dark"][data-accent="midnight"] .personRow {
background: rgba(34, 211, 238, 0.02);
border-bottom-color: rgba(56, 189, 248, 0.08);
}
:root[data-theme="dark"][data-accent="midnight"] .personRow:hover {
background: rgba(34, 211, 238, 0.06);
}
:root[data-theme="dark"][data-accent="midnight"] .objectCard {
background: rgba(12, 20, 38, 0.5);
border-color: rgba(56, 189, 248, 0.15);
}
:root[data-theme="dark"][data-accent="midnight"] .objectCard__header {
background: rgba(34, 211, 238, 0.04);
}
:root[data-theme="dark"][data-accent="midnight"] .aiTracePanel {
background: rgba(34, 211, 238, 0.03);
border-color: rgba(56, 189, 248, 0.2);
}
:root[data-theme="dark"][data-accent="midnight"] .aiTracePanelHeader::before {
background: rgba(34, 211, 238, 0.85);
}
:root[data-theme="dark"][data-accent="midnight"] .aiTraceStep--complete .aiTraceLabel {
color: #34d399;
}
/* ═══════════════════════════════════════════════════════════════════════════
SLEEK THEME - Clean modern light theme with indigo accents (light mode only)
Toggle: document.documentElement.setAttribute('data-accent', 'sleek')
═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"][data-accent="sleek"] {
/* Core palette - crisp whites and cool grays */
--bg0: #fafbfc;
--bg1: #f4f6f8;
--bg2: #eef1f5;
--card: rgba(255, 255, 255, 0.92);
--stroke: rgba(99, 102, 241, 0.12);
--stroke2: rgba(99, 102, 241, 0.18);
/* Text - refined dark slate */
--text: #1e293b;
--fg: #1e293b;
--fg2: #475569;
--fg3: #64748b;
--muted: rgba(71, 85, 105, 0.7);
--muted2: rgba(100, 116, 139, 0.6);
--muted3: rgba(100, 116, 139, 0.4);
/* Accent - sophisticated indigo */
--accent: #6366f1;
--accent2: #4f46e5;
--gold: #6366f1;
--cyan: #6366f1;
--blue: #818cf8;
--pink: #a78bfa;
--success: #10b981;
--warn: #f59e0b;
--danger: #ef4444;
/* Brand + focus */
--brand: #6366f1;
--focus: rgba(99, 102, 241, 0.18);
/* Background gradient - subtle indigo wash */
--app-bg: radial-gradient(1000px 600px at 20% 5%, rgba(99, 102, 241, 0.06), transparent 60%),
radial-gradient(800px 400px at 80% 10%, rgba(129, 140, 248, 0.04), transparent 50%),
linear-gradient(180deg, var(--bg0), var(--bg1));
--dot-grid-rgb: 99, 102, 241;
--dot-grid-alpha: 0.04;
--dot-grid-opacity: 0.12;
/* Shadows - soft and refined */
--shadow: 0 8px 30px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
/* Glass UI - frosted white */
--ui-glass-bg: rgba(255, 255, 255, 0.85);
--ui-glass-bg-strong: rgba(255, 255, 255, 0.95);
--ui-glass-border: rgba(99, 102, 241, 0.12);
--ui-glass-border-strong: rgba(99, 102, 241, 0.20);
--ui-glass-shadow: 0 8px 32px rgba(99, 102, 241, 0.10);
/* Input */
--ui-input-text: #1e293b;
--ui-input-placeholder: rgba(100, 116, 139, 0.5);
/* Float shadow */
--ui-float-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);
/* Border/divider */
--border: rgba(99, 102, 241, 0.10);
--divider: rgba(99, 102, 241, 0.08);
}
/* Sleek theme - component overrides (light mode only) */
:root[data-theme="light"][data-accent="sleek"] .relTag {
background: rgba(99, 102, 241, 0.08);
border-color: rgba(99, 102, 241, 0.15);
color: #4338ca;
}
:root[data-theme="light"][data-accent="sleek"] .relTag--colleague {
background: rgba(99, 102, 241, 0.10);
border-color: rgba(99, 102, 241, 0.18);
}
:root[data-theme="light"][data-accent="sleek"] .relTag--icp {
background: rgba(16, 185, 129, 0.10);
border-color: rgba(16, 185, 129, 0.18);
color: #047857;
}
:root[data-theme="light"][data-accent="sleek"] .aiChatMessage.user {
background: rgba(99, 102, 241, 0.06);
border-color: rgba(99, 102, 241, 0.15);
border-right-color: rgba(99, 102, 241, 0.5);
}
:root[data-theme="light"][data-accent="sleek"] .personRow {
background: transparent;
border-bottom-color: rgba(99, 102, 241, 0.06);
}
:root[data-theme="light"][data-accent="sleek"] .personRow:hover {
background: rgba(99, 102, 241, 0.03);
}
:root[data-theme="light"][data-accent="sleek"] .objectCard {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(99, 102, 241, 0.10);
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
}
:root[data-theme="light"][data-accent="sleek"] .objectCard__header {
background: rgba(99, 102, 241, 0.03);
border-bottom-color: rgba(99, 102, 241, 0.08);
}
:root[data-theme="light"][data-accent="sleek"] .aiTracePanel {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(99, 102, 241, 0.12);
}
:root[data-theme="light"][data-accent="sleek"] .aiTracePanelHeader::before {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), transparent);
}
:root[data-theme="light"][data-accent="sleek"] .aiTraceStep--complete .aiTraceLabel {
color: rgba(99, 102, 241, 0.85);
}
:root[data-theme="light"][data-accent="sleek"] .aiChatSidebar {
background: rgba(250, 251, 252, 0.95);
border-color: rgba(99, 102, 241, 0.10);
}
:root[data-theme="light"][data-accent="sleek"] .aiChatInputWrap {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(99, 102, 241, 0.15);
}
:root[data-theme="light"][data-accent="sleek"] .aiChatInputWrap:focus-within {
border-color: rgba(99, 102, 241, 0.35);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
/* ═══════════════════════════════════════════════════════════════════════════
NEON THEME - Dark charcoal with magenta/pink accents (dark mode only)
Toggle: document.documentElement.setAttribute('data-accent', 'neon')
═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"][data-accent="neon"] {
/* Core palette - deep charcoal with purple undertones */
--bg0: #0d0d1a;
--bg1: #12121f;
--bg2: #1a1a2e;
--card: rgba(26, 26, 46, 0.85);
--stroke: rgba(236, 72, 153, 0.18);
--stroke2: rgba(236, 72, 153, 0.28);
/* Text - cool white/lavender */
--text: rgba(248, 250, 252, 0.95);
--fg: rgba(248, 250, 252, 0.95);
--fg2: rgba(226, 232, 240, 0.85);
--fg3: rgba(203, 213, 225, 0.7);
--muted: rgba(168, 162, 190, 0.7);
--muted2: rgba(148, 142, 175, 0.55);
--muted3: rgba(128, 122, 160, 0.4);
/* Accent - vibrant magenta/pink */
--accent: #ec4899;
--accent2: #db2777;
--gold: #ec4899;
--cyan: #f472b6;
--blue: #a855f7;
--pink: #ec4899;
--success: #34d399;
--warn: #fbbf24;
--danger: #f87171;
/* Brand + focus */
--brand: #ec4899;
--focus: rgba(236, 72, 153, 0.25);
/* Background gradient - subtle magenta glow */
--app-bg: radial-gradient(900px 500px at 25% 10%, rgba(236, 72, 153, 0.08), transparent 55%),
radial-gradient(800px 400px at 75% 15%, rgba(168, 85, 247, 0.05), transparent 50%),
linear-gradient(180deg, var(--bg0), var(--bg1));
--dot-grid-rgb: 236, 72, 153;
--dot-grid-alpha: 0.04;
--dot-grid-opacity: 0.12;
/* Shadows - magenta tinted */
--shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(236, 72, 153, 0.08);
/* Glass UI - dark frosted */
--ui-glass-bg: rgba(18, 18, 31, 0.75);
--ui-glass-bg-strong: rgba(22, 22, 38, 0.88);
--ui-glass-border: rgba(236, 72, 153, 0.15);
--ui-glass-border-strong: rgba(236, 72, 153, 0.25);
--ui-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
/* Input */
--ui-input-text: rgba(248, 250, 252, 0.92);
--ui-input-placeholder: rgba(168, 162, 190, 0.5);
/* Float shadow */
--ui-float-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
/* Border/divider */
--border: rgba(236, 72, 153, 0.15);
--divider: rgba(236, 72, 153, 0.10);
}
/* Neon theme - component overrides (dark mode only) */
:root[data-theme="dark"][data-accent="neon"] .relTag {
background: rgba(236, 72, 153, 0.15);
border-color: rgba(236, 72, 153, 0.25);
color: rgba(244, 190, 220, 0.95);
}
:root[data-theme="dark"][data-accent="neon"] .relTag--colleague {
background: rgba(168, 85, 247, 0.15);
border-color: rgba(168, 85, 247, 0.25);
color: rgba(216, 180, 254, 0.95);
}
:root[data-theme="dark"][data-accent="neon"] .relTag--icp {
background: rgba(52, 211, 153, 0.15);
border-color: rgba(52, 211, 153, 0.25);
color: #6ee7b7;
}
:root[data-theme="dark"][data-accent="neon"] .aiChatMessage.user {
background: rgba(236, 72, 153, 0.12);
border-color: rgba(236, 72, 153, 0.25);
border-right-color: rgba(236, 72, 153, 0.65);
}
:root[data-theme="dark"][data-accent="neon"] .personRow {
background: rgba(236, 72, 153, 0.02);
border-bottom-color: rgba(236, 72, 153, 0.10);
}
:root[data-theme="dark"][data-accent="neon"] .personRow:hover {
background: rgba(236, 72, 153, 0.08);
}
:root[data-theme="dark"][data-accent="neon"] .objectCard {
background: rgba(22, 22, 38, 0.7);
border-color: rgba(236, 72, 153, 0.18);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.05);
}
:root[data-theme="dark"][data-accent="neon"] .objectCard__header {
background: rgba(236, 72, 153, 0.06);
border-bottom-color: rgba(236, 72, 153, 0.12);
}
:root[data-theme="dark"][data-accent="neon"] .aiTracePanel {
background: rgba(18, 18, 31, 0.8);
border-color: rgba(236, 72, 153, 0.15);
}
:root[data-theme="dark"][data-accent="neon"] .aiTracePanelHeader::before {
background: linear-gradient(90deg, rgba(236, 72, 153, 0.8), rgba(168, 85, 247, 0.4));
}
:root[data-theme="dark"][data-accent="neon"] .aiTraceStep--complete .aiTraceLabel {
color: rgba(236, 72, 153, 0.9);
}
:root[data-theme="dark"][data-accent="neon"] .aiChatSidebar {
background: rgba(13, 13, 26, 0.95);
border-color: rgba(236, 72, 153, 0.12);
}
:root[data-theme="dark"][data-accent="neon"] .aiChatInputWrap {
background: rgba(22, 22, 38, 0.9);
border-color: rgba(236, 72, 153, 0.2);
}
:root[data-theme="dark"][data-accent="neon"] .aiChatInputWrap:focus-within {
border-color: rgba(236, 72, 153, 0.5);
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15), 0 0 20px rgba(236, 72, 153, 0.1);
}
/* ==========================================================================
TABLE OF CONTENTS (major components)
- Loading Screen
- Hero Select / Selected Hero Avatar
- App Shell (centerStack, search bar, progress, modal)
- Network Panel + Job Table
- Score Lab
- Pathways Lab
- Network Search
- System Health Widget
========================================================================== */
/* ============================
LOADING SCREEN
============================ */
.loadingScreen {
position: fixed;
inset: 0;
z-index: var(--z-loading);
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 600ms;
}
.loadingScreen.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loadingInner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
animation: loadingPulse 2.4s ease-in-out infinite;
}
@keyframes loadingPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.08); }
}
/* VIA Logo - main brand text */
.loadingVia {
font-family: 'Outfit', 'SF Pro Display', -apple-system, sans-serif;
font-weight: 900;
font-size: clamp(80px, 18vw, 160px);
letter-spacing: -0.02em;
color: #0f172a;
position: relative;
line-height: 1;
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
animation: viaFadeIn 0.8s ease-out;
}
@keyframes viaFadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.loadingBar {
width: min(200px, 50vw);
height: 3px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.loadingBarFill {
height: 100%;
width: 0%;
background: #0a0a0a;
border-radius: 2px;
animation: loadingFill 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loadingFill {
0% { width: 0%; }
15% { width: 15%; }
40% { width: 45%; }
65% { width: 70%; }
85% { width: 88%; }
100% { width: 100%; }
}
.loadingDots {
display: flex;
gap: 6px;
margin-top: 16px;
}
.loadingDots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #0a0a0a;
animation: dotBounce 1.4s ease-in-out infinite;
}
:root[data-theme="dark"] .loadingScreen {
background: #05070f;
}
:root[data-theme="dark"] .loadingVia {
color: #f5f7ff;
}
:root[data-theme="dark"] .loadingBar {
background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .loadingBarFill {
background: #f5f7ff;
}
:root[data-theme="dark"] .loadingDots span {
background: #f5f7ff;
}
.loadingDots span:nth-child(1) { animation-delay: 0ms; }
.loadingDots span:nth-child(2) { animation-delay: 160ms; }
.loadingDots span:nth-child(3) { animation-delay: 320ms; }
@keyframes dotBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.loadingScreen {
transition: opacity 200ms ease;
}
.loadingInner,
.loadingBarFill,
.loadingDots span {
animation: none !important;
}
.loadingBarFill {
width: 100%;
}
.loadingDots span {
opacity: 0.7;
transform: scale(0.8);
}
}
/* HERO GATE (prevents boot flicker)
While the hero select overlay is active, hide the underlying UI so it can't flash
for a frame between loading fade-out and hero overlay fade-in. */
body.prehero .shell,
body.prehero #selectedHero,
body.prehero #networkPanel,
body.prehero #scoreLabToggle {
visibility: hidden;
pointer-events: none;
}
/* ============================
HERO SELECT SCREEN
============================ */
.heroSelect {
position: fixed;
inset: 0;
min-width: 100vw;
min-height: 100vh;
z-index: var(--z-hero-select);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #f5faff 0%, #e6f1ff 45%, #dbe9ff 100%);
background-color: #eef5ff;
overflow: hidden;
opacity: 0;
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.heroSelect::after {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(45% 45% at 10% 15%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 70%);
opacity: 0;
transform: translateX(-12%) translateY(-6%);
animation: sunWash 2.8s ease-out 0.35s 1;
pointer-events: none;
mix-blend-mode: screen;
z-index: 1;
}
.heroBackdrop {
position: absolute;
inset: 0;
background: url('./assets/mykonos.png') center 32% / contain no-repeat;
image-rendering: auto;
z-index: 0;
}
.heroSelect.visible {
opacity: 1;
}
.heroSelect.hidden {
opacity: 0;
pointer-events: none;
}
.heroSelectInner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 36px 24px 56px;
min-height: 100vh;
width: min(1200px, 92vw);
text-align: center;
position: relative;
z-index: 2;
}
.heroTop {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 10px;
}
.heroSelectFooter {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
width: min(980px, 100%);
padding: 18px 28px 22px;
border-radius: 28px;
background: rgba(13, 20, 35, 0.35);
backdrop-filter: blur(10px);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
}
.heroTitle {
font-family: var(--font-sans);
font-weight: 950;
font-size: clamp(34px, 6vw, 60px);
letter-spacing: 8px;
color: #ffffff;
text-transform: uppercase;
text-shadow:
0 16px 40px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.35);
position: relative;
animation: none;
}
@keyframes heroTitlePulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.1); }
}
@keyframes heroGlitchBefore {
0%, 92%, 100% { transform: translate(0); opacity: 0; }
93% { transform: translate(3px, -1px); opacity: 0.6; }
95% { transform: translate(-2px, 1px); opacity: 0.4; }
97% { transform: translate(2px, -1px); opacity: 0; }
}
@keyframes heroGlitchAfter {
0%, 90%, 100% { transform: translate(0); opacity: 0; }
91% { transform: translate(-2px, 1px); opacity: 0.5; }
94% { transform: translate(3px, -1px); opacity: 0.4; }
96% { transform: translate(-1px, 1px); opacity: 0; }
}
.heroSubtitle {
font-weight: 600;
font-size: clamp(14px, 2.2vw, 20px);
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
margin-top: -6px;
}
.heroPrompt {
font-weight: 600;
font-size: 13px;
letter-spacing: 6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.heroGrid {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
max-width: 900px;
}
.heroCard {
position: relative;
width: 180px;
padding: 16px 16px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
backdrop-filter: blur(6px);
cursor: pointer;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 280ms ease,
box-shadow 280ms ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
overflow: hidden;
}
.heroCard:hover {
transform: translateY(-8px) scale(1.03);
border-color: rgba(96, 175, 255, 0.7);
box-shadow:
0 0 0 1px rgba(96, 175, 255, 0.2),
0 20px 50px rgba(0, 0, 0, 0.4),
0 0 40px rgba(96, 175, 255, 0.2);
}
.heroCard:focus {
outline: none;
border-color: rgba(96, 175, 255, 0.85);
box-shadow:
0 0 0 3px rgba(96, 175, 255, 0.3),
0 20px 50px rgba(0, 0, 0, 0.4);
}
.heroCard:active {
transform: translateY(-4px) scale(1.01);
}
.heroCard[disabled],
.heroCard.disabled {
cursor: not-allowed;
opacity: 0.45;
filter: grayscale(0.3);
transform: none;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.heroCard[disabled] .heroGlow,
.heroCard.disabled .heroGlow {
opacity: 0;
}
.heroCard[disabled] .heroAvatar,
.heroCard.disabled .heroAvatar {
border-color: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
.heroGlow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(96, 175, 255, 0.22), transparent 50%);
opacity: 0;
transition: opacity 300ms ease;
pointer-events: none;
}
.heroCard:hover .heroGlow {
opacity: 1;
}
.heroAvatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.2);
transition: border-color 280ms ease, box-shadow 280ms ease;
object-fit: cover;
}
.heroCard:hover .heroAvatar {
border-color: rgba(96, 175, 255, 0.6);
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.5),
0 0 20px rgba(96, 175, 255, 0.2);
}
/* Mark's Easter Egg: happy → angry on hover */
.markCard .heroAvatarAngry {
display: none;
}
.markCard .heroAvatarHappy {
display: block;
}
.markCard:hover .heroAvatarHappy {
display: none;
}
.markCard:hover .heroAvatarAngry {
display: block;
}
.heroName {
font-weight: 950;
font-size: 16px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.heroTag {
font-weight: 800;
font-size: 11px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.5);
margin-top: -4px;
}
.heroHint {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 700;
font-size: 11px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.7);
animation: heroHintBlink 1.5s ease-in-out infinite;
}
@keyframes heroHintBlink {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
@keyframes sunWash {
0% {
opacity: 0;
transform: translateX(-12%) translateY(-6%);
}
35% {
opacity: 0.85;
}
100% {
opacity: 0;
transform: translateX(10%) translateY(4%);
}
}
/* Light theme hero select (clean, minimal) */
:root[data-theme="light"] .heroSelect {
background: linear-gradient(160deg, #f5faff 0%, #e6f1ff 45%, #dbe9ff 100%);
background-color: #eef5ff;
}
:root[data-theme="light"] .heroTitle {
color: #ffffff;
text-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.3);
}
:root[data-theme="light"] .heroSubtitle {
color: rgba(255, 255, 255, 0.8);
}
:root[data-theme="light"] .heroCard {
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.22);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .heroCard:hover {
border-color: rgba(96, 175, 255, 0.6);
box-shadow:
0 0 0 1px rgba(96, 175, 255, 0.2),
0 18px 40px rgba(15, 23, 42, 0.2);
}
:root[data-theme="light"] .heroGlow {
background: radial-gradient(circle, rgba(96, 175, 255, 0.22), transparent 45%);
}
:root[data-theme="light"] .heroAvatar {
border-color: rgba(255, 255, 255, 0.45);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
}
:root[data-theme="light"] .heroCard:hover .heroAvatar {
border-color: rgba(96, 175, 255, 0.6);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}
:root[data-theme="light"] .heroName {
color: #ffffff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .heroHint {
color: rgba(255, 255, 255, 0.75);
}
/* Selected Hero Avatar (bottom left corner) */
.selectedHero {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px 6px 6px;
background: color-mix(in srgb, var(--ui-hero-pill-bg) 65%, transparent);
border: 1px solid color-mix(in srgb, var(--ui-hero-pill-border) 70%, transparent);
border-radius: 18px;
backdrop-filter: blur(8px);
animation: selectedHeroIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}
@keyframes selectedHeroIn {
0% {
opacity: 0;
transform: translateX(-20px) scale(0.9);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.selectedHeroImg {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(251, 191, 36, 0.6);
box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.selectedHeroName {
font-family: var(--font-sans);
font-weight: 800;
font-size: 14px;
letter-spacing: 2px;
color: var(--ui-hero-pill-text);
text-transform: uppercase;
}
.selectedHeroBtn {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
background: none;
border: none;
cursor: pointer;
outline: none;
border-radius: 14px;
transition: transform 0.15s ease;
}
.selectedHeroBtn:hover {
transform: scale(1.02);
}
.selectedHeroBtn:focus-visible {
box-shadow: 0 0 0 3px var(--focus);
}
.selectedHeroGear {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--muted);
opacity: 0;
transition: opacity 0.2s ease, color 0.2s ease, transform 0.3s ease;
}
.selectedHeroGear svg {
width: 16px;
height: 16px;
}
.selectedHeroBtn:hover .selectedHeroGear,
.selectedHero:has(.settingsPopup.visible) .selectedHeroGear {
opacity: 1;
color: var(--text);
}
.selectedHeroBtn:hover .selectedHeroGear {
transform: rotate(45deg);
}
/* Settings Popup */
.settingsPopup {
position: absolute;
bottom: calc(100% + 12px);
left: 0;
min-width: 220px;
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.96);
transform-origin: bottom left;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 101;
}
.settingsPopup.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.settingsPopupHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--stroke);
}
.settingsPopupTitle {
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text);
text-transform: uppercase;
}
.settingsPopupClose {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: none;
border-radius: 6px;
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.settingsPopupClose svg {
width: 14px;
height: 14px;
}
.settingsPopupClose:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 8%, transparent);
}
.settingsPopupBody {
padding: 10px 14px 14px;
}
.settingsSection {
display: flex;
flex-direction: column;
gap: 10px;
}
.settingsSection + .settingsSection {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--stroke);
}
.settingsSectionLabel {
font-family: var(--font-sans);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
}
.settingsIcpList {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.settingsIcpChip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: var(--ui-chip-bg);
border: 1px solid var(--ui-chip-border);
color: var(--ui-chip-text);
font-size: 11px;
}
.settingsIcpRemove {
border: none;
background: transparent;
color: var(--muted2);
cursor: pointer;
padding: 0;
line-height: 1;
}
.settingsIcpRow {
display: flex;
gap: 8px;
align-items: center;
}
.settingsIcpInput {
flex: 1;
min-width: 0;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--ui-widget-border);
background: var(--ui-widget-bg);
color: var(--text);
font-size: 12px;
}
.settingsIcpInput::placeholder {
color: var(--muted2);
}
.settingsIcpAdd {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--ui-widget-border);
background: var(--ui-widget-bg);
color: var(--text);
font-size: 12px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.settingsIcpAdd:hover {
border-color: var(--accent);
}
.settingsIcpClear {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(239, 68, 68, 0.25);
background: rgba(239, 68, 68, 0.08);
color: #ef4444;
font-size: 11px;
cursor: pointer;
}
@media (max-width: 640px) {
.settingsIcpRow {
flex-direction: column;
align-items: stretch;
}
}
/* Theme Toggle Button */
.settingsThemeRow {
display: flex;
align-items: center;
}
.settingsThemeToggle {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 10px;
color: var(--text);
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.settingsThemeToggle:hover {
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.settingsThemeToggle:active {
transform: scale(0.97);
}
.settingsThemeToggle .themeToggleIcon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--accent);
}
.settingsThemeToggle .themeToggleIcon svg {
width: 18px;
height: 18px;
}
.settingsThemeToggle .themeToggleLabel {
color: var(--text);
}
/* Settings Sliders */
.settingsSliders {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.settingsSliderGroup {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
/* Tick marks for texture slider (7 notches: 0-6) */
.settingsSliderGroup[data-ticks]::after {
content: "";
position: absolute;
left: 64px; /* align with slider start (label width + gap) */
right: 0;
top: 50%;
transform: translateY(-50%);
height: 12px;
pointer-events: none;
background-image: repeating-linear-gradient(
90deg,
var(--muted2) 0px,
var(--muted2) 1px,
transparent 1px,
transparent calc(100% / 6)
);
background-size: calc(100% - 1px) 100%;
opacity: 0.35;
z-index: 0;
}
.settingsSliderLabel {
min-width: 52px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.02em;
}
.settingsSliderInput {
flex: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: color-mix(in srgb, var(--text) 15%, transparent);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.settingsSliderInput::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
background: var(--accent);
border-radius: 50%;
border: 2px solid var(--card);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.settingsSliderInput::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.settingsSliderInput::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--accent);
border-radius: 50%;
border: 2px solid var(--card);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
/* Accent Theme Toggle */
.settingsAccentRow {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--stroke);
}
.settingsAccentLabel {
font-size: 12px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.02em;
}
.settingsAccentToggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(34, 211, 238, 0.08);
border: 1px solid rgba(34, 211, 238, 0.2);
border-radius: 8px;
color: var(--text);
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.settingsAccentToggle:hover {
background: rgba(34, 211, 238, 0.14);
border-color: rgba(34, 211, 238, 0.3);
}
.settingsAccentToggle.is-active {
background: rgba(34, 211, 238, 0.18);
border-color: rgba(34, 211, 238, 0.4);
}
.settingsAccentToggle .accentToggleIcon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: #22d3ee;
}
.settingsAccentToggle .accentToggleIcon svg {
width: 14px;
height: 14px;
}
.settingsAccentToggle .accentToggleLabel {
color: var(--text);
}
/* Change Hero Button */
.settingsChangeHero {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: transparent;
border: 1px solid var(--stroke);
border-radius: 8px;
color: var(--text);
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.settingsChangeHero svg {
width: 16px;
height: 16px;
color: var(--muted);
}
.settingsChangeHero:hover {
background: color-mix(in srgb, var(--text) 6%, transparent);
border-color: color-mix(in srgb, var(--text) 20%, transparent);
}
.settingsChangeHero:hover svg {
color: var(--text);
}
/* ============================
NETWORK PANEL
============================ */
/* Full-screen backdrop behind network panel */
.networkPanelBackdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-network-panel) - 1);
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 300ms ease, visibility 300ms ease;
}
.networkPanelBackdrop.visible {
opacity: 1;
visibility: visible;
}
.networkPanel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-network-panel);
width: min(680px, 90vw);
max-height: 85vh;
/* Fully opaque background to prevent any bleed-through */
background: linear-gradient(135deg, rgb(20, 24, 35) 0%, rgb(12, 15, 22) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow:
0 16px 44px rgba(0, 0, 0, 0.6),
0 0 22px rgba(251, 191, 36, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
animation: networkPanelIn 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes networkPanelIn {
0% {
opacity: 0;
transform: translate(-50%, -48%) scale(0.95);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.networkPanel.closing {
animation: networkPanelOut 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes networkPanelOut {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -48%) scale(0.95);
}
}
.networkPanelHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.networkPanelTitle {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-weight: 900;
font-size: 14px;
letter-spacing: 2px;
color: #fbbf24;
text-transform: uppercase;
}
.networkIcon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.networkIcon svg {
width: 18px;
height: 18px;
display: block;
}
.networkTitleJp {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 1px;
}
.networkPanelClose {
width: 32px;
height: 32px;
border: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 150ms ease;
}
.networkPanelClose svg {
width: 14px;
height: 14px;
}
.networkPanelClose:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.networkPanelBody {
padding: 20px;
overflow-y: auto;
max-height: calc(85vh - 70px);
}
.networkSection {
margin-bottom: 20px;
}
.sectionLabel {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.4);
}
.sectionLabelIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-right: 6px;
}
.sectionLabelIcon svg {
width: 14px;
height: 14px;
display: block;
}
.sectionLabelHint {
font-weight: 400;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.25);
margin-left: 4px;
margin-bottom: 10px;
}
/* Person Info */
.personInfo {
background: transparent;
border-radius: 0;
padding: 0;
border: none;
}
.personName {
font-family: var(--font-sans);
font-weight: 800;
font-size: 18px;
color: #fff;
margin-bottom: 2px;
}
.personCompany {
font-family: var(--font-sans);
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.personCompany:empty {
display: none;
}
.personLinks {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.personLinkedin {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: #0a66c2;
text-decoration: none;
padding: 4px 10px;
background: rgba(10, 102, 194, 0.15);
border-radius: 4px;
transition: all 0.15s ease;
}
.personLinkedin:hover {
background: rgba(10, 102, 194, 0.25);
color: #3b9eff;
}
.personLinkedin::before {
content: "in";
font-weight: 800;
font-size: 11px;
background: #0a66c2;
color: #fff;
padding: 1px 4px;
border-radius: 2px;
}
.personLinkedin[href="#"],
.personLinkedin:not([href]) {
display: none;
}
.personUuid {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
word-break: break-all;
}
/* Network Stats */
.networkStats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.networkStats.networkStats3col {
grid-template-columns: repeat(3, 1fr);
}
.netStat {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 14px 12px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.netStatValue {
font-family: var(--font-sans);
font-weight: 900;
font-size: 22px;
color: #fbbf24;
margin-bottom: 2px;
}
.netStatActual {
font-family: ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 4px;
}
.netStatActual:empty {
display: none;
}
.netStatActual.capped {
color: rgba(251, 191, 36, 0.6);
}
.netStatActual.capped::before {
content: "of ";
}
/* Status colors with indicators */
.netStatValue.complete { color: #4ade80; }
.netStatValue.complete::before {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-right: 4px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.netStatValue.draining { color: #60a5fa; }
.netStatValue.draining::before {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-right: 4px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.netStatValue.partial { color: #fbbf24; }
.netStatValue.partial::before {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-right: 4px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.netStatValue.has-data { color: #a78bfa; }
.netStatValue.has-data::before {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-right: 4px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.netStatValue.new { color: #22d3ee; }
.netStatValue.new::before {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-right: 4px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.netStatValue.scored { color: #f472b6; }
.netStatLabel {
font-family: var(--font-sans);
font-weight: 800;
font-size: 9px;
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2px;
}
.netStatHint {
font-size: 9px;
color: rgba(255, 255, 255, 0.35);
}
.networkProgress {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.networkProgressLabel {
display: flex;
justify-content: space-between;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.networkProgressBar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.networkProgressFill {
height: 100%;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
border-radius: 4px;
transition: width 300ms ease;
}
.lastJobInfo {
margin-top: 12px;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.lastJobHeader {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(251, 191, 36, 0.6);
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lastJobGrid {
display: flex;
flex-direction: column;
gap: 4px;
}
.lastJobRow {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
font-size: 11px;
gap: 8px;
}
.lastJobLabel {
color: rgba(255, 255, 255, 0.5);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
flex-shrink: 0;
}
.lastJobValue {
color: rgba(255, 255, 255, 0.9);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 600;
text-align: right;
}
.lastJobValue.truncate {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
}
/* Job Queue Table Section */
/* JOB_TABLE_SCALE_V1: Upsize job tables (text/avatar/progress/buttons) for readability */
.jobTableSection {
padding: 16px;
background: rgba(0, 0, 0, 0.25);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.jobTableSection .sectionLabel {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
letter-spacing: 0.8px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 12px;
}
.jobTableCount {
color: rgba(255, 255, 255, 0.4);
font-weight: normal;
font-size: 11px;
}
.jobTableWrapper {
overflow-x: auto;
}
.jobTable {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.jobTable thead {
position: sticky;
top: 0;
}
.jobTable th {
text-align: left;
padding: 10px 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
}
.jobTable th:nth-child(2) {
text-align: center; /* HERO column */
color: rgba(255, 255, 255, 0.4);
background: rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.jobTable th:first-child {
border-radius: 6px 0 0 0;
}
.jobTable th:last-child {
border-radius: 0 6px 0 0;
}
.jobTable td {
padding: 12px 12px;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.jobTable tbody tr {
transition: background 150ms ease;
}
.jobTable tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
.jobTable tbody tr:last-child td {
border-bottom: none;
}
/* Seed cell with LinkedIn link */
.jobSeedCell {
display: flex;
flex-direction: column;
gap: 2px;
}
.jobSeedName {
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
/* Job ID cell */
.jobIdCell {
display: flex;
align-items: center;
gap: 6px;
font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
font-size: 0.65rem;
position: relative;
}
.jobIdCode {
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;
border-radius: 3px;
color: rgba(255, 255, 255, 0.6);
user-select: all;
word-break: break-all;
max-width: 180px;
}
.jobIdCopy {
background: transparent;
border: none;
cursor: pointer;
padding: 2px 4px;
font-size: 0.75rem;
opacity: 0.5;
transition: opacity 0.15s;
}
.jobIdCopy:hover {
opacity: 1;
}
.jobIdCell:hover .jobIdCode {
background: rgba(0, 200, 255, 0.15);
color: rgba(0, 200, 255, 0.9);
}
.jobSeedLink {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #60a5fa;
text-decoration: none;
opacity: 0.8;
transition: opacity 150ms ease;
}
.jobSeedLink:hover {
opacity: 1;
text-decoration: underline;
}
.jobSeedLink .liIcon {
width: 14px;
height: 14px;
background: #0a66c2;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
color: white;
}
/* Hero cell */
.jobHeroCell {
display: flex;
align-items: center;
justify-content: center;
}
.jobHeroCell .heroMiniAvatar {
width: 52px;
height: 52px;
border-radius: 10px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.jobHeroCell .heroName {
display: none;
}
/* Status badges */
.jobStatusBadge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.jobStatusBadge.running {
color: #fbbf24;
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.3);
}
.jobStatusBadge.running::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #fbbf24;
animation: pulse 1.5s ease-in-out infinite;
}
.jobStatusBadge.queued {
color: #94a3b8;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.jobStatusBadge.succeeded {
color: #4ade80;
background: rgba(74, 222, 128, 0.12);
border: 1px solid rgba(74, 222, 128, 0.25);
}
.jobStatusBadge.failed {
color: #f87171;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.25);
}
.jobStatusBadge.not-found {
color: #fbbf24;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.25);
}
.jobStatusBadge.skipped {
color: #94a3b8;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.25);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Progress cell */
.jobProgressCell {
min-width: 130px;
}
.jobProgressBar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 6px;
}
.jobProgressFill {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22d3ee);
border-radius: 3px;
transition: width 300ms ease;
}
.jobProgressFill.error {
background: linear-gradient(90deg, #f87171, #ef4444);
}
.jobProgressText {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
}
/* Time cell */
.jobTimeCell {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
font-variant-numeric: tabular-nums;
}
.jobTimeCell .timeValue {
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.jobTimeCell .timeLabel {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
/* Actions cell */
.jobActionsCell {
text-align: center;
}
.jobCancelBtn {
background: rgba(255, 100, 100, 0.15);
border: 1px solid rgba(255, 100, 100, 0.3);
color: #ff6464;
font-size: 11px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.jobCancelBtn:hover {
background: rgba(255, 100, 100, 0.3);
border-color: rgba(255, 100, 100, 0.5);
color: #ff8080;
}
.jobCancelBtn:active {
transform: scale(0.95);
}
/* Empty state */
.jobTableEmpty {
padding: 28px;
text-align: center;
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
display: none;
}
.jobTableEmpty.visible {
display: block;
}
/* Hide table when empty */
.jobTable.hidden {
display: none;
}
/* Config Section */
.configToggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 150ms ease;
}
.configToggle:hover {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.1);
}
.configToggle.open {
border-radius: 10px 10px 0 0;
border-bottom: none;
}
.configToggleIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fbbf24;
transition: transform 200ms ease;
}
.configToggleIcon svg {
width: 12px;
height: 12px;
display: block;
}
.configToggle.open .configToggleIcon {
transform: rotate(90deg);
}
.configToggleHint {
margin-left: auto;
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
}
.configBody {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-top: none;
border-radius: 0 0 10px 10px;
padding: 16px;
}
.configGroup {
margin-bottom: 20px;
}
.configGroup:last-child {
margin-bottom: 0;
}
.configGroupTitle {
display: flex;
align-items: center;
justify-content: space-between;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.configRow {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.configRow:last-child {
margin-bottom: 0;
}
.configLabel {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.configInput,
.configSelect {
width: 160px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
}
.configInput:focus,
.configSelect:focus {
outline: none;
border-color: rgba(251, 191, 36, 0.5);
box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.1);
}
.configSelect {
cursor: pointer;
}
/* Toggle Switch */
.configSwitch {
position: relative;
width: 44px;
height: 24px;
}
.configSwitch input {
opacity: 0;
width: 0;
height: 0;
}
.switchSlider {
position: absolute;
cursor: pointer;
inset: 0;
background: rgba(255, 255, 255, 0.15);
border-radius: 24px;
transition: 200ms;
}
.switchSlider::before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: 200ms;
}
.configSwitch input:checked + .switchSlider {
background: #fbbf24;
}
.configSwitch input:checked + .switchSlider::before {
transform: translateX(20px);
}
/* Company Rules */
.addRuleBtn {
padding: 4px 10px;
background: rgba(251, 191, 36, 0.2);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 4px;
color: #fbbf24;
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: all 150ms ease;
}
.addRuleBtn:hover {
background: rgba(251, 191, 36, 0.3);
}
.companyRulesContainer {
display: flex;
flex-direction: column;
gap: 12px;
}
.companyRule {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 12px;
}
.companyRuleHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.companyRuleName {
font-weight: 700;
font-size: 12px;
color: #fff;
}
.removeRuleBtn {
width: 24px;
height: 24px;
background: rgba(239, 68, 68, 0.2);
border: none;
border-radius: 4px;
color: #ef4444;
font-size: 14px;
cursor: pointer;
}
.companyRuleFields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.companyRuleField {
display: flex;
flex-direction: column;
gap: 4px;
}
.companyRuleField label {
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
}
.companyRuleField input,
.companyRuleField select {
padding: 6px 8px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: #fff;
font-size: 11px;
}
/* Timing Section */
.timingGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.timingItem {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.timingValue {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 14px;
font-weight: 700;
color: #38bdf8;
margin-bottom: 2px;
}
.timingLabel {
font-size: 9px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
}
/* Action Buttons */
.actionsSection {
display: flex;
gap: 12px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.networkBtn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
}
.btnIcon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btnIcon svg {
width: 16px;
height: 16px;
display: block;
}
/* Responsive */
@media (max-width: 600px) {
.networkStats {
grid-template-columns: repeat(2, 1fr);
}
.timingGrid {
grid-template-columns: repeat(2, 1fr);
}
.configRow {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.configInput,
.configSelect {
width: 100%;
}
}
/* Hero card entrance animations */
.heroSelect.visible .heroCard {
animation: heroCardIn 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.heroSelect.visible .heroCard:nth-child(1) { animation-delay: 100ms; }
.heroSelect.visible .heroCard:nth-child(2) { animation-delay: 180ms; }
.heroSelect.visible .heroCard:nth-child(3) { animation-delay: 260ms; }
.heroSelect.visible .heroCard:nth-child(4) { animation-delay: 340ms; }
.heroSelect.visible .heroCard:nth-child(5) { animation-delay: 420ms; }
@keyframes heroCardIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 800px) {
.heroGrid {
gap: 14px;
}
.heroCard {
width: 150px;
padding: 12px 12px 10px;
}
.heroAvatar {
width: 100px;
height: 100px;
}
}
@media (max-width: 520px) {
.heroGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.heroCard {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.heroTitle,
.heroTitle::before,
.heroTitle::after,
.heroHint {
animation: none !important;
}
.heroSelect::after {
animation: none !important;
opacity: 0;
}
.heroSelect.visible .heroCard {
animation: none !important;
}
.heroCard {
transition: none !important;
}
}
:root[data-theme="dark"] {
--bg0: #000000;
--bg1: #000000;
--app-bg: linear-gradient(180deg, #000000, #000000);
--dot-grid-opacity: 0;
--theme-texture-blend: screen;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
min-height: 100vh;
width: 100%;
margin: 0;
font-family: var(--font-sans-emoji);
color: var(--text);
background: var(--app-bg);
background-color: var(--bg0);
overflow: hidden;
}
/* If JS fails to boot, don't hide the brand row. */
.nojs .brandRow .catWrap,
.nojs .brandRow .brandText {
opacity: 1 !important;
}
.nojs .brandRow .brandText,
.nojs .brandRow .catWrap {
animation: none !important;
transform: none !important;
}
.bg {
position: fixed;
inset: 0;
z-index: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(var(--dot-grid-rgb), var(--dot-grid-alpha)) 1px, transparent 0);
background-size: 28px 28px;
opacity: 1;
pointer-events: none;
filter: none;
}
.bg::before,
.bg::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-repeat: repeat;
opacity: 0;
mix-blend-mode: var(--theme-texture-blend);
transition: opacity 0.2s ease, background-image 0.2s ease;
}
.bg::before {
background-image: var(--theme-texture-image-a);
background-size: var(--theme-texture-size-a);
opacity: var(--theme-texture-alpha-a);
}
.bg::after {
background-image: var(--theme-texture-image-b);
background-size: var(--theme-texture-size-b);
opacity: var(--theme-texture-alpha-b);
}
html[data-theme="dark"] .bg::before,
html[data-theme="dark"] .bg::after {
filter: brightness(1.4) contrast(1.05);
}
html[data-theme="light"] .bg::before,
html[data-theme="light"] .bg::after {
filter: contrast(1.8) brightness(0.85);
}
.shell {
position: relative;
z-index: 2;
min-height: 100vh;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 28px;
padding-top: 40px;
overflow: hidden;
}
/* --------------------------------------------------------------------------
Light background texture
-------------------------------------------------------------------------- */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
display: block;
z-index: 1;
}
body::before {
background: rgba(255, 255, 255, var(--theme-brightness-light));
}
body::after {
background: rgba(0, 0, 0, var(--theme-brightness-dark));
}
/* Light mode base background */
html[data-theme="light"] body {
background: var(--app-bg);
}
/* Hide the dot grid on textured light background */
html[data-theme="light"] body .bg {
opacity: 1;
}
.topRightDock {
position: fixed;
top: 14px;
right: 16px;
z-index: var(--z-tooltip);
display: inline-flex;
align-items: center;
gap: 12px;
}
.prehero .topRightDock {
display: none;
}
.notificationDock {
position: fixed;
bottom: 29px; /* Vertically centered with selectedHero (which is taller) */
left: 200px; /* Position to the right of the selectedHero button (which is ~180px wide) */
z-index: 250;
}
.prehero .notificationDock {
display: none;
}
.notificationBell {
position: relative;
width: 52px;
height: 52px;
border-radius: 12px;
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--card) 70%, transparent);
box-shadow: var(--ui-float-shadow);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.15s ease, color 0.2s ease;
}
.notificationBell:hover {
color: var(--text-strong);
transform: translateY(-1px);
}
.notificationBell:focus-visible {
box-shadow: 0 0 0 4px var(--focus);
}
.notificationBellIcon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.notificationBellIcon svg {
width: 24px;
height: 24px;
display: block;
}
.notificationBellDot {
position: absolute;
top: 7px;
right: 7px;
width: 9px;
height: 9px;
border-radius: 999px;
border: 2px solid var(--card);
background: #ff4d4d;
opacity: 0;
transform: scale(0.7);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.notificationBell--unread .notificationBellDot {
opacity: 1;
transform: scale(1);
animation: notification-pulse 1.6s ease infinite;
}
.notificationBell--unread {
animation: bell-nudge 3.5s ease-in-out infinite;
}
@keyframes notification-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.35); }
70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0.0); }
100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.0); }
}
@keyframes bell-nudge {
0%, 86%, 100% { transform: translateY(0); }
90% { transform: translateY(-2px) rotate(-4deg); }
94% { transform: translateY(0) rotate(3deg); }
98% { transform: translateY(-1px) rotate(-2deg); }
}
.notificationPanel {
position: absolute;
bottom: 60px;
left: 0;
width: 340px;
max-height: min(70vh, 560px);
display: flex;
flex-direction: column;
border-radius: 16px;
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--card) 86%, transparent);
box-shadow: var(--ui-float-shadow);
backdrop-filter: blur(14px);
overflow: hidden;
opacity: 0;
transform: translateY(6px) scale(0.98);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.notificationPanel.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.notificationPanelHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--stroke);
}
.notificationPanelTitle {
font-size: 14px;
font-weight: 700;
color: var(--text-strong);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.notificationPanelSubtitle {
font-size: 12px;
color: var(--muted);
margin-top: 4px;
}
.notificationPanelClose {
border: none;
background: color-mix(in srgb, var(--card) 60%, transparent);
color: var(--muted);
border-radius: 10px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: color 0.2s ease, transform 0.15s ease;
}
.notificationPanelClose svg {
width: 14px;
height: 14px;
}
.notificationPanelClose:hover {
color: var(--text-strong);
transform: translateY(-1px);
}
.notificationPanelList {
overflow-y: auto;
flex: 1;
min-height: 0;
padding: 6px 0;
}
.notificationItem {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}
.notificationItem:last-child {
border-bottom: none;
}
.notificationItem--unread {
background: color-mix(in srgb, var(--card) 65%, transparent);
}
.notificationAvatar {
width: 36px;
height: 36px;
border-radius: 12px;
overflow: hidden;
background: color-mix(in srgb, var(--card) 70%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: var(--text-strong);
}
.notificationAvatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.notificationBody {
display: flex;
flex-direction: column;
gap: 4px;
}
.notificationName {
font-size: 13px;
font-weight: 700;
color: var(--text-strong);
}
.notificationName a {
color: inherit;
text-decoration: none;
}
.notificationRole {
font-size: 12px;
color: var(--text);
}
.notificationMeta {
font-size: 11px;
color: var(--muted);
}
.notificationMeta a {
color: var(--accent);
text-decoration: none;
}
.notificationMeta a:hover {
text-decoration: underline;
}
.notificationInsight {
font-size: 11px;
color: var(--muted2);
}
.notificationTag {
margin-top: 2px;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.08em;
align-self: flex-start;
background: color-mix(in srgb, var(--accent) 20%, transparent);
color: var(--accent-light);
}
.notificationTag--icp {
background: color-mix(in srgb, var(--accent2) 18%, transparent);
color: var(--accent2);
}
.notificationDegree {
font-size: 11px;
font-weight: 700;
padding: 4px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--accent-light);
text-transform: uppercase;
letter-spacing: 0.08em;
align-self: start;
}
.notificationEmpty {
padding: 18px 16px;
font-size: 12px;
color: var(--muted);
}
.notificationMore {
padding: 10px 16px 14px;
display: flex;
justify-content: center;
}
.notificationMoreBtn {
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--card) 70%, transparent);
color: var(--text);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 6px 14px;
cursor: pointer;
transition: transform 0.15s ease, color 0.2s ease;
}
.notificationMoreBtn:hover {
color: var(--text-strong);
transform: translateY(-1px);
}
.themeDock,
.dataDock {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 8px 10px;
border-radius: 18px;
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--card) 70%, transparent);
box-shadow: var(--ui-float-shadow);
backdrop-filter: blur(10px);
}
.themeSliders {
display: grid;
gap: 6px;
padding-top: 6px;
border-top: 1px solid var(--stroke);
width: 110px;
}
.themeSliderGroup {
display: flex;
align-items: center;
gap: 8px;
}
.themeSliderLabel {
min-width: 40px;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.themeSliderInput {
width: 100%;
appearance: none;
height: 3px;
border-radius: 999px;
background: color-mix(in srgb, var(--stroke) 70%, transparent);
outline: none;
}
.themeSliderInput::-webkit-slider-thumb {
appearance: none;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--accent);
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: var(--ui-float-shadow);
cursor: pointer;
}
.themeSliderInput::-moz-range-thumb {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--accent);
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: var(--ui-float-shadow);
cursor: pointer;
}
:root[data-theme="light"] .themeSliderInput {
background: rgba(12, 18, 34, 0.12);
}
:root[data-theme="light"] .themeSliderInput::-webkit-slider-thumb {
border-color: rgba(12, 18, 34, 0.22);
}
:root[data-theme="light"] .themeSliderInput::-moz-range-thumb {
border-color: rgba(12, 18, 34, 0.22);
}
.themeDockLabel,
.dataDockLabel {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--muted);
user-select: none;
}
.themeDockToggle,
.dataDockButton {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
color: var(--text);
border-radius: 10px;
padding: 4px 6px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
outline: none;
transition: transform 0.15s ease, color 0.2s ease;
}
.themeDockToggle:hover,
.dataDockButton:hover {
color: var(--text-strong);
transform: translateY(-1px);
}
.themeDockToggle.is-busy,
.dataDockButton.is-busy {
pointer-events: none;
opacity: 0.75;
transform: none;
}
.themeDockToggle:focus-visible,
.dataDockButton:focus-visible {
box-shadow: 0 0 0 4px var(--focus);
}
.dataDockButton.is-connected {
color: #b8f3d3;
}
.dataDockIcon {
width: 20px;
height: 20px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--card) 55%, transparent);
font-size: 14px;
line-height: 1;
}
.dataDockText {
text-transform: uppercase;
letter-spacing: 0.06em;
}
.topIconBtn {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--card) 70%, transparent);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--ui-float-shadow);
backdrop-filter: blur(10px);
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease;
}
.topIconBtn:hover {
transform: translateY(-1px);
border-color: rgba(148, 163, 184, 0.4);
}
.topIconBtn.is-active {
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.themeToggleIcon {
width: 20px;
height: 20px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--card) 55%, transparent);
font-size: 0;
}
.themeToggleIcon svg {
width: 14px;
height: 14px;
display: block;
}
.themeToggleLabel {
text-transform: uppercase;
letter-spacing: 0.06em;
}
@media (max-width: 720px) {
.topRightDock {
top: 10px;
right: 10px;
gap: 8px;
}
.themeDockLabel {
display: none;
}
.notificationPanel {
width: min(92vw, 360px);
left: 0;
}
}
@property --sky1 {
syntax: "";
inherits: false;
initial-value: rgba(22, 20, 22, 0.62);
}
@property --sky2 {
syntax: "";
inherits: false;
initial-value: rgba(86, 60, 44, 0.7);
}
@property --sky3 {
syntax: "";
inherits: false;
initial-value: rgba(148, 96, 66, 0.76);
}
.themeTransition {
position: fixed;
inset: 0;
--sky1: rgba(22, 20, 22, 0.62);
--sky2: rgba(86, 60, 44, 0.7);
--sky3: rgba(148, 96, 66, 0.76);
opacity: 0;
pointer-events: none;
display: none;
z-index: 9999;
will-change: opacity;
isolation: isolate;
background: radial-gradient(120% 120% at 50% 120%, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%);
}
html.theme-transitioning .themeTransition {
display: block;
}
html.theme-transitioning-active .themeTransition {
animation: themeToLight 2s linear both;
}
html.theme-transitioning-active[data-theme-next="light"] .themeTransition {
animation-name: themeToLight;
}
html.theme-transitioning-active[data-theme-next="dark"] .themeTransition {
animation-name: themeToDark;
}
@keyframes themeToLight {
0% {
opacity: 0;
--sky1: rgba(22, 20, 22, 0.62);
--sky2: rgba(86, 60, 44, 0.7);
--sky3: rgba(148, 96, 66, 0.76);
}
50% {
opacity: 1;
--sky1: rgba(194, 120, 72, 0.78);
--sky2: rgba(214, 182, 156, 0.72);
--sky3: rgba(124, 96, 80, 0.62);
}
100% {
opacity: 0;
--sky1: rgba(255, 250, 244, 0.9);
--sky2: rgba(238, 214, 196, 0.78);
--sky3: rgba(172, 160, 148, 0.6);
}
}
@keyframes themeToDark {
0% {
opacity: 0;
--sky1: rgba(255, 250, 244, 0.9);
--sky2: rgba(238, 214, 196, 0.78);
--sky3: rgba(172, 160, 148, 0.6);
}
50% {
opacity: 1;
--sky1: rgba(194, 120, 72, 0.78);
--sky2: rgba(160, 110, 86, 0.72);
--sky3: rgba(86, 66, 56, 0.64);
}
100% {
opacity: 0;
--sky1: rgba(18, 18, 22, 0.64);
--sky2: rgba(28, 24, 22, 0.62);
--sky3: rgba(32, 28, 26, 0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.themeTransition {
transition: none;
animation: none;
}
}
.centerStack {
width: var(--shell-width);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
justify-content: center;
flex: 1;
min-height: 0; /* Allow flex shrink */
max-height: calc(100vh - 100px);
transform: none;
}
/* --------------------------------------------------------------------------
Home surface templates
-------------------------------------------------------------------------- */
.homeSurface {
position: relative;
padding: 22px;
border-radius: 26px;
overflow: hidden;
border: 1px solid var(--home-surface-border);
background: var(--home-surface-bg);
box-shadow: var(--home-surface-shadow);
}
/* keep content above overlays */
/* keep content above overlays */
.homeSurface > * {
position: relative;
z-index: 2;
}
/* cloth weave */
.homeSurface--felt::before {
content: "";
position: absolute;
inset: -24%;
pointer-events: none;
opacity: var(--felt-weave-opacity);
mix-blend-mode: var(--felt-weave-blend);
transform: rotate(-0.6deg) scale(1.02);
z-index: 0;
background-image:
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 6px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 7px
),
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 13px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 17px
);
filter: blur(0.55px) contrast(1.10) brightness(1.05);
}
/* fiber fuzz */
.homeSurface--felt::after {
content: "";
position: absolute;
inset: -24%;
pointer-events: none;
opacity: var(--felt-fuzz-opacity);
mix-blend-mode: var(--felt-fuzz-blend);
transform: rotate(0.3deg);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
background-size: 720px 720px;
background-position: 60px 20px;
}
/* Home-only: the felt surface is applied only on the home route via JS. */
.brandRow {
width: var(--shell-width);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 0;
}
.brandText {
transform: none;
text-align: center;
max-width: var(--shell-width);
}
.jpTitle {
font-family: 'Outfit', var(--font-sans);
font-weight: 900;
font-size: clamp(32px, 5vw, 64px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--brand);
}
.viaTitle {
font-family: 'Outfit', var(--font-sans);
font-weight: 900;
font-size: clamp(72px, 12vw, 140px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--brand);
position: relative;
display: inline-block;
text-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
animation: viaPop 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.viaTitle::before {
content: none;
}
.viaTitle::after {
content: none;
}
@keyframes viaPop {
0% { opacity: 0; transform: translateY(12px) scale(0.98); }
60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* VEA1 Mode: Animated VIA Logo - Purple gradient with glow effect */
body[data-ai-mode="vea1"] .viaTitle {
background: linear-gradient(
135deg,
#8b5cf6 0%,
#a78bfa 25%,
#c4b5fd 50%,
#a78bfa 75%,
#8b5cf6 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: viaVea1Gradient 3s ease-in-out infinite, viaVea1Glow 2s ease-in-out infinite alternate;
text-shadow: none;
filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4));
}
@keyframes viaVea1Gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes viaVea1Glow {
0% { filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.15)); }
100% { filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.5)) drop-shadow(0 0 50px rgba(139, 92, 246, 0.25)); }
}
/* VEA1 Mode: Loading screen VIA also gets the treatment */
body[data-ai-mode="vea1"] .loadingVia {
background: linear-gradient(135deg, #8b5cf6, #a78bfa, #8b5cf6);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: viaVea1Gradient 3s ease-in-out infinite;
}
/* Auto Mode: Subtle amber glow (optional, less aggressive) */
body[data-ai-mode="auto"] .viaTitle {
text-shadow: 0 0 20px rgba(245, 158, 11, 0.2), 0 10px 24px rgba(15, 23, 42, 0.12);
}
/* VEA1 Mode: Glowing chat bar - powerful AI mode indicator */
body[data-ai-mode="vea1"] .aiChatInputWrap {
position: relative;
border-color: rgba(139, 92, 246, 0.5);
background: linear-gradient(135deg, #0e1117 0%, #13111f 100%);
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.3),
0 0 20px rgba(139, 92, 246, 0.2),
0 0 40px rgba(139, 92, 246, 0.1),
0 12px 28px rgba(8, 10, 18, 0.45),
inset 0 1px 0 rgba(139, 92, 246, 0.15);
animation: vea1BarGlow 2s ease-in-out infinite alternate;
}
body[data-ai-mode="vea1"] .aiChatInputWrap::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.6) 0%,
rgba(167, 139, 250, 0.4) 25%,
rgba(196, 181, 253, 0.3) 50%,
rgba(167, 139, 250, 0.4) 75%,
rgba(139, 92, 246, 0.6) 100%
);
background-size: 300% 300%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: vea1BorderFlow 4s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes vea1BarGlow {
0% {
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.3),
0 0 15px rgba(139, 92, 246, 0.15),
0 0 30px rgba(139, 92, 246, 0.08),
0 12px 28px rgba(8, 10, 18, 0.45),
inset 0 1px 0 rgba(139, 92, 246, 0.1);
}
100% {
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.5),
0 0 25px rgba(139, 92, 246, 0.25),
0 0 50px rgba(139, 92, 246, 0.15),
0 12px 28px rgba(8, 10, 18, 0.45),
inset 0 1px 0 rgba(139, 92, 246, 0.2);
}
}
@keyframes vea1BorderFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body[data-ai-mode="vea1"] .aiChatInputWrap:focus-within {
border-color: rgba(139, 92, 246, 0.7);
box-shadow:
0 0 0 4px rgba(139, 92, 246, 0.25),
0 0 30px rgba(139, 92, 246, 0.3),
0 0 60px rgba(139, 92, 246, 0.15),
0 18px 36px rgba(8, 10, 18, 0.55),
inset 0 1px 0 rgba(139, 92, 246, 0.2);
}
/* Light mode VEA1 glow */
:root[data-theme="light"] body[data-ai-mode="vea1"] .aiChatInputWrap {
background: linear-gradient(135deg, #fefefe 0%, #f8f5ff 100%);
border-color: rgba(139, 92, 246, 0.4);
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.25),
0 0 20px rgba(139, 92, 246, 0.15),
0 0 40px rgba(139, 92, 246, 0.08),
0 10px 24px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
:root[data-theme="light"] body[data-ai-mode="vea1"] .aiChatInputWrap:focus-within {
box-shadow:
0 0 0 4px rgba(139, 92, 246, 0.2),
0 0 30px rgba(139, 92, 246, 0.2),
0 0 60px rgba(139, 92, 246, 0.1),
0 14px 28px rgba(15, 23, 42, 0.12);
}
/* Auto Mode: Subtle amber glow on chat bar */
body[data-ai-mode="auto"] .aiChatInputWrap {
border-color: rgba(245, 158, 11, 0.3);
box-shadow:
0 0 0 1px rgba(245, 158, 11, 0.15),
0 0 15px rgba(245, 158, 11, 0.08),
0 12px 28px rgba(8, 10, 18, 0.45),
inset 0 1px 0 rgba(245, 158, 11, 0.05);
}
@media (prefers-reduced-motion: reduce) {
.viaTitle {
animation: none !important;
}
.viaTitle::before {
animation: none !important;
}
.loadingVia {
animation: none !important;
}
}
.jpChar {
display: inline-block;
opacity: 0;
transform: translateY(22px) scale(0.97);
/* Target ~3.5s total intro across all characters (duration + stagger) */
animation: jpPop 1300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 155ms + 200ms);
will-change: transform, opacity;
}
.jpBreak {
display: block;
height: 0;
}
.launchRow {
width: var(--shell-width);
margin-top: 8px;
display: flex;
gap: 10px;
align-items: center;
}
.progressRow {
width: var(--shell-width);
margin-top: 18px;
display: none;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.centerStack.isRunning .launchRow {
display: none;
}
.centerStack.isRunning .progressRow {
display: flex;
}
.scoreLabBanner {
/* 16:10 card (not a long strip) */
/* Shrink ~60% from 720px → ~432px */
width: min(432px, 92vw);
aspect-ratio: 16 / 10;
height: auto;
margin-top: 12px;
display: flex;
align-items: center;
gap: 12px;
padding: 0;
min-height: 0;
position: relative;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(10, 12, 22, 0.72);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
isolation: isolate;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.scoreLabBanner::before {
/* Full-card noisy / network background */
content: "";
position: absolute;
inset: 0;
opacity: 0.85;
pointer-events: none;
z-index: -2;
background:
radial-gradient(ellipse 220px 160px at 18% 55%, rgba(56, 189, 248, 0.22), transparent 62%),
radial-gradient(ellipse 220px 160px at 30% 80%, rgba(251, 191, 36, 0.18), transparent 64%),
radial-gradient(ellipse 280px 220px at 75% 35%, rgba(167, 139, 250, 0.14), transparent 66%),
/* SVG linework */
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='820'%20height='360'%20viewBox='0%200%20820%20360'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.18'%20stroke-width='1'%3E%3Cpath%20d='M40%20260%20L160%20110%20L260%20235%20L390%2080%20L520%20195%20L700%2085'/%3E%3Cpath%20d='M90%20305%20L210%20190%20L340%20310%20L460%20145%20L620%20230'/%3E%3Cpath%20d='M160%20110%20L210%20190%20L260%20235'/%3E%3Cpath%20d='M390%2080%20L460%20145%20L520%20195'/%3E%3C/g%3E%3Cg%3E%3Ccircle%20cx='40'%20cy='260'%20r='5'%20fill='%2338bdf8'%20fill-opacity='0.55'/%3E%3Ccircle%20cx='160'%20cy='110'%20r='5'%20fill='%2393c5fd'%20fill-opacity='0.52'/%3E%3Ccircle%20cx='260'%20cy='235'%20r='5'%20fill='%23fbbf24'%20fill-opacity='0.52'/%3E%3Ccircle%20cx='390'%20cy='80'%20r='5'%20fill='%23fb7185'%20fill-opacity='0.44'/%3E%3Ccircle%20cx='520'%20cy='195'%20r='5'%20fill='%23fbbf24'%20fill-opacity='0.48'/%3E%3Ccircle%20cx='700'%20cy='85'%20r='5'%20fill='%2338bdf8'%20fill-opacity='0.44'/%3E%3Ccircle%20cx='90'%20cy='305'%20r='4'%20fill='%23ffffff'%20fill-opacity='0.30'/%3E%3Ccircle%20cx='210'%20cy='190'%20r='4'%20fill='%23ffffff'%20fill-opacity='0.30'/%3E%3Ccircle%20cx='340'%20cy='310'%20r='4'%20fill='%23ffffff'%20fill-opacity='0.30'/%3E%3Ccircle%20cx='460'%20cy='145'%20r='4'%20fill='%23ffffff'%20fill-opacity='0.30'/%3E%3Ccircle%20cx='620'%20cy='230'%20r='4'%20fill='%23ffffff'%20fill-opacity='0.30'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: saturate(1.08) contrast(1.04);
}
.scoreLabBanner::after {
content: "";
position: absolute;
inset: 0;
/* Darken + vignette so text stays readable on the noisy background */
background:
radial-gradient(ellipse 280px 220px at 35% 55%, rgba(0, 0, 0, 0.25), rgba(0,0,0,0.64) 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.00) 55%),
linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
z-index: -1;
}
.scoreLabBannerMedia {
width: 84px;
height: 100%;
align-self: stretch;
display: grid;
place-items: center;
border-right: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(0, 0, 0, 0.18);
position: relative;
overflow: hidden;
}
.scoreLabBannerMedia::before {
content: "";
position: absolute;
inset: -24px;
opacity: 0.55;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: rotate(-8deg);
pointer-events: none;
/* keep a hint of linework behind the icon */
background-image: none;
}
.scoreLabBannerMedia::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.20) 100%);
pointer-events: none;
}
.scoreLabBanner:hover {
transform: translateY(-1px);
border-color: rgba(251, 191, 36, 0.34);
filter: brightness(1.06);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.52),
0 0 0 1px rgba(251, 191, 36, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.scoreLabBanner:active {
transform: translateY(0px);
filter: brightness(1.02);
}
.scoreLabBannerIcon { font-size: 18px; opacity: 0.95; text-shadow: 0 10px 25px rgba(0,0,0,0.65); }
.scoreLabBannerText {
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
text-align: left;
/* glass backing so text stays legible on noisy bg */
background: rgba(0, 0, 0, 0.30);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.scoreLabBannerTitle {
font-weight: 900;
font-size: 15px;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1.1;
text-shadow: 0 10px 26px rgba(0,0,0,0.85);
}
.scoreLabBannerSub {
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.2;
text-shadow: 0 10px 26px rgba(0,0,0,0.85);
}
.scoreLabBannerChevron {
padding-right: 14px;
margin-left: auto;
font-weight: 900;
opacity: 0.55;
}
/* Compact banner - rectangle card with image backdrop (identical to pathLabBanner) */
.scoreLabBannerCompact {
width: min(320px, 85vw);
aspect-ratio: 16 / 10;
height: auto;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
gap: 0;
border-radius: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(56, 189, 248, 0.28);
background:
url('./assets/network-bg.png') center center / cover no-repeat,
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(56, 189, 248, 0.22) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 30% 60%, rgba(167, 139, 250, 0.18) 0%, transparent 55%),
linear-gradient(135deg, #07121a 0%, #05080e 100%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(56, 189, 248, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.scoreLabBannerCompact::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.78) 100%);
pointer-events: none;
z-index: 1;
}
.scoreLabBannerCompact::after {
display: none;
}
.scoreLabBannerCompact:hover {
transform: translateY(-2px) scale(1.02);
border-color: rgba(56, 189, 248, 0.48);
filter: brightness(1.03) saturate(1.05);
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.62),
0 0 14px rgba(56, 189, 248, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.scoreLabBannerCompact .scoreLabBannerTitle {
position: relative;
z-index: 2;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.16em;
text-align: center;
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
padding: 12px 16px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.52) 100%);
}
.progressText {
font-weight: 900;
font-size: 16px;
color: rgba(255, 255, 255, 0.88);
text-align: center;
line-height: 1.25;
}
.progressText a {
color: rgba(251, 191, 36, 0.98);
text-decoration: none;
border-bottom: 1px solid rgba(251, 191, 36, 0.35);
}
.progressText a:hover {
border-bottom-color: rgba(251, 191, 36, 0.75);
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Lab banners row (Scoring Lab + Pathways) */
/* ────────────────────────────────────────────────────────────────────────── */
.labBannersRow {
width: var(--shell-width);
margin-top: 12px;
display: flex;
gap: 12px;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 40;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Unified Neon Banner System (Cyberpunk Style) */
/* ────────────────────────────────────────────────────────────────────────── */
/* Base neon banner styles */
.neonBanner {
--neon-primary: 168, 85, 247; /* Default purple */
--neon-accent: 236, 72, 153; /* Default pink accent */
--neon-bg-start: #0d0612;
--neon-bg-end: #1a0a2e;
width: min(200px, 50vw);
aspect-ratio: 16 / 10;
height: auto;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
border-radius: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
border: 1px solid rgba(var(--neon-primary), 0.45);
background:
linear-gradient(135deg, rgba(var(--neon-primary), 0.2) 0%, rgba(var(--neon-primary), 0.08) 50%, rgba(var(--neon-primary), 0.04) 100%),
radial-gradient(ellipse at 70% 20%, rgba(var(--neon-accent), 0.25) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
linear-gradient(180deg, var(--neon-bg-start) 0%, var(--neon-bg-end) 100%);
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.55),
0 0 30px rgba(var(--neon-primary), 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(var(--neon-primary), 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
/* Animated glow layer */
.neonBannerGlow {
position: absolute;
inset: -2px;
background: linear-gradient(
45deg,
transparent 30%,
rgba(var(--neon-primary), 0.3) 50%,
transparent 70%
);
background-size: 200% 200%;
animation: neonGlowSweep 3s ease-in-out infinite;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.neonBanner:hover .neonBannerGlow {
opacity: 1;
}
@keyframes neonGlowSweep {
0%, 100% { background-position: 200% 0%; }
50% { background-position: -100% 0%; }
}
/* Scanline overlay for cyberpunk feel */
.neonBanner::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.15) 2px,
rgba(0, 0, 0, 0.15) 4px
);
pointer-events: none;
z-index: 1;
opacity: 0.4;
}
/* Bottom gradient for text readability */
.neonBanner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(13, 6, 18, 0.85) 100%);
pointer-events: none;
z-index: 2;
}
.neonBannerText {
position: relative;
z-index: 3;
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.95);
text-shadow:
0 0 10px rgba(var(--neon-primary), 0.8),
0 0 20px rgba(var(--neon-primary), 0.5),
0 0 40px rgba(var(--neon-primary), 0.3);
}
.neonBannerDot {
color: rgb(var(--neon-accent));
animation: neonDotPulse 2s ease-in-out infinite;
display: inline-block;
}
@keyframes neonDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.neonBannerSub {
position: relative;
z-index: 3;
font-family: var(--font-sans);
font-size: 42px;
font-weight: 700;
letter-spacing: 0.05em;
color: rgba(var(--neon-primary), 0.9);
text-shadow: 0 0 15px rgba(var(--neon-primary), 0.5);
}
.neonBanner:hover {
transform: translateY(-3px) scale(1.04);
border-color: rgba(var(--neon-primary), 0.7);
filter: brightness(1.1) saturate(1.15);
box-shadow:
0 15px 50px rgba(0, 0, 0, 0.7),
0 0 45px rgba(var(--neon-primary), 0.35),
0 0 15px rgba(var(--neon-accent), 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.neonBanner:active {
transform: translateY(-1px) scale(1.01);
filter: brightness(1.05);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Color Variants */
/* ─────────────────────────────────────────────────────────────────────────── */
/* Gold/Amber - Scoring Lab */
.neonBanner--gold {
--neon-primary: 251, 191, 36;
--neon-accent: 245, 158, 11;
--neon-bg-start: #0d0a04;
--neon-bg-end: #1a1408;
}
/* Cyan/Teal - Pathways */
.neonBanner--cyan {
--neon-primary: 34, 211, 238;
--neon-accent: 56, 189, 248;
--neon-bg-start: #040d0f;
--neon-bg-end: #081a1e;
}
/* Emerald/Green - Uploads */
.neonBanner--emerald {
--neon-primary: 52, 211, 153;
--neon-accent: 16, 185, 129;
--neon-bg-start: #040d08;
--neon-bg-end: #081a12;
}
/* Purple/Violet - Dagota (default, shown explicitly) */
.neonBanner--purple {
--neon-primary: 168, 85, 247;
--neon-accent: 236, 72, 153;
--neon-bg-start: #0d0612;
--neon-bg-end: #1a0a2e;
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Page-wide Loading Bar */
/* ────────────────────────────────────────────────────────────────────────── */
.pageLoadingBar {
display: none;
}
.pageLoadingBar.active {
opacity: 1;
}
.pageLoadingBar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(90deg, #6366f1, #a78bfa, #c4b5fd);
box-shadow: 0 0 15px rgba(99, 102, 241, 0.6), 0 0 30px rgba(99, 102, 241, 0.4);
transition: width 0.3s ease;
}
.pageLoadingBar.active::before {
animation: pageLoadProgress 2s ease-in-out infinite;
}
.pageLoadingBar.finishing::before {
animation: none;
width: 100%;
transition: width 0.2s ease;
}
@keyframes pageLoadProgress {
0% {
width: 0%;
left: 0;
}
50% {
width: 60%;
left: 20%;
}
100% {
width: 0%;
left: 100%;
}
}
/* Variant colors for different contexts */
.pageLoadingBar.gold::before {
background: linear-gradient(90deg, #f59e0b, #fbbf24, #fcd34d);
box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 20px rgba(251, 191, 36, 0.3);
}
.pageLoadingBar.emerald::before {
background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
box-shadow: 0 0 10px rgba(52, 211, 153, 0.5), 0 0 20px rgba(52, 211, 153, 0.3);
}
.pageLoadingBar.cyan::before {
background: linear-gradient(90deg, #06b6d4, #22d3ee, #67e8f9);
box-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 0 0 20px rgba(34, 211, 238, 0.3);
}
/* ────────────────────────────────────────────────────────────────────────── */
/* AI Chat Bar - Primary Homepage Interaction */
/* ────────────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* AI Chat - Full-page immersive experience */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Chat Sidebar (Collapsible) ─── */
.aiChatSidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 260px;
background: rgba(10, 10, 18, 0.95);
border-right: 1px solid rgba(255, 255, 255, 0.08);
z-index: 200;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
}
.aiChatSidebar.is-open {
transform: translateX(0);
}
:root[data-theme="light"] .aiChatSidebar {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(120, 115, 85, 0.18);
}
/* Sidebar toggle button (always visible) */
.sidebarToggle {
position: fixed;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(20, 20, 35, 0.9);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
z-index: 201;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
}
.aiChatBar.hasMessages ~ .sidebarToggle,
.centerStack:has(.aiChatBar.hasMessages) .sidebarToggle {
opacity: 1;
pointer-events: auto;
}
.sidebarToggle:hover {
background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.5);
color: #eef2ff;
}
.sidebarToggle svg {
width: 20px;
height: 20px;
transition: transform 0.25s ease;
}
.aiChatSidebar.is-open ~ .sidebarToggle {
/* Position set dynamically by JS based on sidebar width */
}
.aiChatSidebar.is-open ~ .sidebarToggle svg {
transform: rotate(180deg);
}
:root[data-theme="light"] .sidebarToggle {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.7);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
:root[data-theme="light"] .sidebarToggle:hover {
background: #eff6ff;
border-color: rgba(37, 99, 235, 0.45);
color: #1d4ed8;
}
/* Sidebar header */
.sidebarHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebarTitle {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.01em;
}
:root[data-theme="light"] .sidebarTitle {
color: #0f172a;
}
:root[data-theme="light"] .sidebarHeader {
border-color: rgba(15, 23, 42, 0.08);
}
.sidebarNewChat {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 8px;
color: #a5b4fc;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.sidebarNewChat:hover {
background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.5);
color: #c7d2fe;
}
.sidebarNewChat svg {
width: 14px;
height: 14px;
}
:root[data-theme="light"] .sidebarNewChat {
background: rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.25);
color: #2563eb;
}
:root[data-theme="light"] .sidebarNewChat:hover {
background: rgba(37, 99, 235, 0.15);
border-color: rgba(37, 99, 235, 0.4);
}
/* Sidebar content (scrollable) */
.sidebarContent {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.sidebarContent::-webkit-scrollbar {
width: 4px;
}
.sidebarContent::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
/* Sidebar resize handle */
.sidebarResizeHandle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 6px;
cursor: ew-resize;
background: transparent;
transition: background 0.15s ease;
z-index: 10;
}
.sidebarResizeHandle:hover,
.sidebarResizeHandle:active {
background: rgba(99, 102, 241, 0.4);
}
:root[data-theme="light"] .sidebarResizeHandle:hover,
:root[data-theme="light"] .sidebarResizeHandle:active {
background: rgba(99, 102, 241, 0.3);
}
/* Section headers */
.sidebarSection {
padding: 0 8px;
margin-bottom: 8px;
}
.sidebarSectionHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.4);
}
:root[data-theme="light"] .sidebarSectionHeader {
color: rgba(15, 23, 42, 0.45);
}
.sidebarSectionAction {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 2px;
border-radius: 4px;
display: flex;
transition: all 0.12s ease;
}
.sidebarSectionAction:hover {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.sidebarSectionAction svg {
width: 12px;
height: 12px;
}
/* Chat items (both active and history) */
.sidebarItem {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin: 0 8px 2px;
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
position: relative;
}
.sidebarItem:hover {
background: rgba(255, 255, 255, 0.06);
}
.sidebarItem--active {
background: rgba(99, 102, 241, 0.15);
}
.sidebarItem--active:hover {
background: rgba(99, 102, 241, 0.2);
}
:root[data-theme="light"] .sidebarItem:hover {
background: rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .sidebarItem--active {
background: rgba(37, 99, 235, 0.1);
}
:root[data-theme="light"] .sidebarItem--active:hover {
background: rgba(37, 99, 235, 0.15);
}
.sidebarItemIcon {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
flex-shrink: 0;
}
.sidebarItem--active .sidebarItemIcon {
background: rgba(99, 102, 241, 0.3);
color: #c7d2fe;
}
:root[data-theme="light"] .sidebarItemIcon {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sidebarItem--active .sidebarItemIcon {
background: rgba(37, 99, 235, 0.2);
color: #2563eb;
}
.sidebarItemContent {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebarItemName {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:root[data-theme="light"] .sidebarItemName {
color: #0f172a;
}
.sidebarItemMeta {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
:root[data-theme="light"] .sidebarItemMeta {
color: rgba(15, 23, 42, 0.5);
}
.sidebarItemClose {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
opacity: 0;
transition: all 0.12s ease;
flex-shrink: 0;
}
.sidebarItem:hover .sidebarItemClose {
opacity: 1;
}
.sidebarItemClose:hover {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.sidebarItemClose svg {
width: 12px;
height: 12px;
}
/* Empty state */
.sidebarEmpty {
padding: 24px 16px;
text-align: center;
color: rgba(255, 255, 255, 0.35);
font-size: 12px;
}
:root[data-theme="light"] .sidebarEmpty {
color: rgba(15, 23, 42, 0.4);
}
/* Sidebar backdrop (click to close, no darkening) */
.sidebarBackdrop {
position: fixed;
inset: 0;
background: transparent;
z-index: 199;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
}
.aiChatSidebar.is-open ~ .sidebarBackdrop {
opacity: 1;
visibility: visible;
}
/* ─── Sticky Chat Tabs (minimal edge tabs) ─── */
.stickyChats {
position: fixed;
left: 0;
top: 80px; /* Align under top bar */
display: flex;
flex-direction: column;
gap: 2px;
z-index: 198;
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Hide sticky tabs when sidebar is open */
.aiChatSidebar.is-open ~ .stickyChats,
body:has(.aiChatSidebar.is-open) .stickyChats {
opacity: 0;
pointer-events: none;
transform: translateX(-20px);
}
.stickyTag {
display: flex;
align-items: center;
gap: 0;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
transition: transform 0.15s ease;
}
.stickyTag:hover {
transform: translateX(2px);
}
/* Hidden - tooltip shows the name instead */
.stickyTagName {
display: none;
}
.stickyTagNum {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 30, 50, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid transparent;
border-radius: 0 6px 6px 0;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
transition: all 0.2s ease;
backdrop-filter: blur(12px);
}
.stickyTag:hover .stickyTagNum {
background: rgba(40, 40, 65, 0.95);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
}
.stickyTag--active .stickyTagNum {
border-left-color: #6366f1;
color: rgba(255, 255, 255, 0.9);
background: rgba(99, 102, 241, 0.15);
}
.stickyTag--active:hover .stickyTagNum {
background: rgba(99, 102, 241, 0.25);
}
/* Light theme */
:root[data-theme="light"] .stickyTagNum {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(15, 23, 42, 0.1);
color: rgba(15, 23, 42, 0.4);
box-shadow: 2px 0 8px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .stickyTag:hover .stickyTagNum {
background: white;
border-color: rgba(15, 23, 42, 0.15);
color: #334155;
}
:root[data-theme="light"] .stickyTag--active .stickyTagNum {
border-left-color: #3b82f6;
color: #1e40af;
background: rgba(59, 130, 246, 0.08);
}
:root[data-theme="light"] .stickyTag--active:hover .stickyTagNum {
background: rgba(59, 130, 246, 0.12);
}
/* ─── CRM Workspace Sidebar Button ─── */
.sidebarCrmSection {
padding: 8px 12px;
border-bottom: 1px solid rgba(163, 163, 118, 0.1);
}
:root[data-theme="light"] .sidebarCrmSection {
border-bottom-color: rgba(100, 95, 60, 0.1);
}
.crmWorkspaceSidebarBtn {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(163, 163, 118, 0.06);
border: 1px solid rgba(163, 163, 118, 0.2);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.crmWorkspaceSidebarBtn:hover {
background: rgba(163, 163, 118, 0.1);
border-color: rgba(163, 163, 118, 0.3);
transform: translateY(-1px);
}
.crmWorkspaceSidebarBtn__icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(163, 163, 118, 0.15);
border-radius: 8px;
color: rgba(163, 163, 118, 0.9);
flex-shrink: 0;
}
.crmWorkspaceSidebarBtn__icon svg {
width: 18px;
height: 18px;
}
.crmWorkspaceSidebarBtn__content {
flex: 1;
min-width: 0;
}
.crmWorkspaceSidebarBtn__title {
display: block;
font-size: 14px;
font-weight: 600;
color: rgba(226, 232, 240, 0.9);
}
:root[data-theme="light"] .crmWorkspaceSidebarBtn__title {
color: rgba(30, 30, 25, 0.9);
}
.crmWorkspaceSidebarBtn__subtitle {
display: block;
font-size: 12px;
color: rgba(163, 163, 118, 0.7);
margin-top: 2px;
}
:root[data-theme="light"] .crmWorkspaceSidebarBtn__subtitle {
color: rgba(100, 95, 60, 0.7);
}
.crmWorkspaceSidebarBtn__hotkey {
font-size: 11px;
font-weight: 500;
color: rgba(163, 163, 118, 0.6);
background: rgba(163, 163, 118, 0.1);
padding: 4px 8px;
border-radius: 4px;
flex-shrink: 0;
}
:root[data-theme="light"] .crmWorkspaceSidebarBtn__hotkey {
color: rgba(100, 95, 60, 0.6);
background: rgba(100, 95, 60, 0.1);
}
/* ─── CRM Workspace Card ─── */
.objectCard--crmWorkspace {
border-color: rgba(163, 163, 118, 0.25);
background: rgba(163, 163, 118, 0.03);
max-height: 700px;
display: flex;
flex-direction: column;
}
.objectCard--crmWorkspace .objectCard__header {
border-bottom-color: rgba(163, 163, 118, 0.15);
background: rgba(163, 163, 118, 0.04);
flex-shrink: 0;
}
.crmWorkspaceIcon {
color: rgba(163, 163, 118, 0.85) !important;
}
.crmWorkspaceBody {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; /* Important for flex children to respect overflow */
overflow: hidden;
}
.crmWorkspaceScrollable {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.crmWorkspaceContent {
padding: 0 !important;
}
/* Loading spinner */
.crmWorkspaceLoading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.crmWorkspaceSpinner {
width: 32px;
height: 32px;
border: 3px solid rgba(163, 163, 118, 0.2);
border-top-color: rgba(163, 163, 118, 0.8);
border-radius: 50%;
animation: crmSpinnerRotate 0.8s linear infinite;
}
@keyframes crmSpinnerRotate {
to { transform: rotate(360deg); }
}
/* Refresh button in header */
.crmWorkspaceRefresh {
margin-left: auto;
background: transparent;
border: none;
color: var(--muted2);
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
transition: all 0.15s ease;
}
.crmWorkspaceRefresh:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text);
}
:root[data-theme="light"] .crmWorkspaceRefresh:hover {
background: rgba(15, 23, 42, 0.05);
}
.crmWorkspaceRefresh svg {
width: 14px;
height: 14px;
}
/* Stats Grid */
.crmWorkspaceStats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(163, 163, 118, 0.08);
border-bottom: 1px solid rgba(163, 163, 118, 0.12);
flex-shrink: 0;
}
:root[data-theme="light"] .crmWorkspaceStats {
background: rgba(100, 95, 60, 0.06);
border-bottom-color: rgba(100, 95, 60, 0.1);
}
.crmStat {
padding: 16px 12px;
text-align: center;
background: rgba(163, 163, 118, 0.02);
}
.crmStatValue {
font-size: 24px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.crmStatLabel {
font-size: 11px;
color: var(--muted2);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.crmStat--highlight .crmStatValue {
color: #22c55e;
}
.crmStat--warning .crmStatValue {
color: rgba(220, 180, 100, 0.9);
}
/* Action Sections */
.crmActionSection {
padding: 16px;
border-bottom: 1px solid rgba(163, 163, 118, 0.1);
}
:root[data-theme="light"] .crmActionSection {
border-bottom-color: rgba(100, 95, 60, 0.1);
}
.crmActionSection:last-of-type {
border-bottom: none;
}
.crmActionSectionHeader {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
color: var(--muted2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.crmActionSectionIcon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.crmActionSectionIcon svg {
width: 14px;
height: 14px;
}
.crmActionSectionIcon--hot {
background: rgba(163, 163, 118, 0.15);
color: rgba(163, 163, 118, 0.9);
}
.crmActionSectionIcon--stale {
background: rgba(180, 120, 100, 0.12);
color: rgba(200, 140, 120, 0.9);
}
.crmActionSectionIcon--connected {
background: rgba(120, 160, 120, 0.12);
color: rgba(140, 180, 140, 0.9);
}
.crmActionSectionMeta {
margin-left: auto;
font-weight: 400;
font-size: 11px;
text-transform: none;
letter-spacing: 0;
}
/* Action Cards */
.crmActionCards {
display: flex;
flex-direction: column;
gap: 8px;
}
.crmActionCard {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(163, 163, 118, 0.03);
border: 1px solid rgba(163, 163, 118, 0.12);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
:root[data-theme="light"] .crmActionCard {
background: rgba(163, 163, 118, 0.025);
border-color: rgba(100, 95, 60, 0.12);
}
.crmActionCard:hover {
background: rgba(163, 163, 118, 0.07);
border-color: rgba(163, 163, 118, 0.2);
}
:root[data-theme="light"] .crmActionCard:hover {
background: rgba(163, 163, 118, 0.06);
border-color: rgba(100, 95, 60, 0.18);
}
.crmActionCard--hot {
border-left: 3px solid rgba(163, 163, 118, 0.6);
}
.crmActionCard--hot:hover {
border-color: rgba(163, 163, 118, 0.25);
border-left-color: rgba(163, 163, 118, 0.7);
}
.crmActionCard--stale {
border-left: 3px solid rgba(180, 120, 100, 0.6);
}
.crmActionCard--stale:hover {
border-color: rgba(180, 120, 100, 0.25);
border-left-color: rgba(180, 120, 100, 0.7);
}
.crmActionCardMain {
flex: 1;
min-width: 0;
}
.crmActionCardTitle {
font-size: 14px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crmActionCardMeta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 12px;
color: var(--muted2);
}
.crmDealAmount {
font-weight: 600;
color: rgba(140, 180, 140, 0.9);
}
.crmDealAge {
color: var(--muted2);
}
.crmDealAge--stale {
color: rgba(200, 140, 120, 0.85);
font-weight: 500;
}
.crmActionCardPath {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.crmActionCardAction {
flex-shrink: 0;
}
.crmActionBtn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: rgba(163, 163, 118, 0.9);
background: rgba(163, 163, 118, 0.1);
border: none;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.crmActionBtn:hover {
background: rgba(163, 163, 118, 0.18);
}
.crmActionBtn svg {
width: 12px;
height: 12px;
}
.crmActionBtn--sm {
padding: 4px 8px;
font-size: 11px;
}
.crmActionBtn--stale {
color: rgba(180, 120, 100, 0.9);
background: rgba(180, 120, 100, 0.1);
}
.crmActionBtn--stale:hover {
background: rgba(180, 120, 100, 0.18);
}
.crmActionBtn--hubspot {
color: #ff7a59;
background: rgba(255, 122, 89, 0.1);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.crmActionBtn--hubspot:hover {
background: rgba(255, 122, 89, 0.2);
color: #ff7a59;
}
/* CRM Query Results */
.crmQueryIntent {
font-size: 12px;
color: var(--muted2);
padding: 8px 16px;
border-bottom: 1px solid rgba(163, 163, 118, 0.08);
}
.crmQueryResults {
display: flex;
flex-direction: column;
gap: 12px;
}
.crmQueryDeal {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: rgba(163, 163, 118, 0.03);
border: 1px solid rgba(163, 163, 118, 0.12);
border-radius: 10px;
transition: all 0.15s ease;
}
.crmQueryDeal:hover {
background: rgba(163, 163, 118, 0.06);
border-color: rgba(163, 163, 118, 0.2);
}
.crmQueryDeal__logo {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(163, 163, 118, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.crmQueryDeal__logo img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
}
.crmQueryDeal__logoFallback {
display: flex;
align-items: center;
justify-content: center;
}
.crmQueryDeal__logo img + .crmQueryDeal__logoFallback {
display: none;
}
.crmQueryDeal__logo svg {
width: 20px;
height: 20px;
color: var(--muted2);
}
.crmQueryDeal__info {
flex: 1;
min-width: 0;
}
.crmQueryDeal__name {
font-size: 14px;
font-weight: 500;
color: var(--fg);
margin-bottom: 4px;
}
.crmQueryDeal__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted2);
flex-wrap: wrap;
}
.crmQueryDeal__company {
color: var(--muted);
}
.crmQueryDeal__amount {
font-weight: 600;
color: rgba(120, 160, 120, 0.9);
}
.crmQueryDeal__age {
color: var(--muted2);
}
.crmQueryDeal__stage {
color: var(--muted2);
font-size: 11px;
background: rgba(163, 163, 118, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.crmQueryDeal__paths {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
}
.crmQueryDeal__pathCount {
color: rgba(120, 160, 120, 0.9);
font-weight: 500;
}
.crmQueryDeal__connector {
color: var(--muted2);
}
.crmQueryDeal__actions {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.crmQueryDeal__action {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: rgba(163, 163, 118, 0.1);
color: var(--muted2);
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
}
.crmQueryDeal__action:hover {
background: rgba(163, 163, 118, 0.2);
color: var(--fg);
}
.crmQueryDeal__action svg {
width: 14px;
height: 14px;
}
.crmQueryDeal__action--hubspot {
color: #ff7a59;
background: rgba(255, 122, 89, 0.1);
}
.crmQueryDeal__action--hubspot:hover {
background: rgba(255, 122, 89, 0.2);
color: #ff7a59;
}
/* Connected Companies Grid */
.crmConnectedCompanies {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.crmConnectedCompany {
padding: 12px;
background: rgba(163, 163, 118, 0.03);
border: 1px solid rgba(163, 163, 118, 0.12);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
:root[data-theme="light"] .crmConnectedCompany {
background: rgba(163, 163, 118, 0.025);
border-color: rgba(100, 95, 60, 0.12);
}
.crmConnectedCompany:hover {
background: rgba(120, 160, 120, 0.08);
border-color: rgba(120, 160, 120, 0.2);
}
.crmConnectedCompanyName {
font-size: 13px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crmConnectedCompanyMeta {
font-size: 11px;
color: var(--muted2);
margin-top: 4px;
}
/* Workspace Footer */
.crmWorkspaceFooter {
display: flex;
gap: 8px;
padding: 16px;
border-top: 1px solid rgba(163, 163, 118, 0.12);
flex-shrink: 0;
}
:root[data-theme="light"] .crmWorkspaceFooter {
border-top-color: rgba(100, 95, 60, 0.12);
}
.crmWorkspaceBtn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text);
background: rgba(163, 163, 118, 0.06);
border: 1px solid rgba(163, 163, 118, 0.15);
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
:root[data-theme="light"] .crmWorkspaceBtn {
background: rgba(163, 163, 118, 0.04);
border-color: rgba(100, 95, 60, 0.12);
}
.crmWorkspaceBtn:hover {
background: rgba(163, 163, 118, 0.1);
border-color: rgba(163, 163, 118, 0.22);
}
:root[data-theme="light"] .crmWorkspaceBtn:hover {
background: rgba(163, 163, 118, 0.08);
border-color: rgba(100, 95, 60, 0.18);
}
.crmWorkspaceBtn svg {
width: 14px;
height: 14px;
}
.crmWorkspaceBtn--secondary {
background: transparent;
border-color: transparent;
color: var(--muted2);
}
.crmWorkspaceBtn--secondary:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text);
}
:root[data-theme="light"] .crmWorkspaceBtn--secondary:hover {
background: rgba(15, 23, 42, 0.04);
}
/* ─── CRM Deal Card Logos & Links ─── */
.crmDealLogoWrap {
flex-shrink: 0;
margin-right: 12px;
}
.crmDealLogo {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: contain;
background: rgba(255, 255, 255, 0.05);
}
.crmDealLogo--fallback {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: var(--muted2);
}
.crmDealLogo--fallback svg {
width: 16px;
height: 16px;
}
:root[data-theme="light"] .crmDealLogo,
:root[data-theme="light"] .crmDealLogo--fallback {
background: rgba(15, 23, 42, 0.05);
}
.crmDealLink {
color: var(--muted2);
margin-left: 6px;
opacity: 0.6;
transition: opacity 0.15s ease, color 0.15s ease;
}
.crmDealLink:hover {
opacity: 1;
color: var(--accent);
}
.crmDealLink svg {
width: 12px;
height: 12px;
}
.crmConnectedCompanyLogo {
width: 20px;
height: 20px;
border-radius: 4px;
object-fit: contain;
margin-right: 8px;
flex-shrink: 0;
}
.crmConnectedCompany {
display: flex;
align-items: center;
}
/* ─── CRM Deal Detail Panel ─── */
.crmDealDetailInline {
/* Separate card below CRM Workspace, uses resultCardShell base styles */
margin-top: 12px;
}
.crmDealDetailCard {
display: flex;
flex-direction: column;
border-color: rgba(99, 102, 241, 0.25);
max-height: 500px;
}
.crmDealDetailCard .objectCard__header {
flex-shrink: 0;
border-bottom-color: rgba(99, 102, 241, 0.15);
}
.crmDealDetailCard .objectCard__content {
flex: 1;
overflow-y: auto;
min-height: 0;
max-height: 400px;
}
.crmDealDetailClose {
background: transparent;
border: none;
color: var(--muted2);
cursor: pointer;
padding: 4px;
margin-right: 8px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.crmDealDetailClose:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}
:root[data-theme="light"] .crmDealDetailClose:hover {
background: rgba(15, 23, 42, 0.08);
}
.crmDealDetailClose svg {
width: 16px;
height: 16px;
}
.crmDealDetailLogoWrap {
margin-right: 10px;
flex-shrink: 0;
}
.crmDealDetailLogo {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: contain;
background: rgba(255, 255, 255, 0.05);
}
.crmDealDetailLogoFallback {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: var(--muted2);
}
.crmDealDetailLogoFallback svg {
width: 14px;
height: 14px;
}
:root[data-theme="light"] .crmDealDetailLogo,
:root[data-theme="light"] .crmDealDetailLogoFallback {
background: rgba(15, 23, 42, 0.05);
}
.crmDealDetailLink {
color: var(--muted2);
margin-left: 8px;
opacity: 0.6;
transition: opacity 0.15s ease, color 0.15s ease;
}
.crmDealDetailLink:hover {
opacity: 1;
color: var(--accent);
}
.crmDealDetailLink svg {
width: 14px;
height: 14px;
}
.crmDealDetailNav {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.crmDealNavBtn {
background: transparent;
border: 1px solid transparent;
color: var(--muted2);
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.crmDealNavBtn:hover {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.25);
color: var(--accent);
}
.crmDealNavBtn svg {
width: 16px;
height: 16px;
}
.crmDealNavBtn--prev svg {
transform: rotate(180deg);
}
.crmDealNavCount {
font-size: 12px;
color: var(--muted2);
padding: 0 4px;
min-width: 50px;
text-align: center;
}
/* Slide animations */
.crmDealDetailInline--slide-left {
animation: crmDealSlideLeft 0.2s ease-out;
}
.crmDealDetailInline--slide-right {
animation: crmDealSlideRight 0.2s ease-out;
}
@keyframes crmDealSlideLeft {
from { opacity: 0.8; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes crmDealSlideRight {
from { opacity: 0.8; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Selected state for deal cards */
.crmActionCard.is-selected {
border-color: rgba(99, 102, 241, 0.5);
background: rgba(99, 102, 241, 0.08);
}
.crmActionCard.is-selected .crmActionBtn {
background: rgba(99, 102, 241, 0.2);
color: var(--accent);
}
/* Hide old elements */
#chatHistoryPanel {
display: none !important;
}
/* aiChatTabs removed */
/* ─── Open in Chat Button ─── */
.openChatBtn {
background: transparent;
border: 1px solid transparent;
color: var(--muted2);
font-size: 12px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
opacity: 0.7;
transition: all 0.15s ease;
line-height: 1;
}
.openChatBtn:hover {
opacity: 1;
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.35);
color: var(--accent);
}
.aiChatBar {
width: var(--chat-width);
display: flex;
flex-direction: column;
margin-top: 24px;
position: relative;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.aiChatBar.chat-swapping .aiChatTranscript {
animation: chatSwapOut 0.18s ease both;
}
.aiChatBar.chat-swapped .aiChatTranscript {
animation: chatSwapIn 0.22s ease both;
}
.aiChatBar.chat-expanding .aiChatTranscript {
animation: chatSwapIn 0.26s ease both;
}
.aiChatBar.chat-expanding {
animation: chatExpandDrop 0.28s ease both;
}
@keyframes chatSwapOut {
from { opacity: 1; transform: translate3d(0, 0, 0); }
to { opacity: 0; transform: translate3d(0, 10px, 0); }
}
@keyframes chatSwapIn {
from { opacity: 0; transform: translate3d(0, -12px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes chatExpandDrop {
from { opacity: 0.85; transform: translate3d(-50%, -10px, 0); }
to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
/* Compact mode (no messages) - centered input */
.aiChatBar:not(.hasMessages) {
max-height: 180px;
}
/* Expanded mode (has messages) - take vertical space, no container */
.aiChatBar.hasMessages {
flex: 0 1 auto;
max-height: calc(100vh - 80px);
min-height: 300px;
margin-top: 0;
margin-bottom: auto;
background: transparent;
border: none;
padding: 0;
overflow: visible; /* Allow scrollbar to be visible */
}
/* Keep content at top when chatting */
.centerStack:has(.aiChatBar.hasMessages) {
justify-content: flex-start;
align-items: center;
padding-top: 24px;
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Onboarding Panel (Home) */
/* ─────────────────────────────────────────────────────────────────────────── */
.onboardToggle {
position: fixed;
right: 24px;
bottom: 18px;
z-index: 120;
border-radius: 999px;
padding: 8px 14px;
font-size: 12px;
letter-spacing: 0.02em;
border: 1px solid var(--ui-glass-border);
background: var(--ui-glass-bg);
color: var(--text);
cursor: pointer;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
body.chat-expanded .onboardToggle {
display: none;
}
.onboardPanel {
position: fixed;
inset: 0;
display: none;
z-index: 1000;
}
.onboardPanel[data-open="true"] {
display: block;
}
.onboardPanelBackdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(3px);
}
.onboardPanelCard {
position: absolute;
right: 24px;
bottom: 70px;
width: min(1320px, 96vw);
border-radius: 16px;
border: 1px solid var(--ui-glass-border);
background: var(--ui-glass-bg);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
padding: 16px 18px;
}
.onboardPanelHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.onboardPanelTitle {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.onboardPanelSubtitle {
font-size: 12px;
color: var(--muted2);
}
.onboardPanelClose {
border: 1px solid rgba(99, 102, 241, 0.3);
background: rgba(99, 102, 241, 0.08);
color: var(--text);
border-radius: 999px;
padding: 4px 8px;
cursor: pointer;
}
.onboardPanelBody {
display: flex;
flex-direction: column;
gap: 14px;
}
.onboardChart {
position: relative;
height: 520px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.2);
background:
linear-gradient(to top, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 40px,
linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 56px 100%,
radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.18), rgba(15, 23, 42, 0.15));
overflow: hidden;
padding: 40px 22px 40px;
}
.onboardAxis {
position: absolute;
left: 8px;
top: 40px;
bottom: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 11px;
color: var(--muted2);
text-align: right;
}
.onboardBarsScroller {
position: absolute;
inset: 40px 22px 36px 70px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
scrollbar-width: thin;
}
.onboardBars {
min-width: 100%;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(44px, 1fr);
gap: 24px;
align-items: end;
position: relative;
padding-top: calc(var(--bracket-height, 24px) + 10px);
}
.onboardBar {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 100%;
}
.onboardBarStack {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 10px;
overflow: hidden;
background: rgba(15, 23, 42, 0.2);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.onboardBarSegment {
width: 100%;
}
.onboardBarSegment--good {
background: rgba(56, 189, 248, 0.92);
}
.onboardBarSegment--rest {
background: rgba(245, 158, 11, 0.75);
}
.onboardBarYear {
font-size: 12px;
color: var(--muted2);
}
.onboardBarYear.isHidden {
opacity: 0;
}
.onboardEraIcons {
display: flex;
gap: 5px;
min-height: 28px;
}
.onboardEraIcon {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(148, 163, 184, 0.4);
background: rgba(15, 23, 42, 0.7);
color: #e2e8f0;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.onboardEraBrackets {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--bracket-height, 24px);
display: grid;
grid-template-columns: repeat(var(--bar-count, 1), minmax(28px, 1fr));
grid-auto-rows: 18px;
row-gap: 6px;
gap: 16px;
pointer-events: none;
z-index: 3;
}
.onboardEraBrackets {
display: none;
}
.onboardEraBracket {
grid-column: var(--start) / span var(--span);
grid-row: var(--row) / span 1;
border-top: 1px solid rgba(148, 163, 184, 0.45);
position: relative;
}
.onboardEraBracket::before,
.onboardEraBracket::after {
content: '';
position: absolute;
top: -2px;
width: 1px;
height: 6px;
background: rgba(148, 163, 184, 0.45);
}
.onboardEraBracket::before {
left: 0;
}
.onboardEraBracket::after {
right: 0;
}
.onboardEraBracketIcon {
position: absolute;
left: -11px;
top: -12px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(15, 23, 42, 0.85);
color: #e2e8f0;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.onboardLegend {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
color: var(--muted2);
}
.onboardLegendItem {
display: inline-flex;
align-items: center;
gap: 6px;
}
.onboardLegendSwatch {
width: 10px;
height: 10px;
border-radius: 3px;
}
.onboardLegendSwatch--good {
background: rgba(56, 189, 248, 0.85);
}
.onboardLegendSwatch--rest {
background: rgba(245, 158, 11, 0.7);
}
.onboardLegendHint {
margin-left: auto;
opacity: 0.8;
}
.onboardEmployment {
display: none;
}
.onboardEmploymentTitle {
font-weight: 600;
color: var(--muted2);
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 11px;
}
.onboardEmploymentRow {
display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.onboardEmploymentRow:last-child {
border-bottom: none;
padding-bottom: 0;
}
.onboardEmploymentCompany {
font-weight: 600;
}
.onboardEmploymentDates {
color: var(--muted2);
white-space: nowrap;
}
body.chat-expanded .aiChatBar {
position: fixed;
left: 50%;
top: 24px;
bottom: 24px;
transform: translateX(-50%);
z-index: 200;
}
/* Hide brand text completely when chatting */
.centerStack:has(.aiChatBar.hasMessages) .brandRow .brandText {
display: none;
}
/* Hide mini banners when chatting */
body:has(.aiChatBar.hasMessages) .labBannersRow {
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Cat positioned behind the chat bar when chatting */
.centerStack:has(.aiChatBar.hasMessages) .brandRow {
position: fixed;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
}
.centerStack:has(.aiChatBar.hasMessages) .catWrap {
opacity: 0 !important; /* Hide full cat when peeking cat is shown */
pointer-events: none;
transition: all 0.5s ease;
}
/* Peeking cat head - cropped to show only left half (the head) */
.catPeek {
position: fixed;
bottom: 130px;
/* Align to the left edge of the chat bar */
left: calc(50% - (var(--chat-width) / 2 - var(--cat-peek-size) / 2));
transform: translateX(-50%);
width: var(--cat-peek-size);
height: var(--cat-peek-size);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease;
overflow: hidden;
}
.catPeek img,
.catPeek .catPeekLottie {
position: absolute;
left: 0;
top: 0;
width: calc(var(--cat-peek-size) * 2);
height: calc(var(--cat-peek-size) * 2);
/* No clip-path - let container overflow:hidden do the cropping */
/* Position so cat head (left side) is visible in the container */
}
/* Show peeking cat when chat has messages */
body:has(.aiChatBar.hasMessages) .catPeek {
opacity: 0.7;
}
/* Inner container - flex column for transcript + input */
.aiChatBarInner {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
min-height: 0; /* Allow flex shrink */
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Transcript - Messages area (blends with background) */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiChatTranscript {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain; /* Prevent scroll chaining */
padding: 16px 12px 20px 12px;
display: none;
scroll-behavior: smooth;
position: relative;
}
.aiChatBar.hasMessages .aiChatTranscript {
display: block; /* Block display allows normal scrolling */
}
.aiChatTranscript {
scrollbar-width: thin;
scrollbar-color: var(--ui-scroll-thumb) transparent;
}
.aiChatTranscript::-webkit-scrollbar {
width: 4px;
}
.aiChatTranscript::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.aiChatTranscript::-webkit-scrollbar-thumb {
background: var(--ui-scroll-thumb);
border-radius: 4px;
}
.aiChatTranscript::-webkit-scrollbar-thumb:hover {
background: var(--ui-scroll-thumb-hover);
}
/* Cluster graph dock (anchored to results) */
.clusterGraphDock {
position: fixed;
top: 160px;
left: 24px;
width: 520px;
z-index: 60;
display: none;
max-height: calc(100vh - 140px);
}
.clusterGraphDock[data-visible="true"] {
display: block;
}
@media (max-width: 1100px) {
.clusterGraphDock {
width: 420px;
left: 16px;
}
}
@media (max-width: 980px) {
.clusterGraphDock {
display: none !important;
}
}
.clusterGraphPanel {
height: auto;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(163, 163, 118, 0.25);
background: transparent;
backdrop-filter: none;
box-shadow: none;
}
.clusterGraphPanelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(163, 163, 118, 0.15);
}
.clusterGraphPanelTitle {
font-size: 12px;
font-weight: 600;
color: #f0f0f0;
letter-spacing: 0.02em;
}
.clusterGraphPanelMeta {
font-size: 10px;
color: rgba(180, 180, 160, 0.7);
font-family: 'SF Mono', Monaco, monospace;
}
.clusterGraphPanelToggle {
border: 1px solid rgba(163, 163, 118, 0.4);
background: rgba(163, 163, 118, 0.12);
color: rgba(200, 200, 170, 0.95);
border-radius: 4px;
padding: 4px 10px;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.clusterGraphPanelToggle:hover {
background: rgba(163, 163, 118, 0.2);
border-color: rgba(163, 163, 118, 0.5);
}
.clusterGraphBody {
display: block;
}
.clusterGraphCanvasWrap {
flex: 1;
height: 420px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(163, 163, 118, 0.15);
overflow: hidden;
position: relative;
}
.personRow.personRow--focus {
outline: 2px solid rgba(244, 114, 182, 0.8);
border-radius: 12px;
background: rgba(244, 114, 182, 0.08);
}
.clusterGraphCanvas {
width: 100%;
height: 100%;
display: block;
}
.clusterGraphTooltipLayer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1200;
}
.clusterGraphTooltip {
position: absolute;
top: 0;
left: 0;
transform: translate(-9999px, -9999px);
background: rgba(12, 12, 14, 0.95);
border: 1px solid rgba(163, 163, 118, 0.3);
color: #f0f0f0;
font-size: 11px;
line-height: 1.4;
padding: 8px 10px;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
max-width: 220px;
z-index: 1;
}
.clusterGraphTooltip.is-visible {
opacity: 1;
}
:root[data-theme="light"] .clusterGraphTooltip {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(100, 95, 60, 0.3);
color: #1a1a18;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .clusterGraphPanel {
background: transparent;
border-color: rgba(100, 95, 60, 0.3);
box-shadow: none;
}
:root[data-theme="light"] .clusterGraphPanelHeader {
border-bottom-color: rgba(100, 95, 60, 0.15);
}
:root[data-theme="light"] .clusterGraphPanelTitle {
color: #1a1a18;
}
:root[data-theme="light"] .clusterGraphPanelMeta {
color: #5a5a52;
}
:root[data-theme="light"] .clusterGraphPanelToggle {
border-color: rgba(100, 95, 60, 0.4);
background: rgba(100, 95, 60, 0.1);
color: #4a4a38;
}
:root[data-theme="light"] .clusterGraphPanelToggle:hover {
background: rgba(100, 95, 60, 0.18);
}
:root[data-theme="light"] .clusterGraphCanvasWrap {
background: transparent;
border-color: rgba(100, 95, 60, 0.2);
}
/* Messages - text-driven, no bubbles */
.aiChatMessage {
max-width: 100%;
padding: 6px 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
animation: chatMsgIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
@keyframes chatMsgIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* User messages - right aligned, olive tint, fit content width */
.aiChatMessage.user {
margin-left: auto;
margin-right: 0;
text-align: right;
background: rgba(163, 163, 118, 0.08);
border: 1px solid rgba(163, 163, 118, 0.2);
border-right: 2px solid rgba(163, 163, 118, 0.5);
color: rgba(255, 255, 255, 0.92);
font-weight: 450;
padding: 10px 16px;
font-size: 16px;
border-radius: 8px;
max-width: 85%;
width: fit-content;
}
:root[data-theme="light"] .aiChatMessage.user {
background: rgba(163, 163, 118, 0.1);
border: 1px solid rgba(163, 163, 118, 0.25);
border-right: 2px solid rgba(163, 163, 118, 0.6);
color: rgba(0, 0, 0, 0.85);
}
/* Assistant messages - left aligned, clean */
.aiChatMessage.assistant {
margin-right: auto;
margin-left: 0;
text-align: left;
background: transparent;
backdrop-filter: none;
border-radius: 0;
border: none;
color: #ffffff;
padding-left: 0;
}
:root[data-theme="light"] .aiChatMessage.assistant {
color: #0f172a;
}
/* Animated thinking dots */
.aiThinkingDots {
display: flex;
gap: 4px;
padding: 12px 0;
}
.aiThinkingDots .dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
animation: dotPulse 1.4s ease-in-out infinite;
}
.aiThinkingDots .dot:nth-child(2) {
animation-delay: 0.2s;
}
.aiThinkingDots .dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes dotPulse {
0%, 80%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* VEA1 Enhanced Mode - Beautiful Progress Panel */
/* ─────────────────────────────────────────────────────────────────────────── */
/* VEA1 Mode Loading Panel - Clean minimal state */
.aiVea1LoadingPanel {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(163, 163, 118, 0.25);
position: relative;
overflow: hidden;
}
/* Subtle animated line at left */
.aiVea1LoadingPanel::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(163, 163, 118, 0.6) 0%, rgba(163, 163, 118, 0.2) 100%);
animation: vea1Pulse 1.5s ease-in-out infinite;
}
@keyframes vea1Sweep {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
.aiVea1LoadingHeader {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.aiVea1LoadingTitle {
font-size: 14px;
font-weight: 500;
color: rgba(226, 232, 240, 0.9);
letter-spacing: -0.01em;
}
.aiVea1LoadingSubtitle {
font-size: 12px;
color: var(--muted2);
margin-left: auto;
}
/* Simple loading dots */
.aiVea1LoadingDots {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
}
.aiVea1LoadingDots .dot--purple {
width: 4px;
height: 4px;
background: rgba(163, 163, 118, 0.7);
border-radius: 50%;
animation: vea1DotPulse 1.2s ease-in-out infinite;
}
.aiVea1LoadingDots .dot--purple:nth-child(2) {
animation-delay: 0.15s;
}
.aiVea1LoadingDots .dot--purple:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes vea1DotPulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
/* VEA1 Progress Panel - Clean minimal style */
.aiVea1ProgressPanel {
display: flex;
flex-direction: column;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(163, 163, 118, 0.25);
overflow: hidden;
}
/* Thin progress line at top */
.aiVea1ProgressBar {
height: 2px;
background: rgba(163, 163, 118, 0.15);
position: relative;
overflow: hidden;
}
/* Subtle moving background shimmer on unfilled portion */
.aiVea1ProgressBar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(163, 163, 118, 0.25) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: barBackgroundShimmer 2s ease-in-out infinite;
}
@keyframes barBackgroundShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.aiVea1ProgressFill {
height: 100%;
background: rgba(163, 163, 118, 0.6);
transition: width 0.4s ease;
position: relative;
overflow: hidden;
}
/* Continuous shimmer overlay on progress fill */
.aiVea1ProgressFill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
animation: progressFillShimmer 1.2s ease-in-out infinite;
}
@keyframes progressFillShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes progressShimmer {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Header section */
.aiVea1ProgressHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(163, 163, 118, 0.1);
}
.aiVea1ProgressHeaderLeft {
display: flex;
align-items: center;
gap: 8px;
}
.aiVea1ProgressHeaderRight {
display: flex;
align-items: center;
gap: 8px;
}
.aiVea1StepCount {
font-size: 12px;
color: var(--muted2);
}
/* Step list container */
.aiVea1Steps {
display: flex;
flex-direction: column;
padding: 8px 14px 12px;
gap: 2px;
}
/* Individual step - minimal bullet style */
.aiVea1Step {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
background: transparent;
border: none;
border-radius: 0;
transition: opacity 0.2s ease;
animation: vea1StepFadeIn 0.2s ease-out both;
}
@keyframes vea1StepFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.aiVea1Step:nth-child(1) { animation-delay: 0s; }
.aiVea1Step:nth-child(2) { animation-delay: 0.1s; }
.aiVea1Step:nth-child(3) { animation-delay: 0.2s; }
.aiVea1Step:nth-child(4) { animation-delay: 0.3s; }
.aiVea1Step:nth-child(5) { animation-delay: 0.4s; }
/* Step status indicator - minimal bullet */
.aiVea1StepIndicator {
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.aiVea1StepIndicator svg {
width: 10px;
height: 10px;
}
/* Pending state - hollow circle */
.aiVea1Step--pending .aiVea1StepIndicator {
background: transparent;
border: 1.5px solid rgba(148, 163, 184, 0.4);
color: transparent;
}
/* Active/running state - pulsing dot */
.aiVea1Step--active .aiVea1StepIndicator {
background: rgba(163, 163, 118, 0.8);
border: none;
animation: vea1StepPulse 1s ease-in-out infinite;
}
.aiVea1Step--active .aiVea1StepIndicator svg {
display: none;
}
@keyframes vea1StepPulse {
0%, 100% { opacity: 0.5; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1); }
}
/* Complete state - checkmark */
.aiVea1Step--complete .aiVea1StepIndicator {
background: transparent;
border: none;
color: rgba(163, 163, 118, 0.8);
}
/* Hide type-specific styling - keep it uniform */
.aiVea1Step--search .aiVea1StepIndicator,
.aiVea1Step--score .aiVea1StepIndicator,
.aiVea1Step--analyze .aiVea1StepIndicator {
background: inherit;
border-color: inherit;
color: inherit;
}
/* Step content */
.aiVea1StepContent {
flex: 1;
min-width: 0;
}
.aiVea1StepTitle {
font-size: 13px;
font-weight: 500;
color: rgba(226, 232, 240, 0.9);
display: flex;
align-items: center;
gap: 6px;
}
.aiVea1StepTitle .statusDot {
display: none;
}
.aiVea1StepDesc {
font-size: 12px;
color: var(--muted2);
line-height: 1.4;
margin-top: 2px;
}
/* Step metadata - inline, subtle */
.aiVea1StepMeta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
.aiVea1StepMetaItem {
font-size: 11px;
color: var(--muted3);
}
.aiVea1StepMetaItem svg {
display: none;
}
/* Active step - subtle highlight */
.aiVea1Step--active {
background: transparent;
}
.aiVea1Step--active .aiVea1StepTitle {
color: rgba(226, 232, 240, 1);
}
/* Complete step styling */
.aiVea1Step--complete {
opacity: 0.7;
}
.aiVea1Step--complete .aiVea1StepTitle {
color: var(--muted);
}
/* VEA1 trace panel - clean minimal style */
.aiTracePanel--vea1 {
border-color: rgba(163, 163, 118, 0.25);
background: transparent;
}
.aiTracePanel--vea1 .aiTracePanelHeader {
background: transparent;
}
.aiTraceStreamingIndicator--vea1 {
width: 6px;
height: 6px;
background: rgba(163, 163, 118, 0.8);
border-radius: 50%;
animation: vea1Pulse 1s ease-in-out infinite;
}
@keyframes vea1Pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* VEA1 trace steps - subtle accents */
.aiTraceSteps--vea1 .aiTraceStep {
border-left-color: rgba(163, 163, 118, 0.2);
}
.aiTraceSteps--vea1 .aiTraceStep--active {
border-left-color: rgba(163, 163, 118, 0.6);
}
.aiTraceSteps--vea1 .aiTraceLabel {
color: rgba(163, 163, 118, 0.9);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Input Area - Bottom, floating pill */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiChatInputRow {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 4px;
}
/* The main input container */
.aiChatInputWrap {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: #0e1117;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 10px 14px 10px 14px;
transition: all 0.2s ease, border-radius 0.2s ease;
box-shadow:
0 12px 28px rgba(8, 10, 18, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Mode selector and send button stay fixed */
.aiModeSelector,
.aiChatSend {
flex-shrink: 0;
}
/* Only align to bottom when multiline */
.aiChatInputWrap.is-multiline .aiModeSelector,
.aiChatInputWrap.is-multiline .aiChatSend {
align-self: flex-end;
}
/* External scrollbar to the right of Send */
.aiChatScrollBar {
display: none;
align-self: stretch;
align-items: center;
width: 10px;
margin-left: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.aiChatScrollBar.is-active {
display: flex;
opacity: 1;
pointer-events: auto;
}
.aiChatScrollTrack {
position: relative;
width: 6px;
height: calc(100% - 8px);
margin: 4px 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
}
.aiChatScrollThumb {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.45);
}
/* When input is multiline, use rounded rectangle */
.aiChatInputWrap.is-multiline {
border-radius: 24px;
padding: 12px 14px 12px 18px;
align-items: flex-end;
}
.aiChatInputWrap.is-multiline .aiChatInputTools {
align-self: flex-end;
}
.aiChatInputWrap:focus-within {
border-color: rgba(129, 140, 248, 0.55);
box-shadow:
0 0 0 4px rgba(99, 102, 241, 0.18),
0 18px 36px rgba(8, 10, 18, 0.55);
}
.aiChatInput {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #e2e8f0;
font-size: 16px;
font-family: var(--font-sans);
line-height: 1.5;
resize: none;
min-height: 24px;
max-height: 150px;
padding: 0;
padding-right: 8px;
overflow-y: scroll; /* Scrolls, but scrollbar is hidden */
overflow-x: hidden;
scrollbar-width: none;
}
/* Hide native textarea scrollbar */
.aiChatInput::-webkit-scrollbar {
display: none;
}
.aiChatInput::placeholder {
color: rgba(226, 232, 240, 0.6);
font-weight: 500;
}
.aiChatInputTools {
display: inline-flex;
align-items: center;
gap: 6px;
padding-right: 4px;
flex-shrink: 0;
}
/* When multiline, add bottom padding so tools align with last line */
.aiChatInputWrap.is-multiline .aiChatInputTools {
padding-bottom: 2px;
}
.aiChatToolMenuWrap {
position: relative;
display: inline-flex;
align-items: center;
}
.aiChatTool {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.6);
color: #cbd5f5;
display: grid;
place-items: center;
cursor: pointer;
transition: transform 0.12s ease, background 0.12s ease, border 0.12s ease;
}
.aiChatTool:hover {
background: rgba(99, 102, 241, 0.2);
border-color: rgba(129, 140, 248, 0.5);
transform: translateY(-1px);
}
.aiChatTool:active {
transform: translateY(0);
}
.aiChatTool svg {
width: 16px;
height: 16px;
}
.aiChatToolMenu {
position: absolute;
left: 0;
bottom: calc(100% + 10px);
min-width: 240px;
background: #0b0f1a;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 16px;
padding: 10px;
box-shadow: 0 18px 40px rgba(4, 6, 12, 0.55);
display: none;
z-index: 10;
}
.aiChatToolMenu.open {
display: block;
}
.aiChatToolMenuItem {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
border: none;
background: transparent;
color: #e2e8f0;
font-size: 15px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
text-align: left;
}
.aiChatToolMenuItem[disabled],
.aiChatToolMenuItem.is-busy {
cursor: progress;
opacity: 0.7;
}
.aiChatToolMenuItem.is-connected {
color: #b8f3d3;
}
.aiChatToolMenuItem:hover {
background: rgba(99, 102, 241, 0.18);
color: #f8fafc;
}
.aiChatToolMenuIcon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #cbd5f5;
}
.aiChatToolMenuIcon svg {
width: 18px;
height: 18px;
}
.aiChatToolMenuDivider {
height: 1px;
margin: 8px 4px;
background: rgba(148, 163, 184, 0.16);
}
.aiChatToolMenuSettings {
margin: 6px 4px 10px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.35);
display: flex;
flex-direction: column;
gap: 8px;
}
.aiChatToolMenuSettingRow {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #cbd5f5;
}
.aiChatToolMenuSettingLabel {
flex: 1;
font-weight: 500;
}
.aiChatToggle {
position: relative;
width: 36px;
height: 20px;
display: inline-flex;
align-items: center;
}
.aiChatToggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.aiChatToggleTrack {
position: relative;
width: 100%;
height: 100%;
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
transition: background 0.2s ease;
}
.aiChatToggleTrack::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 999px;
background: #f8fafc;
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.35);
transition: transform 0.2s ease;
}
.aiChatToggle input:checked + .aiChatToggleTrack {
background: rgba(34, 197, 94, 0.6);
}
.aiChatToggle input:checked + .aiChatToggleTrack::after {
transform: translateX(16px);
}
.aiChatToolMenuMiniButton {
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: transparent;
color: #e2e8f0;
font-size: 12px;
padding: 4px 8px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border 0.12s ease;
}
.aiChatToolMenuMiniButton:hover {
background: rgba(99, 102, 241, 0.18);
border-color: rgba(129, 140, 248, 0.6);
}
.aiChatToolMenuMiniButton--danger {
color: #fecaca;
border-color: rgba(248, 113, 113, 0.45);
}
.aiChatToolMenuMiniButton--danger:hover {
background: rgba(248, 113, 113, 0.18);
border-color: rgba(248, 113, 113, 0.65);
}
:root[data-theme="light"] .aiChatInputWrap {
background: #ffffff;
border: 1px solid rgba(120, 115, 85, 0.2);
box-shadow:
0 10px 24px rgba(100, 95, 70, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
:root[data-theme="light"] .aiChatInputWrap:focus-within {
border-color: rgba(99, 102, 241, 0.35);
box-shadow:
0 0 0 4px rgba(99, 102, 241, 0.15),
0 14px 28px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiChatInput {
color: #0f172a;
}
:root[data-theme="light"] .aiChatInput::placeholder {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .aiChatScrollTrack {
background: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .aiChatScrollThumb {
background: rgba(15, 23, 42, 0.35);
}
:root[data-theme="light"] .aiChatTool {
background: #f8fafc;
border-color: rgba(148, 163, 184, 0.35);
color: #475569;
}
:root[data-theme="light"] .aiChatTool:hover {
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.3);
}
:root[data-theme="light"] .aiChatTool--add {
background: #ffffff;
border-color: rgba(99, 102, 241, 0.35);
color: #4f46e5;
}
:root[data-theme="light"] .aiChatTool--add:hover {
background: rgba(99, 102, 241, 0.16);
}
:root[data-theme="light"] .aiChatSend {
background: #0f172a;
color: #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .aiChatToolMenu {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiChatToolMenuItem {
color: #1f2937;
}
:root[data-theme="light"] .aiChatToolMenuItem:hover {
background: rgba(99, 102, 241, 0.08);
color: #111827;
}
:root[data-theme="light"] .aiChatToolMenuIcon {
color: #64748b;
}
:root[data-theme="light"] .aiChatToolMenuDivider {
background: rgba(148, 163, 184, 0.35);
}
:root[data-theme="light"] .aiChatToolMenuSettings {
background: rgba(248, 250, 252, 0.9);
border-color: rgba(148, 163, 184, 0.2);
}
:root[data-theme="light"] .aiChatToolMenuSettingRow {
color: #475569;
}
:root[data-theme="light"] .aiChatToggleTrack {
background: rgba(148, 163, 184, 0.45);
}
:root[data-theme="light"] .aiChatToolMenuMiniButton {
color: #334155;
border-color: rgba(148, 163, 184, 0.35);
}
:root[data-theme="light"] .aiChatToolMenuMiniButton:hover {
background: rgba(99, 102, 241, 0.12);
}
:root[data-theme="light"] .aiChatToolMenuMiniButton--danger {
color: #b91c1c;
border-color: rgba(248, 113, 113, 0.4);
}
/* Send button */
.aiChatTool--add {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
color: #f8fafc;
}
.aiChatTool--add:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.55);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* AI Mode Selector (Dropdown like Grok) */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiModeSelector {
position: relative;
flex-shrink: 0;
}
.aiModeButton {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: none;
border-radius: 20px;
background: transparent;
color: var(--fg-muted, rgba(255, 255, 255, 0.7));
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.aiModeButton:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--fg, rgba(255, 255, 255, 0.95));
}
.aiModeIcon {
width: 14px;
height: 14px;
opacity: 0.7;
}
.aiModeLabel {
white-space: nowrap;
}
.aiModeChevron {
width: 10px;
height: 10px;
opacity: 0.5;
transition: transform 0.15s ease;
}
.aiModeSelector.is-open .aiModeChevron {
transform: rotate(180deg);
}
.aiModeMenu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
min-width: 220px;
background: #1a1d24;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.15s ease;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
z-index: 100;
}
.aiModeSelector.is-open .aiModeMenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.aiModeOption {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: none;
border-radius: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: all 0.12s ease;
}
.aiModeOption:hover {
background: rgba(255, 255, 255, 0.08);
}
.aiModeOption.is-active {
background: rgba(99, 102, 241, 0.15);
}
.aiModeOptionIcon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.aiModeOption:hover .aiModeOptionIcon {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.aiModeOption.is-active .aiModeOptionIcon {
background: rgba(99, 102, 241, 0.2);
color: #a5b4fc;
}
.aiModeOptionText {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.aiModeOptionName {
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.aiModeOptionDesc {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.aiModeCheck {
font-size: 14px;
color: #6366f1;
opacity: 0;
transition: opacity 0.1s ease;
}
.aiModeOption.is-active .aiModeCheck {
opacity: 1;
}
/* VEA1 mode indicator - purple accent */
.aiModeSelector[data-mode="vea1"] .aiModeButton {
color: #a78bfa;
}
.aiModeSelector[data-mode="vea1"] .aiModeIcon {
color: #a78bfa;
opacity: 1;
}
/* Auto mode indicator - subtle accent */
.aiModeSelector[data-mode="auto"] .aiModeButton {
color: var(--fg-muted, rgba(255, 255, 255, 0.7));
}
.aiModeSelector[data-mode="auto"] .aiModeIcon {
opacity: 0.8;
}
/* Light theme */
:root[data-theme="light"] .aiModeButton {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .aiModeButton:hover {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.9);
}
:root[data-theme="light"] .aiModeMenu {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .aiModeOption {
color: rgba(15, 23, 42, 0.8);
}
:root[data-theme="light"] .aiModeOption:hover {
background: rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .aiModeOptionIcon {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .aiModeOptionName {
color: rgba(15, 23, 42, 0.9);
}
:root[data-theme="light"] .aiModeOptionDesc {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .aiModeSelector[data-mode="vea1"] .aiModeButton {
color: #7c3aed;
}
:root[data-theme="light"] .aiModeSelector[data-mode="auto"] .aiModeButton {
color: rgba(15, 23, 42, 0.7);
}
.aiChatSend {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: #ffffff;
color: #0b0f1a;
cursor: pointer;
display: grid;
place-items: center;
transition: all 0.15s ease;
box-shadow: 0 6px 16px rgba(8, 10, 18, 0.25);
}
.aiChatSend:hover {
transform: scale(1.04);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
}
.aiChatSend:active {
transform: scale(0.94);
}
.aiChatSend:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.aiChatSend svg {
width: 20px;
height: 20px;
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* AI Trace Panel (collapsible thinking/searching/token visualization) */
/* ─────────────────────────────────────────────────────────────────────────── */
/* Animations */
@keyframes traceSlideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes traceFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tracePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes traceQueryPop {
0% {
opacity: 0;
transform: scale(0.8);
}
70% {
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes traceTypewriter {
from { width: 0; }
to { width: 100%; }
}
.aiTracePanel {
margin-top: 8px;
margin-bottom: 12px;
background: rgba(163, 163, 118, 0.04);
border: 1px solid rgba(163, 163, 118, 0.3);
border-radius: 8px;
font-size: 13px;
animation: traceFadeIn 0.2s ease-out;
}
/* Ensure visual separation between trace and result cards */
.aiTracePanel + .objectCard {
margin-top: 18px;
}
.aiTracePanelHeader {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
list-style: none;
}
.aiTracePanelHeader::-webkit-details-marker {
display: none;
}
/* Checkmark icon before title */
.aiTracePanelHeader::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 1px;
background: rgba(163, 163, 118, 0.8);
mask: url('data:image/svg+xml;utf8,') no-repeat center / 12px;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / 12px;
}
/* Streaming state - pulsing dot instead of checkmark */
.aiTracePanel--streaming .aiTracePanelHeader::before {
width: 8px;
height: 8px;
margin: 5px 4px 0 4px;
border-radius: 50%;
background: rgba(163, 163, 118, 0.8);
mask: none;
-webkit-mask: none;
animation: vea1Pulse 1s ease-in-out infinite;
}
.aiTracePanelStatus {
font-weight: 500;
color: rgba(226, 232, 240, 0.85);
font-size: 13px;
line-height: 1.4;
}
.aiTracePanelTitle {
flex: 1;
font-weight: 400;
color: var(--muted3);
font-size: 13px;
line-height: 1.4;
margin-left: -4px;
}
/* Chevron on the right */
.aiTracePanelTitle::after {
content: "›";
float: right;
font-size: 14px;
color: var(--muted3);
transition: transform 0.15s ease;
transform: rotate(0deg);
}
.aiTracePanel[open] .aiTracePanelTitle::after {
transform: rotate(90deg);
}
/* Request ID badge - clickable to copy */
.reqIdBadge {
display: inline-block;
padding: 2px 6px;
margin-left: 4px;
font-family: 'SF Mono', Monaco, 'Consolas', monospace;
font-size: 10px;
font-weight: 500;
color: var(--accent);
background: rgba(99, 102, 241, 0.15);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.reqIdBadge:hover {
background: rgba(99, 102, 241, 0.25);
color: var(--accent-light);
}
.reqIdBadge.copied {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.reqIdBadge.copied::after {
content: "";
width: 12px;
height: 12px;
display: inline-block;
margin-left: 6px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* Session ID in chat tabs - shows as popup on hover */
.chatTabId {
display: none;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px;
font-family: 'SF Mono', Monaco, 'Consolas', monospace;
font-size: 10px;
color: #e2e8f0;
padding: 4px 8px;
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chatTab {
position: relative;
}
.chatTab:hover .chatTabId {
display: inline-block;
}
.chatTabId:hover {
background: rgba(99, 102, 241, 0.3);
border-color: var(--accent);
color: white;
}
.chatTabId.copied {
background: rgba(34, 197, 94, 0.3);
border-color: #22c55e;
color: #22c55e;
}
.chatTabId.copied::after {
content: " copied!";
}
:root[data-theme="light"] .reqIdBadge {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
}
:root[data-theme="light"] .reqIdBadge:hover {
background: rgba(37, 99, 235, 0.2);
}
:root[data-theme="light"] .chatTabId {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(15, 23, 42, 0.15);
color: #475569;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .chatTabId:hover {
background: rgba(37, 99, 235, 0.1);
border-color: #2563eb;
color: #2563eb;
}
/* Shimmer text animation - light sweep left to right */
.shimmer-text {
background: linear-gradient(
90deg,
var(--muted2) 0%,
var(--muted2) 40%,
rgba(255, 255, 255, 0.9) 50%,
var(--muted2) 60%,
var(--muted2) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
.aiTracePanelSummary {
font-size: 12px;
color: var(--muted2);
margin-top: 2px;
}
/* Streaming indicator - pulsing dot in header (visible when collapsed) */
.aiTraceStreamingIndicator {
display: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
margin-left: auto;
animation: streamingPulse 1.2s ease-in-out infinite;
}
.aiTracePanel--streaming:not([open]) .aiTraceStreamingIndicator {
display: block;
}
@keyframes streamingPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* Smooth expand/collapse animation wrapper */
.aiTracePanelContentWrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease-out;
}
.aiTracePanel[open] .aiTracePanelContentWrap {
grid-template-rows: 1fr;
}
.aiTracePanelContent {
min-height: 0;
overflow: hidden;
padding: 0 14px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
line-height: 1.5;
opacity: 0;
transition: opacity 0.2s ease-out, padding 0.25s ease-out;
}
.aiTracePanel[open] .aiTracePanelContent {
padding: 12px 14px 14px;
opacity: 1;
}
.aiTraceTabs {
display: inline-flex;
gap: 6px;
padding: 4px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
margin-bottom: 12px;
}
.aiTraceTab {
position: relative; /* For ::after positioning */
border: none;
background: transparent;
color: var(--muted2);
font-size: 12px;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 150ms ease;
}
.aiTraceTab.is-active {
background: rgba(56, 189, 248, 0.12);
color: var(--fg);
}
.aiTraceTabPanels {
display: flex;
flex-direction: column;
gap: 12px;
}
.aiTraceTabPanel {
display: none;
}
.aiTraceTabPanel.is-active {
display: block;
}
.aiTraceEmpty {
font-size: 12px;
color: var(--muted2);
padding: 4px 0;
}
.aiTraceStep--parallel {
opacity: 0.9;
}
.aiParallelPanel[data-status="running"] .aiTraceStep--parallel:last-child .aiTraceContent::after {
content: '…';
animation: vea1Dots 1.5s steps(4, end) infinite;
}
@keyframes vea1Dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '…'; }
}
.aiParallelPanel {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Mode indicator in tab area */
/* Mode indicators - hidden for cleaner look */
.aiTraceModeIndicator {
display: none;
}
.aiTraceModeIndicator--vea1,
.aiTraceModeIndicator--standard {
display: none;
}
/* VEA1 tab highlighted when in primary mode */
.aiTraceTab.is-primary-mode {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
color: #a78bfa;
}
.aiTraceTab.is-primary-mode::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #8b5cf6;
}
:root[data-theme="light"] .aiTraceModeIndicator--vea1 {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.1));
color: #7c3aed;
border-color: rgba(124, 58, 237, 0.2);
}
/* VEA1 Running State */
.aiParallelPanel[data-status="running"] {
position: relative;
}
.aiParallelVerdict {
font-size: 12px;
color: var(--fg2);
}
.aiParallelVerdictLabel {
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--accent);
}
.aiParallelMeta {
font-size: 12px;
color: var(--muted2);
}
.aiParallelUsage {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted2);
padding: 6px 0;
margin-bottom: 4px;
flex-wrap: wrap;
}
.aiParallelUsageTokens {
font-weight: 500;
color: var(--text);
cursor: help;
}
.aiParallelUsageMeta {
color: var(--muted2);
}
.aiParallelUsageDuration {
color: var(--muted2);
}
.aiParallelUsageModel {
font-size: 10px;
padding: 2px 6px;
background: var(--bg2);
border-radius: 4px;
color: var(--muted);
text-transform: uppercase;
}
.aiParallelSectionTitle {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted2);
margin-bottom: 6px;
}
.aiParallelChanges,
.aiParallelUpdates {
display: flex;
flex-direction: column;
gap: 6px;
}
.aiParallelChange {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--fg2);
padding: 6px 8px;
background: rgba(var(--fg-rgb), 0.02);
border-radius: 6px;
border-left: 2px solid rgba(139, 92, 246, 0.3);
}
.aiParallelUpdate {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
font-size: 12px;
color: var(--fg2);
}
.aiParallelChangeRow {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.aiParallelChangeName {
color: var(--fg);
font-weight: 600;
}
.aiParallelChangeCompany {
color: var(--muted2);
font-size: 11px;
}
.aiParallelChangeDetails {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.aiParallelChangeRank {
font-size: 11px;
font-weight: 600;
padding: 2px 5px;
border-radius: 4px;
}
.aiParallelChangeRank.up {
color: #4ade80;
background: rgba(74, 222, 128, 0.12);
}
.aiParallelChangeRank.down {
color: #f87171;
background: rgba(248, 113, 113, 0.12);
}
.aiParallelChangeFunc {
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(139, 92, 246, 0.12);
color: #a78bfa;
text-transform: capitalize;
}
.aiParallelChangeMult {
font-size: 10px;
padding: 2px 5px;
border-radius: 4px;
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
font-family: var(--font-mono);
}
.aiParallelChangeScore {
font-size: 10px;
color: var(--muted2);
font-family: var(--font-mono);
}
.aiParallelChangeDelta {
font-size: 11px;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--accent);
}
.aiParallelChangeDelta.positive {
color: #4ade80;
border-color: rgba(74, 222, 128, 0.3);
background: rgba(74, 222, 128, 0.1);
}
.aiParallelChangeDelta.negative {
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
background: rgba(248, 113, 113, 0.1);
}
.aiParallelShowResults {
margin-left: auto;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
background: var(--accent);
color: #000;
border: none;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.15s;
}
.aiParallelShowResults:hover {
opacity: 0.85;
}
.aiParallelChangeReason {
color: var(--muted2);
font-size: 11px;
font-style: italic;
line-height: 1.4;
margin-top: 4px;
}
.aiParallelChangeRow {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.aiParallelChangeDetails {
font-size: 11px;
color: var(--muted2);
margin-top: 2px;
}
.aiParallelChangeFunction {
background: rgba(139, 92, 246, 0.15);
color: #a78bfa;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
.aiParallelChangeExp {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
padding: 1px 5px;
border-radius: 4px;
font-size: 10px;
}
.aiParallelChangeIcp {
background: rgba(236, 72, 153, 0.15);
color: #f472b6;
padding: 1px 5px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.aiParallelChangeScore {
color: var(--muted2);
font-size: 10px;
font-family: var(--font-mono);
}
.aiParallelChangeTotalMult {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
padding: 1px 5px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.aiParallelChangeMultRow {
margin-top: 4px;
}
.aiParallelChangeMultipliers {
display: flex;
flex-wrap: wrap;
gap: 4px;
font-size: 9px;
font-family: var(--font-mono);
color: var(--muted2);
}
.aiParallelChangeMultipliers > span {
background: rgba(var(--fg-rgb), 0.05);
padding: 1px 4px;
border-radius: 3px;
}
.aiParallelUpdateTag {
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.12);
color: var(--accent);
}
.aiParallelUpdateCompany {
color: var(--muted2);
}
.aiTraceReqId {
font-size: 11px;
color: var(--text-muted);
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 4px;
}
.aiTraceMemory {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text-muted);
margin: 4px 0 8px;
}
.aiTraceMemoryLabel {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10px;
color: var(--muted2);
}
/* Trace Timeline Container */
.aiTraceSteps {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Hide vertical timeline */
.aiTraceSteps::before {
display: none;
}
/* Individual trace step */
.aiTraceStep {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
}
/* Hide default bullet - using custom styling */
.aiTraceStep::before {
display: none;
}
/* Step label row */
.aiTraceStepBody {
display: flex;
flex-direction: column;
gap: 4px;
}
/* All step types - uniform clean style */
.aiTraceStep--understanding,
.aiTraceStep--thinking,
.aiTraceStep--searching,
.aiTraceStep--complete,
.aiTraceStep--reviewing,
.aiTraceStep--refining,
.aiTraceStep--generating,
.aiTraceStep--scoring,
.aiTraceStep--research,
.aiTraceStep--learning,
.aiTraceStep--executing {
flex-direction: column;
}
.aiTraceStep--active::after {
display: none;
}
/* All step icons hidden for cleaner look */
.aiTraceStep .aiTraceIcon {
display: none;
}
.aiTraceLabel {
font-size: 14px;
color: rgba(226, 232, 240, 0.9);
font-weight: 500;
display: block;
}
.aiTraceQueries {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
/* Query chips - subtle inline style */
.aiTraceQuery {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(163, 163, 118, 0.1);
border: 1px solid rgba(163, 163, 118, 0.2);
border-radius: 4px;
font-size: 12px;
color: var(--muted);
font-family: var(--font-mono, monospace);
}
.aiTraceQueryIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aiTraceQueryIcon svg {
width: 12px;
height: 12px;
display: block;
}
.aiTraceQuery:nth-child(1) { animation-delay: 0.1s; }
.aiTraceQuery:nth-child(2) { animation-delay: 0.2s; }
.aiTraceQuery:nth-child(3) { animation-delay: 0.3s; }
.aiTraceQuery:nth-child(4) { animation-delay: 0.4s; }
/* Reviewing step */
.aiTraceStep--reviewing .aiTraceLabel {
color: var(--muted2);
}
/* Complete step - green text */
.aiTraceStep--complete .aiTraceLabel {
color: #4ade80;
}
/* Research agents step styling */
.aiTraceStep--research {
color: var(--text);
}
.aiTraceStep--research .aiTraceIcon {
display: none;
}
.aiTraceStep--research .aiTraceLabel {
font-weight: 500;
color: rgba(226, 232, 240, 0.85);
}
.aiResearchAgents {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.aiResearchAgent {
display: grid;
grid-template-columns: 20px 180px 1fr 50px;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: rgba(167, 139, 250, 0.08);
border-radius: 6px;
font-size: 12px;
transition: opacity 0.3s ease;
}
.aiResearchAgent--done {
opacity: 0.7;
}
.aiResearchAgentIcon {
font-size: 14px;
}
.aiResearchAgentName {
color: var(--text);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aiResearchProgress {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.aiResearchProgressBar {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #8b5cf6);
border-radius: 2px;
transition: width 0.3s ease;
}
.aiResearchAgent--done .aiResearchProgressBar {
background: linear-gradient(90deg, #22c55e, #16a34a);
}
.aiResearchAgentStatus {
color: var(--text-secondary);
font-size: 11px;
text-align: right;
min-width: 40px;
}
.aiResearchAgentTokens {
color: var(--accent);
font-size: 10px;
font-weight: 600;
text-align: right;
}
.aiResearchAgent--done .aiResearchAgentStatus {
color: #22c55e;
}
/* Understanding step styling */
.aiTraceStep--understanding {
color: var(--text);
}
.aiTraceStep--understanding .aiTraceIcon {
display: none;
}
.aiTraceStep--understanding .aiTraceLabel {
font-weight: 500;
color: rgba(226, 232, 240, 0.85);
}
/* Learning step - yellow node */
.aiTraceStep--learning {
color: var(--text);
}
.aiTraceStep--learning::before {
border-color: #fbbf24;
background: #f59e0b;
}
.aiTraceStep--learning .aiTraceIcon {
display: none;
}
.aiTraceStep--learning .aiTraceLabel {
font-weight: 500;
color: rgba(226, 232, 240, 0.85);
}
/* Executing step - initial placeholder with amber node */
.aiTraceStep--executing {
color: var(--text);
}
.aiTraceStep--executing::before {
border-color: #fbbf24;
background: #f59e0b;
}
.aiTraceStep--executing .aiTraceIcon {
font-size: 12px;
margin-right: 2px;
}
.aiTraceStep--executing .aiTraceLabel {
font-weight: 500;
color: rgba(226, 232, 240, 0.85);
}
/* Step body container */
.aiTraceStepBody {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 4px;
}
/* Sub-content items (bullets) */
.aiTraceStepBody .aiTraceContent {
font-size: 12px;
color: var(--muted2);
line-height: 1.5;
word-break: break-word;
padding-left: 12px;
position: relative;
}
.aiTraceStepBody .aiTraceContent::before {
content: '•';
position: absolute;
left: 0;
color: rgba(163, 163, 118, 0.5);
}
/* Per-step cost display */
.aiTraceStepCost {
font-size: 10px;
color: var(--muted3);
margin-top: 4px;
opacity: 0.8;
flex-shrink: 0;
white-space: nowrap;
}
/* Cost in header row - no margin */
.aiTraceStepHeader .aiTraceStepCost {
margin-top: 0;
}
.aiTraceStepTokens {
color: var(--accent);
font-weight: 600;
}
.aiTraceStepReason {
font-size: 11px;
color: var(--muted2);
margin-top: 2px;
font-style: italic;
}
/* Search stats display in trace */
.aiTraceStats {
display: block;
font-size: 11px;
color: var(--muted2);
margin-top: 4px;
padding: 4px 8px;
background: var(--surface2);
border-radius: 4px;
font-family: var(--font-mono);
}
/* Expandable tool input details for diagnostics */
.aiTraceInputDetails {
margin-top: 6px;
}
.aiTraceInputToggle {
font-size: 10px;
color: var(--accent);
cursor: pointer;
padding: 2px 6px;
background: rgba(100, 149, 237, 0.1);
border-radius: 4px;
display: inline-block;
}
.aiTraceInputToggle:hover {
background: rgba(100, 149, 237, 0.2);
}
.aiTraceInputCode {
font-size: 10px;
font-family: 'SF Mono', Consolas, monospace;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
border-radius: 4px;
margin-top: 4px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
color: var(--fg2);
max-height: 150px;
overflow-y: auto;
}
:root[data-theme="light"] .aiTraceInputToggle {
background: rgba(100, 149, 237, 0.15);
}
:root[data-theme="light"] .aiTraceInputCode {
background: rgba(0, 0, 0, 0.05);
}
/* ─────────────────────────────────────────────────────────────────
Expandable Trace Steps (3-Layer Design)
Layer 1: Header (icon + summary + badge + chevron)
Layer 2: Expandable content (details, queries, tools)
Layer 3: Stats/metadata row
───────────────────────────────────────────────────────────────── */
.aiTraceStep--expandable {
display: block !important;
border: none;
margin: 0;
position: relative;
}
.aiTraceStep--expandable > summary {
list-style: none;
cursor: pointer;
}
.aiTraceStep--expandable > summary::-webkit-details-marker {
display: none;
}
.aiTraceStep--expandable > summary::marker {
display: none;
content: '';
}
/* Header row (Layer 1) */
.aiTraceStepHeader {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
cursor: pointer;
user-select: none;
border-radius: 6px;
transition: background 0.15s ease;
}
.aiTraceStepHeader:hover {
background: rgba(148, 163, 184, 0.08);
}
.aiTraceStepHeader .aiTraceIcon {
display: flex !important;
width: 16px;
height: 16px;
flex-shrink: 0;
position: relative;
z-index: 1;
background: var(--bg);
}
.aiTraceStepHeader .aiTraceIcon svg {
width: 16px;
height: 16px;
}
.aiTraceStepSummary {
flex: 1;
font-size: 13px;
color: var(--fg);
line-height: 1.4;
min-width: 0; /* Allow text truncation in flex */
}
.aiTraceStepSummary--truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Badge (Layer 1) */
.aiTraceStepBadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: rgba(163, 163, 118, 0.15);
border-radius: 4px;
font-size: 10px;
color: var(--muted);
font-family: var(--font-mono, monospace);
white-space: nowrap;
flex-shrink: 0;
}
.aiTraceStepBadge--results {
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}
.aiTraceStepBadge--queries {
background: rgba(100, 149, 237, 0.15);
color: #6495ed;
}
.aiTraceStepBadge--agents {
background: rgba(167, 139, 250, 0.15);
color: #a78bfa;
}
/* Chevron (Layer 1) */
.aiTraceStepChevron {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--muted3);
transition: transform 0.2s ease;
}
.aiTraceStepChevron svg {
width: 14px;
height: 14px;
}
.aiTraceStep--expandable[open] .aiTraceStepChevron {
transform: rotate(90deg);
}
/* Expandable content (Layer 2) */
.aiTraceStepExpand {
padding: 4px 0 8px 26px;
animation: traceExpandIn 0.2s ease-out;
position: relative;
}
/* Continuation line for expanded content */
.aiTraceStepExpand::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 8px;
width: 2px;
background: rgba(148, 163, 184, 0.2);
border-radius: 1px;
}
@keyframes traceExpandIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.aiTraceStepExpand .aiTraceContent {
font-size: 12px;
color: var(--muted2);
line-height: 1.5;
margin-bottom: 8px;
}
.aiTraceStepExpand .aiTraceContent::before {
display: none;
}
.aiTraceStepExpand .aiTraceQueries {
margin-top: 0;
margin-bottom: 8px;
}
/* Sub-items list (results, queries, etc.) */
.aiTraceSubItems {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.aiTraceSubItem {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
transition: background 0.15s ease;
cursor: default;
}
.aiTraceSubItem:hover {
background: rgba(148, 163, 184, 0.06);
}
.aiTraceSubItem__icon {
display: flex;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.aiTraceSubItem__icon svg {
width: 14px;
height: 14px;
}
.aiTraceSubItem__content {
flex: 1;
min-width: 0;
}
.aiTraceSubItem__title {
font-size: 12px;
color: var(--fg);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiTraceSubItem__meta {
font-size: 10px;
color: var(--muted3);
margin-top: 2px;
}
.aiTraceSubItem__badge {
font-size: 10px;
color: var(--muted3);
flex-shrink: 0;
}
/* Sub-item icon colors */
.aiTraceSubItem--query .aiTraceSubItem__icon { color: #6495ed; }
.aiTraceSubItem--person .aiTraceSubItem__icon { color: #22d3d1; }
.aiTraceSubItem--company .aiTraceSubItem__icon { color: #f59e0b; }
.aiTraceSubItem--path .aiTraceSubItem__icon { color: #10b981; }
.aiTraceSubItem--result .aiTraceSubItem__icon { color: #22c55e; }
.aiTraceSubItem--tool .aiTraceSubItem__icon { color: #a78bfa; }
/* Full thinking text in expanded view */
.aiTraceThinkingText {
margin-top: 8px;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.12);
border-radius: 6px;
border-left: 2px solid rgba(163, 163, 118, 0.4);
font-size: 12px;
line-height: 1.5;
color: var(--muted2);
white-space: pre-wrap;
word-break: break-word;
}
/* Query parameters section */
.aiTraceParams {
margin-top: 8px;
padding: 8px;
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.aiTraceParamsLabel {
font-size: 10px;
color: var(--muted3);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.aiTraceParamsCode {
font-size: 10px;
font-family: var(--font-mono, monospace);
color: var(--muted2);
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
/* Stats row (Layer 3) */
.aiTraceStepMeta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
font-size: 10px;
color: var(--muted3);
}
.aiTraceStepMeta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.aiTraceStepMeta .aiTraceStepTokens {
color: var(--accent);
font-weight: 600;
}
/* Timeline container - vertical line connecting steps */
.aiTraceSteps {
position: relative;
}
.aiTraceSteps::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom, rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.1));
border-radius: 1px;
}
/* Non-expandable steps - consistent header style */
.aiTraceStep--simple {
display: flex;
flex-direction: row !important;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
position: relative;
}
.aiTraceStep--simple .aiTraceIcon {
display: flex !important;
width: 16px;
height: 16px;
flex-shrink: 0;
position: relative;
z-index: 1;
background: var(--bg);
}
.aiTraceStep--simple .aiTraceIcon svg {
width: 16px;
height: 16px;
}
.aiTraceStep--simple .aiTraceContent {
flex: 1;
font-size: 13px;
color: var(--fg);
padding-left: 0;
line-height: 1.4;
}
.aiTraceStep--simple .aiTraceContent::before {
display: none;
}
.aiTraceStep--simple .aiTraceStepCost {
margin-top: 0;
margin-left: auto;
}
/* Complete step - green icon */
.aiTraceStep--complete.aiTraceStep--simple .aiTraceIcon {
color: #4ade80;
}
.aiTraceStep--complete.aiTraceStep--simple .aiTraceContent {
color: #4ade80;
}
/* Step type icon colors */
.aiTraceStep--understanding .aiTraceIcon,
.aiTraceStep--thinking .aiTraceIcon,
.aiTraceStep--learning .aiTraceIcon {
color: #a78bfa;
}
.aiTraceStep--searching .aiTraceIcon {
color: #6495ed;
}
.aiTraceStep--refining .aiTraceIcon {
color: #f59e0b;
}
.aiTraceStep--generating .aiTraceIcon {
color: #a78bfa;
}
.aiTraceStep--reviewing .aiTraceIcon {
color: #22c55e;
}
.aiTraceStep--research .aiTraceIcon {
color: #a78bfa;
}
/* Light mode overrides */
:root[data-theme="light"] .aiTraceStepBadge {
background: rgba(163, 163, 118, 0.12);
}
:root[data-theme="light"] .aiTraceStepBadge--results {
background: rgba(34, 197, 94, 0.12);
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStepBadge--queries {
background: rgba(59, 130, 246, 0.12);
color: #2563eb;
}
:root[data-theme="light"] .aiTraceStepBadge--agents {
background: rgba(139, 92, 246, 0.12);
color: #7c3aed;
}
:root[data-theme="light"] .aiTraceStepMeta {
border-top-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .aiTraceStep--complete.aiTraceStep--simple .aiTraceIcon,
:root[data-theme="light"] .aiTraceStep--complete.aiTraceStep--simple .aiTraceContent {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStep--understanding .aiTraceIcon,
:root[data-theme="light"] .aiTraceStep--thinking .aiTraceIcon,
:root[data-theme="light"] .aiTraceStep--learning .aiTraceIcon {
color: #7c3aed;
}
:root[data-theme="light"] .aiTraceStep--searching .aiTraceIcon {
color: #2563eb;
}
:root[data-theme="light"] .aiTraceStep--refining .aiTraceIcon {
color: #d97706;
}
:root[data-theme="light"] .aiTraceStep--generating .aiTraceIcon {
color: #7c3aed;
}
:root[data-theme="light"] .aiTraceStep--reviewing .aiTraceIcon {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStep--research .aiTraceIcon {
color: #7c3aed;
}
/* Light mode - Timeline and sub-items */
:root[data-theme="light"] .aiTraceSteps::before {
background: linear-gradient(to bottom, rgba(100, 116, 139, 0.25), rgba(100, 116, 139, 0.08));
}
:root[data-theme="light"] .aiTraceStepExpand::before {
background: rgba(100, 116, 139, 0.15);
}
:root[data-theme="light"] .aiTraceStepHeader:hover {
background: rgba(100, 116, 139, 0.08);
}
:root[data-theme="light"] .aiTraceSubItem:hover {
background: rgba(100, 116, 139, 0.06);
}
:root[data-theme="light"] .aiTraceSubItem--query .aiTraceSubItem__icon { color: #2563eb; }
:root[data-theme="light"] .aiTraceSubItem--person .aiTraceSubItem__icon { color: #0891b2; }
:root[data-theme="light"] .aiTraceSubItem--company .aiTraceSubItem__icon { color: #d97706; }
:root[data-theme="light"] .aiTraceSubItem--path .aiTraceSubItem__icon { color: #059669; }
:root[data-theme="light"] .aiTraceSubItem--result .aiTraceSubItem__icon { color: #16a34a; }
:root[data-theme="light"] .aiTraceSubItem--tool .aiTraceSubItem__icon { color: #7c3aed; }
:root[data-theme="light"] .aiTraceThinkingText {
background: rgba(0, 0, 0, 0.03);
border-left-color: rgba(100, 95, 60, 0.4);
}
:root[data-theme="light"] .aiTraceParams {
background: rgba(0, 0, 0, 0.04);
}
/* Tool Costs Table */
.aiTraceTools {
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 10px 12px;
animation: traceSlideIn 0.3s ease-out 0.4s both;
}
.aiTraceToolsHeader {
font-size: 11px;
font-weight: 600;
color: var(--muted2);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.aiTraceToolHeaderRow {
display: grid;
grid-template-columns: 1fr 65px 50px 55px;
gap: 8px;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted3);
padding-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 2px;
}
.aiTraceToolHeaderRow span:nth-child(2),
.aiTraceToolHeaderRow span:nth-child(3),
.aiTraceToolHeaderRow span:nth-child(4) {
text-align: right;
}
.aiTraceToolRow {
display: grid;
grid-template-columns: 1fr 65px 50px 55px;
gap: 8px;
align-items: center;
padding: 3px 0;
font-size: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
animation: traceFadeIn 0.25s ease-out both;
}
.aiTraceToolTokens {
color: #fda4af;
font-family: var(--font-mono, monospace);
font-size: 9px;
text-align: right;
}
/* Stagger tool row animations */
.aiTraceToolRow:nth-child(1) { animation-delay: 0.45s; }
.aiTraceToolRow:nth-child(2) { animation-delay: 0.5s; }
.aiTraceToolRow:nth-child(3) { animation-delay: 0.55s; }
.aiTraceToolRow:nth-child(4) { animation-delay: 0.6s; }
.aiTraceToolRow:last-child {
border-bottom: none;
}
.aiTraceToolName {
color: var(--text);
font-family: var(--font-mono, monospace);
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aiTraceToolMeta {
color: var(--muted3);
font-size: 9px;
text-align: right;
}
.aiTraceToolDuration {
color: var(--muted3);
font-family: var(--font-mono, monospace);
font-size: 9px;
text-align: right;
}
/* Graph dock (right side) */
/* Token Summary */
.aiTraceSummary {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px 0 0;
margin-top: 4px;
border-top: 1px solid rgba(163, 163, 118, 0.15);
font-size: 11px;
font-family: var(--font-mono, monospace);
color: var(--muted2);
}
.aiTraceSummaryTokens {
font-weight: 500;
color: rgba(163, 163, 118, 0.9);
}
.aiTraceSummaryTokens--fastpath {
color: #22c55e;
}
.aiTraceSummaryMeta {
color: var(--muted3);
}
.aiTraceSummaryDuration {
padding: 2px 6px;
background: rgba(163, 163, 118, 0.15);
border-radius: 4px;
color: rgba(163, 163, 118, 0.9);
}
.aiTraceSummaryRounds {
padding: 2px 6px;
background: rgba(163, 163, 118, 0.15);
border-radius: 4px;
color: rgba(163, 163, 118, 0.9);
}
/* Light theme */
:root[data-theme="light"] .aiTracePanel {
background: transparent;
border-color: rgba(100, 95, 60, 0.35);
}
:root[data-theme="light"] .aiTracePanelHeader::before {
background: rgba(100, 95, 60, 0.8);
}
:root[data-theme="light"] .aiTracePanelStatus {
color: #1a1a18;
}
:root[data-theme="light"] .aiTracePanelTitle {
color: #555;
}
:root[data-theme="light"] .aiTraceLabel {
color: #2a2a25;
}
:root[data-theme="light"] .aiTraceStep--thinking .aiTraceIcon {
color: #6366f1;
}
:root[data-theme="light"] .aiTraceQuery {
background: rgba(120, 113, 80, 0.08);
border-color: rgba(120, 113, 80, 0.2);
color: #5c5a3d;
}
:root[data-theme="light"] .aiTraceStep--refining .aiTraceQuery {
background: rgba(120, 113, 80, 0.08);
border-color: rgba(120, 113, 80, 0.2);
color: #5c5a3d;
}
:root[data-theme="light"] .aiTraceStep--generating .aiTraceQuery {
background: rgba(120, 113, 80, 0.08);
border-color: rgba(120, 113, 80, 0.2);
color: #5c5a3d;
}
:root[data-theme="light"] .aiVea1LoadingPanel,
:root[data-theme="light"] .aiVea1ProgressPanel,
:root[data-theme="light"] .aiTracePanel--vea1 {
border-color: rgba(120, 113, 80, 0.3);
}
:root[data-theme="light"] .aiVea1LoadingPanel::before {
background: linear-gradient(180deg, rgba(120, 113, 80, 0.5) 0%, rgba(120, 113, 80, 0.2) 100%);
}
:root[data-theme="light"] .aiVea1LoadingTitle,
:root[data-theme="light"] .aiVea1StepTitle {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .aiVea1LoadingDots .dot--purple {
background: rgba(120, 113, 80, 0.6);
}
:root[data-theme="light"] .aiVea1ProgressFill {
background: rgba(120, 113, 80, 0.5);
}
:root[data-theme="light"] .aiVea1StepIndicator {
color: rgba(120, 113, 80, 0.7);
}
:root[data-theme="light"] .aiVea1Step--active .aiVea1StepIndicator {
background: rgba(120, 113, 80, 0.7);
}
:root[data-theme="light"] .aiTraceStep--complete {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStep--complete .aiTraceIcon {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStep--understanding .aiTraceLabel {
color: #1a1a18;
}
:root[data-theme="light"] .aiTraceStep--learning .aiTraceLabel {
color: #1a1a18;
}
:root[data-theme="light"] .aiTraceStep--research .aiTraceLabel {
color: #1a1a18;
}
:root[data-theme="light"] .aiTraceStepBody .aiTraceContent {
color: #4a4a42;
}
:root[data-theme="light"] .aiTraceStepBody .aiTraceContent::before {
color: rgba(100, 95, 60, 0.6);
}
:root[data-theme="light"] .aiResearchAgent {
background: rgba(124, 58, 237, 0.08);
}
:root[data-theme="light"] .aiResearchProgress {
background: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .aiResearchProgressBar {
background: linear-gradient(90deg, #7c3aed, #6d28d9);
}
:root[data-theme="light"] .aiResearchAgent--done .aiResearchAgentStatus {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceStepCost {
color: var(--muted2);
}
:root[data-theme="light"] .aiTraceTools {
background: rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .aiTraceToolHeaderRow {
color: rgba(15, 23, 42, 0.45);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .aiTraceToolRow {
border-bottom-color: rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] .aiTraceToolTokens {
color: #be123c;
}
:root[data-theme="light"] .aiTraceSummary {
background: rgba(99, 102, 241, 0.05);
}
:root[data-theme="light"] .aiTraceSummaryTokens {
color: #6366f1;
}
:root[data-theme="light"] .aiTraceSummaryTokens--fastpath {
color: #16a34a;
}
:root[data-theme="light"] .aiTraceSummaryDuration {
background: rgba(34, 197, 94, 0.12);
color: #16a34a;
}
:root[data-theme="light"] .aiTraceSummaryRounds {
background: rgba(251, 191, 36, 0.12);
color: #d97706;
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Quick action chips */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiChatChips {
display: none;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
padding: 8px 0;
}
/* Compact chips when conversation is active */
.aiChatBar.hasMessages .aiChatChips {
padding: 8px 0 4px;
gap: 6px;
justify-content: flex-start;
display: none;
}
.aiChatChip {
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #ffffff;
color: #111827;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.aiChatChip:hover {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.2);
color: #0f172a;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Loading state */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiChatBar.isLoading .aiChatSend {
animation: sendPulse 1.2s infinite;
}
@keyframes sendPulse {
0%, 100% {
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.175);
}
50% {
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.30), 0 0 26px rgba(99, 102, 241, 0.10);
}
}
/* ════════════════════════════════════════════════════════════════════════════ */
/* OBJECT CARDS - IDE-style result containers (MCP-compatible) */
/* ════════════════════════════════════════════════════════════════════════════ */
.objectCard {
--oc-border: rgba(163, 163, 118, 0.3);
display: flex;
flex-direction: column;
background: rgba(163, 163, 118, 0.04);
border: 1px solid var(--oc-border);
border-radius: 8px;
overflow: hidden;
animation: objectCardIn 0.2s ease-out;
font-family: var(--font-sans);
max-height: 600px;
box-shadow: inset 0 1px 0 rgba(163, 163, 118, 0.08);
}
@keyframes objectCardIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.97);
}
60% {
opacity: 1;
transform: translateY(-2px) scale(1.005);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CLOTH TEXTURE SYSTEM - Fabric-inspired UI surfaces */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* --- Cloth Weave Pattern Mixin (via CSS custom properties) --- */
:root {
/* Cloth weave thread colors */
--cloth-warp-rgb: 255, 255, 255;
--cloth-weft-rgb: 200, 210, 230;
/* Weave spacing - creates natural fabric irregularity */
--cloth-spacing-1: 5px;
--cloth-spacing-2: 7px;
--cloth-spacing-3: 11px;
--cloth-spacing-4: 13px;
/* Thread alphas for layered depth */
--cloth-thread-a1: 0.045;
--cloth-thread-a2: 0.035;
--cloth-thread-a3: 0.025;
--cloth-thread-a4: 0.018;
/* Card cloth color tints */
--cloth-tint-indigo: 99, 102, 241;
--cloth-tint-violet: 139, 92, 246;
--cloth-tint-emerald: 16, 185, 129;
--cloth-tint-amber: 245, 158, 11;
--cloth-tint-rose: 244, 63, 94;
--cloth-tint-slate: 100, 116, 139;
--cloth-tint-cyan: 6, 182, 212;
}
/* --- Cloth Window: Frosted fabric glass for AI transcript area --- */
.clothWindow {
position: relative;
background: rgba(12, 15, 25, 0.72);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
}
.clothWindow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.28;
mix-blend-mode: screen;
z-index: 0;
/* Woven crosshatch - vertical warp threads */
background-image:
repeating-linear-gradient(
0deg,
rgba(var(--cloth-warp-rgb), var(--cloth-thread-a1)) 0px,
rgba(var(--cloth-warp-rgb), var(--cloth-thread-a1)) 1px,
transparent 1px,
transparent var(--cloth-spacing-1)
),
/* Horizontal weft threads */
repeating-linear-gradient(
90deg,
rgba(var(--cloth-weft-rgb), var(--cloth-thread-a2)) 0px,
rgba(var(--cloth-weft-rgb), var(--cloth-thread-a2)) 1px,
transparent 1px,
transparent var(--cloth-spacing-2)
),
/* Secondary warp (larger spacing) */
repeating-linear-gradient(
0deg,
rgba(var(--cloth-warp-rgb), var(--cloth-thread-a3)) 0px,
rgba(var(--cloth-warp-rgb), var(--cloth-thread-a3)) 1px,
transparent 1px,
transparent var(--cloth-spacing-3)
),
/* Secondary weft (larger spacing) */
repeating-linear-gradient(
90deg,
rgba(var(--cloth-weft-rgb), var(--cloth-thread-a4)) 0px,
rgba(var(--cloth-weft-rgb), var(--cloth-thread-a4)) 1px,
transparent 1px,
transparent var(--cloth-spacing-4)
);
filter: blur(0.3px) contrast(1.15);
}
/* Fabric fiber fuzz overlay */
.clothWindow::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
mix-blend-mode: soft-light;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
background-size: 400px 400px;
}
/* Content above texture layers */
.clothWindow > * {
position: relative;
z-index: 2;
}
/* --- Cloth Card Base: Fabric-textured result cards --- */
.objectCard--cloth {
--oc-border: rgba(255, 255, 255, 0.10);
--cloth-tint: var(--cloth-tint-slate);
position: relative;
background:
linear-gradient(135deg,
rgba(var(--cloth-tint), 0.12) 0%,
rgba(var(--cloth-tint), 0.04) 50%,
rgba(20, 20, 35, 0.95) 100%);
border: 1px solid rgba(var(--cloth-tint), 0.18);
overflow: hidden;
}
.objectCard--cloth::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: screen;
z-index: 0;
/* Cloth weave pattern */
background-image:
repeating-linear-gradient(
2deg,
rgba(var(--cloth-warp-rgb), 0.04) 0px,
rgba(var(--cloth-warp-rgb), 0.04) 1px,
transparent 1px,
transparent 6px
),
repeating-linear-gradient(
92deg,
rgba(var(--cloth-weft-rgb), 0.035) 0px,
rgba(var(--cloth-weft-rgb), 0.035) 1px,
transparent 1px,
transparent 8px
),
repeating-linear-gradient(
-1deg,
rgba(var(--cloth-warp-rgb), 0.025) 0px,
rgba(var(--cloth-warp-rgb), 0.025) 1px,
transparent 1px,
transparent 14px
),
repeating-linear-gradient(
89deg,
rgba(var(--cloth-weft-rgb), 0.02) 0px,
rgba(var(--cloth-weft-rgb), 0.02) 1px,
transparent 1px,
transparent 18px
);
filter: blur(0.4px) contrast(1.08);
}
/* Subtle fiber texture */
.objectCard--cloth::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)' opacity='.65'/%3E%3C/svg%3E");
background-size: 300px 300px;
}
/* Content sits above texture */
.objectCard--cloth > * {
position: relative;
z-index: 2;
}
/* --- Cloth Color Variants --- */
.objectCard--cloth-indigo {
--cloth-tint: var(--cloth-tint-indigo);
}
.objectCard--cloth-violet {
--cloth-tint: var(--cloth-tint-violet);
}
.objectCard--cloth-emerald {
--cloth-tint: var(--cloth-tint-emerald);
}
.objectCard--cloth-amber {
--cloth-tint: var(--cloth-tint-amber);
}
.objectCard--cloth-rose {
--cloth-tint: var(--cloth-tint-rose);
}
.objectCard--cloth-cyan {
--cloth-tint: var(--cloth-tint-cyan);
}
/* Subtle glow on hover for cloth cards */
.objectCard--cloth:hover {
border-color: rgba(var(--cloth-tint), 0.28);
box-shadow:
0 0 24px rgba(var(--cloth-tint), 0.08),
0 8px 24px rgba(0, 0, 0, 0.25);
}
/* --- AI Chat Transcript Cloth Style --- */
/* No colored background - let content stand on its own */
.aiChatBar.clothStyle {
position: relative;
}
/* ==========================================================================
Felt Texture Utility - Reusable wallpaper texture
Use: Add .feltTexture class to any element, or use the mixin layers
========================================================================== */
/* Weave layer - the cloth grid pattern */
.feltTexture::before,
.feltWeave::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: var(--felt-weave-opacity);
mix-blend-mode: var(--felt-weave-blend);
transform: rotate(-0.6deg) scale(1.02);
z-index: 0;
background-image:
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 6px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 7px
),
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 13px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 17px
);
filter: blur(0.55px) contrast(1.10) brightness(1.05);
}
/* Fuzz layer - fiber noise texture */
.feltTexture::after,
.feltFuzz::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: var(--felt-fuzz-opacity);
mix-blend-mode: var(--felt-fuzz-blend);
transform: rotate(0.3deg);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
background-size: 720px 720px;
}
/* Content stays above texture */
.feltTexture > * {
position: relative;
z-index: 2;
}
/* ==========================================================================
Cloth Style Cards - Apply felt texture to result cards
========================================================================== */
/* Only front card gets overflow hidden (back card needs to peek) */
.aiChatBar.clothStyle .jobChangesDeck__card--front {
overflow: hidden;
}
/* Cloth texture on cards - render ABOVE background with blend modes */
.aiChatBar.clothStyle .jobChangesDeck__card::before {
content: "";
position: absolute;
inset: -10%;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: overlay;
transform: rotate(-0.6deg) scale(1.02);
z-index: 1;
background-image:
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 6px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 7px
),
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 13px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 17px
);
filter: blur(0.55px) contrast(1.10) brightness(1.05);
}
.aiChatBar.clothStyle .jobChangesDeck__card::after {
content: "";
position: absolute;
inset: -10%;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
transform: rotate(0.3deg);
z-index: 2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
background-size: 720px 720px;
}
/* Keep card content above texture overlays */
.aiChatBar.clothStyle .jobChangesDeck__card > * {
position: relative;
z-index: 3;
}
/* Transcript content - no background overlay, just cards get texture */
/* Light theme cloth adjustments */
:root[data-theme="light"] .clothWindow {
background: rgba(248, 250, 252, 0.78);
border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .clothWindow::before {
--cloth-warp-rgb: 12, 18, 34;
--cloth-weft-rgb: 30, 40, 60;
mix-blend-mode: multiply;
opacity: 0.18;
}
:root[data-theme="light"] .clothWindow::after {
opacity: 0.06;
}
:root[data-theme="light"] .objectCard--cloth {
background:
linear-gradient(135deg,
rgba(var(--cloth-tint), 0.08) 0%,
rgba(var(--cloth-tint), 0.03) 50%,
rgba(255, 255, 255, 0.95) 100%);
border-color: rgba(var(--cloth-tint), 0.15);
}
:root[data-theme="light"] .objectCard--cloth::before {
--cloth-warp-rgb: 12, 18, 34;
--cloth-weft-rgb: 30, 40, 60;
mix-blend-mode: multiply;
opacity: 0.20;
}
:root[data-theme="light"] .objectCard--cloth::after {
opacity: 0.05;
}
/* Light theme cloth - no transcript background */
/* ==========================================================================
Felt Texture Mode - CSS-based woven felt texture
Activated via texture slider (data-feltTexture="true")
========================================================================== */
/* Dark mode felt background */
:root[data-feltTexture="true"] .homeSurface {
position: relative;
overflow: hidden;
}
:root[data-feltTexture="true"] .homeSurface::before {
content: "";
position: absolute;
inset: -24%;
pointer-events: none;
opacity: var(--felt-weave-opacity);
mix-blend-mode: var(--felt-weave-blend);
transform: rotate(-0.6deg) scale(1.02);
z-index: 0;
background-image:
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a1)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 6px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a2)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 7px
),
repeating-linear-gradient(
0deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a3)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 13px
),
repeating-linear-gradient(
90deg,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 0px,
rgba(var(--felt-thread-dark-rgb), var(--felt-thread-a4)) 1px,
rgba(var(--felt-thread-light-rgb), 0.00) 2px,
rgba(var(--felt-thread-light-rgb), 0.00) 17px
);
filter: blur(0.55px) contrast(1.10) brightness(1.05);
}
:root[data-feltTexture="true"] .homeSurface::after {
content: "";
position: absolute;
inset: -24%;
pointer-events: none;
opacity: var(--felt-fuzz-opacity);
mix-blend-mode: var(--felt-fuzz-blend);
transform: rotate(0.3deg);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
background-size: 720px 720px;
background-position: 60px 20px;
}
:root[data-feltTexture="true"] .homeSurface > * {
position: relative;
z-index: 2;
}
/* Light mode felt - warm linen threads */
:root[data-theme="light"][data-feltTexture="true"] {
--felt-thread-dark-rgb: 120, 100, 80;
--felt-thread-light-rgb: 180, 160, 140;
--felt-thread-a1: 0.12;
--felt-thread-a2: 0.10;
--felt-thread-a3: 0.06;
--felt-thread-a4: 0.05;
--felt-weave-opacity: 0.45;
--felt-weave-blend: multiply;
--felt-fuzz-opacity: 0.15;
--felt-fuzz-blend: multiply;
}
/* Felt card color tints - subtle fabric colors */
:root[data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card--front {
--felt-card-tint: rgba(99, 102, 241, 0.08); /* indigo */
}
:root[data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card--back {
--felt-card-tint: rgba(139, 92, 246, 0.08); /* violet */
}
/* Apply subtle tint to felt cards */
:root[data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card {
background: linear-gradient(
135deg,
var(--felt-card-tint, transparent) 0%,
transparent 50%
), rgb(20, 20, 35);
}
:root[data-theme="light"][data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.06) 0%,
transparent 50%
), var(--bg1);
}
/* Light mode felt cards need stronger texture overlay */
:root[data-theme="light"][data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card::before {
opacity: 0.40;
mix-blend-mode: multiply;
}
:root[data-theme="light"][data-feltTexture="true"] .aiChatBar.clothStyle .jobChangesDeck__card::after {
opacity: 0.25;
mix-blend-mode: multiply;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .objectCard {
--oc-border: rgba(100, 95, 65, 0.35);
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 2px 8px rgba(90, 85, 60, 0.08);
border: 1px solid rgba(100, 95, 65, 0.28);
}
:root[data-theme="light"] .objectCard__header {
background: rgba(130, 125, 95, 0.10);
border-bottom: 1px solid rgba(100, 95, 65, 0.20);
}
:root[data-theme="light"] .objectCard__title {
color: #2a2a25;
}
:root[data-theme="light"] .objectCard__meta {
color: #5a5a52;
}
.objectCard__header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(163, 163, 118, 0.06);
border-bottom: 1px solid var(--oc-border);
min-height: 32px;
}
.copyListBtn {
width: 26px;
height: 26px;
color: var(--muted2);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
opacity: 0.7;
}
.generatedContentCopyBtn {
margin-left: auto;
border: 1px solid var(--stroke2);
background: color-mix(in srgb, var(--card) 70%, transparent);
color: var(--text);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.generatedContentCopyBtn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.resultsGraphIcon {
width: 26px;
height: 26px;
color: var(--muted2);
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
appearance: none;
}
.resultsGraphIcon svg {
width: 18px;
height: 18px;
display: block;
}
.resultsGraphIcon:hover {
opacity: 1;
color: var(--accent);
}
.copyListBtn:hover {
opacity: 1;
color: var(--accent);
}
/* Double-box copy icon using CSS - smaller and softer */
.copyListBtn::before,
.copyListBtn::after {
content: '';
position: absolute;
border: 1px solid currentColor;
border-radius: 2px;
transition: all 0.15s ease;
}
.copyListBtn::before {
width: 10px;
height: 11px;
top: 6px;
left: 7px;
}
.copyListBtn::after {
width: 10px;
height: 11px;
top: 9px;
left: 10px;
background: transparent;
}
:root[data-theme="light"] .copyListBtn::after { background: transparent; }
.copyListBtn.copied {
opacity: 1;
color: var(--accent);
}
.copyListBtn.copied::before,
.copyListBtn.copied::after {
border-color: var(--accent);
}
.objectCard__breakdown {
padding: 8px 14px;
border-bottom: 1px solid var(--oc-border);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.breakdownTag {
font-size: 11px;
padding: 3px 8px;
background: transparent;
border: 1px solid var(--oc-border);
border-radius: 4px;
color: var(--muted);
}
.objectCard__icon { font-size: 12px; line-height: 1; opacity: 0.6; }
.objectCard__icon svg { width: 14px; height: 14px; display: block; }
.objectCard__title { font-size: 14px; font-weight: 500; color: #e0e0d8; flex: 1; letter-spacing: 0.01em; }
.objectCard__meta { font-size: 13px; color: rgba(180, 180, 160, 0.8); font-weight: 400; }
.objectCard__content {
padding: 0;
flex: 1;
min-height: 0; /* Required for flex overflow */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
/* Minimal scrollbar - thin with transparent rail */
.objectCard__content::-webkit-scrollbar { width: 3px; }
.objectCard__content::-webkit-scrollbar-track { background: transparent; }
.objectCard__content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 3px;
}
.objectCard__content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
:root[data-theme="light"] .objectCard__content {
scrollbar-color: rgba(12, 18, 34, 0.1) transparent;
}
:root[data-theme="light"] .objectCard__content::-webkit-scrollbar-thumb {
background: rgba(12, 18, 34, 0.1);
}
:root[data-theme="light"] .objectCard__content::-webkit-scrollbar-thumb:hover {
background: rgba(12, 18, 34, 0.2);
}
.objectCard__footer {
padding: 8px 12px;
border-top: 1px solid var(--oc-border);
background: transparent;
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0; /* Don't let footer shrink */
}
.objectCard__footer .loadMoreBtn {
font-size: 12px;
color: var(--muted2);
background: transparent;
border: 1px solid var(--stroke);
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s ease;
opacity: 0.7;
}
.objectCard__footer .loadMoreBtn:hover {
opacity: 1;
color: var(--text);
border-color: var(--muted);
}
/* Context/interpretation text below header */
.objectCard__context {
padding: 8px 12px;
font-size: 13px;
color: var(--muted);
line-height: 1.5;
border-bottom: 1px solid var(--oc-border);
background: #1e1e2e;
}
:root[data-theme="light"] .objectCard__context {
background: #f1f5f9;
}
/* Error state */
.objectCard--error {
border-color: #dc2626;
}
.objectCard--error .objectCard__header {
background: #450a0a;
}
:root[data-theme="light"] .objectCard--error {
border-color: #dc2626;
}
:root[data-theme="light"] .objectCard--error .objectCard__header {
background: #fef2f2;
}
/* Back button in card header and footer */
.objectCard__header .backBtn,
.objectCard__footer .backBtn {
font-size: 12px;
color: var(--muted2);
background: transparent;
border: 1px solid var(--stroke);
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s ease;
opacity: 0.7;
margin-right: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.objectCard__header .backBtn:hover,
.objectCard__footer .backBtn:hover {
opacity: 1;
color: var(--text);
border-color: var(--muted);
}
.backBtnIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.backBtnIcon svg {
width: 12px;
height: 12px;
display: block;
}
.objectCard__footer {
gap: 8px;
}
/* Loading dots animation for drill-down */
.loadingDots {
font-size: 14px;
color: var(--muted2);
}
.loadingDots span {
animation: loadingDot 1.4s infinite both;
}
.loadingDots span:nth-child(2) { animation-delay: 0.2s; }
.loadingDots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadingDot {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}
/* Clickable company list items */
.ocList__item--clickable {
cursor: pointer;
transition: background 0.15s ease;
}
.ocList__item--clickable:hover {
background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="light"] .ocList__item--clickable:hover {
background: rgba(0, 0, 0, 0.03);
}
.aiChatSummary {
margin-top: 12px;
font-size: 14px;
color: var(--text);
line-height: 1.5;
}
.aiChatSummary--streaming {
margin-top: 0;
margin-bottom: 8px;
}
/* ═══════════════════════════════════════════════════════════════
Research Tool Cards - Company Research, Shared Connections, Intro Check
═══════════════════════════════════════════════════════════════ */
/* Insight banner below header */
.objectCard__insight {
padding: 10px 12px;
font-size: 13px;
line-height: 1.5;
background: rgba(59, 130, 246, 0.1);
border-bottom: 1px solid var(--oc-border);
color: var(--text);
}
:root[data-theme="light"] .objectCard__insight {
background: rgba(59, 130, 246, 0.08);
}
/* Org Chart Styles */
.orgChartSection {
padding: 12px 0;
}
.orgChartTitle {
font-size: 12px;
font-weight: 600;
color: var(--muted);
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.orgChartTitleIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orgChartTitleIcon svg {
width: 12px;
height: 12px;
display: block;
}
.orgChart {
display: flex;
flex-direction: column;
gap: 8px;
}
.orgArchetypeSection {
margin: 4px 0 16px;
padding: 10px 12px;
border: 1px solid var(--oc-border);
border-radius: 10px;
background: rgba(99, 102, 241, 0.08);
}
.orgArchetypeHeader {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.orgArchetypeTags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.orgArchetypeTag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.3);
color: #c7d2fe;
font-size: 12px;
font-weight: 600;
}
.orgArchetypeScore {
padding: 2px 6px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.35);
font-size: 10px;
font-weight: 600;
color: #e2e8f0;
}
.orgArchetypeNote {
margin-top: 8px;
font-size: 11px;
color: var(--muted2);
}
.orgTargetFocus {
margin-top: 8px;
font-size: 12px;
color: var(--text);
}
.orgDeptRow {
display: flex;
align-items: center;
gap: 10px;
}
.orgDeptRow--target {
padding: 6px 8px;
border-radius: 8px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.25);
}
.orgDeptLabel {
width: 90px;
font-size: 12px;
color: var(--muted);
text-align: right;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.orgDeptTarget {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #f59e0b;
}
.orgDeptLabelIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orgDeptLabelIcon svg {
width: 12px;
height: 12px;
display: block;
}
.orgDeptBar {
flex: 1;
height: 20px;
background: linear-gradient(90deg, rgba(99, 102, 241, 0.6), rgba(99, 102, 241, 0.3));
border-radius: 4px;
width: var(--width);
max-width: var(--width);
display: flex;
align-items: center;
padding: 0 8px;
transition: width 0.3s ease;
}
.orgDeptCount {
font-size: 11px;
font-weight: 600;
color: white;
}
.orgDeptBadges {
display: flex;
gap: 6px;
width: 80px;
flex-shrink: 0;
}
.orgDeptDirect, .orgDeptTwoHop {
font-size: 10px;
padding: 2px 5px;
border-radius: 3px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.orgDeptBadgeIcon {
width: 10px;
height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orgDeptBadgeIcon svg {
width: 10px;
height: 10px;
display: block;
}
.orgDeptDirect {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.orgDeptTwoHop {
background: rgba(168, 85, 247, 0.2);
color: #a855f7;
}
.orgChartSummary {
display: flex;
gap: 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--oc-border);
}
.orgStat {
font-size: 12px;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.orgStatIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orgStatIcon svg {
width: 12px;
height: 12px;
display: block;
}
/* Hierarchy Section */
.hierarchySection {
padding-bottom: 16px;
border-bottom: 1px solid var(--oc-border);
margin-bottom: 16px;
}
.hierarchyInsight {
font-size: 12px;
color: var(--muted);
margin: 0 0 12px 0;
padding: 8px 10px;
background: rgba(59, 130, 246, 0.08);
border-radius: 6px;
line-height: 1.4;
}
.hierarchyRow {
margin-bottom: 2px;
}
.hierarchyBar {
background: linear-gradient(90deg, rgba(168, 85, 247, 0.6), rgba(168, 85, 247, 0.3));
}
.hierarchyBar--c_suite { background: linear-gradient(90deg, rgba(239, 68, 68, 0.7), rgba(239, 68, 68, 0.4)); }
.hierarchyBar--founder { background: linear-gradient(90deg, rgba(249, 115, 22, 0.7), rgba(249, 115, 22, 0.4)); }
.hierarchyBar--vp { background: linear-gradient(90deg, rgba(234, 179, 8, 0.7), rgba(234, 179, 8, 0.4)); }
.hierarchyBar--director { background: linear-gradient(90deg, rgba(34, 197, 94, 0.7), rgba(34, 197, 94, 0.4)); }
.hierarchyBar--manager { background: linear-gradient(90deg, rgba(59, 130, 246, 0.7), rgba(59, 130, 246, 0.4)); }
.hierarchyBar--senior_ic { background: linear-gradient(90deg, rgba(99, 102, 241, 0.6), rgba(99, 102, 241, 0.3)); }
.hierarchyBar--ic { background: linear-gradient(90deg, rgba(107, 114, 128, 0.5), rgba(107, 114, 128, 0.3)); }
.hierarchyBar--entry { background: linear-gradient(90deg, rgba(148, 163, 184, 0.5), rgba(148, 163, 184, 0.3)); }
.hierarchyPeoplePreview {
font-size: 10px;
color: var(--muted2);
padding: 2px 0 6px 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hierarchySample {
font-style: italic;
}
/* Leadership ratio badge */
.leadershipBadge {
font-size: 10px;
padding: 2px 6px;
border-radius: 8px;
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
margin-left: 6px;
}
.leadershipBadge--high {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
:root[data-theme="light"] .hierarchyInsight {
background: rgba(59, 130, 246, 0.06);
}
/* Connection Section */
.connectionSection {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--oc-border);
}
.connectionSectionTitle {
font-size: 12px;
font-weight: 600;
color: var(--muted);
margin: 0 0 8px 0;
}
/* Company Size Badge */
.companySizeBadge {
font-size: 11px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 500;
}
.companySizeBadge--startup { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.companySizeBadge--small { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.companySizeBadge--mid-market { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
.companySizeBadge--large { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.companySizeBadge--enterprise { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.companySizeBadge--unknown { background: rgba(107, 114, 128, 0.2); color: #6b7280; }
/* Intro Check Card Styles */
.introPath {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 0;
flex-wrap: wrap;
}
.introPathNode {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 16px;
background: var(--bg2);
border: 1px solid var(--stroke);
border-radius: 8px;
min-width: 100px;
}
.introPathNode--you {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
}
.introPathNode--target {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.3);
}
.introPathNodeLabel {
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.introPathNodeName {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.introPathNodeRole {
font-size: 11px;
color: var(--muted);
max-width: 120px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.introPathArrow {
color: var(--muted);
padding: 0 4px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.introPathArrowIcon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.introPathArrowIcon svg {
width: 16px;
height: 16px;
display: block;
}
.introPathArrowLabel {
font-size: 12px;
font-weight: 600;
}
.introPathArrow--strong { color: #22c55e; }
.introPathArrow--weak { color: #f97316; }
.introPathArrow--unknown { color: #ef4444; }
.introScore {
font-size: 13px;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
}
.introScore--good { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.introScore--ok { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.introScore--bad { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.introRecommendation {
padding: 12px 16px;
background: var(--bg2);
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: var(--text);
margin: 12px 0;
}
.introFlags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.introFlag {
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
text-transform: capitalize;
}
.introFlag--warning { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.introFlag--info { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.introAdvice {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.introAdviceItem {
font-size: 12px;
color: var(--muted);
padding: 6px 10px;
background: rgba(59, 130, 246, 0.08);
border-radius: 4px;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 8px;
}
.introAdviceIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
flex-shrink: 0;
}
.introAdviceIcon svg {
width: 14px;
height: 14px;
display: block;
}
.introMeta {
display: flex;
gap: 16px;
padding-top: 12px;
border-top: 1px solid var(--oc-border);
}
.introMetaItem {
font-size: 12px;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.introMetaIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.introMetaIcon svg {
width: 14px;
height: 14px;
display: block;
}
.introMetaIcon.is-ok {
color: #22c55e;
}
.introMetaIcon.is-warn {
color: #f59e0b;
}
/* Light theme adjustments */
:root[data-theme="light"] .orgDeptBar {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.7), rgba(99, 102, 241, 0.4));
}
:root[data-theme="light"] .introPathNode {
background: #f8fafc;
}
:root[data-theme="light"] .introPathNode--you {
background: rgba(99, 102, 241, 0.1);
}
:root[data-theme="light"] .introPathNode--target {
background: rgba(34, 197, 94, 0.1);
}
:root[data-theme="light"] .introRecommendation {
background: #f1f5f9;
}
:root[data-theme="light"] .introAdviceItem {
background: rgba(59, 130, 246, 0.06);
}
/* Research Badges in Best Paths Card */
.bestPathResearch {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
:root[data-theme="light"] .bestPathResearch {
border-top-color: rgba(0, 0, 0, 0.08);
}
.researchBadge {
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.researchBadgeIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.researchBadgeIcon svg {
width: 12px;
height: 12px;
display: block;
}
.researchBadge--network {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.researchBadge--target {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
}
.researchBadge--symmetry {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.researchBadge--company {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
/* Research indicator pulse animation */
.bestPathsResearchIndicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--muted);
margin-left: auto;
}
.researchPulse {
width: 8px;
height: 8px;
background: #3b82f6;
border-radius: 50%;
animation: researchPulse 1.5s ease-in-out infinite;
}
@keyframes researchPulse {
0%, 100% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
/* Conversational AI Response (no results, just text) */
.aiChatResponse {
font-size: 15px;
color: var(--fg2);
line-height: 1.7;
padding: 0;
background: transparent;
border: none;
}
/* Summary shown above trace for result responses */
.aiChatSummary {
font-size: 15px;
color: var(--fg2);
line-height: 1.7;
padding: 0;
background: transparent;
border: none;
margin-bottom: 12px;
}
.aiResultsToggle,
.aiParallelToggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 6px 0 10px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(99, 102, 241, 0.2);
background: rgba(99, 102, 241, 0.12);
color: var(--fg);
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.aiResultsToggle:hover,
.aiParallelToggle:hover {
border-color: rgba(99, 102, 241, 0.35);
background: rgba(99, 102, 241, 0.2);
}
.aiResultsPanel.is-hidden {
display: none;
}
:root[data-theme="light"] .aiResultsToggle,
:root[data-theme="light"] .aiParallelToggle {
background: rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.2);
color: #1e293b;
}
.aiParallelPanelWrapper.is-hidden {
display: none;
}
.aiChatSummary--sticky {
position: sticky;
top: 8px;
z-index: 5;
margin-bottom: 10px;
padding: 8px 10px;
background: rgba(7, 9, 20, 0.78);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
}
:root[data-theme="light"] .aiChatSummary--sticky {
background: rgba(248, 250, 252, 0.9);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiChatResponse,
:root[data-theme="light"] .aiChatSummary {
color: #0f172a;
}
:root[data-theme="light"] .aiChatResponse code,
:root[data-theme="light"] .aiChatSummary code {
background: #e0e7ff;
color: #312e81;
}
:root[data-theme="light"] .aiChatResponse blockquote,
:root[data-theme="light"] .aiChatSummary blockquote {
background: #e0e7ff;
border-left-color: #6366f1;
color: #312e81;
}
.aiChatResponse h2,
.aiChatResponse h3,
.aiChatResponse h4 {
margin: 0 0 12px 0;
color: var(--fg);
font-weight: 600;
}
.aiChatResponse h2 { font-size: 18px; }
.aiChatResponse h3 { font-size: 17px; color: var(--accent); margin-top: 16px; }
.aiChatResponse h4 { font-size: 16px; }
.aiChatResponse p {
margin: 0 0 12px 0;
}
.aiChatResponse p:last-child {
margin-bottom: 0;
}
.aiChatResponse ul {
margin: 8px 0 16px 0;
padding-left: 20px;
list-style: none;
}
.aiChatResponse li {
position: relative;
padding-left: 8px;
margin-bottom: 6px;
color: var(--fg2);
}
.aiChatResponse li::before {
content: "•";
position: absolute;
left: -12px;
color: var(--accent);
}
.aiChatResponse strong {
color: var(--fg);
font-weight: 600;
}
.aiChatResponse em {
color: var(--muted2);
font-style: italic;
}
.aiChatResponse code,
.aiChatSummary code {
background: rgba(139, 92, 246, 0.2);
padding: 1px 5px;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
color: #e9d5ff;
}
.aiChatResponse blockquote,
.aiChatSummary blockquote {
margin: 12px 0;
padding: 8px 12px;
background: rgba(139, 92, 246, 0.1);
border-left: 3px solid #8b5cf6;
border-radius: 0 6px 6px 0;
color: var(--fg2);
font-style: italic;
}
.aiChatResponse blockquote p,
.aiChatSummary blockquote p {
margin: 0;
}
.aiChatResponse .md-table-wrap,
.aiChatSummary .md-table-wrap {
margin: 12px 0;
overflow-x: auto;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.18);
}
.md-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.md-table th,
.md-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.md-table th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted2);
}
.md-table tbody tr:last-child td {
border-bottom: none;
}
.aiConversationalMeta {
display: block;
margin-top: 8px;
font-size: 11px;
color: var(--muted3);
text-align: right;
}
/* Follow-up Suggestions (after results) */
.resultStack {
display: flex;
flex-direction: column;
gap: 14px;
}
.resultCardShell {
display: flex;
flex-direction: column;
gap: 8px;
}
.resultCardShell--preview .objectCard {
border-style: dashed;
border-color: var(--border-subtle);
opacity: 0.95;
}
.aiPreviewBlock {
margin-bottom: 8px;
}
.aiPreviewCard {
border-style: dashed;
border-color: var(--border-subtle);
background: var(--bg2);
}
.aiPreviewRow {
padding: 6px 0;
border-bottom: 1px solid var(--border-subtle);
}
.aiPreviewRow:last-child {
border-bottom: none;
}
.aiPreviewName {
font-size: 12px;
color: var(--text);
}
.aiPreviewMeta {
font-size: 11px;
color: var(--muted2);
}
.aiPreviewEmpty {
color: var(--muted2);
font-size: 12px;
padding: 8px 0;
}
.aiProactiveInsights {
padding: 8px 10px;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: var(--bg2);
}
.aiProactiveHeadline {
font-size: 12px;
color: var(--text);
margin-bottom: 6px;
}
.aiProactiveChips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.aiProactiveChip {
font-size: 11px;
color: var(--text);
background: var(--bg3);
border-radius: 999px;
padding: 2px 8px;
}
.aiFeedbackRow {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px 0;
font-size: 12px;
color: var(--muted2);
}
.aiFeedbackPrompt {
color: var(--muted2);
}
.aiFeedbackBtn {
border: 1px solid var(--border-subtle);
background: var(--bg2);
color: var(--text);
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
}
.aiFeedbackBtn:hover {
border-color: rgba(99, 102, 241, 0.6);
}
.aiFeedbackBtn.is-selected {
border-color: rgba(34, 197, 94, 0.7);
color: #22c55e;
}
.aiFeedbackBtn.is-disabled {
opacity: 0.5;
cursor: default;
}
.aiFeedbackThanks {
display: none;
color: var(--muted);
}
.aiFeedbackRow.is-submitted .aiFeedbackThanks {
display: inline;
}
.cardTagRow {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 0 4px;
}
.cardTag {
font-size: 11px;
font-weight: 500;
line-height: 1;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid rgba(180, 180, 140, 0.35);
background: rgba(180, 180, 140, 0.12);
color: rgba(200, 200, 160, 0.95);
letter-spacing: 0.03em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 5px;
}
:root[data-theme="light"] .cardTag {
border: 1px solid rgba(100, 95, 60, 0.4);
background: rgba(100, 95, 60, 0.1);
color: #5a5a42;
}
.cardTagLogoStack {
display: inline-flex;
align-items: center;
gap: 4px;
}
.cardTagLogo {
width: 14px;
height: 14px;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cardTagLogo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.cardTag--info {
border-color: rgba(163, 163, 118, 0.3);
background: rgba(163, 163, 118, 0.1);
color: rgba(163, 163, 118, 0.9);
}
.cardTag--success {
border-color: rgba(163, 163, 118, 0.3);
background: rgba(163, 163, 118, 0.1);
color: rgba(163, 163, 118, 0.9);
}
.cardTag--warn {
border-color: rgba(163, 163, 118, 0.3);
background: rgba(163, 163, 118, 0.1);
color: rgba(163, 163, 118, 0.9);
}
.aiAck {
font-size: 13px;
color: var(--fg2);
line-height: 1.5;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg2);
}
.followUpSuggestions {
margin-top: 10px;
padding: 0;
background: transparent;
border-radius: 0;
border: none;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Natural language help offers */
.followUpHelp {
margin-top: 0;
padding: 0;
}
.followUpHelpText {
font-size: 15px;
color: var(--text);
line-height: 1.6;
}
.followUpLink {
color: var(--accent);
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s ease;
}
.followUpLink:hover {
opacity: 0.8;
text-decoration: underline;
}
/* Legacy - keeping for backwards compat */
.followUpPrimary {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.followUpPrimaryIcon {
font-size: 18px;
}
.followUpPrimaryText {
font-size: 14px;
font-weight: 500;
color: var(--fg);
}
.followUpPersonaGrid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.followUpPersonaBtn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 16px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 12px;
}
.followUpPersonaBtn:hover {
background: var(--bg3);
border-color: var(--accent);
}
.followUpPersonaBtn.selected {
background: rgba(99, 102, 241, 0.15);
border-color: var(--accent);
}
.followUpPersonaIcon {
font-size: 13px;
}
.followUpPersonaLabel {
font-size: 12px;
color: var(--fg2);
}
.followUpCustomIcp {
margin-bottom: 12px;
}
.followUpCustomIcpLabel {
font-size: 12px;
color: var(--fg2);
margin-bottom: 6px;
display: block;
}
.followUpCustomIcpInput {
width: 100%;
padding: 8px 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-size: 13px;
font-family: inherit;
transition: border-color 0.15s ease;
}
.followUpCustomIcpInput:focus {
outline: none;
border-color: var(--accent);
}
.followUpCustomIcpInput::placeholder {
color: var(--fg3);
}
.followUpChips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.followUpChip {
padding: 6px 12px;
font-size: 12px;
color: var(--fg2);
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 16px;
cursor: pointer;
transition: all 0.15s ease;
}
.followUpChip:hover {
background: var(--bg3);
border-color: var(--accent);
color: var(--fg);
}
/* Light theme adjustments */
:root[data-theme="light"] .followUpSuggestions {
background: rgba(99, 102, 241, 0.04);
border-color: rgba(99, 102, 241, 0.12);
}
:root[data-theme="light"] .followUpPersonaBtn {
background: white;
}
:root[data-theme="light"] .followUpChip {
background: white;
}
:root[data-theme="light"] .followUpCustomIcpInput {
background: white;
}
/* Help Card Styles */
.objectCard--help {
border-color: rgba(99, 102, 241, 0.25);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(15, 23, 42, 0.95) 100%);
}
.objectCard--help .objectCard__header {
border-bottom-color: rgba(99, 102, 241, 0.15);
}
.helpContent {
padding: 16px 18px 20px !important;
display: flex;
flex-direction: column;
gap: 16px;
}
.helpSection {
display: flex;
flex-direction: column;
gap: 8px;
}
.helpSectionTitle {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
}
.helpSectionIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.helpSectionIcon svg {
width: 14px;
height: 14px;
display: block;
}
.helpExamples {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.helpExamples code {
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.20);
border-radius: 6px;
padding: 5px 10px;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
color: var(--text);
cursor: pointer;
transition: all 0.15s ease;
}
.helpExamples code:hover {
background: rgba(99, 102, 241, 0.22);
border-color: rgba(99, 102, 241, 0.40);
color: #c7d2fe;
}
.helpSection--tip {
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.helpTips {
margin: 0;
padding-left: 18px;
list-style: disc;
color: var(--muted2);
font-size: 12px;
line-height: 1.7;
}
.helpTips li { margin-bottom: 2px; }
.helpTips code {
background: rgba(99, 102, 241, 0.10);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"] .objectCard--help {
border-color: rgba(99, 102, 241, 0.20);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
}
:root[data-theme="light"] .helpExamples code {
background: rgba(99, 102, 241, 0.08);
color: #1e293b;
}
:root[data-theme="light"] .helpExamples code:hover {
background: rgba(99, 102, 241, 0.15);
color: #4338ca;
}
/* Disambiguation Card Styles */
.disambiguationCard {
border-color: rgba(251, 191, 36, 0.3);
}
.disambiguationList {
display: flex;
flex-direction: column;
}
.disambiguationCandidate {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
cursor: pointer;
transition: background 0.15s ease;
}
.disambiguationCandidate:last-child {
border-bottom: none;
}
.disambiguationCandidate:hover {
background: rgba(99, 102, 241, 0.08);
}
.disambiguationCandidate:hover .disambiguationCandidate__select {
opacity: 1;
transform: translateX(0);
}
.disambiguationCandidate__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.disambiguationCandidate__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.disambiguationCandidate__avatarPlaceholder {
font-size: 18px;
opacity: 0.5;
}
.disambiguationCandidate__info {
flex: 1;
min-width: 0;
}
.disambiguationCandidate__name {
font-size: 14px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.disambiguationCandidate__subtitle {
font-size: 12px;
color: var(--muted2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.disambiguationCandidate__select {
font-size: 12px;
color: #a5b4fc;
opacity: 0;
transform: translateX(-5px);
transition: all 0.15s ease;
flex-shrink: 0;
}
:root[data-theme="light"] .disambiguationCard {
border-color: rgba(251, 191, 36, 0.4);
}
:root[data-theme="light"] .disambiguationCandidate:hover {
background: rgba(99, 102, 241, 0.06);
}
:root[data-theme="light"] .disambiguationCandidate__select {
color: #6366f1;
}
/* List rows inside ObjectCard */
.ocList { list-style: none; margin: 0; padding: 0; }
.ocList__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background 0.12s ease;
cursor: pointer;
}
.ocList__item:last-child { border-bottom: none; }
.ocList__item:hover { background: rgba(99, 102, 241, 0.05); }
.ocList__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ui-avatar-bg, rgba(99, 102, 241, 0.1));
border: 1px solid var(--ui-avatar-border, rgba(99, 102, 241, 0.2));
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: var(--ui-avatar-placeholder, #818cf8);
flex-shrink: 0;
overflow: hidden;
}
.ocList__avatarIcon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ocList__avatarIcon svg {
width: 18px;
height: 18px;
display: block;
}
/* Industry list card */
.industryListIntro {
padding: 0 16px 6px;
font-size: 13px;
color: var(--muted2);
}
.industryList {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 16px 16px;
}
.industryGroup__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted3, rgba(255, 255, 255, 0.45));
margin-bottom: 6px;
}
.industryGroup__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.industryChip {
background: var(--ui-chip-bg);
border: 1px solid var(--ui-chip-border);
color: var(--ui-chip-text);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
}
.ocList__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ocList__body { flex: 1; min-width: 0; }
.ocList__name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocList__desc { font-size: 12px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ocList__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ocList__tag {
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
transition: none;
}
.ocList__count {
font-size: 13px;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] .ocList__tag { color: #16a34a; }
/* --- CRM Deal & Company Styles --- */
.dealStage {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: rgba(100, 116, 139, 0.2);
color: var(--muted);
}
.dealStage--won { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.dealStage--lost { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.dealStage--contract { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.dealStage--qualified { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.dealStage--open { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.dealCompany { margin-left: 8px; color: var(--muted2); }
.dealAmount { font-weight: 600; color: var(--text); font-size: 13px; }
.dealAge { font-size: 12px; color: var(--muted2); }
.companyContacts { color: var(--muted2); }
.companyContacts.muted { opacity: 0.5; }
.companyDeals { font-size: 11px; padding: 2px 6px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-radius: 4px; }
.companySize { font-size: 12px; color: var(--muted2); }
:root[data-theme="light"] .dealStage--won { color: #16a34a; }
:root[data-theme="light"] .dealStage--lost { color: #dc2626; }
:root[data-theme="light"] .dealStage--contract { color: #2563eb; }
:root[data-theme="light"] .dealStage--qualified { color: #9333ea; }
:root[data-theme="light"] .dealStage--open { color: #d97706; }
:root[data-theme="light"] .companyDeals { color: #2563eb; }
/* CRM Deals Table */
.objectCard--crmDeals { padding: 0; }
.objectCard--crmDeals .objectCard__header {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
}
.crmDealsTable {
width: 100%;
font-size: 13px;
}
.crmDealsTable__header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 60px 1.5fr;
gap: 12px;
padding: 8px 16px;
background: #1e1e2e;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--muted2);
letter-spacing: 0.5px;
}
.crmDealsTable__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 60px 1.5fr;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
align-items: center;
transition: background 0.1s ease;
}
.crmDealsTable__row:last-child { border-bottom: none; }
.crmDealsTable__row:hover { background: rgba(99, 102, 241, 0.04); }
.crmDealsTable__col--deal {
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crmDealsTable__col--stage { }
.crmDealsTable__col--amount {
font-weight: 600;
color: var(--text);
text-align: right;
}
.crmDealsTable__col--age {
text-align: right;
color: var(--muted2);
}
.crmDealsTable__col--company {
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Table with connector column */
.crmDealsTable--withPaths .crmDealsTable__header,
.crmDealsTable--withPaths .crmDealsTable__row {
grid-template-columns: 2fr 1fr 1fr 60px 1.5fr 1.5fr;
}
.crmDealsTable__col--connector {
display: flex;
flex-direction: column;
gap: 2px;
}
.dealConnector {
font-weight: 500;
color: var(--accent);
}
.dealConnectorMeta {
font-size: 11px;
color: var(--muted2);
}
.dealConnectorNone {
color: var(--muted2);
}
.crmDealsTable__row--hasPath {
background: rgba(99, 102, 241, 0.03);
}
.crmDealsTable__row--hasPath:hover {
background: rgba(99, 102, 241, 0.08);
}
:root[data-theme="light"] .crmDealsTable__header { background: #f1f5f9; }
:root[data-theme="light"] .crmDealsTable__row:hover { background: rgba(99, 102, 241, 0.06); }
:root[data-theme="light"] .crmDealsTable__row--hasPath { background: rgba(99, 102, 241, 0.04); }
:root[data-theme="light"] .crmDealsTable__row--hasPath:hover { background: rgba(99, 102, 241, 0.08); }
/* ════════════════════════════════════════════════════════════════════════════ */
/* SMART SEARCH CARDS - Rich result containers */
/* ════════════════════════════════════════════════════════════════════════════ */
/* --- Base Card --- */
.smartCard {
background: transparent;
backdrop-filter: none;
border: none;
border-radius: 0;
overflow: visible;
animation: cardSlideIn 0.3s ease-out;
padding-top: 8px;
}
@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.smartCard--empty {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: var(--ui-glass-bg);
color: var(--muted);
border-radius: 14px;
border: 1px solid var(--ui-glass-border);
box-shadow: var(--ui-glass-shadow);
}
.smartCard--error {
border-color: #dc2626;
background: rgba(239, 68, 68, 0.08);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
color: #fca5a5;
}
/* --- Card Header - minimal --- */
.smartCardHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 12px 0;
background: transparent;
border-bottom: none;
}
.smartCardHeaderLeft {
display: flex;
align-items: center;
gap: 14px;
}
.smartCardIcon {
font-size: 24px;
line-height: 1;
}
.smartCardTitle {
font-size: 17px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.smartCardSubtitle {
font-size: 13px;
color: var(--muted2);
margin-top: 2px;
}
.smartCardStats {
display: flex;
gap: 8px;
}
.smartStat {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.smartStat--direct {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.25);
}
.smartStat--intro {
background: rgba(99, 102, 241, 0.15);
color: color-mix(in srgb, rgb(99, 102, 241) 80%, var(--text));
border: 1px solid rgba(99, 102, 241, 0.25);
}
/* --- Card Body --- */
.smartCardBody {
padding: 0;
}
.smartCardGrid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.smartCardHint {
margin: 0;
font-size: 14px;
color: var(--muted2);
line-height: 1.6;
}
.smartCardInterpretation {
margin: 0 0 12px;
padding: 12px 16px;
background: rgba(251, 191, 36, 0.08);
border-left: 3px solid rgba(251, 191, 36, 0.5);
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #fcd34d;
}
.smartCardContext {
margin: 0 0 16px;
padding: 10px 14px;
background: rgba(99, 102, 241, 0.08);
border-left: 3px solid rgba(99, 102, 241, 0.5);
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #a5b4fc;
}
.smartCardCount {
font-size: 13px;
color: var(--muted);
margin-left: auto;
margin-right: 12px;
}
/* --- Generated Content Card --- */
.generatedContentCard {
background: transparent;
}
.generatedContentList {
display: flex;
flex-direction: column;
gap: 12px;
}
.generatedContentItem {
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 12px;
padding: 14px 16px;
box-shadow: var(--ui-glass-shadow);
}
.generatedContentItemHeader {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ui-glass-border);
}
.generatedContentPerson {
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.generatedContentMeta {
font-size: 12px;
color: var(--muted);
flex: 1;
}
.generatedContentItemHeader .copyBtn {
font-size: 11px;
padding: 4px 10px;
background: rgba(99, 102, 241, 0.15);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 6px;
color: #a5b4fc;
cursor: pointer;
transition: all 0.15s ease;
}
.generatedContentItemHeader .copyBtn:hover {
background: rgba(99, 102, 241, 0.25);
}
.generatedContentBody {
font-size: 13px;
line-height: 1.6;
color: var(--text);
white-space: pre-wrap;
}
/* Light theme adjustments */
:root[data-theme="light"] .generatedContentBody {
color: #334155;
}
:root[data-theme="light"] .generatedContentMeta {
color: #64748b;
}
:root[data-theme="light"] .smartCardContext {
background: rgba(99, 102, 241, 0.1);
color: #6366f1;
}
/* --- Best Paths Card --- */
.bestPathsCard {
/* Inherits background from .objectCard: rgba(20, 20, 35, 0.95) */
}
.bestPathsList {
display: flex;
flex-direction: column;
gap: 8px;
}
.bestPathItem {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 12px;
box-shadow: var(--ui-glass-shadow);
transition: border-color 0.15s ease;
}
.bestPathItem:hover {
border-color: var(--ui-glass-border-strong);
}
.bestPathItem--top {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, var(--ui-glass-bg) 100%);
border-color: rgba(99, 102, 241, 0.3);
}
.bestPathRank {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.bestPathContent {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.bestPathGraphToggle {
margin-left: auto;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(99, 102, 241, 0.3);
background: rgba(99, 102, 241, 0.08);
color: var(--text);
font-size: 11px;
cursor: pointer;
white-space: nowrap;
}
.bestPathGraphBtn {
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 6px;
cursor: pointer;
background: transparent;
color: var(--muted2);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease;
}
.bestPathGraphBtn svg {
width: 18px;
height: 18px;
display: block;
}
.bestPathGraphBtn.is-active {
color: var(--accent);
}
.bestPathsCard[data-graph-visible="false"] .bestPathGraph {
display: none;
}
.bestPathLine {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.bestPathNodes {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bestPathNode {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 12px;
color: var(--text);
white-space: nowrap;
}
.bestPathNode strong {
font-weight: 600;
}
.bestPathNodeRole {
font-size: 11px;
color: var(--muted);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bestPathNode--connector {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.25);
}
.bestPathNode--target {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}
.bestPathArrow {
color: var(--muted2);
font-size: 12px;
}
.bestPathBadges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.bestPathBadge--via {
background: rgba(139, 92, 246, 0.16);
border-color: rgba(139, 92, 246, 0.3);
color: #c4b5fd;
}
.bestPathBadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: var(--muted2);
text-decoration: none;
}
.bestPathBadge--score {
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.25);
color: #a5b4fc;
}
.bestPathBadge--hop {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.25);
color: #4ade80;
}
.bestPathBadge--mutual {
background: rgba(251, 146, 60, 0.15);
border-color: rgba(251, 146, 60, 0.3);
color: #fdba74;
}
.bestPathBadge--company {
background: rgba(20, 184, 166, 0.15);
border-color: rgba(20, 184, 166, 0.3);
color: #5eead4;
}
.bestPathBadge--symmetry {
background: rgba(168, 85, 247, 0.15);
border-color: rgba(168, 85, 247, 0.3);
color: #d8b4fe;
}
.bestPathBadge--note {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.2);
color: var(--muted2);
}
.bestPathTags {
margin-top: 6px;
}
.bestPathTags .personTags {
margin-top: 0;
}
.bestPathBadge--link {
background: rgba(14, 165, 233, 0.15);
border-color: rgba(14, 165, 233, 0.3);
color: #38bdf8;
}
.bestPathBadgeIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bestPathBadgeIcon svg {
width: 12px;
height: 12px;
display: block;
}
.bestPathBadges .orgChartBtn {
padding: 3px 8px;
font-size: 10px;
border-radius: 999px;
}
.bestPathGraph {
margin-top: 6px;
}
.bestPathRoute {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
font-size: 14px;
}
.bestPathYou {
padding: 3px 10px;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 14px;
color: #4ade80;
font-size: 12px;
font-weight: 500;
}
.bestPathArrow {
color: var(--muted2);
font-size: 16px;
}
.bestPathConnector,
.bestPathTarget {
display: flex;
flex-direction: column;
gap: 2px;
}
.bestPathConnector strong,
.bestPathTarget strong {
color: var(--text);
font-weight: 600;
}
.bestPathTarget strong {
color: #a5b4fc;
}
.bestPathRole {
font-size: 11px;
color: var(--muted);
}
/* Visual path with nodes and edges */
.bestPathRoute--visual {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: nowrap;
overflow-x: auto;
padding: 12px 0;
}
.pathNode {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
min-width: 80px;
text-align: center;
}
.pathNode--hero {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
}
.pathNode--hero .pathNodeLabel {
color: #4ade80;
font-weight: 600;
}
.pathNode--connector {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.25);
}
.pathNode--connector .pathNodeLabel strong {
color: #fcd34d;
}
.pathNode--target {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}
.pathNode--target .pathNodeLabel strong {
color: #a5b4fc;
}
.pathNodeLabel {
font-size: 13px;
color: var(--text);
}
.pathNodeLabel strong {
font-weight: 600;
}
.pathNodeRole {
font-size: 10px;
color: var(--muted);
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pathNodeCount {
font-size: 11px;
font-weight: 600;
color: var(--muted2);
padding: 2px 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.pathEdge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 4px;
position: relative;
}
.pathEdgeLine {
width: 40px;
height: 2px;
background: linear-gradient(90deg, var(--border), var(--muted2), var(--border));
position: relative;
}
.pathEdgeLine::after {
content: '→';
position: absolute;
right: -2px;
top: -9px;
font-size: 14px;
color: var(--muted2);
}
.pathEdgeMutual {
font-size: 10px;
color: var(--muted);
padding: 2px 6px;
background: rgba(99, 102, 241, 0.1);
border-radius: 6px;
margin-top: 4px;
white-space: nowrap;
}
.pathDirectOverlap {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
background: rgba(34, 197, 94, 0.08);
border-radius: 8px;
border-left: 3px solid rgba(34, 197, 94, 0.5);
font-size: 11px;
color: var(--muted);
}
.pathDirectOverlapIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pathDirectOverlapIcon svg {
width: 14px;
height: 14px;
display: block;
}
.pathDirectOverlapText strong {
color: #22c55e;
}
/* Light theme adjustments */
:root[data-theme="light"] .pathNode--hero {
background: rgba(34, 197, 94, 0.08);
}
:root[data-theme="light"] .pathNode--hero .pathNodeLabel {
color: #16a34a;
}
:root[data-theme="light"] .pathNode--connector {
background: rgba(251, 191, 36, 0.06);
}
:root[data-theme="light"] .pathNode--connector .pathNodeLabel strong {
color: #d97706;
}
:root[data-theme="light"] .pathNode--target {
background: rgba(99, 102, 241, 0.06);
}
:root[data-theme="light"] .pathNode--target .pathNodeLabel strong {
color: #4f46e5;
}
/* Org Chart Button */
.orgChartBtn {
padding: 4px 10px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 12px;
color: #a5b4fc;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.orgChartBtnIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orgChartBtnIcon svg {
width: 12px;
height: 12px;
display: block;
}
.orgChartBtn:hover {
background: rgba(99, 102, 241, 0.2);
border-color: rgba(99, 102, 241, 0.4);
}
.orgChartBtn--active {
background: rgba(99, 102, 241, 0.25);
border-color: #6366f1;
color: #c7d2fe;
}
:root[data-theme="light"] .orgChartBtn {
background: rgba(99, 102, 241, 0.06);
border-color: rgba(99, 102, 241, 0.2);
color: #4f46e5;
}
:root[data-theme="light"] .orgChartBtn:hover {
background: rgba(99, 102, 241, 0.12);
}
/* Expanded Org Chart Section */
.orgChartExpanded {
margin-top: 12px;
padding: 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
}
.orgChartLoading {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 13px;
}
.orgChartLoading .spinner {
width: 14px;
height: 14px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.orgChartError {
color: var(--error);
font-size: 12px;
}
/* Mini Org Chart */
.miniOrgChart {
display: flex;
flex-direction: column;
gap: 12px;
}
.miniOrgSection {
display: flex;
flex-direction: column;
gap: 6px;
}
.miniOrgTitle {
font-size: 11px;
font-weight: 600;
color: var(--muted2);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.miniOrgRow {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.miniOrgLabel {
flex: 0 0 110px;
color: var(--text);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.miniOrgTitleIcon,
.miniOrgIcon,
.miniOrgDirectIcon,
.miniOrgStatIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.miniOrgTitleIcon svg,
.miniOrgIcon svg,
.miniOrgDirectIcon svg,
.miniOrgStatIcon svg {
width: 12px;
height: 12px;
display: block;
}
.miniOrgBar {
height: 14px;
width: calc(var(--width) * 1%);
min-width: 20px;
max-width: 120px;
background: linear-gradient(90deg, rgba(99, 102, 241, 0.5), rgba(99, 102, 241, 0.25));
border-radius: 3px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 4px;
}
.miniOrgBar span {
font-size: 10px;
font-weight: 600;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.miniOrgBar--hier {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.5), rgba(251, 191, 36, 0.25));
}
.miniOrgDirect {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #4ade80;
padding: 2px 6px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.18);
}
.miniOrgEmpty {
font-size: 11px;
color: var(--muted2);
font-style: italic;
}
.miniOrgInsight {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
}
.miniOrgTotals {
font-size: 10px;
color: var(--muted2);
padding-top: 8px;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
:root[data-theme="light"] .miniOrgDirect {
color: #16a34a;
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.2);
}
:root[data-theme="light"] .miniOrgInsight {
color: #475569;
background: rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .miniOrgTitle {
color: #64748b;
}
:root[data-theme="light"] .miniOrgBar span {
text-shadow: none;
}
.miniOrgStat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.2);
color: var(--muted);
}
:root[data-theme="light"] .miniOrgStat {
background: rgba(99, 102, 241, 0.08);
border-color: rgba(99, 102, 241, 0.16);
color: #475569;
}
.bestPathExplanation {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 10px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-left: 3px solid rgba(99, 102, 241, 0.4);
}
.bestPathMeta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--muted2);
}
.bestPathCompany {
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.bestPathCompanyIcon,
.bestPathLinkedInIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bestPathCompanyIcon svg,
.bestPathLinkedInIcon svg {
width: 12px;
height: 12px;
display: block;
}
.bestPathScore {
padding: 2px 8px;
background: rgba(99, 102, 241, 0.1);
border-radius: 10px;
color: #a5b4fc;
font-size: 11px;
}
.bestPathLinkedIn {
color: #0a66c2;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.bestPathLinkedIn:hover {
text-decoration: underline;
}
/* Research badges row */
.bestPathResearch {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.researchBadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 11px;
border-radius: 6px;
cursor: help;
}
.researchBadge--network {
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
}
.researchBadge--symmetry {
background: rgba(168, 85, 247, 0.15);
color: #d8b4fe;
}
.researchBadge--growth {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
}
.researchBadge--mutuals {
background: rgba(251, 146, 60, 0.15);
color: #fdba74;
}
.researchBadge--target {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
.researchBadge--company {
background: rgba(20, 184, 166, 0.15);
color: #5eead4;
}
:root[data-theme="light"] .bestPathResearch {
border-top-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .researchBadge--network {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
:root[data-theme="light"] .researchBadge--symmetry {
background: rgba(168, 85, 247, 0.1);
color: #9333ea;
}
:root[data-theme="light"] .researchBadge--growth {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
:root[data-theme="light"] .researchBadge--mutuals {
background: rgba(251, 146, 60, 0.1);
color: #ea580c;
}
:root[data-theme="light"] .researchBadge--target {
background: #450a0a;
color: #dc2626;
}
:root[data-theme="light"] .researchBadge--company {
background: rgba(20, 184, 166, 0.1);
color: #0d9488;
}
/* Light theme */
:root[data-theme="light"] .bestPathItem {
background: white;
}
:root[data-theme="light"] .bestPathItem--top {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, white 100%);
}
:root[data-theme="light"] .bestPathNode {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.08);
color: #0f172a;
}
:root[data-theme="light"] .bestPathNode--connector {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
}
:root[data-theme="light"] .bestPathNode--target {
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.3);
}
:root[data-theme="light"] .bestPathBadge {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.12);
color: #475569;
}
:root[data-theme="light"] .bestPathYou {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
:root[data-theme="light"] .bestPathTarget strong {
color: #6366f1;
}
:root[data-theme="light"] .bestPathExplanation {
background: #f1f5f9;
}
/* --- Research Indicator for Best Paths --- */
.bestPathsResearchIndicator {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
font-size: 12px;
color: var(--text-muted);
padding: 4px 10px;
background: rgba(99, 102, 241, 0.1);
border-radius: 12px;
}
.researchPulse {
width: 8px;
height: 8px;
background: #6366f1;
border-radius: 50%;
animation: research-pulse 1.5s ease-in-out infinite;
}
@keyframes research-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.researchDone {
color: #22c55e;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.researchDoneIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.researchDoneIcon svg {
width: 12px;
height: 12px;
display: block;
}
/* Research-boosted path items */
.bestPathItem--reranked {
border-color: rgba(99, 102, 241, 0.4);
position: relative;
}
.bestPathItem--reranked::after {
content: '↑';
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
color: #6366f1;
background: rgba(99, 102, 241, 0.15);
border-radius: 4px;
padding: 2px 6px;
}
.bestPathItem--flash {
animation: path-flash 0.8s ease-out;
}
@keyframes path-flash {
0% { background: rgba(99, 102, 241, 0.3); }
100% { background: var(--ui-glass-bg); }
}
/* Research insights on path items */
.bestPathResearchInsight {
font-size: 12px;
color: #6366f1;
background: rgba(99, 102, 241, 0.08);
padding: 6px 10px;
border-radius: 6px;
margin-top: 6px;
border-left: 2px solid rgba(99, 102, 241, 0.4);
}
:root[data-theme="light"] .bestPathsResearchIndicator {
background: rgba(99, 102, 241, 0.08);
}
:root[data-theme="light"] .bestPathItem--flash {
animation: path-flash-light 0.8s ease-out;
}
@keyframes path-flash-light {
0% { background: rgba(99, 102, 241, 0.2); }
100% { background: white; }
}
/* --- Look-Alikes Section --- */
.lookAlikesSection {
margin-top: 16px;
padding: 16px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
border-radius: 12px;
border: 1px solid rgba(99, 102, 241, 0.2);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.lookAlikesSection--visible {
opacity: 1;
transform: translateY(0);
}
.lookAlikesHeader {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.lookAlikesIcon {
font-size: 16px;
}
.lookAlikesIcon svg {
width: 16px;
height: 16px;
color: #a855f7;
}
.lookAlikesTitle {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
}
.lookAlikesBeta {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 4px;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
color: white;
}
.lookAlikesSubtitle {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.lookAlikesList {
display: flex;
flex-direction: column;
gap: 8px;
}
.lookAlikeItem {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: var(--ui-glass-bg);
border-radius: 8px;
border: 1px solid var(--ui-border);
cursor: pointer;
transition: all 0.15s ease;
}
.lookAlikeItem:hover {
background: var(--ui-hover-bg);
border-color: rgba(99, 102, 241, 0.4);
transform: translateX(4px);
}
.lookAlikeCompany {
display: flex;
flex-direction: column;
gap: 2px;
}
.lookAlikeName {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.lookAlikeDomain {
font-size: 11px;
color: var(--text-tertiary);
}
.lookAlikeStats {
display: flex;
align-items: center;
gap: 8px;
}
.lookAlikePaths {
font-size: 12px;
font-weight: 500;
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 2px 8px;
border-radius: 4px;
}
.lookAlikeConnector {
font-size: 11px;
color: var(--text-secondary);
}
:root[data-theme="light"] .lookAlikesSection {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}
:root[data-theme="light"] .lookAlikeItem {
background: white;
}
:root[data-theme="light"] .lookAlikeItem:hover {
background: rgba(99, 102, 241, 0.05);
}
/* --- Person Row --- */
.personRow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
margin: 0;
background: rgba(163, 163, 118, 0.03);
border: none;
border-bottom: 1px solid rgba(180, 180, 140, 0.12);
transition: background 0.1s ease;
animation: rowFadeIn 0.15s ease-out backwards;
animation-delay: var(--delay, 0s);
}
/* Tighter padding when tags are hidden */
body:not(.showRelationshipTags) .personRow {
padding: 8px 14px;
align-items: center;
}
.personRow:last-child {
border-bottom: none;
}
:root[data-theme="light"] .personRow {
background: transparent;
border-bottom: 1px solid rgba(100, 95, 65, 0.22);
}
:root[data-theme="light"] .personRow:hover {
background: rgba(130, 125, 95, 0.08);
}
:root[data-theme="light"] .personName {
color: #1a1a18;
}
:root[data-theme="light"] .personSubtitle {
color: #4a4a42;
}
.personRow:hover {
background: rgba(163, 163, 118, 0.07);
}
.icpPeopleListCard .personRow {
cursor: pointer;
}
.icpPeopleListCard .personRow.is-selected {
background: rgba(148, 163, 184, 0.12);
border-left: 2px solid rgba(148, 163, 184, 0.55);
}
:root[data-theme="light"] .icpPeopleListCard .personRow.is-selected {
background: rgba(15, 23, 42, 0.06);
border-left-color: rgba(15, 23, 42, 0.25);
}
.personRow--topPath {
background: transparent;
border: none;
border-bottom: 1px solid var(--stroke);
border-radius: 0;
margin: 0;
padding: 10px 12px;
}
:root[data-theme="light"] .personRow--topPath {
background: transparent;
border-color: var(--stroke);
}
.bestPathRankBadge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--stroke);
}
:root[data-theme="light"] .bestPathRankBadge {
color: var(--text-dark);
background: rgba(0, 0, 0, 0.06);
border-color: var(--stroke);
}
.experienceBadge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
color: rgb(147, 197, 253);
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.3);
cursor: help;
}
:root[data-theme="light"] .experienceBadge {
color: rgb(37, 99, 235);
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.25);
}
/* --- Person Avatar (for job change rows) --- */
.personAvatarWrap {
flex-shrink: 0;
width: 36px;
height: 36px;
}
.personAvatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--ui-avatar-border, rgba(99, 102, 241, 0.2));
}
.personAvatarFallback {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ui-avatar-bg, rgba(99, 102, 241, 0.1));
border: 1px solid var(--ui-avatar-border, rgba(99, 102, 241, 0.2));
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--ui-avatar-placeholder, #818cf8);
}
@keyframes rowFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.personInfo {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
overflow: hidden;
}
.personInfoRow {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.personInfoRow--tags {
align-items: center;
}
.personInfoRow--meta {
align-items: center;
}
.personName {
font-size: 14px;
font-weight: 500;
color: #f0f0f0;
white-space: nowrap;
flex-shrink: 0;
}
.personName a {
color: #6366f1;
text-decoration: none;
}
.personName a:hover {
text-decoration: underline;
}
.personSubtitle {
font-size: 13px;
color: rgba(180, 180, 160, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.personTags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 0;
}
body:not(.showRelationshipTags) .personTags {
display: none;
}
body:not(.showRelationshipTags) .personInfoRow--tags {
display: none;
}
.relTag {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 5px;
border-radius: 3px;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.01em;
background: rgba(45, 42, 38, 0.6);
color: #d4cfc0;
border: 1px solid rgba(180, 170, 150, 0.2);
transition: none;
}
.relTag--action {
cursor: pointer;
font-family: inherit;
color: inherit;
}
.relTag--action:hover {
filter: brightness(1.05);
}
.relTag--action:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
.relTag__logo {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.relTag__type {
color: #c9c4b5;
}
.relTag__score {
font-size: 9px;
color: rgba(200, 195, 180, 0.6);
font-family: 'SF Mono', Monaco, monospace;
}
:root[data-theme="light"] .relTag {
background: rgba(240, 235, 225, 0.8);
color: #4a4540;
border-color: rgba(120, 110, 90, 0.25);
}
:root[data-theme="light"] .relTag__type {
color: #5a5550;
}
:root[data-theme="light"] .relTag__score {
color: rgba(90, 85, 75, 0.6);
}
.relTagLink {
text-decoration: none;
color: inherit;
}
.relTagLink:hover {
opacity: 0.85;
text-decoration: none;
}
.relTag--colleague {
background: rgba(163, 163, 118, 0.12);
color: rgba(163, 163, 118, 0.85);
border-color: rgba(163, 163, 118, 0.2);
}
.relTag--via {
background: rgba(163, 163, 118, 0.08);
color: rgba(163, 163, 118, 0.75);
border-color: rgba(163, 163, 118, 0.15);
}
.relTag--bridge {
background: rgba(163, 163, 118, 0.08);
color: rgba(163, 163, 118, 0.75);
border-color: rgba(163, 163, 118, 0.15);
}
.relTagChain {
display: inline-flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.relTag--chain {
border-radius: 4px;
}
/* Colleague tag - warm brown tint */
.relTag--colleague {
background: rgba(139, 119, 90, 0.25);
border-color: rgba(180, 160, 130, 0.3);
}
/* School tag - subtle blue tint */
.relTag--school {
background: rgba(100, 130, 170, 0.2);
border-color: rgba(130, 160, 200, 0.25);
color: #b8c8d8;
}
/* LinkedIn connected - subtle blue */
.relTag--linkedin {
background: rgba(70, 130, 180, 0.2);
border-color: rgba(100, 150, 200, 0.25);
color: #a8c8e8;
}
/* ICP matches - green tint */
.relTag--icp {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(74, 222, 128, 0.25);
color: #a7f3d0;
}
.relTag--icp.icp--best {
background: rgba(212, 175, 55, 0.18);
border-color: #d4af37;
color: #f8e9b0;
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2);
}
.relTag--icp.icp--super {
background: rgba(227, 160, 54, 0.28);
border-color: rgba(227, 160, 54, 0.55);
color: #ffe7b0;
}
.relTag--icp.icp--amazing {
background: rgba(244, 162, 97, 0.32);
border-color: rgba(244, 162, 97, 0.6);
color: #fff3e6;
}
.relTag--icp.icp--great {
background: rgba(76, 201, 161, 0.28);
border-color: rgba(76, 201, 161, 0.5);
color: #d6fff1;
}
.relTag--icp.icp--good {
background: rgba(61, 190, 120, 0.24);
border-color: rgba(61, 190, 120, 0.45);
color: #c7f7dd;
}
.relTag--icp.icp--avg {
background: rgba(96, 150, 245, 0.3);
border-color: rgba(120, 175, 255, 0.5);
color: #dbe8ff;
}
.relTag--icp.icp--low {
background: rgba(96, 150, 245, 0.18);
border-color: rgba(120, 175, 255, 0.35);
color: #c7d6f6;
}
.relTag--icp.icp--cool {
background: rgba(96, 150, 245, 0.12);
border-color: rgba(120, 175, 255, 0.25);
color: #b9c8e8;
}
/* Email active - subtle warm */
.relTag--email {
background: rgba(180, 140, 100, 0.2);
border-color: rgba(200, 160, 120, 0.25);
color: #d8c8b0;
}
:root[data-theme="light"] .relTag--colleague {
background: rgba(160, 140, 110, 0.2);
border-color: rgba(140, 120, 90, 0.25);
color: #5a5045;
}
:root[data-theme="light"] .relTag--school {
background: rgba(100, 130, 170, 0.15);
border-color: rgba(100, 130, 170, 0.2);
color: #4a5a6a;
}
:root[data-theme="light"] .relTag--linkedin {
background: rgba(70, 130, 180, 0.12);
border-color: rgba(70, 130, 180, 0.2);
color: #3a5a7a;
}
:root[data-theme="light"] .relTag--icp {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.2);
color: #2f6b4f;
}
:root[data-theme="light"] .relTag--icp.icp--best {
background: rgba(212, 175, 55, 0.2);
border-color: #b8860b;
color: #6b4f12;
box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.2);
}
:root[data-theme="light"] .relTag--icp.icp--super {
background: rgba(227, 160, 54, 0.22);
border-color: rgba(187, 120, 26, 0.45);
color: #6b4315;
}
:root[data-theme="light"] .relTag--icp.icp--amazing {
background: rgba(244, 162, 97, 0.28);
border-color: rgba(234, 140, 70, 0.5);
color: #6b3f1a;
}
:root[data-theme="light"] .relTag--icp.icp--great {
background: rgba(76, 201, 161, 0.22);
border-color: rgba(56, 171, 131, 0.4);
color: #1f5a48;
}
:root[data-theme="light"] .relTag--icp.icp--good {
background: rgba(61, 190, 120, 0.18);
border-color: rgba(46, 156, 100, 0.35);
color: #255644;
}
:root[data-theme="light"] .relTag--icp.icp--avg {
background: rgba(96, 150, 245, 0.2);
border-color: rgba(96, 150, 245, 0.35);
color: #2f4c7a;
}
:root[data-theme="light"] .relTag--icp.icp--low {
background: rgba(96, 150, 245, 0.14);
border-color: rgba(96, 150, 245, 0.25);
color: #3a4f73;
}
:root[data-theme="light"] .relTag--icp.icp--cool {
background: rgba(96, 150, 245, 0.1);
border-color: rgba(96, 150, 245, 0.18);
color: #3b4f6d;
}
:root[data-theme="light"] .relTag--email {
background: rgba(180, 140, 100, 0.15);
border-color: rgba(160, 120, 80, 0.2);
color: #6a5a4a;
}
.relTag--empty {
background: rgba(148, 163, 184, 0.12);
color: var(--muted2);
}
.relTag--loading {
background: rgba(148, 163, 184, 0.1);
color: var(--muted2);
position: relative;
overflow: hidden;
}
.relTag--loading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
animation: relTagShimmer 1.2s ease-in-out infinite;
}
.relTag--loading .relTagLabel {
position: relative;
z-index: 1;
}
.relTag--activity {
background: rgba(59, 130, 246, 0.12);
color: #3b82f6;
}
.relTag--linkedin {
background: rgba(99, 102, 241, 0.14);
color: #6366f1;
}
.relTag--linkedin.is-off {
opacity: 0.6;
}
.relTagLogo {
width: 16px;
height: 16px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
background: rgba(255, 255, 255, 0.7);
color: #1f2937;
}
.relTagLogoStack {
display: inline-flex;
align-items: center;
gap: 4px;
}
.relTagLogo--img {
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
}
.relTagLogo--img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jobChangeTags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.jobTag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(148, 163, 184, 0.14);
color: var(--muted2);
}
.jobTag--newjob {
background: rgba(59, 130, 246, 0.14);
color: #3b82f6;
}
.jobTag--promotion {
background: rgba(251, 191, 36, 0.16);
color: #d97706;
}
.jobTag--internal {
background: rgba(244, 114, 182, 0.16);
color: #db2777;
}
.jobTag--date {
background: rgba(34, 197, 94, 0.14);
color: #16a34a;
}
.jobTag--via {
background: rgba(99, 102, 241, 0.14);
color: #6366f1;
}
.jobTag__link {
color: inherit;
text-decoration: none;
}
@keyframes relTagShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.personDegree {
font-size: 11px;
color: var(--muted2);
opacity: 0.7;
white-space: nowrap;
flex-shrink: 0;
}
.personDegree .personViaLink {
color: #6366f1;
text-decoration: none;
font-weight: 600;
}
.personDegree .personViaLink:hover {
text-decoration: underline;
}
.copyBtn {
font-size: 11px;
color: var(--muted2);
background: transparent;
border: 1px solid var(--stroke);
border-radius: 4px;
padding: 2px 8px;
cursor: pointer;
opacity: 0;
transition: opacity 0.1s, background 0.1s;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.copyBtnIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.relTagToggle {
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(148, 163, 184, 0.08);
color: var(--muted2);
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
margin-left: 6px;
transition: all 0.2s ease;
}
.relTagToggle.is-on {
border-color: rgba(34, 197, 94, 0.6);
color: #16a34a;
background: rgba(34, 197, 94, 0.12);
}
.relTagToggle:hover {
border-color: rgba(148, 163, 184, 0.6);
color: var(--text);
}
.copyBtnIcon svg {
width: 12px;
height: 12px;
display: block;
}
.personRow:hover .copyBtn {
opacity: 1;
}
.copyBtn:hover {
background: var(--stroke);
color: var(--text);
}
.personMeta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* --- Job Change Styling --- */
.personRow--change .personMeta {
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.changeDate {
font-size: 12px;
color: #22c55e;
font-weight: 500;
white-space: nowrap;
}
/* Change type badges */
.changeBadge {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.changeBadge--promotion {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
}
.changeBadge--newjob {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.changeBadge--internal {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
[data-theme="dark"] .changeBadge--promotion {
background: rgba(168, 85, 247, 0.2);
color: #c084fc;
}
[data-theme="dark"] .changeBadge--newjob {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
[data-theme="dark"] .changeBadge--internal {
background: rgba(234, 179, 8, 0.2);
color: #facc15;
}
.personScore {
font-size: 11px;
color: var(--muted2);
font-family: monospace;
}
/* --- Via Badge (2nd degree connections) --- */
.viaBadge {
display: inline-block;
font-size: 11px;
font-weight: 500;
color: #a78bfa;
background: rgba(139, 92, 246, 0.12);
padding: 2px 8px;
border-radius: 10px;
margin-left: 8px;
vertical-align: middle;
}
[data-theme="light"] .viaBadge {
color: #7c3aed;
background: rgba(124, 58, 237, 0.1);
}
.viaBadge__link {
color: inherit;
text-decoration: none;
font-style: italic;
}
.viaBadge__link:hover {
text-decoration: underline;
}
/* Company link in job changes */
.companyLink {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
transition: opacity 0.2s;
}
.companyLink:hover {
opacity: 0.8;
text-decoration: none;
}
/* --- Job Changes Card Deck (Stacked 1st/2nd Degree) --- */
.jobChangesDeck {
position: relative;
margin-top: 16px;
margin-left: 20px; /* Room for back card to peek from left */
margin-bottom: 28px;
height: auto;
max-height: 560px;
perspective: 1000px;
}
.jobChangesDeck__card {
--oc-border: #2d2d42;
border: 1px solid var(--oc-border);
border-radius: 8px;
will-change: transform;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 540px;
}
/* Match objectCard styling */
[data-theme="dark"] .jobChangesDeck__card {
background: #141423;
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .jobChangesDeck__card {
--oc-border: #e2e8f0;
background: var(--bg1);
}
.jobChangesDeck__card .objectCard__header {
border-bottom: 1px solid var(--oc-border);
}
.jobChangesDeck__card .objectCard__content {
flex: 1;
min-height: 0;
max-height: 460px;
overflow-y: auto;
}
/* Front card (on top) - sits in normal flow */
.jobChangesDeck__card--front {
position: relative;
z-index: 2;
}
/* Back card (peeking from top-left behind front card) */
.jobChangesDeck__card--back {
position: absolute;
top: -16px;
left: -20px;
right: 20px;
z-index: 1;
}
.jobChangesDeck__card--back:hover {
cursor: pointer;
}
/* Shuffle animation - dramatic movement for both cards */
.jobChangesDeck__card--shuffling-out {
animation: shuffleOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.jobChangesDeck__card--shuffling-in {
animation: shuffleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes shuffleOut {
0% {
transform: translateX(0) translateY(0);
z-index: 2;
}
40% {
transform: translateX(60px) translateY(40px) rotateZ(3deg);
z-index: 2;
}
50% {
z-index: 1;
}
100% {
transform: translateX(-20px) translateY(-16px);
z-index: 1;
}
}
@keyframes shuffleIn {
0% {
transform: translateX(-20px) translateY(-16px);
z-index: 1;
}
40% {
transform: translateX(-60px) translateY(-40px) rotateZ(-3deg);
z-index: 1;
}
50% {
z-index: 2;
}
100% {
transform: translateX(0) translateY(0);
z-index: 2;
}
}
/* Degree badge */
.degreeBadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.15s ease;
}
.degreeBadge--first {
background: rgba(180, 180, 140, 0.18);
border: 1px solid rgba(180, 180, 140, 0.45);
color: rgba(210, 210, 170, 0.95);
}
.degreeBadge--first:hover,
.degreeBadge--first.is-active {
background: rgba(180, 180, 140, 0.28);
border-color: rgba(180, 180, 140, 0.65);
}
.degreeBadge--second {
background: transparent;
border: 1px solid rgba(180, 180, 140, 0.25);
color: rgba(180, 180, 140, 0.65);
}
.degreeBadge--second:hover,
.degreeBadge--second.is-active {
background: rgba(180, 180, 140, 0.18);
border-color: rgba(163, 163, 118, 0.4);
color: rgba(163, 163, 118, 0.95);
}
/* Degree toggle container in header */
.degreeToggles {
display: flex;
gap: 4px;
margin-left: 8px;
}
/* Degree content panels */
.degreeContent {
display: none;
}
.degreeContent.is-active {
display: block;
}
/* Unified degree card */
.degreeCard {
/* inherits from objectCard */
}
/* Keyboard hint */
.deckKeyHint {
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted2);
opacity: 0.7;
transition: opacity 0.2s;
}
.deckKeyHint:hover {
opacity: 1;
}
.deckKeyHint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 5px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 4px;
font-family: inherit;
font-size: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Streaming dot indicator */
.streamingDot {
display: inline-block;
width: 6px;
height: 6px;
background: rgb(139, 92, 246);
border-radius: 50%;
margin-right: 6px;
animation: streamPulse 1s ease-in-out infinite;
}
@keyframes streamPulse {
0%, 100% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
/* Loading state for back card */
.jobChangesDeck__card--loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.jobChangesDeck__card--loading .loadingPulse {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 13px;
}
.jobChangesDeck__card--loading .loadingPulse::before {
content: '';
width: 8px;
height: 8px;
background: rgb(139, 92, 246);
border-radius: 50%;
animation: pulse 1.2s ease-in-out infinite;
}
/* Light theme adjustments */
:root[data-theme="light"] .degreeBadge--first {
background: rgba(100, 95, 60, 0.18);
border-color: rgba(100, 95, 60, 0.45);
color: #4a4a38;
}
:root[data-theme="light"] .degreeBadge--first.is-active {
background: rgba(100, 95, 60, 0.25);
border-color: rgba(100, 95, 60, 0.55);
}
:root[data-theme="light"] .degreeBadge--second {
background: transparent;
border-color: rgba(100, 95, 60, 0.25);
color: #6a6a58;
}
:root[data-theme="light"] .degreeBadge--second.is-active {
background: rgba(100, 95, 60, 0.18);
border-color: rgba(100, 95, 60, 0.45);
color: #4a4a38;
}
:root[data-theme="light"] .deckKeyHint {
color: var(--muted);
}
/* --- Second Degree Section --- */
.secondDegreeSection {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--stroke);
}
.secondDegreeHeader {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
margin-bottom: 12px;
font-size: 13px;
color: var(--muted);
}
.secondDegreeIcon {
font-size: 14px;
}
.loadSecondDegreeBtn {
margin-left: auto;
padding: 6px 14px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 20px;
color: color-mix(in srgb, rgb(99, 102, 241) 82%, var(--text));
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.loadSecondDegreeBtn:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%);
border-color: rgba(99, 102, 241, 0.5);
transform: translateY(-1px);
}
.secondDegreeBody {
padding: 0 16px 16px;
}
/* 2nd Degree Controls */
.secondDegreeControls {
margin-bottom: 12px;
}
.secondDegreeSearch {
width: 100%;
padding: 10px 14px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 10px;
color: var(--text);
font-size: 13px;
outline: none;
transition: all 0.2s ease;
margin-bottom: 10px;
}
.secondDegreeSearch::placeholder {
color: var(--ui-input-placeholder);
}
.secondDegreeSearch:focus {
border-color: rgba(99, 102, 241, 0.5);
background: rgba(0, 0, 0, 0.4);
}
.secondDegreeSummary {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.secondDegreeList {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
.secondDegreeList::-webkit-scrollbar {
width: 6px;
}
.secondDegreeList::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.secondDegreeList::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.4);
border-radius: 3px;
}
.secondDegreeList::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.6);
}
.secondDegreePagination {
margin-top: 12px;
text-align: center;
}
.showMoreBtn {
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 10px;
color: color-mix(in srgb, rgb(99, 102, 241) 82%, var(--text));
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.showMoreBtn:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
border-color: rgba(99, 102, 241, 0.4);
}
.showMoreBtn .remainingCount {
opacity: 0.6;
font-weight: 400;
}
.noResults {
padding: 16px;
text-align: center;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
}
/* ═══════════════════════════════════════════════════════════════
TEXT-DRIVEN LISTS - Minimal, clean, typography-focused
═══════════════════════════════════════════════════════════════ */
/* Invisible/lightweight container - just provides structure */
.textList {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.01em;
}
/* List with subtle gray circle bullets */
.textList--bullets {
list-style: none;
padding: 0;
margin: 0;
}
.textList--bullets li {
position: relative;
padding-left: 24px;
margin-bottom: 10px;
}
.textList--bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
}
/* Tighter spacing variant */
.textList--tight li {
margin-bottom: 6px;
}
/* Looser/spacious variant */
.textList--spacious li {
margin-bottom: 16px;
}
/* Numbered list - minimal style */
.textList--numbered {
list-style: none;
padding: 0;
margin: 0;
counter-reset: list-counter;
}
.textList--numbered li {
position: relative;
padding-left: 28px;
margin-bottom: 10px;
counter-increment: list-counter;
}
.textList--numbered li::before {
content: counter(list-counter);
position: absolute;
left: 0;
top: 0;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
width: 20px;
}
/* Inline code/tag styling (like the ::before opacity in your example) */
.textList code,
.textCode {
font-family: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;
font-size: 13px;
background: rgba(255, 255, 255, 0.08);
padding: 2px 8px;
border-radius: 4px;
color: rgba(255, 255, 255, 0.7);
}
/* Text hierarchy helpers */
.textPrimary {
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
}
.textSecondary {
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.textMuted {
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
}
/* Section headers - minimal */
.textSection {
margin-bottom: 12px;
}
.textSection__title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 8px;
}
/* Lightweight card container - almost invisible */
.textCard {
background: #1e1e2e;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
padding: 16px;
}
/* Ghost variant - truly invisible, just spacing */
.textCard--ghost {
background: transparent;
border: none;
padding: 0;
}
/* Divider line - super subtle */
.textDivider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 16px 0;
}
/* Inline list (horizontal) */
.textList--inline {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
list-style: none;
padding: 0;
margin: 0;
}
.textList--inline li {
display: flex;
align-items: center;
gap: 8px;
}
.textList--inline li::before {
content: '·';
color: rgba(255, 255, 255, 0.3);
font-weight: bold;
}
.textList--inline li:first-child::before {
display: none;
}
/* Key-value pairs */
.textKV {
display: flex;
flex-direction: column;
gap: 8px;
}
.textKV__row {
display: flex;
align-items: baseline;
gap: 12px;
}
.textKV__key {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
min-width: 100px;
flex-shrink: 0;
}
.textKV__value {
color: rgba(255, 255, 255, 0.9);
}
/* Compact person row - text-driven */
.textPerson {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
}
.textPerson__bullet {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
}
.textPerson__name {
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
}
.textPerson__name a {
color: inherit;
text-decoration: none;
}
.textPerson__name a:hover {
text-decoration: underline;
}
.textPerson__role {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
.textPerson__meta {
margin-left: auto;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
/* Light theme variants for textPerson */
:root[data-theme="light"] .textPerson__bullet {
background: rgba(12, 18, 34, 0.25);
}
:root[data-theme="light"] .textPerson__name {
color: rgba(12, 18, 34, 0.90);
}
:root[data-theme="light"] .textPerson__role {
color: rgba(12, 18, 34, 0.55);
}
:root[data-theme="light"] .textPerson__meta {
color: rgba(12, 18, 34, 0.45);
}
:root[data-theme="light"] .textCode {
color: rgba(99, 102, 241, 0.8);
}
:root[data-theme="light"] .noSecondDegree,
:root[data-theme="light"] .secondDegreeMore {
color: rgba(12, 18, 34, 0.45);
}
.noSecondDegree {
text-align: center;
padding: 20px;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
}
.secondDegreeMore {
text-align: center;
padding: 12px;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
/* 2nd degree row styling */
.personRow--second {
background: rgba(0, 0, 0, 0.15);
border-left: 2px solid rgba(139, 92, 246, 0.4);
}
.personRow--second .personMeta {
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.personVia {
font-size: 11px;
color: rgba(139, 92, 246, 0.7);
margin-top: 2px;
}
.degreeBadge {
font-size: 10px;
padding: 2px 6px;
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
color: #c4b5fd;
font-weight: 600;
}
.cacheTag {
font-size: 10px;
padding: 2px 6px;
background: rgba(75, 85, 99, 0.3);
border-radius: 6px;
color: rgba(255, 255, 255, 0.4);
}
/* Fade-in animation for streamed rows */
.fadeInUp {
animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: var(--delay, 0s);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Streaming Status --- */
.streamingStatus {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 12px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 10px;
font-size: 13px;
color: color-mix(in srgb, rgb(99, 102, 241) 82%, var(--text));
}
.streamingStatusIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.streamingStatusIcon svg {
width: 14px;
height: 14px;
display: block;
}
.streamingStatus--cached {
background: rgba(75, 85, 99, 0.15);
border-color: rgba(75, 85, 99, 0.25);
color: rgba(255, 255, 255, 0.6);
}
.pulseIndicator {
width: 8px;
height: 8px;
background: #6366f1;
border-radius: 50%;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
/* --- Skeleton Loading --- */
.personRow--skeleton {
background: rgba(0, 0, 0, 0.15);
animation: skeletonPulse 1.5s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
@keyframes skeletonPulse {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 0.7;
}
}
.skeletonAvatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s infinite;
flex-shrink: 0;
}
.skeletonContent {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.skeletonLine {
border-radius: 4px;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s infinite;
}
.skeletonLine--name {
width: 60%;
height: 14px;
}
.skeletonLine--role {
width: 80%;
height: 12px;
}
.skeletonMeta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.skeletonLine--date {
width: 70px;
height: 12px;
}
@keyframes skeletonShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.errorMsg {
padding: 12px 16px;
background: #450a0a;
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 10px;
color: #fca5a5;
font-size: 13px;
}
/* --- Badges --- */
.pathBadge {
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.pathBadge--direct {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.pathBadge--intro {
background: rgba(251, 191, 36, 0.12);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.25);
}
.viaBadge {
font-size: 12px;
color: #64748b;
font-style: italic;
}
/* scoreBadge removed - scores hidden from UI */
/* --- Expand Button --- */
.smartCardExpand {
width: 100%;
padding: 12px;
margin-top: 8px;
background: rgba(99, 102, 241, 0.06);
border: 1px dashed rgba(99, 102, 241, 0.2);
border-radius: 10px;
color: #818cf8;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.smartCardExpand:hover {
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.4);
color: color-mix(in srgb, rgb(99, 102, 241) 82%, var(--text));
}
/* --- Aggregate Card Breakdown --- */
.smartCardBreakdown {
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.breakdownRow {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.breakdownLabel {
width: 100px;
font-size: 13px;
color: #94a3b8;
flex-shrink: 0;
}
.breakdownBar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.breakdownBar::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--pct, 0%);
background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
border-radius: 4px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.breakdownCount {
width: 60px;
text-align: right;
font-size: 13px;
font-weight: 600;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
}
/* --- Sample Section --- */
.smartCardSample {
padding: 12px 16px;
background: rgba(0, 0, 0, 0.15);
border-radius: 0 0 16px 16px;
}
.sampleLabel {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 10px;
}
/* --- Person Chip (inline, clickable) --- */
.personChip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 6px;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.15);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: #c7d2fe;
cursor: pointer;
transition: all 0.18s ease;
margin-right: 6px;
margin-bottom: 6px;
}
.personChip:hover {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
transform: translateY(-1px);
}
.personChipAvatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.personChipInitial {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: white;
}
/* --- Company Chip --- */
.companyChip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--ui-glass-shadow);
}
.companyChip:hover {
background: var(--ui-chip-hover-bg);
border-color: var(--ui-chip-hover-border);
transform: translateY(-2px);
}
.companyLogo {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: contain;
background: white;
}
.companyName {
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.companyCount {
font-size: 12px;
color: var(--muted2);
margin-left: auto;
}
/* --- Connector Row --- */
.connectorRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: color-mix(in srgb, var(--ui-glass-bg) 85%, transparent);
border-radius: 10px;
margin-bottom: 6px;
animation: rowFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
animation-delay: var(--delay, 0s);
}
.connectorInfo {
display: flex;
flex-direction: column;
gap: 2px;
}
.connectorName {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.connectorMutual {
font-size: 12px;
color: var(--muted2);
}
.connectorScore {
font-size: 16px;
font-weight: 700;
color: color-mix(in srgb, rgb(99, 102, 241) 82%, var(--text));
}
/* --- Opportunity Row --- */
.opportunityRow {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.15);
border-radius: 10px;
margin-bottom: 6px;
border-left: 3px solid rgba(251, 191, 36, 0.4);
}
.oppIcon {
font-size: 20px;
flex-shrink: 0;
}
.oppContent {
flex: 1;
min-width: 0;
}
.oppTitle {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.oppMeta {
font-size: 12px;
color: #64748b;
margin-top: 2px;
}
.oppTime {
font-size: 11px;
color: #475569;
flex-shrink: 0;
}
/* --- Opportunities Snapshot --- */
.opportunitiesCard .objectCard__content {
padding: 24px;
overflow: visible;
flex: 0 0 auto;
}
.opportunitiesCard {
max-height: none;
overflow: visible;
}
/* ═══════════════════════════════════════════════════════════════════════════
OPPORTUNITIES CARD V2 - Clean single-sheet design
═══════════════════════════════════════════════════════════════════════════ */
.opportunitiesCard--v2 {
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 16px;
overflow: hidden;
}
.opportunitiesCard--v2 .objectCard__header,
.opportunitiesCard--v2 .objectCard__content {
display: none;
}
/* Header */
.oppV2Header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--stroke);
background: var(--ui-glass-bg);
}
.oppV2HeaderLeft {
display: flex;
flex-direction: column;
gap: 2px;
}
.oppV2Title {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.oppV2Subtitle {
font-size: 13px;
color: var(--muted2);
}
/* Stats row */
.oppV2Stats {
display: flex;
gap: 24px;
}
.oppStat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.oppStatValue {
font-size: 20px;
font-weight: 700;
color: var(--accent);
}
.oppStatLabel {
font-size: 10px;
color: var(--muted2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Body layout */
.oppV2Body {
display: grid;
grid-template-columns: 1fr 220px;
min-height: 280px;
}
.oppV2Actions {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
border-right: 1px solid var(--stroke);
}
.oppV2Sidebar {
padding: 16px;
background: var(--ui-glass-bg);
display: flex;
flex-direction: column;
gap: 8px;
}
.oppV2SectionHead {
font-size: 11px;
font-weight: 600;
color: var(--muted2);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
/* Action rows */
.oppRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--ui-glass-bg);
border: 1px solid var(--stroke);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.oppRow:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 5%, var(--ui-glass-bg));
}
.oppRowLeft {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.oppRowAvatarWrap {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--ui-glass-bg-strong);
border: 1px solid var(--stroke);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.oppRowAvatar {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.oppRowAvatarFallback {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.oppRowInfo {
min-width: 0;
flex: 1;
}
.oppRowName {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oppRowSub {
font-size: 12px;
color: var(--muted2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.oppRowReason {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* CTA button */
.oppRowCta {
flex-shrink: 0;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.oppRowCta:hover {
background: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--accent);
}
/* Mini deals in sidebar */
.oppMiniDeal {
padding: 10px 12px;
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.15s ease;
}
.oppMiniDeal:hover {
border-color: var(--accent);
}
.oppMiniDealName {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oppMiniDealMeta {
font-size: 11px;
color: var(--muted2);
margin-top: 2px;
}
.oppEmpty {
padding: 16px;
text-align: center;
color: var(--muted2);
font-size: 13px;
}
.oppEmptyMini {
padding: 12px;
text-align: center;
color: var(--muted2);
font-size: 12px;
}
/* Light mode overrides */
:root[data-theme="light"] .opportunitiesCard--v2 {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(100, 95, 65, 0.2);
}
:root[data-theme="light"] .oppV2Header {
background: rgba(250, 248, 245, 0.9);
border-bottom-color: rgba(100, 95, 65, 0.15);
}
:root[data-theme="light"] .oppV2Actions {
border-right-color: rgba(100, 95, 65, 0.12);
}
:root[data-theme="light"] .oppV2Sidebar {
background: rgba(250, 248, 245, 0.8);
}
:root[data-theme="light"] .oppRow {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(100, 95, 65, 0.15);
}
:root[data-theme="light"] .oppRow:hover {
background: rgba(100, 95, 65, 0.04);
}
:root[data-theme="light"] .oppMiniDeal {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(100, 95, 65, 0.15);
}
/* Responsive */
@media (max-width: 700px) {
.oppV2Body {
grid-template-columns: 1fr;
}
.oppV2Actions {
border-right: none;
border-bottom: 1px solid var(--stroke);
}
.oppV2Stats {
gap: 16px;
}
.oppStat {
gap: 1px;
}
.oppStatValue {
font-size: 16px;
}
}
/* New Opportunities Sheet */
.oppSheet {
display: flex;
flex-direction: column;
gap: 22px;
}
.oppHeaderRow {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.oppGreeting {
font-size: 36px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.oppSubhead {
font-size: 14px;
color: var(--muted);
margin-top: 6px;
}
.oppHeaderMeta {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--muted2);
font-weight: 600;
}
.oppGrid {
display: grid;
grid-template-columns: minmax(520px, 2.6fr) minmax(320px, 1.2fr);
gap: 24px;
align-items: start;
}
.oppMain {
background: var(--ui-glass-bg-strong);
border: 1px solid var(--ui-glass-border-strong);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--ui-glass-shadow);
backdrop-filter: blur(12px);
}
.oppSectionHeader {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.oppSectionTitle {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.oppSectionMeta {
font-size: 12px;
color: var(--muted2);
}
.oppSide {
display: flex;
flex-direction: column;
gap: 14px;
}
.oppPanel {
background: var(--ui-glass-bg);
border: 1px solid var(--ui-glass-border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--ui-float-shadow);
backdrop-filter: blur(10px);
}
.oppPanelHeader {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.oppPanelMeta {
font-size: 11px;
color: var(--muted2);
}
.oppPanelBody {
display: flex;
flex-direction: column;
gap: 10px;
}
:root[data-theme="light"] .oppMain,
:root[data-theme="light"] .oppPanel {
background: #ffffff;
border-color: rgba(12, 18, 34, 0.10);
}
:root[data-theme="light"] .oppActionRow {
background: #ffffff;
border-color: rgba(12, 18, 34, 0.10);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .oppActionAvatar {
background: var(--ui-avatar-bg);
border-color: var(--ui-avatar-border);
}
.oppActionList {
gap: 12px;
}
.oppActionRow {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--ui-glass-border);
background: var(--ui-glass-bg);
box-shadow: var(--ui-float-shadow);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.oppActionRow:hover {
border-color: var(--ui-glass-border-strong);
background: rgba(99, 102, 241, 0.08);
transform: translateY(-1px);
}
:root[data-theme="light"] .oppActionRow:hover {
border-color: rgba(12, 18, 34, 0.18);
background: rgba(12, 18, 34, 0.03);
}
.oppActionAvatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
position: relative;
}
.oppActionAvatarImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.oppActionAvatarImg + .oppActionAvatarFallback {
display: none;
}
.oppActionAvatarFallback {
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.oppActionBody {
min-width: 0;
}
.oppActionTitle {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.oppActionMeta {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.oppActionReason {
font-size: 11px;
color: rgba(234, 179, 8, 0.92);
margin-top: 4px;
}
.oppActionTags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.oppActionCtas {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.oppActionBtn {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(139, 92, 246, 0.35);
background: rgba(139, 92, 246, 0.12);
color: #e5e7eb;
font-size: 11px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.oppActionBtn:hover {
border-color: rgba(139, 92, 246, 0.7);
background: rgba(139, 92, 246, 0.25);
}
.coffeeBrandCard {
width: 100%;
}
.resultStack .coffeeBrandCard {
margin-top: 16px;
}
.oppCoffeePanel {
position: relative;
margin-top: 0;
padding: 22px 22px 20px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.2);
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.oppCoffeePanel::before {
content: attr(data-brand-text);
position: absolute;
right: -20px;
bottom: -10px;
font-size: 96px;
font-weight: 800;
letter-spacing: 0.1em;
opacity: 0.12;
pointer-events: none;
}
.oppCoffeePanel::after {
content: attr(data-brand-text);
position: absolute;
left: -30px;
top: -10px;
font-size: 64px;
font-weight: 700;
letter-spacing: 0.2em;
opacity: 0.08;
pointer-events: none;
}
.coffeePanelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 1;
}
.coffeePanelBrand {
display: flex;
align-items: center;
gap: 12px;
}
.coffeeBrandBadge {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
position: relative;
}
.coffeeBrandLogo {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.coffeeBrandBadgeFallback {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.coffeeBrandName {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.02em;
}
.coffeeBrandSub {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
opacity: 0.75;
margin-top: 2px;
}
.coffeeBrandSwitch {
display: flex;
gap: 6px;
align-items: center;
}
.coffeeBrandSwitchBtn {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.12);
color: inherit;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.15s ease;
}
.coffeeBrandSwitchBtn.is-active {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
}
.coffeeBrandClose {
font-size: 16px;
font-weight: 700;
padding: 4px 8px;
}
.coffeePanelBody {
margin-top: 18px;
position: relative;
z-index: 1;
}
.coffeePanelHero {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
}
.coffeePanelMeta {
margin-top: 6px;
font-size: 13px;
opacity: 0.8;
}
.coffeePanelFields {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.coffeePanelLabel {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
opacity: 0.75;
margin-bottom: 6px;
display: block;
}
.coffeePanelInput {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.12);
color: inherit;
font-size: 14px;
}
.coffeePanelRow {
display: flex;
align-items: flex-end;
gap: 12px;
}
.coffeeAmount {
flex: 1;
}
.coffeePanelAmount {
max-width: 140px;
}
.coffeePanelSend {
padding: 12px 18px;
border-radius: 12px;
border: none;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
cursor: pointer;
transition: all 0.15s ease;
}
.coffeePanelSend:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.coffeePanelPortal {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px dashed rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
color: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.coffeePanelError {
font-size: 12px;
color: #ffd4d4;
}
.coffeePanelSuccess {
margin-top: 10px;
}
.coffeePanelSuccessTitle {
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
}
.coffeePanelLinkRow {
display: flex;
gap: 8px;
align-items: center;
}
.coffeePanelLink {
flex: 1;
font-family: var(--font-mono, monospace);
font-size: 12px;
}
.coffeePanelLinkBtn {
padding: 8px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.12);
color: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.coffeePanelHint {
margin-top: 8px;
font-size: 11px;
opacity: 0.8;
}
.coffeePanel--starbucks {
color: #f1f8f4;
border-color: rgba(255, 255, 255, 0.22);
background: linear-gradient(135deg, #006241 0%, #0b3d2e 52%, #01402a 100%);
box-shadow: 0 18px 40px rgba(0, 98, 65, 0.35);
}
.coffeePanel--starbucks .coffeeBrandBadge {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.45);
}
.coffeePanel--starbucks .coffeePanelSend {
background: #cba258;
color: #0b3d2e;
}
.coffeePanel--starbucks .coffeePanelSend:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(203, 162, 88, 0.4);
}
.coffeePanel--dunkin {
color: #fff7f0;
border-color: rgba(255, 255, 255, 0.25);
background: linear-gradient(130deg, #ff7a00 0%, #ff4f9a 52%, #ff8b2b 100%);
box-shadow: 0 18px 40px rgba(255, 106, 0, 0.35);
}
.coffeePanel--dunkin .coffeeBrandBadge {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.45);
}
.coffeePanel--dunkin .coffeePanelSend {
background: #ffffff;
color: #ff4f9a;
}
.coffeePanel--dunkin .coffeePanelSend:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(255, 255, 255, 0.35);
}
:root[data-theme="light"] .oppActionReason {
color: #b45309;
}
:root[data-theme="light"] .oppActionBtn {
border-color: rgba(12, 18, 34, 0.16);
background: rgba(12, 18, 34, 0.04);
color: rgba(12, 18, 34, 0.82);
}
:root[data-theme="light"] .oppActionBtn:hover {
border-color: rgba(12, 18, 34, 0.26);
background: rgba(12, 18, 34, 0.08);
}
.oppMiniRow {
padding: 10px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.02);
}
.oppMiniRow--action {
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.oppMiniRow--action:hover {
border-color: rgba(139, 92, 246, 0.35);
background: rgba(139, 92, 246, 0.06);
}
:root[data-theme="light"] .oppMiniRow--action:hover {
border-color: rgba(12, 18, 34, 0.18);
background: rgba(12, 18, 34, 0.04);
}
.oppMiniTitle {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.oppMiniMeta {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.oppMiniReason {
font-size: 11px;
color: rgba(234, 179, 8, 0.9);
margin-top: 6px;
}
.oppMiniTags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.oppConnectorRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.02);
}
.oppConnectorRow.is-top {
border-color: rgba(139, 92, 246, 0.25);
background: rgba(139, 92, 246, 0.05);
}
:root[data-theme="light"] .oppMiniRow,
:root[data-theme="light"] .oppConnectorRow {
background: #ffffff;
border-color: rgba(12, 18, 34, 0.10);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .oppMiniReason {
color: #b45309;
}
:root[data-theme="light"] .oppConnectorRow.is-top {
border-color: rgba(12, 18, 34, 0.18);
background: rgba(12, 18, 34, 0.04);
}
.oppConnectorName {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.oppConnectorMeta {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.oppConnectorTags {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.oppConnectorCount {
font-size: 12px;
font-weight: 700;
color: #c4b5fd;
border: 1px solid rgba(139, 92, 246, 0.28);
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
}
.oppItem {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oppItem:last-child {
border-bottom: none;
padding-bottom: 0;
}
.oppItemMain {
flex: 1;
min-width: 0;
}
.oppItemName {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.oppItemMeta {
font-size: 11px;
color: var(--muted2);
margin-top: 2px;
}
.oppItemMetaStack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
min-width: 80px;
}
.oppScore {
font-size: 11px;
font-weight: 700;
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 999px;
padding: 2px 6px;
}
.oppReason {
font-size: 10px;
color: var(--muted2);
}
.oppDeal,
.oppChange {
padding: 12px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.oppDeal {
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.oppDeal:hover {
border-color: rgba(139, 92, 246, 0.4);
background: rgba(139, 92, 246, 0.08);
}
:root[data-theme="light"] .oppDeal,
:root[data-theme="light"] .oppChange {
background: #ffffff;
border-color: rgba(12, 18, 34, 0.10);
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .oppDeal:hover {
border-color: rgba(12, 18, 34, 0.18);
background: rgba(12, 18, 34, 0.03);
}
.oppDealTitle {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.oppDealMeta,
.oppDealPath {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.oppChangeName {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.oppChangeMeta {
font-size: 12px;
color: var(--muted2);
margin-top: 4px;
}
.oppEmpty {
font-size: 12px;
color: var(--muted2);
padding: 8px 2px;
}
@media (max-width: 720px) {
.oppHeaderRow {
flex-direction: column;
align-items: flex-start;
}
.oppGrid {
grid-template-columns: 1fr;
}
.oppSide {
gap: 12px;
}
}
/* --- Smart Warning / Error --- */
.smartWarning {
color: #fbbf24;
}
.smartError {
color: #f87171;
}
.smartWarning,
.smartNotice {
display: inline-flex;
align-items: center;
gap: 6px;
}
.smartNotice {
color: #34d399;
}
.smartWarningIcon,
.smartNoticeIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.smartWarningIcon svg,
.smartNoticeIcon svg {
width: 14px;
height: 14px;
display: block;
}
/* --- Chip Enhancements --- */
.aiChatChip .chipIcon {
margin-right: 4px;
}
.aiChatChip .chipLabel {
display: inline;
}
/* Compact chips when messages present */
.aiChatBar.hasMessages .aiChatChip {
padding: 5px 12px;
font-size: 11px;
border-radius: 16px;
}
.aiChatBar.hasMessages .aiChatChip .chipIcon {
font-size: 12px;
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Mini Banners (below chat bar) */
/* ────────────────────────────────────────────────────────────────────────── */
.labBannersRow--mini {
width: auto;
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: center;
}
.neonBannerMini {
--mini-primary: 99, 102, 241;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 12px;
background: var(--ui-glass-bg);
border: 1px solid rgba(var(--mini-primary), 0.2);
color: rgb(var(--mini-primary));
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.2s ease;
backdrop-filter: blur(14px);
}
.neonBannerMini:hover {
background: color-mix(in srgb, var(--ui-glass-bg) 72%, rgba(var(--mini-primary), 0.10));
border-color: rgba(var(--mini-primary), 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--mini-primary), 0.075);
}
.neonBannerMiniIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.neonBannerMiniIcon svg {
width: 14px;
height: 14px;
display: block;
}
.neonBannerMiniText {
font-family: var(--font-sans);
}
.neonBannerMini--gold {
--mini-primary: 234, 179, 8;
}
.neonBannerMini--emerald {
--mini-primary: 52, 211, 153;
}
.neonBannerMini--purple {
--mini-primary: 168, 85, 247;
}
.neonBannerMini--sky {
--mini-primary: 34, 211, 238;
}
.neonBannerMini--rose {
--mini-primary: 248, 113, 113;
}
/* (Old dagotaBanner styles have been merged into the unified neonBanner system above) */
/* ────────────────────────────────────────────────────────────────────────── */
/* X Activity Test Panel */
/* ────────────────────────────────────────────────────────────────────────── */
.xActivityResults {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 18px;
}
.xActivityResultsHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.xActivityResultsTitle {
font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-weight: 800;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.88);
}
.xActivityCopyBtn {
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
}
.xActivityCopyBtn:hover {
background: rgba(255, 255, 255, 0.1);
}
.xActivityOutput {
width: 100%;
margin: 0;
padding: 14px;
border-radius: 14px;
background: rgba(10, 10, 12, 0.75);
border: 1px solid rgba(255, 255, 255, 0.10);
overflow: auto;
max-height: 55vh;
font-size: 12px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.86);
white-space: pre-wrap;
word-break: break-word;
}
/* Tighten the top spacing for the X Activity panel specifically. */
#xActivityPanel {
/* Uploads panel intentionally uses zoom: 1.2; keep X Activity tighter. */
zoom: 1;
}
#xActivityPanel .jobHistoryHeader {
padding: 12px 20px;
}
#xActivityPanel .jobHistoryUploadBar {
padding: 12px 20px;
}
#xActivityPanel .jobHistoryBody {
padding: 16px 20px;
}
#xActivityPanel .uploadBarInner {
max-width: 1100px;
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Job History Panel */
/* ────────────────────────────────────────────────────────────────────────── */
.jobHistoryPanel {
position: fixed;
inset: 0;
z-index: 9500;
background: linear-gradient(180deg, #0a0a0c 0%, #111115 100%);
display: flex;
flex-direction: column;
animation: panelSlideIn 0.3s ease;
/* UPLOADS_JOB_HISTORY_SCALE_V1: scale the entire Uploads/Job History view by 50% */
zoom: 1.2;
}
@keyframes panelSlideIn {
from {
transform: translateY(20px);
}
to {
transform: translateY(0);
}
}
.jobHistoryHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.3);
}
.jobHistoryHeader .panelBack {
flex-shrink: 0;
}
.jobHistoryTitle {
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.1em;
color: #fbbf24;
}
.jobHistoryIcon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.jobHistoryIcon svg {
width: 24px;
height: 24px;
display: block;
}
.jobHistorySubtitle {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.05em;
}
.jobHistoryClose {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 0.15s ease;
}
.jobHistoryClose svg {
width: 16px;
height: 16px;
}
.jobHistoryClose:hover {
background: rgba(255, 100, 100, 0.15);
border-color: rgba(255, 100, 100, 0.3);
color: #ff6464;
}
.jobHistoryBody {
flex: 1;
overflow-y: auto;
padding: 32px;
}
.jobHistoryTableWrapper {
max-width: 1400px;
margin: 0 auto;
}
.jobHistoryTable {
width: 100%;
border-collapse: collapse;
font-size: 15px;
table-layout: fixed; /* Prevents column width shifts */
}
/* Fixed column widths to prevent layout shift on refresh */
.jobHistoryTable colgroup col:nth-child(1) { width: 18%; } /* Seed */
.jobHistoryTable colgroup col:nth-child(2) { width: 16%; } /* Job ID */
.jobHistoryTable colgroup col:nth-child(3) { width: 10%; } /* Hero */
.jobHistoryTable colgroup col:nth-child(4) { width: 12%; } /* Status */
.jobHistoryTable colgroup col:nth-child(5) { width: 26%; } /* Progress */
.jobHistoryTable colgroup col:nth-child(6) { width: 10%; } /* Time */
.jobHistoryTable colgroup col:nth-child(7) { width: 8%; } /* Actions */
.jobHistoryTable thead th {
text-align: left;
padding: 14px 18px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.jobHistoryTable tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background 0.15s ease;
}
.jobHistoryTable tbody tr:hover {
background: #1e1e2e;
}
.jobHistoryTable tbody td {
padding: 18px;
vertical-align: middle;
}
/* Center the HERO column (header and cells) */
.jobHistoryTable thead th:nth-child(2),
.jobHistoryTable tbody td:nth-child(2) {
text-align: center;
}
.jobHistoryEmpty {
text-align: center;
padding: 64px 32px;
color: rgba(255, 255, 255, 0.3);
font-size: 14px;
}
.jobHistoryFooter {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 16px 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.3);
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
}
.neo4jStatsRow {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.neo4jStatsLabel {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
margin-right: 4px;
}
.neo4jStatValue {
color: #22d3ee;
font-weight: 700;
font-size: 15px;
text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
.neo4jStatUnit {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
}
.neo4jStatDivider {
color: rgba(255, 255, 255, 0.2);
margin: 0 4px;
}
.footerMeta {
display: flex;
align-items: center;
gap: 12px;
}
/* Upload bar in Job History */
.jobHistoryUploadBar {
padding: 20px 32px;
background: linear-gradient(180deg, rgba(251, 191, 36, 0.05) 0%, transparent 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.uploadBarInner {
display: flex;
gap: 12px;
max-width: 800px;
margin: 0 auto;
}
.jobHistoryInput {
flex: 1;
padding: 14px 20px;
font-size: 14px;
font-family: inherit;
color: #fff;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
outline: none;
transition: all 0.2s ease;
}
.jobHistoryInput:focus {
border-color: rgba(251, 191, 36, 0.4);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}
.jobHistoryInput::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.jobHistoryStartBtn {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: #000;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.jobHistoryStartBtn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
}
.jobHistoryStartBtn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.jobHistoryStartBtn .uploadIcon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.jobHistoryStartBtn .uploadIcon svg {
width: 16px;
height: 16px;
display: block;
}
.jobHistoryResolveStatus {
max-width: 800px;
margin: 12px auto 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
min-height: 20px;
}
.jobHistoryResolveStatus.success {
color: #4ade80;
}
.jobHistoryResolveStatus.error {
color: #f87171;
}
.jobHistoryResolveStatus.loading {
color: #fbbf24;
}
.jobHistoryResolveStatus.warning {
color: #fbbf24;
font-weight: 500;
}
:root[data-theme="light"] .jobHistoryPanel {
background: linear-gradient(180deg, #f8f9fc 0%, #f2f4f9 100%);
}
:root[data-theme="light"] .jobHistoryHeader,
:root[data-theme="light"] .jobHistoryFooter {
background: rgba(255, 255, 255, 0.9);
border-bottom-color: rgba(15, 23, 42, 0.08);
border-top-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .jobHistoryTitle {
color: #b45309;
}
:root[data-theme="light"] .jobHistorySubtitle {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .jobHistoryClose {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .jobHistoryClose:hover {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.25);
color: #b91c1c;
}
:root[data-theme="light"] .jobHistoryTable thead th {
color: rgba(15, 23, 42, 0.5);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .jobHistoryTable tbody tr {
border-bottom-color: rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .jobHistoryTable tbody tr:hover {
background: rgba(15, 23, 42, 0.03);
}
:root[data-theme="light"] .jobHistoryEmpty {
color: rgba(15, 23, 42, 0.4);
}
:root[data-theme="light"] .jobHistoryUploadBar {
background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .jobHistoryInput {
color: #0f172a;
background: rgba(255, 255, 255, 0.9);
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .jobHistoryInput:focus {
border-color: rgba(251, 191, 36, 0.6);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
:root[data-theme="light"] .jobHistoryInput::placeholder {
color: rgba(15, 23, 42, 0.35);
}
:root[data-theme="light"] .jobHistoryResolveStatus {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .neo4jStatsLabel {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .neo4jStatValue {
color: #0ea5e9;
text-shadow: none;
}
:root[data-theme="light"] .neo4jStatUnit {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .neo4jStatDivider {
color: rgba(15, 23, 42, 0.25);
}
:root[data-theme="light"] .jobHistoryBody {
color: #0f172a;
}
:root[data-theme="light"] .jobHistoryTable {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
overflow: hidden;
}
:root[data-theme="light"] .jobHistoryTable thead {
background: #f8fafc;
}
:root[data-theme="light"] .jobHistoryTable thead th {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .jobHistoryTable tbody td {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .jobHistoryTable tbody tr:nth-child(even) {
background: rgba(15, 23, 42, 0.02);
}
:root[data-theme="light"] .jobHistoryTable tbody tr:hover {
background: rgba(14, 165, 233, 0.08);
}
:root[data-theme="light"] .jobHistoryEmpty {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .jobHistoryStartBtn {
color: #0f172a;
background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}
:root[data-theme="light"] .jobHistoryStartBtn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
}
:root[data-theme="light"] .jobHistoryStartBtn:disabled {
opacity: 0.45;
}
:root[data-theme="light"] .jobHistoryResolveStatus.success {
color: #15803d;
}
:root[data-theme="light"] .jobHistoryResolveStatus.error {
color: #b91c1c;
}
:root[data-theme="light"] .jobHistoryResolveStatus.loading,
:root[data-theme="light"] .jobHistoryResolveStatus.warning {
color: #b45309;
}
:root[data-theme="light"] .jobHistoryFooter {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .footerVersion {
background: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .jobSeedName {
color: #0f172a;
}
:root[data-theme="light"] .jobSeedLink {
color: #2563eb;
}
:root[data-theme="light"] .jobIdCode {
background: #e2e8f0;
color: #1f2937;
}
:root[data-theme="light"] .jobIdCell:hover .jobIdCode {
background: #dbeafe;
color: #1d4ed8;
}
:root[data-theme="light"] .jobStatusBadge {
border-color: transparent;
}
:root[data-theme="light"] .jobStatusBadge.queued {
color: #475569;
background: #e2e8f0;
}
:root[data-theme="light"] .jobStatusBadge.succeeded {
color: #166534;
background: #dcfce7;
}
:root[data-theme="light"] .jobStatusBadge.skipped {
color: #64748b;
background: #e2e8f0;
}
:root[data-theme="light"] .jobStatusBadge.failed,
:root[data-theme="light"] .jobStatusBadge.not-found {
color: #b91c1c;
background: #fee2e2;
}
:root[data-theme="light"] .jobProgressBar {
background: #e2e8f0;
}
:root[data-theme="light"] .jobProgressText {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .jobTimeCell {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .jobTimeCell .timeValue {
color: rgba(15, 23, 42, 0.8);
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Pathways Lab overlay — REDESIGNED: clean "Customer Journeys" board */
/* ────────────────────────────────────────────────────────────────────────── */
.pathLab {
position: fixed;
inset: 0;
z-index: 250000;
display: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: rgba(255, 255, 255, 0.9);
/* Dark gradient matching Score Lab */
background: linear-gradient(180deg, #0a0c14 0%, #070914 100%);
}
.pathLab.open {
display: flex;
flex-direction: column;
}
/* ─────────────── HEADER ─────────────── */
.pathLabHeader {
flex: 0 0 auto;
height: 52px;
display: flex;
align-items: center;
gap: 16px;
padding: 0 24px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Pathways Tabs */
.pathLabTabs {
display: flex;
gap: 4px;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 4px;
}
.pathLabTab {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 150ms;
}
.pathLabTab:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.05);
}
.pathLabTab.active {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.1) 100%);
color: #7dd3fc;
box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}
.pathLabTab svg {
width: 16px;
height: 16px;
}
/* Tab Content */
.pathLabTabContent {
display: none;
flex: 1;
overflow: auto;
}
.pathLabTabContent.active {
display: flex;
flex-direction: column;
}
.networkSearchContainer {
flex: 1;
padding: 24px;
overflow-y: auto;
}
.pathLabTitle {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: #38bdf8;
}
.pathLabIcon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pathLabIcon svg {
width: 20px;
height: 20px;
display: block;
}
.pathLabHeaderActions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.pathLabClose {
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(56, 189, 248, 0.25);
background: rgba(56, 189, 248, 0.1);
color: #7dd3fc;
border-radius: 10px;
font-weight: 400;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 150ms ease;
}
.pathLabClose svg {
width: 16px;
height: 16px;
}
.pathLabClose:hover {
background: rgba(56, 189, 248, 0.2);
border-color: rgba(56, 189, 248, 0.4);
}
/* ─────────────── BODY ─────────────── */
.pathLabBody {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ─────────────── TOP BAR (search + controls) ─────────────── */
.pathLabTopBar {
flex: 0 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 16px;
background: transparent;
}
.pathLabInputWrap {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
}
.pathLabInput {
flex: 1 1 auto;
height: 42px;
padding: 0 16px;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 12px;
background: #fff;
color: #1e293b;
font-size: 14px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pathLabInput::placeholder {
color: #94a3b8;
}
.pathLabInput:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.pathLabGo {
height: 42px;
padding: 0 20px;
border: none;
border-radius: 12px;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
transition: transform 100ms ease, box-shadow 100ms ease;
display: flex;
align-items: center;
gap: 6px;
}
.pathLabGoIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pathLabGoIcon svg {
width: 14px;
height: 14px;
display: block;
}
.pathLabGo:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
}
.pathLabMeta {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 16px;
}
.pathLabMetaItem {
display: flex;
flex-direction: column;
gap: 4px;
}
.pathLabMetaLabel {
font-size: 10px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pathLabSeg {
display: flex;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 10px;
overflow: hidden;
}
.pathLabSegBtn {
height: 32px;
min-width: 40px;
padding: 0 12px;
border: none;
background: transparent;
color: #64748b;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.pathLabSegBtn.active {
background: #3b82f6;
color: #fff;
}
.pathLabHeroChip {
height: 32px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 10px;
}
.pathLabHeroDot {
width: 22px;
height: 22px;
border-radius: 50%;
background: #e2e8f0;
background-size: cover;
background-position: center;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.pathLabHeroName {
font-size: 13px;
font-weight: 700;
color: #334155;
}
/* ─────────────── CANVAS (lanes + wires) ─────────────── */
.pathLabCanvasWrap {
position: relative;
flex: 1 1 auto;
margin: 0 24px 16px;
padding: 20px;
display: grid;
grid-template-columns: 240px 1fr 1fr 280px;
gap: 20px;
align-items: stretch;
overflow: hidden;
background: transparent;
}
.pathLabCanvasWrap::before {
display: none;
}
.pathLabWires {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.pathWire {
fill: none;
stroke: #94a3b8;
stroke-width: 1.5;
stroke-linecap: round;
opacity: 0.45;
}
.pathWire.active {
stroke: #3b82f6;
stroke-width: 2;
opacity: 1;
}
.pathWire[data-hop="2"] {
stroke-dasharray: 6 4;
}
.pathWire[data-hop="direct"] {
stroke: #94a3b8;
}
.pathWire.active[data-hop="2"] {
stroke: #3b82f6;
}
.pathWire.active[data-hop="direct"] {
stroke: #3b82f6;
}
/* ─────────────── LANES ─────────────── */
.pathLane {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.pathLaneInner {
flex: 1 1 auto;
background: #fff;
border-radius: 20px;
padding: 16px;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
}
.pathLaneTitle {
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f5f9;
}
.pathCards {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
max-height: calc(100vh - 280px);
}
/* ─────────────── CARDS ─────────────── */
.pathCard {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
transition: border-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
}
.pathCard:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.pathCard.selected {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.pathCardBig {
padding: 14px;
cursor: default;
}
.pathCardMini {
padding: 8px 10px;
}
.pathAvatarRing {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f1f5f9;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.10);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.pathAvatarImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.pathAvatarFallback {
font-size: 14px;
font-weight: 700;
color: #64748b;
}
.pathCardMain {
flex: 1 1 auto;
min-width: 0;
}
.pathCardTitle {
font-size: 13px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pathCardSub {
font-size: 11px;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pathCardMeta {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.pathBadge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 7px;
border-radius: 6px;
background: #f1f5f9;
color: #475569;
}
.pathScore {
font-size: 11px;
font-weight: 700;
color: #3b82f6;
}
.pathLinkedInBtn {
width: 24px;
height: 24px;
border: none;
border-radius: 6px;
background: #0a66c2;
color: #fff;
font-size: 11px;
font-weight: 800;
font-family: Georgia, serif;
cursor: pointer;
transition: background 100ms ease, transform 100ms ease;
}
.pathLinkedInBtn:hover {
background: #004182;
transform: scale(1.05);
}
.pathMiniStack {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pathCardAction {
flex-shrink: 0;
}
.pathIconBtn {
width: 32px;
height: 32px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
color: #475569;
font-size: 0;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 100ms ease, border-color 100ms ease;
}
.pathIconBtn svg {
width: 14px;
height: 14px;
display: block;
}
.pathIconBtn:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
/* ─────────────── ACTION PANEL ─────────────── */
.pathActionPanel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.pathActionEmpty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
border: 2px dashed #e2e8f0;
border-radius: 16px;
text-align: center;
}
.pathActionEmptyIcon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.5;
}
.pathActionEmptyIcon svg {
width: 24px;
height: 24px;
display: block;
}
.pathActionEmptyText {
font-size: 13px;
color: #64748b;
}
.pathActionCard {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 14px;
}
.pathActionTop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.pathActionTitle {
font-size: 13px;
font-weight: 700;
color: #334155;
}
.pathActionPill {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 20px;
background: #dbeafe;
color: #1d4ed8;
}
.pathActionRoute {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 14px;
}
.pathRouteNode {
padding: 6px 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
color: #334155;
}
.pathRouteArrow {
color: #94a3b8;
font-size: 12px;
}
.pathActionNote {
margin-bottom: 12px;
}
.pathActionNoteLabel,
.pathActionCopyLabel {
font-size: 10px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.pathActionNoteBody {
font-size: 12px;
color: #475569;
line-height: 1.5;
}
.pathActionCopy {
margin-top: auto;
}
.pathActionTextarea {
width: 100%;
min-height: 70px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
color: #1e293b;
font-size: 12px;
line-height: 1.5;
resize: none;
outline: none;
}
.pathActionTextarea:focus {
border-color: #60a5fa;
}
.pathActionBtn {
width: 100%;
height: 38px;
margin-top: 10px;
border: none;
border-radius: 10px;
background: #3b82f6;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
transition: background 100ms ease;
}
.pathActionBtn:hover {
background: #2563eb;
}
/* ─────────────── FOOTER ─────────────── */
.pathLabFooter {
flex: 0 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(148, 163, 184, 0.25);
background: transparent;
}
.pathLabStatus {
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.pathLabStatus[data-tone="busy"] { color: #3b82f6; }
.pathLabStatus[data-tone="ok"] { color: #10b981; }
.pathLabStatus[data-tone="warn"] { color: #f59e0b; }
.pathLabStatus[data-tone="err"] { color: #ef4444; }
.pathLabHint {
font-size: 11px;
color: #94a3b8;
}
@media (max-width: 1100px) {
.pathLabCanvasWrap {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
.pathLaneSource { grid-column: 1 / -1; }
.pathLaneBridge { grid-column: 1; }
.pathLaneTarget { grid-column: 2; }
.pathLaneActions { grid-column: 1 / -1; }
}
.progressBar {
position: relative;
height: 46px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.32);
background:
radial-gradient(120px 60px at 18% 35%, rgba(139, 92, 246, 0.24), transparent 60%),
radial-gradient(160px 70px at 78% 55%, rgba(34, 197, 94, 0.18), transparent 62%),
rgba(12, 14, 28, 0.72);
box-shadow:
0 18px 55px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.progressBlocks {
position: absolute;
inset: 8px;
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 6px;
align-items: stretch;
}
.pBlock {
border-radius: 7px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
opacity: 0.85;
transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.pBlock.filled {
opacity: 1;
background: linear-gradient(180deg, rgba(253, 224, 71, 0.96), rgba(251, 191, 36, 0.88));
border-color: rgba(251, 191, 36, 0.75);
box-shadow:
0 0 0 1px rgba(251, 191, 36, 0.12),
0 10px 24px rgba(251, 191, 36, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pBlock.active {
transform: translateY(-1px) scale(1.02);
animation: blockPulse 900ms ease-in-out infinite;
}
.progressBar::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
opacity: 0.55;
pointer-events: none;
}
@keyframes blockPulse {
0% { filter: brightness(1.0); }
50% { filter: brightness(1.15); }
100% { filter: brightness(1.0); }
}
.statusLine {
width: min(720px, 92vw);
min-height: 22px;
margin-top: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.78);
text-align: center;
}
.statusLine.ok {
color: rgba(255, 255, 255, 0.86);
}
.statusLine.err {
color: rgba(239, 68, 68, 0.95);
}
/* ----------------------------
Completion summary modal
---------------------------- */
.modalOverlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 26px;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(10px);
z-index: var(--z-modal);
}
.modalOverlay.open {
display: flex;
}
.modalCard {
position: relative;
width: min(980px, 96vw);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.18);
background:
radial-gradient(900px 360px at 20% 0%, rgba(251, 191, 36, 0.12), transparent 60%),
radial-gradient(900px 360px at 75% 10%, rgba(34, 197, 94, 0.10), transparent 55%),
radial-gradient(800px 380px at 55% 80%, rgba(139, 92, 246, 0.14), transparent 60%),
rgba(8, 10, 20, 0.94);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.72);
overflow: hidden;
transform: translateY(10px) scale(0.99);
opacity: 0;
animation: modalIn 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes modalIn {
to { transform: translateY(0) scale(1); opacity: 1; }
}
.modalClose {
position: absolute;
top: 12px;
right: 12px;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.9);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 1;
}
.modalClose svg {
width: 16px;
height: 16px;
}
.modalClose:hover { background: rgba(255, 255, 255, 0.10); }
.modalHeader {
display: flex;
justify-content: space-between;
align-items: center;
/* Reserve space so top-right text doesn't collide with the close button */
padding: 18px 78px 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
}
.modalKicker {
font-weight: 950;
letter-spacing: 2px;
font-size: 22px;
transform: skewX(-10deg);
color: rgba(255, 255, 255, 0.92);
}
.modalHeaderRight {
display: flex;
gap: 14px;
align-items: baseline;
color: rgba(255, 255, 255, 0.66);
font-weight: 800;
letter-spacing: 0.6px;
font-size: 12px;
text-transform: uppercase;
}
.modalRound {
color: rgba(255, 255, 255, 0.86);
font-weight: 900;
}
.modalBody {
padding: 18px 20px 20px;
}
.modalTitleRow {
display: grid;
gap: 6px;
padding: 6px 0 14px;
}
.modalTitle {
font-weight: 950;
letter-spacing: 2px;
font-size: clamp(26px, 3vw, 40px);
transform: skewX(-10deg);
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 18px 55px rgba(0, 0, 0, 0.65);
}
.modalTitle.jp {
letter-spacing: 1px;
font-size: clamp(34px, 4.2vw, 62px);
color: rgba(251, 191, 36, 0.96);
text-shadow:
0 2px 0 rgba(0, 0, 0, 0.45),
0 18px 55px rgba(0, 0, 0, 0.75);
}
.modalSub {
font-weight: 900;
color: rgba(255, 255, 255, 0.78);
letter-spacing: 2px;
transform: skewX(-10deg);
text-transform: uppercase;
}
.modalSub.en {
font-size: 14px;
}
.modalTimeline {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
padding: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.timelineHeader {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 2px 10px;
}
.timelineLabel {
font-weight: 950;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.84);
transform: skewX(-10deg);
}
.timelineMeta {
font-weight: 900;
color: rgba(255, 255, 255, 0.66);
}
.timelineBars {
height: 160px;
display: grid;
grid-template-columns: repeat(42, 1fr);
gap: 6px;
align-items: end;
}
.tBar {
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
height: var(--h, 20%);
opacity: 0.9;
transform-origin: bottom;
transform: scaleY(0.0);
}
.tBar.on {
border-color: rgba(251, 191, 36, 0.45);
background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.06));
}
.tBar.cyan.on { border-color: rgba(56, 189, 248, 0.55); background: linear-gradient(180deg, rgba(56, 189, 248, 0.20), rgba(56, 189, 248, 0.06)); }
.tBar.pink.on { border-color: rgba(244, 114, 182, 0.55); background: linear-gradient(180deg, rgba(244, 114, 182, 0.20), rgba(244, 114, 182, 0.06)); }
.tBar.violet.on { border-color: rgba(167, 139, 250, 0.55); background: linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.06)); }
.modalOverlay.open .tBar {
animation: tBarRise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--d, 0ms);
}
@keyframes tBarRise {
0% { transform: scaleY(0.0); filter: brightness(0.9); }
55% { transform: scaleY(1.06); filter: brightness(1.1); }
100% { transform: scaleY(1.0); filter: brightness(1.0); }
}
.modalStats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 14px;
}
.statCard {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
padding: 12px 12px 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.statLabel {
font-weight: 950;
font-size: 12px;
letter-spacing: 1.1px;
color: rgba(255, 255, 255, 0.70);
transform: skewX(-10deg);
}
.statValue {
margin-top: 6px;
font-weight: 950;
font-size: 28px;
letter-spacing: 0.6px;
color: rgba(255, 255, 255, 0.94);
}
.statHint {
margin-top: 4px;
font-weight: 800;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.statCard.gold .statValue { color: rgba(251, 191, 36, 0.92); }
.statCard.cyan .statValue { color: rgba(56, 189, 248, 0.92); }
.statCard.pink .statValue { color: rgba(244, 114, 182, 0.92); }
.statCard.violet .statValue { color: rgba(167, 139, 250, 0.92); }
.modalFooter {
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.footerLeft {
font-weight: 900;
color: rgba(255, 255, 255, 0.78);
}
.footerLeft a {
color: rgba(251, 191, 36, 0.98);
text-decoration: none;
border-bottom: 1px solid rgba(251, 191, 36, 0.35);
}
.footerLeft a:hover { border-bottom-color: rgba(251, 191, 36, 0.75); }
@media (max-width: 860px) {
.timelineBars { grid-template-columns: repeat(26, 1fr); height: 140px; }
.modalStats { grid-template-columns: repeat(2, 1fr); }
}
.launchRow.isInvalid .input {
border-color: rgba(239, 68, 68, 0.92);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
}
.launchRow.isShaking .input {
animation: inputShake 750ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.launchRow.isInvalid.isShaking .input {
border-color: rgba(239, 68, 68, 0.98);
}
.catWrap {
opacity: 0.85;
transition: opacity 180ms ease, filter 180ms ease;
}
.brandRow:not(.introOn) .catWrap,
.brandRow:not(.introOn) .brandText {
opacity: 0;
}
.brandRow.introOn .brandText {
animation: titleIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.brandRow.introOn .jpTitle {
animation: none;
}
.brandRow.introOn .catWrap {
animation: catIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 260ms;
}
.catWrap.isRunning {
opacity: 1;
filter: drop-shadow(0 24px 70px rgba(0, 0, 0, 0.75));
}
.catLottie {
width: 220px;
height: 220px;
}
@keyframes jpPop {
0% { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(0.5px); }
60% { opacity: 1; transform: translateY(-2px) scale(1.01); filter: blur(0px); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes titleIn {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes subIn {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes catIn {
0% { opacity: 0; transform: translateX(24px) scale(0.98); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes inputShake {
0% { transform: translateX(0); }
10% { transform: translateX(-10px); }
20% { transform: translateX(10px); }
30% { transform: translateX(-9px); }
40% { transform: translateX(9px); }
50% { transform: translateX(-7px); }
60% { transform: translateX(7px); }
70% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
90% { transform: translateX(-3px); }
100% { transform: translateX(0); }
}
@keyframes jpFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.jpChar,
.brandRow.introOn .jpTitle,
.brandRow.introOn .brandText,
.brandRow.introOn .catWrap {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Override: hide full cat when peeking cat should show */
.centerStack:has(.aiChatBar.hasMessages) .catWrap {
opacity: 0 !important;
}
.launchRow.isShaking .input {
animation: none !important;
}
.pBlock {
transition: none !important;
}
.pBlock.active {
animation: none !important;
}
.modalCard { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.input {
width: 100%;
padding: 12px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: rgba(12, 14, 28, 0.65);
color: var(--text);
outline: none;
}
.input:focus {
border-color: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}
/* removed: omnibox/advanced/status UI */
.btn {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.70);
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.98);
cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.09); }
.btn:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.btn.primary {
border-color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.14);
}
.btn.primary:hover {
background: rgba(255, 255, 255, 0.18);
}
/* removed: dog animation */
@media (max-width: 520px) {
.launchRow { flex-wrap: wrap; }
.brandRow { flex-direction: column; gap: 10px; }
.brandText { transform: none; max-width: 92vw; }
.catLottie { width: 200px; height: 200px; }
}
/* Network Panel Loading State */
.networkPanel.is-loading {
pointer-events: none;
}
.networkPanel.is-loading::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 100;
animation: pulse 1.5s ease-in-out infinite;
}
.networkPanel.is-loading::after {
content: 'Loading...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 101;
padding: 12px 24px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 8px;
color: #fbbf24;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}
/* Network Panel Status Badges */
.netStatusBadge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.netStatusBadge.complete {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
border: 1px solid rgba(74, 222, 128, 0.3);
}
.netStatusBadge.running {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.3);
animation: statusPulse 1.5s ease-in-out infinite;
}
.netStatusBadge.error {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.netStatusBadge.queued {
background: rgba(148, 163, 184, 0.15);
color: #94a3b8;
border: 1px solid rgba(148, 163, 184, 0.3);
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Config hint text */
.configHint {
display: block;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
margin-top: 4px;
}
/* ============================
SCORE LAB
============================ */
.scoreLab {
position: fixed;
inset: 0;
z-index: var(--z-score-lab);
display: none;
flex-direction: column;
background: linear-gradient(180deg, #0a0c14 0%, #070914 100%);
opacity: 0;
transition: opacity 300ms ease;
}
.scoreLab.open {
display: flex;
opacity: 1;
}
.scoreLabHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: rgba(0,0,0,0.3);
/* Tooltips must be able to overlay the header */
position: relative;
z-index: 1;
}
.scoreLabTitle {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 18px;
color: #fbbf24;
letter-spacing: 1px;
}
.scoreLabIcon { font-size: 24px; display: none; }
/* ========================================
UNIFIED PANEL BACK BUTTON
Themed back button for all panels
======================================== */
.panelBack {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--panel-accent-30, rgba(255,255,255,0.3));
border-radius: 8px;
background: var(--panel-accent-10, rgba(255,255,255,0.1));
color: var(--panel-accent, #fff);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 150ms ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.panelBack:hover {
background: var(--panel-accent-20, rgba(255,255,255,0.2));
border-color: var(--panel-accent-50, rgba(255,255,255,0.5));
transform: translateX(-3px);
box-shadow: 0 0 12px var(--panel-accent-30, rgba(255,255,255,0.3));
}
.panelBack .backArrow {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 150ms ease;
}
.panelBack .backArrow svg {
width: 18px;
height: 18px;
display: block;
}
.panelBack:hover .backArrow {
transform: translateX(-4px);
}
.panelBack .backLabel {
font-size: 12px;
opacity: 0.9;
letter-spacing: 1px;
}
/* Gold variant (Score Lab) */
.panelBack--gold {
--panel-accent: #fbbf24;
--panel-accent-10: rgba(251, 191, 36, 0.1);
--panel-accent-20: rgba(251, 191, 36, 0.2);
--panel-accent-30: rgba(251, 191, 36, 0.3);
--panel-accent-50: rgba(251, 191, 36, 0.5);
}
/* Cyan variant (Pathways) */
.panelBack--cyan {
--panel-accent: #22d3ee;
--panel-accent-10: rgba(34, 211, 238, 0.1);
--panel-accent-20: rgba(34, 211, 238, 0.2);
--panel-accent-30: rgba(34, 211, 238, 0.3);
--panel-accent-50: rgba(34, 211, 238, 0.5);
}
/* Sky variant (X Activity) */
.panelBack--sky {
--panel-accent: #22d3ee;
--panel-accent-10: rgba(34, 211, 238, 0.1);
--panel-accent-20: rgba(34, 211, 238, 0.2);
--panel-accent-30: rgba(34, 211, 238, 0.3);
--panel-accent-50: rgba(34, 211, 238, 0.5);
}
/* Emerald variant (Uploads) */
.panelBack--emerald {
--panel-accent: #34d399;
--panel-accent-10: rgba(52, 211, 153, 0.1);
--panel-accent-20: rgba(52, 211, 153, 0.2);
--panel-accent-30: rgba(52, 211, 153, 0.3);
--panel-accent-50: rgba(52, 211, 153, 0.5);
}
/* Magenta variant (Dagota) */
.panelBack--magenta {
--panel-accent: #f0abfc;
--panel-accent-10: rgba(240, 171, 252, 0.1);
--panel-accent-20: rgba(240, 171, 252, 0.2);
--panel-accent-30: rgba(240, 171, 252, 0.3);
--panel-accent-50: rgba(240, 171, 252, 0.5);
}
.panelBack--rose {
--panel-accent: #fda4af;
--panel-accent-10: rgba(253, 164, 175, 0.1);
--panel-accent-20: rgba(253, 164, 175, 0.2);
--panel-accent-30: rgba(253, 164, 175, 0.3);
--panel-accent-50: rgba(253, 164, 175, 0.5);
}
:root[data-theme="light"] .panelBack {
border-color: rgba(15, 23, 42, 0.14);
background: rgba(255, 255, 255, 0.75);
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .panelBack:hover {
background: rgba(15, 23, 42, 0.04);
box-shadow: none;
}
.scoreLabClose {
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: background 200ms, color 200ms;
}
.scoreLabClose svg {
width: 14px;
height: 14px;
}
.scoreLabClose:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
/* Score Lab Footer - fixed horizontal bar at absolute bottom */
.scoreLabFooter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: rgba(25, 25, 30, 0.98);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.5);
z-index: 99999; /* Below expanded chat but container for collapsed chat */
}
.footerBrand {
font-weight: 700;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
}
.footerDivider {
opacity: 0.3;
}
.footerText {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.footerVersion {
font-family: 'SF Mono', 'Monaco', monospace;
font-size: 10px;
padding: 2px 6px;
background: rgba(255,255,255,0.05);
border-radius: 4px;
}
:root[data-theme="light"] .scoreLab {
background: linear-gradient(180deg, #f8f9fc 0%, #f2f4f9 100%);
}
:root[data-theme="light"] .scoreLabHeader {
background: rgba(255, 255, 255, 0.9);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .scoreLabTitle {
color: #b45309;
}
:root[data-theme="light"] .scoreLabClose {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .scoreLabClose:hover {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
:root[data-theme="light"] .scoreLabFooter {
background: rgba(255, 255, 255, 0.95);
border-top-color: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .footerBrand {
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .footerVersion {
background: rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .scoreLabBody {
color: #0f172a;
background: #f3f4f8;
}
:root[data-theme="light"] .scoreLabLeft,
:root[data-theme="light"] .explainPanel,
:root[data-theme="light"] .controlsPanel,
:root[data-theme="light"] .breakdownPanel,
:root[data-theme="light"] .shapeCard {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .scoreLabSubtitle {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .scoreSearchInput {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
color: #0f172a;
}
:root[data-theme="light"] .scoreSearchInput::placeholder {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .recordCount {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-row {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .sl-row:hover {
background: #f1f5f9;
}
:root[data-theme="light"] .sl-row.selected {
background: #fff7ed;
border-color: rgba(249, 115, 22, 0.35);
}
:root[data-theme="light"] .sl-rank {
background: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sl-name {
color: #0f172a;
}
:root[data-theme="light"] .sl-meta {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-score {
color: #b45309;
}
:root[data-theme="light"] .rankingList {
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
padding: 6px;
}
:root[data-theme="light"] .loadMoreBtn {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .loadMoreBtn:hover {
background: rgba(15, 23, 42, 0.1);
color: #0f172a;
}
:root[data-theme="light"] .sl-loading,
:root[data-theme="light"] .sl-error,
:root[data-theme="light"] .sl-explain-empty {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-empty {
color: rgba(15, 23, 42, 0.6);
background: #f8fafc;
border: 1px dashed rgba(15, 23, 42, 0.15);
border-radius: 14px;
margin: 16px;
}
:root[data-theme="light"] .sl-empty-icon {
opacity: 0.4;
}
:root[data-theme="light"] .sl-breakdown-header {
background: #f8fafc;
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-breakdown-name {
color: #0f172a;
}
:root[data-theme="light"] .sl-breakdown-total-label {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-breakdown-total-num {
color: #b45309;
}
:root[data-theme="light"] .sl-explain-header {
background: rgba(248, 250, 252, 0.9);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-explain-name {
color: #0f172a;
}
:root[data-theme="light"] .sl-explain-total-label {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-explain-total-value {
color: #b45309;
}
:root[data-theme="light"] .sl-explain-summary {
background: rgba(251, 191, 36, 0.16);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-formula-part {
color: #0f172a;
}
:root[data-theme="light"] .sl-formula-op,
:root[data-theme="light"] .sl-formula-eq,
:root[data-theme="light"] .sl-explain-formula-labels {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-overlaps-title {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .sl-overlap-card {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-overlap-company {
color: #0f172a;
}
:root[data-theme="light"] .sl-overlap-details,
:root[data-theme="light"] .sl-overlap-people {
background: #f8fafc;
}
:root[data-theme="light"] .sl-contrib-label {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .sl-contrib-detail {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-contrib-points.tenure { color: #15803d; }
:root[data-theme="light"] .sl-contrib-points.level { color: #1d4ed8; }
:root[data-theme="light"] .sl-contrib-points.function { color: #6d28d9; }
:root[data-theme="light"] .sl-contrib-points.connection { color: #c2410c; }
:root[data-theme="light"] .sl-contrib-points.active { color: #16a34a; }
:root[data-theme="light"] .sl-contrib-points.repeat { color: #be185d; }
:root[data-theme="light"] .sl-contrib-points.recency { color: #0369a1; }
:root[data-theme="light"] .sl-contrib-points.total {
color: #b45309;
}
:root[data-theme="light"] .sl-overlaps-title {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sl-overlap-score {
color: #15803d;
}
:root[data-theme="light"] .sl-overlaps-collapsible > summary.sl-overlaps-title {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .sl-overlaps-collapsible > summary.sl-overlaps-title::before {
opacity: 0.6;
}
:root[data-theme="light"] .sl-overlap-card {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-oc-company {
color: #0f172a;
}
:root[data-theme="light"] .sl-oc-score {
color: #15803d;
}
:root[data-theme="light"] .sl-oc-details,
:root[data-theme="light"] .sl-oc-roles,
:root[data-theme="light"] .sl-oc-chips {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sl-oc-detail {
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .sl-detail-text,
:root[data-theme="light"] .sl-person-info {
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .sl-person-label,
:root[data-theme="light"] .sl-calc-label,
:root[data-theme="light"] .sl-calc-detail {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .controlsPanel {
background: #ffffff;
}
:root[data-theme="light"] .sl-controls-tabs {
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-tab {
background: rgba(15, 23, 42, 0.05);
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .sl-tab:hover {
background: rgba(15, 23, 42, 0.09);
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .sl-tab.active {
background: rgba(251, 191, 36, 0.2);
border-color: rgba(251, 191, 36, 0.5);
color: #b45309;
}
:root[data-theme="light"] .sl-control-section-title {
color: rgba(15, 23, 42, 0.55);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-control-section {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
padding: 10px;
}
:root[data-theme="light"] .sl-control-row label {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .sl-control-row input[type="range"] {
background: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .sl-control-value {
color: #b45309;
}
:root[data-theme="light"] .sl-bucket-hint {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .sl-bucket-row {
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .sl-bucket-name {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .sl-bucket-range {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .sl-bucket-input {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
color: #b45309;
}
:root[data-theme="light"] .sl-bucket-hint-small {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .sl-preview-bar {
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .sl-preview-mult {
color: #0f172a;
}
:root[data-theme="light"] .sl-control-hint {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sl-bool-toggle.off {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .sl-match-mode {
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
padding: 6px;
}
:root[data-theme="light"] .sl-mode-btn {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .sl-mode-btn:hover {
background: #f1f5f9;
border-color: rgba(15, 23, 42, 0.2);
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .sl-mode-btn.active {
background: #dcfce7;
border-color: rgba(22, 163, 74, 0.35);
color: #166534;
}
:root[data-theme="light"] .sl-function-groups {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .sl-function-groups summary {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .sl-function-groups summary:hover {
background: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.9);
}
:root[data-theme="light"] .sl-function-groups[open] summary {
border-bottom-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .sl-fg-item {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .sl-fg-item:hover {
background: #f1f5f9;
border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .sl-fg-name {
color: #0f766e;
}
:root[data-theme="light"] .sl-fg-desc {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .formula-builder {
background: #ffffff;
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .formula-label {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .formula-term {
background: #fff7ed;
border-color: #fdba74;
color: #b45309;
text-shadow: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .formula-term-anno {
color: rgba(180, 83, 9, 0.85);
}
:root[data-theme="light"] .formula-term:hover {
background: #ffedd5;
border-color: #f97316;
box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}
:root[data-theme="light"] .formula-aggregate-hint {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .formula-op.op-add {
background: #ecfdf5;
border-color: #86efac;
color: #16a34a;
text-shadow: none;
}
:root[data-theme="light"] .formula-op.op-add:hover {
box-shadow: 0 0 10px rgba(22, 163, 74, 0.25);
background: #dcfce7;
}
:root[data-theme="light"] .formula-op.op-mult {
background: #f5f3ff;
border-color: #c4b5fd;
color: #7c3aed;
text-shadow: none;
}
:root[data-theme="light"] .formula-op.op-mult:hover {
box-shadow: 0 0 10px rgba(124, 58, 237, 0.2);
background: #ede9fe;
}
:root[data-theme="light"] .formula-paren {
color: rgba(15, 23, 42, 0.45);
text-shadow: none;
}
:root[data-theme="light"] .formula-paren:hover {
color: rgba(15, 23, 42, 0.8);
text-shadow: none;
}
:root[data-theme="light"] .formula-btn {
background: #f1f5f9;
border-color: #e2e8f0;
color: #475569;
}
:root[data-theme="light"] .formula-btn:hover {
background: #e2e8f0;
border-color: #cbd5f5;
color: #1f2937;
}
:root[data-theme="light"] .formula-hint {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .sl-mode-toggle {
background: #f1f5f9;
border-color: #e2e8f0;
color: #64748b;
}
:root[data-theme="light"] .sl-mode-toggle.mult {
color: #7c3aed;
border-color: #c4b5fd;
}
:root[data-theme="light"] .sl-mode-toggle.add {
color: #16a34a;
border-color: #86efac;
}
:root[data-theme="light"] .sl-prod-badge {
background: #dcfce7;
color: #166534;
}
:root[data-theme="light"] .sl-exp-badge {
background: #fef3c7;
color: #b45309;
}
:root[data-theme="light"] .sl-chip {
background: #f1f5f9;
color: #475569;
}
:root[data-theme="light"] .sl-chip.tenure { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .sl-chip.connection { background: #ffedd5; color: #c2410c; }
:root[data-theme="light"] .sl-chip.level { background: #dbeafe; color: #1d4ed8; }
:root[data-theme="light"] .sl-chip.function { background: #ede9fe; color: #6d28d9; }
:root[data-theme="light"] .sl-chip.active { background: #bbf7d0; color: #166534; }
:root[data-theme="light"] .sl-chip.recency { background: #e0f2fe; color: #0369a1; }
:root[data-theme="light"] .sl-control-row input[type="range"]::-webkit-slider-thumb {
background: #0ea5e9;
box-shadow: 0 0 6px rgba(14, 165, 233, 0.35);
}
:root[data-theme="light"] .sl-control-row input[type="range"]::-moz-range-thumb {
background: #0ea5e9;
}
:root[data-theme="light"] .sl-control-value {
color: #b45309;
}
:root[data-theme="light"] .sl-controls-reset {
background: #fee2e2;
border-color: #fecaca;
color: #b91c1c;
}
:root[data-theme="light"] .sl-controls-reset:hover {
background: #fecaca;
}
:root[data-theme="light"] .sl-controls-body {
color: #0f172a;
}
:root[data-theme="light"] .sl-production-term {
border-left-color: rgba(22, 163, 74, 0.35);
}
:root[data-theme="light"] .sl-experimental-term {
border-left-color: rgba(245, 158, 11, 0.35);
}
:root[data-theme="light"] .shapeCardTitle,
:root[data-theme="light"] .shapeSectionTitle {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .histogramAxis,
:root[data-theme="light"] .histogramStats {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .histogramStats strong {
color: #0f172a;
}
:root[data-theme="light"] .dominanceStats {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .dominanceStats strong {
color: #b45309;
}
:root[data-theme="light"] .heatmapAxis,
:root[data-theme="light"] .heatmapYAxis {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .contribLabel {
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .contribBarWrap {
background: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .thermoTube,
:root[data-theme="light"] .thermoTube::after {
background: #f1f5f9;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.15);
}
:root[data-theme="light"] .shapeCardTitle,
:root[data-theme="light"] .shapeSectionTitle {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .histogramAxis,
:root[data-theme="light"] .histogramStats {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .contribBarWrap {
background: #e2e8f0;
}
:root[data-theme="light"] .contribLabel {
color: rgba(15, 23, 42, 0.75);
}
.searchBox { display: flex; }
.scoreSearchInput {
flex: 1;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 14px;
}
.scoreSearchInput::placeholder { color: rgba(255,255,255,0.4); }
.scoreSearchInput:focus { outline: none; border-color: #fbbf24; }
.recordCount {
font-size: 12px;
color: rgba(255,255,255,0.5);
padding: 0 4px;
}
.rankingList {
flex: 1;
overflow-y: auto;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
background: rgba(0,0,0,0.3);
}
.rank-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: background 150ms;
}
.rank-row:hover { background: rgba(255,255,255,0.05); }
.rank-row.selected { background: rgba(251,191,36,0.15); }
.rank-num {
width: 36px;
font-weight: 700;
font-size: 13px;
color: rgba(255,255,255,0.5);
text-align: right;
}
.rank-ids {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
font-family: ui-monospace, monospace;
font-size: 12px;
color: rgba(255,255,255,0.8);
min-width: 0;
}
.rank-ids .arrow { color: rgba(255,255,255,0.3); }
.rank-ids .id1, .rank-ids .id2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score {
font-weight: 700;
font-size: 14px;
color: #fbbf24;
min-width: 60px;
text-align: right;
}
.rank-delta {
font-size: 12px;
min-width: 50px;
text-align: right;
}
.rank-delta.up { color: #22c55e; }
.rank-delta.down { color: #ef4444; }
.rank-error {
padding: 40px 20px;
text-align: center;
color: rgba(255,255,255,0.5);
}
.loadMoreBtn {
padding: 10px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.7);
font-size: 13px;
cursor: pointer;
transition: background 200ms;
}
.loadMoreBtn:hover { background: rgba(255,255,255,0.1); }
.paramsPanel, .breakdownPanel {
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
background: rgba(0,0,0,0.3);
}
.params-header, .breakdown-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.params-title, .breakdown-title {
font-weight: 700;
font-size: 14px;
color: #fbbf24;
letter-spacing: 0.5px;
}
.params-reset {
padding: 4px 10px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
background: transparent;
color: rgba(255,255,255,0.6);
font-size: 11px;
cursor: pointer;
}
.params-reset:hover { background: rgba(255,255,255,0.1); color: #fff; }
.params-group { margin-bottom: 12px; }
.params-group-title {
font-weight: 600;
font-size: 12px;
color: rgba(255,255,255,0.7);
margin-bottom: 6px;
}
.params-hint {
font-size: 11px;
color: rgba(255,255,255,0.4);
margin-bottom: 10px;
}
.param-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.param-row label {
flex: 1;
font-size: 12px;
color: rgba(255,255,255,0.7);
}
.param-row input[type="number"] {
width: 70px;
padding: 6px 8px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 13px;
text-align: right;
}
.param-row input:focus { outline: none; border-color: #fbbf24; }
.param-suffix {
font-size: 12px;
color: rgba(255,255,255,0.5);
width: 16px;
}
.breakdown-ids {
display: flex;
align-items: center;
gap: 6px;
font-family: ui-monospace, monospace;
font-size: 11px;
color: rgba(255,255,255,0.6);
}
.breakdown-section {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.breakdown-section.total { border-bottom: none; padding-top: 12px; }
.breakdown-label {
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.breakdown-value {
font-weight: 600;
font-size: 13px;
color: #fff;
}
.breakdown-value.changed .orig {
color: rgba(255,255,255,0.4);
text-decoration: line-through;
}
.breakdown-value .curr { color: #fbbf24; }
.breakdown-value .up { color: #22c55e; }
.breakdown-value .down { color: #ef4444; }
.breakdown-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 8px 0;
}
.breakdown-formula {
margin-top: 12px;
padding: 10px;
border-radius: 6px;
background: rgba(0,0,0,0.3);
text-align: center;
}
.breakdown-formula code {
font-family: ui-monospace, monospace;
font-size: 13px;
color: #fbbf24;
}
.breakdown-empty {
padding: 30px 20px;
text-align: center;
color: rgba(255,255,255,0.4);
font-size: 13px;
}
.scoreLabToggle { display: none; }
/* Score Breakdown Cards */
.bd-header { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.bd-title { font-size: 16px; font-weight: 600; color: #ffd700; }
.bd-summary { padding: 12px 0; }
.bd-srow { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.bd-srow span:first-child { color: rgba(255,255,255,0.6); }
.bd-srow span:last-child { font-weight: 600; color: #fff; }
.bd-srow.total { font-size: 15px; padding-top: 10px; }
.bd-srow.total span:last-child { color: #ffd700; font-size: 18px; }
.bd-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 8px 0; }
.bd-formula { text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 8px; font-family: monospace; }
.bd-overlaps { margin-top: 16px; }
.bd-otitle { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.overlap-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.oc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oc-num { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 600; }
.oc-band { font-size: 12px; padding: 2px 8px; background: rgba(255,215,0,0.15); color: #ffd700; border-radius: 4px; }
.oc-score { margin-left: auto; font-size: 16px; font-weight: 700; color: #ffd700; }
.oc-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.oc-row { display: flex; flex-direction: column; gap: 2px; }
.oc-label { font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.oc-val { font-size: 12px; color: #fff; font-weight: 500; }
.oc-val.yes { color: #4ade80; }
.oc-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.oc-person { font-size: 11px; color: rgba(255,255,255,0.8); }
.oc-plabel { color: rgba(255,255,255,0.5); }
.oc-formula { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }
.oc-frow { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.oc-flabel { color: rgba(255,255,255,0.5); min-width: 100px; }
.oc-fcalc { color: rgba(255,255,255,0.9); font-family: monospace; }
.oc-fcalc small { color: rgba(255,255,255,0.4); font-size: 10px; }
.oc-fcalc strong { color: #fff; }
.oc-frow.result .oc-fcalc strong { color: #ffd700; font-size: 14px; }
.oc-fcalc .mult { display: inline-block; padding: 2px 6px; margin: 0 2px; border-radius: 4px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); font-size: 11px; }
.oc-fcalc .mult.on { background: rgba(255,215,0,0.15); color: #ffd700; }
/* ═══════════════════════════════════════════════════════════════
SCORE LAB v3 - 3-Column Layout with Clear Point Breakdown
═══════════════════════════════════════════════════════════════ */
.scoreLabSubtitle {
font-size: 12px;
color: rgba(255,255,255,0.4);
font-weight: 400;
margin-left: 12px;
font-family: "M PLUS 1p", sans-serif;
}
.scoreLabBody {
flex: 1;
display: grid;
/* 3 columns: List | Breakdown | Controls */
grid-template-columns: 240px minmax(200px, 1fr) 380px;
gap: 14px;
padding: 16px;
padding-bottom: 52px; /* Space for footer (36px) + gap */
/* Clip column content to respect footer boundary */
overflow: hidden;
min-height: 0;
/* Tooltips need to appear above the header */
position: relative;
z-index: 10;
}
.scoreLabLeft {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
overflow: hidden;
background: rgba(0,0,0,0.4);
border-radius: 12px;
padding: 14px;
border: 1px solid rgba(255,255,255,0.08);
}
.scoreLabCenter {
display: flex;
flex-direction: column;
overflow: hidden;
}
.scoreLabRight {
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
/* Override legacy fixed width from earlier Score Lab styles */
width: auto;
}
/* Search Box */
.searchBox {
position: relative;
}
.scoreSearchInput {
width: 100%;
padding: 10px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: #fff;
font-size: 13px;
}
.scoreSearchInput:focus {
outline: none;
border-color: #fbbf24;
background: rgba(255,255,255,0.08);
}
.scoreSearchInput::placeholder {
color: rgba(255,255,255,0.4);
}
/* Record Count */
.recordCount {
font-size: 11px;
color: rgba(255,255,255,0.5);
padding: 0 4px;
}
/* Ranking List */
.rankingList {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.sl-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
cursor: pointer;
transition: all 150ms ease;
border: 1px solid transparent;
}
.sl-row:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.08);
}
.sl-row.selected {
background: rgba(251,191,36,0.1);
border-color: rgba(251,191,36,0.3);
}
.sl-rank {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.5);
}
.sl-row.selected .sl-rank {
background: rgba(251,191,36,0.2);
color: #fbbf24;
}
.sl-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sl-name {
font-size: 13px;
font-weight: 500;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sl-meta {
font-size: 11px;
color: rgba(255,255,255,0.4);
}
.sl-score {
font-size: 16px;
font-weight: 700;
color: #fbbf24;
min-width: 50px;
text-align: right;
}
/* Load More Button */
.loadMoreBtn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: rgba(255,255,255,0.7);
font-size: 12px;
cursor: pointer;
transition: all 150ms ease;
}
.loadMoreBtn:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
/* Loading/Error States */
.sl-loading, .sl-error {
padding: 40px 20px;
text-align: center;
color: rgba(255,255,255,0.5);
font-size: 14px;
}
.sl-loading-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
vertical-align: middle;
}
.sl-loading-icon svg {
width: 16px;
height: 16px;
display: block;
}
/* ─────────────────────────────────────────────────────────────
Explanation Panel
───────────────────────────────────────────────────────────── */
.explainPanel {
flex: 1;
overflow-y: auto;
background: rgba(0,0,0,0.25);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
}
.sl-explain-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 300px;
color: rgba(255,255,255,0.4);
text-align: center;
padding: 40px;
}
.sl-explain-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.sl-explain-empty-text {
font-size: 14px;
line-height: 1.6;
}
/* Header */
.sl-explain-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.2);
}
.sl-explain-name {
font-size: 20px;
font-weight: 600;
color: #fff;
}
.sl-explain-total {
text-align: right;
}
.sl-explain-total-label {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.sl-explain-total-value {
font-size: 32px;
font-weight: 700;
color: #fbbf24;
}
/* Summary Formula */
.sl-explain-summary {
padding: 16px 20px;
background: rgba(255,215,0,0.05);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sl-explain-formula {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sl-formula-part {
font-size: 18px;
font-weight: 600;
color: rgba(255,255,255,0.9);
}
.sl-formula-op {
font-size: 14px;
color: rgba(255,255,255,0.4);
}
.sl-formula-eq {
font-size: 14px;
color: rgba(255,255,255,0.4);
}
.sl-formula-result {
font-size: 20px;
font-weight: 700;
color: #fbbf24;
}
.sl-explain-formula-labels {
display: flex;
justify-content: center;
gap: 48px;
margin-top: 8px;
font-size: 11px;
color: rgba(255,255,255,0.4);
}
/* Overlaps Title */
.sl-overlaps-title {
padding: 16px 20px 12px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Overlap Card */
.sl-overlap-card {
margin: 0 16px 12px;
padding: 16px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.sl-overlap-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.sl-overlap-company {
font-size: 15px;
font-weight: 600;
color: #fff;
}
.sl-overlap-score {
font-size: 18px;
font-weight: 700;
color: #4ade80;
}
/* Overlap Details */
.sl-overlap-details {
display: flex;
gap: 20px;
margin-bottom: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
}
.sl-overlap-detail {
display: flex;
align-items: center;
gap: 6px;
}
.sl-detail-icon {
font-size: 14px;
}
.sl-detail-text {
font-size: 12px;
color: rgba(255,255,255,0.8);
}
/* Overlap People */
.sl-overlap-people {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
}
.sl-overlap-person {
display: flex;
flex-direction: column;
gap: 2px;
}
.sl-person-label {
font-size: 10px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sl-person-info {
font-size: 12px;
color: rgba(255,255,255,0.9);
}
/* Overlap Calculation */
.sl-overlap-calc {
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 12px;
}
.sl-calc-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 6px 0;
}
.sl-calc-label {
width: 100px;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
.sl-calc-value {
font-size: 14px;
font-weight: 600;
color: #fff;
min-width: 50px;
}
.sl-calc-detail {
font-size: 11px;
color: rgba(255,255,255,0.4);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sl-calc-row.result {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.sl-calc-row.result .sl-calc-value {
color: #4ade80;
font-size: 16px;
}
/* Multipliers */
.sl-calc-multipliers {
padding: 8px 0;
}
.sl-calc-multipliers .sl-calc-label {
margin-bottom: 8px;
}
.sl-multiplier-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-left: 112px;
}
.sl-multiplier {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255,215,0,0.1);
border: 1px solid rgba(255,215,0,0.2);
border-radius: 6px;
}
.sl-mult-badge {
font-size: 12px;
font-weight: 700;
color: #fbbf24;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sl-mult-label {
font-size: 12px;
color: rgba(255,255,255,0.9);
font-weight: 500;
}
.sl-mult-detail {
font-size: 10px;
color: rgba(255,255,255,0.5);
margin-left: 4px;
}
/* Multiplier Types */
.sl-multiplier.sameFunction {
background: rgba(139,92,246,0.15);
border-color: rgba(139,92,246,0.3);
}
.sl-multiplier.sameFunction .sl-mult-badge {
color: #a78bfa;
}
.sl-multiplier.similarLevel {
background: rgba(59,130,246,0.15);
border-color: rgba(59,130,246,0.3);
}
.sl-multiplier.similarLevel .sl-mult-badge {
color: #60a5fa;
}
.sl-multiplier.currentlyActive {
background: rgba(34,197,94,0.15);
border-color: rgba(34,197,94,0.3);
}
.sl-multiplier.currentlyActive .sl-mult-badge {
color: #4ade80;
}
/* ─────────────────────────────────────────────────────────────
Parameters Section (Collapsible)
───────────────────────────────────────────────────────────── */
.sl-params-section {
margin: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 16px;
}
.sl-params-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: rgba(255,255,255,0.7);
font-size: 13px;
cursor: pointer;
transition: all 150ms ease;
}
.sl-params-toggle:hover {
background: rgba(255,255,255,0.06);
color: #fff;
}
.sl-params-toggle-icon {
font-size: 10px;
color: rgba(255,255,255,0.4);
}
.sl-params-body {
margin-top: 16px;
padding: 16px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
}
.sl-params-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.sl-param-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.sl-param-title {
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.sl-param-row {
display: flex;
align-items: center;
gap: 8px;
}
.sl-param-row label {
flex: 1;
font-size: 12px;
color: rgba(255,255,255,0.7);
}
.sl-param-row input[type="number"] {
width: 60px;
padding: 6px 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
color: #fff;
font-size: 12px;
text-align: right;
}
.sl-param-row input:focus {
outline: none;
border-color: #fbbf24;
}
.sl-param-suffix {
font-size: 11px;
color: rgba(255,255,255,0.4);
width: 12px;
}
.sl-params-reset {
display: block;
width: 100%;
margin-top: 16px;
padding: 10px;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.2);
border-radius: 8px;
color: #f87171;
font-size: 12px;
cursor: pointer;
transition: all 150ms ease;
}
.sl-params-reset:hover {
background: rgba(239,68,68,0.2);
}
/* ═══════════════════════════════════════════════════════════════
SCORE LAB v3 - Breakdown Panel (Center Column)
═══════════════════════════════════════════════════════════════ */
.breakdownPanel {
flex: 1;
overflow-y: auto;
background: rgba(0,0,0,0.35);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
}
.sl-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 400px;
color: rgba(255,255,255,0.4);
text-align: center;
padding: 40px;
}
.sl-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.sl-empty-icon svg {
width: 40px;
height: 40px;
display: block;
}
/* Breakdown Header */
.sl-breakdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.3);
}
.sl-breakdown-name {
font-size: 22px;
font-weight: 600;
color: #fff;
}
.sl-breakdown-total {
text-align: right;
}
.sl-breakdown-total-num {
font-size: 42px;
font-weight: 800;
color: #fbbf24;
line-height: 1;
}
.sl-breakdown-total-label {
font-size: 12px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Point Contributions - The Main Feature */
.sl-contributions {
padding: 20px 24px;
}
.sl-contrib-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sl-contrib-row:last-of-type {
border-bottom: none;
}
.sl-contrib-points {
font-size: 26px;
font-weight: 800;
width: 70px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Point contribution colors by type */
.sl-contrib-points.tenure { color: #34d399; }
.sl-contrib-points.level { color: #60a5fa; }
.sl-contrib-points.function { color: #a78bfa; }
.sl-contrib-points.connection { color: #fb923c; }
.sl-contrib-points.active { color: #4ade80; }
.sl-contrib-points.repeat { color: #f472b6; }
.sl-contrib-points.recency { color: #38bdf8; }
.sl-contrib-points.total {
color: #fbbf24;
font-size: 30px;
}
.sl-contrib-info {
flex: 1;
}
.sl-contrib-label {
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sl-contrib-detail {
font-size: 12px;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
.sl-contrib-total {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0 0;
margin-top: 8px;
border-top: 2px solid rgba(255,255,255,0.1);
}
/* Overlaps Section */
.sl-overlaps-section {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 16px 24px;
}
.sl-overlaps-title {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.5);
letter-spacing: 0.08em;
margin-bottom: 12px;
}
/* Work History collapsed by default (details/summary wrapper) */
.sl-overlaps-collapsible > summary.sl-overlaps-title {
cursor: pointer;
user-select: none;
margin-bottom: 0;
list-style: none;
}
.sl-overlaps-collapsible > summary.sl-overlaps-title::-webkit-details-marker {
display: none;
}
.sl-overlaps-collapsible > summary.sl-overlaps-title::before {
content: "▸ ";
display: inline-block;
transform: translateY(-0.5px);
opacity: 0.8;
}
.sl-overlaps-collapsible[open] > summary.sl-overlaps-title::before {
content: "▾ ";
}
.sl-overlaps-collapsible > .sl-overlaps-list {
margin-top: 12px;
}
.sl-overlaps-list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Overlap Card - Collapsible */
.sl-overlap-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
transition: all 150ms ease;
overflow: hidden;
}
.sl-overlap-card:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.12);
}
.sl-oc-header {
display: flex;
align-items: center;
padding: 12px 14px;
cursor: pointer;
user-select: none;
}
.sl-oc-toggle {
font-size: 10px;
color: rgba(255,255,255,0.4);
margin-right: 10px;
transition: transform 150ms ease;
}
.sl-overlap-card:not(.collapsed) .sl-oc-toggle {
transform: rotate(90deg);
}
.sl-oc-company {
flex: 1;
font-size: 14px;
font-weight: 600;
color: #fff;
}
.sl-oc-score {
font-size: 16px;
font-weight: 700;
color: #4ade80;
}
/* Collapsible body */
.sl-oc-body {
padding: 0 14px 12px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 0;
}
.sl-overlap-card.collapsed .sl-oc-body {
display: none;
}
.sl-oc-details {
display: flex;
gap: 12px;
margin-bottom: 8px;
padding-top: 10px;
}
.sl-oc-detail {
font-size: 11px;
color: rgba(255,255,255,0.6);
display: inline-flex;
align-items: center;
gap: 6px;
}
.sl-oc-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-oc-icon svg {
width: 12px;
height: 12px;
display: block;
}
.sl-oc-detail--active {
color: rgba(34, 197, 94, 0.9);
}
.sl-oc-detail--past {
color: rgba(148, 163, 184, 0.7);
}
.sl-oc-roles {
display: flex;
gap: 16px;
font-size: 11px;
color: rgba(255,255,255,0.5);
margin-bottom: 8px;
padding: 6px 8px;
background: rgba(0,0,0,0.2);
border-radius: 4px;
}
.sl-oc-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sl-chip {
padding: 3px 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.sl-chip.tenure { background: rgba(52,211,153,0.15); color: #34d399; }
.sl-chip.connection { background: rgba(251,146,60,0.15); color: #fb923c; }
.sl-chip.level { background: rgba(96,165,250,0.15); color: #60a5fa; }
.sl-chip.function { background: rgba(167,139,250,0.15); color: #a78bfa; }
.sl-chip.active { background: rgba(74,222,128,0.15); color: #4ade80; }
.sl-chip.recency { background: rgba(56,189,248,0.15); color: #38bdf8; }
/* ═══════════════════════════════════════════════════════════════
SCORE LAB v3 - Controls Panel (Right Column)
═══════════════════════════════════════════════════════════════ */
.controlsPanel {
flex: 1;
overflow-y: auto;
background: rgba(0,0,0,0.35);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
padding: 14px;
}
/* Tabs */
.sl-controls-tabs {
display: flex;
gap: 6px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sl-tab {
flex: 1;
padding: 8px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
color: rgba(255,255,255,0.6);
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: all 150ms ease;
}
.sl-tab-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-tab-icon svg {
width: 14px;
height: 14px;
display: block;
}
.sl-tab:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
}
.sl-tab.active {
background: rgba(251,191,36,0.15);
border-color: rgba(251,191,36,0.3);
color: #fbbf24;
}
/* Production/Experimental badges */
.sl-prod-badge {
font-size: 9px;
padding: 2px 5px;
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
border-radius: 3px;
margin-left: 6px;
font-weight: 700;
letter-spacing: 0.5px;
}
.sl-exp-badge {
font-size: 9px;
padding: 2px 5px;
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
border-radius: 3px;
margin-left: 6px;
font-weight: 700;
letter-spacing: 0.5px;
}
.sl-production-term {
border-left: 3px solid rgba(34, 197, 94, 0.4);
padding-left: 10px;
}
.sl-experimental-term {
border-left: 3px solid rgba(251, 191, 36, 0.3);
padding-left: 10px;
opacity: 0.85;
}
/* Boolean toggle buttons */
.sl-toggle-row {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.sl-bool-toggle {
padding: 4px 10px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
transition: all 150ms ease;
font-weight: 500;
}
.sl-bool-toggle.on {
background: rgba(34, 197, 94, 0.2);
border: 1px solid rgba(34, 197, 94, 0.4);
color: #22c55e;
}
.sl-bool-toggle.off {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
}
.sl-bool-toggle:hover {
transform: translateY(-1px);
}
/* Controls buttons layout */
.sl-controls-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.sl-reset-production {
background: rgba(34, 197, 94, 0.15) !important;
border-color: rgba(34, 197, 94, 0.3) !important;
color: #22c55e !important;
}
.sl-reset-production:hover {
background: rgba(34, 197, 94, 0.25) !important;
}
.sl-reset-experimental {
background: rgba(251, 191, 36, 0.15) !important;
border-color: rgba(251, 191, 36, 0.3) !important;
color: #fbbf24 !important;
}
.sl-reset-experimental:hover {
background: rgba(251, 191, 36, 0.25) !important;
}
/* Exists chip styling */
.sl-chip.exists {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.sl-controls-reset {
padding: 8px 10px;
background: rgba(239,68,68,0.15);
border: 1px solid rgba(239,68,68,0.3);
border-radius: 6px;
color: #f87171;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 150ms ease;
}
.sl-reset-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-reset-icon svg {
width: 12px;
height: 12px;
display: block;
}
.sl-controls-reset:hover {
background: rgba(239,68,68,0.25);
}
.sl-controls-body {
display: block;
overflow-y: auto;
max-height: calc(100vh - 280px); /* Allow scrolling within tab content */
}
.sl-controls-body.hidden {
display: none;
}
.sl-control-section {
margin-bottom: 18px;
}
.sl-control-section-title {
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sl-control-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.sl-control-row label {
flex: 1;
font-size: 12px;
color: rgba(255,255,255,0.7);
min-width: 80px;
}
.sl-control-row input[type="range"] {
flex: 2;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.1);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.sl-control-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fbbf24;
cursor: pointer;
box-shadow: 0 0 6px rgba(251,191,36,0.4);
}
.sl-control-row input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #fbbf24;
cursor: pointer;
border: none;
}
.sl-control-value {
min-width: 40px;
font-size: 12px;
font-weight: 600;
color: #fbbf24;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Bucket Configuration */
.sl-bucket-hint {
font-size: 11px;
color: rgba(255,255,255,0.4);
margin-bottom: 12px;
line-height: 1.4;
}
.sl-bucket-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sl-bucket-row:last-child {
border-bottom: none;
}
.sl-bucket-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.sl-bucket-name {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.9);
}
.sl-bucket-range {
font-size: 11px;
color: rgba(255,255,255,0.4);
font-variant-numeric: tabular-nums;
}
.sl-bucket-input {
width: 80px;
padding: 6px 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
color: #fbbf24;
font-size: 13px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.sl-bucket-input:focus {
outline: none;
border-color: #fbbf24;
}
.sl-bucket-hint-small {
font-size: 11px;
color: rgba(255,255,255,0.3);
font-style: italic;
}
/* Bucket Preview Bar */
.sl-bucket-preview {
padding: 10px 0;
}
.sl-preview-bar {
display: flex;
height: 50px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
}
.sl-preview-segment {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px;
font-size: 9px;
font-weight: 600;
color: rgba(255,255,255,0.9);
min-width: 40px;
}
.sl-preview-segment.startup { background: rgba(52,211,153,0.3); }
.sl-preview-segment.small { background: rgba(96,165,250,0.3); }
.sl-preview-segment.medium { background: rgba(251,191,36,0.3); }
.sl-preview-segment.large { background: rgba(251,146,60,0.3); }
.sl-preview-segment.enterprise { background: rgba(239,68,68,0.3); }
.sl-preview-mult {
font-size: 11px;
font-weight: 700;
color: #fff;
}
/* Responsive - handled in Score Shape section below */
@media (max-width: 1200px) {
/* Moved to Score Shape section */
}
@media (max-width: 1000px) {
.scoreLabBody {
/* Keep list + controls side-by-side; hide breakdown to preserve space */
grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr);
}
.scoreLabLeft {
/* Avoid spanning across both columns (this caused “aspect ratio” weirdness) */
grid-column: auto;
max-height: none;
}
.scoreLabCenter {
display: none;
}
.scoreLabRight {
width: auto;
}
}
@media (max-width: 700px) {
.scoreLabBody {
grid-template-columns: 1fr;
}
.scoreLabLeft {
grid-column: 1;
max-height: none;
}
.scoreLabCenter {
display: none;
}
.scoreLabRight {
width: auto;
}
}
/* Score Lab - Control Hints */
.sl-control-hint {
font-size: 11px;
color: rgba(255,255,255,0.4);
margin-bottom: 10px;
padding: 6px 10px;
background: rgba(255,255,255,0.05);
border-radius: 6px;
text-align: center;
}
.sl-control-value.neutral { color: #888; }
.sl-control-value.penalty { color: #ff6b6b; }
.sl-control-value.bonus { color: #69db7c; }
/* Formula Builder - Tight & Polished */
.formula-builder {
background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 10px 16px 8px;
}
.formula-container {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.formula-label {
font-size: 10px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
}
.formula-tokens {
display: flex;
gap: 2px;
flex-wrap: wrap;
align-items: center;
font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}
/* Term tokens - compact pills */
.formula-term {
background: linear-gradient(135deg, rgba(251,191,36,0.25) 0%, rgba(251,191,36,0.15) 100%);
border: 1px solid rgba(251,191,36,0.5);
color: #fbbf24;
padding: 3px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
cursor: grab;
user-select: none;
transition: all 150ms ease;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
/* Term annotations (tasteful, small, helps reveal hidden ops like banding/conditions) */
.formula-term-label {
display: block;
line-height: 1.05;
}
.formula-term-anno {
display: block;
margin-top: 2px;
font-size: 9px;
letter-spacing: 0.02em;
opacity: 0.55;
color: rgba(251,191,36,0.95);
}
.formula-aggregate-hint {
margin-top: 6px;
font-size: 10px;
color: rgba(255,255,255,0.45);
letter-spacing: 0.02em;
}
.formula-term:hover {
background: linear-gradient(135deg, rgba(251,191,36,0.35) 0%, rgba(251,191,36,0.25) 100%);
border-color: rgba(251,191,36,0.7);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(251,191,36,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.formula-term.dragging { opacity: 0.5; cursor: grabbing; transform: scale(0.95); }
.formula-term.drag-over { border-color: #fff; background: rgba(255,255,255,0.2); }
/* Operators - styled circles */
.formula-op {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 50%;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 150ms ease;
margin: 0 2px;
}
/* Addition operator - green */
.formula-op.op-add {
background: rgba(34,197,94,0.2);
border: 1px solid rgba(34,197,94,0.5);
color: #4ade80;
text-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.formula-op.op-add:hover {
transform: scale(1.2);
box-shadow: 0 0 12px rgba(34,197,94,0.6);
background: rgba(34,197,94,0.3);
}
/* Multiplication operator - purple (avoid confusion with danger/error red) */
.formula-op.op-mult {
background: rgba(167,139,250,0.20);
border: 1px solid rgba(167,139,250,0.55);
color: #a78bfa;
text-shadow: 0 0 6px rgba(167,139,250,0.45);
}
.formula-op.op-mult:hover {
transform: scale(1.2);
box-shadow: 0 0 12px rgba(167,139,250,0.60);
background: rgba(167,139,250,0.28);
}
/* Parentheses - prominent brackets */
.formula-paren {
color: rgba(96,165,250,0.6);
font-size: 22px;
font-weight: 400;
cursor: pointer;
padding: 0 1px;
line-height: 1;
transition: all 150ms ease;
text-shadow: 0 0 4px rgba(96,165,250,0.3);
}
.formula-paren:hover {
color: rgba(96,165,250,1);
text-shadow: 0 0 12px rgba(96,165,250,0.6);
transform: scale(1.1);
}
/* Actions row */
.formula-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
.formula-btn {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.6);
padding: 3px 8px;
border-radius: 3px;
font-size: 10px;
cursor: pointer;
transition: all 150ms ease;
}
.formula-btn:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
color: #fff;
}
.formula-hint {
font-size: 9px;
color: rgba(255,255,255,0.3);
margin-top: 4px;
letter-spacing: 0.3px;
}
/* Mode Toggle Buttons */
.sl-mode-toggle {
width: 28px;
height: 24px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 4px;
background: rgba(0,0,0,0.4);
color: #fff;
font-weight: bold;
font-size: 14px;
cursor: pointer;
margin-left: 6px;
transition: all 0.2s;
flex-shrink: 0;
}
.sl-mode-toggle:hover {
border-color: #f4d03f;
background: rgba(244, 208, 63, 0.2);
}
.sl-mode-toggle.mult {
color: #f4d03f;
border-color: rgba(244, 208, 63, 0.5);
}
.sl-mode-toggle.add {
color: #69db7c;
border-color: rgba(105, 219, 124, 0.5);
}
/* Control row layout fix for toggles */
.sl-control-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.sl-control-row label {
flex: 0 0 100px;
font-size: 12px;
color: rgba(255,255,255,0.7);
}
.sl-control-row input[type="range"] {
flex: 1;
}
.sl-control-value {
min-width: 50px;
text-align: right;
font-size: 12px;
color: #f4d03f;
font-family: monospace;
}
/* Improved Formula Builder - Dropzones */
.formula-paren-group {
display: inline-flex;
align-items: center;
background: rgba(255,107,107,0.15);
border: 1px dashed rgba(255,107,107,0.4);
border-radius: 4px;
padding: 2px 4px;
cursor: grab;
}
.formula-paren-group:hover {
border-color: rgba(255,107,107,0.7);
background: rgba(255,107,107,0.25);
}
.formula-paren-group.dragging {
opacity: 0.5;
cursor: grabbing;
}
.formula-paren-group.drag-over {
border-color: #fff;
background: rgba(255,255,255,0.2);
}
.formula-paren-group .formula-paren {
cursor: pointer;
}
.formula-paren-group .formula-term {
margin: 0 2px;
}
/* Hide dropzones by default - only show during drag */
.formula-dropzone {
width: 12px;
min-width: 12px;
height: 28px;
background: transparent;
border: 1px dashed transparent;
border-radius: 4px;
margin: 0 1px;
opacity: 0;
transition: all 0.15s;
}
.formula-tokens.dragging .formula-dropzone {
opacity: 1;
background: rgba(244, 208, 63, 0.15);
border-color: rgba(244, 208, 63, 0.4);
}
.formula-dropzone.active {
opacity: 1 !important;
width: 20px;
background: rgba(244, 208, 63, 0.5);
border-color: #f4d03f;
box-shadow: 0 0 10px rgba(244, 208, 63, 0.6);
}
/* Mode toggle buttons: avoid extra horizontal overflow */
.sl-mode-toggle {
margin-left: 0;
}
/* ═══════════════════════════════════════════════════════════════════
SCORE SHAPE PANEL (4th Column)
═══════════════════════════════════════════════════════════════════ */
.scoreLabShape {
display: flex;
flex-direction: column;
min-width: 0;
overflow-y: auto;
/* Allow tooltips to render outside the column without being clipped. */
overflow-x: visible;
position: relative;
z-index: 10;
}
.shapeCard {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
.shapeCardHeader {
display: flex;
justify-content: flex-start;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.shapeCardTitle {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.shapeCardDots {
display: none;
}
.shapeSection {
display: flex;
flex-direction: column;
gap: 10px;
}
.shapeSectionSplit {
display: flex;
flex-direction: column;
gap: 16px;
}
.shapeSectionHalf {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.shapeSectionTitle {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ─────────────────────────────────────────────────────────────────
HISTOGRAM - Faithful to reference
───────────────────────────────────────────────────────────────── */
.scoreHistogram {
display: flex;
align-items: flex-end;
gap: 1px;
height: 140px;
padding: 0;
background: transparent;
}
.histBar {
flex: 1;
min-width: 5px;
max-width: 12px;
background: linear-gradient(to top,
#8b6914 0%,
#b8860b 20%,
#c9a227 40%,
#daa520 60%,
#e6c840 80%,
#f0d860 100%
);
border-radius: 1px 1px 0 0;
transition: height 0.3s ease;
position: relative;
}
.histBar:hover {
filter: brightness(1.15);
}
.histBar.highlight {
background: linear-gradient(to top,
#a67c00 0%,
#c9a020 20%,
#dab030 40%,
#e8c840 60%,
#f4d850 80%,
#ffe070 100%
);
}
.histBar.peak {
background: linear-gradient(to top,
#b8860b 0%,
#d4a020 20%,
#e8b830 40%,
#f4c840 60%,
#ffd700 80%,
#ffec8b 100%
);
}
.histogramAxis {
display: flex;
justify-content: space-between;
padding: 8px 0 0;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.histogramStats {
display: flex;
align-items: center;
gap: 12px;
padding-top: 10px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.histStatSep {
color: rgba(255, 255, 255, 0.25);
font-weight: 300;
}
.histogramStats strong {
color: #fff;
}
/* ─────────────────────────────────────────────────────────────────
DOMINANCE GAUGE - Speedometer style
───────────────────────────────────────────────────────────────── */
.dominanceGauge {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0 8px;
}
.gaugeSvg {
width: 100%;
max-width: 220px;
height: auto;
}
/* Gauge value is now rendered in SVG text element */
.gaugeValue {
display: none; /* Using SVG text instead */
}
.dominanceStats {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 220px;
padding: 0 8px;
padding: 6px 8px 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.dominanceStats strong {
color: #f0d040;
font-weight: 600;
}
/* ─────────────────────────────────────────────────────────────────
CONTRIBUTION HEATMAP - Faithful to reference
───────────────────────────────────────────────────────────────── */
.contributionHeatmap {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 2px;
padding: 4px 0;
}
.heatCell {
aspect-ratio: 1.2;
border-radius: 2px;
transition: transform 0.15s, filter 0.15s;
}
.heatCell:hover {
transform: scale(1.08);
filter: brightness(1.2);
z-index: 1;
}
/* Heatmap color scale - matching reference (greens, yellows, blues, purples) */
.heatCell.c1 { background: #2d4a3e; }
.heatCell.c2 { background: #3d6a4e; }
.heatCell.c3 { background: #5a8a5e; }
.heatCell.c4 { background: #7aaa6e; }
.heatCell.c5 { background: #9aca8e; }
.heatCell.c6 { background: #c4d87a; }
.heatCell.c7 { background: #dcc850; }
.heatCell.c8 { background: #e8b830; }
.heatCell.c9 { background: #d4a040; }
.heatCell.c10 { background: #b08850; }
/* Blues and purples for lower values */
.heatCell.c11 { background: #4a5a7a; }
.heatCell.c12 { background: #5a6a8a; }
.heatCell.c13 { background: #6a7a9a; }
.heatCell.c14 { background: #4a4a6a; }
.heatCell.c15 { background: #3a3a5a; }
.heatmapAxis {
display: flex;
justify-content: space-between;
font-size: 9px;
color: rgba(255, 255, 255, 0.35);
padding-top: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.heatmapYAxis {
position: absolute;
left: -24px;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 9px;
color: rgba(255, 255, 255, 0.35);
}
/* ─────────────────────────────────────────────────────────────────
CONTRIBUTION BARS - Amber/gold theme
───────────────────────────────────────────────────────────────── */
.contributionBars {
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px 0;
}
.contribRow {
display: flex;
align-items: center;
gap: 10px;
}
.contribLegend {
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
}
.contribLabel {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
width: 65px;
flex-shrink: 0;
}
.contribBarWrap {
flex: 1;
height: 16px;
background: rgba(50, 50, 50, 0.6);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.contribBar {
height: 100%;
border-radius: 2px;
transition: width 0.5s ease;
position: relative;
}
/* Gradient fills matching the breakdown panel colors */
.contribBar.exists {
background: linear-gradient(90deg, #0e7490, #22d3ee, #67e8f9);
}
.contribBar.tenure {
background: linear-gradient(90deg, #166534, #22c55e, #4ade80);
}
.contribBar.repeat {
background: linear-gradient(90deg, #92400e, #f59e0b, #fbbf24);
}
.contribBar.active {
background: linear-gradient(90deg, #1d4ed8, #3b82f6, #60a5fa);
}
.contribBar.level {
background: linear-gradient(90deg, #6d28d9, #8b5cf6, #a78bfa);
}
.contribBar.function {
background: linear-gradient(90deg, #b45309, #d97706, #f59e0b);
}
/* ─────────────────────────────────────────────────────────────────
SATURATION THERMOMETERS - Classic shape with bulb bottom
───────────────────────────────────────────────────────────────── */
.saturationPanel {
padding: 4px 0;
}
.thermometers {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 0 4px;
}
.thermometer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
}
/* Main tube */
.thermoTube {
width: 18px;
height: 55px;
background: rgba(20, 20, 24, 0.95);
border-radius: 9px 9px 0 0;
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
position: relative;
overflow: hidden;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
z-index: 2;
}
/* Round bulb at bottom */
.thermoTube::after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
background: rgba(20, 20, 24, 0.95);
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
z-index: -1;
}
.thermoFill {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 20px;
background: linear-gradient(to top,
#b8860b 0%,
#daa520 30%,
#e8c840 60%,
#f0d860 100%
);
border-radius: 0 0 10px 10px;
transition: height 0.6s ease;
z-index: 1;
}
/* Bulb fill (always filled) */
.thermoFill::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: linear-gradient(to top,
#a07008 0%,
#b8860b 50%,
#c9a020 100%
);
border-radius: 50%;
}
.thermoGradient {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.1) 40%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.1) 60%,
transparent 100%
);
pointer-events: none;
border-radius: 9px 9px 0 0;
}
.thermometer.empty .thermoFill {
background: linear-gradient(to top,
#2a2a30 0%,
#3a3a40 50%,
#4a4a50 100%
);
}
.thermometer.empty .thermoFill::before {
background: linear-gradient(to top,
#1a1a20 0%,
#2a2a30 50%,
#3a3a40 100%
);
}
.thermoLabel {
font-size: 9px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-top: 14px;
}
.thermoValue {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
/* ─────────────────────────────────────────────────────────────────
GLOBAL TOOLTIP STYLES
All tooltips use position:fixed to escape overflow:hidden clipping.
───────────────────────────────────────────────────────────────── */
/* Base tooltip class - use this for ALL tooltips */
.via-tooltip {
position: fixed !important;
width: max-content;
max-width: 280px;
padding: 10px 12px;
background: rgba(14, 18, 32, 0.98);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 0.1s ease, visibility 0.1s ease;
z-index: var(--z-tooltip) !important;
pointer-events: none;
contain: none;
font-family: inherit;
backdrop-filter: blur(10px) saturate(1.2);
}
.via-tooltip.is-visible {
opacity: 1;
visibility: visible;
}
/* Tooltip content styling */
.via-tooltip strong {
display: block;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
line-height: 1.45;
letter-spacing: -0.01em;
}
.via-tooltip p {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
margin: 0 0 6px;
}
.via-tooltip p:last-child {
margin-bottom: 0;
}
.via-tooltip .tooltipAction {
display: block;
font-size: 10px;
color: var(--accent2, #4ade80);
font-style: normal;
padding-top: 6px;
margin-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* ICP-specific tooltip enhancements */
.via-tooltip--icp {
max-width: 320px;
}
.via-tooltip--icp .tooltipHeader {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.via-tooltip--icp .tooltipTitle {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.via-tooltip--icp .tooltipBadge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: #4ade80;
}
.via-tooltip--icp .tooltipStats {
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.via-tooltip--icp .tooltipStat {
display: flex;
flex-direction: column;
gap: 1px;
}
.via-tooltip--icp .tooltipStatValue {
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
}
.via-tooltip--icp .tooltipStatLabel {
font-size: 9px;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.via-tooltip--icp .tooltipList {
display: flex;
flex-direction: column;
gap: 6px;
}
.via-tooltip--icp .tooltipListItem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
}
.via-tooltip--icp .tooltipListName {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.via-tooltip--icp .tooltipListMeta {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}
.via-tooltip--icp .tooltipListScore {
font-size: 10px;
font-weight: 600;
color: #4ade80;
white-space: nowrap;
}
/* Light mode tooltip */
:root[data-theme="light"] .via-tooltip {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(100, 95, 65, 0.2);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] .via-tooltip strong {
color: rgba(15, 23, 42, 0.92);
}
:root[data-theme="light"] .via-tooltip p {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .via-tooltip--icp .tooltipTitle,
:root[data-theme="light"] .via-tooltip--icp .tooltipStatValue,
:root[data-theme="light"] .via-tooltip--icp .tooltipListName {
color: rgba(15, 23, 42, 0.92);
}
:root[data-theme="light"] .via-tooltip--icp .tooltipStatLabel,
:root[data-theme="light"] .via-tooltip--icp .tooltipListMeta {
color: rgba(15, 23, 42, 0.5);
}
:root[data-theme="light"] .via-tooltip--icp .tooltipListItem {
background: rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .via-tooltip--icp .tooltipBadge {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
:root[data-theme="light"] .via-tooltip--icp .tooltipListScore {
color: #16a34a;
}
/* Arrow styles for different positions */
.via-tooltip::after {
content: '';
position: absolute;
border: 6px solid transparent;
}
.via-tooltip[data-position="left"]::after {
top: 14px;
right: -12px;
border-left-color: rgba(148, 163, 184, 0.2);
}
.via-tooltip[data-position="right"]::after {
top: 14px;
left: -12px;
border-right-color: rgba(148, 163, 184, 0.2);
}
.via-tooltip[data-position="top"]::after {
bottom: -12px;
left: 50%;
transform: translateX(-50%);
border-top-color: rgba(148, 163, 184, 0.2);
}
.via-tooltip[data-position="bottom"]::after {
top: -12px;
left: 50%;
transform: translateX(-50%);
border-bottom-color: rgba(148, 163, 184, 0.2);
}
:root[data-theme="light"] .via-tooltip[data-position="left"]::after {
border-left-color: rgba(100, 95, 65, 0.2);
}
:root[data-theme="light"] .via-tooltip[data-position="right"]::after {
border-right-color: rgba(100, 95, 65, 0.2);
}
:root[data-theme="light"] .via-tooltip[data-position="top"]::after {
border-top-color: rgba(100, 95, 65, 0.2);
}
:root[data-theme="light"] .via-tooltip[data-position="bottom"]::after {
border-bottom-color: rgba(100, 95, 65, 0.2);
}
.via-tooltip.via-tooltip--icp {
max-width: 360px;
min-width: 260px;
padding: 16px 18px;
border-radius: 14px;
border-color: rgba(94, 234, 212, 0.45);
background:
radial-gradient(circle at 12% 10%, rgba(16, 185, 129, 0.16), transparent 48%),
linear-gradient(160deg, rgba(12, 16, 22, 0.98), rgba(8, 10, 14, 0.98));
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(94, 234, 212, 0.2),
0 0 32px rgba(94, 234, 212, 0.18);
}
.via-tooltip.via-tooltip--icp::after {
border-top-color: rgba(94, 234, 212, 0.45);
border-bottom-color: rgba(94, 234, 212, 0.45);
border-left-color: rgba(94, 234, 212, 0.45);
border-right-color: rgba(94, 234, 212, 0.45);
}
.icpTooltip {
display: flex;
flex-direction: column;
gap: 8px;
}
.icpTooltipHeader {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(226, 232, 240, 0.9);
}
.icpTooltipCounts {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.icpTooltipCounts span {
font-size: 10px;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.6));
color: rgba(226, 232, 240, 0.9);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.3);
}
.icpTooltipSub {
font-size: 10px;
color: rgba(148, 163, 184, 0.9);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.icpTooltipList {
display: flex;
flex-direction: column;
gap: 6px;
}
.icpTooltipRow {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(51, 65, 85, 0.35);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.icpTooltipAvatarWrap {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(51, 65, 85, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.icpTooltipAvatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.icpTooltipAvatarFallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: rgba(148, 163, 184, 0.9);
background: rgba(51, 65, 85, 0.6);
}
.icpTooltipRowContent {
flex: 1;
min-width: 0;
}
.icpTooltipRowMain {
font-size: 11px;
font-weight: 600;
color: rgba(226, 232, 240, 0.95);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icpTooltipRowMeta {
font-size: 10px;
color: rgba(148, 163, 184, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.icpTooltipRowScore {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
color: rgba(251, 191, 36, 0.95);
padding: 2px 6px;
background: rgba(251, 191, 36, 0.15);
border-radius: 4px;
}
.icpTooltipEmpty {
font-size: 10px;
color: rgba(148, 163, 184, 0.85);
padding: 8px 4px;
}
:root[data-theme="light"] .via-tooltip.via-tooltip--icp {
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.98));
border-color: rgba(59, 130, 246, 0.35);
box-shadow:
0 16px 48px rgba(15, 23, 42, 0.15),
0 0 0 1px rgba(59, 130, 246, 0.15);
}
:root[data-theme="light"] .icpTooltipHeader {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .icpTooltipCounts span {
border-color: rgba(148, 163, 184, 0.3);
background: rgba(226, 232, 240, 0.6);
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .icpTooltipRow {
background: rgba(226, 232, 240, 0.55);
border-color: rgba(148, 163, 184, 0.35);
}
:root[data-theme="light"] .icpTooltipAvatarWrap {
background: rgba(148, 163, 184, 0.3);
}
:root[data-theme="light"] .icpTooltipAvatarFallback {
background: rgba(148, 163, 184, 0.4);
color: rgba(71, 85, 105, 0.9);
}
:root[data-theme="light"] .icpTooltipRowMain {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .icpTooltipRowMeta {
color: rgba(71, 85, 105, 0.8);
}
:root[data-theme="light"] .icpTooltipRowScore {
color: rgba(217, 119, 6, 0.95);
background: rgba(217, 119, 6, 0.12);
}
/* ─────────────────────────────────────────────────────────────────
SCORE SHAPE TOOLTIPS - Section headers & thermometers
───────────────────────────────────────────────────────────────── */
/* Info icon next to section titles */
.shapeSectionTitle {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
.infoIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
font-size: 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
cursor: help;
transition: all 0.2s;
}
.infoIcon svg {
width: 10px;
height: 10px;
display: block;
}
.infoIcon:hover {
color: #fbbf24;
background: rgba(251, 191, 36, 0.2);
}
/* Section tooltip container */
.hasTooltip {
position: relative;
}
.hasTooltip .shapeSectionTitle {
cursor: help;
}
/* Legacy tooltip styles - kept for backwards compatibility but now extend via-tooltip */
.shapeTooltip,
.thermoTooltip {
position: fixed !important;
width: max-content;
max-width: 200px;
padding: 12px 14px;
background: rgba(10, 10, 12, 0.98);
border: 1px solid rgba(251, 191, 36, 0.5);
border-radius: 8px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 20px rgba(251, 191, 36, 0.1);
opacity: 0;
visibility: hidden;
transition: opacity 0.06s ease, visibility 0.06s ease;
z-index: 999999 !important;
pointer-events: none;
}
/* Section tooltips default positioning (will be overridden by JS) */
.shapeTooltip {
position: absolute;
}
.shapeTooltip::after {
content: '';
position: absolute;
top: 14px;
right: -12px;
border: 6px solid transparent;
border-left-color: rgba(251, 191, 36, 0.5);
}
/* Bottom tooltips for elements near the bottom */
.shapeTooltipBottom::after {
top: auto;
bottom: 14px;
}
/* Thermometer tooltips - appear above */
.thermoTooltip {
max-width: 180px;
}
.thermoTooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(251, 191, 36, 0.5);
}
/* Show tooltips on hover - JS handles positioning */
.hasTooltip:hover > .shapeSectionTitle .shapeTooltip,
.infoIcon:hover + .shapeTooltip,
.shapeSectionTitle:hover .shapeTooltip,
.hasTooltip:hover .shapeTooltip {
opacity: 1;
visibility: visible;
}
.thermometer:hover .thermoTooltip {
opacity: 1;
visibility: visible;
}
/* Tooltip content styling */
.shapeTooltip strong,
.thermoTooltip strong {
display: block;
font-size: 11px;
font-weight: 600;
color: #fbbf24;
margin-bottom: 6px;
}
.shapeTooltip p,
.thermoTooltip p {
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
margin: 0 0 8px;
}
.shapeTooltip p:last-child,
.thermoTooltip p:last-child {
margin-bottom: 0;
}
.shapeTooltip .tooltipAction,
.thermoTooltip .tooltipAction {
display: block;
font-size: 9px;
color: #4ade80;
font-style: italic;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ─────────────────────────────────────────────────────────────────
RESPONSIVE ADJUSTMENTS FOR SCORE SHAPE
───────────────────────────────────────────────────────────────── */
@media (max-width: 1700px) {
.scoreLabBody {
grid-template-columns: 220px minmax(180px, 1fr) 340px;
}
}
@media (max-width: 1500px) {
.scoreLabBody {
grid-template-columns: 200px minmax(170px, 1fr) 320px;
}
}
@media (max-width: 1300px) {
.scoreLabBody {
grid-template-columns: 180px minmax(160px, 1fr) 300px;
}
}
@media (max-width: 1200px) {
.scoreLabBody {
grid-template-columns: 200px 1fr 300px;
}
}
/* ============================
TOAST NOTIFICATIONS
============================ */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: 12px;
background: var(--card);
border: 1px solid var(--stroke2);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
color: var(--text);
font-size: 14px;
line-height: 1.5;
pointer-events: auto;
animation: toastSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: top right;
}
.toast.toast-exiting {
animation: toastSlideOut 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes toastSlideOut {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
}
.toast-icon {
flex-shrink: 0;
font-size: 18px;
line-height: 1;
}
.toast-content {
flex: 1;
min-width: 0;
}
.toast-title {
font-weight: 600;
margin-bottom: 4px;
color: var(--text);
}
.toast-message {
color: var(--muted);
word-break: break-word;
}
.toast-close {
flex-shrink: 0;
background: none;
border: none;
color: var(--muted2);
cursor: pointer;
padding: 0;
font-size: 18px;
line-height: 1;
opacity: 0.6;
transition: opacity 0.15s;
}
.toast-close:hover {
opacity: 1;
}
.toast.toast-success {
border-color: rgba(34, 197, 94, 0.3);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, var(--card) 100%);
}
.toast.toast-success .toast-icon {
color: #22c55e;
}
.toast.toast-error {
border-color: #dc2626;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--card) 100%);
}
.toast.toast-error .toast-icon {
color: #ef4444;
}
.toast.toast-info {
border-color: rgba(139, 92, 246, 0.3);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, var(--card) 100%);
}
.toast.toast-info .toast-icon {
color: #8b5cf6;
}
/* ============================
ACTIVE JOB PROGRESS SECTION
============================ */
.activeJobSection {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
}
.activeJobSection .sectionLabel {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-weight: 600;
color: #a78bfa;
}
.pulsingDot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulseDot 1.5s ease-in-out infinite;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.85); }
}
.activeJobContent {
display: flex;
flex-direction: column;
gap: 12px;
}
.activeJobMeta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.activeJobPerson {
display: flex;
align-items: center;
gap: 8px;
color: var(--text);
font-weight: 500;
}
.activeJobHeroIcon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.activeJobHeroIcon svg {
width: 18px;
height: 18px;
display: block;
}
.activeJobTime {
color: var(--muted);
}
.activeJobTimeLabel {
margin-right: 4px;
}
#activeJobElapsed {
font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
color: #22c55e;
}
.activeJobProgressBar {
position: relative;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.activeJobProgressFill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, #8b5cf6 0%, #22c55e 100%);
border-radius: 3px;
transition: width 0.5s ease-out;
width: 5%;
}
.activeJobProgressGlow {
position: absolute;
right: 0;
top: -2px;
width: 40px;
height: 10px;
background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6), transparent);
animation: progressGlow 2s ease-in-out infinite;
}
@keyframes progressGlow {
0%, 100% { opacity: 0; transform: translateX(-20px); }
50% { opacity: 1; transform: translateX(0); }
}
.activeJobDescriptor {
font-size: 12px;
color: var(--muted);
text-align: center;
margin: 8px 0 4px;
min-height: 16px;
}
.activeJobStats {
display: flex;
justify-content: center;
gap: 16px;
font-size: 11px;
color: var(--muted2);
margin-bottom: 8px;
}
.activeJobStats .stat {
display: flex;
align-items: center;
gap: 4px;
}
.activeJobStats .statValue {
font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
color: var(--secondary);
}
.activeJobStats .statLabel {
color: var(--muted2);
}
.activeJobStatus {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.activeJobStateLabel {
color: var(--muted2);
}
.activeJobStateBadge {
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
}
.activeJobStateBadge.running {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
animation: statusPulse 2s ease-in-out infinite;
}
.activeJobStateBadge.starting {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
.activeJobStateBadge.succeeded {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.activeJobStateBadge.failed,
.activeJobStateBadge.error {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.activeJobRunId {
color: var(--muted2);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
margin-left: auto;
}
/* ============================
FLOATING JOB STATUS INDICATOR
============================ */
.floatingJobStatus {
position: fixed;
bottom: 170px;
left: 20px;
z-index: var(--z-floating-job);
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%);
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 30px;
cursor: pointer;
transition: all 0.2s ease;
animation: floatingJobSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.floatingJobStatus:hover {
transform: translateY(-2px);
border-color: rgba(34, 197, 94, 0.6);
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}
@keyframes floatingJobSlideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.floatingJobPulse {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: floatingPulse 1.5s ease-in-out infinite;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
@keyframes floatingPulse {
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
}
.floatingJobIcon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 12px;
}
.floatingJobIcon svg {
width: 16px;
height: 16px;
display: block;
}
.floatingJobText {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.floatingJobLabel {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
color: #22c55e;
text-transform: uppercase;
}
.floatingJobElapsed {
font-size: 14px;
font-weight: 600;
font-family: 'IBM Plex Mono', monospace;
color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════
SCORE LAB - BANDS TAB
═══════════════════════════════════════════════════════════════ */
.sl-bands-section {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sl-bands-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.sl-bands-section-title {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.sl-bands-section-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-bands-section-icon svg {
width: 14px;
height: 14px;
display: block;
}
/* ═══════════════════════════════════════════════════════════════
SIZE BANDS GRID
═══════════════════════════════════════════════════════════════ */
.sl-bands-size-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.sl-band-card {
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px;
transition: all 150ms ease;
}
.sl-band-card:hover {
border-color: rgba(251,191,36,0.3);
background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.03) 100%);
}
.sl-band-card[data-band="0"] { border-left: 3px solid #34d399; }
.sl-band-card[data-band="1"] { border-left: 3px solid #60a5fa; }
.sl-band-card[data-band="2"] { border-left: 3px solid #fbbf24; }
.sl-band-card[data-band="3"] { border-left: 3px solid #fb923c; }
.sl-band-card[data-band="4"] { border-left: 3px solid #ef4444; }
.sl-band-name {
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.9);
margin-bottom: 4px;
}
.sl-band-range {
font-size: 11px;
color: rgba(255,255,255,0.5);
font-variant-numeric: tabular-nums;
margin-bottom: 10px;
}
.sl-band-threshold {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.sl-band-threshold label {
font-size: 10px;
color: rgba(255,255,255,0.4);
flex-shrink: 0;
}
.sl-threshold-input {
width: 70px;
padding: 5px 8px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 5px;
color: #fbbf24;
font-size: 12px;
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
font-family: 'SF Mono', 'Fira Code', monospace;
}
.sl-threshold-input:focus {
outline: none;
border-color: #fbbf24;
background: rgba(251,191,36,0.1);
}
/* ═══════════════════════════════════════════════════════════════
LEVEL LADDER
═══════════════════════════════════════════════════════════════ */
.sl-level-ladder {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.sl-level-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
border: 1px solid transparent;
transition: all 150ms ease;
}
.sl-level-row:hover {
background: rgba(255,255,255,0.06);
}
.sl-level-row.prod-min {
border: 1px solid rgba(34, 197, 94, 0.3);
background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
}
.sl-level-index {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.6);
font-variant-numeric: tabular-nums;
}
.sl-level-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--level-color, rgba(255,255,255,0.8));
}
.sl-level-badge {
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
OVERRIDE MATRIX
═══════════════════════════════════════════════════════════════ */
.sl-toggle-indicator {
font-size: 10px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 600;
margin-left: auto;
}
.sl-toggle-indicator.on {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.sl-toggle-indicator.off {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.sl-matrix-container {
overflow-x: auto;
margin-bottom: 12px;
}
.sl-override-matrix {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.sl-override-matrix th,
.sl-override-matrix td {
padding: 8px 6px;
text-align: center;
border: 1px solid rgba(255,255,255,0.08);
}
.sl-matrix-corner {
background: transparent;
border-color: transparent;
}
.sl-matrix-band {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.6);
font-weight: 600;
font-size: 10px;
white-space: nowrap;
}
.sl-matrix-level {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.7);
font-weight: 600;
text-align: left !important;
padding-left: 10px !important;
}
.sl-matrix-cell {
font-variant-numeric: tabular-nums;
}
.sl-matrix-cell.has-override {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
border-color: rgba(34, 197, 94, 0.25);
}
.sl-matrix-cell.no-override {
background: rgba(0,0,0,0.2);
color: rgba(255,255,255,0.3);
}
.sl-matrix-mult {
font-size: 10px;
font-weight: 600;
color: #22c55e;
line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════════
MATRIX LEGEND
═══════════════════════════════════════════════════════════════ */
.sl-matrix-legend {
display: flex;
gap: 16px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.sl-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: rgba(255,255,255,0.5);
}
.sl-legend-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.15);
}
.sl-legend-swatch.has-override {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%);
border-color: rgba(34, 197, 94, 0.4);
}
.sl-legend-swatch.no-override {
background: rgba(0,0,0,0.3);
}
/* ═══════════════════════════════════════════════════════════════
JOB ERROR BANNER
═══════════════════════════════════════════════════════════════ */
.jobErrorBanner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(185, 28, 28, 0.95) 100%);
border-bottom: 2px solid #dc2626;
color: #fff;
animation: errorBannerSlideIn 0.3s ease-out;
}
@keyframes errorBannerSlideIn {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.jobErrorBanner.hiding {
animation: errorBannerSlideOut 0.3s ease-in forwards;
}
@keyframes errorBannerSlideOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
.jobErrorBannerIcon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: errorIconPulse 1s ease-in-out infinite;
}
.jobErrorBannerIcon svg {
width: 24px;
height: 24px;
display: block;
}
@keyframes errorIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.jobErrorBannerContent {
flex: 1;
min-width: 0;
}
.jobErrorBannerTitle {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 2px;
}
.jobErrorBannerMessage {
font-size: 12px;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jobErrorBannerClose {
flex-shrink: 0;
width: 24px;
height: 24px;
border: none;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.15s ease;
}
.jobErrorBannerClose svg {
width: 12px;
height: 12px;
}
.jobErrorBannerClose:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Status badge for FAILED state */
.netStatValue.failed,
.netStatusBadge.error {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.4);
padding: 4px 12px;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ─────────────────────────────────────────────────────────────────
CLAUDE CHAT ASSISTANT
───────────────────────────────────────────────────────────────── */
/* Modern typing indicator */
.claude-chat-typing {
display: flex;
align-items: center;
gap: 10px;
}
/* Streaming cursor animation */
.claude-chat-message-content.streaming::after {
content: '▊';
display: inline;
animation: blink-cursor 0.7s step-end infinite;
color: #a78bfa;
margin-left: 2px;
}
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Circular spinner (premium + lightweight) */
.claude-spinner {
width: 22px;
height: 22px;
border-radius: 999px;
background: conic-gradient(
from 90deg,
rgba(167, 139, 250, 0.12),
rgba(167, 139, 250, 0.95),
rgba(167, 139, 250, 0.12)
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
animation: claudeSpin 0.9s linear infinite;
}
@keyframes claudeSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.claude-spinner { animation: none; }
}
.claude-typing-dots {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.claude-typing-dots .dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(167, 139, 250, 0.95);
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25);
animation: claudeTypingDot 1.05s ease-in-out infinite;
}
.claude-typing-dots .dot:nth-child(2) { animation-delay: 0.14s; opacity: 0.85; }
.claude-typing-dots .dot:nth-child(3) { animation-delay: 0.28s; opacity: 0.75; }
@keyframes claudeTypingDot {
0%, 80%, 100% { transform: translateY(0); filter: brightness(1); }
40% { transform: translateY(-4px); filter: brightness(1.25); }
}
.claude-chat {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
/* Wider: reduce side margins and allow a larger max width */
width: calc(100% - 2rem); /* ~1rem margin on each side */
max-width: 980px;
z-index: 100000;
isolation: isolate;
overflow: visible;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ops chat sits bottom-left instead of centered */
.claude-chat.ops-chat {
position: fixed;
left: 18px;
bottom: 18px;
transform: none;
width: min(480px, calc(100% - 36px));
max-width: none;
z-index: 9600; /* Above jobHistoryPanel (9500) */
}
.claude-chat.collapsed {
height: 36px;
}
.claude-chat.ops-chat.collapsed {
bottom: 18px; /* Keep consistent when collapsed */
}
.claude-chat.expanded {
height: 316px; /* 280px + 36px footer */
bottom: 0;
}
/* Ops chat stays in bottom-left corner even when expanded */
.claude-chat.ops-chat.expanded {
bottom: 18px;
left: 18px;
transform: none;
}
.claude-chat.ops-chat.maximized {
bottom: 18px;
left: 18px;
transform: none;
}
.claude-chat.maximized {
height: 536px; /* 500px + 36px footer */
bottom: 0;
}
/* Resize handle at top of expanded chat */
.claude-chat-resize-handle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 6px;
cursor: ns-resize;
z-index: 10;
}
.claude-chat-resize-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
transition: background 0.15s ease;
}
.claude-chat-resize-handle:hover::after,
.claude-chat-resize-handle:active::after {
background: rgba(139, 92, 246, 0.6);
}
:root[data-theme="light"] .claude-chat-resize-handle::after {
background: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .claude-chat-resize-handle:hover::after,
:root[data-theme="light"] .claude-chat-resize-handle:active::after {
background: rgba(37, 99, 235, 0.45);
}
/* Collapsed state - fits inside footer bar */
.claude-chat-collapsed {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
height: 28px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.claude-chat.expanded .claude-chat-collapsed {
display: none;
}
.claude-chat-collapsed:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
:root[data-theme="light"] .claude-chat-collapsed {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .claude-chat-collapsed::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 4px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.2);
}
:root[data-theme="light"] .claude-chat-collapsed:hover {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.22);
}
.claude-chat-icon {
display: none;
}
.claude-chat-icon svg {
width: 26px;
height: 26px;
display: block;
}
.claude-chat-title-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
vertical-align: -3px;
pointer-events: none;
}
.claude-chat-title-icon svg {
width: 18px;
height: 18px;
display: block;
}
/* Cat mascot - hidden when chat is in footer */
.claude-chat-mascot {
display: none;
filter: drop-shadow(0 18px 35px rgba(0,0,0,0.45));
}
.claude-chat-mascot svg {
display: none !important;
}
/* Make sure chat surfaces render above mascot */
.claude-chat-collapsed,
.claude-chat-expanded {
position: relative;
z-index: 2;
}
.claude-chat-hint {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.3px;
}
.claude-chat-hotkey {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
/* Expanded state */
.claude-chat-expanded {
display: none;
flex-direction: column;
height: calc(100% - 36px); /* Minus footer height */
background: rgba(20, 20, 25, 0.98);
/* Reduce purple real estate: use subtle neutral border + thin purple accent */
border: 1px solid rgba(139, 92, 246, 0.3);
border-bottom: none;
box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.5);
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.claude-chat.expanded .claude-chat-expanded {
display: flex;
}
.claude-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: rgba(30, 30, 35, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.claude-chat-title {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.02em;
}
.claude-chat-close {
width: 24px;
height: 24px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.15s ease;
}
.claude-chat-close svg {
width: 12px;
height: 12px;
display: block;
}
.claude-chat-close:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.claude-chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.claude-chat-welcome {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
.claude-chat-welcome p {
margin: 0 0 8px 0;
}
.claude-chat-welcome ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.claude-chat-welcome li {
margin: 4px 0;
display: flex;
align-items: center;
gap: 6px;
}
.claude-chat-list-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.claude-chat-list-icon svg {
width: 14px;
height: 14px;
display: block;
}
.claude-chat-message {
max-width: 85%;
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.4;
}
.claude-chat-message-user {
align-self: flex-end;
/* Slightly less purple saturation */
background: rgba(139, 92, 246, 0.22);
color: #e9d5ff;
border-bottom-right-radius: 4px;
}
.claude-chat-message-assistant {
align-self: flex-start;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
border-bottom-left-radius: 4px;
}
.claude-chat-message-content {
word-wrap: break-word;
}
.ops-chat-tools {
margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 8px;
}
.ops-chat-tools-toggle {
border: none;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.75);
font-size: 11px;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}
.ops-chat-tools-toggle:hover {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.ops-chat-tools-body {
margin-top: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.4;
}
.ops-chat-tool-line {
padding: 6px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
}
.ops-chat-tool-line:last-child {
border-bottom: none;
}
.ops-chat-tool-label {
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.ops-chat-tool-detail {
flex: 1 1 220px;
min-width: 160px;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
color: rgba(255, 255, 255, 0.7);
}
.ops-chat-tool-pills {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-left: 8px;
}
.ops-chat-pill {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.08);
padding: 2px 6px;
border-radius: 999px;
}
.ops-chat-pill-tok {
color: #dbeafe;
background: rgba(59, 130, 246, 0.18);
}
.ops-chat-pill-chars {
color: #e5e7eb;
background: rgba(148, 163, 184, 0.18);
}
.ops-chat-pill-cached {
color: #dcfce7;
background: rgba(34, 197, 94, 0.2);
}
.ops-chat-pill-summary {
color: #fef3c7;
background: rgba(245, 158, 11, 0.2);
}
.ops-chat-pill-total {
color: #ccfbf1;
background: rgba(20, 184, 166, 0.2);
}
.ops-chat-pill-meta {
color: #e0e7ff;
background: rgba(99, 102, 241, 0.2);
}
.ops-chat-tools-empty {
color: rgba(255, 255, 255, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════════
UPLOAD AI - Live Status with Blinking Cursor
═══════════════════════════════════════════════════════════════════════════════ */
.ops-live-status {
display: flex;
align-items: center;
padding: 8px 12px;
margin-top: 8px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
border-radius: 6px;
border-left: 3px solid #8b5cf6;
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}
.ops-live-text {
white-space: pre;
}
.ops-live-cursor {
color: #8b5cf6;
font-weight: bold;
margin-left: 1px;
}
@keyframes opsCursorBlink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Light theme */
:root[data-theme="light"] .ops-live-status {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
color: #1e293b;
}
:root[data-theme="light"] .ops-live-cursor {
color: #7c3aed;
}
.claude-chat-input-row {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(30, 30, 35, 0.5);
}
.claude-chat-input {
flex: 1;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-size: 13px;
outline: none;
transition: all 0.15s ease;
}
.claude-chat-input:focus {
border-color: rgba(139, 92, 246, 0.5);
background: rgba(255, 255, 255, 0.08);
}
.claude-chat-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.claude-chat-send {
width: 38px;
height: 38px;
border: none;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 0;
font-weight: 600;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.claude-chat-send-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.claude-chat-send-icon svg {
width: 16px;
height: 16px;
display: block;
}
.claude-chat-send:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.claude-chat-send:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.claude-chat-send .spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Context badge - shows Claude is aware */
.claude-chat-context-badge {
font-size: 10px;
font-weight: 600;
color: #22c55e;
background: rgba(34, 197, 94, 0.15);
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.03em;
margin-left: auto;
margin-right: 8px;
animation: pulse-green 2s ease-in-out infinite;
display: inline-flex;
align-items: center;
gap: 4px;
}
.claude-chat-context-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.claude-chat-context-icon svg {
width: 12px;
height: 12px;
display: block;
}
/* Tool mode select (A/B test toggle) */
.ops-tool-mode-select {
font-size: 10px;
font-weight: 500;
color: var(--text-muted, #94a3b8);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 6px;
cursor: pointer;
outline: none;
margin-right: 8px;
transition: all 0.15s ease;
}
.ops-tool-mode-select:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.ops-tool-mode-select:focus {
border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.ops-tool-mode-select option {
background: #1e1e2e;
color: var(--text-muted, #94a3b8);
}
.ops-chat-token-badge {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.08);
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.02em;
margin-right: 8px;
}
.ops-session-id {
font-size: 9px;
font-family: 'SF Mono', 'Consolas', monospace;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
margin-right: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.ops-session-id:hover {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.1);
}
.ops-session-id.copied {
color: #22c55e;
background: rgba(34, 197, 94, 0.18);
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}
.ops-chat-download {
width: 24px;
height: 24px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
border-radius: 4px;
cursor: pointer;
font-size: 12px;
line-height: 1;
transition: all 0.15s ease;
margin-right: 6px;
}
.ops-chat-download:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
@keyframes pulse-green {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Tip in welcome message */
.claude-chat-tip {
margin-top: 10px !important;
padding: 8px 10px;
background: rgba(139, 92, 246, 0.1);
border-left: 2px solid #8b5cf6;
border-radius: 0 6px 6px 0;
font-style: italic;
color: rgba(255, 255, 255, 0.7);
}
/* Formatted message content */
.claude-chat-message-content code {
background: rgba(139, 92, 246, 0.2);
padding: 1px 5px;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
}
.claude-chat-message-content strong {
color: #e9d5ff;
font-weight: 600;
}
/* Action confirmation styling */
.claude-chat-message-content .action-check {
display: inline-block;
margin-right: 2px;
}
/* Chat height controlled by earlier rules or inline style from resize */
/* Action result messages */
.claude-chat-message-assistant .action-result {
display: block;
margin-top: 8px;
padding: 6px 10px;
background: rgba(34, 197, 94, 0.15);
border-radius: 6px;
font-size: 11px;
color: #86efac;
}
:root[data-theme="light"] .claude-chat-expanded {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .claude-chat-header {
background: #f8fafc;
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .claude-chat-title {
color: #0f172a;
}
:root[data-theme="light"] .claude-chat-close {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .claude-chat-close:hover {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
:root[data-theme="light"] .claude-chat-messages,
:root[data-theme="light"] .claude-chat-welcome,
:root[data-theme="light"] .claude-chat-message {
color: rgba(15, 23, 42, 0.8);
}
:root[data-theme="light"] .claude-chat-message-user {
background: #ede9fe;
color: #4c1d95;
}
:root[data-theme="light"] .claude-chat-message-assistant {
background: #f1f5f9;
color: #0f172a;
}
:root[data-theme="light"] .ops-chat-tools,
:root[data-theme="light"] .ops-chat-tool-line {
border-top-color: rgba(15, 23, 42, 0.08);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .ops-chat-tools-toggle {
background: #f1f5f9;
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .ops-chat-tools-toggle:hover {
background: #e2e8f0;
color: #0f172a;
}
:root[data-theme="light"] .ops-chat-tool-label {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .ops-chat-tool-detail {
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .ops-chat-pill {
background: #e2e8f0;
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .ops-chat-pill-tok {
background: #dbeafe;
color: #1d4ed8;
}
:root[data-theme="light"] .ops-chat-pill-chars {
background: #e2e8f0;
color: #475569;
}
:root[data-theme="light"] .ops-chat-pill-cached {
background: #dcfce7;
color: #166534;
}
:root[data-theme="light"] .ops-chat-pill-summary {
background: #fef3c7;
color: #92400e;
}
:root[data-theme="light"] .ops-chat-pill-total {
background: #ccfbf1;
color: #0f766e;
}
:root[data-theme="light"] .ops-chat-pill-meta {
background: #e0e7ff;
color: #3730a3;
}
:root[data-theme="light"] .claude-chat-input-row {
background: #f8fafc;
border-top-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .claude-chat-input {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
color: #0f172a;
}
:root[data-theme="light"] .claude-chat-input::placeholder {
color: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .claude-chat-input:focus {
border-color: rgba(14, 165, 233, 0.6);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
:root[data-theme="light"] .claude-chat-send {
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
color: #ffffff;
}
:root[data-theme="light"] .claude-chat-send:hover:not(:disabled) {
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}
:root[data-theme="light"] .ops-tool-mode-select,
:root[data-theme="light"] .ops-chat-token-badge,
:root[data-theme="light"] .ops-session-id {
background: #e2e8f0;
color: #475569;
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .ops-chat-download {
background: #e2e8f0;
color: #475569;
}
:root[data-theme="light"] .ops-chat-download:hover {
background: #cbd5f5;
color: #1f2937;
}
:root[data-theme="light"] .claude-chat-tip {
background: #e0e7ff;
border-left-color: #6366f1;
color: #312e81;
}
:root[data-theme="light"] .claude-chat-message-content code {
background: #e0e7ff;
color: #312e81;
}
:root[data-theme="light"] .claude-chat-message-content strong {
color: #1f2937;
}
:root[data-theme="light"] .claude-chat-message-assistant .action-result {
background: #dcfce7;
color: #166534;
}
/* Light theme for collapsed bar hint text */
:root[data-theme="light"] .claude-chat-hint {
color: #0f172a;
}
/* ============================
NETWORK SEARCH PANEL
Premium design matching Score Lab
============================ */
.ns-panel {
position: relative;
background:
radial-gradient(ellipse 600px 400px at 50% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 70%),
linear-gradient(180deg, rgba(8, 15, 25, 0.98) 0%, rgba(5, 10, 18, 0.99) 100%);
border-radius: 24px;
border: 1px solid rgba(56, 189, 248, 0.12);
padding: 0;
max-width: 920px;
margin: 0 auto;
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(56, 189, 248, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
overflow: hidden;
}
/* Subtle animated gradient border glow */
.ns-panel::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 25px;
background: linear-gradient(
135deg,
rgba(56, 189, 248, 0.15) 0%,
transparent 40%,
transparent 60%,
rgba(56, 189, 248, 0.08) 100%
);
z-index: -1;
opacity: 0;
transition: opacity 400ms ease;
}
.ns-panel:hover::before {
opacity: 1;
}
/* Header section */
.ns-header {
text-align: center;
padding: 32px 32px 24px;
background:
linear-gradient(180deg, rgba(56, 189, 248, 0.03) 0%, transparent 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ns-title {
font-size: 22px;
font-weight: 800;
background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.75) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 8px 0;
letter-spacing: 0.02em;
}
.ns-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
margin: 0;
font-weight: 400;
}
/* Search section */
.ns-search-section {
padding: 24px 32px;
}
.ns-search-box {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.ns-input {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 16px 20px;
font-size: 15px;
color: rgba(255, 255, 255, 0.95);
outline: none;
transition: all 200ms ease;
font-weight: 450;
}
.ns-input::placeholder {
color: rgba(255, 255, 255, 0.28);
font-weight: 400;
}
.ns-input:focus {
border-color: rgba(56, 189, 248, 0.45);
box-shadow:
0 0 0 3px rgba(56, 189, 248, 0.1),
0 0 20px rgba(56, 189, 248, 0.08);
background: rgba(0, 0, 0, 0.5);
}
.ns-search-btn {
width: 56px;
height: 56px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 180ms ease;
box-shadow:
0 4px 16px rgba(56, 189, 248, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ns-search-btn:hover {
transform: translateY(-2px);
box-shadow:
0 8px 24px rgba(56, 189, 248, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ns-search-btn:active {
transform: scale(0.96) translateY(0);
}
.ns-search-btn svg,
.ns-search-btn img {
width: 22px;
height: 22px;
}
/* Example queries */
.ns-examples {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.ns-examples-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-right: 4px;
}
.ns-example {
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 20px;
padding: 7px 14px;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: all 180ms ease;
}
.ns-example:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.35);
color: #7dd3fc;
transform: translateY(-1px);
}
/* Results section */
.ns-results-section {
padding: 0 32px 32px;
}
/* Loading state */
.ns-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 64px 0;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.ns-spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(56, 189, 248, 0.15);
border-top-color: #38bdf8;
border-radius: 50%;
animation: ns-spin 0.9s linear infinite;
}
@keyframes ns-spin {
to { transform: rotate(360deg); }
}
/* Error state */
.ns-error {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 14px;
color: #fca5a5;
font-size: 14px;
}
.ns-error-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ns-error-icon svg {
width: 20px;
height: 20px;
display: block;
}
/* Summary card - premium glass effect */
.ns-summary {
position: relative;
background:
linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, rgba(0, 0, 0, 0.2) 100%);
border: 1px solid rgba(56, 189, 248, 0.12);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 24px;
overflow: hidden;
}
.ns-summary::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);
}
.ns-summary-direct {
background:
linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(0, 0, 0, 0.2) 100%);
border-color: rgba(34, 197, 94, 0.2);
}
.ns-summary-direct::before {
background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.35), transparent);
}
.ns-summary-text {
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.ns-summary-direct .ns-summary-text {
color: #86efac;
}
.ns-summary-context {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
margin-bottom: 8px;
}
.ns-label {
color: rgba(255, 255, 255, 0.4);
font-weight: 500;
}
.ns-value {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.ns-domain {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
font-weight: 400;
}
/* Person mini card in summary */
.ns-person-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.ns-avatar-sm {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(56, 189, 248, 0.2);
}
.ns-avatar-placeholder {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(56, 189, 248, 0.15) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ns-avatar-placeholder::after {
content: "";
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,0.4)' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ns-person-name {
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
}
.ns-person-company {
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
}
.ns-summary-meta {
display: flex;
gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ns-meta-item {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 5px 12px;
border-radius: 8px;
}
.ns-meta-direct {
background: rgba(34, 197, 94, 0.12);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.ns-meta-twohop {
background: rgba(56, 189, 248, 0.1);
color: #7dd3fc;
border: 1px solid rgba(56, 189, 248, 0.2);
}
/* Results table - premium styling */
.ns-table-wrap {
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
}
.ns-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ns-table thead {
background:
linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.ns-table th {
text-align: left;
padding: 14px 16px;
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ns-table th.ns-numeric {
text-align: right;
}
.ns-table th.ns-actions {
width: 80px;
text-align: center;
}
.ns-table tbody tr {
transition: all 150ms ease;
}
.ns-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.01);
}
.ns-table tbody tr:hover {
background: rgba(56, 189, 248, 0.04);
}
.ns-table td {
padding: 14px 16px;
color: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
vertical-align: middle;
}
.ns-table td.ns-numeric {
text-align: right;
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px;
font-weight: 600;
color: #7dd3fc;
}
/* Person cell with avatar */
.ns-person-cell {
display: flex;
align-items: center;
gap: 12px;
}
.ns-person-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.ns-person-info .ns-person-name {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.ns-person-info .ns-person-role {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.ns-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(56, 189, 248, 0.15);
transition: border-color 180ms ease;
}
.ns-table tbody tr:hover .ns-avatar {
border-color: rgba(56, 189, 248, 0.35);
}
/* Premium Badges */
.ns-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 10px;
border-radius: 6px;
min-width: 58px;
}
.ns-badge-direct {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.25);
box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
.ns-badge-twohop {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.08) 100%);
color: #7dd3fc;
border: 1px solid rgba(56, 189, 248, 0.2);
}
/* Actions column */
.ns-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.ns-linkedin-btn,
.ns-expand-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
transition: all 180ms ease;
}
.ns-linkedin-btn:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.35);
color: #38bdf8;
transform: translateY(-1px);
}
.ns-expand-btn:hover {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.35);
color: #c4b5fd;
transform: translateY(-1px);
}
.ns-linkedin-btn img,
.ns-expand-btn img {
width: 16px;
height: 16px;
opacity: 0.8;
}
/* Expanded detail row */
.ns-row-expanded {
background: rgba(56, 189, 248, 0.03) !important;
}
.ns-detail-row td {
padding: 0 !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.1);
}
.ns-detail-content {
padding: 20px 24px;
background:
linear-gradient(180deg, rgba(56, 189, 248, 0.03) 0%, rgba(0, 0, 0, 0.15) 100%);
}
.ns-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px 32px;
margin-bottom: 16px;
}
.ns-detail-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ns-detail-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.4);
font-weight: 600;
}
.ns-detail-value {
font-size: 14px;
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
}
.ns-detail-linkedin {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #38bdf8;
text-decoration: none;
padding: 8px 14px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 8px;
transition: all 180ms ease;
}
.ns-link-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ns-link-icon svg {
width: 14px;
height: 14px;
display: block;
}
.ns-detail-linkedin:hover {
background: rgba(56, 189, 248, 0.18);
border-color: rgba(56, 189, 248, 0.35);
transform: translateY(-1px);
}
/* Data Check Button & Results */
.ns-data-check-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 8px;
padding: 8px 14px;
cursor: pointer;
transition: all 180ms ease;
margin-left: 8px;
}
.ns-data-check-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ns-data-check-icon svg {
width: 14px;
height: 14px;
display: block;
}
.ns-data-check-btn:hover {
background: rgba(251, 191, 36, 0.2);
border-color: rgba(251, 191, 36, 0.5);
}
.ns-data-check-result {
margin-top: 16px;
padding: 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
font-size: 12px;
}
.ns-check-loading {
color: rgba(255, 255, 255, 0.6);
font-style: italic;
}
.ns-check-error {
color: #f87171;
}
.ns-check-summary {
display: flex;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.ns-check-badge {
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ns-check-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ns-check-icon svg {
width: 12px;
height: 12px;
display: block;
}
.ns-check-badge.ns-check-ok {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ns-check-badge.ns-check-no {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.ns-check-section {
margin-top: 8px;
}
.ns-check-section summary {
cursor: pointer;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
padding: 8px 0;
}
.ns-check-section summary:hover {
color: #38bdf8;
}
.ns-check-json {
margin: 8px 0 0;
padding: 12px;
background: rgba(0, 0, 0, 0.4);
border-radius: 6px;
font-family: 'SF Mono', Monaco, Consolas, monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
overflow-x: auto;
max-height: 300px;
overflow-y: auto;
white-space: pre;
}
/* Empty state */
.ns-empty {
text-align: center;
padding: 64px 32px;
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.ns-empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
}
.ns-more-hint {
text-align: center;
padding: 16px;
font-size: 12px;
color: rgba(255, 255, 255, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.04);
margin-top: 8px;
}
/* ------------------------------------------------------------------
Network Search (Modern AI chat UI)
Rollback: remove `ns-modern` class or set localStorage tokyo_ns_ui_v3="0"
------------------------------------------------------------------- */
.ns-panel.ns-modern .ns-header {
text-align: left;
padding: 28px 32px 18px;
}
.ns-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.ns-beta-pill {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
padding: 4px 10px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
}
.ns-chat {
display: flex;
flex-direction: column;
min-height: 520px;
max-height: 72vh;
}
.ns-transcript {
flex: 1;
overflow: auto;
padding: 18px 32px 6px;
display: flex;
flex-direction: column;
gap: 14px;
scroll-behavior: smooth;
}
.ns-msg {
display: flex;
}
.ns-msg-user {
justify-content: flex-end;
}
.ns-msg-assistant {
justify-content: flex-start;
}
.ns-bubble {
max-width: min(820px, 100%);
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
line-height: 1.35;
}
.ns-msg-user .ns-bubble {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.16) 100%);
border-color: rgba(56, 189, 248, 0.22);
}
.ns-msg-assistant .ns-bubble {
background: rgba(255, 255, 255, 0.035);
border-color: rgba(255, 255, 255, 0.07);
}
.ns-assistant-payload .ns-summary {
margin: 0;
}
.ns-assistant-payload .ns-table-wrap {
margin-top: 12px;
}
.ns-loading-inline {
flex-direction: row;
padding: 4px 0;
gap: 10px;
}
.ns-loading-inline .ns-spinner {
width: 18px;
height: 18px;
border-width: 2px;
}
.ns-composer {
position: sticky;
bottom: 0;
padding: 14px 18px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(180deg, rgba(5, 10, 18, 0) 0%, rgba(5, 10, 18, 0.82) 24%, rgba(5, 10, 18, 0.96) 100%);
backdrop-filter: blur(10px);
}
.ns-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.ns-chip {
background: rgba(56, 189, 248, 0.06);
border: 1px solid rgba(56, 189, 248, 0.14);
border-radius: 999px;
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.62);
cursor: pointer;
transition: all 180ms ease;
}
.ns-chip:hover {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.28);
color: #7dd3fc;
transform: translateY(-1px);
}
.ns-inputbar {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 10px 10px 10px 14px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(0, 0, 0, 0.34);
transition: all 200ms ease;
}
.ns-inputbar:focus-within {
border-color: rgba(56, 189, 248, 0.45);
box-shadow:
0 0 0 3px rgba(56, 189, 248, 0.1),
0 0 20px rgba(56, 189, 248, 0.08);
background: rgba(0, 0, 0, 0.44);
}
.ns-chat-input {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 2px 4px 2px 0;
resize: none;
min-height: 22px;
max-height: 140px;
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
.ns-chat-input::placeholder {
color: rgba(255, 255, 255, 0.28);
font-weight: 450;
}
.ns-send-btn {
width: 44px;
height: 44px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 180ms ease;
box-shadow:
0 4px 16px rgba(56, 189, 248, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ns-send-btn:hover {
transform: translateY(-1px);
box-shadow:
0 8px 22px rgba(56, 189, 248, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ns-send-btn:active {
transform: scale(0.97);
}
.ns-composer-hint {
margin-top: 10px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
}
/* ========================================
SYSTEM HEALTH WIDGET
======================================== */
.systemHealthWidget {
position: fixed;
bottom: 16px;
right: 16px;
z-index: var(--z-health-widget);
font-family: var(--font-sans);
font-size: 11px;
}
/* aiCheatSheetBtn is now always visible above the system health widget */
.healthWidgetHeader {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--ui-widget-bg);
border: 1px solid var(--ui-widget-border);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
/* Ensure correct label color in both themes */
color: var(--text);
}
.healthWidgetHeader:hover {
background: var(--ui-widget-bg-hover);
border-color: var(--ui-widget-border-hover);
}
.healthWidgetIcon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
.healthWidgetIcon svg {
width: 12px;
height: 12px;
display: block;
}
.healthWidgetIcon.ok {
color: #22c55e;
text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
.healthWidgetIcon.warning {
color: #eab308;
text-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}
.healthWidgetIcon.error {
color: #ef4444;
text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
animation: healthPulse 1.5s ease-in-out infinite;
}
.healthWidgetIcon.checking {
color: #60a5fa;
animation: healthSpin 1s linear infinite;
}
@keyframes healthPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes healthSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.healthWidgetLabel {
/* Use currentColor so the theme can't drift to the wrong token */
color: currentColor;
opacity: 0.72;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.healthWidgetBody {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
min-width: 160px;
background: var(--ui-widget-bg);
border: 1px solid var(--ui-widget-border);
border-radius: 8px;
padding: 8px 0;
backdrop-filter: blur(12px);
box-shadow: var(--ui-float-shadow);
}
.healthItem {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
transition: background 0.15s ease;
}
.healthItem:hover {
background: rgba(255, 255, 255, 0.03);
}
.healthDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.healthDot.ok {
color: #22c55e;
}
.healthDot.error {
color: #ef4444;
}
.healthDot.checking {
color: #60a5fa;
animation: healthSpin 1s linear infinite;
}
.healthName {
color: rgba(255, 255, 255, 0.7);
flex: 1;
}
.healthTimestamp {
padding: 6px 12px;
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 4px;
}
/* ========================================
Score Lab - Function Layer Groups
======================================== */
.sl-function-groups {
margin-top: 12px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
background: rgba(0,0,0,0.2);
}
.sl-function-groups summary {
padding: 10px 14px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.7);
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.sl-summary-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sl-summary-icon svg {
width: 14px;
height: 14px;
display: block;
}
.sl-function-groups summary:hover {
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.03);
}
.sl-function-groups[open] summary {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sl-function-group-list {
padding: 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px;
}
.sl-fg-item {
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.05);
}
.sl-fg-item:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
}
.sl-fg-name {
display: block;
font-size: 12px;
font-weight: 600;
color: #4ade80;
margin-bottom: 2px;
}
.sl-fg-desc {
display: block;
font-size: 10px;
color: rgba(255,255,255,0.4);
}
.sl-fg-other .sl-fg-name {
color: rgba(255,255,255,0.4);
}
/* Function mode toggle - radio button style */
.sl-control-row.sl-toggle-row {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
}
.sl-control-row.sl-toggle-row label {
font-size: 12px;
color: rgba(255,255,255,0.6);
min-width: 80px;
}
.sl-bool-toggle {
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
background: rgba(0,0,0,0.3);
color: rgba(255,255,255,0.5);
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.sl-bool-toggle:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.25);
}
.sl-bool-toggle.on {
background: rgba(74, 222, 128, 0.15);
border-color: rgba(74, 222, 128, 0.4);
color: #4ade80;
}
.sl-bool-toggle.off {
background: rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.4);
}
/* Function Match Mode Buttons */
.sl-match-mode {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sl-mode-btn {
padding: 6px 14px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
background: rgba(0,0,0,0.3);
color: rgba(255,255,255,0.5);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.sl-mode-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.25);
}
.sl-mode-btn.active {
background: rgba(74, 222, 128, 0.15);
border-color: rgba(74, 222, 128, 0.5);
color: #4ade80;
}
/* Custom Groups Editor */
.sl-custom-groups-editor {
margin-top: 12px;
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 8px;
background: rgba(168, 85, 247, 0.05);
padding: 12px;
}
.sl-cg-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sl-cg-empty {
text-align: center;
padding: 20px;
color: rgba(255,255,255,0.4);
font-size: 13px;
}
.sl-custom-group {
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
background: rgba(0,0,0,0.2);
overflow: hidden;
}
.sl-custom-group[open] {
border-color: rgba(168, 85, 247, 0.3);
}
.sl-cg-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
cursor: pointer;
user-select: none;
list-style: none;
}
.sl-cg-header::-webkit-details-marker {
display: none;
}
.sl-cg-header:hover {
background: rgba(255,255,255,0.06);
}
.sl-custom-group[open] .sl-cg-header {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sl-cg-toggle {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.4);
}
.sl-cg-toggle svg {
width: 12px;
height: 12px;
display: block;
}
.sl-cg-count {
padding: 2px 8px;
background: rgba(168, 85, 247, 0.3);
border-radius: 10px;
font-size: 11px;
font-weight: 600;
color: #a855f7;
min-width: 20px;
text-align: center;
}
.sl-cg-name {
flex: 1;
padding: 6px 10px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 4px;
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.sl-cg-name:focus {
outline: none;
border-color: rgba(168, 85, 247, 0.5);
}
.sl-cg-delete {
width: 28px;
height: 28px;
border: none;
border-radius: 4px;
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 0.15s ease;
}
.sl-cg-delete svg {
width: 12px;
height: 12px;
display: block;
}
.sl-cg-delete:hover {
background: rgba(239, 68, 68, 0.4);
}
.sl-cg-layers {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
.sl-cg-layer {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
background: rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.15s ease;
font-size: 11px;
color: rgba(255,255,255,0.6);
}
.sl-cg-layer:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.2);
}
.sl-cg-layer.selected {
background: rgba(168, 85, 247, 0.2);
border-color: rgba(168, 85, 247, 0.5);
color: #a855f7;
}
.sl-cg-layer input[type="checkbox"] {
display: none;
}
.sl-cg-add {
width: 100%;
margin-top: 10px;
padding: 10px;
border: 1px dashed rgba(168, 85, 247, 0.4);
border-radius: 6px;
background: transparent;
color: #a855f7;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.sl-cg-add:hover {
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.6);
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* AI Cheat Sheet - Floating help panel */
/* ─────────────────────────────────────────────────────────────────────────── */
.aiCheatSheetBtn {
position: fixed;
bottom: 56px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none;
color: white;
font-size: 18px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
transition: all 0.2s ease;
z-index: 9990;
}
.aiCheatSheetBtn:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}
.aiCheatSheetPanel {
position: fixed;
bottom: 100px;
right: 16px;
width: 380px;
max-height: 70vh;
background: var(--bg1);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transition: all 0.2s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.aiCheatSheetPanel.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.cheatSheetHeader {
padding: 16px 20px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.cheatSheetTitle {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.cheatSheetSubtitle {
font-size: 12px;
color: var(--text-secondary);
}
.cheatSheetBody {
padding: 12px;
overflow-y: auto;
flex: 1;
}
.cheatSheetCategory {
margin-bottom: 16px;
}
.cheatSheetCategory:last-child {
margin-bottom: 0;
}
.cheatSheetCategoryTitle {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6366f1;
padding: 0 8px 6px;
margin-bottom: 4px;
}
.cheatSheetItems {
display: flex;
flex-direction: column;
gap: 2px;
}
.cheatSheetItem {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
}
.cheatSheetItem:hover {
background: rgba(99, 102, 241, 0.1);
}
.cheatSheetQuery {
font-size: 13px;
color: var(--text);
flex: 1;
}
.cheatSheetDesc {
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
opacity: 0.7;
}
/* Light theme */
:root[data-theme="light"] .aiCheatSheetPanel {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .cheatSheetHeader {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
}
:root[data-theme="light"] .cheatSheetItem:hover {
background: rgba(99, 102, 241, 0.08);
}
/* ────────────────────────────────────────────────────────────────────────── */
/* SmartSearch Diagnostics Panel */
/* ────────────────────────────────────────────────────────────────────────── */
.aiDiagnosticsPanel {
background:
radial-gradient(circle at top right, rgba(248, 113, 113, 0.18), transparent 45%),
linear-gradient(180deg, #0a0a0d 0%, #111115 100%);
zoom: 1;
}
.aiDiagnosticsHeader {
border-bottom-color: rgba(248, 113, 113, 0.15);
}
.aiDiagnosticsTitle {
color: #fda4af;
}
.aiDiagnosticsControls {
padding: 18px 32px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(248, 113, 113, 0.08) 0%, transparent 100%);
}
.aiDiagnosticsControlsInner {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.aiDiagnosticsInputs {
display: flex;
flex-wrap: wrap;
gap: 12px;
flex: 1;
min-width: 280px;
}
.aiDiagnosticsInput {
min-width: 240px;
}
.aiDiagnosticsDelay {
max-width: 140px;
}
.aiDiagnosticsButtons {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.aiDiagnosticsRunAllBtn {
background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);
color: #240a12;
}
.aiDiagnosticsRunAllBtn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(248, 113, 113, 0.35);
}
.aiDiagnosticsAutoTuneBtn {
background: linear-gradient(135deg, #fdba74 0%, #fb923c 100%);
color: #2b1606;
}
.aiDiagnosticsAutoTuneBtn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(251, 146, 60, 0.35);
}
.aiDiagnosticsGhostBtn {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
padding: 10px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.aiDiagnosticsGhostBtn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
.aiDiagnosticsGhostBtn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.aiDiagnosticsSummary {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.aiDiagnosticsTuningStatus {
margin-top: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.aiDiagnosticsTuningStatus.status-running {
color: rgba(251, 191, 36, 0.9);
}
.aiDiagnosticsTuningStatus.status-ok {
color: rgba(134, 239, 172, 0.9);
}
.aiDiagnosticsTuningStatus.status-warn {
color: rgba(251, 191, 36, 0.85);
}
.aiDiagnosticsTuningStatus.status-error {
color: rgba(252, 165, 165, 0.9);
}
.aiDiagnosticsSummaryItem {
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.65);
}
.aiDiagnosticsSummaryItem strong {
color: #fda4af;
margin-left: 6px;
font-weight: 700;
}
.aiDiagnosticsBody {
padding: 26px 32px 32px;
}
.aiDiagnosticsList {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.aiDiagnosticsCategory {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.35));
overflow: hidden;
}
.aiDiagnosticsCategoryHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
background: linear-gradient(90deg, rgba(253, 164, 175, 0.18), rgba(0, 0, 0, 0.25));
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aiDiagnosticsRows {
display: flex;
flex-direction: column;
}
.aiDiagnosticsCategoryCount {
color: rgba(248, 113, 113, 0.85);
font-weight: 700;
}
.aiDiagnosticsRow {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
}
.aiDiagnosticsRow.isAutoTuning {
border-radius: 14px;
box-shadow:
inset 0 0 0 2px rgba(251, 191, 36, 0.7),
0 0 18px rgba(251, 191, 36, 0.25);
background: linear-gradient(120deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 42, 0));
border: 1px solid rgba(251, 191, 36, 0.35);
animation: aiTunePulse 1.6s ease-in-out infinite;
}
@keyframes aiTunePulse {
0% {
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.08);
}
50% {
box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.2);
}
100% {
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.08);
}
}
.aiDiagnosticsRows .aiDiagnosticsRow:first-child {
border-top: none;
}
.aiDiagnosticsRowMain {
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.aiDiagnosticsQueryBlock {
flex: 1;
min-width: 260px;
}
.aiDiagnosticsQueryText {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.aiDiagnosticsQueryDesc {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-top: 4px;
}
.aiDiagnosticsQueryEdit {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 10px;
}
.aiDiagnosticsQueryEditLabel {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
flex-basis: 100%;
}
.aiDiagnosticsQueryInput {
flex: 1;
min-width: 240px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
}
.aiDiagnosticsQueryInput:focus {
border-color: rgba(248, 113, 113, 0.4);
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
outline: none;
}
.aiDiagnosticsBtn--ghost {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.12);
}
.aiDiagnosticsBtn--ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
.aiDiagnosticsStatusBlock {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
min-width: 120px;
}
.aiDiagnosticsTuneAnim {
width: 28px;
height: 28px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.aiDiagnosticsTuneAnim.isActive {
opacity: 1;
transform: scale(1);
}
.aiDiagnosticsTuneAnim svg {
width: 100%;
height: 100%;
}
.aiDiagnosticsTuneAnim.isFallback::after {
content: "";
display: block;
width: 18px;
height: 18px;
margin: 5px;
border-radius: 999px;
border: 2px solid rgba(251, 191, 36, 0.3);
border-top-color: rgba(251, 191, 36, 0.9);
animation: aiTuneSpin 0.8s linear infinite;
}
@keyframes aiTuneSpin {
to {
transform: rotate(360deg);
}
}
.aiDiagnosticsStatusBadge {
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
}
.aiDiagnosticsTuneBadge {
padding: 4px 10px;
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: rgba(251, 191, 36, 0.9);
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.3);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.aiDiagnosticsTuneBadge.isActive {
opacity: 1;
transform: translateY(0);
}
.aiDiagnosticsTiming {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.aiDiagnosticsStatusBadge.status-idle {
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
}
.aiDiagnosticsStatusBadge.status-running {
color: #fde68a;
background: rgba(250, 204, 21, 0.18);
}
.aiDiagnosticsStatusBadge.status-pass {
color: #86efac;
background: rgba(34, 197, 94, 0.2);
}
.aiDiagnosticsStatusBadge.status-fail {
color: #fca5a5;
background: rgba(248, 113, 113, 0.2);
}
.aiDiagnosticsStatusBadge.status-review {
color: #fde68a;
background: rgba(250, 204, 21, 0.2);
}
.aiDiagnosticsRowActions {
display: flex;
gap: 8px;
align-items: center;
}
.aiDiagnosticsBtn {
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: all 0.15s ease;
}
.aiDiagnosticsBtn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
.aiDiagnosticsBtn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.aiDiagnosticsBtn--accent {
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.2);
color: #fecdd3;
}
.aiDiagnosticsRowDetails {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 16px;
}
.aiDiagnosticsSummaryGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.aiDiagnosticsSummaryCard {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(0, 0, 0, 0.45));
border: 1px solid rgba(248, 113, 113, 0.18);
border-radius: 12px;
padding: 10px 12px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.aiDiagnosticsSummaryLabel {
display: block;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.aiDiagnosticsSummaryValue {
display: block;
margin-top: 4px;
font-size: 13px;
color: rgba(255, 255, 255, 0.92);
word-break: break-word;
}
.aiDiagnosticsSectionLabel {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 8px;
}
.aiDiagnosticsToolCalls {
margin-top: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
padding: 10px 12px;
}
.aiDiagnosticsToolCalls summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
.aiDiagnosticsToolCallsBody {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.aiDiagnosticsToolCall {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
padding: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
}
.aiDiagnosticsToolCallHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.aiDiagnosticsToolCallName {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(248, 113, 113, 0.85);
}
.aiDiagnosticsToolCallTime {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.aiDiagnosticsToolCallInput {
font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
word-break: break-word;
}
.aiDiagnosticsToolCallSummary {
margin-top: 6px;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
.aiDiagnosticsTunePanel {
margin-top: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
padding: 10px 12px;
}
.aiDiagnosticsTunePanel summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.aiDiagnosticsTuneBody {
margin-top: 10px;
display: grid;
gap: 8px;
}
.aiDiagnosticsTuneItem {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
}
.aiDiagnosticsTuneLabel {
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 11px;
}
.aiDiagnosticsTuneValue {
color: rgba(255, 255, 255, 0.85);
text-align: right;
flex: 1;
}
.aiDiagnosticsResponse {
margin-top: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.4);
padding: 10px 12px;
}
.aiDiagnosticsTrace {
margin-top: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
padding: 10px 12px;
}
.aiDiagnosticsTrace summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
.aiDiagnosticsTraceSteps {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
}
.aiDiagnosticsTraceStep {
display: flex;
gap: 10px;
align-items: flex-start;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 8px 10px;
background: rgba(0, 0, 0, 0.35);
}
.aiDiagnosticsTraceType {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(248, 113, 113, 0.8);
min-width: 72px;
}
.aiDiagnosticsTraceBody {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.aiDiagnosticsTraceContent {
color: rgba(255, 255, 255, 0.85);
}
.aiDiagnosticsTraceQueries {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
word-break: break-word;
}
.aiDiagnosticsTraceTime {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
}
.aiDiagnosticsRow.isRunning .aiDiagnosticsTraceType {
color: rgba(250, 204, 21, 0.9);
}
.aiDiagnosticsResponse summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
.aiDiagnosticsResponseBody {
margin-top: 10px;
font-size: 12px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
color: rgba(255, 255, 255, 0.85);
max-height: 50vh;
overflow: auto;
}
.aiDiagnosticsScoreCard {
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.4);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.aiDiagnosticsScoreLabel {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.aiDiagnosticsScoreInput {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.aiDiagnosticsScoreNotes {
min-height: 86px;
resize: vertical;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
}
.aiDiagnosticsScoreNotes::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.aiDiagnosticsPanel .jobHistoryInput:focus {
border-color: rgba(248, 113, 113, 0.45);
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.aiDiagnosticsFooter {
border-top-color: rgba(248, 113, 113, 0.15);
}
.aiDiagnosticsEmpty {
text-align: center;
padding: 32px 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
@media (max-width: 1100px) {
.aiDiagnosticsSummaryGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.aiDiagnosticsRowDetails {
grid-template-columns: 1fr;
}
.aiDiagnosticsStatusBlock {
align-items: flex-start;
}
}
:root[data-theme="light"] .aiDiagnosticsPanel {
background:
radial-gradient(circle at top right, rgba(248, 113, 113, 0.2), transparent 45%),
linear-gradient(180deg, #f8f9fc 0%, #eef1f7 100%);
}
:root[data-theme="light"] .aiDiagnosticsTitle {
color: #b91c1c;
}
:root[data-theme="light"] .aiDiagnosticsSummaryItem strong {
color: #be123c;
}
:root[data-theme="light"] .aiDiagnosticsCategory,
:root[data-theme="light"] .aiDiagnosticsSummaryCard,
:root[data-theme="light"] .aiDiagnosticsScoreCard,
:root[data-theme="light"] .aiDiagnosticsResponse,
:root[data-theme="light"] .aiDiagnosticsTunePanel,
:root[data-theme="light"] .aiDiagnosticsTrace {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .aiDiagnosticsCategoryHeader {
background: #f8fafc;
border-bottom-color: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .aiDiagnosticsCategoryCount {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .aiDiagnosticsSectionLabel {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .aiDiagnosticsToolCalls summary,
:root[data-theme="light"] .aiDiagnosticsTrace summary,
:root[data-theme="light"] .aiDiagnosticsResponse summary,
:root[data-theme="light"] .aiDiagnosticsTunePanel summary {
color: rgba(15, 23, 42, 0.65);
}
:root[data-theme="light"] .aiDiagnosticsRowDetails {
color: rgba(15, 23, 42, 0.75);
}
:root[data-theme="light"] .aiDiagnosticsSummaryLabel {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .aiDiagnosticsToolCalls,
:root[data-theme="light"] .aiDiagnosticsToolCall {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiDiagnosticsQueryText,
:root[data-theme="light"] .aiDiagnosticsSummaryValue,
:root[data-theme="light"] .aiDiagnosticsResponseBody,
:root[data-theme="light"] .aiDiagnosticsTuneValue,
:root[data-theme="light"] .aiDiagnosticsScoreInput,
:root[data-theme="light"] .aiDiagnosticsScoreNotes {
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .aiDiagnosticsQueryDesc,
:root[data-theme="light"] .aiDiagnosticsSectionLabel,
:root[data-theme="light"] .aiDiagnosticsSummaryLabel,
:root[data-theme="light"] .aiDiagnosticsScoreLabel,
:root[data-theme="light"] .aiDiagnosticsQueryEditLabel,
:root[data-theme="light"] .aiDiagnosticsTiming,
:root[data-theme="light"] .aiDiagnosticsTuningStatus {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .aiDiagnosticsInput,
:root[data-theme="light"] .aiDiagnosticsDelay {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
color: #0f172a;
}
:root[data-theme="light"] .aiDiagnosticsInput::placeholder,
:root[data-theme="light"] .aiDiagnosticsScoreInput::placeholder,
:root[data-theme="light"] .aiDiagnosticsScoreNotes::placeholder {
color: rgba(15, 23, 42, 0.4);
}
:root[data-theme="light"] .aiDiagnosticsTuneLabel,
:root[data-theme="light"] .aiDiagnosticsTuningStatus {
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .aiDiagnosticsQueryInput {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.85);
}
:root[data-theme="light"] .aiDiagnosticsQueryEditLabel {
color: rgba(15, 23, 42, 0.55);
}
:root[data-theme="light"] .aiDiagnosticsBtn--ghost {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.65);
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiDiagnosticsTraceSteps,
:root[data-theme="light"] .aiDiagnosticsTraceContent,
:root[data-theme="light"] .aiDiagnosticsTraceQueries {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .aiDiagnosticsTraceStep {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiDiagnosticsToolCallName {
color: #be123c;
}
:root[data-theme="light"] .aiDiagnosticsToolCallInput,
:root[data-theme="light"] .aiDiagnosticsToolCallSummary {
color: rgba(15, 23, 42, 0.7);
}
:root[data-theme="light"] .aiDiagnosticsTraceType {
color: #be123c;
}
:root[data-theme="light"] .aiDiagnosticsRow.isRunning .aiDiagnosticsTraceType {
color: #a16207;
}
:root[data-theme="light"] .aiDiagnosticsStatusBadge.status-idle {
color: rgba(15, 23, 42, 0.65);
background: rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .aiDiagnosticsStatusBadge.status-running {
color: #a16207;
background: rgba(250, 204, 21, 0.2);
}
:root[data-theme="light"] .aiDiagnosticsStatusBadge.status-pass {
color: #166534;
background: rgba(34, 197, 94, 0.2);
}
:root[data-theme="light"] .aiDiagnosticsStatusBadge.status-fail {
color: #991b1b;
background: rgba(248, 113, 113, 0.2);
}
:root[data-theme="light"] .aiDiagnosticsStatusBadge.status-review {
color: #92400e;
background: rgba(250, 204, 21, 0.2);
}
:root[data-theme="light"] .aiDiagnosticsRow.isAutoTuning {
box-shadow:
inset 0 0 0 2px rgba(245, 158, 11, 0.55),
0 0 18px rgba(245, 158, 11, 0.2);
background: linear-gradient(120deg, rgba(251, 191, 36, 0.12), rgba(255, 255, 255, 0));
border-color: rgba(245, 158, 11, 0.3);
}
:root[data-theme="light"] .aiDiagnosticsSummaryItem {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.6);
}
:root[data-theme="light"] .aiDiagnosticsTuneBadge {
color: #b45309;
background: rgba(251, 191, 36, 0.2);
border-color: rgba(245, 158, 11, 0.35);
}
:root[data-theme="light"] .aiDiagnosticsBtn {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.75);
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiDiagnosticsBtn--accent {
background: rgba(248, 113, 113, 0.2);
color: #9f1239;
border-color: rgba(248, 113, 113, 0.35);
}
:root[data-theme="light"] .aiDiagnosticsGhostBtn {
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.7);
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .aiDiagnosticsRunAllBtn {
background: linear-gradient(135deg, #fecdd3 0%, #fb7185 100%);
color: #7f1d1d;
}
:root[data-theme="light"] .aiDiagnosticsRunAllBtn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(248, 113, 113, 0.35);
}
:root[data-theme="light"] .aiDiagnosticsAutoTuneBtn {
background: linear-gradient(135deg, #fde68a 0%, #fb923c 100%);
color: #7c2d12;
}
:root[data-theme="light"] .aiDiagnosticsAutoTuneBtn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(251, 146, 60, 0.35);
}
:root[data-theme="light"] .aiDiagnosticsScoreInput,
:root[data-theme="light"] .aiDiagnosticsScoreNotes {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.12);
}
/* ═══════════════════════════════════════════════════════════════════
NEW SESSION & SHARE BUTTONS
═══════════════════════════════════════════════════════════════════ */
.newSessionBtn,
.shareBtn {
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.15s ease;
background: transparent;
color: var(--muted2);
display: inline-flex;
align-items: center;
justify-content: center;
}
.newSessionBtn:hover,
.shareBtn:hover {
background: transparent;
color: var(--fg);
}
.newSessionIcon,
.shareBtnIcon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.newSessionIcon svg,
.shareBtnIcon svg {
width: 14px;
height: 14px;
display: block;
}
/* ═══════════════════════════════════════════════════════════════════
SHARE MODAL
═══════════════════════════════════════════════════════════════════ */
.shareModal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
}
.shareModal.is-visible {
display: flex;
}
.shareModal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.shareModal__content {
position: relative;
width: 90%;
max-width: 420px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.shareModal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
}
.shareModal__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--fg);
}
.shareModal__close {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
color: var(--muted2);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 0.15s ease;
}
.shareModal__close svg {
width: 14px;
height: 14px;
}
.shareModal__close:hover {
background: rgba(248, 113, 113, 0.2);
color: #f87171;
}
.shareModal__body {
padding: 20px;
}
.shareModal__desc {
margin: 0 0 16px;
font-size: 13px;
color: var(--muted2);
line-height: 1.5;
}
.shareModal__field {
margin-bottom: 16px;
}
.shareModal__label {
display: block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted3);
}
.shareModal__select,
.shareModal__input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
color: var(--fg);
font-size: 14px;
transition: border-color 0.15s ease;
}
.shareModal__select:focus,
.shareModal__input:focus {
outline: none;
border-color: #6366f1;
}
.shareModal__error {
margin-bottom: 12px;
font-size: 12px;
color: #f87171;
}
.shareModal__submit {
width: 100%;
padding: 12px 16px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.shareModal__submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}
.shareModal__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.shareModal__success {
padding: 20px;
}
.shareModal__successText {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #22c55e;
}
.shareModal__linkRow {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.shareModal__linkInput {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
color: var(--fg);
font-size: 12px;
font-family: var(--font-mono, monospace);
}
.shareModal__copyBtn {
padding: 10px 16px;
border: none;
border-radius: 8px;
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.shareModal__copyBtn:hover {
background: rgba(34, 197, 94, 0.3);
}
.shareModal__hint {
margin: 0;
font-size: 12px;
color: var(--muted3);
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
SHARE MODAL – LIGHT THEME
═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .shareModal__backdrop {
background: rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .shareModal__content {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] .shareModal__header {
background: rgba(0, 0, 0, 0.04);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .shareModal__close {
background: rgba(0, 0, 0, 0.06);
color: #64748b;
}
:root[data-theme="light"] .shareModal__close:hover {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
}
:root[data-theme="light"] .shareModal__select,
:root[data-theme="light"] .shareModal__input {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.15);
color: #1e293b;
}
:root[data-theme="light"] .shareModal__select:focus,
:root[data-theme="light"] .shareModal__input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
:root[data-theme="light"] .shareModal__linkInput {
background: #f8fafc;
border-color: rgba(0, 0, 0, 0.12);
color: #334155;
}
:root[data-theme="light"] .shareModal__copyBtn {
background: rgba(22, 163, 74, 0.1);
color: #16a34a;
}
:root[data-theme="light"] .shareModal__copyBtn:hover {
background: rgba(22, 163, 74, 0.18);
}
/* ═══════════════════════════════════════════════════════════════════
MULTI-COMPANY ACCESS BOARD
═══════════════════════════════════════════════════════════════════ */
/* Company access list card */
.companyAccessListCard {
width: 100%;
min-width: 0;
position: relative;
}
.companyAccessListCard .objectCard__header { flex-wrap: wrap; gap: 8px; }
.companyAccessListCard .objectCard__content { flex: 1; display: flex; flex-direction: column; }
.companyAccessListBody { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.companyAccessListRows { display: grid; gap: 0; }
.companyAccessListHeader {
display: grid;
grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(90px, 1fr));
gap: 8px;
align-items: center;
padding: 12px 6px 10px 16px;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
border-bottom: 1px solid var(--stroke);
}
.companyAccessDetailInline {
position: relative;
margin-top: 16px;
margin-left: 0;
padding-top: 0;
z-index: 2;
animation: objectCardIn 0.25s ease-out;
overflow: visible;
will-change: transform;
}
.companyAccessDetailInline .objectCard {
margin: 0;
/* Match standard objectCard dimensions */
min-width: min(796px, calc(94vw - 24px));
min-height: 520px;
max-height: 520px;
height: 520px;
}
.companyAccessDetailInline .resultCardShell {
overflow: visible;
}
.icpPeopleDetailInline {
margin-top: 16px;
}
.icpPeopleDetailInline .objectCard {
margin: 0;
min-width: min(796px, calc(94vw - 24px));
min-height: 520px;
max-height: 520px;
height: 520px;
}
.icpPeopleDetailInline .resultCardShell {
overflow: visible;
}
.companyAccessCard {
animation: companyAccessCardIn 0.18s ease-out;
}
@keyframes companyAccessCardIn {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.companyHeaderIcon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(20, 24, 35, 0.5);
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.companyHeaderIcon img {
width: 100%;
height: 100%;
display: block;
border-radius: 5px;
}
.companyAccessNavOverlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 40;
opacity: 0;
transition: opacity 0.15s ease;
}
.companyAccessNavOverlay.is-visible {
opacity: 1;
}
.icpPeopleNavOverlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 40;
opacity: 0;
transition: opacity 0.15s ease;
}
.icpPeopleNavOverlay.is-visible {
opacity: 1;
}
.companyAccessNavBtn {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(15, 23, 42, 0.05);
color: var(--text);
box-shadow: none;
transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease;
cursor: pointer;
pointer-events: auto;
}
.companyAccessNavBtn svg { width: 16px; height: 16px; opacity: 0.7; stroke-width: 1.4; }
.icpPeopleNavBtn {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(15, 23, 42, 0.05);
color: var(--text);
box-shadow: none;
transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease;
cursor: pointer;
pointer-events: auto;
}
.icpPeopleNavBtn svg { width: 16px; height: 16px; opacity: 0.7; stroke-width: 1.4; }
.companyAccessNavBtn--prev svg {
transform: rotate(180deg);
}
.icpPeopleNavBtn--prev svg {
transform: rotate(180deg);
}
.companyAccessNavBtn:hover {
transform: scale(1.02);
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.6);
}
.icpPeopleNavBtn:hover {
transform: scale(1.02);
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.6);
}
.companyAccessNavBtn:active {
transform: scale(0.98);
}
.icpPeopleNavBtn:active {
transform: scale(0.98);
}
[data-theme="light"] .companyAccessNavBtn {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(15, 23, 42, 0.25);
color: var(--text);
}
[data-theme="light"] .icpPeopleNavBtn {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(15, 23, 42, 0.25);
color: var(--text);
}
[data-theme="light"] .companyAccessNavBtn:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(15, 23, 42, 0.2);
}
[data-theme="light"] .icpPeopleNavBtn:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(15, 23, 42, 0.2);
}
[data-theme="light"] .companyHeaderIcon {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.7);
color: var(--text);
}
.companyAccessDetailInline--slide-left {
animation: companyAccessSlideLeft 1s linear;
}
.companyAccessDetailInline--slide-right {
animation: companyAccessSlideRight 1s linear;
}
.icpPeopleDetailInline--slide-left {
animation: icpPeopleSlideLeft 1s linear;
}
.icpPeopleDetailInline--slide-right {
animation: icpPeopleSlideRight 1s linear;
}
@keyframes companyAccessSlideLeft {
from { transform: translateX(-64px); }
to { transform: translateX(0); }
}
@keyframes companyAccessSlideRight {
from { transform: translateX(64px); }
to { transform: translateX(0); }
}
@keyframes icpPeopleSlideLeft {
from { transform: translateX(-64px); }
to { transform: translateX(0); }
}
@keyframes icpPeopleSlideRight {
from { transform: translateX(64px); }
to { transform: translateX(0); }
}
@media (max-width: 900px) {
.companyAccessNavBtn {
width: 34px;
height: 34px;
}
.icpPeopleNavBtn {
width: 34px;
height: 34px;
}
}
/* Close button */
.closeDetailBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
margin-right: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.closeDetailBtn:hover { background: rgba(255, 255, 255, 0.2); }
.closeDetailIcon { display: flex; width: 14px; height: 14px; }
.closeDetailIcon svg { width: 100%; height: 100%; stroke: var(--muted); }
.closeDetailBtn:hover .closeDetailIcon svg { stroke: var(--text); }
[data-theme="light"] .closeDetailBtn { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .closeDetailBtn:hover { background: rgba(0, 0, 0, 0.1); }
/* Email compose inline (after results) */
.emailComposeInline--overlay {
margin-top: 16px;
animation: emailCardIn 0.3s ease-out;
}
.emailComposeInline--overlay .emailCard,
.emailComposeInline--stacked .emailCard {
width: 100%;
margin: 0;
border-radius: 8px;
}
.mcBoardRow {
display: grid;
grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(90px, 1fr));
gap: 8px;
align-items: center;
}
.mcBoardCell {
display: flex;
align-items: center;
min-width: 0;
color: var(--text);
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.mcBoardCell--company {
justify-content: flex-start;
}
.mcBoardRow {
padding: 10px 6px 10px 16px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(180, 180, 140, 0.12);
background: rgba(163, 163, 118, 0.03);
cursor: pointer;
transition: background 0.2s ease;
}
.mcBoardRow:hover {
background: rgba(163, 163, 118, 0.07);
transform: none;
}
:root[data-theme="light"] .mcBoardRow {
background: transparent;
border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .mcBoardRow:hover {
background: rgba(15, 23, 42, 0.03);
}
.mcBoardRow.is-selected {
background: var(--mc-olive-bg);
box-shadow: inset 0 0 0 1px var(--mc-olive-border);
}
.mcBoardRow--moving {
z-index: 1;
background: rgba(99, 102, 241, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.mcCompany {
display: flex;
gap: 12px;
align-items: center;
min-width: 0;
}
.mcLogo {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--stroke);
display: grid;
place-items: center;
overflow: hidden;
position: relative;
}
.mcLogo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mcLogo span {
font-weight: 600;
color: var(--muted2);
font-size: 12px;
letter-spacing: 0.02em;
}
.mcLogo--img span {
display: none;
}
.mcLogo--fallback span {
display: block;
}
.mcCompanyInfo {
min-width: 0;
}
.mcCompanyName {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mcCompanyDomain {
font-size: 11px;
color: var(--muted2);
margin-top: 2px;
}
.mcDotWrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
}
.mcDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
opacity: 0;
transform: scale(0.6);
transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
transition-delay: 0ms;
}
.mcDot--pass {
background: #22c55e;
border-color: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
opacity: 1;
transform: scale(1);
}
.mcDot--warn {
background: #f59e0b;
border-color: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
opacity: 1;
transform: scale(1);
}
.mcDot--idle {
background: rgba(148, 163, 184, 0.25);
border-color: rgba(148, 163, 184, 0.35);
opacity: 0.75;
transform: scale(1);
}
.mcDot--loading {
position: relative;
overflow: hidden;
opacity: 0.6;
transform: scale(0.85);
}
.mcDot--loading::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(34, 197, 94, 0.45);
opacity: 0.5;
animation: mcDotPulse 1.2s ease-in-out infinite;
animation-delay: 0ms;
}
.mcDot--loading {
filter: blur(0.6px);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}
@keyframes mcDotPulse {
0% { transform: scale(0.8); opacity: 0.2; }
70% { transform: scale(1.3); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
.mcBoardDetailEmpty,
.mcBoardDetailLoading {
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.12);
padding: 18px;
color: var(--muted2);
text-align: center;
}
.mcBoardDetailTitle {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
/* ═══════════════════════════════════════════════════════════════════════════
EMAIL COMPOSE - Inline objectCard-style compose
═══════════════════════════════════════════════════════════════════════════ */
/* Inline email compose container */
.emailComposeInline {
margin: 16px 0;
animation: emailCardIn 0.3s ease-out;
}
@keyframes emailCardIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Email card - matches objectCard exactly */
.emailCard {
/* No max-width - matches container */
}
/* Header - transparent like objectCard */
.emailCard .objectCard__header {
background: transparent;
}
.emailCard .objectCard__icon {
color: var(--muted);
opacity: 0.6;
}
.emailCard .objectCard__icon svg {
width: 14px;
height: 14px;
}
.emailCard .objectCard__title {
color: var(--text);
font-weight: 600;
font-size: 13px;
}
.emailCard .objectCard__meta {
color: var(--muted);
font-size: 12px;
margin-left: auto;
}
/* Header actions */
.emailHeaderActions {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
}
.emailHeaderBtn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--muted);
cursor: pointer;
transition: all 0.15s ease;
}
.emailHeaderBtn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--stroke);
color: var(--text);
}
.emailHeaderBtn svg {
width: 14px;
height: 14px;
}
.emailHeaderBtn--close:hover {
background: #450a0a;
border-color: #dc2626;
color: #ef4444;
}
/* Email card content */
.emailCardContent {
padding: 16px 14px !important;
}
/* Recipient row - subtle, not purple */
.emailRecipientRow {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--oc-border, rgba(255, 255, 255, 0.12));
border-radius: 8px;
margin-bottom: 16px;
}
.emailRecipientRow--target {
background: rgba(148, 163, 184, 0.06);
border-style: dashed;
}
.emailRecipientTag {
font-size: 9px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted2);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 999px;
padding: 2px 6px;
font-weight: 600;
flex-shrink: 0;
}
.emailAdvice {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 8px;
border: 1px dashed rgba(148, 163, 184, 0.35);
background: rgba(15, 23, 42, 0.35);
}
.emailAdviceLabel {
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--muted2);
font-weight: 600;
margin-bottom: 6px;
}
.emailAdviceText {
font-size: 12px;
color: rgba(255, 255, 255, 0.86);
line-height: 1.45;
}
:root[data-theme="light"] .emailRecipientRow {
background: #f1f5f9;
border-color: var(--oc-border, rgba(12, 18, 34, 0.15));
}
.emailRecipientAvatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--muted2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.emailRecipientImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.emailRecipientInitial {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.emailRecipientInfo {
flex: 1;
min-width: 0;
}
.emailRecipientName {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.emailRecipientRole {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emailLinkedInLink {
font-size: 11px;
color: #0a66c2;
text-decoration: none;
padding: 5px 10px;
background: transparent;
border: 1px solid rgba(10, 102, 194, 0.3);
border-radius: 6px;
font-weight: 500;
transition: all 0.15s ease;
}
.emailLinkedInLink:hover {
background: rgba(10, 102, 194, 0.1);
border-color: rgba(10, 102, 194, 0.5);
}
/* Form rows */
.emailFormRow {
margin-bottom: 14px;
}
.emailFormRow--message {
margin-bottom: 16px;
}
.emailLabel {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.emailInput {
width: 100%;
padding: 10px 12px;
background: transparent;
border: 1px solid var(--oc-border, rgba(255, 255, 255, 0.12));
border-radius: 6px;
color: var(--text);
font-size: 14px;
font-family: var(--font-sans);
outline: none;
transition: all 0.15s ease;
}
.emailInput:focus {
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.emailInput::placeholder {
color: var(--muted2);
}
:root[data-theme="light"] .emailInput {
border-color: var(--oc-border, rgba(12, 18, 34, 0.15));
}
.emailTextarea {
width: 100%;
min-height: 140px;
padding: 10px 12px;
background: transparent;
border: 1px solid var(--oc-border, rgba(255, 255, 255, 0.12));
border-radius: 6px;
color: var(--text);
font-size: 14px;
font-family: var(--font-sans);
line-height: 1.6;
resize: vertical;
outline: none;
transition: all 0.15s ease;
}
.emailTextarea:focus {
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.emailTextarea::placeholder {
color: var(--muted2);
}
:root[data-theme="light"] .emailTextarea {
border-color: var(--oc-border, rgba(12, 18, 34, 0.15));
}
/* Smooth text reveal animation - left to right */
@keyframes lineRevealLTR {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.emailInput.typing,
.emailTextarea.typing {
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
caret-color: transparent;
}
/* Form row needs position for overlay */
.emailFormRow {
position: relative;
}
/* Text reveal overlay */
.textRevealOverlay {
z-index: 10;
}
/* Each line reveals left to right smoothly */
.textRevealOverlay .revealLine {
clip-path: inset(0 100% 0 0);
animation: lineRevealLTR ease-out forwards;
will-change: clip-path;
}
.emailFormRow--message:has(.typing)::after {
opacity: 1;
animation: typingCursor 0.8s step-end infinite;
}
/* Templates row */
.emailTemplates {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.emailTemplatesLabel {
font-size: 11px;
color: var(--muted);
font-weight: 500;
}
/* Template buttons - with colored border to show action */
.emailTemplateBtn {
padding: 5px 10px;
background: transparent;
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 6px;
color: var(--text);
font-size: 11px;
font-weight: 500;
font-family: var(--font-sans);
cursor: pointer;
transition: all 0.15s ease;
position: relative;
z-index: 1;
}
.emailTemplateBtn.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.emailTemplateBtn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 180px;
max-width: 280px;
padding: 10px 12px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(14, 18, 32, 0.98), rgba(8, 12, 22, 0.98));
border: 1px solid rgba(148, 163, 184, 0.28);
color: rgba(255, 255, 255, 0.94);
font-size: 11px;
line-height: 1.4;
text-align: left;
white-space: pre-line;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.emailTemplateBtn[data-tooltip]::before {
content: "";
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
width: 8px;
height: 8px;
background: rgba(10, 14, 24, 0.98);
border: 1px solid rgba(148, 163, 184, 0.28);
border-left: none;
border-top: none;
transform: translateX(-50%) rotate(45deg);
opacity: 0;
transition: opacity 0.15s ease;
}
.emailTemplateBtn--forwardable {
border-style: dashed;
}
.emailTemplateBtn--forwardable.is-active {
background: rgba(34, 197, 94, 0.16);
border-color: rgba(34, 197, 94, 0.5);
color: #86efac;
}
.emailTemplateBtn--forwardable.is-disabled {
opacity: 0.45;
pointer-events: none;
}
.emailTemplateBtn--featured {
border-color: rgba(245, 158, 11, 0.55);
color: #f59e0b;
background: rgba(245, 158, 11, 0.06);
box-shadow: none;
}
.emailTemplateBtn:hover {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.5);
color: var(--text);
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
}
.emailTemplateBtn:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.emailTemplateBtn:hover::before {
opacity: 1;
}
:root[data-theme="light"] .emailTemplateBtn {
border-color: rgba(99, 102, 241, 0.25);
}
:root[data-theme="light"] .emailTemplateBtn:hover {
background: rgba(99, 102, 241, 0.08);
border-color: rgba(99, 102, 241, 0.4);
}
/* Footer - transparent like objectCard */
.emailCardFooter {
display: flex !important;
align-items: center;
gap: 12px;
padding: 10px 14px !important;
background: transparent !important;
}
/* Send button - with colored border */
.emailSendBtn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: transparent;
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 6px;
color: #22c55e;
font-size: 12px;
font-weight: 600;
font-family: var(--font-sans);
cursor: pointer;
transition: all 0.15s ease;
}
.emailSendBtn:hover {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.6);
}
.emailSendBtn svg {
width: 14px;
height: 14px;
}
:root[data-theme="light"] .emailSendBtn {
border-color: rgba(34, 197, 94, 0.35);
}
:root[data-theme="light"] .emailSendBtn:hover {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.5);
}
/* Discard button - with colored border */
.emailDiscardBtn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
background: transparent;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 6px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
font-family: var(--font-sans);
cursor: pointer;
transition: all 0.15s ease;
margin-left: auto;
}
.emailDiscardBtn:hover {
background: #450a0a;
border-color: rgba(239, 68, 68, 0.5);
color: #f87171;
}
.emailDiscardBtn svg {
width: 13px;
height: 13px;
}
/* Light mode adjustments */
:root[data-theme="light"] .emailDiscardBtn {
border-color: rgba(239, 68, 68, 0.25);
}
:root[data-theme="light"] .emailDiscardBtn:hover {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.4);
}
/* Toast notification */
.emailToast {
position: fixed;
bottom: 100px;
right: 24px;
padding: 12px 20px;
background: rgba(34, 197, 94, 0.95);
color: #fff;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 9999;
animation: toastIn 0.3s ease;
}
.emailToast.out {
animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-20px); }
}
/* Email button on person rows */
.emailPersonBtn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--muted);
cursor: pointer;
transition: all 0.15s ease;
opacity: 0;
}
.personRow:hover .emailPersonBtn,
.ocList__item:hover .emailPersonBtn {
opacity: 1;
}
.emailPersonBtn:hover {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
color: #818cf8;
}
.emailPersonBtn svg {
width: 14px;
height: 14px;
}
/* Add to CRM button on person rows */
.addToCrmBtn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--muted);
cursor: pointer;
transition: all 0.15s ease;
opacity: 0;
}
.personRow:hover .addToCrmBtn,
.ocList__item:hover .addToCrmBtn {
opacity: 1;
}
.addToCrmBtn:hover {
background: rgba(255, 122, 89, 0.1);
border-color: rgba(255, 122, 89, 0.3);
color: #ff7a59;
}
.addToCrmBtn svg {
width: 14px;
height: 14px;
}