/* ==========================================================================
Aços Vital — Sistema de Vendas B2B & IA Atendente 24/7 WhatsApp
Design system (single stylesheet, no build step).
Sections: 01 tokens · 02 base & components · 03 shell · 04 views
Theme: light default, dark via [data-theme="dark"] or prefers-color-scheme.
========================================================================== */
/* ==========================================================================
01 · TOKENS — Aços Vital design system
Brand: Navy #0E2B54 · Vital Blue #1C5DA0 · Steel #637080 · Accent #E35A2B
Background #F3F6F9 · Success #377748
Semantic tokens drive every component. Views must use these, never raw hex.
========================================================================== */
:root {
color-scheme: light;
/* Brand constants (identical in both themes) */
--brand-navy: #0E2B54;
--brand-navy-deep: #081A34;
--brand-blue: #1C5DA0;
--brand-steel: #637080;
--brand-orange: #E35A2B;
/* Surfaces */
--bg: #F3F6F9;
--bg-subtle: #EDF1F6;
--surface: #FFFFFF;
--surface-2: #F8FAFC;
--surface-3: #EEF2F7;
--surface-inverse: #0E2B54;
--qr-paper: #FFFFFF; /* Scanner quiet zone stays white in both themes. */
--overlay: rgba(8, 20, 40, 0.42);
--glass: rgba(255, 255, 255, 0.72);
/* Lines */
--line: #E3E8EF;
--line-strong: #CDD6E0;
/* Ink (text) — all pass WCAG AA on --surface and --bg */
--ink: #0F1B2D;
--ink-2: #3B4859;
--ink-3: #5F6D7F;
--ink-inverse: #FFFFFF;
--ink-brand: #0E2B54;
/* Interactive */
--primary: #1C5DA0;
--primary-hover: #174E88;
--primary-soft: #EAF2FB;
--primary-ink: #174E88;
--accent: #E35A2B;
--accent-hover: #CC4B1F;
--accent-soft: #FDEEE8;
--accent-ink: #B8431A; /* accent as text: 4.9:1 on white */
--action-primary-bg: var(--primary);
--action-primary-hover: var(--primary-hover);
--action-primary-ink: var(--ink-inverse);
--action-accent-bg: #B8431A;
--action-accent-hover: #9B3514;
--action-accent-ink: #FFFFFF;
--control-line: #7D8B9B;
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
/* Status — reserved for state; always pair with icon + label */
--success: #377748;
--success-soft: #E8F4EC;
--success-ink: #2C6039;
--warning: #B87400;
--warning-soft: #FFF4E0;
--warning-ink: #8A5700;
--danger: #C62828;
--danger-soft: #FDECEC;
--danger-ink: #A61F1F;
/* WhatsApp channel */
--wa-green: #25D366;
--wa-teal: #128C7E;
--wa-header: #0B5C54;
--wa-wallpaper: #EFEAE2;
--wa-bubble-in: #FFFFFF;
--wa-bubble-out: #D9FDD3;
--wa-ink: #111B21;
/* Pipeline stages: ordered progression = one sequential blue ramp, won = success.
Used only on small marks (dots, rails, bars) with the stage number/label beside. */
--stage-1: #8DB4DF;
--stage-2: #5A8FCB;
--stage-3: #2F6DB0;
--stage-4: #1B4A86;
--stage-5: #377748;
/* Data viz: single-series magnitude uses the blue ramp */
--viz-fill: #2F6DB0;
--viz-track: #E6EEF7;
--viz-grid: #E8EDF3;
/* Typography */
--font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.8125rem; /* 13 */
--text-md: 0.875rem; /* 14 */
--text-base: 0.9375rem; /* 15 */
--text-lg: 1.0625rem; /* 17 */
--text-xl: 1.25rem; /* 20 */
--text-2xl: 1.625rem; /* 26 */
--text-3xl: 2.125rem; /* 34 */
--text-hero: 3rem; /* 48 */
/* Spacing (4px grid) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* Radius */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-pill: 999px;
/* Elevation — layered, tinted with navy */
--shadow-xs: 0 1px 2px rgba(14, 43, 84, 0.05);
--shadow-sm: 0 1px 2px rgba(14, 43, 84, 0.04), 0 2px 6px rgba(14, 43, 84, 0.05);
--shadow-md: 0 2px 4px rgba(14, 43, 84, 0.04), 0 8px 20px rgba(14, 43, 84, 0.08);
--shadow-lg: 0 4px 8px rgba(14, 43, 84, 0.05), 0 18px 44px rgba(14, 43, 84, 0.14);
--shadow-xl: 0 12px 24px rgba(14, 43, 84, 0.08), 0 32px 80px rgba(14, 43, 84, 0.22);
--shadow-glow-accent: 0 6px 20px rgba(227, 90, 43, 0.32);
--shadow-glow-primary: 0 6px 20px rgba(28, 93, 160, 0.28);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 320ms;
--dur-4: 520ms;
--stagger: 45ms;
/* Layout */
--sidebar-w: 264px;
--sidebar-w-collapsed: 76px;
--topbar-h: 72px;
--content-max: 1560px;
/* Legacy aliases — keep old inline styles in JS templates theme-aware */
--vital-navy: var(--ink-brand);
--vital-navy-dark: var(--brand-navy-deep);
--vital-blue: var(--primary);
--vital-blue-light: var(--primary-soft);
--vital-steel: var(--brand-steel);
--vital-steel-light: #9AA7B6;
--vital-accent: var(--accent-ink);
--vital-accent-hover: var(--accent-hover);
--vital-bg: var(--surface-2);
--vital-card: var(--surface);
--vital-text: var(--ink);
--vital-muted: var(--ink-3);
--vital-border: var(--line);
--vital-success: var(--success);
--vital-success-light: var(--success-soft);
--vital-warning: var(--warning);
--vital-warning-light: var(--warning-soft);
--vital-danger: var(--danger);
--vital-danger-light: var(--danger-soft);
--vital-wa-green: var(--wa-green);
--vital-wa-dark: var(--wa-teal);
--vital-wa-bg: var(--wa-wallpaper);
--font-family: var(--font-sans);
}
/* Dark theme — selected steps, not an automatic inversion */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #080F1C;
--bg-subtle: #0B1424;
--surface: #0F1A2C;
--surface-2: #132136;
--surface-3: #192A44;
--surface-inverse: #E8EEF7;
--overlay: rgba(2, 6, 14, 0.62);
--glass: rgba(12, 22, 38, 0.72);
--line: #1F304A;
--line-strong: #2C4264;
--ink: #E8EEF7;
--ink-2: #B6C2D3;
--ink-3: #8898AE;
--ink-inverse: #0A1426;
--ink-brand: #CFE0F5;
--primary: #4C8EDB;
--primary-hover: #6AA3E6;
--primary-soft: rgba(76, 142, 219, 0.14);
--primary-ink: #8EBBEE;
--accent: #F06A3A;
--accent-hover: #FF7F52;
--accent-soft: rgba(240, 106, 58, 0.14);
--accent-ink: #FF9670;
--action-accent-bg: var(--accent);
--action-accent-hover: var(--accent-hover);
--action-accent-ink: var(--ink-inverse);
--control-line: #71839B;
--success: #4FAE68;
--success-soft: rgba(79, 174, 104, 0.14);
--success-ink: #7FD196;
--warning: #E0A43A;
--warning-soft: rgba(224, 164, 58, 0.14);
--warning-ink: #F2C170;
--danger: #EF6464;
--danger-soft: rgba(239, 100, 100, 0.14);
--danger-ink: #F79B9B;
--wa-header: #1F2C34;
--wa-wallpaper: #0B141A;
--wa-bubble-in: #1F2C34;
--wa-bubble-out: #005C4B;
--wa-ink: #E9EDEF;
--stage-1: #3E6594;
--stage-2: #4F82BF;
--stage-3: #6A9FDB;
--stage-4: #9CC2EE;
--stage-5: #4FAE68;
--viz-fill: #5B97DC;
--viz-track: #17263D;
--viz-grid: #1A2A42;
--vital-steel-light: #8898AE;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.35), 0 32px 80px rgba(0, 0, 0, 0.55);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #080F1C;
--bg-subtle: #0B1424;
--surface: #0F1A2C;
--surface-2: #132136;
--surface-3: #192A44;
--surface-inverse: #E8EEF7;
--overlay: rgba(2, 6, 14, 0.62);
--glass: rgba(12, 22, 38, 0.72);
--line: #1F304A;
--line-strong: #2C4264;
--ink: #E8EEF7;
--ink-2: #B6C2D3;
--ink-3: #8898AE;
--ink-inverse: #0A1426;
--ink-brand: #CFE0F5;
--primary: #4C8EDB;
--primary-hover: #6AA3E6;
--primary-soft: rgba(76, 142, 219, 0.14);
--primary-ink: #8EBBEE;
--accent: #F06A3A;
--accent-hover: #FF7F52;
--accent-soft: rgba(240, 106, 58, 0.14);
--accent-ink: #FF9670;
--action-accent-bg: var(--accent);
--action-accent-hover: var(--accent-hover);
--action-accent-ink: var(--ink-inverse);
--control-line: #71839B;
--success: #4FAE68;
--success-soft: rgba(79, 174, 104, 0.14);
--success-ink: #7FD196;
--warning: #E0A43A;
--warning-soft: rgba(224, 164, 58, 0.14);
--warning-ink: #F2C170;
--danger: #EF6464;
--danger-soft: rgba(239, 100, 100, 0.14);
--danger-ink: #F79B9B;
--wa-header: #1F2C34;
--wa-wallpaper: #0B141A;
--wa-bubble-in: #1F2C34;
--wa-bubble-out: #005C4B;
--wa-ink: #E9EDEF;
--stage-1: #3E6594;
--stage-2: #4F82BF;
--stage-3: #6A9FDB;
--stage-4: #9CC2EE;
--stage-5: #4FAE68;
--viz-fill: #5B97DC;
--viz-track: #17263D;
--viz-grid: #1A2A42;
--vital-steel-light: #8898AE;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.35), 0 32px 80px rgba(0, 0, 0, 0.55);
}
/* ==========================================================================
Shared selection primitives
========================================================================== */
.vital-tabs {
display: flex; gap: var(--sp-1); padding: var(--sp-1); min-width: 0;
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.vital-tab {
display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 44px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm);
background: transparent; color: var(--ink-2); font: inherit; font-size: var(--text-sm); font-weight: 650;
line-height: 1.2; white-space: nowrap; cursor: pointer;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.vital-tab .i { flex: 0 0 auto; color: currentColor; }
.vital-tab:hover:not(:disabled):not(.active):not([aria-selected="true"]):not([aria-pressed="true"]) { background: var(--surface-3); color: var(--ink); }
.vital-tab.active, .vital-tab[aria-selected="true"], .vital-tab[aria-pressed="true"] {
background: var(--surface); border-color: var(--line-strong); color: var(--primary-ink); box-shadow: var(--shadow-xs);
}
.vital-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vital-tab:disabled { color: var(--ink-3); cursor: not-allowed; opacity: .65; }
.vital-tabs--compact { gap: var(--sp-1); }
.vital-tabs--compact .vital-tab { min-height: 44px; padding-inline: var(--sp-3); }
.vital-choice.active, .vital-choice[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
@media (prefers-reduced-motion: reduce) { .vital-tab { transition: none; } }
/* ==========================================================================
02 · BASE & COMPONENTS — reset, type, icons, buttons, forms, cards,
badges, modal, toast, motion utilities
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-feature-settings: "cv11", "ss01", "ss03";
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
h1, h2, h3, h4 {
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.25;
font-weight: 650;
}
strong { font-weight: 650; }
button, input, select, textarea {
font: inherit;
color: inherit;
}
::selection {
background: color-mix(in srgb, var(--primary) 24%, transparent);
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Scrollbars — thin, recessive */
* {
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: var(--line-strong);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
Icons — inline SVG sprite (#i-*) · usage:
-------------------------------------------------------------------------- */
.i {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.i-sm { width: 14px; height: 14px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }
/* Icon tile — tinted square holding an icon */
.icon-tile {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
display: inline-grid;
place-items: center;
background: var(--primary-soft);
color: var(--primary-ink);
flex-shrink: 0;
}
.icon-tile.accent { background: var(--accent-soft); color: var(--accent-ink); }
.icon-tile.success { background: var(--success-soft); color: var(--success-ink); }
.icon-tile.navy { background: color-mix(in srgb, var(--ink-brand) 10%, transparent); color: var(--ink-brand); }
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
--btn-bg: var(--surface);
--btn-ink: var(--ink);
--btn-border: var(--line-strong);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 38px;
padding: 0 var(--sp-4);
border-radius: var(--radius-sm);
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--btn-ink);
font-size: var(--text-md);
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
cursor: pointer;
user-select: none;
isolation: isolate;
overflow: hidden;
transition:
transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: var(--dur-1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Motion uses movement and shadow; solid fills keep text contrast stable. */
.btn-primary::after,
.btn-accent::after {
content: none;
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 700ms var(--ease-out);
}
.btn-primary:hover::after,
.btn-accent:hover::after { transform: translateX(120%); }
.btn-primary {
--btn-bg: var(--action-primary-bg);
--btn-ink: var(--action-primary-ink);
--btn-border: transparent;
}
.btn-primary:hover { --btn-bg: var(--action-primary-hover); box-shadow: var(--shadow-glow-primary); }
.btn-accent {
--btn-bg: var(--action-accent-bg);
--btn-ink: var(--action-accent-ink);
--btn-border: transparent;
}
.btn-accent:hover { --btn-bg: var(--action-accent-hover); box-shadow: var(--shadow-glow-accent); }
.btn-secondary {
--btn-bg: var(--surface);
--btn-ink: var(--ink);
--btn-border: var(--line-strong);
box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { --btn-bg: var(--surface-2); }
.btn-outline {
--btn-bg: transparent;
--btn-ink: var(--primary-ink);
--btn-border: color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-outline:hover { --btn-bg: var(--primary-soft); }
.btn-ghost {
--btn-bg: transparent;
--btn-ink: var(--ink-2);
--btn-border: transparent;
}
.btn-ghost:hover { --btn-bg: var(--surface-3); box-shadow: none; }
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--text-sm); border-radius: var(--radius-xs); }
.btn-lg { height: 46px; padding: 0 var(--sp-6); font-size: var(--text-base); border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-color: var(--btn-ink) transparent var(--btn-ink) transparent;
animation: spin 700ms linear infinite;
}
/* --------------------------------------------------------------------------
Forms
-------------------------------------------------------------------------- */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--sp-4);
}
.form-group label,
.field-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-2);
}
.form-control,
.search-input,
.filter-select {
width: 100%;
height: 40px;
padding: 0 var(--sp-3);
border-radius: var(--radius-sm);
border: 1px solid var(--control-line);
background: var(--surface);
color: var(--ink);
font-size: var(--text-md);
transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
textarea.form-control { height: auto; min-height: 72px; padding: 10px var(--sp-3); resize: vertical; line-height: 1.45; }
.form-control::placeholder,
.search-input::placeholder { color: var(--ink-3); opacity: 1; }
.form-control:hover,
.search-input:hover,
.filter-select:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line-strong)); }
.form-control:focus,
.search-input:focus,
.filter-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--focus-ring);
}
select.form-control,
.filter-select {
appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6D7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
/* Input with a leading icon: */
.input-icon {
position: relative;
display: flex;
align-items: center;
}
.input-icon > .i {
position: absolute;
left: 12px;
color: var(--ink-3);
pointer-events: none;
}
.input-icon > input { padding-left: 38px; }
/* --------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------- */
.card,
.dashboard-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
padding: var(--sp-6);
transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), background-color var(--dur-3);
}
.card-interactive { cursor: pointer; }
.card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.card-title-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.card-title-bar h3 {
font-size: var(--text-lg);
font-weight: 650;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.card-subtitle { font-size: var(--text-sm); color: var(--ink-3); }
/* --------------------------------------------------------------------------
Badges, chips, pills
-------------------------------------------------------------------------- */
.badge-tag,
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1;
white-space: nowrap;
background: var(--surface-3);
color: var(--ink-2);
border: 1px solid transparent;
}
.badge-tag .i, .chip .i { width: 13px; height: 13px; }
.badge-iso, .chip-success { background: var(--success-soft); color: var(--success-ink); }
.badge-cert, .chip-primary { background: var(--primary-soft); color: var(--primary-ink); }
.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip-warning { background: var(--warning-soft); color: var(--warning-ink); }
.chip-danger { background: var(--danger-soft); color: var(--danger-ink); }
.chip-outline { background: transparent; border-color: var(--line-strong); }
/* Stage dot: */
.stage-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--stage, var(--stage-1));
box-shadow: 0 0 0 2px var(--surface);
flex-shrink: 0;
}
/* Live pulse dot */
.pulse-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wa-green);
flex-shrink: 0;
}
.pulse-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
animation: pulse-ring 2s var(--ease-out) infinite;
}
/* --------------------------------------------------------------------------
Modal — animated via .active (open) and .closing (exit)
-------------------------------------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--sp-6);
background: var(--overlay);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
}
.modal-overlay.active {
display: flex;
animation: fade-in var(--dur-3) var(--ease-out) both;
}
.modal-overlay.closing { animation: fade-out var(--dur-2) var(--ease-in-out) both; }
.modal-content {
width: min(680px, 100%);
max-height: min(88vh, 920px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.modal-content.modal-wide { width: min(920px, 100%); }
.modal-overlay.active .modal-content { animation: modal-in var(--dur-4) var(--ease-spring) both; }
.modal-overlay.closing .modal-content { animation: modal-out var(--dur-2) var(--ease-in-out) both; }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-6);
border-bottom: 1px solid var(--line);
}
.modal-header h3 { font-size: var(--text-lg); }
.modal-close {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: var(--ink-3);
cursor: pointer;
transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.modal-close:hover { background: var(--surface-3); color: var(--ink); transform: rotate(90deg); }
.modal-body {
padding: var(--sp-6);
overflow-y: auto;
overscroll-behavior: contain;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-6);
border-top: 1px solid var(--line);
background: var(--surface-2);
}
/* --------------------------------------------------------------------------
Toasts — VitalUI.toast(message, { type })
-------------------------------------------------------------------------- */
.toast-region {
position: fixed;
right: var(--sp-6);
bottom: var(--sp-6);
z-index: 2000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-2);
pointer-events: none;
}
.toast {
--toast-tone: var(--primary);
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: var(--sp-3);
width: min(380px, calc(100vw - 32px));
padding: 14px var(--sp-4);
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
font-size: var(--text-md);
color: var(--ink);
overflow: hidden;
animation: toast-in var(--dur-4) var(--ease-spring) both;
}
.toast.leaving { animation: toast-out var(--dur-2) var(--ease-in-out) both; }
.toast .i { color: var(--toast-tone); margin-top: 1px; }
.toast-title { font-weight: 650; }
.toast-msg { color: var(--ink-2); font-size: var(--text-sm); margin-top: 2px; }
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: var(--toast-tone);
transform-origin: left;
animation: toast-progress linear both;
}
.toast.success { --toast-tone: var(--success); }
.toast.error { --toast-tone: var(--danger); }
.toast.warning { --toast-tone: var(--warning); }
/* --------------------------------------------------------------------------
Tables (base)
-------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--sp-6) * -1); padding: 0 var(--sp-6); }
/* --------------------------------------------------------------------------
Skeleton loading
-------------------------------------------------------------------------- */
.skeleton {
position: relative;
overflow: hidden;
background: var(--surface-3);
border-radius: var(--radius-xs);
color: transparent !important;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
transform: translateX(-100%);
animation: shimmer 1.4s var(--ease-in-out) infinite;
}
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-8) var(--sp-4);
text-align: center;
color: var(--ink-3);
font-size: var(--text-sm);
}
.empty-state .i { width: 28px; height: 28px; opacity: 0.6; }
/* --------------------------------------------------------------------------
Motion utilities
.reveal → rises into place; set style="--i: n" to stagger
.anim-pop → spring scale-in
.flash → brief highlight on value change
-------------------------------------------------------------------------- */
.reveal {
animation: rise var(--dur-4) var(--ease-out) both;
animation-delay: calc(var(--i, 0) * var(--stagger));
}
.anim-pop { animation: pop var(--dur-4) var(--ease-spring) both; }
.anim-fade { animation: fade-in var(--dur-3) var(--ease-out) both; }
.flash { animation: flash 1.1s var(--ease-out); }
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@keyframes pop {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes modal-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes toast-out {
to { opacity: 0; transform: translateX(24px); }
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.55; }
80%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes flash {
0% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
100% { background-color: transparent; }
}
/* View Transitions — only the view stage animates, chrome stays put */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
::view-transition-old(view-stage) { animation: vt-out var(--dur-2) var(--ease-in-out) both; }
::view-transition-new(view-stage) { animation: vt-in var(--dur-4) var(--ease-out) both; }
::view-transition-old(view-title),
::view-transition-new(view-title) { animation-duration: var(--dur-3); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
03 · SHELL — app layout, sidebar rail, top bar, view panels, responsive
========================================================================== */
.app-container {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
min-height: 100vh;
min-height: 100dvh;
transition: grid-template-columns var(--dur-4) var(--ease-emphasized);
}
.app-container.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
/* --------------------------------------------------------------------------
Sidebar — always navy (brand chrome) in both themes
-------------------------------------------------------------------------- */
.sidebar {
--sb-ink: #E6EDF7;
--sb-ink-2: #9FB0C6;
--sb-line: rgba(255, 255, 255, 0.08);
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-3);
color: var(--sb-ink);
background:
radial-gradient(120% 60% at 0% 0%, rgba(28, 93, 160, 0.45) 0%, transparent 60%),
radial-gradient(90% 40% at 100% 100%, rgba(227, 90, 43, 0.14) 0%, transparent 70%),
linear-gradient(180deg, #0E2B54 0%, #0A2246 55%, #071A36 100%);
border-right: 1px solid rgba(255, 255, 255, 0.04);
z-index: 100;
overflow: hidden;
}
.sidebar::before {
/* fine steel grain lines */
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px);
pointer-events: none;
}
.brand-header {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--sb-line);
margin-bottom: var(--sp-2);
}
.brand-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
width: 100%;
min-height: 42px;
}
.brand-logo-img {
height: 38px;
width: auto;
max-width: 185px;
object-fit: contain;
object-position: left center;
display: block;
transition: opacity var(--dur-2) var(--ease-out);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.brand-header .logo-badge {
display: none;
}
.sidebar-collapsed .brand-header .brand-logo-img,
.app-container.sidebar-collapsed .brand-header .brand-logo-img {
display: none !important;
}
.sidebar-collapsed .brand-header .logo-badge,
.app-container.sidebar-collapsed .brand-header .logo-badge {
display: grid !important;
}
.logo-badge {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 11px;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.2rem;
letter-spacing: -0.04em;
color: #fff;
background: linear-gradient(145deg, #F07046 0%, #E35A2B 45%, #B8431A 100%);
box-shadow: 0 6px 18px rgba(227, 90, 43, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand-text { min-width: 0; transition: opacity var(--dur-2) var(--ease-out); }
.brand-text h1 {
color: #fff;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
.brand-text h1 span { color: #FF9670; }
.brand-text p {
font-size: 0.68rem;
color: var(--sb-ink-2);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-top: 2px;
}
.nav-section-label {
padding: var(--sp-2) var(--sp-3) var(--sp-1);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: rgba(159, 176, 198, 0.7);
white-space: nowrap;
transition: opacity var(--dur-2);
}
.nav-menu {
position: relative;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
/* Sliding active indicator (positioned by VitalUI.syncNavIndicator) */
.nav-indicator {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 44px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.18);
transition: transform var(--dur-4) var(--ease-spring), height var(--dur-3) var(--ease-out), opacity var(--dur-2);
pointer-events: none;
opacity: 0;
}
.nav-indicator::before {
content: "";
position: absolute;
left: 0;
top: 11px;
bottom: 11px;
width: 3px;
border-radius: 0 3px 3px 0;
background: #FF7A4D;
box-shadow: 0 0 12px rgba(255, 122, 77, 0.8);
}
.nav-item {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--sp-3);
height: 44px;
padding: 0 var(--sp-3);
border-radius: var(--radius-md);
color: var(--sb-ink-2);
font-size: var(--text-md);
font-weight: 550;
cursor: pointer;
white-space: nowrap;
transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.nav-item.active { color: #fff; }
.nav-item:focus-visible { box-shadow: 0 0 0 2px rgba(255, 150, 112, 0.6); }
.nav-item .i { width: 19px; height: 19px; transition: transform var(--dur-3) var(--ease-spring); }
.nav-item:hover .i { transform: scale(1.08); }
.nav-item .nav-label { flex: 1; transition: opacity var(--dur-2); }
.nav-badge {
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: var(--radius-pill);
display: inline-grid;
place-items: center;
font-size: 0.68rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: rgba(255, 255, 255, 0.12);
color: #fff;
transition: opacity var(--dur-2);
}
.nav-badge.live {
display: inline-flex;
gap: 5px;
background: rgba(37, 211, 102, 0.16);
color: #6CF0A0;
letter-spacing: 0.06em;
}
.nav-badge.live .pulse-dot { width: 6px; height: 6px; }
/* Attention count (e.g. overdue receivables) */
.nav-badge.nav-badge-alert { background: rgba(240, 106, 58, 0.22); color: #FFB195; }
.sidebar-footer {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--sb-line);
font-size: var(--text-xs);
color: var(--sb-ink-2);
white-space: nowrap;
overflow: hidden;
}
.sidebar-footer .status-indicator {
display: flex;
align-items: center;
gap: var(--sp-2);
color: #fff;
font-weight: 600;
font-size: var(--text-sm);
}
.sidebar-footer .meta-row { display: flex; align-items: center; gap: 6px; }
.sidebar-footer .cert-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sidebar-footer .cert-row span {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.07);
color: #CFE0F5;
font-weight: 600;
font-size: 0.66rem;
}
.sidebar-toggle {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-3);
height: 38px;
padding: 0 var(--sp-3);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--sb-ink-2);
font-size: var(--text-sm);
cursor: pointer;
white-space: nowrap;
transition: background-color var(--dur-2), color var(--dur-2);
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar-toggle .i { transition: transform var(--dur-4) var(--ease-spring); }
/* Collapsed rail */
.sidebar-collapsed .brand-text,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-section-label,
.sidebar-collapsed .sidebar-footer,
.sidebar-collapsed .sidebar-toggle .nav-label { opacity: 0; pointer-events: none; }
.sidebar-collapsed .nav-badge {
position: absolute;
top: 5px;
left: 30px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 0.58rem;
}
.sidebar-collapsed .nav-badge.live { display: none; }
.sidebar-collapsed .sidebar-toggle .i { transform: rotate(180deg); }
.sidebar-collapsed .sidebar-footer { height: 0; padding: 0; border: 0; }
/* --------------------------------------------------------------------------
Main + top bar
-------------------------------------------------------------------------- */
.main-wrapper {
min-width: 0;
overflow-x: clip;
display: flex;
flex-direction: column;
}
.top-navbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
min-height: var(--topbar-h);
padding: var(--sp-3) var(--sp-8);
background: var(--glass);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-3), box-shadow var(--dur-3);
}
.top-navbar.scrolled {
border-bottom-color: var(--line);
box-shadow: 0 6px 24px -12px rgba(14, 43, 84, 0.18);
}
.top-left { flex: 1; min-width: 0; view-transition-name: view-title; }
.top-left h1 {
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-left p {
font-size: var(--text-sm);
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-right {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
.top-divider { width: 1px; height: 24px; background: var(--line); margin: 0 var(--sp-1); }
/* Theme toggle: sun/moon crossfade */
.theme-toggle { position: relative; }
.theme-toggle .i { position: absolute; transition: transform var(--dur-4) var(--ease-spring), opacity var(--dur-2); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
View stage
-------------------------------------------------------------------------- */
.view-stage {
flex: 1;
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--sp-6) var(--sp-8) var(--sp-12);
view-transition-name: view-stage;
}
.view-panel { display: none; }
.view-panel.active {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
/* Fallback entrance when View Transitions API is unavailable */
.view-panel.entering { animation: vt-in var(--dur-4) var(--ease-out) both; }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
.top-right .btn-label-optional { display: none; }
}
@media (max-width: 1080px) {
.app-container,
.app-container.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.app-container .brand-text,
.app-container .nav-label,
.app-container .nav-section-label,
.app-container .sidebar-footer,
.app-container .sidebar-toggle { opacity: 0; pointer-events: none; }
.app-container .sidebar-footer { height: 0; padding: 0; border: 0; }
.app-container .nav-badge { position: absolute; top: 5px; left: 30px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.58rem; }
.app-container .nav-badge.live { display: none; }
.top-navbar { padding: var(--sp-3) var(--sp-6); }
.view-stage { padding: var(--sp-5) var(--sp-6) var(--sp-12); }
}
@media (max-width: 720px) {
.app-container,
.app-container.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.sidebar {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
height: auto;
flex-direction: row;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
border-right: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-header,
.nav-section-label,
.sidebar-footer,
.sidebar-toggle { display: none; }
.nav-menu { flex-direction: row; justify-content: space-around; }
.nav-item {
flex: 1;
flex-direction: column;
justify-content: center;
gap: 2px;
height: 54px;
padding: 0;
font-size: 0.66rem;
}
.app-container .nav-label { display: none; }
.nav-item::after {
content: attr(data-short);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.nav-item { min-width: 0; }
.app-container .nav-badge { left: calc(50% + 6px); }
.nav-indicator { height: 54px; }
.nav-indicator::before { left: 30%; right: 30%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
.top-navbar { padding: var(--sp-3) var(--sp-4); }
.top-left p, .top-right .btn-secondary, .top-right .top-divider, .top-right .btn-primary, .top-right .btn-label-compact { display: none; }
.top-right .btn-accent { width: 38px; padding: 0; }
.top-left h1 { font-size: var(--text-lg); }
.view-stage { padding: var(--sp-4) var(--sp-4) 96px; }
.toast-region { right: var(--sp-4); left: var(--sp-4); bottom: 84px; align-items: stretch; }
}
/* Print: hide chrome */
@media print {
.sidebar, .top-navbar, .toast-region { display: none !important; }
.app-container { display: block; }
.view-stage { padding: 0; }
}
/* 04 · VIEW — overview (owned by sprint agent) */
/* --------------------------------------------------------------------------
KPI stat tiles
-------------------------------------------------------------------------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-5);
}
.overview-alerts[hidden] { display: none; }
.overview-alerts { display: grid; gap: var(--sp-3); }
.overview-alerts h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.overview-alert-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.overview-alert-action {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.overview-alert-action:hover { border-color: var(--line-strong); background: var(--surface-3); }
.overview-alert-action .i { color: var(--warning-ink); flex: none; }
.overview-alert-action.is-danger .i { color: var(--danger-ink); }
.overview-alert-action:focus-visible,
.overview-finance-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.overview-finance { display: grid; gap: var(--sp-3); }
.overview-finance .card-title-bar { margin-bottom: 0; }
.overview-finance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-5);
}
.overview-finance-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
min-width: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
.overview-finance-tile .stat-label { margin-bottom: var(--sp-3); }
.overview-finance-tile .stat-value { display: block; margin-bottom: var(--sp-2); }
@media (max-width: 1080px) {
#nav-wa-status { display: none; }
}
.stat-tile {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-5);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.stat-tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.stat-tile.spotlight::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%);
transition: opacity var(--dur-3) var(--ease-out);
pointer-events: none;
}
.stat-tile.spotlight:hover::before { opacity: 1; }
.stat-head {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.stat-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-3);
}
.stat-value {
position: relative;
z-index: 1;
font-size: var(--text-2xl);
font-weight: 650;
color: var(--ink);
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: var(--sp-3);
white-space: nowrap;
}
.stat-value.skeleton { display: inline-block; min-width: 120px; height: 1.3em; border-radius: var(--radius-xs); }
.stat-context {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--text-sm);
color: var(--ink-3);
}
.stat-context-strong {
font-weight: 650;
color: var(--ink-2);
}
.stat-context-strong.skeleton { display: inline-block; min-width: 100px; height: 1em; border-radius: var(--radius-xs); }
/* Attainment meter (revenue tile only) */
.stat-meter {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-meter-track {
height: 6px;
border-radius: var(--radius-pill);
background: var(--viz-track);
overflow: hidden;
}
.stat-meter-fill {
height: 100%;
width: 100%;
border-radius: var(--radius-pill);
background: var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-4) var(--ease-spring), background-color var(--dur-3) var(--ease-out);
}
.stat-meter-fill.is-complete { background: var(--success); }
.stat-meter-row {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-sm);
color: var(--ink-3);
}
.trend-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
flex-shrink: 0;
}
.trend-badge .i { width: 12px; height: 12px; }
.trend-badge.up { background: var(--success-soft); color: var(--success-ink); }
.trend-badge.down { background: var(--danger-soft); color: var(--danger-ink); }
/* --------------------------------------------------------------------------
Analytics rows (funnel + segments, differentiators + table)
-------------------------------------------------------------------------- */
.overview-row {
display: grid;
gap: var(--sp-5);
}
.overview-row.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Differentiators strip above a full-width deals table (7 columns need the room) */
.overview-row.cols-wide { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1080px) {
.overview-row.cols-2,
.overview-row.cols-wide { grid-template-columns: 1fr; }
}
.card-title-bar h3 .i { color: var(--ink-3); margin-right: 2px; }
/* --------------------------------------------------------------------------
Horizontal bar charts — shared anatomy for funnel + segment rows
Mark spec: bar height 24px, 4px rounded data-end, square baseline,
value label sits at the tip in ink (never in the series color).
-------------------------------------------------------------------------- */
.funnel-chart,
.segment-chart {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.funnel-row,
.segment-row {
position: relative;
display: grid;
align-items: center;
gap: var(--sp-3);
padding: 7px var(--sp-2);
border-radius: var(--radius-sm);
transition: background-color var(--dur-2) var(--ease-out);
}
.funnel-row { grid-template-columns: 148px 1fr 34px; cursor: pointer; }
.segment-row { grid-template-columns: 128px 1fr; }
.funnel-row:hover,
.funnel-row:focus-visible,
.segment-row:hover,
.segment-row:focus-visible {
background: var(--surface-2);
}
.funnel-row:focus-visible,
.segment-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.funnel-label {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
font-size: var(--text-sm);
color: var(--ink);
}
.funnel-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 50%;
background: var(--surface-3);
color: var(--ink-3);
font-size: 0.68rem;
font-weight: 700;
}
.funnel-num .i { width: 11px; height: 11px; color: var(--danger); }
.funnel-name,
.segment-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.segment-name { font-size: var(--text-sm); color: var(--ink); }
.funnel-bar-track,
.segment-bar-track {
position: relative;
height: 24px;
background: var(--viz-track);
border-radius: 4px;
}
.funnel-bar-fill,
.segment-bar-fill {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
border-radius: 0 4px 4px 0;
transform: scaleX(0);
transform-origin: left;
transition: width var(--dur-3) var(--ease-out);
}
.segment-bar-fill { background: var(--viz-fill); }
.funnel-bar-fill.is-entering,
.segment-bar-fill.is-entering {
animation: bar-grow var(--dur-4) var(--ease-out) both;
animation-delay: calc(var(--i, 0) * var(--stagger));
}
/* Steady state (post-entrance): fully grown, width transitions on data updates */
.funnel-bar-fill:not(.is-entering),
.segment-bar-fill:not(.is-entering) { transform: scaleX(1); }
.funnel-bar-value,
.segment-bar-value {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: var(--text-xs);
font-weight: 650;
color: var(--ink);
white-space: nowrap;
}
.funnel-count {
text-align: right;
font-size: var(--text-sm);
color: var(--ink-3);
}
@keyframes bar-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Hover/focus tooltip */
.chart-tooltip {
position: absolute;
left: var(--sp-2);
bottom: calc(100% + 6px);
z-index: 5;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: var(--surface-inverse);
color: var(--ink-inverse);
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
box-shadow: var(--shadow-md);
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.funnel-row:hover .chart-tooltip,
.funnel-row:focus-visible .chart-tooltip,
.segment-row:hover .chart-tooltip,
.segment-row:focus-visible .chart-tooltip {
opacity: 1;
transform: translateY(0);
}
/* Loading skeleton bars / empty states inside charts */
.chart-skel {
height: 24px;
border-radius: var(--radius-xs);
margin: 7px var(--sp-2);
}
.funnel-chart .empty-state,
.segment-chart .empty-state { padding: var(--sp-6) var(--sp-2); }
/* --------------------------------------------------------------------------
Differentiators
-------------------------------------------------------------------------- */
.diff-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--sp-4) var(--sp-6);
}
.diff-row {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
}
.diff-copy strong {
display: block;
font-size: var(--text-md);
color: var(--ink);
margin-bottom: 3px;
}
.diff-copy p {
font-size: var(--text-sm);
color: var(--ink-3);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Recent deals table
-------------------------------------------------------------------------- */
.deals-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.deals-table thead th {
position: sticky;
top: 0;
text-align: left;
padding: 10px var(--sp-3);
background: var(--surface-2);
color: var(--ink-3);
font-weight: 650;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.deals-table thead th.num { text-align: right; }
.deals-row {
cursor: pointer;
transition: background-color var(--dur-2) var(--ease-out);
}
.deals-row td {
padding: 10px var(--sp-3);
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.deals-row:hover td,
.deals-row:focus-visible td { background: var(--surface-2); }
.deals-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.deals-row:last-child td { border-bottom: none; }
.deal-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar-initials {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-ink);
font-size: 0.72rem;
font-weight: 700;
}
.deal-client-info { display: flex; flex-direction: column; min-width: 0; }
.deal-client-name {
font-weight: 650;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.deal-client-id { font-size: 0.7rem; color: var(--ink-3); }
.deal-products {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink-2);
}
.deals-table td.num { text-align: right; }
.deal-value { font-weight: 650; color: var(--ink); }
.stage-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); }
.deal-chevron {
width: 24px;
color: var(--ink-3);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.deals-row:hover .deal-chevron,
.deals-row:focus-visible .deal-chevron { opacity: 1; transform: none; }
@media (max-width: 720px) {
.col-lp { display: none; }
.deal-client-name { max-width: 140px; }
}
/* ==========================================================================
04 · VIEW — pipeline (Kanban de Vendas) — owned by sprint agent "pipeline"
Also defines global .tag-segment / .tag-source (reused by the deal modal).
========================================================================== */
/* --------------------------------------------------------------------------
Toolbar
-------------------------------------------------------------------------- */
.pipeline-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
}
.pipeline-controls .input-icon {
flex: 1 1 240px;
max-width: 380px;
}
.pipeline-controls .filter-select {
flex: 0 0 200px;
width: 200px;
}
.pipeline-result-count {
flex: 0 0 auto;
font-size: var(--text-sm);
color: var(--ink-3);
white-space: nowrap;
}
.pipeline-result-count strong { color: var(--ink-2); font-weight: 650; }
.pipeline-toolbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sp-2);
flex: 0 0 auto;
}
.pipeline-refresh-btn .i {
transition: transform var(--dur-3) var(--ease-out);
}
.pipeline-refresh-btn.is-spinning .i {
animation: spin 700ms linear infinite;
}
@media (max-width: 640px) {
.pipeline-controls { flex-direction: column; align-items: stretch; }
.pipeline-controls .input-icon,
.pipeline-controls .filter-select { flex: 1 1 auto; max-width: none; width: 100%; }
.pipeline-result-count { order: 3; }
.pipeline-toolbar-actions { margin-left: 0; width: 100%; justify-content: space-between; }
}
/* --------------------------------------------------------------------------
Board — horizontal-scrolling lane of columns, scroll-snap on narrow
-------------------------------------------------------------------------- */
.kanban-board {
display: flex;
align-items: stretch;
gap: var(--sp-4);
overflow-x: auto;
overflow-y: hidden;
padding-bottom: var(--sp-2);
scroll-snap-type: x proximity;
scroll-padding-left: var(--sp-1);
}
.kanban-column {
position: relative;
flex: 1 1 280px;
min-width: 280px;
max-width: 360px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow: hidden;
max-height: calc(100vh - 260px);
min-height: 360px;
}
/* 3px top rail tinted with the stage token */
.kanban-column::before {
content: "";
display: block;
height: 3px;
flex-shrink: 0;
background: var(--stage, var(--stage-1));
}
.kanban-col-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.kanban-col-heading {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
}
.kanban-col-heading .stage-dot { --stage: var(--stage, var(--stage-1)); }
.kanban-col-num {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 700;
color: var(--ink-3);
flex-shrink: 0;
}
.kanban-col-title {
font-size: var(--text-sm);
font-weight: 650;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-col-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
}
.kanban-count-pill {
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: var(--radius-pill);
display: inline-grid;
place-items: center;
background: var(--surface-3);
color: var(--ink-2);
font-size: var(--text-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.kanban-col-total {
font-size: var(--text-xs);
font-weight: 650;
color: var(--ink-3);
white-space: nowrap;
}
/* Column body — soft recessed lane holding the cards */
.kanban-cards-wrapper {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin: var(--sp-3);
margin-top: var(--sp-2);
padding: var(--sp-2);
overflow-y: auto;
min-height: 140px;
background: var(--surface-2);
border: 1px solid transparent;
border-radius: var(--radius-md);
transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.kanban-cards-wrapper.drag-over {
background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
border: 2px dashed var(--primary);
}
.kanban-drop-placeholder {
border: 2px dashed color-mix(in srgb, var(--primary) 55%, var(--line-strong));
border-radius: var(--radius-md);
background: var(--primary-soft);
height: 64px;
flex-shrink: 0;
animation: fade-in var(--dur-2) var(--ease-out) both;
}
/* Empty column state */
.kanban-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 120px;
padding: var(--sp-4);
text-align: center;
color: var(--ink-3);
font-size: var(--text-xs);
border: 2px dashed var(--line);
border-radius: var(--radius-md);
}
.kanban-empty .i { width: 24px; height: 24px; opacity: 0.55; }
/* --------------------------------------------------------------------------
Deal card
-------------------------------------------------------------------------- */
.deal-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-3);
box-shadow: var(--shadow-xs);
cursor: pointer;
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.deal-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.deal-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }
.deal-card.is-dragging {
opacity: 0.5;
transform: scale(0.98);
cursor: grabbing;
}
.deal-card-grip {
position: absolute;
top: 10px;
right: 10px;
color: var(--ink-3);
opacity: 0;
transition: opacity var(--dur-2) var(--ease-out);
pointer-events: none;
}
.deal-card:hover .deal-card-grip { opacity: 1; }
.deal-card-head {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
padding-right: var(--sp-4);
}
.deal-avatar {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: var(--primary-soft);
color: var(--primary-ink);
font-size: var(--text-xs);
font-weight: 700;
}
.deal-card-titles { min-width: 0; }
.deal-card-client {
font-size: var(--text-sm);
font-weight: 650;
color: var(--ink);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-card-id {
font-size: 0.68rem;
color: var(--ink-3);
}
.deal-card-desc {
font-size: var(--text-xs);
color: var(--ink-3);
margin-bottom: var(--sp-2);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.deal-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: var(--sp-3);
}
/* Owned globally — the deal modal may reuse these two classes */
.tag-segment,
.tag-source {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-xs);
font-size: 0.68rem;
font-weight: 650;
line-height: 1.3;
white-space: nowrap;
}
.tag-segment .i, .tag-source .i { width: 11px; height: 11px; }
.tag-segment {
background: var(--primary-soft);
color: var(--primary-ink);
}
.tag-source {
background: var(--surface-3);
color: var(--ink-2);
}
.tag-source.is-whatsapp {
background: color-mix(in srgb, var(--wa-teal) 16%, var(--surface-2));
color: var(--wa-teal);
}
mark {
background: color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--ink);
border-radius: 3px;
padding: 0 1px;
}
.deal-card-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px var(--sp-2);
border-top: 1px solid var(--line);
padding-top: var(--sp-2);
}
.deal-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
color: var(--ink-3);
}
.deal-stat .i { width: 12px; height: 12px; flex-shrink: 0; }
.deal-value {
font-size: var(--text-sm);
font-weight: 650;
color: var(--ink);
}
/* Advance-stage ghost row */
.btn-card-next {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: var(--sp-3);
padding: 7px var(--sp-2);
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--primary-ink);
font-size: var(--text-xs);
font-weight: 650;
cursor: pointer;
transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.btn-card-next span:first-child { flex-shrink: 0; }
.btn-card-next span:last-child {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-card-next:hover {
background: var(--primary-soft);
border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-card-next .i {
width: 13px;
height: 13px;
transition: transform var(--dur-2) var(--ease-out);
}
.btn-card-next:hover .i { transform: translateX(3px); }
.badge-won {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: var(--sp-3);
padding: 7px var(--sp-2);
background: var(--success-soft);
color: var(--success-ink);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 650;
}
.badge-won .i { width: 13px; height: 13px; }
@media (max-width: 480px) {
.kanban-column { flex: 0 0 84vw; max-width: 84vw; }
}
/* Wide screens: fit all five stages side by side so the whole funnel is visible at once */
@media (min-width: 1360px) {
.kanban-board { gap: var(--sp-3); }
.kanban-column { flex: 1 1 0; min-width: 196px; max-width: none; }
/* Compact column: title gets its own line (wraps), count + total sit beneath */
.kanban-col-header { flex-direction: column; align-items: stretch; gap: 6px; }
.kanban-col-heading { align-items: flex-start; }
.kanban-col-heading .stage-dot { margin-top: 5px; }
.kanban-col-title { white-space: normal; line-height: 1.3; }
.kanban-col-meta { flex-direction: row; align-items: center; justify-content: space-between; }
/* Client names wrap to two lines instead of truncating; avatar yields its width */
.deal-card .deal-avatar { display: none; }
.deal-card-client {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* "Avançar →" only; destination stays available to screen readers and in the column order */
.btn-card-next span:last-child {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* ==========================================================================
04 · VIEW — WhatsApp 24/7 Live Studio
Chat simulator (left) + live AI opportunity extraction / CRM bridge (right).
The WhatsApp chrome follows the --wa-* channel tokens; the panel follows the
product surfaces. Header ink is constant white because --wa-header is dark in
both themes.
========================================================================== */
@property --wa-fade-l {
syntax: "";
inherits: false;
initial-value: 0px;
}
@property --wa-fade-r {
syntax: "";
inherits: false;
initial-value: 40px;
}
.whatsapp-studio {
--wa-on-header: white;
--wa-on-header-2: color-mix(in srgb, var(--wa-on-header) 74%, transparent);
--wa-meta: color-mix(in srgb, var(--wa-ink) 62%, transparent);
--wa-read: var(--primary-ink);
--wa-composer: color-mix(in srgb, var(--wa-bubble-in) 72%, var(--wa-wallpaper));
--wa-hairline: color-mix(in srgb, var(--wa-ink) 10%, transparent);
--wa-h: clamp(560px, calc(100dvh - var(--topbar-h) - var(--sp-6) - var(--sp-12)), 980px);
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
gap: var(--sp-6);
align-items: start;
}
/* Entrance: chat then panel, then the extracted fields cascade */
.view-panel.active .whatsapp-studio > * { animation: rise var(--dur-4) var(--ease-out) both; }
.view-panel.active .whatsapp-studio > :nth-child(2) { animation-delay: 90ms; }
.view-panel.active .lead-field { animation: rise var(--dur-4) var(--ease-out) both; }
.view-panel.active .lead-field:nth-child(1) { animation-delay: calc(160ms + 1 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(2) { animation-delay: calc(160ms + 2 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(3) { animation-delay: calc(160ms + 3 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(4) { animation-delay: calc(160ms + 4 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(5) { animation-delay: calc(160ms + 5 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(6) { animation-delay: calc(160ms + 6 * var(--stagger)); }
.view-panel.active .lead-field:nth-child(7) { animation-delay: calc(160ms + 7 * var(--stagger)); }
.view-panel.active .lead-field.flash { animation: flash 1.1s var(--ease-out); }
/* --------------------------------------------------------------------------
Phone window
-------------------------------------------------------------------------- */
.wa-phone-container {
position: relative;
display: flex;
flex-direction: column;
height: var(--wa-h);
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--wa-wallpaper);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
isolation: isolate;
}
/* Header */
.wa-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: 64px;
padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
background: var(--wa-header);
color: var(--wa-on-header);
position: relative;
z-index: 2;
box-shadow: 0 1px 0 color-mix(in srgb, var(--wa-ink) 8%, transparent);
}
.wa-contact-info {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
}
.wa-avatar {
position: relative;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: -0.04em;
color: var(--wa-on-header);
background: linear-gradient(145deg, color-mix(in srgb, var(--brand-orange) 78%, white) 0%, var(--brand-orange) 48%, color-mix(in srgb, var(--brand-orange) 70%, var(--brand-navy)) 100%);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 35%, transparent), 0 2px 8px color-mix(in srgb, var(--brand-navy-deep) 30%, transparent);
}
.wa-avatar-presence {
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--wa-green);
box-shadow: 0 0 0 2px var(--wa-header);
}
.wa-contact-meta { min-width: 0; }
.wa-contact-name {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-base);
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1.25;
min-width: 0;
}
.wa-contact-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.verified-badge {
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 17px;
height: 17px;
}
.verified-badge svg { width: 17px; height: 17px; overflow: visible; }
.verified-seal { fill: var(--wa-green); stroke: none; }
.verified-check {
fill: none;
stroke: var(--wa-header);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Status line: "online" ⇄ "digitando…" crossfade */
.wa-status {
display: grid;
font-size: var(--text-xs);
line-height: 1.35;
margin-top: 1px;
}
.wa-status > span {
grid-area: 1 / 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.wa-status-online { color: var(--wa-on-header-2); }
.wa-status-typing {
color: color-mix(in srgb, var(--wa-green) 55%, white);
font-weight: 600;
opacity: 0;
transform: translateY(6px);
}
.whatsapp-studio.is-busy .wa-status-online { opacity: 0; transform: translateY(-6px); }
.whatsapp-studio.is-busy .wa-status-typing { opacity: 1; transform: none; }
.wa-header-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
.wa-header-phone {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 550;
color: var(--wa-on-header-2);
padding: 0 var(--sp-2);
}
.wa-icon-btn {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wa-on-header-2);
cursor: pointer;
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-4) var(--ease-spring);
}
.wa-icon-btn:hover {
background: color-mix(in srgb, var(--wa-on-header) 12%, transparent);
color: var(--wa-on-header);
}
.wa-icon-btn:hover .i { transform: rotate(-60deg); }
.wa-icon-btn .i { transition: transform var(--dur-4) var(--ease-spring); }
.wa-icon-btn:active { transform: scale(0.9); }
.wa-icon-btn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wa-on-header) 70%, transparent); }
/* --------------------------------------------------------------------------
Chat window + wallpaper
-------------------------------------------------------------------------- */
.wa-chat-shell {
position: relative;
flex: 1;
min-height: 0;
display: flex;
}
.wa-chat-window {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: var(--sp-3) clamp(var(--sp-3), 5%, var(--sp-10)) var(--sp-5);
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--wa-wallpaper);
background-image:
radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--wa-ink) 7%, transparent) 1.2px, transparent 1.9px),
radial-gradient(circle at 36px 32px, color-mix(in srgb, var(--wa-teal) 11%, transparent) 2px, transparent 2.7px),
repeating-linear-gradient(135deg, color-mix(in srgb, var(--wa-ink) 2.6%, transparent) 0 1px, transparent 1px 12px);
background-size: 48px 48px, 48px 48px, auto;
}
.wa-day-pill {
align-self: center;
margin: var(--sp-1) 0 var(--sp-2);
}
.wa-day-pill span {
display: inline-block;
padding: 5px 12px;
border-radius: var(--radius-sm);
background: var(--wa-bubble-in);
color: var(--wa-meta);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 1px 0.5px color-mix(in srgb, var(--wa-ink) 13%, transparent);
}
.wa-e2e-note {
align-self: center;
display: flex;
align-items: flex-start;
gap: 6px;
max-width: 440px;
margin: 0 0 var(--sp-2);
padding: 7px 12px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--wa-bubble-in) 88%, var(--wa-teal));
color: var(--wa-meta);
font-size: 0.7rem;
line-height: 1.45;
text-align: center;
box-shadow: 0 1px 0.5px color-mix(in srgb, var(--wa-ink) 10%, transparent);
}
.wa-e2e-note .i { color: var(--wa-teal); margin-top: 1px; }
/* Bubbles */
.chat-bubble {
position: relative;
display: flow-root;
max-width: min(78%, 560px);
margin-top: 2px;
padding: 6px 9px 7px 10px;
border-radius: var(--radius-sm);
color: var(--wa-ink);
font-size: var(--text-md);
line-height: 1.45;
overflow-wrap: anywhere;
box-shadow: 0 1px 0.5px color-mix(in srgb, var(--wa-ink) 13%, transparent);
}
.chat-bubble.is-first { margin-top: var(--sp-3); }
.chat-bubble.bot { align-self: flex-start; background: var(--wa-bubble-in); }
.chat-bubble.user { align-self: flex-end; background: var(--wa-bubble-out); }
.chat-bubble.bot.is-first { border-top-left-radius: 0; }
.chat-bubble.user.is-first { border-top-right-radius: 0; }
/* Tails on the first bubble of each group */
.chat-bubble.is-first::before {
content: "";
position: absolute;
top: 0;
width: 8px;
height: 13px;
background: inherit;
}
.chat-bubble.bot.is-first::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.chat-bubble.user.is-first::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.chat-bubble-text { display: inline; }
.chat-bubble-text strong { font-weight: 650; }
.chat-bubble-text s { opacity: 0.75; }
.chat-bubble .wa-mono {
font-family: var(--font-mono);
font-size: 0.86em;
padding: 1px 4px;
border-radius: 4px;
background: color-mix(in srgb, var(--wa-ink) 7%, transparent);
}
/* Timestamp + ticks float into the last line when there is room */
.chat-bubble-meta {
float: right;
position: relative;
top: 5px;
display: inline-flex;
align-items: center;
gap: 3px;
margin: 6px 0 0 var(--sp-3);
font-size: 0.6875rem;
line-height: 1;
color: var(--wa-meta);
white-space: nowrap;
user-select: none;
}
.chat-ticks { display: inline-grid; color: var(--wa-meta); transition: color var(--dur-3) var(--ease-out); }
.chat-ticks svg {
width: 17px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.chat-ticks.is-read { color: var(--wa-read); animation: wa-tick-pop var(--dur-4) var(--ease-spring); }
@keyframes wa-tick-pop {
0% { transform: scale(0.7); }
100% { transform: none; }
}
/* Entrances: user slides in from the right, bot scales from its tail */
.chat-bubble.user.is-new {
transform-origin: 100% 0;
animation: wa-in-user var(--dur-4) var(--ease-spring) both;
}
.chat-bubble.bot.is-new {
transform-origin: 0 0;
animation: wa-in-bot var(--dur-4) var(--ease-spring) both;
}
@keyframes wa-in-user {
from { opacity: 0; transform: translateX(28px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes wa-in-bot {
from { opacity: 0; transform: scale(0.78); }
to { opacity: 1; transform: none; }
}
/* Typing indicator */
.chat-bubble.is-typing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 12px 14px;
}
.wa-typing-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wa-meta);
animation: wa-typing 1.1s var(--ease-in-out) infinite;
}
.wa-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.wa-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* Rich quote card bubble */
.chat-bubble.wa-quote-bubble {
width: min(380px, 86%);
padding: 4px 4px 7px;
}
.wa-quote {
padding: var(--sp-3);
border-radius: 6px;
background: color-mix(in srgb, var(--wa-ink) 4%, transparent);
border: 1px solid var(--wa-hairline);
}
.wa-quote-head {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wa-meta);
}
.wa-quote-head .i { color: var(--wa-teal); }
.wa-quote-tag {
margin-left: auto;
padding: 2px 8px;
border-radius: var(--radius-pill);
border: 1px solid var(--wa-hairline);
font-size: 0.625rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
.wa-quote-title {
margin-top: var(--sp-2);
font-size: var(--text-md);
font-weight: 650;
line-height: 1.35;
}
.wa-quote-items {
list-style: none;
margin-top: var(--sp-2);
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--text-xs);
}
.wa-quote-items li {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
}
.wa-quote-item-name { color: var(--wa-meta); min-width: 0; }
.wa-quote-more { color: var(--wa-meta); font-style: italic; }
.wa-quote-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2) var(--sp-3);
margin-top: var(--sp-3);
}
.wa-quote-grid dt {
font-size: 0.625rem;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wa-meta);
}
.wa-quote-grid dd {
margin-top: 1px;
font-size: var(--text-sm);
font-weight: 600;
}
.wa-quote-grid dd small {
margin-left: 6px;
font-size: 0.7rem;
font-weight: 500;
color: var(--wa-meta);
}
.wa-quote-total {
grid-column: 1 / -1;
padding-top: var(--sp-2);
border-top: 1px dashed var(--wa-hairline);
}
.wa-quote-grid .wa-quote-total dd {
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
}
.wa-quote-norma {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--sp-2);
font-size: 0.7rem;
line-height: 1.4;
color: var(--wa-meta);
}
.wa-quote-norma .i { color: var(--wa-teal); margin-top: 1px; width: 13px; height: 13px; }
.wa-quote-bubble .chat-bubble-meta { margin-right: 5px; }
/* System notice pill (handoff / errors) */
.wa-system-pill {
align-self: center;
margin: var(--sp-3) 0 var(--sp-1);
max-width: 92%;
text-align: center;
}
.wa-system-pill > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 650;
line-height: 1.3;
box-shadow: var(--shadow-xs);
}
/* Soft tones are translucent in dark mode: layer them over an opaque bubble base */
.wa-system-pill.tone-accent > span {
background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--wa-bubble-in);
color: var(--accent-ink);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.wa-system-pill.tone-danger > span {
background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--wa-bubble-in);
color: var(--danger-ink);
border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
.wa-system-pill.is-new { animation: pop var(--dur-4) var(--ease-spring) both; }
/* "New messages" jump pill */
.wa-new-msgs {
position: absolute;
left: 50%;
bottom: var(--sp-3);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border: 1px solid var(--wa-hairline);
border-radius: var(--radius-pill);
background: var(--wa-bubble-in);
color: var(--wa-ink);
font-size: var(--text-xs);
font-weight: 650;
box-shadow: var(--shadow-md);
cursor: pointer;
transform: translateX(-50%);
animation: wa-pill-in var(--dur-4) var(--ease-spring) both;
}
.wa-new-msgs[hidden] { display: none; }
.wa-new-msgs .i { color: var(--wa-teal); }
.wa-new-msgs:hover { box-shadow: var(--shadow-lg); }
@keyframes wa-pill-in {
from { opacity: 0; transform: translate(-50%, 10px) scale(0.9); }
to { opacity: 1; transform: translateX(-50%); }
}
/* --------------------------------------------------------------------------
Quick prompts rail
-------------------------------------------------------------------------- */
.quick-prompts-bar {
--wa-fade-l: 0px;
--wa-fade-r: 40px;
display: flex;
flex-shrink: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 10px 0 4px;
background: var(--wa-composer);
border-top: 1px solid var(--wa-hairline);
scrollbar-width: none;
cursor: grab;
-webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ink) var(--wa-fade-l), var(--ink) calc(100% - var(--wa-fade-r)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, var(--ink) var(--wa-fade-l), var(--ink) calc(100% - var(--wa-fade-r)), transparent 100%);
transition: --wa-fade-l var(--dur-3) var(--ease-out), --wa-fade-r var(--dur-3) var(--ease-out);
}
.quick-prompts-bar::-webkit-scrollbar { display: none; }
.quick-prompts-bar[data-at-start="false"] { --wa-fade-l: 40px; }
.quick-prompts-bar[data-at-end="true"] { --wa-fade-r: 0px; }
.quick-prompts-bar.is-dragging { cursor: grabbing; user-select: none; }
.quick-prompts-bar.is-dragging .prompt-chip { pointer-events: none; }
.quick-prompts-track {
display: inline-flex;
gap: var(--sp-2);
padding: 2px var(--sp-4);
}
.prompt-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px 0 10px;
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--wa-teal) 26%, var(--wa-hairline));
background: var(--wa-bubble-in);
color: var(--wa-ink);
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 1px 0.5px color-mix(in srgb, var(--wa-ink) 8%, transparent);
transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), opacity var(--dur-2);
}
.prompt-chip .i { color: var(--wa-teal); transition: transform var(--dur-4) var(--ease-spring); }
.prompt-chip:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--wa-teal) 60%, transparent);
background: color-mix(in srgb, var(--wa-teal) 8%, var(--wa-bubble-in));
box-shadow: var(--shadow-sm);
}
.prompt-chip:hover .i { transform: scale(1.18) rotate(-8deg); }
.prompt-chip:active { transform: scale(0.94); transition-duration: var(--dur-1); }
.prompt-chip:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-teal) 40%, transparent); }
.whatsapp-studio.is-busy .prompt-chip { opacity: 0.5; cursor: progress; transform: none; }
/* --------------------------------------------------------------------------
Composer
-------------------------------------------------------------------------- */
.wa-input-container {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
padding: var(--sp-2) var(--sp-3) var(--sp-3);
background: var(--wa-composer);
}
.wa-input-pill {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
height: 46px;
padding: 0 6px 0 14px;
border-radius: var(--radius-pill);
background: var(--wa-bubble-in);
border: 1px solid var(--wa-hairline);
cursor: text;
transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wa-input-pill:focus-within {
border-color: color-mix(in srgb, var(--wa-teal) 70%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-teal) 20%, transparent);
}
.wa-input-lead { color: var(--wa-meta); }
.wa-input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
outline: none;
background: transparent;
color: var(--wa-ink);
font-size: var(--text-md);
}
.wa-input::placeholder { color: var(--wa-meta); }
.wa-input:focus-visible { box-shadow: none; }
.wa-clear-btn {
width: 32px;
height: 32px;
display: grid;
place-items: center;
flex-shrink: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wa-meta);
cursor: pointer;
animation: pop var(--dur-3) var(--ease-spring) both;
transition: background-color var(--dur-2);
}
.wa-clear-btn[hidden] { display: none; }
.wa-clear-btn:hover { background: color-mix(in srgb, var(--wa-ink) 8%, transparent); color: var(--wa-ink); }
.wa-send-btn {
width: 46px;
height: 46px;
flex-shrink: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--wa-ink) 9%, transparent);
color: var(--wa-meta);
cursor: pointer;
transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3), box-shadow var(--dur-3), transform var(--dur-3) var(--ease-spring), opacity var(--dur-2);
}
.wa-send-btn .i { width: 19px; height: 19px; transform: translate(-1px, 1px); transition: transform var(--dur-4) var(--ease-spring); }
.wa-send-btn.has-text {
background: var(--wa-teal);
color: var(--wa-on-header);
box-shadow: 0 4px 14px color-mix(in srgb, var(--wa-teal) 40%, transparent);
}
.wa-send-btn.has-text .i { transform: translate(-1px, 1px) rotate(0deg); }
.wa-send-btn:not(.has-text) .i { transform: translate(-1px, 1px) rotate(-24deg) scale(0.9); }
.wa-send-btn.is-popping { animation: wa-send-pop var(--dur-4) var(--ease-spring); }
.wa-send-btn:not(:disabled):hover { transform: scale(1.06); }
.wa-send-btn:not(:disabled):active { transform: scale(0.9); transition-duration: var(--dur-1); }
.wa-send-btn:disabled { cursor: default; }
.wa-send-btn.has-text:disabled { opacity: 0.6; cursor: progress; }
.wa-send-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-teal) 40%, transparent); }
@keyframes wa-send-pop {
0% { transform: scale(0.72); }
100% { transform: none; }
}
/* --------------------------------------------------------------------------
Lead extraction panel — live AI analysis card
-------------------------------------------------------------------------- */
.lead-extraction-panel {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-4);
min-height: var(--wa-h);
padding: var(--sp-5) var(--sp-6) var(--sp-5);
border-radius: var(--radius-xl);
background:
radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%),
var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* Indeterminate scan bar while the agent is analysing a message */
.lead-extraction-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transform: translateX(-100%);
}
.whatsapp-studio.is-busy .lead-extraction-panel::before {
opacity: 1;
animation: wa-scan 1.1s var(--ease-in-out) infinite;
}
@keyframes wa-scan {
from { transform: translateX(-100%); }
to { transform: translateX(250%); }
}
.lead-panel-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--sp-3);
}
.lead-panel-titles { flex: 1; min-width: 180px; }
.lead-panel-titles h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.lead-panel-titles .card-subtitle { margin-top: 2px; }
.lead-live-chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 26px;
padding: 0 10px;
border-radius: var(--radius-pill);
background: var(--success-soft);
color: var(--success-ink);
font-size: var(--text-xs);
font-weight: 650;
white-space: nowrap;
}
.lead-live-chip .pulse-dot { width: 7px; height: 7px; background: var(--success); }
/* Completeness meter (fields filled / total — not a predictive score) */
.lead-completeness {
padding: var(--sp-3) var(--sp-4) var(--sp-4);
border-radius: var(--radius-md);
background: var(--surface-2);
border: 1px solid var(--line);
}
.lead-completeness-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
font-size: var(--text-sm);
}
.lead-completeness-label { color: var(--ink-2); font-weight: 600; }
.lead-completeness-val { color: var(--ink); font-weight: 650; border-radius: 4px; padding: 0 2px; }
.lead-meter {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
margin-top: var(--sp-2);
}
.lead-meter-seg {
position: relative;
height: 6px;
border-radius: 3px;
background: var(--viz-track);
overflow: hidden;
}
.lead-meter-seg::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--viz-fill);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-4) var(--ease-out) calc(var(--i, 0) * 70ms), background-color var(--dur-3);
}
.lead-meter-seg.is-on::after { transform: scaleX(1); }
.lead-completeness.is-complete .lead-meter-seg::after { background: var(--success); }
.lead-meter-note {
margin-top: var(--sp-2);
font-size: var(--text-xs);
color: var(--ink-3);
line-height: 1.45;
}
/* Extracted fields */
.lead-data-card {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
}
.lead-field {
display: grid;
grid-template-columns: minmax(128px, 44%) minmax(0, 1fr);
align-items: center;
gap: var(--sp-3);
min-height: 42px;
padding: 8px var(--sp-4);
border-bottom: 1px solid var(--line);
transition: background-color var(--dur-2);
}
.lead-field:last-child { border-bottom: 0; }
.lead-field:hover { background: var(--surface-2); }
.lead-label {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-sm);
font-weight: 550;
color: var(--ink-3);
}
.lead-label .i { color: var(--ink-3); }
.lead-val {
justify-self: end;
min-width: 0;
text-align: right;
font-size: var(--text-md);
font-weight: 600;
color: var(--ink);
line-height: 1.35;
overflow-wrap: anywhere;
}
.lead-val.is-empty { color: var(--ink-3); font-weight: 500; }
.lead-val .chip { vertical-align: middle; }
.lead-field-hero .lead-val {
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
}
.lead-field-hero .lead-val.is-empty { font-size: var(--text-md); letter-spacing: 0; }
.wa-swap { animation: wa-swap 460ms var(--ease-out); }
@keyframes wa-swap {
from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
to { opacity: 1; transform: none; filter: none; }
}
/* CRM bridge status */
.lead-crm-link {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--radius-md);
background: var(--success-soft);
border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
}
.lead-crm-link[hidden] { display: none; }
.lead-crm-link .icon-tile { background: var(--surface); }
.lead-crm-text { flex: 1; min-width: 0; }
.lead-crm-title { font-size: var(--text-sm); font-weight: 650; color: var(--ink); }
.lead-crm-sub {
font-size: var(--text-xs);
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lead-crm-link,
.lead-convert-btn { flex-shrink: 0; }
/* Spare height sits above the action so the CTA aligns with the composer */
.lead-data-card { margin-bottom: auto; }
.lead-convert-btn { height: 48px; }
.lead-convert-btn .i { transition: transform var(--dur-3) var(--ease-spring); }
.lead-convert-btn:hover .i { transform: translateX(3px); }
.lead-footnote {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
font-size: var(--text-xs);
line-height: 1.5;
color: var(--ink-3);
}
.lead-footnote .i { margin-top: 1px; color: var(--ink-3); }
.lead-footnote strong { color: var(--ink-2); }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
.whatsapp-studio { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: var(--sp-5); }
.wa-header-phone { display: none; }
.lead-extraction-panel { padding: var(--sp-5); }
}
@media (max-width: 1080px) {
.whatsapp-studio { grid-template-columns: minmax(0, 1fr); }
.whatsapp-studio { --wa-h: clamp(560px, 76dvh, 780px); }
.lead-extraction-panel { min-height: 0; }
.wa-header-phone { display: inline-flex; }
}
@media (max-width: 720px) {
.whatsapp-studio { gap: var(--sp-4); }
.whatsapp-studio { --wa-h: max(320px, calc(100dvh - var(--topbar-h) - 180px - env(safe-area-inset-bottom))); }
.wa-phone-container { border-radius: var(--radius-lg); }
.wa-header { min-height: 58px; padding-left: var(--sp-3); }
.wa-avatar { width: 38px; height: 38px; font-size: 1.05rem; }
.wa-header-phone { display: none; }
.wa-chat-window { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.chat-bubble { max-width: 88%; }
.chat-bubble.wa-quote-bubble { width: 92%; }
.wa-input-container { padding: var(--sp-2); }
.lead-extraction-panel { padding: var(--sp-4); gap: var(--sp-4); border-radius: var(--radius-lg); }
}
@media (max-width: 480px) {
.lead-field {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
padding: 10px var(--sp-3);
}
.lead-val { justify-self: start; text-align: left; }
.wa-quote-grid .wa-quote-total dd { font-size: var(--text-lg); }
.wa-quote-tag { display: none; }
}
/* 04 · VIEW — calculator (owned by sprint agent)
Steel calculator: segmented family picker, dynamic spec fields, premium
dark "spec sheet" result panel. ========================================= */
.calc-container {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: var(--sp-6);
align-items: start;
}
.calc-input-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.calc-input-card .card-title-bar h3 { gap: var(--sp-2); }
/* --------------------------------------------------------------------------
Family picker — segmented grid of selectable icon cards
-------------------------------------------------------------------------- */
.calc-family-field { margin-bottom: var(--sp-2); }
.calc-family-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: var(--sp-2);
}
.calc-family-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--sp-3) var(--sp-2);
border-radius: var(--radius-md);
border: 1.5px solid var(--line);
background: var(--surface-2);
color: var(--ink-2);
cursor: pointer;
text-align: center;
transition:
border-color var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
transform var(--dur-3) var(--ease-spring),
box-shadow var(--dur-2) var(--ease-out);
}
.calc-family-card .i { color: var(--ink-3); transition: color var(--dur-2) var(--ease-out); }
.calc-family-card:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
background: var(--surface);
transform: translateY(-1px);
}
.calc-family-card:active { transform: translateY(0) scale(0.97); }
.calc-family-card.active {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--primary-ink);
box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
animation: calc-family-pop var(--dur-3) var(--ease-spring) both;
}
.calc-family-card.active .i { color: var(--primary-ink); }
.calc-family-label { font-size: var(--text-sm); font-weight: 650; }
.calc-family-sub { font-size: 0.68rem; color: var(--ink-3); letter-spacing: -0.01em; }
.calc-family-card.active .calc-family-sub { color: var(--primary-ink); opacity: 0.75; }
@keyframes calc-family-pop {
0% { transform: scale(0.94); }
55% { transform: scale(1.035); }
100% { transform: scale(1); }
}
/* --------------------------------------------------------------------------
Dynamic spec fields — 2-column responsive grid, unit suffix adornments
-------------------------------------------------------------------------- */
.calc-fields-dynamic {
display: flex;
flex-direction: column;
gap: 0;
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.calc-fields-dynamic.calc-fields-leaving { opacity: 0; transform: translateY(4px); }
.calc-fields-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2) var(--sp-4);
margin-top: var(--sp-2);
}
@media (max-width: 560px) {
.calc-fields-grid { grid-template-columns: 1fr; }
}
.calc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.calc-field-full { grid-column: 1 / -1; }
.calc-input-suffix { position: relative; display: flex; align-items: center; }
.calc-input-suffix input { padding-right: 44px; }
.calc-input-suffix .calc-suffix {
position: absolute;
right: 12px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink-3);
pointer-events: none;
white-space: nowrap;
}
.calc-help { font-size: 0.72rem; color: var(--ink-3); line-height: 1.35; }
.calc-checkbox-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-2);
cursor: pointer;
transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.calc-checkbox-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.calc-checkbox-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
flex-shrink: 0;
}
.calc-checkbox-row span { font-size: var(--text-sm); color: var(--ink-2); }
#group-fitting-secdia.is-dimmed { opacity: 0.42; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.calc-run-btn { margin-top: var(--sp-3); }
/* --------------------------------------------------------------------------
Result panel — premium dark "spec sheet"
-------------------------------------------------------------------------- */
.calc-result-box {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-6);
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
color: #fff;
background:
radial-gradient(120% 70% at 100% 0%, rgba(227, 90, 43, 0.16) 0%, transparent 60%),
linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
box-shadow: var(--shadow-lg);
transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
:root[data-theme="dark"] .calc-result-box {
background: var(--surface-3);
border: 1px solid var(--line-strong);
color: var(--ink);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .calc-result-box {
background: var(--surface-3);
border: 1px solid var(--line-strong);
color: var(--ink);
}
}
.calc-result-texture {
position: absolute;
inset: 0;
z-index: 0;
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px);
pointer-events: none;
}
:root[data-theme="dark"] .calc-result-texture {
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 8px);
}
.calc-result-header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.62);
}
:root[data-theme="dark"] .calc-result-header { color: var(--ink-3); }
.calc-result-header .i { width: 14px; height: 14px; }
.calc-result-empty {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: var(--sp-8) var(--sp-4);
text-align: center;
color: rgba(255, 255, 255, 0.55);
font-size: var(--text-sm);
}
:root[data-theme="dark"] .calc-result-empty { color: var(--ink-3); }
.calc-result-empty .i { opacity: 0.55; }
.calc-result-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.calc-result-content.calc-result-pop { animation: calc-result-pop var(--dur-4) var(--ease-spring) both; }
@keyframes calc-result-pop {
0% { opacity: 0.4; transform: scale(0.97) translateY(3px); }
100% { opacity: 1; transform: none; }
}
.calc-price-large {
font-size: clamp(2.4rem, 3.4vw, var(--text-hero));
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
color: #fff;
font-variant-numeric: normal;
}
:root[data-theme="dark"] .calc-price-large { color: var(--ink); }
.calc-result-desc {
font-size: var(--text-base);
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
line-height: 1.4;
}
:root[data-theme="dark"] .calc-result-desc { color: var(--ink-2); }
.calc-breakdown-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding-top: var(--sp-3);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .calc-breakdown-list { border-top-color: var(--line); }
.calc-breakdown-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
font-size: var(--text-sm);
}
.calc-breakdown-row span {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.62);
}
:root[data-theme="dark"] .calc-breakdown-row span { color: var(--ink-3); }
.calc-breakdown-row span .i { width: 14px; height: 14px; flex-shrink: 0; }
.calc-breakdown-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.calc-cert-chips {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.calc-cta { margin-top: auto; position: relative; z-index: 1; }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.calc-container { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.calc-family-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.calc-result-box { padding: var(--sp-5); }
}
/* 04 · VIEW — deal-modal (owned by sprint agent)
Deal Details modal: header/KPIs, stage stepper, audit trail timeline.
New Deal modal: 2-col form grid, masks, validation states.
========================================================================= */
/* --------------------------------------------------------------------------
Deal header — id, client, chips, value, KPI mini-grid
-------------------------------------------------------------------------- */
.deal-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--line);
margin-bottom: var(--sp-4);
}
.deal-modal-heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.deal-modal-id {
font-size: var(--text-xs);
font-weight: 700;
color: var(--ink-3);
letter-spacing: 0.02em;
}
.deal-modal-client { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.deal-modal-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
.deal-modal-value { text-align: right; flex-shrink: 0; }
.deal-modal-value-label {
display: block;
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-bottom: 2px;
}
.deal-modal-value-figure {
display: block;
font-size: var(--text-2xl);
font-weight: 800;
color: var(--accent-ink);
letter-spacing: -0.01em;
}
.deal-quote-link {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-5);
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--primary-soft);
}
.deal-quote-link > div { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.deal-quote-link > div > .i { color: var(--primary-ink); flex: none; }
.deal-quote-link strong, .deal-quote-link small { display: block; overflow-wrap: anywhere; }
.deal-quote-link strong { color: var(--ink); font-size: var(--text-sm); }
.deal-quote-link small { color: var(--ink-2); font-size: var(--text-xs); margin-top: 2px; }
.deal-quote-link button { flex: none; }
.deal-modal-kpis {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.deal-kpi {
display: flex;
align-items: center;
min-width: 0;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-2);
}
.deal-kpi .i { color: var(--primary-ink); flex-shrink: 0; width: 20px; height: 20px; }
.deal-kpi-label {
display: block;
font-size: 0.7rem;
color: var(--ink-3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.deal-kpi > div { min-width: 0; }
/* Long values (names, CNPJ) wrap instead of clipping */
.deal-kpi-value {
display: block;
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink);
line-height: 1.35;
overflow-wrap: anywhere;
}
.deal-modal-section { margin-bottom: var(--sp-5); }
.deal-modal-section .field-label { display: block; margin-bottom: var(--sp-2); }
.deal-modal-materials { color: var(--ink-2); line-height: 1.5; }
.deal-modal-notes {
display: flex;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-md);
background: var(--warning-soft);
border-left: 3px solid var(--warning);
margin-bottom: var(--sp-2);
}
.deal-modal-notes .i { color: var(--warning-ink); flex-shrink: 0; margin-top: 2px; }
.deal-modal-notes strong { display: block; color: var(--ink); font-size: var(--text-sm); margin-bottom: 2px; }
.deal-modal-notes p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; }
/* --------------------------------------------------------------------------
Stage stepper — 5 connected steps, colored --stage-1..5, clickable
-------------------------------------------------------------------------- */
.deal-stage-stepper {
position: relative;
display: flex;
align-items: flex-start;
gap: 0;
}
.deal-stage-track {
position: absolute;
top: 15px;
left: calc(10% );
right: calc(10%);
height: 3px;
background: var(--line);
border-radius: var(--radius-pill);
z-index: 0;
}
.deal-stage-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--stage-2), var(--stage-4));
border-radius: var(--radius-pill);
transition: width var(--dur-4) var(--ease-spring);
}
.deal-stage-step {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 2px;
background: none;
border: none;
cursor: pointer;
color: var(--ink-3);
transition: color var(--dur-2) var(--ease-out);
}
.deal-stage-step:hover .deal-stage-dot { transform: scale(1.08); box-shadow: var(--shadow-sm); }
.deal-stage-step:focus-visible .deal-stage-dot { box-shadow: var(--focus-ring); }
.deal-stage-dot {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-3);
background: var(--surface);
border: 2px solid var(--line-strong);
transition:
background-color var(--dur-3) var(--ease-out),
border-color var(--dur-3) var(--ease-out),
color var(--dur-3) var(--ease-out),
transform var(--dur-3) var(--ease-spring);
}
.deal-stage-step.is-complete .deal-stage-dot {
background: var(--stage-color, var(--primary));
border-color: var(--stage-color, var(--primary));
color: #fff;
}
.deal-stage-step.is-current .deal-stage-dot {
transform: scale(1.14);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color, var(--primary)) 22%, transparent);
}
.deal-stage-label {
font-size: 0.68rem;
font-weight: 650;
text-align: center;
line-height: 1.2;
max-width: 84px;
color: var(--ink-3);
}
.deal-stage-step.is-complete .deal-stage-label { color: var(--ink-2); }
.deal-stage-step.is-current .deal-stage-label { color: var(--ink); font-weight: 750; }
/* --------------------------------------------------------------------------
Audit trail — vertical timeline, per-type node dot + icon
-------------------------------------------------------------------------- */
.deal-audit-section {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
}
.deal-audit-title {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-md);
font-weight: 700;
color: var(--ink);
margin-bottom: var(--sp-3);
}
.deal-audit-title .i { color: var(--ink-3); }
.deal-activities-list {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-3);
max-height: 320px;
overflow-y: auto;
padding: 2px 4px 2px 40px;
margin-top: 2px;
}
.deal-activities-list::before {
content: "";
position: absolute;
left: 18px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--line);
border-radius: 1px;
}
.activity-card {
position: relative;
display: flex;
gap: var(--sp-3);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
font-size: 0.86rem;
transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.activity-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.activity-node {
position: absolute;
left: -32px;
top: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
background: var(--surface-3);
color: var(--ink-3);
box-shadow: 0 0 0 3px var(--surface);
}
.activity-node.badge-creation { background: var(--primary-soft); color: var(--primary-ink); }
.activity-node.badge-stage_change { background: var(--primary-soft); color: var(--primary-ink); }
.activity-node.badge-vip_handoff { background: var(--accent-soft); color: var(--accent-ink); }
.activity-node.badge-note { background: var(--surface-3); color: var(--ink-3); }
.activity-node .i { width: 12px; height: 12px; }
.activity-card-body { flex: 1; min-width: 0; }
.activity-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: 6px;
}
.activity-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.activity-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.68rem;
font-weight: 700;
padding: 2px 9px;
border-radius: var(--radius-pill);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.activity-badge.badge-creation { background: var(--success-soft); color: var(--success-ink); }
.activity-badge.badge-stage_change { background: var(--primary-soft); color: var(--primary-ink); }
.activity-badge.badge-vip_handoff { background: var(--accent-soft); color: var(--accent-ink); }
.activity-badge.badge-note { background: var(--surface-3); color: var(--ink-2); }
.activity-author {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.74rem;
font-weight: 600;
color: var(--ink-3);
}
.activity-author .i { width: 12px; height: 12px; }
.activity-time {
font-size: 0.72rem;
color: var(--ink-3);
font-family: var(--font-mono);
white-space: nowrap;
cursor: default;
}
.activity-desc { color: var(--ink-2); line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.activity-empty {
text-align: center;
padding: var(--sp-5);
color: var(--ink-3);
font-style: italic;
font-size: 0.85rem;
background: var(--surface-2);
border-radius: var(--radius-md);
border: 1px dashed var(--line-strong);
}
.activity-add-box {
margin-top: var(--sp-3);
display: flex;
gap: var(--sp-2);
}
.activity-add-box .form-control { flex: 1; }
/* --------------------------------------------------------------------------
New Deal modal — 2-col grid, adornments, validation states
-------------------------------------------------------------------------- */
.new-deal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--sp-4);
}
.new-deal-span-2 { grid-column: 1 / -1; }
@media (max-width: 520px) {
.new-deal-grid { grid-template-columns: 1fr; }
}
.field-suffix,
.field-prefix { position: relative; display: flex; align-items: center; }
.field-suffix input { padding-right: 40px; }
.field-prefix input { padding-left: 40px; }
.field-suffix-label,
.field-prefix-label {
position: absolute;
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-3);
pointer-events: none;
}
.field-suffix-label { right: 12px; }
.field-prefix-label { left: 12px; }
.field-error {
display: block;
min-height: 15px;
font-size: 0.72rem;
font-weight: 600;
color: var(--danger-ink);
}
.form-control.is-invalid, .form-control[aria-invalid="true"] {
border-color: var(--danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 3000; padding: 12px 16px; background: var(--surface); color: var(--primary-ink); border: 2px solid var(--primary); border-radius: var(--radius-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }