/**
* dix.css — shared design system
*
* Usage:
*
*
* Theme is controlled by a data-theme attribute on or :
* data-theme="dark" → dark mode (default for onboarding / site)
* data-theme="light" → light mode (default for app views)
*
* Respects prefers-color-scheme when data-theme is not set.
*/
/* ─── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* ─── Tokens ────────────────────────────────────────────────────────────────
Define all design tokens as CSS variables on :root.
Dark overrides are declared in [data-theme="dark"] and the media query.
───────────────────────────────────────────────────────────────────────── */
:root {
/* Brand */
--dix-primary: #6366f1;
--dix-primary-dark: #4f46e5;
--dix-primary-light: rgba(99, 102, 241, 0.12);
--dix-secondary: #8b5cf6;
--dix-accent: #a855f7;
/* Status */
--dix-success: #4ade80;
--dix-success-bg: rgba(74, 222, 128, 0.07);
--dix-success-border: rgba(74, 222, 128, 0.2);
--dix-danger: #f87171;
--dix-danger-bg: rgba(239, 68, 68, 0.08);
--dix-warning: #fbbf24;
/* Gradient */
--dix-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
--dix-gradient-text: linear-gradient(135deg, #818cf8, #c084fc, #67e8f9);
/* Typography */
--font-ui: 'Inter', system-ui, sans-serif;
--font-brand: 'Outfit', system-ui, sans-serif;
/* Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.35s ease;
}
/* ─── Light mode tokens (default) ──────────────────────────────────────────── */
:root,
[data-theme="light"] {
color-scheme: light;
--bg: #F5F7FA;
--bg-elevated: #ffffff;
--bg-subtle: #f1f5f9;
--bg-overlay: rgba(255, 255, 255, 0.95);
--border: rgba(0, 0, 0, 0.08);
--border-focus: rgba(99, 102, 241, 0.5);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--text-on-brand: #ffffff;
--input-bg: #ffffff;
--input-border: #e2e8f0;
--input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.1);
}
/* ─── Dark mode tokens ──────────────────────────────────────────────────────
Applied via data-theme="dark" or system preference.
───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #080e1a;
--bg-elevated: rgba(13, 20, 38, 0.9);
--bg-subtle: rgba(255, 255, 255, 0.03);
--bg-overlay: rgba(8, 14, 26, 0.85);
--border: rgba(255, 255, 255, 0.08);
--border-focus: rgba(129, 140, 248, 0.7);
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-on-brand: #ffffff;
--input-bg: rgba(255, 255, 255, 0.05);
--input-border: rgba(255, 255, 255, 0.1);
--input-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
}
/* Explicit dark attribute always wins over media query */
[data-theme="dark"] {
color-scheme: dark;
--bg: #080e1a;
--bg-elevated: rgba(13, 20, 38, 0.9);
--bg-subtle: rgba(255, 255, 255, 0.03);
--bg-overlay: rgba(8, 14, 26, 0.85);
--border: rgba(255, 255, 255, 0.08);
--border-focus: rgba(129, 140, 248, 0.7);
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #475569;
--text-on-brand: #ffffff;
--input-bg: rgba(255, 255, 255, 0.05);
--input-border: rgba(255, 255, 255, 0.1);
--input-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ─── Base ──────────────────────────────────────────────────────────────────── */
body {
font-family: var(--font-ui);
background: var(--bg);
color: var(--text-primary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* ─── Typography ────────────────────────────────────────────────────────────── */
.dix-h1 { font-size: 2rem; font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.dix-h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.dix-h3 { font-size: 1.25rem;font-weight: 700; line-height: 1.4; color: var(--text-primary); }
.dix-body { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.dix-caption{ font-size: 12px; color: var(--text-muted); }
.dix-label { font-size: 13px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.07em; }
.dix-grad {
background: var(--dix-gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ─── Card ──────────────────────────────────────────────────────────────────── */
.dix-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.dix-card-hover {
transition: transform var(--transition-base), box-shadow var(--transition-base);
cursor: pointer;
}
.dix-card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.dix-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-ui); font-size: 14px; font-weight: 600;
padding: 10px 20px; border-radius: var(--radius-md);
border: none; cursor: pointer;
transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-base);
white-space: nowrap;
}
.dix-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Primary */
.dix-btn-primary {
background: var(--dix-gradient);
color: var(--text-on-brand);
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.22);
}
.dix-btn-primary:not(:disabled):hover {
opacity: 0.95; transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.32);
}
.dix-btn-primary:not(:disabled):active { transform: translateY(0); }
/* Secondary */
.dix-btn-secondary {
background: var(--bg-subtle);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.dix-btn-secondary:not(:disabled):hover {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border-focus);
}
/* Ghost */
.dix-btn-ghost {
background: transparent;
color: var(--text-muted);
border: 1px solid transparent;
}
.dix-btn-ghost:not(:disabled):hover {
color: var(--text-secondary);
background: var(--bg-subtle);
}
/* Danger */
.dix-btn-danger {
background: var(--dix-danger-bg);
color: var(--dix-danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.dix-btn-danger:not(:disabled):hover {
background: rgba(239, 68, 68, 0.15);
}
/* Size variants */
.dix-btn-sm { font-size: 12px; padding: 7px 14px; border-radius: var(--radius-sm); }
.dix-btn-lg { font-size: 16px; padding: 14px 28px; border-radius: var(--radius-lg); }
.dix-btn-full { width: 100%; }
/* ─── Inputs ────────────────────────────────────────────────────────────────── */
.dix-input {
width: 100%;
background: var(--input-bg);
border: 1.5px solid var(--input-border);
border-radius: var(--radius-md);
outline: none;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 14px;
padding: 10px 14px;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.dix-input:focus {
border-color: var(--border-focus);
box-shadow: var(--input-focus-shadow);
}
.dix-input::placeholder { color: var(--text-muted); }
.dix-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.dix-input-label {
display: block;
font-size: 13px; font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}
.dix-input-group { display: flex; flex-direction: column; gap: 6px; }
/* ─── Badge ─────────────────────────────────────────────────────────────────── */
.dix-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 20px;
font-size: 12px; font-weight: 600;
border: 1px solid var(--border);
background: var(--bg-subtle);
color: var(--text-muted);
}
.dix-badge-primary {
background: var(--dix-primary-light);
border-color: rgba(99, 102, 241, 0.25);
color: #818cf8;
}
.dix-badge-success {
background: var(--dix-success-bg);
border-color: var(--dix-success-border);
color: var(--dix-success);
}
.dix-badge-danger {
background: var(--dix-danger-bg);
border-color: rgba(239, 68, 68, 0.2);
color: var(--dix-danger);
}
/* ─── Divider ───────────────────────────────────────────────────────────────── */
.dix-divider {
border: none;
border-top: 1px solid var(--border);
margin: 16px 0;
}
/* ─── Spinner ───────────────────────────────────────────────────────────────── */
.dix-spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border);
border-top-color: var(--dix-primary);
animation: dix-spin 0.7s linear infinite;
flex-shrink: 0;
}
.dix-spinner-sm { width: 13px; height: 13px; }
.dix-spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes dix-spin { to { transform: rotate(360deg); } }
/* ─── Toggle (basic / advanced) ─────────────────────────────────────────────── */
.dix-mode-toggle {
display: inline-flex; align-items: center;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 20px; padding: 3px;
gap: 2px;
}
.dix-mode-btn {
padding: 5px 14px; border-radius: 16px;
font-size: 12px; font-weight: 600;
border: none; cursor: pointer; background: none;
color: var(--text-muted);
transition: all var(--transition-base);
}
.dix-mode-btn.active {
background: var(--bg-elevated);
color: var(--dix-primary);
box-shadow: var(--shadow-sm);
}
/* Hide/show advanced fields */
.dix-advanced { display: none; }
body.advanced-mode .dix-advanced { display: flex; }
/* ─── Drag & drop zone ───────────────────────────────────────────────────────── */
.dix-dropzone {
border: 1.5px dashed var(--border);
border-radius: var(--radius-md);
padding: 24px;
text-align: center; cursor: pointer;
transition: border-color var(--transition-base), background var(--transition-base);
color: var(--text-muted);
}
.dix-dropzone:hover,
.dix-dropzone.drag {
border-color: rgba(99, 102, 241, 0.45);
background: var(--dix-primary-light);
color: var(--dix-primary);
}
/* ─── File chip ─────────────────────────────────────────────────────────────── */
.dix-file-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--dix-primary-light);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 20px; padding: 3px 10px;
font-size: 12px; color: #a5b4fc;
}
.dix-file-chip button {
background: none; border: none; cursor: pointer;
color: #818cf8; font-size: 14px; padding: 0; line-height: 1;
}
/* ─── Alert ─────────────────────────────────────────────────────────────────── */
.dix-alert {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border-radius: var(--radius-md);
border-left: 3px solid;
background: var(--bg-subtle);
border-color: var(--border);
color: var(--text-secondary);
font-size: 14px;
}
.dix-alert-danger { background: var(--dix-danger-bg); border-color: var(--dix-danger); color: var(--dix-danger); }
.dix-alert-success { background: var(--dix-success-bg); border-color: var(--dix-success); color: var(--dix-success); }
.dix-alert-warning { background: rgba(251,191,36,0.08); border-color: var(--dix-warning); color: var(--dix-warning); }
/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes dix-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dix-fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dix-fade-in-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes dix-breathe { 0%,100% { opacity: .5; transform: scale(1) translateY(0); }
50% { opacity: .7; transform: scale(1.08) translateY(-12px); } }
@keyframes dix-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dix-pulse-dot { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }
.dix-animate-fade-in { animation: dix-fade-in 0.3s ease-out; }
.dix-animate-fade-in-up { animation: dix-fade-in-up 0.35s ease-out; }
.dix-animate-fade-in-down{ animation: dix-fade-in-down 0.35s ease-out; }
/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
.dix-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.dix-scroll::-webkit-scrollbar-track { background: transparent; }
.dix-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* ═══════════════════════════════════════════════════════════════════════════════
APP SHELL — sidebar, header, main layout
Usage (in every view with the layout):
{{template "sidebar" .}}
{{template "header" .}}
...
══════════════════════════════════════════════════════════════════════════════ */
.app-body {
display: flex;
min-height: 100vh;
height: 100vh;
overflow: hidden;
background: var(--bg);
color: var(--text-primary);
}
.app-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.app-main {
flex: 1;
overflow-y: auto;
min-height: 0;
background: var(--bg);
}
/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.app-sidebar {
width: 256px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border-right: 1px solid var(--border);
z-index: 40;
transition: width 0.2s ease, transform 0.25s ease;
}
.app-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 18px 16px;
text-decoration: none;
color: var(--text-primary);
font-family: var(--font-brand);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.02em;
border-bottom: 1px solid var(--border);
}
.app-brand-mark {
width: 32px;
height: 32px;
flex-shrink: 0;
object-fit: contain;
}
.app-brand-text {
white-space: nowrap;
overflow: hidden;
transition: opacity 0.15s ease;
}
.app-nav {
flex: 1;
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
}
.app-nav-section { display: flex; flex-direction: column; gap: 2px; }
.app-nav-heading {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
padding: 6px 12px 4px;
white-space: nowrap;
overflow: hidden;
}
.app-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 10px;
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
white-space: nowrap;
overflow: hidden;
}
.app-nav-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.85;
}
.app-nav-link:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
.app-nav-link.active {
background: var(--dix-primary-light);
color: var(--dix-primary);
font-weight: 600;
}
.app-nav-link.active svg { opacity: 1; }
/* Sidebar footer (user chip + logout) */
.app-sidebar-footer {
padding: 12px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.app-user {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 10px;
min-width: 0;
}
.app-user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--dix-gradient);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
text-transform: uppercase;
}
.app-user-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.app-user-email {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-user-tenant {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-logout {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 9px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
}
.app-logout:hover { background: var(--dix-danger-bg); color: var(--dix-danger); }
.app-logout svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Below 1024px: sidebar becomes a drawer */
@media (max-width: 1023px) {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 280px;
transform: translateX(-100%);
box-shadow: var(--shadow-lg);
}
.app-sidebar.open { transform: translateX(0); }
}
.app-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 6, 23, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 35;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.app-backdrop.visible { opacity: 1; pointer-events: auto; }
/* ── Header ────────────────────────────────────────────────────────────────── */
.app-header {
height: 67px;
padding: 0 18px;
background: var(--bg-overlay);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.app-header-title {
flex: 1;
font-family: var(--font-brand);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.01em;
}
.app-icon-btn {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-icon-btn:hover {
background: var(--bg-subtle);
color: var(--text-primary);
border-color: var(--border);
}
.app-icon-btn svg { width: 18px; height: 18px; }
.app-icon-btn .badge-dot {
position: absolute;
top: 6px;
right: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
display: grid;
place-items: center;
line-height: 1;
box-shadow: 0 0 0 2px var(--bg-overlay);
}
/* Hamburger visible below desktop breakpoint */
.app-hamburger { display: none; }
@media (max-width: 1023px) {
.app-hamburger { display: grid; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
HOME — greeting, stats, agents, steps, quick-actions
══════════════════════════════════════════════════════════════════════════════ */
.home-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 28px 24px 56px;
display: flex;
flex-direction: column;
gap: 32px;
}
@media (max-width: 767px) { .home-wrap { padding: 20px 16px 40px; gap: 28px; } }
.home-greeting {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.home-greeting-text { min-width: 0; flex: 1; }
.home-greeting h1 {
font-family: var(--font-brand);
font-size: 30px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
.home-greeting p {
margin-top: 6px;
font-size: 14px;
color: var(--text-muted);
}
.home-greeting-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: 767px) {
.home-greeting h1 { font-size: 24px; }
.home-greeting { flex-direction: column; align-items: flex-start; }
.home-greeting-actions { width: 100%; }
.home-greeting-actions .dix-btn { flex: 1; justify-content: center; }
}
/* Section heading */
.home-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
gap: 12px;
}
.home-section-head h2 {
font-family: var(--font-brand);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0;
}
.home-section-head a {
font-size: 12px;
font-weight: 600;
color: var(--dix-primary);
text-decoration: none;
white-space: nowrap;
}
.home-section-head a:hover { text-decoration: underline; }
/* Stat cards row */
.home-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.stat-card {
padding: 18px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.stat-card:hover {
border-color: rgba(99, 102, 241, 0.35);
transform: translateY(-1px);
}
.stat-card-label {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.stat-card-label svg { width: 14px; height: 14px; opacity: 0.7; }
.stat-card-value {
font-family: var(--font-brand);
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
letter-spacing: -0.02em;
}
.stat-card-foot {
font-size: 11px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.stat-card-foot .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--dix-success);
display: inline-block;
}
@media (max-width: 767px) {
.home-stats { gap: 8px; }
.stat-card { flex-direction: row; align-items: center; padding: 12px 14px; gap: 12px; }
.stat-card-label { flex: 1; min-width: 0; }
.stat-card-label svg { display: none; }
.stat-card-value { font-size: 22px; flex-shrink: 0; }
.stat-card-foot { display: none; }
}
/* Agents list */
.home-agents-scroll {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.home-agents-scroll-wrap { position: relative; }
@media (max-width: 767px) {
.home-agents-scroll {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
margin: 0 -16px;
padding: 4px 16px 4px;
}
.home-agents-scroll::-webkit-scrollbar { display: none; }
.home-agents-scroll { scrollbar-width: none; }
.agent-card { scroll-snap-align: start; min-width: 260px; }
.home-agents-scroll-wrap::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 40px;
background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none;
}
}
.agent-card {
padding: 16px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.agent-card:hover {
border-color: rgba(99, 102, 241, 0.45);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.agent-card-head {
display: flex;
align-items: center;
gap: 10px;
}
.agent-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--dix-gradient);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.agent-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agent-desc {
font-size: 12px;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
min-height: 34px;
}
.agent-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
}
.agent-foot .counter {
display: inline-flex;
align-items: center;
gap: 4px;
}
.agent-foot .counter svg { width: 12px; height: 12px; opacity: 0.7; }
/* Empty agents */
.agents-empty {
padding: 32px 24px;
background: var(--bg-elevated);
border: 1.5px dashed var(--border);
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.agents-empty > svg {
width: 40px;
height: 40px;
color: var(--dix-primary);
opacity: 0.7;
}
.agents-empty p {
font-size: 14px;
color: var(--text-secondary);
max-width: 360px;
line-height: 1.5;
}
/* Steps grid */
.home-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
position: relative;
}
@media (max-width: 767px) { .home-steps { grid-template-columns: 1fr; } }
.step-card {
padding: 20px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
transition: border-color 0.15s ease;
}
.step-card:hover { border-color: rgba(99, 102, 241, 0.3); }
.step-num {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--dix-primary-light);
color: var(--dix-primary);
display: grid;
place-items: center;
font-family: var(--font-brand);
font-weight: 700;
font-size: 15px;
}
.step-card h3 {
font-family: var(--font-brand);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0;
}
.step-card p {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
/* Quick actions */
.home-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 1023px) { .home-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .home-actions { grid-template-columns: 1fr; } }
.action-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.action-card:hover {
border-color: rgba(99, 102, 241, 0.4);
transform: translateY(-1px);
}
.action-card-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--dix-primary-light);
color: var(--dix-primary);
display: grid;
place-items: center;
flex-shrink: 0;
}
.action-card-icon svg { width: 18px; height: 18px; }
.action-card-text { min-width: 0; }
.action-card-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.action-card-sub {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
/* Utility: gradient headline */
.home-grad {
background: var(--dix-gradient-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Plan card */
.home-plan-inner {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.home-plan-meta { flex: 1; min-width: 160px; }
.home-plan-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.home-plan-name-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.home-plan-name {
font-family: var(--font-brand);
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
.home-plan-trial { font-size: 12px; color: var(--dix-warning); font-weight: 600; }
.home-plan-usage { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.home-plan-usage-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
gap: 8px;
}
.home-plan-queries-val { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-plan-track {
height: 6px;
background: var(--bg-subtle);
border-radius: 999px;
overflow: hidden;
}
.home-plan-bar {
height: 100%;
width: 0%;
background: var(--dix-gradient);
border-radius: 999px;
transition: width .35s;
}
@media (max-width: 767px) {
.home-plan-inner { gap: 14px; }
.home-plan-inner .dix-btn { width: 100%; justify-content: center; }
}
/* ── Chat metrics (stats-grid) ──────────────────────────────────────────── */
.stats-details { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.stats-details summary { cursor: pointer; user-select: none; }
.stats-details summary:hover { color: var(--text-primary); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; padding: 8px 0 0; }
.stats-grid div { display: flex; justify-content: space-between; gap: 8px; }
.stats-grid dt { color: var(--text-muted); }
.stats-grid dd { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }