/* ─── CLAIMS SUITE — Shared Styles · "Dispatch" design system 2026 ─── */
/* Geist for UI, JetBrains Mono for data. Steel neutrals, one storm blue. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* (canonical tokens live in the single :root block below — one source of truth) */
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
min-height: 100vh;
}
/* ── BUTTONS ── */
.btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; font-family:inherit; transition:all .18s ease; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; letter-spacing:-.1px; }
.btn:disabled { background:var(--card2); color:var(--soft); border-color:var(--border); opacity:1; cursor:not-allowed; pointer-events:none; }
.btn-primary {
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 1px 2px rgba(26,26,31,.12);
}
.btn-primary:hover {
box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
background: var(--accent2, #1d4ed8);
box-shadow: 0 2px 10px rgba(16,24,40,.20), inset 0 1px 0 rgba(255,255,255,.14);
transform: translateY(-1px);
}
.btn-primary:active { transform:translateY(0) scale(.972); box-shadow:0 1px 2px rgba(16,24,40,.18); }
.btn-ghost {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover { background:var(--card2); border-color:var(--accent); color:var(--accent); }
.btn-green { background:var(--green); color:var(--on-accent); }
.btn-green:hover { filter:brightness(1.06); }
.btn-red { background:rgba(240,96,96,.12); color:var(--red); border:1px solid rgba(240,96,96,.25); }
.btn-red:hover { background:rgba(240,96,96,.2); border-color:var(--red); }
.btn-sm { padding:5px 12px; font-size:11.5px; border-radius:7px; }
.btn-full { width:100%; justify-content:center; }
/* ── INPUTS ── */
.input, .select, .textarea {
background: var(--card);
border: 1px solid var(--border);
border-radius: 7px;
padding: 9px 12px;
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color .15s;
width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder { color: var(--soft); }
.select option { background: var(--card2); }
.textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
/* ── TAGS ── */
.tag { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; display:inline-flex; align-items:center; gap:4px; }
.tag::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.7; }
.tag-green { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.2); }
.tag-yellow { background:rgba(245,158,11,.12); color:#d97706; border:1px solid rgba(245,158,11,.2); }
.tag-red { background:rgba(239,68,68,.12); color:#dc2626; border:1px solid rgba(239,68,68,.2); }
.tag-blue { background:var(--accent-tint); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.tag-orange { background:rgba(249,115,22,.12); color:#ea580c; border:1px solid rgba(249,115,22,.2); }
.tag-gray { background:rgba(107,114,128,.1); color:#6b7280; border:1px solid rgba(107,114,128,.15); }
.tag-purple { background:var(--card2); color:var(--soft); border:1px solid var(--border); }
/* ── CARDS ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px; }
/* ── FORM FIELDS ── */
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:10px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.7px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-full { grid-column:1/-1; }
/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:16px 0; }
/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:48px 24px; color:var(--soft); }
.empty-icon { font-size:32px; margin-bottom:12px; }
.empty-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.empty-sub { font-size:13px; line-height:1.5; }
/* ── UPLOAD ZONE ── */
.upload-zone {
border: 2px dashed var(--border);
border-radius: 10px;
padding: 28px;
text-align: center;
cursor: pointer;
transition: all .2s;
}
.upload-zone:hover, .upload-zone.dragover {
border-color: var(--accent);
background: rgba(91,142,240,.05);
}
.upload-icon { font-size:28px; margin-bottom:8px; }
.upload-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.upload-sub { font-size:12px; color:var(--soft); }
/* ── FILE ITEM ── */
.file-item { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.file-icon { font-size:20px; flex-shrink:0; }
.file-info { flex:1; min-width:0; }
.file-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta { font-size:11px; color:var(--soft); margin-top:2px; }
.file-remove { background:none; border:none; color:var(--soft); cursor:pointer; font-size:16px; padding:2px 6px; border-radius:4px; }
.file-remove:hover { color:var(--red); background:rgba(240,96,96,.1); }
/* ── TOAST NOTIFICATIONS ── */
.toast-container { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast { background:#181613; color:#f0eee9; border:1px solid #322d27; border-radius:var(--radius); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-family:var(--font-sans); box-shadow:var(--shadow-3); animation:toast-in var(--dur-3, .25s) var(--ease-out, ease); min-width:260px; }
.toast.success { border-color:rgba(74,222,128,.45); }
.toast.error { border-color:rgba(248,113,113,.45); }
.toast-icon { font-size:16px; flex-shrink:0; }
.toast-out { animation:toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }
/* ── SPINNER ── */
.spin { animation:spinning 1s linear infinite; display:inline-block; }
@keyframes spinning { to { transform:rotate(360deg); } }
/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--sidebar); border:1px solid var(--border); border-radius:14px; width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title { font-size:17px; font-weight:700; }
.modal-body { flex:1; overflow-y:auto; padding:20px 24px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; flex-shrink:0; }
.close-btn { background:var(--card); border:1px solid var(--border); color:var(--soft); width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.close-btn:hover { color:var(--text); }
/* ── PROGRESS BAR ── */
.progress-wrap { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-bar { height:100%; border-radius:3px; background:var(--accent); transition:width 1.5s ease; }
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
/* ══ RICHARD — partner briefing ══ */
@keyframes rkFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes rkShimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes rkPulse { 0%,100% { box-shadow:0 0 0 0 rgba(99,102,241,.45); } 50% { box-shadow:0 0 0 6px rgba(99,102,241,0); } }
.rk-card { position:relative; margin-bottom:18px; padding:16px 18px; border-radius:var(--radius);
background:var(--card);
border:1px solid var(--border); box-shadow:var(--shadow-1);
animation:rkFadeUp .5s cubic-bezier(.2,.7,.3,1) both; overflow:hidden; }
.rk-card::before { display:none; }
.rk-head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.rk-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:var(--accent); color:var(--on-accent); font-weight:600; font-size:16px;
display:flex; align-items:center; justify-content:center; }
.rk-who { line-height:1.2; }
.rk-name { font-weight:800; font-size:14px; color:var(--text); letter-spacing:-.2px; }
.rk-role { font-size:11px; color:var(--soft); }
.rk-live { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:10px; color:var(--soft); text-transform:uppercase; letter-spacing:.6px; }
.rk-live .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 var(--green); animation:rkPulse 2s infinite; }
.rk-refresh { background:none; border:1px solid var(--border); color:var(--soft); border-radius:8px; padding:3px 8px; font-size:11px; cursor:pointer; transition:.15s; }
.rk-refresh:hover { color:var(--text); border-color:var(--accent); }
.rk-narr { font-size:13.5px; line-height:1.62; color:var(--text); white-space:pre-line; }
.rk-narr .rk-arrow { color:var(--accent); font-weight:700; }
.rk-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.rk-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:9px; font-size:12px; font-weight:600;
background:var(--card2); border:1px solid var(--border); color:var(--text); cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.rk-chip:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); border-color:var(--accent); }
.rk-chip.alert { border-color:rgba(239,68,68,.4); color:var(--red); }
.rk-section { margin-top:13px; padding-top:11px; border-top:1px solid var(--border); }
.rk-section-h { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--soft); margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.rk-inbox-row { display:flex; gap:9px; align-items:flex-start; padding:6px 0; cursor:pointer; border-radius:8px; transition:.12s; }
.rk-inbox-row:hover { background:var(--card2); padding-left:6px; }
.rk-tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 6px; border-radius:6px; flex-shrink:0; margin-top:1px; }
.rk-tag.carrier { background:rgba(14,165,233,.15); color:#0ea5e9; }
.rk-tag.homeowner { background:rgba(34,197,94,.15); color:var(--green); }
.rk-inbox-sub { font-size:12px; font-weight:600; color:var(--text); }
.rk-inbox-snip { font-size:11px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; }
.rk-learn { font-size:12px; color:var(--soft); line-height:1.6; }
.rk-learn b { color:var(--text); font-weight:600; }
.rk-shimmer { height:13px; border-radius:6px; margin:7px 0;
background:linear-gradient(90deg, var(--card2) 25%, var(--border) 50%, var(--card2) 75%);
background-size:800px 100%; animation:rkShimmer 1.3s infinite linear; }
/* ══ RICHARD — morning notification modal ══ */
@keyframes rkModalIn { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.rk-modal-overlay { backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); background:rgba(0,0,0,.5); }
.rk-modal { position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
padding:22px 24px 24px; border-radius:var(--radius-lg);
background:var(--card);
border:1px solid var(--border); box-shadow:var(--shadow-3);
animation:rkModalIn .42s cubic-bezier(.2,.75,.3,1) both; }
.rk-modal::before { display:none; }
.rk-modal-x { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px;
background:var(--card2); border:1px solid var(--border); color:var(--soft); cursor:pointer; font-size:13px; line-height:1; transition:.15s; }
.rk-modal-x:hover { color:var(--text); border-color:var(--accent); }
.rk-modal .rk-narr { font-size:14px; }
/* ─── App CSS relocated from app.html (2026-07-20 de-monolith) ─── */
/* ── THEME VARIABLES ── */
:root {
--bg: #f7f7f9;
--sidebar: #f2f2f5;
--card: #ffffff;
--card2: #f2f2f4;
--border: #e8e8ec;
--text: #1a1a1f;
--soft: #6e6e7a;
--accent: #4661c2;
--accent2: #3a53af;
--accent-tint:#e9edfb;
--accent-ink:#31439a;
--on-accent:#ffffff;
--green: #15803d;
--yellow: #b45309;
--red: #cf3d33;
--orange: #d97708;
--purple: #6e6e7a;
--sb-text: #3f3f4a;
--sb-soft: #7d7d89;
--sb-border: #e4e4e9;
--sb-hover: rgba(26,26,31,.05);
--sb-active: #e9edfb;
/* ── Design tokens (type, shape, elevation) — one source of truth ── */
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
--shadow-1: 0 0 0 1px rgba(26,26,31,.04), 0 1px 2px rgba(26,26,31,.05);
--shadow-2: 0 1px 2px rgba(26,26,31,.05), 0 10px 28px -10px rgba(26,26,31,.14);
--shadow-3: 0 16px 50px -12px rgba(26,26,31,.22);
--ring: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
:root.dark {
/* ── GRAPHITE dark (2026-08-03) — Notion-derived true-neutral charcoal.
The old #0e0e10 canvas sat at L* 4.0 with cards only 3.8 L* above it,
so every panel edge and table rule was invisible and the screen read
as one black field. Graphite lifts the canvas to L* 10.3 (Notion is
8.8) and gives borders a real edge. Depth = surface lift + hairline;
never a shadow first, never a gradient. ── */
--bg: #1c1c1e;
--sidebar: #171719;
--card: #242427;
--card2: #2d2d31;
--border: #38383d;
--border-strong:#4a4a51;
--text: #e8e8ea;
--soft: #a6a6ac;
--accent: #5b8def;
--accent2: #749ef2;
--accent-tint:#1e2942;
--accent-ink:#8fb3f5;
--on-accent:#0b1220;
--green: #4cc38a;
--yellow: #dfae3f;
--red: #ef6b6b;
--orange: #e8944d;
--purple: #a6a6ac;
/* Elevation reads as depth-of-black on a dark canvas */
--shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
--shadow-2: 0 6px 16px rgba(0,0,0,.45), 0 16px 40px -12px rgba(0,0,0,.60);
--shadow-3: 0 24px 60px -12px rgba(0,0,0,.70);
}
/* ══ MONOCHROME OVERRIDES (dark = default) ══════════════════════
Scoped to :root.dark so light mode is untouched. Kills the blue
accents and gives the crisp black/white SaaS look. */
:root.dark body { background:var(--bg); color:var(--text); }
:root.dark .content { background:var(--bg); }
/* Sidebar → pure black, white active state (no blue) */
:root.dark .sidebar { background:var(--sidebar); border-right:1px solid var(--border); }
:root.dark .brand, :root.dark .sidebar-footer { border-color:var(--border); }
:root.dark .brand-icon {
background:var(--accent); color:var(--on-accent); box-shadow:0 2px 10px rgba(0,0,0,.6);
}
:root.dark .brand-name, :root.dark .brand-name span { color:#fafafa; }
:root.dark .nav-btn { color:var(--soft); }
:root.dark .nav-btn:hover { background:rgba(255,255,255,.06); color:#f4f4f5; }
:root.dark .nav-btn.active {
background:rgba(255,255,255,.08); color:#ffffff; font-weight:600;
}
:root.dark .nav-btn.active::before { background:var(--accent); }
:root.dark .nav-section { color:var(--soft); }
:root.dark .user-avatar { background:var(--card2); color:var(--text); }
:root.dark .user-name { color:#f4f4f5; }
:root.dark .nb-blue { background:rgba(255,255,255,.12); color:#f4f4f5; }
/* Primary buttons → white fill, dark ink (Vercel/Linear style) */
:root.dark .btn-primary {
background:var(--accent); color:var(--on-accent); box-shadow:0 1px 3px rgba(0,0,0,.5);
}
:root.dark .btn-primary:hover { background:var(--accent2); box-shadow:0 3px 12px rgba(0,0,0,.6); filter:brightness(1.05); }
:root.dark .btn-primary:active { background:var(--accent2); filter:brightness(.95); }
:root.dark .btn-ghost { background:var(--card); color:var(--text); border:1px solid var(--border); }
:root.dark .btn-ghost:hover { background:var(--card2); border-color:#403a31; color:#fff; }
/* Hero banner → charcoal, not blue */
:root.dark .hero-banner {
background: var(--card2);
border:1px solid var(--border); box-shadow:var(--shadow-2);
}
:root.dark .hero-banner::before { display:none; }
:root.dark .btn-hero { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
:root.dark .btn-hero:hover { background:rgba(255,255,255,.16); }
/* Stat cards → uniform monochrome accents */
:root.dark .stat-card:nth-child(1)::after,
:root.dark .stat-card:nth-child(2)::after,
:root.dark .stat-card:nth-child(3)::after,
:root.dark .stat-card:nth-child(4)::after { background:var(--border); }
:root.dark .stat-card.expanded { border-color:rgba(255,255,255,.25); box-shadow:0 0 0 2px rgba(255,255,255,.06),0 4px 20px rgba(0,0,0,.5); }
/* dark si-* tints inherit from the light rules via tokens */
:root.dark .stat-card.expanded .stat-card-caret { background:rgba(255,255,255,.1); color:var(--accent); }
/* Filters / tabs → accent active */
:root.dark .filter-btn.active { background:rgba(255,255,255,.1); color:#fff; border-color:var(--accent); }
:root.dark .detail-tab.active { color:#fff; border-bottom-color:var(--accent); }
:root.dark .type-chip:has(input:checked) { background:rgba(255,255,255,.1); border-color:var(--accent); color:#fff; }
/* Neutral (blue) tags → gray */
:root.dark .tag-blue { background:rgba(255,255,255,.08); color:#d4d4d8; border:1px solid rgba(255,255,255,.14); }
/* Status tags (green/yellow/red/orange/gray) kept their LIGHT-mode dark ink
(#059669, #d97706, #dc2626…) which is unreadable on a dark card — that's the
"can't see the colors on estimates in dark mode" bug. Re-tint to bright,
accessible variants that still carry their status meaning. */
:root.dark .tag-green { background:rgba(74,222,128,.16); color:#4ade80; border:1px solid rgba(74,222,128,.32); }
:root.dark .tag-yellow { background:rgba(250,204,21,.16); color:#fbbf24; border:1px solid rgba(250,204,21,.32); }
:root.dark .tag-red { background:rgba(248,113,113,.16); color:#fca5a5; border:1px solid rgba(248,113,113,.34); }
:root.dark .tag-orange { background:rgba(251,146,60,.16); color:#fdba74; border:1px solid rgba(251,146,60,.32); }
:root.dark .tag-gray { background:rgba(255,255,255,.08); color:#d4d4d8; border:1px solid rgba(255,255,255,.14); }
/* Elements that fill with the white accent get dark ink instead of white text */
:root.dark .edit-chat-msg.user, :root.dark .edit-chat-send,
:root.dark .baseline-doc-tab.active, :root.dark .chat-send,
:root.dark .quick-fab, :root.dark .team-agent .ta-badge,
:root.dark .ai-subtab-badge { color:var(--on-accent) !important; }
:root.dark .quick-fab { box-shadow:0 6px 20px rgba(0,0,0,.6); }
/* Progress + misc bars → white on dark */
:root.dark .progress-bar { background:var(--accent); box-shadow:none; }
/* Richard partner card → accent stripe */
:root.dark .rk-card::before { display:none; }
:root.dark .rk-avatar { background:var(--accent); color:var(--on-accent); }
:root.dark .rk-narr .rk-arrow { color:var(--accent); }
:root.dark .rk-tag.carrier { background:rgba(255,255,255,.1); color:#e4e4e7; }
:root.dark .search-box:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
/* Appearance controls (work in both modes) */
.appearance-mode-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--soft); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.appearance-mode-btn:hover { color:var(--text); border-color:var(--soft); }
.appearance-mode-btn.selected { background:var(--accent); color:var(--on-accent,#fff); border-color:var(--accent); }
.accent-swatch { width:30px; height:30px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0; transition:transform .12s, box-shadow .12s; position:relative; }
.accent-swatch:hover { transform:scale(1.12); }
.accent-swatch.selected { box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent); border-color:var(--card); }
.accent-swatch.selected::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.email-design-opt { display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border:1px solid var(--border); border-radius:11px; cursor:pointer; background:var(--card); transition:border-color .15s, background .15s; }
.email-design-opt:hover { border-color:var(--soft); }
.email-design-opt:has(input:checked) { border-color:var(--accent); background:var(--card2); }
.email-design-opt input { accent-color:var(--accent); flex-shrink:0; }
* { font-family: var(--font-sans); }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body { display:flex; height:100vh; overflow:hidden; letter-spacing:-.005em; }
/* ── Premium polish: text selection + refined thin scrollbars ── */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--soft) 42%, transparent); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--soft) 68%, transparent); }
* { scrollbar-width:thin; scrollbar-color: color-mix(in srgb, var(--soft) 42%, transparent) transparent; }
/* ═══════════ APPLE-GRADE DESIGN LAYER — motion · materials · depth · type ═══════════
Centralized so the whole app inherits the craft, not just the dashboard. */
:root{
--ease-out: cubic-bezier(.16,1,.3,1); /* smooth deceleration */
--ease-spring: cubic-bezier(.34,1.4,.5,1); /* gentle settle */
--dur-1:.12s; --dur-2:.24s; --dur-3:.42s;
--hair: rgba(15,23,41,.08); /* hairline separators */
--font-display: 'Geist', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
:root.dark{ --hair: rgba(255,255,255,.08); }
/* Display type for headlines + financial-grade tabular numerals (reads as "wealth") */
.hero-greeting, .page-title, .section-title, .stat-value, .hero-stat-val,
#rs-recovered, #rs-inplay, #rs-opp { font-family:var(--font-display); font-optical-sizing:auto; }
.stat-value, .hero-stat-val, #rs-recovered, #rs-inplay, #rs-opp, .clock,
.claim-tile-amount { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv01" 1; }
/* Tactile interaction — press in, spring back */
.btn, .btn-hero, .filter-btn, .nav-btn, .ai-subtab, .stat-card, .claim-tile {
transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.btn:active, .btn-hero:active, .filter-btn:active { transform: translateY(0) scale(.972); }
/* Frosted-glass chrome — Apple vibrancy on the top bar */
.topbar{
background: color-mix(in srgb, var(--card) 82%, transparent);
backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom:1px solid var(--hair);
box-shadow: 0 1px 0 var(--hair);
}
/* Hairline card edges + keyboard focus ring */
.section-card{ border-color:var(--hair); }
:focus-visible{ outline:none; box-shadow: var(--ring); }
/* Content settles in when a view opens */
.view.active{ animation: viewIn var(--dur-3) var(--ease-out); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* ── SIDEBAR (always dark) ── */
.sidebar {
width:232px;
background:var(--sidebar);
border-right:1px solid var(--sb-border);
display:flex;
flex-direction:column;
flex-shrink:0;
}
.brand {
padding:20px 18px 16px;
border-bottom:1px solid var(--sb-border);
}
.brand-mark {
display:flex;
align-items:center;
gap:9px;
margin-bottom:4px;
}
.brand-icon {
width:28px;
height:28px;
background:var(--card);
border:1.5px solid var(--accent);
border-radius:7px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
color:var(--accent);
}
.brand-icon svg { width:15px; height:15px; }
.brand-name { font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.2px; }
.brand-name span { color:var(--accent); }
.brand-sub { font-size:11px; font-weight:600; color:var(--text); margin-top:3px; letter-spacing:.4px; text-transform:uppercase; padding-left:37px; }
.brand-name { opacity:.55; }
.nav { flex:1; padding:10px 10px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.nav-section { font-family:var(--font-mono); font-size:9.5px; font-weight:500; color:var(--sb-soft); letter-spacing:1.2px; text-transform:uppercase; padding:14px 8px 5px; }
.nav-btn {
display:flex; align-items:center; gap:9px;
padding:8px 10px; border-radius:8px;
cursor:pointer; color:var(--sb-text);
font-size:12.5px; font-weight:500;
transition:all .15s ease; border:none; background:none; width:100%; text-align:left;
font-family:var(--font-sans);
position:relative;
}
.nav-btn:hover { background:var(--sb-hover); color:var(--text); }
.nav-btn.active {
background: var(--sb-active);
color:var(--accent-ink);
font-weight:560;
}
.nav-btn.active::before {
content:''; position:absolute; left:-10px; top:22%; bottom:22%;
width:3px; border-radius:0 2px 2px 0; background:var(--accent);
}
.nav-icon { width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.85; }
.nav-icon svg { width:15px; height:15px; }
.nav-badge { margin-left:auto; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:20px; line-height:1.7; }
.nb-blue { background:var(--accent-tint); color:var(--accent-ink); }
.nb-yellow { background:rgba(217,119,6,.3); color:#fcd34d; }
.nb-green { background:rgba(5,150,105,.3); color:#6ee7b7; }
.sidebar-footer {
padding:12px 14px;
border-top:1px solid var(--sb-border);
}
.user-row { display:flex; align-items:center; gap:10px; }
.user-avatar {
width:32px; height:32px; border-radius:8px;
background:var(--accent);
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:600; color:var(--on-accent); flex-shrink:0;
}
.user-info { flex:1; min-width:0; }
.user-name { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-company { font-size:10px; color:var(--sb-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.signout-btn { background:none; border:none; color:var(--sb-soft); cursor:pointer; font-size:14px; padding:3px; transition:color .15s; }
.signout-btn:hover { color:#ef4444; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#10b981; animation:livepulse 2s infinite; flex-shrink:0; }
@keyframes livepulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.4)} 50%{opacity:.7;box-shadow:0 0 0 5px rgba(16,185,129,0)} }
/* ── MAIN ── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; background:var(--bg); }
.topbar {
display:flex; align-items:center; justify-content:space-between;
padding:0 28px; height:60px;
background:var(--card);
border-bottom:1px solid var(--border);
flex-shrink:0; gap:12px;
box-shadow:0 1px 12px rgba(0,0,0,.06);
}
.page-title { font-size:15px; font-weight:700; flex-shrink:0; color:var(--text); letter-spacing:-.2px; }
.topbar-center { flex:1; max-width:360px; }
.search-box {
width:100%; background:var(--card2);
border:1px solid var(--border); border-radius:9px;
padding:7px 14px; color:var(--text); font-size:13px;
font-family:var(--font-sans); outline:none; transition:border-color .15s;
}
.search-box:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.search-box::placeholder { color:var(--soft); }
.clock { font-size:12px; color:var(--soft); font-variant-numeric:tabular-nums; font-weight:500; }
/* ── NOTIFICATION BELL ── */
.notif-wrapper { position:relative; }
.notif-bell { position:relative; display:flex; align-items:center; justify-content:center; padding:6px; cursor:pointer; background:none; border:1px solid var(--border); border-radius:8px; color:var(--soft); transition:all .15s; }
.notif-bell:hover { color:var(--text); background:var(--card2); }
.notif-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:99px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; pointer-events:none; }
.notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:380px; max-height:480px; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.18); z-index:999; display:none; }
.notif-panel.open { display:block; }
.notif-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.notif-header h3 { font-size:14px; font-weight:700; margin:0; color:var(--text); }
.notif-header .mark-read { font-size:11px; color:var(--accent); cursor:pointer; background:none; border:none; font-weight:600; }
.notif-item { padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.notif-item:hover { background:var(--card2); }
.notif-item.unread { background:rgba(37,99,235,.04); border-left:3px solid var(--accent); }
.notif-item:last-child { border-bottom:none; }
.notif-item .notif-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.notif-item .notif-type.rebuttal { color:#ef4444; }
.notif-item .notif-type.logged { color:var(--accent); }
.notif-item .notif-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.notif-item .notif-detail { font-size:12px; color:var(--soft); line-height:1.4; }
.notif-item .notif-time { font-size:10px; color:var(--soft); margin-top:6px; }
.notif-empty { padding:32px 16px; text-align:center; color:var(--soft); font-size:13px; }
.content { flex:1; overflow-y:auto; padding:24px 28px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
/* .view / .view.active consolidated below */
/* ── HERO BANNER ── */
.hero-banner {
background: var(--card2);
border-radius:var(--radius-lg); padding:26px 30px; margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between;
position:relative; overflow:hidden;
box-shadow: var(--shadow-1);
border:1px solid #2a2723;
}
.hero-banner::before { display:none; }
.hero-banner::after {
content:'';
position:absolute; top:-40px; right:-40px;
width:220px; height:220px;
border-radius:50%;
background: rgba(255,255,255,.04);
pointer-events:none;
}
.hero-content { position:relative; z-index:1; }
.hero-greeting { font-size:30px; font-weight:640; color:#fff; margin-bottom:6px; letter-spacing:-.9px; }
.hero-sub { font-size:13.5px; color:rgba(255,255,255,.62); font-weight:400; letter-spacing:0; font-family:var(--font-mono); font-size:12px; }
.hero-stats { display:flex; gap:24px; margin-top:14px; }
.hero-stat { text-align:center; }
.hero-stat-val { font-size:18px; font-weight:700; color:#fff; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.hero-stat-lbl { font-size:10px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.6px; margin-top:1px; }
.btn-hero {
background:rgba(255,255,255,.12); color:#fff;
border:1px solid rgba(255,255,255,.22); padding:11px 22px;
border-radius:12px; font-size:13px; font-weight:600;
cursor:pointer; transition:all .18s ease;
font-family:inherit; flex-shrink:0;
position:relative; z-index:1; letter-spacing:-.1px;
backdrop-filter:blur(10px); box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.btn-hero:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
/* ── STATS ── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; align-items:start; }
.stat-card {
background:var(--card); border:1px solid var(--border);
border-radius:16px; padding:22px 22px;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
position:relative; overflow:hidden;
}
.stat-card::after {
content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
border-radius:0 0 14px 14px; opacity:0; transition:opacity .22s ease;
}
.stat-card:nth-child(1)::after,
.stat-card:nth-child(2)::after,
.stat-card:nth-child(3)::after,
.stat-card:nth-child(4)::after { background:var(--accent); }
.stat-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.16); transform:translateY(-2px); border-color:var(--border); }
.stat-card:hover::after { opacity:1; }
.stat-card.expanded { border-color:rgba(59,130,246,.35); box-shadow:0 0 0 3px rgba(59,130,246,.08), 0 4px 20px rgba(0,0,0,.08); transform:none; }
.stat-card.expanded::after { opacity:1; }
.stat-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.stat-icon {
width:40px; height:40px; border-radius:11px;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-icon svg { width:20px; height:20px; }
.si-blue { background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--accent); }
.si-green { background:color-mix(in srgb, var(--green) 11%, transparent); color:var(--green); }
.si-purple { background:color-mix(in srgb, var(--accent) 7%, transparent); color:var(--accent-ink); }
.si-orange { background:color-mix(in srgb, var(--yellow) 11%, transparent); color:var(--yellow); }
.stat-label { font-size:12px; font-weight:600; color:var(--soft); letter-spacing:-.01em; }
.stat-value { font-size:36px; font-weight:700; line-height:1; margin-bottom:10px; letter-spacing:-1.6px; color:var(--text); font-variant-numeric:tabular-nums; }
.stat-note { font-size:12px; color:var(--soft); font-weight:500; }
.stat-note.up { color:var(--green); }
.stat-note.warn { color:var(--yellow); }
.stat-spark { margin:8px 0 6px; height:28px; display:flex; align-items:flex-end; }
.stat-spark svg { display:block; overflow:visible; }
.stat-context { font-size:11px; color:var(--soft); margin-top:3px; font-weight:500; }
.stat-context.up { color:#059669; }
.stat-context.down { color:#dc2626; }
/* ── STAT CARD EXPAND ── */
.stat-card { cursor:pointer; }
.stat-card-caret {
display:flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:5px;
color:var(--soft); transition:transform .22s ease, background .15s;
margin-left:auto; flex-shrink:0;
}
.stat-card-caret svg { width:13px; height:13px; }
.stat-card.expanded .stat-card-caret { transform:rotate(180deg); background:rgba(59,130,246,.1); color:var(--accent); }
.stat-expand-panel {
max-height:0; overflow:hidden;
transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
opacity:0;
}
.stat-card.expanded .stat-expand-panel {
max-height:500px;
opacity:1;
}
.stat-expand-divider { height:1px; background:var(--border); margin:14px 0 12px; }
.stat-expand-title { font-size:10px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
/* Stage distribution bars */
.stage-dist-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; cursor:pointer; padding:3px 0; border-radius:5px; }
.stage-dist-row:hover .stage-dist-label { color:var(--text); }
.stage-dist-label { font-size:11.5px; font-weight:500; color:var(--soft); width:82px; flex-shrink:0; white-space:nowrap; text-transform:capitalize; transition:color .12s; }
.stage-dist-bar-wrap { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.stage-dist-bar { height:100%; border-radius:3px; transition:width .4s ease; }
.stage-dist-count { font-size:11.5px; font-weight:700; color:var(--text); width:20px; text-align:right; flex-shrink:0; }
/* Expand row items (claims list, supp list, etc.) */
.expand-row-item {
display:flex; align-items:center; gap:10px;
padding:8px 0; border-bottom:1px solid var(--border);
cursor:pointer; transition:background .1s;
}
.expand-row-item:last-child { border-bottom:none; }
.expand-row-item:hover { opacity:.8; }
.expand-row-name { font-size:12.5px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.expand-row-sub { font-size:11px; color:var(--soft); }
.expand-row-val { font-size:12.5px; font-weight:700; flex-shrink:0; }
/* Supp breakdown pills */
.supp-breakdown-row { display:flex; gap:8px; margin-bottom:12px; }
.supp-pill { flex:1; text-align:center; padding:10px 8px; border-radius:10px; border:1px solid var(--border); }
.supp-pill-val { font-size:22px; font-weight:800; letter-spacing:-1px; }
.supp-pill-lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; color:var(--soft); }
.supp-pill.approved { background:rgba(16,185,129,.07); border-color:rgba(16,185,129,.2); }
.supp-pill.approved .supp-pill-val { color:#059669; }
.supp-pill.denied { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.2); }
.supp-pill.denied .supp-pill-val { color:#dc2626; }
.supp-pill.pending { background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.2); }
.supp-pill.pending .supp-pill-val { color:var(--accent); }
/* Carrier perf table */
.carrier-perf-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.carrier-perf-row:last-child { border-bottom:none; }
.carrier-perf-name { flex:1; font-weight:500; }
.carrier-perf-rate { font-size:12px; font-weight:700; width:42px; text-align:right; flex-shrink:0; }
.carrier-perf-rate.hi { color:#059669; }
.carrier-perf-rate.lo { color:#dc2626; }
.stat-expand-footer { text-align:center; margin-top:10px; }
.stat-expand-footer button { font-size:11.5px; color:var(--accent); background:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; padding:2px 0; }
.stat-expand-footer button:hover { text-decoration:underline; }
/* ── SECTION CARD ── */
.section-card {
background:var(--card); border:1px solid var(--border);
border-radius:16px; padding:22px; margin-bottom:14px;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
transition:box-shadow .22s ease, border-color .22s ease;
}
.section-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.05), 0 12px 30px -16px rgba(0,0,0,.12); }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-title { font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:-.2px; }
.section-link { font-size:12px; color:var(--accent); cursor:pointer; background:none; border:none; font-family:inherit; font-weight:500; }
.section-link:hover { text-decoration:underline; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* ── TABLE ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
text-align:left; font-size:10px; font-weight:700;
color:var(--soft); text-transform:uppercase; letter-spacing:.9px;
padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
background:var(--card2);
}
.data-table th:first-child { border-radius:0; }
.data-table td { padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr.clickable { cursor:pointer; transition:background .1s; }
.data-table tr.clickable:hover td { background:rgba(59,130,246,.04); }
/* ── PIPELINE ── */
.pipeline-wrap { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.stage-col { display:flex; flex-direction:column; gap:8px; }
.stage-head { text-align:center; font-size:10px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.7px; padding-bottom:10px; border-bottom:2px solid var(--border); }
.stage-head.s1 { border-color:var(--soft); }
.stage-head.s2 { border-color:var(--accent); }
.stage-head.s3 { border-color:var(--yellow); }
.stage-head.s4 { border-color:var(--orange); }
.stage-head.s5 { border-color:var(--green); }
.claim-tile {
background:var(--card); border:1px solid var(--border);
border-radius:10px; padding:12px 14px; cursor:pointer;
transition:all .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.claim-tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.claim-tile-name { font-weight:700; font-size:12.5px; margin-bottom:3px; letter-spacing:-.1px; }
.claim-tile-carrier { font-size:10.5px; color:var(--soft); margin-bottom:6px; }
.claim-tile-amount { font-size:12px; font-weight:700; color:var(--green); }
/* ── FILTER BAR ── */
.filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
/* ── MOBILE CARD ROWS (hidden on desktop, shown on mobile) ── */
.mob-card-row { display:none; }
.desk-only { display:block; }
/* desk-only is applied to | / | in data tables; block would collapse the row into a
vertical stack on desktop, so keep table cells rendering as cells (mobile @media hides them). */
.data-table td.desk-only, .data-table th.desk-only { display:table-cell; }
.filter-btn {
padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
border:1px solid var(--border); background:var(--card); color:var(--soft);
cursor:pointer; font-family:var(--font-sans); transition:all .15s;
}
.filter-btn:hover { background:var(--card2); color:var(--text); border-color:rgba(59,130,246,.3); }
.filter-btn.active { background:var(--accent-tint); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
/* ── ROW ── */
.row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.row:last-child { border-bottom:none; }
.row-main { flex:1; min-width:0; }
.row-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-sub { font-size:11px; color:var(--soft); margin-top:2px; }
.row-value { font-size:13px; font-weight:600; flex-shrink:0; }
/* ── DETAIL PANEL ── */
.detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:none; }
.detail-overlay.open { display:block; }
/* detail-panel styles consolidated below in PREMIUM DETAIL PANEL section */
.detail-header { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; flex-shrink:0; }
.detail-header-info { flex:1; min-width:0; }
.detail-name { font-size:17px; font-weight:700; margin-bottom:4px; }
.detail-sub { font-size:12px; color:var(--soft); }
.detail-tabs { display:flex; border-bottom:1px solid var(--border); padding:0 20px; flex-shrink:0; }
.detail-tab { padding:10px 13px; font-size:13px; font-weight:500; color:var(--soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
.detail-tab:hover { color:var(--text); }
.detail-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.detail-body { flex:1; overflow-y:auto; padding:20px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.detail-tc { display:none; }
.detail-tc.active { display:block; }
/* ── AI TOOLS ── */
.ai-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px; }
.ai-card-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ai-card-icon { font-size:20px; }
.ai-card-name { font-size:14px; font-weight:600; }
.ai-card-desc { font-size:12px; color:var(--soft); line-height:1.5; margin-bottom:12px; }
.ai-intake { border-top:1px solid var(--border); padding-top:14px; }
.ai-intake label { font-size:11px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:5px; }
.ai-result { background:var(--card2); border:1px solid var(--border); border-radius:7px; padding:12px; font-size:12px; line-height:1.65; color:var(--text); margin-top:12px; max-height:280px; overflow-y:auto; white-space:pre-wrap; display:none; outline:none; cursor:text; }
.ai-result.show { display:block; }
.ai-generating { display:none; flex-direction:column; gap:3px; margin-top:10px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; }
.ai-generating.show { display:flex; }
.ai-step-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); padding:2px 0; }
.ai-step-icon { font-size:10px; width:14px; text-align:center; flex-shrink:0; }
.ai-result-actions { margin-top:8px; display:none; gap:8px; flex-wrap:wrap; }
.ai-result-actions.show { display:flex; }
.ai-feedback-row { display:none; flex-direction:column; gap:6px; margin-top:8px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; border-left:3px solid var(--accent); }
.ai-feedback-row.show { display:flex; }
.ai-feedback-label { font-size:11px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.5px; }
/* Edit chat panel */
.edit-chat-panel { display:none; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:var(--card); overflow:hidden; }
.edit-chat-panel.show { display:block; }
.edit-chat-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--card2); cursor:pointer; }
.edit-chat-header:hover { background:var(--bg); }
.edit-chat-messages { max-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px; transition:max-height .3s ease; }
.edit-chat-panel.open .edit-chat-messages { max-height:200px; overflow-y:auto; padding:10px 14px; }
.edit-chat-input-row { display:none; gap:8px; padding:10px 14px; border-top:1px solid var(--border); }
.edit-chat-panel.open .edit-chat-input-row { display:flex; }
.edit-chat-panel.open .edit-chat-header { border-bottom:1px solid var(--border); }
.edit-chat-msg { font-size:12px; line-height:1.5; padding:8px 12px; border-radius:8px; max-width:85%; }
.edit-chat-msg.user { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.edit-chat-msg.ai { background:var(--card2); color:var(--text); align-self:flex-start; border-bottom-left-radius:3px; border:1px solid var(--border); }
.edit-chat-msg.learning { background:rgba(45,122,79,.1); border:1px solid rgba(45,122,79,.3); color:var(--text); align-self:center; font-size:11px; font-style:italic; }
.edit-chat-input { flex:1; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:12px; font-family:inherit; resize:none; min-height:36px; max-height:80px; }
.edit-chat-input:focus { outline:none; border-color:var(--accent); }
.edit-chat-send { padding:8px 16px; border-radius:8px; background:var(--accent); color:#fff; border:none; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.edit-chat-send:hover { opacity:.9; }
.edit-chat-send:disabled { opacity:.5; cursor:not-allowed; }
.type-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.type-chip { display:flex; align-items:center; padding:5px 11px; border:1px solid var(--border); border-radius:20px; font-size:12px; cursor:pointer; user-select:none; transition:all .15s; color:var(--text); }
.type-chip input[type=checkbox] { display:none; }
.type-chip:has(input:checked) { background:rgba(91,142,240,.15); border-color:var(--accent); color:var(--accent); font-weight:600; }
/* ── SETTINGS ── */
.settings-section { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:22px; margin-bottom:16px; }
.settings-section-title { font-size:13px; font-weight:600; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
/* ── Apple-style subscription card ── */
.sub-card { border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--card); }
.sub-card-hero { padding:34px 28px 30px; text-align:center; background:var(--card2); }
.sub-badge { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1.2px; color:#0071e3; background:rgba(0,113,227,.1); padding:4px 11px; border-radius:999px; margin-bottom:14px; }
.sub-plan-name { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.sub-price { display:flex; align-items:baseline; justify-content:center; gap:4px; margin-bottom:12px; }
.sub-price-amt { font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.sub-price-per { font-size:15px; color:var(--soft); font-weight:500; }
.sub-status-line { font-size:13px; color:var(--soft); margin-bottom:20px; min-height:18px; }
.sub-action .btn { border-radius:999px; padding:11px 30px; font-size:14px; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.sub-features { padding:22px 28px; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
.sub-feat { font-size:13px; display:flex; align-items:center; gap:9px; color:var(--text); }
.sub-check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(0,113,227,.12); color:#0071e3; font-size:11px; font-weight:700; flex-shrink:0; }
.sub-fineprint { padding:0 28px 22px; text-align:center; font-size:11.5px; color:var(--soft); }
@media(max-width:520px){ .sub-features{ grid-template-columns:1fr; } .sub-price-amt{ font-size:40px; } }
/* ── KB COLLAPSIBLE CARDS (big, simple, tap-to-open) ── */
.kb-card { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.kb-card > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; user-select:none; }
.kb-card > summary::-webkit-details-marker { display:none; }
.kb-card > summary:hover { background:var(--card2); }
.kb-card-ico { width:42px; height:42px; border-radius:11px; background:rgba(13,148,136,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#0d9488; }
.kb-card-ico i { width:22px; height:22px; }
.kb-card-txt { flex:1; min-width:0; }
.kb-card-title { font-size:15px; font-weight:700; }
.kb-card-sub { font-size:12px; color:var(--soft); margin-top:2px; }
.kb-card-chev { flex-shrink:0; color:var(--soft); transition:transform .2s; }
.kb-card[open] > summary .kb-card-chev { transform:rotate(180deg); }
.kb-card[open] > summary { border-bottom:1px solid var(--border); }
.kb-card-body { padding:18px 20px 20px; }
/* ── TEAM / AGENTS ── */
.team-list { display:flex; flex-direction:column; gap:10px; }
.team-member-row { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card2); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .15s; }
.team-member-row:hover { border-color:var(--accent); }
.team-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.team-member-info { flex:1; }
.team-member-name { font-size:13px; font-weight:600; }
.team-member-meta { font-size:11px; color:var(--soft); margin-top:2px; }
.team-role-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.team-role-owner { background:rgba(91,142,240,.15); color:#5b8ef0; }
.team-role-agent { background:rgba(45,122,79,.15); color:#2d7a4f; }
/* Baseline modal */
.baseline-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.baseline-overlay.open { display:flex; }
.baseline-modal { background:var(--bg); border:1px solid var(--border); border-radius:14px; width:100%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.baseline-modal-header { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.baseline-modal-body { flex:1; overflow-y:auto; padding:20px; }
.baseline-doc-tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.baseline-doc-tab { padding:6px 14px; font-size:12px; font-weight:500; border-radius:20px; border:1px solid var(--border); background:var(--card2); color:var(--soft); cursor:pointer; transition:all .15s; }
.baseline-doc-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.baseline-textarea { width:100%; min-height:280px; background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:12px; color:var(--text); font-size:12px; font-family:inherit; line-height:1.6; resize:vertical; box-sizing:border-box; }
.baseline-textarea:focus { outline:none; border-color:var(--accent); }
.baseline-hint { font-size:11px; color:var(--soft); margin-bottom:10px; line-height:1.5; }
/* ── CONNECTORS ── */
.connector-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.connector-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:all .2s ease; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.connector-card:hover { border-color:rgba(59,130,246,.35); box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-1px); }
.connector-card.connected { border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.03); }
.connector-top { display:flex; align-items:center; gap:10px; }
.connector-icon { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.connector-name { font-size:13px; font-weight:600; }
.connector-desc { font-size:11px; color:var(--soft); line-height:1.4; }
.connector-badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; display:inline-block; }
.badge-connected { background:#d1fae5; color:#065f46; }
.badge-soon { background:var(--card2); color:var(--soft); border:1px solid var(--border); }
.connector-btn { font-size:11px; padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--card); cursor:pointer; color:var(--text); font-weight:500; transition:all .15s; width:100%; }
.connector-btn:hover { border-color:var(--accent); color:var(--accent); }
.connector-btn.btn-disconnect { border-color:#dc2626; color:#dc2626; }
.connector-btn.btn-disconnect:hover { background:#fef2f2; }
.connector-btn:disabled { opacity:.45; cursor:not-allowed; }
.logo-upload-area { display:flex; align-items:center; gap:20px; }
.logo-preview { width:80px; height:80px; border-radius:12px; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; overflow:hidden; }
.logo-preview img { width:100%; height:100%; object-fit:contain; }
.logo-upload-info { flex:1; }
.logo-upload-info p { font-size:12px; color:var(--soft); line-height:1.6; margin-bottom:10px; }
.fld-label { display:block; font-size:11px; font-weight:600; color:var(--soft); margin-bottom:5px; }
/* ── AGENTS ── */
.agents-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.agent-card {
background:var(--card); border:1px solid var(--border);
border-radius:14px; padding:0;
overflow:hidden;
transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
display:flex; flex-direction:column;
}
.agent-card:hover {
box-shadow:0 8px 32px rgba(0,0,0,.1);
transform:translateY(-2px);
border-color:rgba(59,130,246,.25);
}
.agent-card.running { border-color:rgba(59,130,246,.35); }
/* colored gradient header strip */
.agent-header {
padding:18px 18px 14px;
position:relative; overflow:hidden;
}
.agent-header::before {
content:''; position:absolute; inset:0;
opacity:.06;
background: currentColor;
}
.agent-header-blue, .agent-header-green, .agent-header-purple, .agent-header-orange,
.agent-header-teal, .agent-header-indigo, .agent-header-rose, .agent-header-amber
{ background:var(--card2); border-bottom:1px solid var(--border); }
.agent-icon-wrap {
width:42px; height:42px; border-radius:12px;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
margin-bottom:12px;
}
.agent-icon-wrap svg { width:22px; height:22px; }
.aico-blue, .aico-indigo { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.aico-green, .aico-teal { background:color-mix(in srgb, var(--green) 12%, transparent); color:var(--green); }
.aico-orange, .aico-amber { background:color-mix(in srgb, var(--yellow) 12%, transparent); color:var(--yellow); }
.aico-purple, .aico-rose { background:color-mix(in srgb, var(--accent) 7%, transparent); color:var(--accent-ink); }
.agent-top { display:flex; align-items:flex-start; justify-content:space-between; }
.agent-name { font-size:14px; font-weight:700; letter-spacing:-.1px; }
.agent-type { font-size:11px; color:var(--soft); margin-top:2px; font-weight:500; }
.agent-body { padding:14px 18px 18px; flex:1; display:flex; flex-direction:column; }
.agent-desc { font-size:12.5px; color:var(--soft); line-height:1.6; margin-bottom:14px; flex:1; }
.progress-label { font-size:10px; color:var(--soft); display:flex; justify-content:space-between; margin-top:6px; }
/* ── ACTIVITY ── */
.activity-row { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); align-items:flex-start; transition:background .12s; border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px; }
.activity-row:last-child { border-bottom:none; }
.activity-row:hover { background:rgba(59,130,246,.03); }
.act-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.act-icon.g { color:var(--green); }
.act-icon.b { color:var(--accent); }
.act-icon.r { color:var(--red); }
.act-icon.y { color:var(--yellow); }
.act-icon.p { color:var(--soft); }
.act-icon.g,.act-icon.b,.act-icon.r,.act-icon.y,.act-icon.p { background:color-mix(in srgb, currentColor 10%, transparent); }
.act-body { flex:1; }
.act-title { font-size:13px; font-weight:500; line-height:1.4; margin-bottom:2px; }
.act-meta { font-size:11px; color:var(--soft); }
/* ── LOADING ── */
.loading-screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; z-index:9999;
background: var(--bg); }
.loading-screen::after { content:''; width:120px; height:3px; border-radius:2px; margin-top:6px;
background:linear-gradient(90deg, var(--border) 30%, var(--accent) 50%, var(--border) 70%); background-size:220% 100%;
animation: csLoad 1.1s linear infinite; }
@keyframes csLoad { from { background-position:120% 0; } to { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce){ .loading-screen::after { animation:none; background:var(--accent); } }
/* ── SETUP WIZARD ── */
.wizard-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:500; display:none; align-items:center; justify-content:center; }
.wizard-overlay.open { display:flex; }
.wizard-box { background:var(--sidebar); border:1px solid var(--border); border-radius:16px; width:560px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.wizard-header { padding:24px 28px 0; flex-shrink:0; }
.wizard-logo { font-size:15px; font-weight:700; margin-bottom:16px; }
.wizard-logo span { color:var(--accent); }
.wizard-steps { display:flex; gap:4px; margin-bottom:20px; }
.wizard-step-dot { height:3px; border-radius:2px; flex:1; background:var(--border); transition:background .2s; }
.wizard-step-dot.done { background:var(--accent); }
.wizard-step-dot.active { background:var(--accent); opacity:.5; }
.wizard-body { flex:1; overflow-y:auto; padding:0 28px 24px; }
.wizard-title { font-size:20px; font-weight:700; margin-bottom:6px; }
.wizard-sub { font-size:13px; color:var(--soft); margin-bottom:24px; line-height:1.5; }
.wizard-footer { padding:16px 28px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.wizard-skip { font-size:12px; color:var(--soft); background:none; border:none; cursor:pointer; }
.wizard-skip:hover { color:var(--text); }
.wizard-fetch-row { display:flex; gap:8px; }
.wizard-fetch-row input { flex:1; }
.wizard-preview { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-top:16px; display:none; }
.wizard-preview.show { display:block; }
.wizard-preview-logo { width:60px; height:60px; border-radius:8px; object-fit:contain; background:var(--card2); border:1px solid var(--border); margin-bottom:12px; }
.wizard-found { font-size:11px; font-weight:600; color:var(--green); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.wizard-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.role-card { border:2px solid var(--border); border-radius:10px; padding:14px; cursor:pointer; transition:all .15s; }
.role-card:hover { border-color:var(--accent); }
.role-card.selected { border-color:var(--accent); background:rgba(91,142,240,.08); }
.role-card-title { font-size:13px; font-weight:600; margin-bottom:3px; }
.role-card-desc { font-size:11px; color:var(--soft); }
.pricing-table { width:100%; border-collapse:collapse; margin-top:8px; }
.pricing-table th { font-size:10px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.5px; padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); }
.pricing-table td { padding:6px 8px; border-bottom:1px solid rgba(44,47,58,.4); }
.pricing-table td:first-child { font-size:12px; }
.pricing-table td:nth-child(2) { font-size:11px; color:var(--soft); }
.pricing-table input[type=number] { width:90px; background:var(--card2); border:1px solid var(--border); border-radius:5px; padding:4px 8px; color:var(--text); font-size:12px; font-family:inherit; }
.pricing-table input[type=number]:focus { outline:none; border-color:var(--accent); }
.li-input { background:var(--card2); border:1px solid var(--border); border-radius:5px; padding:4px 8px; color:var(--text); font-size:12px; font-family:inherit; width:100%; box-sizing:border-box; }
.li-input:focus { outline:none; border-color:var(--accent); }
.li-select { background:var(--card2); border:1px solid var(--border); border-radius:5px; padding:4px 6px; color:var(--text); font-size:12px; font-family:inherit; width:100%; cursor:pointer; }
.li-select:focus { outline:none; border-color:var(--accent); }
.wizard-fetching { display:none; align-items:center; gap:8px; font-size:12px; color:var(--accent); margin-top:10px; }
.wizard-fetching.show { display:flex; }
.loading-logo { font-size:20px; font-weight:800; color:#111827; letter-spacing:-.3px; }
.loading-logo span { color:var(--accent); }
.loading-sub { font-size:13px; color:var(--soft); }
/* ── AI CHAT ── */
.chat-wrap { display:flex; flex-direction:column; height:calc(100vh - 54px); max-width:780px; margin:0 auto; }
.chat-header { padding:16px 0 12px; border-bottom:1px solid var(--border); margin-bottom:0; flex-shrink:0; }
.chat-header-title { font-size:16px; font-weight:700; margin-bottom:3px; }
.chat-header-sub { font-size:12px; color:var(--soft); }
.chat-messages { flex:1; overflow-y:auto; padding:20px 0; display:flex; flex-direction:column; gap:16px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.chat-msg { display:flex; gap:10px; align-items:flex-start; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-avatar { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.chat-avatar.ai { background:rgba(91,142,240,.15); }
.chat-avatar.usr { background:rgba(62,207,142,.15); }
.chat-bubble { max-width:78%; padding:12px 15px; border-radius:12px; font-size:13px; line-height:1.65; white-space:pre-wrap; }
.chat-bubble.ai { background:var(--card); border:1px solid var(--border); border-top-left-radius:3px; }
.chat-bubble.usr { background:rgba(91,142,240,.15); border:1px solid rgba(91,142,240,.25); border-top-right-radius:3px; color:var(--text); }
.chat-typing { display:flex; align-items:center; gap:4px; padding:12px 15px; background:var(--card); border:1px solid var(--border); border-radius:12px; border-top-left-radius:3px; width:fit-content; }
.chat-dot { width:7px; height:7px; border-radius:50%; background:var(--soft); animation:dotbounce 1.2s infinite; }
.chat-dot:nth-child(2) { animation-delay:.2s; }
.chat-dot:nth-child(3) { animation-delay:.4s; }
@keyframes dotbounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-row { padding:14px 0 0; border-top:1px solid var(--border); flex-shrink:0; display:flex; gap:10px; align-items:flex-end; }
.chat-input { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:13px; font-family:inherit; outline:none; resize:none; min-height:44px; max-height:140px; line-height:1.5; transition:border-color .15s; }
.chat-input:focus { border-color:var(--accent); }
.chat-input::placeholder { color:var(--soft); }
.chat-send { width:40px; height:40px; border-radius:9px; background:var(--accent); border:none; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; }
.chat-send:hover { opacity:.85; }
.chat-send:disabled { opacity:.4; cursor:not-allowed; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chat-chip { padding:7px 13px; background:var(--card); border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--soft); cursor:pointer; transition:all .15s; white-space:nowrap; }
.chat-chip:hover { border-color:var(--accent); color:var(--accent); }
/* ── FINANCIALS ── */
.fin-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:4px 0; }
.fin-row.total { font-weight:700; font-size:13px; border-top:1px solid var(--border); padding-top:8px; margin-top:4px; }
.fin-row.positive { color:#2d7a4f; }
.fin-row.negative { color:#e06b6b; }
.fin-label { color:var(--soft); }
.fin-value { font-weight:600; font-variant-numeric:tabular-nums; }
/* ── FIELD FORMS ── */
.ff-list { display:flex; flex-direction:column; gap:10px; }
.ff-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:border-color .15s; }
.ff-card:hover { border-color:var(--accent); }
.ff-icon { width:38px; height:38px; border-radius:9px; background:rgba(91,142,240,.12); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ff-info { flex:1; min-width:0; }
.ff-name { font-size:14px; font-weight:600; margin-bottom:3px; }
.ff-meta { font-size:11px; color:var(--soft); }
.ff-status { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; flex-shrink:0; }
.ff-status.draft { background:rgba(245,200,66,.15); color:var(--yellow); }
.ff-status.complete { background:rgba(62,207,142,.15); color:var(--green); }
/* Field form editor overlay */
.ff-overlay { position:fixed; inset:0; background:var(--bg); z-index:300; display:none; flex-direction:column; overflow:hidden; }
.ff-overlay.open { display:flex; }
.ff-topbar { display:flex; align-items:center; gap:12px; padding:0 18px; height:52px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--sidebar); }
.ff-topbar-title { flex:1; font-size:14px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ff-save-badge { font-size:11px; color:var(--soft); flex-shrink:0; }
.ff-scroll { flex:1; overflow-y:auto; padding:20px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.ff-section { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:14px; overflow:hidden; }
.ff-section-head { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; user-select:none; }
.ff-section-icon { font-size:18px; }
.ff-section-title { font-size:13px; font-weight:600; flex:1; }
.ff-section-check { font-size:16px; }
.ff-section-caret { font-size:11px; color:var(--soft); transition:transform .2s; }
.ff-section-caret.open { transform:rotate(180deg); }
.ff-section-body { padding:0 16px 16px; display:none; }
.ff-section-body.open { display:block; }
.ff-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ff-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.ff-actions { display:flex; gap:10px; padding:0 20px 24px; flex-wrap:wrap; }
/* ── EMAIL THREADS ── */
.email-thread-row { padding:10px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.email-thread-row:last-child { border-bottom:none; }
.email-thread-row:hover { opacity:.8; }
.email-thread-subject { font-size:13px; font-weight:600; margin-bottom:2px; }
.email-thread-meta { font-size:11px; color:var(--soft); margin-bottom:3px; }
.email-thread-snippet { font-size:11px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-message { background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:10px; }
.email-message-header { font-size:11px; color:var(--soft); margin-bottom:6px; }
.email-message-from { font-size:12px; font-weight:600; margin-bottom:2px; }
.email-message-body { font-size:12px; line-height:1.65; white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; }
/* ── MOBILE / iOS ── */
/* Bottom nav bar (mobile only) */
.mobile-nav { display:none; }
.quick-fab { position:fixed; right:16px; bottom:70px; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-accent); border:none; box-shadow:var(--shadow-2); display:none; align-items:center; justify-content:center; cursor:pointer; z-index:900; }
.quick-fab:active { transform:scale(.94); }
@media (max-width:768px) {
/* Fix iOS height (accounts for address bar) */
body { height:100dvh; flex-direction:column; overflow:hidden; }
/* Hide desktop sidebar */
.sidebar { display:none !important; }
/* Main fills screen */
.main { height:100dvh; display:flex; flex-direction:column; }
/* Topbar — compact on mobile */
.topbar { padding:0 14px; height:50px; }
.topbar-center { display:none; } /* hide search on mobile, use filter instead */
.clock { display:none; }
.page-title { font-size:15px; }
/* Content area — leaves room for bottom nav */
.content { padding:14px 14px 80px; }
/* Detail panel — full width on mobile */
.detail-panel { width:100%; }
/* Grids → single column */
.stat-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
.pipeline-wrap { grid-template-columns:1fr; gap:12px; }
.two-col { grid-template-columns:1fr; }
.agents-grid { grid-template-columns:1fr; }
.connector-grid { grid-template-columns:1fr 1fr; }
/* Filter bar → single scrollable row, hide new claim btn */
.filter-bar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
.filter-bar::-webkit-scrollbar { display:none; }
/* Tables → card layout on mobile */
.data-table thead { display:none; }
.data-table tbody tr.clickable { display:block; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
.data-table tbody tr.clickable:hover { background:rgba(37,99,235,.04); }
.data-table tbody tr.clickable td { display:none; padding:0; border:none; }
.data-table tbody tr.clickable td:first-child { display:block; }
.mob-card-row { display:flex !important; align-items:center; justify-content:space-between; margin-bottom:5px; }
.mob-card-row:last-child { margin-bottom:0; }
.mob-card-name { font-weight:600; font-size:14px; color:var(--text); }
.mob-card-sub { font-size:12px; color:var(--soft); }
.desk-only { display:none !important; }
/* Chat */
.chat-wrap { height:calc(100dvh - 50px - 60px); }
/* Bottom navigation bar */
.mobile-nav {
display:flex;
position:fixed;
bottom:0; left:0; right:0;
height:60px;
background:var(--sidebar);
border-top:1px solid var(--border);
z-index:200;
padding-bottom:env(safe-area-inset-bottom);
}
.quick-fab { display:flex; }
.mob-nav-btn {
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:3px; background:none; border:none; color:var(--soft); cursor:pointer;
font-size:9px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
padding:8px 4px; transition:color .15s;
}
.mob-nav-btn .mob-icon { font-size:18px; line-height:1; }
.mob-nav-btn.active { color:var(--accent); }
/* Hero banner — stack on mobile */
.hero-banner { flex-direction:column; align-items:flex-start; padding:20px; gap:14px; }
.btn-hero { font-size:12px; padding:8px 16px; }
.hero-greeting { font-size:18px; }
/* Recovery Scoreboard — tighter on phones so it never overflows */
#recovery-scoreboard, #recovery-scoreboard-empty { padding:14px 16px !important; }
#rs-recovered { font-size:25px !important; }
/* New claim button moves to topbar right */
.topbar .btn-primary { font-size:11px; padding:5px 10px; }
/* Stat cards smaller text */
.stat-value { font-size:26px; letter-spacing:-1px; }
.stat-card { padding:16px 18px; }
.stat-icon { width:32px; height:32px; }
.stat-icon svg { width:16px; height:16px; }
}
/* ── REVENUE BREAKDOWN ── */
.rev-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 16px; }
.rev-pill { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.rev-pill-label { font-size:10px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.rev-pill-value { font-size:20px; font-weight:700; letter-spacing:-.5px; }
.rev-pill-sub { font-size:11px; color:var(--soft); margin-top:3px; }
.rev-pill-delta { font-size:11px; font-weight:600; margin-top:2px; }
.rev-pill-delta.up { color:#2d7a4f; }
.rev-pill-delta.down { color:#e06b6b; }
.rev-chart { display:flex; align-items:flex-end; gap:6px; height:80px; margin-bottom:16px; padding:0 2px; }
.rev-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.rev-bar { width:100%; border-radius:4px 4px 0 0; background:var(--accent); opacity:.7; transition:opacity .15s, height .3s; min-height:3px; cursor:default; }
.rev-bar:hover { opacity:1; }
.rev-bar-label { font-size:9px; color:var(--soft); white-space:nowrap; }
.rev-table { width:100%; border-collapse:collapse; font-size:12px; }
.rev-table th { font-size:10px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.4px; padding:6px 10px; text-align:left; border-bottom:1px solid var(--border); }
.rev-table th:not(:first-child) { text-align:right; }
.rev-table td { padding:9px 10px; border-bottom:1px solid rgba(44,47,58,.35); vertical-align:middle; }
.rev-table td:not(:first-child) { text-align:right; }
.rev-table tr:last-child td { border-bottom:none; }
.rev-table tr:hover td { background:rgba(91,142,240,.04); }
.rev-delta-badge { display:inline-block; font-size:10px; font-weight:600; padding:1px 6px; border-radius:20px; }
.rev-delta-badge.up { background:rgba(45,122,79,.12); color:#2d7a4f; }
.rev-delta-badge.down { background:rgba(224,107,107,.12); color:#e06b6b; }
.rev-delta-badge.flat { background:var(--card2); color:var(--soft); }
@media(max-width:768px) { .rev-summary-grid { grid-template-columns:1fr 1fr; } }
/* ── PREMIUM DETAIL PANEL ── */
.detail-panel {
position:fixed; top:0; right:0; bottom:0; width:500px;
background:var(--card); border-left:1px solid var(--border);
z-index:101; display:flex; flex-direction:column;
transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:-8px 0 40px rgba(0,0,0,.12);
}
.detail-panel.open { transform:translateX(0); }
/* ── PAGE TRANSITION ── */
.view { display:none; opacity:0; transform:translateY(6px); }
.view.active { display:block; animation:viewIn .22s ease forwards; }
@keyframes viewIn { to { opacity:1; transform:translateY(0); } }
/* ── FOCUS RINGS ── */
.btn:focus-visible, .filter-btn:focus-visible, .range-btn:focus-visible, .nav-btn:focus-visible {
outline:2px solid var(--accent); outline-offset:2px;
}
/* ── CHAT SEND BUTTON ── */
.chat-send {
width:42px; height:42px; border-radius:10px;
background:var(--accent);
box-shadow:none;
}
.chat-send:hover:not(:disabled) { box-shadow:0 4px 16px rgba(37,99,235,.5); transform:translateY(-1px); }
/* ── SECTION TITLE ICON ACCENT ── */
.section-title { font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:-.15px; display:flex; align-items:center; gap:7px; }
/* ── REVENUE PILL UPGRADE ── */
.rev-pill {
background:var(--card2); border:1px solid var(--border);
border-radius:12px; padding:14px 16px;
transition:border-color .2s, box-shadow .2s;
}
.rev-pill:hover { border-color:rgba(59,130,246,.25); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.rev-pill-value { font-size:22px; font-weight:800; letter-spacing:-.5px; }
/* ── LOADING SCREEN UPGRADE ── */
.loading-screen { background:var(--bg); }
:root.dark .loading-screen { background:var(--bg); }
:root.dark .loading-logo { color:#fafafa; }
:root.dark .loading-logo span { color:#fafafa; }
/* ── SKELETON LOADER ── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel { border-radius:6px; background:linear-gradient(90deg,var(--card2) 25%,var(--border) 50%,var(--card2) 75%); background-size:800px 100%; animation:shimmer 1.4s infinite linear; }
.skel-row td { padding:12px 14px; border-bottom:1px solid var(--border); }
.skel-line { height:12px; border-radius:4px; }
.skel-line.w30 { width:30%; }
.skel-line.w50 { width:50%; }
.skel-line.w20 { width:20%; }
.skel-line.w70 { width:70%; }
.skel-line.w40 { width:40%; }
/* ── CLAIM ROW QUICK-ACTIONS ── */
.row-actions-cell { width:1px; white-space:nowrap; padding:0 12px 0 4px !important; }
.row-actions { display:flex; align-items:center; gap:3px; opacity:0; transition:opacity .12s; }
.claim-row:hover .row-actions { opacity:1; }
.row-action-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--card2); color:var(--soft); cursor:pointer; transition:all .12s; }
.row-action-btn:hover { color:var(--text); border-color:var(--accent); background:rgba(91,142,240,.1); }
/* ── RANGE TOGGLE ── */
#range-toggles, #rev-range-toggles, .seg-toggle { background:var(--card2); border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px !important; }
.range-btn { padding:5px 13px; font-size:11.5px; font-weight:600; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--soft); cursor:pointer; transition:all .15s ease; letter-spacing:-.1px; }
.range-btn:hover { color:var(--text); }
.range-btn.active { background:var(--card); border-color:var(--border); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); }
/* ── MODAL OVERLAY (shared by all modals) ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg); border:1px solid var(--border); border-radius:12px; width:100%; max-width:620px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-title { font-size:15px; font-weight:700; }
.close-btn { background:none; border:none; color:var(--soft); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:6px; transition:color .15s,background .15s; }
.close-btn:hover { color:var(--text); background:var(--card2); }
.modal-body { flex:1; overflow-y:auto; padding:20px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); flex-shrink:0; }
/* ── CMD+K COMMAND PALETTE ── */
.cmdpal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; backdrop-filter:blur(4px); }
.cmdpal-overlay.open { display:flex; }
.cmdpal { background:var(--bg); border:1px solid var(--border); border-radius:16px; width:580px; max-width:95vw; box-shadow:0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(59,130,246,.1); overflow:hidden; }
.cmdpal-search-wrap { display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
.cmdpal-input { flex:1; background:none; border:none; font-size:15px; color:var(--text); outline:none; font-family:inherit; font-weight:500; }
.cmdpal-input::placeholder { color:var(--soft); }
.cmdpal-kbd { font-size:10px; font-weight:600; padding:2px 7px; background:var(--card2); border:1px solid var(--border); border-radius:5px; color:var(--soft); flex-shrink:0; letter-spacing:.3px; }
.cmdpal-results { max-height:380px; overflow-y:auto; padding:6px 0 10px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.cmdpal-section-label { font-size:10px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.8px; padding:10px 18px 5px; }
.cmdpal-item { display:flex; align-items:center; gap:11px; padding:8px 18px; cursor:pointer; font-size:13px; transition:background .08s; }
.cmdpal-item:hover,.cmdpal-item.active { background:rgba(59,130,246,.08); }
.cmdpal-item.active .cmdpal-item-label { color:var(--accent); }
.cmdpal-item-icon { width:30px; height:30px; border-radius:8px; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cmdpal-item-label { flex:1; font-weight:500; }
.cmdpal-item-meta { font-size:11px; color:var(--soft); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.cmdpal-empty { padding:40px 18px; text-align:center; font-size:13px; color:var(--soft); }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* ── LINE ITEM GRID (desktop + mobile) ── */
.ns-li-header {
display:grid; grid-template-columns:100px 1fr 50px 50px 80px 80px 30px;
gap:0; padding:8px 10px; font-size:10px; font-weight:600; color:var(--soft);
text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
}
.ns-line-row {
display:grid; grid-template-columns:100px 1fr 50px 50px 80px 80px 30px;
gap:0; padding:6px 10px; border-bottom:1px solid var(--border); align-items:center;
}
.ns-line-row input {
font-size:11px; padding:4px 6px; border-radius:4px;
}
.ns-li-qty, .ns-li-unit { text-align:center; }
.ns-li-price { text-align:right; }
.ns-li-total { font-size:12px; font-weight:600; text-align:right; padding-right:4px; }
.ns-li-del { background:none; border:none; color:var(--soft); cursor:pointer; font-size:14px; }
.ns-li-del:hover { color:var(--red); }
/* ── ESTIMATE LINE ITEM GRID ── */
.est-line-item {
display:grid; grid-template-columns:2fr 50px 50px 75px 75px 70px 70px 70px 28px;
gap:6px; align-items:end; margin-bottom:6px;
}
.est-li-del-btn { border:none; background:none; color:var(--red); cursor:pointer; font-size:16px; padding:0; margin-bottom:6px; }
.mob-label { display:none; font-size:10px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px; }
/* ── COMPREHENSIVE MOBILE FIXES ─────────────────────── */
@media (max-width: 768px) {
/* Modals → full screen on mobile */
.modal-overlay { padding:0; }
.modal { max-width:100% !important; max-height:100dvh !important; border-radius:0 !important; height:100dvh; }
.modal-header { padding:12px 16px; }
.modal-body { padding:14px 16px; }
.modal-footer { padding:10px 16px; }
.modal-title { font-size:14px; }
/* Form grids → stack on mobile */
.modal [style*="grid-template-columns: 1fr 1fr"],
.modal [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns:1fr !important;
}
/* Line item grid → card layout on mobile */
.ns-li-header { display:none !important; }
.ns-line-row {
display:flex !important; flex-wrap:wrap; gap:6px; padding:10px 10px;
grid-template-columns:none !important;
}
.ns-line-row input { font-size:14px !important; padding:8px 10px !important; }
.ns-li-code { width:80px; flex-shrink:0; }
.ns-li-desc { flex:1; min-width:120px; }
.ns-li-qty { width:50px; }
.ns-li-unit { width:50px; }
.ns-li-price { width:70px; }
.ns-li-total { width:70px; font-size:13px !important; display:flex; align-items:center; justify-content:flex-end; }
.ns-li-del { width:30px; display:flex; align-items:center; justify-content:center; }
/* Estimate line items → stacked on mobile */
.est-line-item {
display:flex !important; flex-wrap:wrap; gap:6px; padding:10px 0;
border-bottom:1px solid var(--border); grid-template-columns:none !important;
}
.mob-label { display:block !important; }
.est-li-cell { display:flex; flex-direction:column; }
.est-li-cell-desc { flex:1; min-width:100%; }
.est-li-cell-sm { width:60px; }
.est-li-cell-med { width:calc(25% - 6px); min-width:70px; flex:1; }
.est-li-cell input { font-size:14px !important; }
.est-li-del-btn { align-self:flex-end; margin:0; font-size:20px; }
/* Estimate header row → hide on mobile */
.est-li-header { display:none !important; }
/* Estimate form grids → stack */
[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
/* Detail panel → full screen overlay */
.detail-panel { width:100% !important; }
.detail-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; white-space:nowrap; padding:0 12px; }
.detail-tabs::-webkit-scrollbar { display:none; }
.detail-tab { flex-shrink:0; font-size:11px; padding:8px 12px; }
/* Topbar adjustments */
.topbar { gap:8px; }
.topbar .btn-primary { font-size:10px; padding:4px 8px; white-space:nowrap; }
/* Stat cards → 2 columns, smaller */
.supp-stat-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
/* Supplement filter buttons */
.filter-bar { gap:6px; }
.filter-btn { font-size:11px; padding:5px 10px; }
/* Inputs/selects → proper touch size */
.input, .select, .textarea { font-size:16px !important; /* prevents iOS zoom */ padding:10px 12px; }
.textarea { min-height:60px; }
/* Upload zone */
.upload-zone { padding:14px !important; min-height:auto !important; }
/* Cost summary → tighter on mobile */
.modal [style*="Cost Summary"] { padding:12px !important; }
/* Card sections tighter */
.card { padding:14px 16px; }
/* Row action buttons always visible on mobile (no hover) */
.row-actions { opacity:1; }
/* Revenue pills → 2 col */
.rev-summary-grid { grid-template-columns:1fr 1fr !important; }
/* Pipeline cards → tighter */
.pipeline-col { padding:10px 12px; }
/* Connector grid → single col */
.connector-grid { grid-template-columns:1fr !important; }
/* Settings page fixes */
.settings-grid { grid-template-columns:1fr !important; }
/* Page header buttons → wrap */
[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap:wrap; gap:8px; }
/* Clients / Leads tables → card layout */
.data-table { font-size:12px; }
}
/* ── SMALL PHONE EXTRAS ── */
@media (max-width: 420px) {
.stat-grid { grid-template-columns:1fr !important; gap:8px; }
.stat-value { font-size:22px; }
.hero-greeting { font-size:16px; }
.content { padding:10px 10px 80px; }
.topbar { height:44px; padding:0 10px; }
.mobile-nav { height:54px; }
.mob-nav-btn { font-size:8px; }
.mob-nav-btn .mob-icon { font-size:16px; }
.modal-header { padding:10px 12px; }
.modal-body { padding:10px 12px; }
.modal-footer { padding:8px 12px; }
.btn { font-size:12px; padding:6px 12px; }
}
/* ── Richard — AI Claims Strategist: premium refresh ── */
#partner-brief.rk-card{
position:relative; background:var(--card); border:1px solid var(--border);
border-radius:16px; padding:20px 20px 18px; margin-bottom:16px; overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.07);
}
#partner-brief.rk-card::before{ display:none; }
.rk-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rk-avatar{
position:relative; width:46px; height:46px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:800; color:#fff; flex-shrink:0; letter-spacing:-.5px;
background:var(--accent);
box-shadow:none;
}
.rk-avatar::after{
content:""; position:absolute; right:-1px; bottom:-1px; width:12px; height:12px;
border-radius:50%; background:#22c55e; border:2.5px solid var(--card);
animation:rkPulse 2s infinite;
}
@keyframes rkPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.rk-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rk-name{ font-size:16px; font-weight:750; letter-spacing:-.2px; color:var(--text); display:flex; align-items:center; gap:7px; }
.rk-name::after{ content:"AI"; font-size:9px; font-weight:600; letter-spacing:.6px; color:var(--accent-ink); background:var(--accent-tint); padding:2px 7px; border-radius:20px; }
.rk-role{ font-size:12px; color:var(--soft); font-weight:500; }
.rk-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#16a34a; background:rgba(34,197,94,.10); padding:5px 11px; border-radius:20px; }
.rk-live .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; animation:rkBlink 1.4s infinite; }
@keyframes rkBlink{0%,100%{opacity:1}50%{opacity:.3}}
.rk-refresh{ margin-left:8px; background:transparent; border:1px solid var(--border); border-radius:9px; padding:6px 9px; color:var(--soft); cursor:pointer; line-height:0; transition:.15s; }
.rk-refresh:hover{ background:var(--card2); color:var(--text); border-color:var(--accent); }
.rk-narr{ font-size:14px; line-height:1.62; color:var(--text); }
.rk-arrow{ color:var(--accent); font-weight:600; }
.rk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.rk-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text); background:var(--card2); border:1px solid var(--border); padding:8px 13px; border-radius:20px; cursor:pointer; transition:.15s; }
.rk-chip:hover{ border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); box-shadow:none; }
.rk-chip.alert{ background:rgba(234,179,8,.10); border-color:rgba(234,179,8,.32); color:#b45309; }
.rk-chip.alert:hover{ border-color:#b45309; color:#92400e; }
.rk-section{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.rk-section-h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:650; letter-spacing:-.01em; color:var(--soft); margin-bottom:9px; }
.rk-learn{ font-size:12.5px; color:var(--soft); line-height:1.55; }
.rk-inbox-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 8px; margin:0 -8px; cursor:pointer; border-radius:9px; transition:.12s; }
.rk-inbox-row:hover{ background:var(--card2); }
.rk-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:20px; flex-shrink:0; }
.rk-tag.carrier{ background:var(--accent-tint); color:var(--accent-ink); }
.rk-tag.homeowner{ background:rgba(34,197,94,.12); color:#16a34a; }
.rk-inbox-sub{ font-size:12.5px; font-weight:600; color:var(--text); }
.rk-inbox-snip{ font-size:12px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-shimmer{ height:12px; border-radius:6px; margin:8px 0; background:linear-gradient(90deg,var(--card2) 25%,rgba(120,120,120,.12) 37%,var(--card2) 63%); background-size:400% 100%; animation:rkSh 1.4s infinite; }
@keyframes rkSh{0%{background-position:100% 0}100%{background-position:0 0}}
/* morning modal */
.rk-modal{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; max-width:440px; width:92%; position:relative; box-shadow:0 24px 60px rgba(16,24,40,.28); }
.rk-modal::before{ display:none; }
.rk-modal-x{ position:absolute; top:14px; right:16px; background:transparent; border:none; font-size:16px; color:var(--soft); cursor:pointer; }
/* ═══════════════════════════════════════════════════════════
DISPATCH LAYER 2026 — loaded last, wins ties.
Mono for data · calm density · pipeline rail · ⌘K
═══════════════════════════════════════════════════════════ */
.mono, .claim-number, td.num, .amount { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.stat-value, .hero-stat-val, .ov-hero-num, #detail-panel .dp-value b { font-family:var(--font-mono); font-weight:600; letter-spacing:-.02em; }
.data-table td:has(> .amt), .data-table .money { font-family:var(--font-mono); font-size:12.5px; }
::selection { background:var(--accent-tint); color:var(--text); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:4px; }
button, .btn { letter-spacing:-.005em; }
.card, .rk-card, .modal { border-radius:var(--radius); }
/* pipeline rail — claim progress at a glance */
.cs-rail { display:inline-flex; gap:3px; align-items:center; width:96px; flex-shrink:0; }
.cs-rail .seg { height:4px; flex:1; border-radius:2px; background:var(--border); }
.cs-rail .seg.f { background:var(--accent); }
.cs-rail.done .seg.f { background:var(--gold-br, #d4a24e); }
.cs-rail .seg.warn { background:var(--yellow); }
:root.dark .cs-rail .seg { background:#2e2a24; }
:root.dark .cs-rail .seg.f { background:var(--accent); }
:root.dark .cs-rail.done .seg.f { background:var(--gold, #e8bc6a); }
.cs-kbd { display:inline-block; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:0 5px; font-family:var(--font-mono); font-size:10.5px; color:var(--soft); }
/* sidebar search affordance */
#cs-cmdk-launch { margin:2px 10px 10px; border:1px solid var(--sb-border); background:var(--card); border-radius:var(--radius-sm); padding:7px 10px; font-size:12.5px; color:var(--sb-soft); display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-sans); width:calc(100% - 20px); }
#cs-cmdk-launch:hover { border-color:var(--border); color:var(--text); }
/* ═══ WARMTH PASS 2026 — color with meaning, one ambient moment per screen ═══ */
.stat-card:hover { border-color:color-mix(in srgb, var(--accent) 32%, var(--border)); transform:translateY(-1px); box-shadow:var(--shadow-2); }
.stat-card:hover .stat-card-caret { background:var(--accent-tint); color:var(--accent-ink); }
.card:hover, .rk-card:hover { border-color:color-mix(in srgb, var(--accent) 18%, var(--border)); }
.brand-icon { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); }
.tag { font-size:10.5px; }
.filter-btn { transition:border-color .15s ease, background .15s ease, color .15s ease; }
.filter-btn:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); color:var(--accent-ink); }
.section-title { letter-spacing:-.01em; }
.section-link { color:var(--accent-ink); }
.section-link:hover { text-decoration:underline; }
.data-table tbody tr:hover td { background:color-mix(in srgb, var(--accent) 3%, transparent); }
input:focus, textarea:focus, select:focus { border-color:var(--accent) !important; box-shadow:var(--ring); }
.quick-fab { background:var(--accent); }
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* ═══ MOTION SYSTEM 2026 — easing tokens, frequency-gated ═══
Rules (via animations.dev): ease-out for entries, ease-in-out for on-screen
movement, never ease-in. Buttons 100-160ms, dropdowns 150-250ms, modals ≤300ms.
High-frequency paths (list rows, command palette) get NO animation. */
:root {
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-io: cubic-bezier(.65,0,.35,1);
--dur-1: 120ms; /* buttons, chips, hovers */
--dur-2: 180ms; /* dropdowns, tooltips */
--dur-3: 260ms; /* modals, drawers */
}
.btn { transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform 80ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.nav-btn { transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.tag, .filter-btn, .act-icon, .stat-icon { transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.modal, .rk-modal { animation-duration: var(--dur-3); }
/* the ⌘K palette is keyboard-initiated: it must appear instantly, never animate */
.cmdpal-overlay, .cmdpal, .cmdpal-item { animation: none !important; transition: none !important; }
/* hover effects only where hover exists (kills sticky-hover on tablets in the field) */
@media (hover: none) {
.stat-card:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
.card:hover, .rk-card:hover { border-color: var(--border); }
}
/* motion hygiene: respect the OS setting completely */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ═══ SAPPHIRE-GOLD LAYER 2026 — premium card treatment + stage-advance moment ═══ */
:root.dark .stat-card, :root.dark .card, :root.dark .section-card, :root.dark .rk-card {
background: var(--card);
border:1px solid var(--border);
}
.stat-card { background-image: none; }
.hero-stat-val { font-variant-numeric:tabular-nums; }
/* stage-advance sweep — plays ONCE when a claim moves forward, never on routine re-render */
@keyframes csPop { 0%{transform:scale(.6);opacity:.3} 60%{transform:scale(1.18)} 100%{transform:scale(1);opacity:1} }
@keyframes csSegIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.cs-bar.cs-adv .cs-step.done .cs-dot, .cs-bar.cs-adv .cs-step.now .cs-dot { animation:csPop .5s var(--ease-out, ease) both; }
.cs-bar.cs-adv .cs-step:nth-child(1) .cs-dot{animation-delay:.05s}
.cs-bar.cs-adv .cs-step:nth-child(2) .cs-dot{animation-delay:.15s}
.cs-bar.cs-adv .cs-step:nth-child(3) .cs-dot{animation-delay:.25s}
.cs-bar.cs-adv .cs-step:nth-child(4) .cs-dot{animation-delay:.35s}
.cs-bar.cs-adv .cs-step:nth-child(5) .cs-dot{animation-delay:.45s}
.cs-bar.cs-adv .cs-step:nth-child(6) .cs-dot{animation-delay:.55s}
.cs-bar.cs-adv .cs-step:nth-child(7) .cs-dot{animation-delay:.65s}
@media (prefers-reduced-motion: reduce){ .cs-bar.cs-adv .cs-dot{animation:none !important} }
/* ═══ CONSOLE FINISH 2026 — interior surfaces earn the brand ═══ */
.page-title { font-size:24px; font-weight:640; letter-spacing:-.022em; }
.page-sub { font-family:var(--font-mono); font-size:11.5px; color:var(--soft); margin-top:3px; }
.section-title { font-size:15px; font-weight:620; letter-spacing:-.012em; }
/* tables read like ledgers */
.data-table th { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--soft); }
.data-table td { font-size:13.5px; }
.data-table tbody tr { transition:background var(--dur-1, 120ms) var(--ease-out, ease); }
/* modals: deep, blurred, branded */
.modal-overlay { background:rgba(14,13,11,.52) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.modal { border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 0 0 1px rgba(0,0,0,.25), var(--shadow-3); }
.detail-overlay { backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
/* filters: pill segmented controls, like the brand */
.filter-btn { border-radius:980px; }
/* inputs: one height, one voice */
.input { border-radius:var(--radius-sm); }
.input:focus { border-color:var(--accent); box-shadow:var(--ring); }
/* buttons: consistent radius */
.btn { border-radius:7px; }
.btn-primary { background:var(--accent); }
/* empty-state voice: quiet mono */
[id$="-empty"], .empty-state { font-family:var(--font-sans); }
|