/* ==========================================================================
Volley · Teli-look design system (docs/design/TELI-LOOK.md)
--------------------------------------------------------------------------
Tokens + component classes. Loaded by base.html BEFORE app.css (app.css only
keeps the legacy helper names alive). Every colour here is a token from
TELI-LOOK.md §2; do not hard-code new hex values in templates.
========================================================================== */
:root {
/* --- brand / accent (Teli app.teli.ai :root) --- */
--accent: #124eeb;
--accent-hover: #0d3bb8;
--accent-active: #0a2e8a;
--accent-medium: #4a7aff;
--accent-soft: #3b82f6; /* blue-500: outbound bubbles, focus */
--accent-light: #e8f0fe; /* selected nav pill / active tab */
--accent-lighter: #f0f5ff; /* hover tint surfaces */
--accent-100: #dbeafe; /* blue-100: avatars, selected rows, soft chips */
--accent-tint: rgba(18, 78, 235, 0.08);
--accent-tint-strong: rgba(18, 78, 235, 0.15);
--accent-ring: rgba(18, 78, 235, 0.2);
--accent-hover-bg: rgba(18, 78, 235, 0.05);
/* --- AI / assistant violet, extraction purple --- */
--ai: #4f3ddd;
--ai-light: #eef0fc;
--ai-border: #d9dcfa;
--purple: #9333ea;
--purple-light: #faf5ff;
--purple-text: #6b21a8;
--bucket: #c084fc;
/* --- neutrals (Tailwind gray) --- */
--ink: #111827;
--text-body: #374151;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--text-faint: #c6cacf;
--border: #e5e7eb;
--border-medium: #d1d5db;
--border-faint: #f3f4f5;
--bg-subtle: #f3f4f6;
--bg-secondary: #f9fafb;
--bg-modal: #f4f4f5;
--surface: #ffffff;
--surface-glass: rgba(255, 255, 255, 0.85);
/* --- semantic --- */
--success: #10b981;
--success-bg: #d1fae5;
--success-text: #059669;
--success-border: #a7f3d0;
--success-toast: #19ce81;
--warning: #f59e0b;
--warning-bg: #fef3c7;
--warning-text: #d97706;
--warning-deep: #b45309;
--warning-border: #fde68a;
--danger: #ef4444;
--danger-bg: #fee2e2;
--danger-text: #dc2626;
--danger-border: #fecaca;
--danger-solid: #dc2f47;
--info-bg: #e8f4fd;
/* --- tints for stat tiles (§6.9) --- */
--tint-blue: #f4f9fd;
--tint-green: #f0fff8;
--tint-amber: #fefce8;
--tint-red: #fef2f2;
/* --- charts --- */
--chart-bar-top: #a8c8fb;
--chart-bar-bottom: #4266e0;
--chart-bar-light: #93c5fd;
--chart-track: #eaf2fc;
--chart-ring-track: #eef2f7;
--chart-green: #34d399;
--chart-neutral: #64748b;
--chart-red: #ef4444;
--tooltip-dark: #212933;
/* --- gradients --- */
--gradient-app: linear-gradient(180deg, #ffffff 0%, #f0f8ff 20%, rgba(200, 225, 255, 0.9) 48%, rgba(100, 180, 255, 0.75) 80%, rgba(18, 78, 235, 0.6) 100%);
--gradient-page: linear-gradient(180deg, #f4f7ff, #fafbff 140px, #ffffff 320px);
--gradient-button: linear-gradient(135deg, #124eeb, #3b6ff5 50%, #124eeb);
--gradient-button-hover: linear-gradient(135deg, #0d3db8, #124eeb 50%, #0d3db8);
--gradient-primary: linear-gradient(135deg, #124eeb, #4a7aff);
--gradient-greeting: linear-gradient(90deg, #e0e8ff 0%, #ebeeff 50%, #e4edfc 100%);
--dot-pattern: rgba(18, 78, 235, 0.08);
--gradient-dash: linear-gradient(180deg, #ffffff 0%, #f4f9ff 22%, #e8f2ff 50%, rgba(190, 220, 255, 0.85) 78%, rgba(110, 170, 250, 0.8) 92%, rgba(18, 78, 235, 0.55) 100%);
--gradient-band: linear-gradient(90deg, #dde6ff 0%, #e8ecff 40%, #eef2ff 70%, rgba(243, 246, 255, 0.35) 100%);
/* --- component surfaces and one-off inks the dark block redefines (TL-N, §16.3).
Every value here is the literal the rule carried before the sweep, so light is unchanged. --- */
--card: #ffffff; /* the sidebar logo, the composer, the inbox search */
--surface-2: #fbfcfd; /* the chat area behind the bubbles */
--widget-glass: rgba(255, 255, 255, 0.72);
--widget-ring: rgba(255, 255, 255, 0.6);
--surface-sticky: rgba(255, 255, 255, 0.96);
--section-border: #eef0f4;
--scrim: rgba(15, 23, 42, 0.45);
--scrim-soft: rgba(15, 23, 42, 0.3);
--nav-icon: #4b5563;
--text-label: #505d69;
--text-title: #283040;
--text-sub: #68717d;
--text-preview: #4b5563;
--greeting-pill-bg: rgba(255, 255, 255, 0.9);
--greeting-dot: #93a8f5;
--sparkle: #ffffff;
--green-solid: #16a34a;
--green-deep: #065f46;
--red-deep: #b91c1c;
--amber-tint: #fffbeb;
--green-tint: #ecfdf5;
--blue-tint: #eef4ff;
--border-blue: #d6e3fb;
--info-border: #bfdbfe;
--info-text: #1e3a8a;
--flash-success-bg: #eafbf1;
--flash-success-text: #15803d;
--badge-green-text: #047857;
--badge-dark-bg: #374151;
--badge-dark-text: #ffffff;
--badge-purple-bg: #f3effd;
--badge-purple-text: #7c3aed;
--badge-purple-border: #ddd0fb;
--badge-dashed-border: #93c5fd;
--badge-sample-bg: #fdf9e8;
--badge-sample-text: #b7791f;
--badge-op-bg: #faf9e7;
--badge-count-bg: #eef0f3;
--badge-count-text: #4b5563;
--bubble-draft-text: #3730a3;
--sample-bg: #fff6db;
--sample-text: #c2841a;
--tile-bg: #e3ecfd;
--tile-ai-bg: #eaebff;
--tile-purple-bg: #e9dcfb;
--var-token-bg: #d2d8fc;
--var-token-text: #3b5bdb;
--btn-ai-text: #4f46e5;
--btn-soft-hover: #cfe0fd;
/* --- chart repaint (TL-N, §16.3): services/charts.py bakes its palette into the SVG as
presentation attributes, which any CSS rule outranks. The rules at the foot of this file
restate each baked colour through the token below — identical in light (a no-op), dark
in dark — so no chart partial needs a dark twin and charts.py stays untouched. --- */
--chart-ink: #111827;
--chart-muted: #9ca3af;
--chart-tick: #c6cacf;
--chart-grid: #f3f4f5;
--chart-surface: #ffffff;
--chart-strip-empty: #eef1f6;
--chart-meter-empty: #e5e9f0;
--chart-bar-cap: #dbe7fd;
--chart-empty-card: #f9fafb;
/* --- typography --- */
--font-sans: "General Sans", "Plus Jakarta Sans", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* --- radii --- */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 12px;
--r-card: 16px;
--r-modal: 20px;
--r-pill: 9999px;
/* --- shadows --- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(30, 64, 175, 0.06);
--shadow-lg: 0 8px 32px rgba(18, 78, 235, 0.08);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
--shadow-accent: 0 4px 16px rgba(18, 78, 235, 0.25);
--shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.25);
--shadow-tooltip: 0 6px 20px rgba(15, 23, 42, 0.12);
/* --- layout --- */
--sidebar-w: 288px;
--rail-w: 64px;
--header-h: 94px;
}
/* ==========================================================================
Base
========================================================================== */
html { font-family: var(--font-sans); color: var(--ink); }
body { font-family: var(--font-sans); background: var(--surface); }
[x-cloak] { display: none !important; }
::selection { background: var(--accent-ring); }
* { scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--r-pill); }
.scroll-accent::-webkit-scrollbar-thumb { background: var(--accent); }
.scroll-accent { scrollbar-color: var(--accent) transparent; }
/* App body wash: white -> blue (Teli --gradient-app), fixed to the viewport so a blue
band shows beneath the last card on every page. */
.app-bg {
background: var(--gradient-app);
background-attachment: fixed;
min-height: 100vh;
}
/* Dashboard only: the wash stays pale blue through the widget rows (Teli's first screen) and
saturates only under the last card. */
.app-bg:has([data-greeting]) {
background-image: var(--gradient-dash);
}
.dotted-bg {
background-image: radial-gradient(circle, var(--dot-pattern) 1px, transparent 1px);
background-size: 24px 24px;
}
/* ==========================================================================
Shell: sidebar, rail, groups, user card, header
========================================================================== */
.sidebar {
width: var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border-faint);
transition: width 0.2s ease;
}
.sidebar.is-collapsed { width: var(--rail-w); }
/* The sticky wrapper paints above page content so the bell dropdown is never covered. */
.sidebar > .sticky { z-index: 30; }
.sidebar-logo {
display: inline-flex; align-items: center; justify-content: center;
height: 42px; width: 42px; border-radius: var(--r-xl);
background: var(--card); border: 1px solid var(--border);
color: transparent; background-image: var(--gradient-primary);
-webkit-background-clip: text; background-clip: text;
font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
box-shadow: var(--shadow-card);
flex: none;
}
.sidebar-brand { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sidebar-toggle {
display: inline-flex; align-items: center; justify-content: center;
height: 28px; width: 28px; border-radius: var(--r-md);
color: var(--text-secondary); background: transparent; border: 0; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--bg-subtle); color: var(--ink); }
.nav-group { margin-top: 44px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group-title {
padding: 0 12px 12px;
font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-label);
}
.is-collapsed .nav-group-title { height: 1px; padding: 0; margin: 12px 8px 8px; background: var(--border); overflow: hidden; color: transparent; }
.is-collapsed .nav-group:first-child .nav-group-title { display: none; }
.nav-item {
position: relative;
display: flex; align-items: center; gap: 12px;
height: 48px; padding: 0 14px 0 26px; margin: 2px 0;
border-radius: var(--r-pill);
font-size: 15px; font-weight: 500; color: var(--text-secondary);
text-decoration: none; white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item svg { flex: none; width: 20px; height: 20px; color: var(--nav-icon); }
.nav-item.is-active svg { color: var(--accent); }
.nav-item:hover { background: var(--accent-hover-bg); color: var(--ink); }
/* Selected: light-blue pill, accent text, 3px accent arc on the left curve. */
.nav-item.is-active, .nav-item.is-active:hover {
background: var(--accent-light);
color: var(--accent);
font-weight: 600;
}
.nav-item.is-active::before {
content: ""; position: absolute; inset: -3px auto -3px -3px; width: calc(100% + 3px);
border-radius: 9999px; border: 3px solid transparent; border-left-color: var(--accent);
pointer-events: none;
}
.is-collapsed .nav-item { justify-content: center; padding: 0; width: 40px; height: 40px; margin: 6px auto; }
.is-collapsed .nav-item.is-active::before { inset: -3px; width: auto; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.user-card {
display: flex; align-items: center; gap: 10px;
padding: 14px 14px 14px 12px; border-radius: var(--r-card);
background: var(--bg-secondary); border: 0;
min-width: 0;
}
.user-card .avatar { flex: none; height: 40px; width: 40px; font-size: 15px; }
.is-collapsed .user-card .avatar { height: 28px; width: 28px; font-size: 12px; }
.user-card-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.user-card-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.user-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.is-collapsed .user-card-actions { flex-direction: column; justify-content: center; margin-top: 6px; }
.is-collapsed .user-card { padding: 0; background: transparent; border: 0; justify-content: center; }
/* bell dropdown anchored at the sidebar bottom must open upward */
.sidebar-bell [data-bell-dropdown] { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.sidebar-bell button[aria-label^="Notifications"] {
border: 0; background: transparent; padding: 6px; border-radius: var(--r-pill); color: var(--text-secondary);
box-shadow: none; height: 36px; width: 36px;
}
.sidebar-bell button[aria-label^="Notifications"] svg { height: 22px; width: 22px; }
.sidebar-bell button[aria-label^="Notifications"]:hover { background: var(--bg-subtle); color: var(--ink); }
.page-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: var(--header-h); padding: 28px 24px 22px;
}
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
.page-subtitle { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
/* Owner renames (2026-10-12): Textline and Calls carry a plain subtitle under their fun name; their panes are a fixed
100dvh-164px tall, so the header trims its padding to stay inside --header-h instead of pushing the page into a scroll. */
@media (min-width: 768px) {
.app-bg:has([data-inbox-layout]) .page-header, .app-bg:has([data-calls-layout]) .page-header { padding-top: 20px; padding-bottom: 16px; }
}
.page-title-emoji { margin-right: 2px; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.main-content { padding: 0 24px 40px; }
@media (max-width: 767px) {
.page-header { padding: 12px 16px 8px; }
.main-content { padding: 0 16px 32px; }
}
/* ==========================================================================
Buttons
========================================================================== */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-dashed, .btn-soft, .btn-outline-accent, .btn-ai {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 36px; padding: 0 14px;
border-radius: var(--r-lg);
font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1;
border: 1px solid transparent; cursor: pointer; white-space: nowrap;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn svg, .btn-primary svg, .btn-secondary svg, .btn-ghost svg, .btn-danger svg, .btn-dashed svg, .btn-soft svg, .btn-outline-accent svg { height: 15px; width: 15px; flex: none; }
.btn-primary, .btn-secondary, .btn-outline-accent { height: 42px; padding: 0 16px; font-size: 14px; }
.btn-outline-accent { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-primary { background: var(--gradient-button); background-size: 200% 100%; color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(18, 78, 235, 0.3); }
.btn-primary:hover { background: var(--gradient-button-hover); color: #fff; box-shadow: var(--shadow-accent); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--surface); color: var(--text-body); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: var(--accent-ring); color: var(--accent); background: var(--surface); transform: translateY(-1px); }
.btn-outline-accent { background: var(--surface-glass); color: var(--accent); border-color: var(--accent-tint-strong); box-shadow: 0 4px 16px var(--accent-tint); }
.btn-outline-accent:hover { background: var(--gradient-button); color: #fff; border-color: transparent; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--ink); }
.btn-soft { background: var(--accent-100); color: var(--accent); border-color: transparent; border-radius: var(--r-pill); height: 30px; padding: 0 14px; font-weight: 500; }
.btn-soft:hover { background: var(--btn-soft-hover); }
.btn-danger { background: var(--surface); color: var(--danger-text); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--tint-red); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger-solid); color: #fff; border-color: transparent; }
.btn-danger-solid:hover { background: var(--red-deep); }
.btn-danger-solid:disabled, .btn-danger-solid[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-dashed { width: 100%; height: 44px; background: var(--surface); color: var(--warning-text); border: 1.5px dashed #f5c542; border-radius: var(--r-lg); }
.btn-dashed:hover { background: var(--amber-tint); }
.btn-ai { background: var(--ai-light); color: var(--btn-ai-text); border-color: var(--ai-border); border-radius: var(--r-pill); height: 30px; }
.btn-ai:hover, .btn-ai.is-active { background: var(--ai); color: #fff; border-color: transparent; }
.btn-pill { border-radius: var(--r-pill); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: var(--r-xl); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-dashed:disabled, .btn-soft:disabled, .btn-outline-accent:disabled, .btn-ai:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
/* text links */
.link { color: var(--accent); font-weight: 500; text-decoration: none; }
.link:hover { color: var(--accent-hover); text-decoration: underline; }
/* ==========================================================================
Forms
========================================================================== */
.label { display: block; font-size: 13px; font-weight: 600; color: var(--text-body); margin-bottom: 6px; }
.label .optional, .label-optional { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.help { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.input, .select, .textarea {
display: block; width: 100%;
border-radius: var(--r-lg);
border: 1px solid var(--border);
background: var(--surface);
padding: 0 12px; height: 40px;
font-family: var(--font-sans); font-size: 14px; line-height: 38px; font-weight: 500;
color: var(--ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); font-weight: 400; }
.textarea { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.select {
appearance: none; -webkit-appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
.select[multiple], .select[size] { height: auto; line-height: 1.5; padding: 6px 12px; background-image: none; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.input-error, .input-error:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.input-sm { height: 32px; line-height: 30px; font-size: 13px; border-radius: var(--r-md); }
.input-search {
background-color: var(--bg-secondary);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: 12px center; padding-left: 36px;
}
.field-error { margin-top: 6px; font-size: 12px; color: var(--danger-text); }
.checkbox, input[type="checkbox"].input-check {
height: 16px; width: 16px; border-radius: 4px; border: 1.5px solid var(--border-medium); accent-color: var(--accent);
}
.switch { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--border); transition: background 0.15s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s ease; }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { transform: translateX(20px); }
.var-token { background: var(--var-token-bg); color: var(--var-token-text); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.dropzone { border: 1.5px dashed var(--border-medium); border-radius: var(--r-lg); background: var(--bg-secondary); padding: 28px 16px; text-align: center; color: var(--text-body); font-size: 13px; font-weight: 600; }
.dropzone .help { margin-top: 4px; font-weight: 400; }
/* ==========================================================================
Cards, widgets, sections
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.card-glass { background: var(--surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card-flush { padding: 0; overflow: hidden; }
.card-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.widget { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-width: 0; }
.widget-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.widget-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.widget-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.widget-body { flex: 1; min-height: 0; }
.widget-number { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.widget-number.is-accent { color: var(--accent); }
.widget-sub { font-size: 12px; font-weight: 500; color: var(--success-text); margin-top: 6px; }
.widget-kebab { color: var(--text-faint); border: 0; background: transparent; padding: 2px; border-radius: var(--r-sm); cursor: pointer; }
.widget-kebab:hover { background: var(--bg-subtle); color: var(--text-secondary); }
.section { background: var(--surface); border: 1px solid var(--section-border); border-radius: var(--r-xl); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.section-body { padding: 0 16px 16px; }
/* Small count chip next to a section title (section_header() and live Alpine counters) */
.section-count { font-size: 11px; line-height: 16px; padding: 1px 8px; font-weight: 600; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow.is-accent { color: var(--accent); }
.divider { height: 1px; background: var(--border-faint); }
.greeting-band {
position: relative; overflow: hidden;
border-radius: var(--r-card);
background: var(--gradient-greeting);
padding: 24px;
min-height: 120px;
}
.greeting-band::before, .greeting-band::after {
content: "+"; position: absolute; top: 12px; font-size: 44px; font-weight: 200; line-height: 1;
color: rgba(255, 255, 255, 0.75); pointer-events: none;
}
.greeting-band::before { left: 72%; }
.greeting-band::after { left: 88%; top: 44px; font-size: 32px; }
.greeting-title { font-size: 24px; font-weight: 700; color: var(--text-title); letter-spacing: -0.01em; }
.greeting-sub { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.greeting-pill {
display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
height: 26px; padding: 0 12px; border-radius: var(--r-pill);
background: var(--greeting-pill-bg); font-size: 11px; color: var(--text-label);
}
.greeting-pill::before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: var(--accent-soft); }
.greeting-pill strong { color: var(--text-body); font-weight: 600; }
/* stat tiles (dashboard + analytics) */
.stat { display: block; border-radius: var(--r-xl); padding: 12px 14px; background: var(--surface); min-height: 76px; text-decoration: none; border: 1px solid transparent; }
.stat-tint-blue { background: var(--tint-blue); }
.stat-tint-green { background: var(--tint-green); }
.stat-tint-amber { background: var(--tint-amber); }
.stat-tint-red { background: var(--tint-red); }
.stat-tile { display: block; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.stat-tile:hover { box-shadow: var(--shadow-lg); border-color: var(--border); transform: translateY(-1px); }
.stat-label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-value.is-green { color: var(--green-solid); }
.stat-value.is-blue { color: var(--accent); }
.stat-value.is-amber { color: var(--warning-text); }
.stat-value.is-red { color: var(--danger-text); }
.stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.progress { height: 6px; width: 100%; border-radius: var(--r-pill); background: var(--chart-ring-track); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-medium)); }
.progress-green > span { background: linear-gradient(90deg, var(--success), var(--chart-green)); }
.progress-gray > span { background: linear-gradient(90deg, var(--border-medium), var(--text-muted)); }
/* ==========================================================================
Pills, badges, avatars
========================================================================== */
.badge, .pill {
display: inline-flex; align-items: center; gap: 4px;
border-radius: var(--r-pill);
padding: 2px 10px;
font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.badge-gray { background: var(--bg-subtle); color: var(--text-secondary); }
.badge-green { background: var(--success-bg); color: var(--badge-green-text); }
.badge-blue { background: var(--accent-100); color: var(--accent); }
.badge-amber { background: var(--warning-bg); color: var(--warning-text); }
.badge-red { background: var(--danger-bg); color: var(--danger-text); }
.badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); border: 1px solid var(--badge-purple-border); }
.badge-dark { background: var(--badge-dark-bg); color: var(--badge-dark-text); }
.badge-ai { background: var(--ai-light); color: var(--ai); }
.badge-dashed { border: 1px dashed var(--badge-dashed-border); }
.badge-sample { background: var(--badge-sample-bg); color: var(--badge-sample-text); border-radius: var(--r-sm); font-size: 10px; padding: 1px 8px; line-height: 14px; }
.badge-on { background: var(--green-tint); color: var(--success-text); border: 1px solid var(--success-border); border-radius: var(--r-xs); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; line-height: 14px; }
.badge-op { background: var(--badge-op-bg); color: var(--warning-deep); border-radius: var(--r-xs); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 8px; line-height: 14px; }
.badge-count { background: var(--badge-count-bg); color: var(--badge-count-text); font-size: 11px; font-weight: 600; padding: 1px 8px; line-height: 16px; font-variant-numeric: tabular-nums; }
.badge-dot::before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-brand { background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; border-radius: var(--r-xs); padding: 1px 5px; line-height: 12px; letter-spacing: 0.04em; }
/* label pill + value row (lead details) */
.kv-row { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--text-body); }
.kv-row .pill { flex: none; min-width: 68px; justify-content: center; height: 26px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 22px; text-align: center; }
.kv-row .kv-value, .kv-row dd { min-width: 0; flex: 1; word-break: break-word; padding-top: 3px; margin: 0; font-size: 13.5px; }
.avatar {
display: inline-flex; align-items: center; justify-content: center; flex: none;
height: 40px; width: 40px; border-radius: 50%;
background: var(--accent-100); color: var(--accent);
font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase;
}
.avatar-sm { height: 28px; width: 28px; font-size: 11px; }
.avatar-md { height: 44px; width: 44px; font-size: 15px; }
.avatar-lg { height: 52px; width: 52px; font-size: 17px; }
.avatar-xl { height: 68px; width: 68px; font-size: 24px; }
.avatar-solid { background: var(--accent); color: #fff; }
.avatar-dark { background: var(--ink); color: #fff; }
/* ==========================================================================
Tables, list rows, filter lists, tabs
========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text-body); }
.table th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th.is-caps { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-body); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--accent-hover-bg); }
.table tbody tr.is-selected { background: var(--accent-100); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .idx { color: var(--text-faint); font-size: 12px; }
.table .name { font-weight: 600; color: var(--ink); }
.table .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.table-compact th { padding: 8px 10px; }
.table-compact td { padding: 8px 10px; }
/* Teli t012 LO-performance density: ~30px rows, 12px mixed-case semibold headers, 12.5px tabular numbers. */
.table.is-dense { font-size: 12.5px; }
.table.is-dense th { padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.table.is-dense td { padding: 7px 12px; font-size: 12.5px; line-height: 1.25; vertical-align: middle; }
.table.is-dense .sub { font-size: 10.5px; }
.list-row {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border-bottom: 1px solid var(--border-faint);
background: var(--surface); text-decoration: none; color: inherit;
transition: background-color 0.15s ease;
position: relative;
}
.list-row:hover { background: var(--accent-hover-bg); }
.list-row.is-selected { background: var(--accent-100); }
.list-row.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.list-row.is-selected .avatar { background: var(--accent); color: #fff; }
.list-row-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.list-row-preview { font-size: 13.5px; color: var(--text-preview); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { font-size: 12px; color: var(--text-muted); }
.list-row.is-selected .list-row-preview, .list-row.is-selected .list-row-meta { color: var(--accent); }
.list-row-time { font-size: 12px; color: var(--text-muted); flex: none; }
.filter-row {
display: flex; align-items: center; gap: 10px;
height: 38px; padding: 0 12px;
font-size: 14px; color: var(--text-preview); text-decoration: none;
transition: background-color 0.15s ease;
}
.filter-row svg { height: 18px; width: 18px; color: var(--text-secondary); flex: none; }
.filter-row:hover { background: var(--accent-hover-bg); }
.filter-row.is-active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.filter-row.is-active svg, .filter-row.is-active .filter-count { color: var(--accent); }
/* Compact chip variant: a 28px chip below xl (the inbox filter strip), the
normal column row from xl up where the filters become the Teli filter column. */
@media (max-width: 1279px) {
.filter-row.is-chip { height: 28px; gap: 4px; padding: 0 7px; font-size: 12.5px; border-radius: var(--r-md); flex: none; }
.filter-row.is-chip svg { height: 16px; width: 16px; }
}
.filter-count { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-section { padding: 12px 12px 4px; display: flex; align-items: center; justify-content: space-between; }
.segmented { display: inline-flex; background: var(--bg-subtle); border-radius: var(--r-lg); padding: 3px; gap: 2px; }
.segmented > a, .segmented > button, .segmented > label { flex: 1; display: block; text-align: center; border-radius: var(--r-md); padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.segmented > .is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 4px; align-items: stretch; padding: 4px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); border: 1px solid var(--border-faint); }
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; color: var(--text-body); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { background: var(--bg-secondary); color: var(--ink); }
.tab.is-active { background: var(--accent-light); color: var(--accent); border-bottom-color: var(--accent); }
.tabs-underline { padding: 0; background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; gap: 0; }
.tabs-underline .tab { border-radius: 0; padding: 10px 14px; }
.tabs-underline .tab.is-active { background: transparent; }
.pane-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.pane-divider { border-right: 1px solid var(--border-faint); }
.pane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border-faint); font-size: 15px; font-weight: 500; color: var(--ink); }
/* ==========================================================================
Chat: bubbles + composer
========================================================================== */
.bubble {
max-width: 72%;
border-radius: 14px;
padding: 12px 16px;
font-size: 14px; line-height: 1.5;
white-space: pre-wrap; word-break: break-word;
}
.bubble-out, .bubble-ai, .bubble-human { background: var(--accent-soft); color: #fff; align-self: flex-end; }
.bubble-in, .bubble-inbound { background: var(--surface); color: var(--text-body); border: 1px solid var(--border); box-shadow: var(--shadow-sm); align-self: flex-start; }
.bubble-system { background: transparent; color: var(--text-muted); font-size: 12px; align-self: center; text-align: center; padding: 4px 8px; }
.bubble-draft { background: var(--ai-light); color: var(--bubble-draft-text); border: 1px dashed var(--ai-border); align-self: flex-end; }
.bubble-meta { font-size: 11.5px; color: var(--text-muted); margin: 0 4px; }
.bubble-group { display: flex; flex-direction: column; gap: 6px; }
.bubble-group.is-out { align-items: flex-end; }
.bubble-group.is-in { align-items: flex-start; }
.chat-area { background: var(--surface-2); }
.composer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--border-faint); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.composer-input { flex: 1; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); padding: 0 18px; font-size: 14px; font-family: var(--font-sans); color: var(--ink); }
.composer-input::placeholder { color: var(--text-muted); }
.composer-input:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.composer-textarea { height: auto; min-width: 160px; min-height: 44px; max-height: 160px; padding: 11px 18px; resize: none; line-height: 1.4; border-radius: 22px; }
/* Wave 4 (DESIGN-P2-W4 §4.2): the phone — the send button clears the home indicator (above), the
page header clears the notch inside the installed app, list rows tighten below sm. */
@media (display-mode: standalone) { .page-header { padding-top: env(safe-area-inset-top); } }
@media (max-width: 639px) {
.list-row { padding: 10px 12px; }
/* the composer's four icons + the pill input + the round send button fit a 390px pane */
.composer { gap: 6px; padding-left: 10px; padding-right: 10px; }
.composer-icon { height: 32px; width: 32px; }
/* declared AFTER the .composer-textarea base rule (same specificity — source order decides):
its 160px minimum would otherwise push the pill under the send button */
.composer .composer-textarea { min-width: 0; padding-left: 12px; padding-right: 12px; }
}
.composer-icon { display: inline-flex; align-items: center; justify-content: center; height: 36px; width: 36px; border-radius: var(--r-pill); color: var(--text-muted); border: 0; background: transparent; cursor: pointer; }
.composer-icon:hover { background: var(--bg-subtle); color: var(--text-body); }
.composer-send { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; cursor: pointer; flex: none; }
.composer-send:hover { background: var(--accent-hover); }
.composer-send:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.composer-help { text-align: center; font-size: 11.5px; color: var(--text-muted); padding: 0 16px 8px; background: var(--card); }
/* Inbox-scoped (Teli four-pane inbox): 40px list avatars, wide bubbles, round send button. */
[data-inbox-layout] .list-row .avatar, #inbox-list .list-row .avatar { height: 40px; width: 40px; font-size: 14px; }
[data-inbox-layout] .bubble { max-width: 78%; }
#composer-form [data-send-as] { height: 40px; width: 40px; padding: 0; border-radius: 50%; gap: 0; }
#composer-form [data-send-as] svg { height: 16px; width: 16px; }
/* Teli composer: the send circle is quiet (#f3f4f6 / grey glyph) until text is typed */
#composer-form:has(textarea:placeholder-shown) [data-send-as] { background: var(--bg-subtle); color: var(--text-muted); box-shadow: none; background-image: none; }
#composer-form:has(textarea:placeholder-shown) [data-send-as]:hover { background: var(--border); color: var(--text-muted); transform: none; }
#composer .composer-icon.text-ai { color: var(--ai); }
#composer .composer-icon.text-ai:hover { background: var(--ai-light); color: var(--ai); }
/* the AI-pill variant (Suggest a reply) keeps its 36px content box: .btn-ai's 14px side
padding would squeeze the 20px sparkle into an 8px sliver */
#composer .composer-icon.btn-ai { padding: 0; height: 36px; width: 36px; }
/* Teli bubbles: 12px corners, 12px 16px padding */
[data-inbox-layout] .bubble { border-radius: 12px; padding: 12px 16px; }
[data-inbox-layout] .bubble-system { padding: 4px 8px; }
/* Teli filter column: white 40px search (radius 10), 39px rows with 16px side padding and
heavier glyphs, the section eyebrow rows */
#inbox-pane .input-search { background-color: var(--card); height: 40px; border-radius: 10px; font-size: 14px; }
#inbox-pills .filter-row { padding: 0 16px; height: 39px; }
#inbox-pills .filter-row svg { stroke-width: 2.25; }
#inbox-pane [data-inbox-advanced] > summary.filter-section { padding: 10px 16px 6px; }
#inbox-pane [data-inbox-advanced] > summary.filter-section svg { color: var(--text-muted); }
#inbox-pane [data-inbox-advanced] > summary.filter-section:hover svg { color: var(--text-body); }
/* Teli list rows: small quiet status pills (11px / 1px 8px) */
#inbox-list .list-row .badge { font-size: 11px; padding: 1px 8px; line-height: 16px; }
/* ==========================================================================
Flash / toast, modals, empty states, tooltips, misc
========================================================================== */
.flash {
display: flex; align-items: center; gap: 10px;
border-radius: var(--r-lg);
border: 1px solid;
padding: 10px 14px;
font-size: 13.5px; font-weight: 500;
box-shadow: var(--shadow-md);
}
.flash-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.flash-success { background: var(--flash-success-bg); border-color: var(--success-border); color: var(--flash-success-text); }
.flash-warning { background: var(--amber-tint); border-color: var(--warning-border); color: var(--warning-deep); }
.flash-error { background: var(--tint-red); border-color: var(--danger-border); color: var(--red-deep); }
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast-stack .flash { box-shadow: var(--shadow-xl); }
.toast-stack .flash-success { background: var(--success-toast); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(25, 206, 129, 0.35); }
.modal-scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--r-modal); box-shadow: var(--shadow-modal); padding: 24px; }
.modal-lg { max-width: 840px; background: var(--bg-modal); }
.modal-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.modal-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.modal-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.modal-footer > * { width: 100%; height: 44px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; border-radius: var(--r-xl); background: var(--tile-bg); color: var(--accent); flex: none; }
.icon-tile-ai { background: var(--tile-ai-bg); color: var(--ai); }
.icon-tile-purple { background: var(--tile-purple-bg); color: var(--purple); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; height: 48px; width: 48px; border-radius: var(--r-card); background: var(--accent-light); color: var(--accent); margin-bottom: 12px; }
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.empty-state-text { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; max-width: 360px; }
.tooltip-dark { background: var(--tooltip-dark); color: #fff; font-size: 11px; font-weight: 500; border-radius: var(--r-sm); padding: 4px 10px; }
.tooltip-light { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-tooltip); padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tooltip-light small { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); }
.notice { border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; font-weight: 500; }
.notice-amber { background: var(--amber-tint); border: 1px solid var(--warning-border); color: var(--warning-deep); }
.notice-green { background: var(--green-tint); border: 1px solid var(--success-border); color: var(--green-deep); }
.notice-blue { background: var(--blue-tint); border: 1px solid var(--border-blue); color: var(--accent); }
.notice-purple { background: var(--purple-light); color: var(--purple-text); }
.notice-red { background: var(--tint-red); border: 1px solid var(--danger-border); color: var(--red-deep); }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.dot { display: inline-block; height: 8px; width: 8px; border-radius: 50%; }
.dot-green { background: var(--success); }
.dot-gray { background: var(--border-medium); }
.dot-red { background: var(--danger); }
.dot-amber { background: var(--warning); }
.dot-blue { background: var(--accent-soft); }
.dot-purple { background: var(--bucket); }
.spinner { height: 44px; width: 44px; border-radius: 50%; border: 3px solid var(--accent-100); border-top-color: var(--accent-soft); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-code { font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* .rail moved to the Teli-live block below (TL-0u): the vertical icon rail. */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 0.15s ease; }
/* Settings sub-nav (settings/_subnav.html keeps its markup; classes only) */
[data-settings-subnav] a[aria-current="page"] { background: var(--accent-light); color: var(--accent); }
/* ==========================================================================
Dashboard-only fidelity rules (rounds 1–2). Scoped to the home dashboard via the
[data-greeting] band / .dash-widget so no other page changes.
========================================================================== */
/* The dashboard shares the app-wide viewport wash (.app-bg, fixed) so every screen fades the
same way: white through the header and first rows, blue toward the bottom of the viewport. */
/* Widget surfaces: no visible stroke, 16px radius, translucent white glass (72 %) so the lower
rows visibly take on the blue wash behind them; barely-there bluish shadow. No backdrop-filter:
over the page gradient it renders in tiles and leaves a seam across the card. */
.widget.dash-widget {
background: var(--widget-glass);
border-color: transparent;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 22px rgba(30, 64, 175, 0.07), inset 0 0 0 1px var(--widget-ring);
}
/* Widget headers: 13/600 slate title, 11px subtitle, small very light kebab on the title line. */
.dash-widget .widget-header { margin-bottom: 14px; align-items: flex-start; }
.dash-widget .widget-header > .flex { margin-top: 1px; }
.dash-widget .widget-kebab { margin-top: -2px; color: var(--text-faint); }
.dash-widget .badge-sample { padding: 0 8px; line-height: 14px; font-weight: 500; background: var(--sample-bg); color: var(--sample-text); }
.dash-widget .widget-title { font-size: 13px; font-weight: 600; color: var(--text-title); }
.dash-widget .widget-subtitle { font-size: 11px; margin-top: 2px; }
.dash-widget .widget-kebab svg { height: 13px; width: 13px; }
.dash-widget .widget-header .link { font-size: 12px; font-weight: 500; }
.dash-widget .table { table-layout: fixed; min-width: 0; }
.dash-widget .table td { vertical-align: middle; }
.dash-widget .table td.truncate { max-width: 0; }
.greeting-band .greeting-title { line-height: 1.2; }
.greeting-band .greeting-pill { margin-top: 8px; }
/* Stat tiles as Teli number widgets: 13/600 title on one line + range chip, value centred
at 34/800 with tight tracking, muted centred "Analytics" line, 148px tall, no rim. */
.widget.stat-tile { display: flex; flex-direction: column; min-height: 148px; padding: 16px 14px; border-color: transparent; }
.widget.stat-tile:hover { border-color: transparent; }
.widget.stat-tile .widget-title { font-size: 12.5px; min-height: 0; line-height: 1.25; align-items: center; gap: 5px; }
.widget.stat-tile .widget-title > .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.widget.stat-tile .stat-chip { border-radius: var(--r-sm); font-size: 10px; padding: 1px 6px; line-height: 14px; font-weight: 600; flex: none; }
.widget.stat-tile .widget-subtitle { margin-top: 0; }
.widget.stat-tile .widget-number { font-size: 34px; letter-spacing: -0.03em; text-align: center; margin: auto 0; }
.widget.stat-tile .stat-sub { font-size: 11px; font-weight: 500; justify-content: center; color: var(--text-muted); }
.widget.stat-tile .stat-sub:hover { color: var(--accent); }
/* Greeting band: ~120px, 14px radius, horizontal lavender → near-white fade with a glassy
edge (melts into the page); two large blurred glowing 4-point sparkles; 20/600 title. */
[data-greeting].greeting-band {
min-height: 150px; padding: 26px 28px;
background: var(--gradient-band);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
}
.greeting-band::before, .greeting-band::after {
content: ""; font-size: 0;
background:
linear-gradient(var(--sparkle), var(--sparkle)) center / 2px 100% no-repeat,
linear-gradient(var(--sparkle), var(--sparkle)) center / 100% 2px no-repeat;
}
.greeting-band::before { width: 72px; height: 72px; left: 70%; top: 16px; opacity: 0.55; filter: blur(1.4px) drop-shadow(0 0 22px rgba(255, 255, 255, 1)); }
.greeting-band::after { width: 46px; height: 46px; left: 88%; top: 48px; opacity: 0.45; filter: blur(1.2px) drop-shadow(0 0 18px rgba(255, 255, 255, 1)); }
.greeting-title { font-size: 20px; font-weight: 600; color: var(--text-title); letter-spacing: -0.01em; }
.greeting-sub { font-size: 13px; color: var(--text-secondary); }
/* The pill is a product-welcome line and the band ends there (Teli); its dot is a muted periwinkle.
Backend status + the range sentence are a tiny muted line under the grid. */
[data-greeting] .greeting-pill { margin-top: 12px; font-size: 11.5px; }
[data-greeting] .greeting-pill::before { background: var(--greeting-dot); }
[data-greeting] .greeting-pill strong { font-weight: 700; color: var(--ink); }
.greeting-meta { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.dash-meta { margin-top: 14px; text-align: right; color: var(--text-faint); }
/* Page title + header buttons on the dashboard: 22/700 title, borderless white pills with a soft
shadow and 12px radius for "Today ▾" / "Reset Layout". */
.app-bg:has([data-greeting]) .page-title { font-size: 22px; font-weight: 700; }
/* Range presets as a white toolbar group that reads like Teli's "Today ▾" button: the
selected preset is plain ink/600 (no accent highlight) and a chevron closes the cluster. */
.segmented.is-toolbar {
align-items: center; height: 36px; padding: 3px; gap: 2px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.segmented.is-toolbar > .segmented-icon { display: inline-flex; align-items: center; color: var(--text-secondary); padding: 0 4px 0 8px; }
.segmented.is-toolbar > .segmented-icon.is-trailing { padding: 0 8px 0 2px; color: var(--text-muted); }
.segmented.is-toolbar > a { padding: 0 12px; line-height: 28px; }
.segmented.is-toolbar > .is-active { background: transparent; color: var(--ink); font-weight: 600; box-shadow: none; }
/* Campaign progress rows: 4px track with a solid fill, percentage right-aligned on the bar line. */
.dash-widget .progress { height: 4px; }
.dash-widget .progress-green > span { background: var(--success-toast); }
.dash-widget .progress-gray > span { background: var(--border-medium); }
/* ==========================================================================
Teli-look widget dashboard: 12-column grid, spans, strips, menus, compact attention rows.
========================================================================== */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* Rows equalise at Teli's ~280px so every widget in a row bottoms on the same line. */
@media (min-width: 1280px) { .dash-grid { grid-auto-rows: minmax(280px, auto); } }
.dash-grid > * { grid-column: span 12 / span 12; min-width: 0; }
@media (min-width: 768px) {
.dash-grid > .dash-span-3, .dash-grid > .dash-span-4, .dash-grid > .dash-span-5, .dash-grid > .dash-span-6 { grid-column: span 6 / span 6; }
}
@media (min-width: 1280px) {
.dash-grid > .dash-span-3 { grid-column: span 3 / span 3; }
.dash-grid > .dash-span-4 { grid-column: span 4 / span 4; }
.dash-grid > .dash-span-5 { grid-column: span 5 / span 5; }
.dash-grid > .dash-span-6 { grid-column: span 6 / span 6; }
.dash-grid > .dash-span-7 { grid-column: span 7 / span 7; }
.dash-grid > .dash-span-8 { grid-column: span 8 / span 8; }
.dash-grid > .dash-span-9 { grid-column: span 9 / span 9; }
.dash-grid > .dash-span-12 { grid-column: span 12 / span 12; }
}
/* Widget content: charts scale to the card width; strips hug the bottom of number cards. */
.dash-widget .widget-body { display: flex; flex-direction: column; }
.dash-widget .dash-chart svg, .dash-widget .dash-strip svg { display: block; width: 100%; height: auto; }
.dash-widget .dash-chart { margin-top: auto; }
.dash-widget .widget-number { font-size: 40px; letter-spacing: -0.03em; }
/* Ring + replied/total footer travel together, centred in whatever height the row gives the card. */
.dash-widget .dash-ring-block { margin: auto 0; padding: 4px 0; }
.dash-widget .dash-ring-block .chart-ring { width: 100px; height: 100px; }
/* Header actions: Teli's 36px / 13px / 500 cluster ("Today ▾" · Reset Layout · + Add Widget). */
.dash-action.btn-secondary, .dash-action.btn-primary { height: 36px; padding: 0 12px; font-size: 13px; font-weight: 500; gap: 6px; }
.dash-action.btn-primary { padding: 0 14px 0 12px; box-shadow: 0 1px 2px rgba(18, 78, 235, 0.25); }
.dash-action.btn-secondary { border-color: transparent; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.dash-action.btn-secondary:hover { border-color: transparent; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); }
.dash-action.btn-primary { border-radius: 12px; }
.dash-action.btn-outline-accent { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; border-radius: 12px; box-shadow: 0 1px 3px rgba(18, 78, 235, 0.12); gap: 6px; }
.dash-action svg { height: 15px; width: 15px; }
.dash-widget .widget-title .badge-sample { margin-left: 2px; }
.dash-widget .widget-header .badge-count { font-size: 11px; }
.dash-widget[data-widget="attention"] .widget-body, .dash-widget[data-widget="campaigns"] .widget-body { justify-content: flex-start; }
/* The ⋮ menu + the "Today ▾" range menu */
.widget-menu .btn-ghost[disabled] { opacity: 0.4; cursor: default; }
.range-menu .btn-ghost.is-active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
[data-range-button] { min-width: auto; gap: 6px; }
[data-range-button] > svg:last-child { margin-left: 2px; }
/* Compact attention rows: 48–56px, nothing wraps. */
.dash-attention th, .dash-attention td { padding: 4px 12px; white-space: nowrap; }
.dash-attention th { font-size: 11px; height: 32px; }
.dash-attention td { height: 44px; line-height: 1.3; }
.dash-attention .btn-ghost.btn-sm { height: 26px; padding: 0 8px; }
/* At most five rows show; the rest scroll inside the card so row 3 stays as tall as rows 1–2. */
.dash-attention-scroll { max-height: 258px; overflow-y: auto; }
.dash-attention thead th { position: sticky; top: 0; background: var(--surface-sticky); z-index: 1; }
.dash-attention td.truncate { max-width: 0; }
.dash-attention .name a { font-size: 13px; }
.dash-attention .sub { font-size: 11px; }
/* Campaign progress entries in a wide widget: two / three per row. */
.dash-campaigns { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.dash-campaign { padding: 10px 0; border-bottom: 1px solid var(--border-faint); }
.dash-campaign .text-\[13px\] { font-size: 14px; }
.dash-campaign .text-\[11px\] { font-size: 12px; }
@media (min-width: 768px) { .dash-campaigns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dash-campaigns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-campaign { border-bottom: 0; padding: 4px 0; } }
/* Catalog modal */
[data-widget-catalog] .input-search { height: 36px; }
/* Greeting chip: grows with its text on narrow screens instead of overflowing the pill. */
[data-greeting] .greeting-pill { height: auto; min-height: 26px; padding-block: 4px; }
/* ==========================================================================
Teli admin pages: Analytics (frames analytics/t012–t072) and Settings (round-robin cards).
Scoped to [data-analytics-page] / [data-settings-subnav] / [data-login-page] so no other page changes.
========================================================================== */
/* Admin pages use Teli's 22/700 title (same as the dashboard). */
.app-bg:has([data-analytics-page]) .page-title, .app-bg:has([data-settings-subnav]) .page-title { font-size: 22px; font-weight: 700; }
/* Pill tab row: white bar, radius 12, soft shadow; the active tab is accent text on a 2px accent
underline with no fill, the others plain grey (t012). */
.analytics-tabs, .settings-tabs { padding: 0 8px; border: 0; gap: 0; }
.analytics-tabs .tab, .settings-tabs .tab { border-radius: 6px 6px 0 0; padding: 9px 14px; font-size: 13px; font-weight: 400; color: var(--text-preview); border-bottom-width: 2px; }
.analytics-tabs .tab:hover, .settings-tabs .tab:hover { color: var(--ink); background: transparent; }
.analytics-tabs .tab.is-active, .settings-tabs .tab.is-active { background: transparent; color: var(--accent); font-weight: 500; border-bottom-color: var(--accent); }
[data-settings-subnav] a[aria-current="page"] { background: transparent; }
/* The panel: glass card, 16px radius; filter row 32px controls; tiles 12px radius, tinted, 22/700 value. */
.analytics-panel { border-radius: var(--r-card); }
.analytics-filters .select, .analytics-filters .input { box-shadow: none; }
.analytics-kpis .stat { min-height: 68px; padding: 11px 13px; border: 0; }
.analytics-kpis .stat-label { font-size: 10px; letter-spacing: 0.07em; color: var(--text-secondary); }
.analytics-kpis .stat-value { font-size: 20px; margin-top: 5px; }
.analytics-kpis .stat-sub { font-size: 10px; margin-top: 2px; }
/* Teli t012: the first tile (TOTAL ASSIGNED) sits on plain white with an ink number; the rest are tinted. */
.stat.stat-tint-none { background: var(--surface); border-color: var(--border-faint); }
.analytics-panel .stat.stat-tint-none { border: 0; }
.stat-tint-none .stat-value, .stat-tint-none .stat-value.is-blue, .stat-tint-none .stat-value.is-green, .stat-tint-none .stat-value.is-amber, .stat-tint-none .stat-value.is-red { color: var(--ink); }
/* Breakdown table (Teli t012 LO performance): ~30px rows, 12px mixed-case semibold headers, 12.5px tabular numbers, no rules. */
.analytics-table .table { font-size: 12.5px; }
.analytics-table .table th { padding: 7px 10px; border-bottom: 1px solid var(--border-faint); }
.analytics-table .table th.is-caps { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.analytics-table .table td { padding: 7px 10px; vertical-align: middle; line-height: 1.25; }
.analytics-table .table td.idx { width: 28px; }
.analytics-table .table .name a { color: inherit; text-decoration: none; }
.analytics-table .table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.analytics-table .table .badge { font-size: 10.5px; padding: 1px 8px; line-height: 16px; }
/* Widget cards inside the panel: flat white on the glass, 14px radius, hairline. */
[data-analytics-page] .widget { border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(30, 64, 175, 0.05); }
/* Widget header = title + ONE grey subtitle that wraps (t000); the cohort phrase is a tooltip on the (i). */
[data-analytics-page] .widget .widget-subtitle { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
[data-analytics-page] .widget .widget-title .population-hint { color: var(--text-faint); display: inline-flex; cursor: help; }
[data-analytics-page] .widget .widget-title .population-hint:hover { color: var(--accent); }
/* Grid rhythm: every card in a row bottoms on the same line; rows equalised. */
[data-analytics-page] [data-widgets] { grid-auto-rows: minmax(280px, auto); align-items: stretch; }
[data-analytics-page] [data-widgets] > [data-widget-slot] > .widget { height: 100%; }
[data-analytics-page] .widget .widget-body > .table-scroll { overflow-x: auto; max-width: 100%; }
/* Deliverability donut legend: dots, not squares (t000 Response Rate). */
[data-analytics-page] .legend-dot { display: inline-block; height: 8px; width: 8px; border-radius: 9999px; }
/* Breakdown table density (t012): ~30px rows, (i) hints in the metric headers. */
.analytics-table .table.is-dense td { padding: 6px 10px; }
.analytics-table .table.is-dense th { padding: 6px 10px; }
.analytics-table .table th .th-hint { display: inline-block; vertical-align: -1px; margin-left: 3px; color: var(--text-faint); cursor: help; }
.analytics-table .table th .th-hint:hover { color: var(--accent); }
.analytics-table .table .name .sub { font-size: 10.5px; color: var(--text-muted); font-weight: 400; margin-top: 1px; line-height: 1; }
.analytics-table .table .name .sub .badge { font-size: 9.5px; padding: 0 6px; line-height: 14px; font-weight: 600; }
/* Settings: cards, key/value rows, member rows, toggle rows. */
.settings-card-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
.settings-row:last-child { border-bottom: 0; }
.settings-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.settings-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-faint); }
.member-row:last-child { border-bottom: 0; }
.member-row .avatar { height: 36px; width: 36px; font-size: 13px; flex: none; }
.member-row-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.member-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.settings-kv .kv-row { padding: 4px 0; }
.settings-kv .kv-row .pill { min-width: 96px; max-width: 160px; font-size: 11.5px; }
.settings-kv .kv-row .kv-value { font-size: 13px; padding-top: 4px; }
/* Login: centred brand card (Teli sign-in) */
[data-login-page] .card { background: var(--surface); backdrop-filter: none; border-color: transparent; border-radius: var(--r-modal); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(30, 64, 175, 0.1); }
[data-login-page] .input { height: 44px; }
[data-login-page] .login-help { color: var(--text-secondary); }
/* Tables inside analytics widget cards follow the same Teli density as the breakdown table. */
[data-analytics-page] .widget .table th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-body); padding: 8px 10px; border-bottom-color: var(--border-faint); }
[data-analytics-page] .widget .table td { padding: 8px 10px; font-size: 13px; vertical-align: middle; }
[data-analytics-page] .widget .table.is-dense th { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); padding: 7px 10px; }
[data-analytics-page] .widget .table.is-dense td { padding: 7px 10px; font-size: 12.5px; }
/* Settings tables (Teli rotation-log density): 11px caps tracked headers, 13px cells, hairlines. */
main:has([data-settings-subnav]) .table th { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 9px 12px; border-bottom-color: var(--border-faint); }
main:has([data-settings-subnav]) .table td { font-size: 13px; padding: 10px 12px; vertical-align: middle; }
main:has([data-settings-subnav]) .table-compact th { padding: 8px 10px; }
main:has([data-settings-subnav]) .table-compact td { padding: 8px 10px; }
/* Settings cards: 16px radius glass-white, no visible stroke, soft bluish shadow (Teli admin cards). */
main:has([data-settings-subnav]) .card { border-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 16px rgba(30, 64, 175, 0.06); }
main:has([data-settings-subnav]) .card .card { box-shadow: none; border-color: var(--border-faint); }
main:has([data-settings-subnav]) .card-title { font-size: 15px; }
main:has([data-settings-subnav]) .badge, main:has([data-settings-subnav]) .pill { font-size: 11px; font-weight: 500; padding: 2px 8px; line-height: 16px; }
main:has([data-settings-subnav]) .card-title .badge, main:has([data-settings-subnav]) .card-title .pill { font-size: 11px; font-weight: 600; }
main:has([data-settings-subnav]) .card-subtitle { font-size: 12.5px; }
/* State chips (never / not set / never run / Not configured / simulated / warn): Teli's caps chips
(UPDATE, round_robin) — 10px 600 uppercase on a tint with a hairline border. */
main:has([data-settings-subnav]) .badge.badge-state, main:has([data-settings-subnav]) .pill.badge-state, [data-analytics-page] .badge.badge-state { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; line-height: 15px; border-radius: 6px; border: 1px solid transparent; }
.badge-state.badge-amber { border-color: var(--warning-border); }
.badge-state.badge-blue { border-color: var(--border-blue); }
.badge-state.badge-green { border-color: var(--success-border); }
.badge-state.badge-red { border-color: var(--danger-border); }
.badge-state.badge-gray { border-color: var(--border); }
/* Notices are full-width tinted bars (round-robin t048), never shrink-wrapped. */
main:has([data-settings-subnav]) .notice { display: block; width: 100%; }
/* Header CTAs: at most one outline-accent per page (as .dash-action); the others are the quiet white dash-action pill. */
/* Connections: the env dump sits behind a disclosure so the first screen stays key/value cards. */
[data-env-disclosure] > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--accent); padding: 2px 0; }
[data-env-disclosure] > summary::-webkit-details-marker { display: none; }
[data-env-disclosure] > summary svg { transition: transform 0.15s ease; }
[data-env-disclosure][open] > summary svg { transform: rotate(180deg); }
[data-env-table] .env-value { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Login help: the code font sits a touch lighter than the surrounding muted copy. */
[data-login-page] .help .mono, [data-login-page] .login-help .mono { font-size: 0.9em; }
/* ==========================================================================
Wave 3 (DESIGN-P2-W3 §0.9; W3-0 contract block — packages add more through their notes).
Deal-flow kanban, the assistant's muted / scripted bubbles, the readiness / success meters,
the run-as banner and the builder's assistant panel. Tokens only, no hex.
========================================================================== */
/* status.STAGE_TONES: "violet" is the sixth stage tone (the qualified stage) — the purple chip / dot under its Teli name. */
.badge-violet { background: var(--purple-light); color: var(--purple-text); border: 1px solid var(--ai-border); }
.dot-violet { background: var(--purple); }
/* Deal flow (§0.9 item 5): a horizontal flex board, 280px columns, cards with a 12px radius. */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col { flex: 0 0 280px; width: 280px; display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.kanban-col .kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-faint); font-size: 13px; font-weight: 600; color: var(--ink); }
.kanban-col .kanban-col-sum { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.kanban-col .kanban-col-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; min-height: 96px; }
.kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-sm); cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.is-dragging { opacity: 0.55; }
.kanban-card .name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.kanban-card .sub { font-size: 12px; color: var(--text-muted); }
.kanban-card .kanban-card-foot { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.kanban-col.is-over .kanban-col-body { background: var(--accent-lighter); }
.dropzone { border: 1px dashed var(--border); border-radius: 12px; padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
/* Prompt assistant / call transcript (§0.9 items 7–8): the muted bubble for scripted / greyed lines and the ink user bubble. */
.bubble.is-muted { background: var(--bg-subtle); color: var(--text-muted); border: 1px dashed var(--border); box-shadow: none; }
.bubble.is-out { background: var(--ink); color: #fff; align-self: flex-end; }
/* Meters (F8): a track with a width:% fill — the readiness row and the Success / Other rows. */
.fill-meter { position: relative; height: 8px; border-radius: 999px; background: var(--border-faint); overflow: hidden; flex: 1 1 auto; min-width: 80px; }
.fill-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); transition: width 0.25s ease; }
.fill-meter.is-green > span { background: var(--success); }
.fill-meter.is-amber > span { background: var(--warning); }
.fill-meter.is-red > span { background: var(--danger); }
.fill-meter.is-ai > span { background: var(--ai); }
.fill-meter.is-gray > span { background: var(--text-muted); }
.meter-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-body); }
.meter-row .meter-label { flex: 0 0 auto; min-width: 88px; }
.meter-row .meter-pct { flex: 0 0 auto; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.meter-row .meter-sub { font-size: 11.5px; color: var(--text-muted); }
/* Run-as banner (§0.5): a full-width amber bar under the header. */
.run-as-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 20px; font-size: 13px; background: var(--warning-bg); color: var(--warning-deep); border-bottom: 1px solid var(--warning-border); }
.run-as-banner form { margin: 0; }
/* The builder's assistant panel: a 380px sticky aside next to the form (§0.9 item 7). */
.builder-aside--panel { position: sticky; top: 16px; width: 380px; max-width: 100%; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.builder-aside--panel .chat-area { flex: 1 1 auto; overflow-y: auto; min-height: 160px; }
/* ==========================================================================
Teli-live (DESIGN-TELI-LIVE §0.9 / §1.2 / §16.3; TL-0u contract block — packages add more
through their notes). The sidebar utility zone, the modal chrome, the vertical icon rail,
pill tabs, the switch + toggle row, KPI tiles, info boxes, mono chips, date pills, the grip,
bucket dots, variable rows, the calendar grid, the scorecard pieces. Tokens only, no hex.
========================================================================== */
/* Sidebar utility zone (§1.2): Campaigns / Activity / What's new / Documentation ↗ as quiet rows. */
.nav-utility { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); }
.nav-utility:not(:has(a, button, div)) { display: none; } /* the slot renders nothing until TL-0 / TL-A fill it */
.nav-item-quiet { font-weight: 500; color: var(--text-secondary); }
.nav-item-quiet svg { color: var(--text-muted); }
.nav-item-quiet:hover { color: var(--ink); }
.nav-item-quiet.is-active { font-weight: 600; }
.nav-item-news { font-weight: 500; color: var(--text-secondary); }
.nav-item-news svg { color: var(--text-muted); }
.nav-item-news:hover { color: var(--ink); }
.nav-item-news.is-active { font-weight: 600; color: var(--ink); }
.nav-item-quiet .nav-dot { display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: var(--danger); margin-left: 6px; }
/* Modal chrome (partials/_modal.html): header (title + chip + ×), body, the two-button footer above. */
#modal-root:empty { display: none; }
.modal-sm { max-width: 440px; }
.modal-xl { max-width: 1040px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-header .modal-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modal-chip { font-size: 11px; vertical-align: middle; }
.modal-close { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; flex: none; border-radius: var(--r-md); color: var(--text-muted); background: transparent; border: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.modal-close:hover { background: var(--bg-subtle); color: var(--ink); }
.modal-body { margin-top: 18px; font-size: 13.5px; color: var(--text-body); }
.modal-body > .modal-footer:last-child { margin-top: 24px; }
.modal-lg .modal-body, .modal-xl .modal-body { margin-top: 20px; }
.modal-strip { background: var(--bg-subtle); border-radius: var(--r-md); padding: 8px 12px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
/* Vertical icon rail (partials/_rail.html): a 56px column of icon-over-label tabs beside the panels. */
.rail-shell { display: flex; align-items: stretch; gap: 0; min-width: 0; }
.rail-shell.is-left { flex-direction: row-reverse; }
.rail { position: sticky; top: 16px; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; width: 56px; flex: none; padding: 6px 4px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.rail-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; width: 48px; border-radius: var(--r-lg); border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.rail-tab svg { height: 20px; width: 20px; }
.rail-tab .rail-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.rail-tab:hover { background: var(--accent-hover-bg); color: var(--ink); }
.rail-tab.is-active { background: var(--accent-light); color: var(--accent); }
.rail-dot { position: absolute; top: 6px; right: 8px; height: 7px; width: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.rail-panels { flex: 1 1 auto; min-width: 0; margin-right: 12px; }
.rail-shell.is-left .rail-panels { margin-right: 0; margin-left: 12px; }
.rail-panel { min-width: 0; }
/* Pill tabs (Round Robin: Campaigns | Users | Config; Admin Analytics; Team Management). */
.pill-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pill-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.pill-tab:hover { background: var(--accent-hover-bg); color: var(--ink); }
.pill-tab.is-active { background: var(--accent); color: var(--surface); font-weight: 600; box-shadow: var(--shadow-accent); }
.pill-tab-count { font-size: 11px; font-weight: 600; padding: 0 6px; line-height: 16px; border-radius: var(--r-pill); background: var(--accent-100); color: var(--accent); font-variant-numeric: tabular-nums; }
.pill-tab.is-active .pill-tab-count { background: var(--surface-glass); color: var(--accent); }
/* segmented_toggle(): icon + label sit on one line (the base .segmented rows are display:block). */
.segmented-toggle > a, .segmented-toggle > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segmented-toggle svg { height: 15px; width: 15px; flex: none; }
/* The switch (a real checkbox) and Teli's toggle row: title + help left, switch right. */
.toggle { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 24px; margin: 0; border-radius: var(--r-pill); background: var(--border); border: 0; cursor: pointer; transition: background 0.15s ease; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.15s ease; }
.toggle:checked { background: var(--accent); }
.toggle:checked::after { transform: translateX(20px); }
.toggle:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); cursor: pointer; }
.toggle-row + .toggle-row { margin-top: 8px; }
.toggle-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.toggle-row-help { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.toggle-row.is-green { background: var(--tint-green); border-color: var(--success-border); }
.toggle-row.is-amber { background: var(--tint-amber); border-color: var(--warning-border); }
.toggle-row.is-red { background: var(--tint-red); border-color: var(--danger-border); }
.toggle-row.is-blue { background: var(--tint-blue); border-color: var(--accent-100); }
.toggle-row.is-ai { background: var(--ai-light); border-color: var(--ai-border); }
.toggle-row.is-disabled { opacity: 0.6; cursor: not-allowed; }
/* KPI tiles (TOTAL ASSIGNED · 12 · "50% of RR"): the tinted stat with an uppercase label. */
.tile { display: block; border-radius: var(--r-xl); padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-faint); min-height: 84px; text-decoration: none; }
.tile-blue { background: var(--tint-blue); }
.tile-green { background: var(--tint-green); }
.tile-amber { background: var(--tint-amber); }
.tile-red { background: var(--tint-red); }
.tile-ai { background: var(--ai-light); border-color: var(--ai-border); }
.tile-none { background: var(--surface); }
.tile-link { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.tile-link:hover { box-shadow: var(--shadow-lg); border-color: var(--border); transform: translateY(-1px); }
.tile-label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.tile-info { color: var(--text-faint); display: inline-flex; }
.tile-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.tile-green .tile-value { color: var(--success-text); }
.tile-amber .tile-value { color: var(--warning-text); }
.tile-red .tile-value { color: var(--danger-text); }
.tile-blue .tile-value { color: var(--accent); }
/* Info boxes: the tinted notice with a bold title line. */
.info-box { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--r-lg); border: 1px solid; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.info-box-icon { display: inline-flex; flex: none; margin-top: 1px; }
.info-box-title { font-weight: 600; }
.info-box-title + .info-box-body { margin-top: 2px; }
.info-box.is-blue { background: var(--tint-blue); border-color: var(--accent-100); color: var(--accent); }
.info-box.is-blue .info-box-body { color: var(--text-body); }
.info-box.is-amber { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-deep); }
.info-box.is-green { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.info-box.is-red { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.info-box.is-ai { background: var(--ai-light); border-color: var(--ai-border); color: var(--ai); }
.info-box.is-gray { background: var(--bg-subtle); border-color: var(--border); color: var(--text-body); }
/* Mono chips (Rotation Log sources), date pills (message-list separators), the grip. */
.mono-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--bg-subtle); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-body); white-space: nowrap; }
.date-pill-row { display: flex; justify-content: center; padding: 10px 0; }
.date-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-subtle); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; }
.grip { display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 14px; color: var(--text-faint); cursor: grab; flex: none; touch-action: none; }
.grip:hover { color: var(--text-secondary); }
.grip:active { cursor: grabbing; }
/* Bucket dots (custom buckets are violet — the AI token) and the VARS rail rows. */
.bucket-dot { display: inline-block; height: 8px; width: 8px; border-radius: 50%; background: var(--ai); flex: none; }
.bucket-dot.is-system { background: var(--text-faint); }
.var-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); font-size: 13px; color: var(--text-body); cursor: grab; }
.var-row:hover { background: var(--accent-hover-bg); }
.var-row.is-dragging { opacity: 0.55; }
.var-row .var-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.var-row .var-token { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); background: var(--accent-lighter); border-radius: var(--r-xs); padding: 1px 6px; white-space: nowrap; }
/* Calendar grid (Month / Week / Day). */
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-grid .calendar-dow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-align: center; padding: 6px 0; }
.calendar-day { position: relative; min-height: 96px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-faint); padding: 8px; font-size: 12px; color: var(--text-body); }
.calendar-day .calendar-num { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.calendar-day.is-today { background: var(--accent-light); border-color: var(--accent-100); }
.calendar-day.is-today .calendar-num { color: var(--accent); }
.calendar-day.is-outside { background: var(--bg-secondary); color: var(--text-faint); }
.calendar-day.is-outside .calendar-num { color: var(--text-faint); }
.calendar-week { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border-faint); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.calendar-week .calendar-hour { font-size: 11px; color: var(--text-muted); padding: 6px 8px; border-top: 1px solid var(--border-faint); }
.calendar-week .calendar-slot { min-height: 40px; border-top: 1px solid var(--border-faint); border-left: 1px solid var(--border-faint); }
.calendar-week .calendar-col-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); text-align: center; padding: 8px 4px; border-left: 1px solid var(--border-faint); }
.calendar-week .calendar-col-head.is-today { color: var(--accent); }
.calendar-event { display: block; border-radius: var(--r-sm); padding: 2px 6px; font-size: 11px; font-weight: 500; background: var(--accent-100); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
/* Org Scorecard: the radar, the donut, the leaderboard table, the driver cards, the recommendation box. */
.radar { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin: 0 auto; display: block; }
.radar .radar-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.radar .radar-axis { stroke: var(--border-medium); stroke-width: 1; }
.radar .radar-area { fill: var(--accent-tint-strong); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar .radar-point { fill: var(--accent); }
.radar .radar-label { font-size: 10px; font-weight: 600; fill: var(--text-secondary); letter-spacing: 0.02em; }
.donut-score { position: relative; width: 132px; height: 132px; flex: none; }
.donut-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-score .donut-track { fill: none; stroke: var(--chart-ring-track); stroke-width: 10; }
.donut-score .donut-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.4s ease; }
.donut-score.is-green .donut-fill { stroke: var(--success); }
.donut-score.is-amber .donut-fill { stroke: var(--warning); }
.donut-score.is-red .donut-fill { stroke: var(--danger); }
.donut-score .donut-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.donut-score .donut-value small { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
.leaderboard { width: 100%; border-collapse: collapse; font-size: 13px; }
.leaderboard th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.leaderboard td { padding: 9px 10px; border-bottom: 1px solid var(--border-faint); color: var(--text-body); }
.leaderboard tr:last-child td { border-bottom: 0; }
.leaderboard .num { text-align: right; font-variant-numeric: tabular-nums; }
.leaderboard .is-hot { color: var(--danger-text); font-weight: 600; }
.driver-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border-faint); box-shadow: var(--shadow-card); }
.driver-card .driver-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.driver-card .driver-title { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.driver-card .driver-trend { font-size: 11.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.driver-card .driver-trend.is-up { color: var(--success-text); }
.driver-card .driver-trend.is-down { color: var(--danger-text); }
.driver-card .driver-score { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.driver-card .driver-score.is-green { background: var(--success-bg); color: var(--success-text); }
.driver-card .driver-score.is-amber { background: var(--warning-bg); color: var(--warning-text); }
.driver-card .driver-score.is-red { background: var(--danger-bg); color: var(--danger-text); }
.driver-card .driver-flag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.driver-card .driver-metric { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.driver-card .driver-def { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.driver-card .driver-fact { font-size: 11.5px; color: var(--text-muted); }
.rec-box { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-lighter); border: 1px solid var(--accent-100); font-size: 12.5px; color: var(--accent); line-height: 1.45; }
.rec-box::before { content: "→"; font-weight: 700; flex: none; }
/* ==========================================================================
TL-N shell extras (DESIGN-TELI-LIVE §16.1, §16.2, §16.4): the What's new popover and its
dot, the "Show me" spotlight (tip + the anchored card's ring), the report modal's paste
target and the desktop-notification banner. Tokens only - the dark block below redefines
them, never these rules.
========================================================================== */
.whats-new-popover { width: 320px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-modal); }
.whats-new-dot { position: absolute; top: 9px; left: 24px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.sidebar.is-collapsed .whats-new-dot { left: 26px; }
.spotlight-tip { position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 24px); padding: 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent-100); box-shadow: var(--shadow-modal); }
.spotlight-tip-head { display: flex; align-items: flex-start; gap: 8px; }
.spotlight-tip-icon { display: inline-flex; flex: none; color: var(--accent); }
.spotlight-tip-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.spotlight-tip-close { flex: none; color: var(--text-muted); border-radius: var(--r-sm); padding: 2px; }
.spotlight-tip-close:hover { color: var(--ink); background: var(--border-faint); }
.spotlight-tip-body { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.spotlight-tip-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.spotlight-ring { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-card); transition: outline-color 0.2s ease; }
.report-shot { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 10px; border-radius: var(--r-md); border: 1px dashed var(--border); background: var(--bg-subtle); }
.report-shot:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-ring); }
.report-shot-empty { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.report-shot-has { display: inline-flex; align-items: center; gap: 10px; }
.report-shot-img { max-height: 72px; max-width: 220px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.modal-footer.report-foot { grid-template-columns: 1fr auto; align-items: center; margin-top: 20px; }
.modal-footer.report-foot > span { width: auto; height: auto; }
.modal-footer.report-foot > button { width: auto; height: 40px; padding: 0 18px; }
.notify-banner { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border-faint); background: var(--surface); }
.notify-banner-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--accent-light); color: var(--accent); }
.notify-banner-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.notify-banner-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.notify-banner-body { font-size: 12.5px; color: var(--text-secondary); }
.notify-banner-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* ==========================================================================
Dark mode (DESIGN-TELI-LIVE §16.3): TL-0u fixes the two blocks' shape; TL-N fills the values
(every token above redefined — page wash, surfaces, borders, the ink scale, badge tints,
bubbles, notice tints, shadows, scrollbars). The two blocks carry the SAME declarations:
``data-theme="dark"`` is the Appearance choice, the media query is Auto (and the no-script
fallback), and ``data-theme="light"`` always wins over the OS. Components never name a colour —
they read the tokens, so nothing below this line needs a dark twin.
========================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
/* brand / accent: the accent lifts so it stays legible on navy; the blue of an outbound
bubble and of a primary button is unchanged (§16.3 "AI blue stays"). */
--accent: #5b8cff;
--accent-hover: #7ba6ff;
--accent-active: #9cbcff;
--accent-medium: #7ba6ff;
--accent-soft: #3b82f6;
--accent-light: #1b2b50;
--accent-lighter: #16223f;
--accent-100: #1e3060;
--accent-tint: rgba(91, 140, 255, 0.12);
--accent-tint-strong: rgba(91, 140, 255, 0.22);
--accent-ring: rgba(91, 140, 255, 0.35);
--accent-hover-bg: rgba(91, 140, 255, 0.1);
/* AI violet / extraction purple */
--ai: #9b8cff;
--ai-light: #1f1c3f;
--ai-border: #352f66;
--purple: #b57aff;
--purple-light: #241a38;
--purple-text: #ddc3ff;
--bucket: #c084fc;
/* neutrals: the ink scale inverts, the page wash is deep navy */
--ink: #e7edf8;
--text-body: #c8d3e4;
--text-secondary: #97a3b6;
--text-muted: #7d8799;
--text-faint: #5c687a;
--border: #26344a;
--border-medium: #36445e;
--border-faint: #1d2840;
--bg-subtle: #1e293b;
--bg-secondary: #162034;
--bg-modal: #111a2c;
--surface: #131c2f;
--surface-glass: rgba(19, 28, 47, 0.85);
/* semantic */
--success: #34d399;
--success-bg: #0f2c24;
--success-text: #5fdcab;
--success-border: #1e5245;
--success-toast: #15966a;
--warning: #fbbf24;
--warning-bg: #332710;
--warning-text: #f2b53c;
--warning-deep: #fcd34d;
--warning-border: #5a4310;
--danger: #f87171;
--danger-bg: #391719;
--danger-text: #fca5a5;
--danger-border: #5f2528;
--danger-solid: #c62a3f;
--info-bg: #122238;
/* stat-tile tints */
--tint-blue: #121d33;
--tint-green: #0f2620;
--tint-amber: #2a2210;
--tint-red: #2c1618;
/* charts (charts.py paints through these) */
--chart-bar-top: #7ba6ff;
--chart-bar-bottom: #2f5cd6;
--chart-bar-light: #4d7fe0;
--chart-track: #1a2540;
--chart-ring-track: #1e2a42;
--chart-green: #34d399;
--chart-neutral: #8b98ad;
--chart-red: #f87171;
--tooltip-dark: #33415a;
/* gradients: the wash is navy, the greeting band a deep indigo fade */
--gradient-app: linear-gradient(180deg, #0b1220 0%, #0d1730 26%, #0f1d3c 56%, #132650 82%, #16306a 100%);
--gradient-page: linear-gradient(180deg, #0d1730, #0c1528 140px, #0b1220 320px);
--gradient-greeting: linear-gradient(90deg, #1a2445 0%, #1d2750 50%, #182140 100%);
--gradient-dash: linear-gradient(180deg, #0b1220 0%, #0c1830 24%, #0f1f40 52%, #12284f 80%, rgba(24, 60, 140, 0.85) 100%);
--gradient-band: linear-gradient(90deg, #1b2750 0%, #1e2a56 40%, #202d5c 70%, rgba(32, 45, 92, 0.35) 100%);
--dot-pattern: rgba(91, 140, 255, 0.12);
/* shadows: black at a lower alpha (a blue glow reads as smudge on navy) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
--shadow-accent: 0 4px 16px rgba(91, 140, 255, 0.3);
--shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
--shadow-tooltip: 0 6px 20px rgba(0, 0, 0, 0.5);
/* component surfaces and one-off inks (the light twins are in :root) */
--card: #131c2f;
--surface-2: #0f1729;
--widget-glass: rgba(22, 32, 54, 0.72);
--widget-ring: rgba(255, 255, 255, 0.04);
--surface-sticky: rgba(19, 28, 47, 0.96);
--section-border: #1d2840;
--scrim: rgba(3, 7, 18, 0.65);
--scrim-soft: rgba(3, 7, 18, 0.5);
--nav-icon: #97a3b6;
--text-label: #97a3b6;
--text-title: #e7edf8;
--text-sub: #97a3b6;
--text-preview: #c8d3e4;
--greeting-pill-bg: rgba(19, 28, 47, 0.7);
--greeting-dot: #7b8fe8;
--sparkle: rgba(255, 255, 255, 0.5);
--green-solid: #34d399;
--green-deep: #7ce0b4;
--red-deep: #fca5a5;
--amber-tint: #2a2210;
--green-tint: #0f2620;
--blue-tint: #121d33;
--border-blue: #2a4278;
--info-border: #1f3a6b;
--info-text: #bfd4ff;
--flash-success-bg: #0f2a20;
--flash-success-text: #7ce0b4;
--badge-green-text: #7ce0b4;
--badge-dark-bg: #2a3550;
--badge-dark-text: #e7edf8;
--badge-purple-bg: #251b3a;
--badge-purple-text: #ddc3ff;
--badge-purple-border: #3f2f60;
--badge-dashed-border: #2f4c7d;
--badge-sample-bg: #2a2412;
--badge-sample-text: #e3c481;
--badge-op-bg: #292711;
--badge-count-bg: #1e293b;
--badge-count-text: #c8d3e4;
--bubble-draft-text: #cdc6ff;
--sample-bg: #2a2412;
--sample-text: #e3c481;
--tile-bg: #18294a;
--tile-ai-bg: #1f1c3f;
--tile-purple-bg: #2a1d3f;
--var-token-bg: #23306b;
--var-token-text: #b9c6ff;
--btn-ai-text: #b6aaff;
--btn-soft-hover: #25386b;
/* chart repaint: the baked SVG palette, read through tokens (see the rules at the foot) */
--chart-ink: #e7edf8;
--chart-muted: #97a3b6;
--chart-tick: #5c687a;
--chart-grid: #26344a;
--chart-surface: #131c2f;
--chart-strip-empty: #1c2740;
--chart-meter-empty: #223049;
--chart-bar-cap: #3d68c4;
--chart-empty-card: #162034;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
/* brand / accent: the accent lifts so it stays legible on navy; the blue of an outbound
bubble and of a primary button is unchanged (§16.3 "AI blue stays"). */
--accent: #5b8cff;
--accent-hover: #7ba6ff;
--accent-active: #9cbcff;
--accent-medium: #7ba6ff;
--accent-soft: #3b82f6;
--accent-light: #1b2b50;
--accent-lighter: #16223f;
--accent-100: #1e3060;
--accent-tint: rgba(91, 140, 255, 0.12);
--accent-tint-strong: rgba(91, 140, 255, 0.22);
--accent-ring: rgba(91, 140, 255, 0.35);
--accent-hover-bg: rgba(91, 140, 255, 0.1);
/* AI violet / extraction purple */
--ai: #9b8cff;
--ai-light: #1f1c3f;
--ai-border: #352f66;
--purple: #b57aff;
--purple-light: #241a38;
--purple-text: #ddc3ff;
--bucket: #c084fc;
/* neutrals: the ink scale inverts, the page wash is deep navy */
--ink: #e7edf8;
--text-body: #c8d3e4;
--text-secondary: #97a3b6;
--text-muted: #7d8799;
--text-faint: #5c687a;
--border: #26344a;
--border-medium: #36445e;
--border-faint: #1d2840;
--bg-subtle: #1e293b;
--bg-secondary: #162034;
--bg-modal: #111a2c;
--surface: #131c2f;
--surface-glass: rgba(19, 28, 47, 0.85);
/* semantic */
--success: #34d399;
--success-bg: #0f2c24;
--success-text: #5fdcab;
--success-border: #1e5245;
--success-toast: #15966a;
--warning: #fbbf24;
--warning-bg: #332710;
--warning-text: #f2b53c;
--warning-deep: #fcd34d;
--warning-border: #5a4310;
--danger: #f87171;
--danger-bg: #391719;
--danger-text: #fca5a5;
--danger-border: #5f2528;
--danger-solid: #c62a3f;
--info-bg: #122238;
/* stat-tile tints */
--tint-blue: #121d33;
--tint-green: #0f2620;
--tint-amber: #2a2210;
--tint-red: #2c1618;
/* charts (charts.py paints through these) */
--chart-bar-top: #7ba6ff;
--chart-bar-bottom: #2f5cd6;
--chart-bar-light: #4d7fe0;
--chart-track: #1a2540;
--chart-ring-track: #1e2a42;
--chart-green: #34d399;
--chart-neutral: #8b98ad;
--chart-red: #f87171;
--tooltip-dark: #33415a;
/* gradients: the wash is navy, the greeting band a deep indigo fade */
--gradient-app: linear-gradient(180deg, #0b1220 0%, #0d1730 26%, #0f1d3c 56%, #132650 82%, #16306a 100%);
--gradient-page: linear-gradient(180deg, #0d1730, #0c1528 140px, #0b1220 320px);
--gradient-greeting: linear-gradient(90deg, #1a2445 0%, #1d2750 50%, #182140 100%);
--gradient-dash: linear-gradient(180deg, #0b1220 0%, #0c1830 24%, #0f1f40 52%, #12284f 80%, rgba(24, 60, 140, 0.85) 100%);
--gradient-band: linear-gradient(90deg, #1b2750 0%, #1e2a56 40%, #202d5c 70%, rgba(32, 45, 92, 0.35) 100%);
--dot-pattern: rgba(91, 140, 255, 0.12);
/* shadows: black at a lower alpha (a blue glow reads as smudge on navy) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
--shadow-accent: 0 4px 16px rgba(91, 140, 255, 0.3);
--shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
--shadow-tooltip: 0 6px 20px rgba(0, 0, 0, 0.5);
/* component surfaces and one-off inks (the light twins are in :root) */
--card: #131c2f;
--surface-2: #0f1729;
--widget-glass: rgba(22, 32, 54, 0.72);
--widget-ring: rgba(255, 255, 255, 0.04);
--surface-sticky: rgba(19, 28, 47, 0.96);
--section-border: #1d2840;
--scrim: rgba(3, 7, 18, 0.65);
--scrim-soft: rgba(3, 7, 18, 0.5);
--nav-icon: #97a3b6;
--text-label: #97a3b6;
--text-title: #e7edf8;
--text-sub: #97a3b6;
--text-preview: #c8d3e4;
--greeting-pill-bg: rgba(19, 28, 47, 0.7);
--greeting-dot: #7b8fe8;
--sparkle: rgba(255, 255, 255, 0.5);
--green-solid: #34d399;
--green-deep: #7ce0b4;
--red-deep: #fca5a5;
--amber-tint: #2a2210;
--green-tint: #0f2620;
--blue-tint: #121d33;
--border-blue: #2a4278;
--info-border: #1f3a6b;
--info-text: #bfd4ff;
--flash-success-bg: #0f2a20;
--flash-success-text: #7ce0b4;
--badge-green-text: #7ce0b4;
--badge-dark-bg: #2a3550;
--badge-dark-text: #e7edf8;
--badge-purple-bg: #251b3a;
--badge-purple-text: #ddc3ff;
--badge-purple-border: #3f2f60;
--badge-dashed-border: #2f4c7d;
--badge-sample-bg: #2a2412;
--badge-sample-text: #e3c481;
--badge-op-bg: #292711;
--badge-count-bg: #1e293b;
--badge-count-text: #c8d3e4;
--bubble-draft-text: #cdc6ff;
--sample-bg: #2a2412;
--sample-text: #e3c481;
--tile-bg: #18294a;
--tile-ai-bg: #1f1c3f;
--tile-purple-bg: #2a1d3f;
--var-token-bg: #23306b;
--var-token-text: #b9c6ff;
--btn-ai-text: #b6aaff;
--btn-soft-hover: #25386b;
/* chart repaint: the baked SVG palette, read through tokens (see the rules at the foot) */
--chart-ink: #e7edf8;
--chart-muted: #97a3b6;
--chart-tick: #5c687a;
--chart-grid: #26344a;
--chart-surface: #131c2f;
--chart-strip-empty: #1c2740;
--chart-meter-empty: #223049;
--chart-bar-cap: #3d68c4;
--chart-empty-card: #162034;
}
}
/* The one component surface with no token twin in light: the inbox panel backdrop (a dim over
the thread, not a page surface) — it must stay dark in BOTH themes, so it reads --scrim-soft. */
.panel-scrim { background: var(--scrim-soft); }
/* ==========================================================================
Chart repaint (DESIGN-TELI-LIVE §16.3, TL-N). services/charts.py writes its palette as SVG
PRESENTATION attributes (fill="#111827", stroke="#f3f4f5", …), which sit below every author
rule in the cascade — so restating each one through its token repaints every chart in dark
without a single edit to charts.py or to a chart partial. In light each token holds exactly
the literal charts.py wrote, so these rules change nothing. Data colours (the accent, the bar
gradient, green / amber / red, the funnel blues) are legible on navy and are left alone.
========================================================================== */
svg [fill="#111827"] { fill: var(--chart-ink); }
svg [fill="#9ca3af"] { fill: var(--chart-muted); }
svg [fill="#c6cacf"] { fill: var(--chart-tick); }
svg [fill="#eef1f6"] { fill: var(--chart-strip-empty); }
svg [fill="#e5e9f0"] { fill: var(--chart-meter-empty); }
svg [fill="#eaf2fc"] { fill: var(--chart-track); }
svg [fill="#dbe7fd"] { fill: var(--chart-bar-cap); }
svg [fill="#64748b"] { fill: var(--chart-neutral); }
svg [fill="#ffffff"] { fill: var(--chart-surface); }
svg [fill="#f9fafb"] { fill: var(--chart-empty-card); }
svg [stroke="#111827"] { stroke: var(--chart-ink); }
svg [stroke="#c6cacf"] { stroke: var(--chart-tick); }
svg [stroke="#f3f4f5"] { stroke: var(--chart-grid); }
svg [stroke="#eef2f7"] { stroke: var(--chart-ring-track); }
svg [stroke="#ffffff"] { stroke: var(--chart-surface); }