+
-
`;
overlay.classList.add('show');
// Focus the title input
diff --git a/js/lens.js b/js/lens.js
index e5e48f21..a20f19f5 100644
--- a/js/lens.js
+++ b/js/lens.js
@@ -746,18 +746,22 @@ export function openKnowledgeBaseModal() {
if (!modal) {
modal = document.createElement('div');
modal.id = 'kb-modal';
- modal.className = 'modal kb-modal';
overlay.appendChild(modal);
}
+ modal.className = 'modal kb-modal settings-modal';
modal.innerHTML = `
-
-
`;
overlay.classList.add('show');
document.addEventListener('keydown', _kbModalKeydown);
diff --git a/js/main.js b/js/main.js
index 741e82ab..7ad85986 100644
--- a/js/main.js
+++ b/js/main.js
@@ -404,6 +404,8 @@ document.addEventListener("keydown", e => {
if (feedbackOverlay && feedbackOverlay.classList.contains("show")) { window.closeFeedbackModal(); return; }
const settingsOverlay = document.getElementById("settings-modal-overlay");
if (settingsOverlay && settingsOverlay.classList.contains("show")) { window.closeSettingsModal(); return; }
+ const tweaksOverlay = document.getElementById("tweaks-panel-overlay");
+ if (tweaksOverlay && tweaksOverlay.classList.contains("show")) { window.closeTweaksPanel(); return; }
const modalOverlay = document.getElementById("modal-overlay");
if (modalOverlay && modalOverlay.classList.contains("show")) { window.closeModal(); return; }
// Generic fallback: any dynamically-injected `.modal-overlay.show` (sun
@@ -421,7 +423,7 @@ document.addEventListener("keydown", e => {
// `.modal-overlay` — include them so Tab doesn't escape back to the page
// while the modal is visible.
if (e.key === "Tab") {
- const overlayIds = ["client-list-overlay","changelog-modal-overlay","settings-modal-overlay","import-modal-overlay","feedback-modal-overlay","sync-restore-overlay","sync-setup-overlay","modal-overlay","kb-modal-overlay","ai-personalize-picker-overlay","data-protection-picker-overlay"];
+ const overlayIds = ["client-list-overlay","changelog-modal-overlay","settings-modal-overlay","tweaks-panel-overlay","import-modal-overlay","feedback-modal-overlay","sync-restore-overlay","sync-setup-overlay","modal-overlay","kb-modal-overlay","ai-personalize-picker-overlay","data-protection-picker-overlay"];
for (const oid of overlayIds) {
const ov = document.getElementById(oid);
if (ov && ov.classList.contains("show")) {
diff --git a/js/nav.js b/js/nav.js
index f255a110..183f6a0c 100644
--- a/js/nav.js
+++ b/js/nav.js
@@ -5,6 +5,27 @@ import { escapeHTML, escapeAttr, hashString } from './utils.js';
import { getActiveData, countFlagged, filterDatesByRange } from './data.js';
import { getProfiles } from './profile.js';
+function _iconSvg(name) {
+ const attrs = 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+ const icons = {
+ search: ``,
+ labs: ``,
+ genome: ``,
+ body: ``,
+ light: ``,
+ insight: ``,
+ compare: ``,
+ correlations: ``,
+ recommendations: ``,
+ knowledge: ``,
+ plus: ``,
+ supplements: ``,
+ cycle: ``,
+ emf: ``,
+ };
+ return icons[name] || escapeHTML(String(name || ''));
+}
+
// Render a conditional sidebar entry (e.g. Light & Sun, Wearables, Cycle, EMF, Genetics).
// Appears only when the predicate yields data. Soft-promote via scroll-selector +
// optional expand callback; hard-promote via dedicated `navigate` target.
@@ -23,9 +44,11 @@ function _renderConditionalNavItem({ key, icon, label, navigate = 'dashboard', b
} else {
onclick = `window.navigate('${navigate}')`;
}
- const badgeHtml = badge ? `` : '';
+ const badgeHtml = badge ? `` : '';
return ``;
+
+
+ ${badgeHtml}
`;
}
function _buildNavItem(key, cat) {
@@ -34,8 +57,8 @@ function _buildNavItem(key, cat) {
if (withData === 0) return null;
const flagged = countFlagged(markers);
const flagHtml = flagged > 0
- ? `${flagged}`
- : `${withData}`;
+ ? ``
+ : ``;
const markerNames = markers.map(m => m.name).join('|');
// Strip redundant group prefix from label when shown under a group header
let label = cat.label;
@@ -43,26 +66,58 @@ function _buildNavItem(key, cat) {
label = label.slice(cat.group.length + 2);
}
return { withData, flagged, html: `` };
+
+
+ ${flagHtml}` };
}
export function buildSidebar(data) {
if (!data) data = getActiveData();
data = filterDatesByRange(data);
const nav = document.getElementById("sidebar-nav");
- let html = ``;
- html += ``;
- html += ``;
- html += ``;
+ const counts = (() => {
+ let markerCount = 0;
+ for (const cat of Object.values(data.categories || {})) {
+ for (const marker of Object.values(cat.markers || {})) {
+ if (!marker.hidden && marker.values?.some(v => v !== null)) markerCount++;
+ }
+ }
+ return markerCount;
+ })();
+ let html = ``;
+ html += ``;
+ html += ``;
// \u2500\u2500\u2500 Conditional module entries \u2014 only render when the module has data.
// Order: most-used first; new modules (Light & Sun) at the top to highlight discovery.
// All except Light & Sun soft-promote (scroll + expand on dashboard); Light & Sun
// hard-promotes to its dedicated view.
+ const genetics = state.importedData?.genetics;
+ const hasGeneticsData = genetics && ((genetics.snps && Object.keys(genetics.snps).length > 0) || genetics.mtdna);
+ const gParts = [];
+ if (hasGeneticsData) {
+ if (genetics.snps && Object.keys(genetics.snps).length > 0) gParts.push(Object.keys(genetics.snps).length);
+ if (genetics.mtdna) gParts.push(genetics.mtdna.haplogroup);
+ }
+ html += ``;
+
+ const wearableConn = state.importedData?.wearableConnections || {};
+ const wearableCount = Object.keys(wearableConn).length;
+ html += ``;
+
// \u2600 Light & Sun \u2014 always visible (flagship module). New users
// need a discoverable entry point even before logging anything; once
// sessions exist, the badge shows this week's count.
@@ -71,29 +126,35 @@ export function buildSidebar(data) {
const weekCount = sunSessions.filter(s => (s.endedAt || s.startedAt || 0) >= weekStart).length;
html += _renderConditionalNavItem({
key: 'light',
- icon: '\u2600', // monochrome glyph (no FE0F selector) \u2014 matches the rest of the sidebar (\uD83D\uDCCB \uD83C\uDF38 \uD83D\uDCE1 \uD83E\uDDEC)
- label: 'Light & Sun',
+ icon: 'light',
+ label: 'Light',
navigate: 'light',
badge: weekCount > 0 ? (weekCount > 9 ? '9+' : weekCount) : null,
});
- // \u231A Wearables \u2014 soft-promote (scroll to wearable strip)
- const wearableConn = state.importedData?.wearableConnections || {};
- if (Object.keys(wearableConn).length > 0) {
- html += _renderConditionalNavItem({
- key: 'wearables',
- icon: '\u231A',
- label: 'Wearables',
- scrollSelector: '#wearable-strip',
- });
- }
+ html += ``;
+
+ html += ``;
+ html += ``;
+ html += ``;
+ html += ``;
+ html += ``;
+ html += ``;
// \uD83D\uDC8A Supplements \u2014 soft-promote
const supps = state.importedData?.supplements;
if (Array.isArray(supps) && supps.length > 0) {
html += _renderConditionalNavItem({
key: 'supplements',
- icon: '\uD83D\uDC8A',
+ icon: 'supplements',
label: 'Supplements',
scrollSelector: '.supp-timeline-section',
badge: supps.length,
@@ -106,7 +167,7 @@ export function buildSidebar(data) {
if (sex === 'female' && mc) {
html += _renderConditionalNavItem({
key: 'cycle',
- icon: '\uD83C\uDF38',
+ icon: 'cycle',
label: 'Cycle',
scrollSelector: '.cycle-section',
});
@@ -117,25 +178,13 @@ export function buildSidebar(data) {
if (Array.isArray(emfAssessments) && emfAssessments.length > 0) {
html += _renderConditionalNavItem({
key: 'emf',
- icon: '\uD83D\uDCE1',
+ icon: 'emf',
label: 'EMF',
navigate: 'fn:window.openEMFAssessmentEditor&&window.openEMFAssessmentEditor()',
badge: emfAssessments.length,
});
}
- // \uD83E\uDDEC Genetics \u2014 original conditional entry, refactored to use helper
- const genetics = state.importedData?.genetics;
- const hasGeneticsData = genetics && ((genetics.snps && Object.keys(genetics.snps).length > 0) || genetics.mtdna);
- if (hasGeneticsData) {
- const gParts = [];
- if (genetics.snps && Object.keys(genetics.snps).length > 0) gParts.push(Object.keys(genetics.snps).length);
- if (genetics.mtdna) gParts.push(genetics.mtdna.haplogroup);
- // Genetics has special expand-on-scroll behavior \u2014 keep its inline form
- html += ``;
- }
-
// Separate categories into blood work (no group) and specialty groups
const bloodWork = [];
const specialtyGroups = {};
@@ -152,7 +201,11 @@ export function buildSidebar(data) {
}
// Render blood work categories
- html += ``;
+ html += ``;
+ html += ``;
for (const item of bloodWork) html += item.html;
// Render specialty groups
@@ -237,7 +290,7 @@ export function filterSidebar() {
// When searching: show matching items, expand groups with matches, hide empty groups
items.forEach(el => {
const cat = el.dataset.category;
- if (cat === 'dashboard' || cat === 'correlations' || cat === 'compare' || cat === 'light' || cat === 'wearables' || cat === 'supplements' || cat === 'cycle' || cat === 'emf' || cat === 'genetics') { el.style.display = ''; return; }
+ if (cat === 'dashboard' || cat === 'all' || cat === 'correlations' || cat === 'compare' || cat === 'recommendations' || cat === 'knowledge' || cat === 'custom-markers' || cat === 'light' || cat === 'body' || cat === 'wearables' || cat === 'supplements' || cat === 'cycle' || cat === 'emf' || cat === 'genome' || cat === 'genetics' || cat === 'insight') { el.style.display = ''; return; }
const label = el.textContent.toLowerCase();
const markers = (el.dataset.markers || '').toLowerCase();
el.style.display = (label.includes(query) || markers.includes(query)) ? '' : 'none';
diff --git a/js/pdf-import.js b/js/pdf-import.js
index 0c62e22b..3ca6959e 100644
--- a/js/pdf-import.js
+++ b/js/pdf-import.js
@@ -691,9 +691,16 @@ export function showImportPreview(parseResult) {
const unmatched = markers.filter(m => !m.matched && !m.suggestedKey);
const importCount = matched.length + newMarkers.length;
const batchCtx = window._batchImportContext;
- const batchLabel = batchCtx ? `
+
@@ -141,8 +145,8 @@
Lens
-
-
+
+
diff --git a/js/changelog.js b/js/changelog.js
index f884e0b8..9dc95fab 100644
--- a/js/changelog.js
+++ b/js/changelog.js
@@ -236,8 +236,15 @@ export function openChangelog(showAll) {
const entries = showAll ? CHANGELOG : CHANGELOG.slice(0, 3);
- let html = ``;
- html += `What's New
`; + modal.className = 'modal changelog-modal gb-history-modal'; + let html = `
+
+
+
+
+ Release notes
+ What's New
+ `;
for (const entry of entries) {
html += `
`;
modal.innerHTML = html;
overlay.classList.add('show');
}
diff --git a/js/dna.js b/js/dna.js
index ba304a72..e414db6b 100644
--- a/js/dna.js
+++ b/js/dna.js
@@ -208,7 +208,9 @@ function loadSNPTable({ forceFresh = false } = {}) {
}
// Eagerly load SNP table when genetics data exists (e.g. after JSON import)
-export function ensureSNPTable() { if (state.importedData?.genetics) loadSNPTable(); }
+export function ensureSNPTable() {
+ return state.importedData?.genetics ? loadSNPTable() : Promise.resolve(null);
+}
// Catalog signature: { size, hash } over the sorted rsID list. Stamped on
// genetics at import time and re-computed at render time so the genetics
@@ -263,6 +265,7 @@ export async function parseDNAFile(file) {
category: entry.category,
markers: entry.markers || [],
effect: genotypeInfo.effect,
+ valence: genotypeInfo.valence,
note: genotypeInfo.note,
};
}
@@ -409,6 +412,9 @@ export function saveGeneticsData(profileData, parseResult) {
genotype: data.genotype,
gene: data.gene,
variant: data.variant,
+ effect: data.effect,
+ valence: data.valence,
+ note: data.note,
};
}
if (apoe) {
diff --git a/js/feedback.js b/js/feedback.js
index b85a147a..71373035 100644
--- a/js/feedback.js
+++ b/js/feedback.js
@@ -15,9 +15,16 @@ export function openFeedbackModal() {
const modal = document.getElementById('feedback-modal');
const overlay = document.getElementById('feedback-modal-overlay');
const typeOptions = FEEDBACK_TYPES.map(t => ``).join('');
+ modal.className = 'modal gb-form-modal feedback-redesign-modal';
modal.innerHTML = `
-
- `;
@@ -249,6 +256,7 @@ export function openChangelog(showAll) {
html += '
';
}
+ html += `Send Feedback
+
+
+
+
+
+ GitHub issue
+ Send Feedback
+
@@ -38,6 +45,7 @@ export function openFeedbackModal() {
Opens a GitHub issue in a new tab. Requires a GitHub account.
+- - Knowledge Base -
+
+
+
+
+
+ Local context
+ Knowledge Base
+
${renderCustomLensSection()}
+ File ${batchCtx.current} of ${batchCtx.total}
` : '';
- let html = `
- ${batchLabel}Import Preview
+ const batchLabel = batchCtx ? `File ${batchCtx.current} of ${batchCtx.total}` : 'Lab import'; + modal.className = 'modal import-preview-modal gb-history-modal'; + let html = `
+
+
+
+
+ ${escapeHTML(batchLabel)}
+ Import Preview
+
File: ${escapeHTML(fileName)}
Collection Date: ${dateFormatted}
Matched: ${matched.length} \u00b7
@@ -797,7 +804,8 @@ export function showImportPreview(parseResult) {
const importDisabled = !date ? ' disabled style="opacity:0.5;cursor:not-allowed"' : '';
html += `
-
`;
+ Settings
+
+
+
+
+
+ Controls
+ Settings
+
+
`;
overlay.classList.add('show');
window.initSettingsOllamaCheck();
@@ -504,7 +666,7 @@ export function updateSettingsUI() {
modal.querySelectorAll('.unit-toggle-btn[data-alt-units]').forEach(btn => btn.classList.toggle('active', (btn.dataset.altUnits === 'on') === !!state.showAltUnits));
const theme = getTheme();
modal.querySelectorAll('.settings-theme-btn').forEach(btn => {
- btn.classList.toggle('active', btn.textContent.toLowerCase() === theme);
+ btn.classList.toggle('active', btn.dataset.themeId === theme);
});
const timeFmt = getTimeFormat();
modal.querySelectorAll('.time-toggle-btn').forEach(btn => btn.classList.toggle('active', btn.dataset.timefmt === timeFmt));
@@ -1234,4 +1396,10 @@ Object.assign(window, {
renderDataEntriesSection,
refreshDataEntriesSection,
resetCurrentProfileUsage,
+ openTweaksPanel,
+ closeTweaksPanel,
+ selectTweaksTheme,
+ selectTweaksAccent,
+ applyAccentOverride,
+ updateTweaksUI,
});
diff --git a/js/theme.js b/js/theme.js
index 86bc690d..9d5c83bc 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -1,5 +1,16 @@
// theme.js — Theme management, chart colors, time format
+const VALID_THEMES = ['dark', 'light', 'cyberterm', 'glass', 'synth-sunrise', 'neuromancer'];
+
+export const THEMES = [
+ { id: 'dark', label: 'Modern Minimal' },
+ { id: 'light', label: 'Soft Warm Light' },
+ { id: 'cyberterm', label: 'Cypherpunk Terminal' },
+ { id: 'glass', label: 'Glass / Liquid' },
+ { id: 'synth-sunrise', label: 'Synth Sunrise' },
+ { id: 'neuromancer', label: 'Neuromancer' },
+];
+
export function getTimeFormat() { return localStorage.getItem('labcharts-time-format') || '24h'; }
export function setTimeFormat(fmt) { localStorage.setItem('labcharts-time-format', fmt); }
@@ -34,18 +45,23 @@ export function parseTimeInput(val) {
return '';
}
-export function getTheme() { return localStorage.getItem('labcharts-theme') || 'dark'; }
+export function getTheme() {
+ const theme = localStorage.getItem('labcharts-theme') || 'dark';
+ return VALID_THEMES.includes(theme) ? theme : 'dark';
+}
export function setTheme(theme) {
+ if (!VALID_THEMES.includes(theme)) theme = 'dark';
localStorage.setItem('labcharts-theme', theme);
- if (theme === 'light') document.documentElement.dataset.theme = 'light';
- else delete document.documentElement.dataset.theme;
+ if (theme === 'dark') delete document.documentElement.dataset.theme;
+ else document.documentElement.dataset.theme = theme;
const meta = document.querySelector('meta[name="theme-color"]');
- if (meta) meta.content = theme === 'light' ? '#ffffff' : '#1a1d27';
+ if (meta) meta.content = theme === 'light' ? '#ffffff' : '#0a0a12';
}
export function toggleTheme() {
- setTheme(getTheme() === 'dark' ? 'light' : 'dark');
+ const current = getTheme();
+ setTheme(current === 'light' ? 'dark' : 'light');
const activeNav = document.querySelector('.nav-item.active');
const activeCat = activeNav ? activeNav.dataset.category : 'dashboard';
window.destroyAllCharts();
@@ -66,11 +82,11 @@ export function getChartColors() {
tooltipBody: g('--text-secondary'), tooltipBorder: g('--border'),
tickColor: g('--text-muted'), gridColor: g('--chart-grid'),
legendColor: g('--text-secondary'), lineColor: g('--accent'),
- lineFill: getTheme() === 'light' ? 'rgba(59,124,245,0.1)' : 'rgba(79,140,255,0.1)',
+ lineFill: g('--accent-fill') || 'color-mix(in srgb, var(--accent) 10%, transparent)',
canvasTooltipBg: g('--chart-tooltip-bg'), canvasTooltipText: g('--text-primary'),
chronoLineColor: g('--text-muted'),
green: g('--green'), red: g('--red'), yellow: g('--yellow'),
};
}
-Object.assign(window, { getTheme, setTheme, toggleTheme, getTimeFormat, setTimeFormat, formatTime, parseTimeInput, getChartColors });
+Object.assign(window, { getTheme, setTheme, toggleTheme, getTimeFormat, setTimeFormat, formatTime, parseTimeInput, getChartColors, THEMES });
diff --git a/js/views.js b/js/views.js
index 84316ffd..5528fd4a 100644
--- a/js/views.js
+++ b/js/views.js
@@ -2,14 +2,15 @@
import { state } from './state.js';
import { CORRELATION_PRESETS, CHIP_COLORS, trackUsage, UNIT_CONVERSIONS, getAlternateUnit, convertUserInputToSI } from './schema.js';
-import { escapeHTML, getStatus, getRangePosition, formatValue, getTrend, showNotification, showConfirmDialog, showPromptDialog, hasCardContent, formatDate, safeMarkerId } from './utils.js';
+import { escapeHTML, escapeAttr, getStatus, getRangePosition, formatValue, getTrend, showNotification, showConfirmDialog, showPromptDialog, hasCardContent, formatDate, safeMarkerId } from './utils.js';
import { getChartColors } from './theme.js';
import { getActiveData, filterDatesByRange, destroyAllCharts, getEffectiveRange, getEffectiveRangeForDate, getLatestValueIndex, getAllFlaggedMarkers, statusIcon, detectTrendAlerts, getKeyTrendMarkers, getFocusCardFingerprint, saveImportedData, recalculateHOMAIR, updateHeaderDates, renderDateRangeFilter, renderChartLayersDropdown, convertDisplayToSI } from './data.js';
-import { profileStorageKey } from './profile.js';
+import { profileStorageKey, getProfiles } from './profile.js';
import { createLineChart, getMarkerDescription, getNotesForChart, getSupplementsForChart, refBandPlugin, noteAnnotationPlugin, supplementBarPlugin } from './charts.js';
import { renderSupplementsSection } from './supplements.js';
import { renderWearableStrip } from './wearables.js';
-import { renderGeneticsSection } from './dna.js';
+import { canonicalMetric, metricsForSources } from './wearable-adapters.js';
+import { ensureSNPTable, findGenotypeInfo, renderGeneticsSection } from './dna.js';
import { renderMenstrualCycleSection } from './cycle.js';
import { renderProfileContextCards, renderInterpretiveLensSection, loadContextHealthDots, closeSuggestionsOnClickOutside } from './context-cards.js';
import { callClaudeAPI, hasAIProvider, isAIPaused, getAIProvider, getActiveModelId } from './api.js';
@@ -19,12 +20,34 @@ import { hasLens, queryLens } from './lens.js';
import { applyInlineMarkdown } from './markdown.js';
function markerHasData(m) { return m.values?.some(v => v !== null) ?? false; }
+function setDetailModalShell(...classes) {
+ const modal = document.getElementById('detail-modal');
+ if (!modal) return null;
+ modal.className = ['modal', ...classes.filter(Boolean)].join(' ');
+ return modal;
+}
// ═══════════════════════════════════════════════
// NAVIGATE (router)
// ═══════════════════════════════════════════════
export function navigate(category, data) {
+ category = category || 'dashboard';
+ const dashboardLens = category === 'labs' || category === 'genome' || category === 'body';
+ const routeCategory = dashboardLens ? 'dashboard' : category;
+ const activeCategory = category === 'labs' ? 'dashboard' : category;
+ if (category === 'insight') {
+ document.querySelectorAll(".nav-item").forEach(el => {
+ const isActive = el.dataset.category === 'insight';
+ el.classList.toggle("active", isActive);
+ el.classList.toggle("is-active", isActive);
+ });
+ if (window.closeMobileSidebar) window.closeMobileSidebar();
+ if (window.syncImportStatusFab) window.syncImportStatusFab();
+ if (window.openChatPanel) window.openChatPanel();
+ return;
+ }
+
// Detect "re-render in place" (callsite is requesting a refresh of the
// current view, not a real navigation). On in-place re-renders we use
// ELEMENT-ANCHOR scroll preservation, not pixel-based: capture the
@@ -34,7 +57,7 @@ export function navigate(category, data) {
// when the new layout has different content heights above the user's
// viewport — they'd see a jump even though scrollY was technically
// preserved.
- const sameView = category === state.currentView;
+ const sameView = category === state.currentView && !dashboardLens;
let anchor = null;
// Track whether the caller explicitly requested an anchor — even if
// the element isn't found, an explicit request means "don't fall
@@ -67,18 +90,29 @@ export function navigate(category, data) {
}
}
document.querySelectorAll(".nav-item").forEach(el => {
- el.classList.toggle("active", el.dataset.category === category);
+ const isActive = el.dataset.category === activeCategory;
+ el.classList.toggle("active", isActive);
+ el.classList.toggle("is-active", isActive);
});
// Close mobile sidebar on navigation
if (window.closeMobileSidebar) window.closeMobileSidebar();
+ if (routeCategory !== "dashboard" && typeof document !== 'undefined') {
+ document.body.classList.remove('mobile-dashboard-active');
+ }
if (window.syncImportStatusFab) window.syncImportStatusFab();
destroyAllCharts();
- if (category === "dashboard") showDashboard(data);
- else if (category === "correlations") showCorrelations(data);
- else if (category === "compare") showCompare(data);
- else if (category === "light") showLight(data);
- else showCategory(category, data);
- state.currentView = category;
+ if (category === 'genome' || category === 'body') {
+ _suppressEmptyDashboardChatUntil = Date.now() + 2500;
+ }
+ if (routeCategory === "dashboard") showDashboard(data);
+ else if (routeCategory === "correlations") showCorrelations(data);
+ else if (routeCategory === "compare") showCompare(data);
+ else if (routeCategory === "light") showLight(data);
+ else showCategory(routeCategory, data);
+ state.currentView = routeCategory;
+ if (category === 'genome' || category === 'body') {
+ _scrollDashboardLensIntoView(category);
+ }
if (anchor) {
// Force synchronous layout so getBoundingClientRect is accurate.
@@ -126,6 +160,55 @@ export function navigate(category, data) {
}
}
+function _scrollDashboardLensIntoView(lens) {
+ if (typeof window === 'undefined' || typeof document === 'undefined') return;
+ const configs = {
+ genome: {
+ selectors: [
+ '#mobile-genome-section',
+ '#genetics-section',
+ '.dashboard-widget[data-widget-id="genome"]',
+ '.db-genome-empty',
+ '.genetics-empty-stub',
+ ],
+ afterScroll(target) {
+ const body = target.querySelector?.('.genetics-body') || document.querySelector('#genetics-section .genetics-body');
+ if (body?.classList.contains('hidden') && window.toggleGeneticsCollapse) window.toggleGeneticsCollapse();
+ },
+ fallback() {
+ if (window.openSettingsModal) window.openSettingsModal('data');
+ },
+ },
+ body: {
+ selectors: [
+ '#mobile-body-section',
+ '.dashboard-widget[data-widget-id="wearables"]',
+ '#wearable-strip',
+ '.wearable-strip',
+ '.dashboard-widget[data-widget-id="wearable-strip"]',
+ '.m-wear-empty',
+ ],
+ fallback() {
+ if (window.openSettingsModal) window.openSettingsModal('wearables');
+ },
+ },
+ };
+ const config = configs[lens];
+ if (!config) return;
+ setTimeout(() => {
+ const target = config.selectors
+ .map(selector => document.querySelector(selector))
+ .find(Boolean);
+ if (!target) {
+ config.fallback();
+ return;
+ }
+ const y = target.getBoundingClientRect().top + window.scrollY - 60;
+ window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' });
+ config.afterScroll?.(target);
+ }, 80);
+}
+
// Monotonic counter for in-flight anchor-restore loops. Each navigate
// captures a new token; older loops compare and bail when the user
// has moved on.
@@ -134,6 +217,7 @@ let _navAnchorToken = 0;
// reuse the original captured viewportTop instead of re-capturing AFTER
// the jump that the original was trying to prevent.
let _activeAnchor = null;
+let _suppressEmptyDashboardChatUntil = 0;
// Capture identity + viewport position of the most reasonable scroll
// anchor for the current interaction. Priority:
@@ -2693,6 +2777,1268 @@ function getSunCoordsHint() {
return '';
}
+// ═══════════════════════════════════════════════
+// DASHBOARD WIDGETS
+// ═══════════════════════════════════════════════
+
+let _dashboardOrganizeMode = false;
+let _draggingDashboardWidgetId = null;
+
+const DASHBOARD_WIDGETS_VERSION = 5;
+const DASHBOARD_WIDGETS = [
+ { id: 'bio-age', title: 'Biological Age', description: 'Age-derived biological readout', size: 'half', render: renderDashboardBioAgeWidget },
+ { id: 'focus', title: 'Current Focus', description: 'One synthesized read on the latest data', size: 'third', render: () => renderFocusCard() },
+ { id: 'spotlight', title: 'Marker Spotlight', description: 'Highest-priority current marker', size: 'half', render: renderDashboardSpotlightWidget },
+ { id: 'wearables', title: 'Wearables Today', description: 'Compact body signal tiles', size: 'half', render: renderDashboardWearableTilesWidget },
+ { id: 'stat-vitd', title: 'Vitamin D', description: 'Quick marker tile', size: 'quarter', render: (ctx) => renderDashboardStatWidget(ctx, 'vitamins', 'vitaminD') },
+ { id: 'stat-hba1c', title: 'HbA1c', description: 'Quick marker tile', size: 'quarter', render: (ctx) => renderDashboardStatWidget(ctx, 'diabetes', 'hba1c') },
+ { id: 'stat-testosterone', title: 'Testosterone', description: 'Quick marker tile', size: 'quarter', render: (ctx) => renderDashboardStatWidget(ctx, 'hormones', 'testosterone') },
+ { id: 'stat-apob', title: 'ApoB', description: 'Quick marker tile', size: 'quarter', render: (ctx) => renderDashboardStatWidget(ctx, 'lipids', 'apoB') },
+ { id: 'markers', title: 'All Biomarkers', description: 'Attention-ranked markers with sparklines', size: 'two-third', render: renderDashboardMarkerListWidget },
+ { id: 'insights', title: 'AI Insights', description: 'Top trend and range reads', size: 'third', render: renderDashboardInsightsListWidget },
+ { id: 'genome', title: 'Imported SNPs', description: 'All DNA calls and import status', size: 'half', render: renderDashboardGenomeWidget },
+ { id: 'alerts', title: 'Trends & Alerts', description: 'Fast changes and critical out-of-range markers', size: 'half', render: renderDashboardAlertsWidget },
+ { id: 'correlation', title: 'Correlations', description: 'Highest linked marker pairs', size: 'half', render: renderDashboardCorrelationWidget },
+ { id: 'lens', title: 'AI Lens', description: 'Interpretive lens and knowledge base', size: 'half', render: () => renderInterpretiveLensSection() },
+ { id: 'light-today', title: 'Light Today', description: 'Sun and light exposure channels', render: () => renderLightTodayStrip() },
+ { id: 'wearable-strip', title: 'Wearable Connections', description: 'Recovery, sleep, HRV, body composition', render: () => renderWearableStrip() },
+ { id: 'profile-context', title: 'Profile Context', description: 'Goals, history, lifestyle, and context cards', render: () => renderProfileContextCards() },
+ { id: 'cycle', title: 'Cycle', description: 'Menstrual cycle context', render: (ctx) => state.profileSex === 'female' ? renderMenstrualCycleSection(ctx.data) : '' },
+ { id: 'supplements', title: 'Supplements', description: 'Supplements and medication timeline', render: () => renderSupplementsSection() },
+ { id: 'key-trends', title: 'Key Trends', description: 'Auto-selected markers from your current range', render: renderDashboardKeyTrendsWidget },
+ { id: 'notes', title: 'Notes', description: 'Timeline notes linked to your data', render: renderDashboardNotesWidget },
+];
+const DASHBOARD_WIDGET_IDS = DASHBOARD_WIDGETS.map(w => w.id);
+const DASHBOARD_WIDGET_DEFAULT_IDS = [
+ 'bio-age',
+ 'focus',
+ 'spotlight',
+ 'wearables',
+ 'light-today',
+ 'stat-vitd',
+ 'stat-hba1c',
+ 'stat-testosterone',
+ 'stat-apob',
+ 'markers',
+ 'insights',
+ 'genome',
+ 'alerts',
+ 'correlation',
+ 'profile-context',
+ 'supplements',
+ 'key-trends',
+];
+
+function dashboardWidgetStorageKey() {
+ return profileStorageKey(state.currentProfile || 'default', `dashboardWidgetsV${DASHBOARD_WIDGETS_VERSION}`);
+}
+
+function getDashboardDefaultWidgetPrefs() {
+ const order = [
+ ...DASHBOARD_WIDGET_DEFAULT_IDS,
+ ...DASHBOARD_WIDGET_IDS.filter(id => !DASHBOARD_WIDGET_DEFAULT_IDS.includes(id)),
+ ].filter(id => DASHBOARD_WIDGET_IDS.includes(id));
+ const hidden = DASHBOARD_WIDGET_IDS.filter(id => !DASHBOARD_WIDGET_DEFAULT_IDS.includes(id));
+ return { order, hidden };
+}
+
+function getDashboardWidgetPrefs() {
+ const fallback = getDashboardDefaultWidgetPrefs();
+ try {
+ const raw = JSON.parse(localStorage.getItem(dashboardWidgetStorageKey()));
+ if (!raw || !Array.isArray(raw.order) || !Array.isArray(raw.hidden)) return fallback;
+ const order = raw.order.filter(id => DASHBOARD_WIDGET_IDS.includes(id));
+ for (const id of DASHBOARD_WIDGET_IDS) if (!order.includes(id)) order.push(id);
+ return {
+ order,
+ hidden: raw.hidden.filter(id => DASHBOARD_WIDGET_IDS.includes(id)),
+ };
+ } catch (e) {
+ return fallback;
+ }
+}
+
+function saveDashboardWidgetPrefs(prefs) {
+ const order = (prefs.order || []).filter(id => DASHBOARD_WIDGET_IDS.includes(id));
+ for (const id of DASHBOARD_WIDGET_IDS) if (!order.includes(id)) order.push(id);
+ const hidden = [...new Set(prefs.hidden || [])].filter(id => DASHBOARD_WIDGET_IDS.includes(id));
+ localStorage.setItem(dashboardWidgetStorageKey(), JSON.stringify({ order, hidden }));
+}
+
+function buildDashboardWidgetContext(data) {
+ const filteredData = filterDatesByRange(data);
+ const keyMarkers = getKeyTrendMarkers(filteredData);
+ const trendAlerts = detectTrendAlerts(filteredData);
+ const trendMarkerIds = new Set(trendAlerts.map(a => a.id));
+ const allFlags = getAllFlaggedMarkers(data);
+ const criticalFlags = allFlags.filter(f => {
+ if (trendMarkerIds.has(f.id)) return false;
+ const refRange = f.refMax - f.refMin;
+ if (refRange <= 0 || f.refMin == null || f.refMax == null) return false;
+ const distance = f.status === 'high' ? (f.rawValue - f.refMax) : (f.refMin - f.rawValue);
+ return distance > refRange * 0.5;
+ });
+ return { data, filteredData, keyMarkers, trendAlerts, criticalFlags };
+}
+
+function getOrderedDashboardWidgets(prefs = getDashboardWidgetPrefs()) {
+ const byId = new Map(DASHBOARD_WIDGETS.map(w => [w.id, w]));
+ return prefs.order.map(id => byId.get(id)).filter(Boolean);
+}
+
+function getDashboardProfileName() {
+ const profile = getMobileDashboardProfile();
+ const name = getMobileGreetingName(profile);
+ return name === 'there' ? 'Dashboard' : name;
+}
+
+function getDashboardPanelCount(data) {
+ return Object.values(data.categories || {}).filter(cat => {
+ if (cat.singlePoint && cat.singleDate) return true;
+ return Object.values(cat.markers || {}).some(markerHasData);
+ }).length;
+}
+
+function getDashboardMonthSpan(data) {
+ const dates = (data.dates || []).filter(Boolean);
+ if (dates.length < 2) return '';
+ const first = new Date(dates[0] + 'T00:00:00');
+ const last = new Date(dates[dates.length - 1] + 'T00:00:00');
+ if (Number.isNaN(first.getTime()) || Number.isNaN(last.getTime())) return '';
+ const months = Math.max(1, Math.round((last - first) / (1000 * 60 * 60 * 24 * 30.4375)));
+ return `${months} month${months === 1 ? '' : 's'}`;
+}
+
+function renderDashboardGreeting(ctx, title, visibleCount) {
+ const organizeLabel = _dashboardOrganizeMode ? 'Done' : 'Customize';
+ const counts = getMobileDashboardCounts(ctx.data);
+ const panelCount = getDashboardPanelCount(ctx.data);
+ const span = getDashboardMonthSpan(ctx.data);
+ const parts = [
+ `${counts.inRange} of ${counts.markerCount || 0} markers in range`,
+ counts.latestDate ? `last draw ${formatDate(counts.latestDate, 'short')}` : '',
+ `${panelCount} panel${panelCount === 1 ? '' : 's'}${span ? ` across ${span}` : ''}`,
+ `${visibleCount} widget${visibleCount === 1 ? '' : 's'} active`,
+ ].filter(Boolean);
+ return `})
`;
+ }
+ const color = window.getAvatarColor ? window.getAvatarColor(profile?.id || 'default') : 'var(--accent)';
+ return `${escapeHTML(name[0]?.toUpperCase() || '?')}`;
+}
+
+function getMobileDashboardCounts(data) {
+ let markerCount = 0;
+ let inRange = 0;
+ let flagged = 0;
+ for (const cat of Object.values(data.categories || {})) {
+ for (const marker of Object.values(cat.markers || {})) {
+ if (!markerHasData(marker)) continue;
+ markerCount++;
+ const idx = getLatestValueIndex(marker.values || []);
+ if (idx < 0) continue;
+ const value = marker.values[idx];
+ const range = getEffectiveRangeForDate(marker, idx);
+ const status = getStatus(value, range.min, range.max);
+ if (status === 'normal') inRange++;
+ else if (status === 'high' || status === 'low') flagged++;
+ }
+ }
+ const latestDate = data.dates?.[data.dates.length - 1] || '';
+ return { markerCount, inRange, flagged, latestDate };
+}
+
+function mobileStatusLabel(status) {
+ if (status === 'normal') return 'In range';
+ if (status === 'high') return 'High';
+ if (status === 'low') return 'Low';
+ return 'No value';
+}
+
+function mobileStatusTone(status) {
+ if (status === 'normal') return 'good';
+ if (status === 'high' || status === 'low') return 'alert';
+ return 'muted';
+}
+
+function getMobileMarkerSummary(data, catKey, markerKey) {
+ const id = `${catKey}_${markerKey}`;
+ if (!safeMarkerId(id)) return null;
+ const category = data.categories?.[catKey];
+ const marker = category?.markers?.[markerKey];
+ if (!marker || !markerHasData(marker)) return null;
+ const latestIdx = getLatestValueIndex(marker.values || []);
+ if (latestIdx < 0) return null;
+ const value = marker.values[latestIdx];
+ const range = getEffectiveRangeForDate(marker, latestIdx);
+ const status = getStatus(value, range.min, range.max);
+ const trend = getTrend(marker.values || [], range.min, range.max);
+ const labelSource = marker.singlePoint ? [marker.singleDateLabel || 'Latest'] : (data.dateLabels || data.dates || []);
+ state.markerRegistry[id] = marker;
+ return {
+ id,
+ name: marker.name || markerKey,
+ category: category.label || catKey,
+ value: formatValue(value),
+ unit: marker.unit || '',
+ date: labelSource[latestIdx] || 'Latest',
+ status,
+ statusLabel: mobileStatusLabel(status),
+ tone: mobileStatusTone(status),
+ trend,
+ values: marker.values || [],
+ };
+}
+
+function getMobileDashboardMarkers(ctx) {
+ const seen = new Set();
+ const summaries = [];
+ const add = (catKey, markerKey, sourceData = ctx.filteredData) => {
+ const id = `${catKey}_${markerKey}`;
+ if (seen.has(id)) return;
+ const summary = getMobileMarkerSummary(sourceData, catKey, markerKey)
+ || getMobileMarkerSummary(ctx.data, catKey, markerKey);
+ if (!summary) return;
+ seen.add(id);
+ summaries.push(summary);
+ };
+
+ for (const km of ctx.keyMarkers || []) add(km.cat, km.key);
+ for (const alert of ctx.trendAlerts || []) {
+ const idx = alert.id.indexOf('_');
+ if (idx > 0) add(alert.id.slice(0, idx), alert.id.slice(idx + 1));
+ }
+ for (const flag of getAllFlaggedMarkers(ctx.data).slice(0, 12)) {
+ add(flag.categoryKey, flag.markerKey, ctx.data);
+ }
+ for (const [catKey, category] of Object.entries(ctx.filteredData.categories || {})) {
+ for (const markerKey of Object.keys(category.markers || {})) add(catKey, markerKey);
+ if (summaries.length >= 10) break;
+ }
+ return summaries.slice(0, 10);
+}
+
+function renderMobileSparkline(values, status) {
+ const points = (values || []).filter(v => v !== null && Number.isFinite(Number(v))).slice(-7).map(Number);
+ if (points.length < 2) return ``;
+ const min = Math.min(...points);
+ const max = Math.max(...points);
+ const span = max - min || 1;
+ const coords = points.map((value, index) => {
+ const x = points.length === 1 ? 50 : (index / (points.length - 1)) * 100;
+ const y = 28 - ((value - min) / span) * 24;
+ return `${x.toFixed(1)},${y.toFixed(1)}`;
+ }).join(' ');
+ return ``;
+}
+
+function renderMobileStatCard(item) {
+ if (item.type === 'summary') {
+ return ``;
- // Drop zone hidden element for drag-drop + file input (no visible space on dashboard)
- html += ``;
-
- // ── 2. Onboarding Banner (Step 2) ──
- html += renderOnboardingBanner();
- html += renderAIConnectionReminder();
-
- // Knowledge Base is now discoverable via the dashboard CTA pill
- // ("Connect a knowledge base") and lives in its own dedicated modal —
- // see openKnowledgeBaseModal() in lens.js. No banner needed here.
-
- // ── 3. Interpretive Lens ──
- html += renderInterpretiveLensSection();
-
- // ── 3b. Focus Card (always render if data exists — shows cached insight even when AI is paused) ──
- html += renderFocusCard();
-
- // ── 3b1. Light Today strip (Light & Sun lens — appears once sessions exist or in solar windows) ──
- html += renderLightTodayStrip();
-
- // ── 3c. Wearable strip (Oura · Withings · Ultrahuman · WHOOP · Fitbit · Apple Health) ──
- html += renderWearableStrip();
-
- // ── 4. Profile Context Cards ──
- html += renderProfileContextCards();
-
- // ── 5. Menstrual Cycle (female only) ──
- if (state.profileSex === 'female') html += renderMenstrualCycleSection(data);
-
- // ── 6. Supplements & Medications ──
- html += renderSupplementsSection();
-
- // ── 7. Key Trends ──
- const filteredData = filterDatesByRange(data);
- html += ``;
+ if (isMobileDashboardViewport()) {
+ renderMobileDashboard(data, { resetScroll: !wasMobileDashboardActive });
+ return;
}
- // ── 9. Notes (bottom) ──
- const hasNotes = state.importedData.notes && state.importedData.notes.length > 0;
- {
- const noteCount = (state.importedData.notes || []).length;
- const noteBadge = noteCount > 0 ? ` (${noteCount})` : '';
- html += `
@@ -86,9 +239,16 @@ export function openSettingsModal(tab) {
-
-
-
+
+ ${THEMES.map(t => `
+
+ `).join('')}
@@ -238,6 +398,8 @@ export function openSettingsModal(tab) {
+
${renderMessengerSection()}
+
+
`;
+}
+
+function renderDashboardWidget(entry, prefs, index, visibleEntries) {
+ const { def, body } = entry;
+ const isHidden = prefs.hidden.includes(def.id);
+ if (isHidden || (!body && !_dashboardOrganizeMode)) return '';
+ const canMoveUp = index > 0;
+ const canMoveDown = index < visibleEntries.length - 1;
+ const controls = _dashboardOrganizeMode ? `` : '';
+ return ``;
+}
+
+function getDashboardMarkerByPath(data, catKey, markerKey) {
+ const id = `${catKey}_${markerKey}`;
+ if (!safeMarkerId(id)) return null;
+ const category = data.categories?.[catKey];
+ const marker = category?.markers?.[markerKey];
+ if (!category || !marker || !markerHasData(marker)) return null;
+ const latestIdx = getLatestValueIndex(marker.values || []);
+ if (latestIdx < 0) return null;
+ const range = getEffectiveRangeForDate(marker, latestIdx);
+ const value = marker.values[latestIdx];
+ const status = getStatus(value, range.min, range.max);
+ const trend = getTrend(marker.values || [], range.min, range.max);
+ state.markerRegistry[id] = marker;
+ return { id, category, marker, latestIdx, range, value, status, trend };
+}
+
+function getDashboardAge() {
+ if (!state.profileDob) return null;
+ const dob = new Date(state.profileDob);
+ if (Number.isNaN(dob.getTime())) return null;
+ return Math.floor((Date.now() - dob.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
+}
+
+function getDashboardBioAgeMarker(ctx) {
+ const paths = [
+ ['ratios', 'bioAge'],
+ ['specialty', 'glycanAge'],
+ ['ratios', 'phenoAge'],
+ ['ratios', 'bortzAge'],
+ ];
+ for (const [cat, key] of paths) {
+ const hit = getDashboardMarkerByPath(ctx.data, cat, key);
+ if (hit) return hit;
+ }
+ return null;
+}
+
+function renderDashboardBioAgeWidget(ctx) {
+ const hit = getDashboardBioAgeMarker(ctx);
+ const age = getDashboardAge();
+ const value = hit ? Number(hit.value) : null;
+ const display = Number.isFinite(value) ? value.toFixed(1) : (age != null ? String(age) : '—');
+ const delta = Number.isFinite(value) && age != null ? value - age : null;
+ const deltaText = delta == null ? 'Chronological comparison unavailable'
+ : `${delta >= 0 ? '+' : ''}${delta.toFixed(1)} yr vs chronological`;
+ const pheno = getDashboardMarkerByPath(ctx.data, 'ratios', 'phenoAge');
+ const bortz = getDashboardMarkerByPath(ctx.data, 'ratios', 'bortzAge');
+ const pct = Number.isFinite(value) ? Math.max(4, Math.min(100, (value / 70) * 100)) : 35;
+ const open = hit ? ` onclick="window.showDetailModal('${hit.id}')"` : '';
+ return `
+
+ ${escapeHTML(title)}
+ Hey ${escapeHTML(getDashboardProfileName())}.
+${parts.map(escapeHTML).join(' · ')}
+
+
+
+
+
+
`;
+}
+
+function renderDashboardMiniSparkline(values, status, width = 120, height = 30) {
+ const points = (values || []).filter(v => v !== null && Number.isFinite(Number(v))).slice(-10).map(Number);
+ if (points.length < 2) return ``;
+ const min = Math.min(...points);
+ const max = Math.max(...points);
+ const span = max - min || 1;
+ const coords = points.map((value, index) => {
+ const x = points.length === 1 ? width / 2 : (index / (points.length - 1)) * width;
+ const y = height - 2 - ((value - min) / span) * (height - 5);
+ return `${x.toFixed(1)},${y.toFixed(1)}`;
+ }).join(' ');
+ return ``;
+}
+
+function renderDashboardStatWidget(ctx, catKey, markerKey) {
+ const hit = getDashboardMarkerByPath(ctx.data, catKey, markerKey);
+ if (!hit) return '';
+ return ``;
+}
+
+function getDashboardSpotlight(ctx) {
+ const firstAlert = ctx.trendAlerts?.[0];
+ if (firstAlert?.id) {
+ const idx = firstAlert.id.indexOf('_');
+ if (idx > 0) {
+ const hit = getDashboardMarkerByPath(ctx.data, firstAlert.id.slice(0, idx), firstAlert.id.slice(idx + 1));
+ if (hit) return hit;
+ }
+ }
+ for (const km of ctx.keyMarkers || []) {
+ const hit = getDashboardMarkerByPath(ctx.filteredData, km.cat, km.key) || getDashboardMarkerByPath(ctx.data, km.cat, km.key);
+ if (hit) return hit;
+ }
+ return null;
+}
+
+function renderDashboardSpotlightWidget(ctx) {
+ const hit = getDashboardSpotlight(ctx);
+ if (!hit) return '';
+ const range = getEffectiveRange(hit.marker);
+ const rangeText = range.min != null || range.max != null
+ ? `Range ${range.min != null ? formatValue(range.min) : '—'}–${range.max != null ? formatValue(range.max) : '—'} ${hit.marker.unit || ''}`
+ : 'No active range';
+ return `
+
+ ${escapeHTML(display)}
+
+ ${escapeHTML(hit?.marker?.name || 'Biological Age')}
+ Chronological: ${age != null ? `${age} yr` : 'not set'}
+ ${escapeHTML(deltaText)}
+
+
+
+ PhenoAge${pheno ? formatValue(pheno.value) : '—'}
+ Bortz Age${bortz ? formatValue(bortz.value) : '—'}
+
+ 03570 yr
+
+
`;
+}
+
+function renderDashboardMarkerRow(marker) {
+ return ``;
+}
+
+function renderDashboardMarkerListWidget(ctx) {
+ const markers = getMobileDashboardMarkers(ctx).slice(0, 10);
+ if (!markers.length) return '';
+ return `
+
+ ${renderDashboardMiniSparkline(hit.marker.values, hit.status, 420, 150)}
+
+
+
+ ${escapeHTML(hit.marker.name)}
+
+ ${escapeHTML(formatValue(hit.value))}${escapeHTML(hit.marker.unit || '')}
+
+
`;
+}
+
+function renderDashboardInsightsListWidget(ctx) {
+ const markers = getMobileDashboardMarkers(ctx);
+ const insights = getMobileDashboardInsights(ctx, markers);
+ if (!insights.length) return '';
+ return `MarkerTrendLatestDelta
+ ${markers.map(renderDashboardMarkerRow).join('')}
+ ${insights.map(insight => {
+ const open = insight.id && safeMarkerId(insight.id) ? ` onclick="window.showDetailModal('${insight.id}')"` : '';
+ return ``;
+ }).join('')}
`;
+}
+
+function renderDashboardWearableTilesWidget() {
+ const tiles = getMobileWearableTiles();
+ if (!tiles.length) return '';
+ return `${tiles.map(tile => ``).join('')}
`;
+}
+
+function getDashboardGenomeImpact(stored, entry) {
+ const info = entry ? findGenotypeInfo(entry, stored?.genotype) : null;
+ const effect = info?.effect || stored?.effect || 'info';
+ const valence = info?.valence || stored?.valence || 'risk';
+ const note = info?.note || stored?.note || '';
+ if (valence === 'protective') return { label: 'beneficial', rank: 3, note };
+ if (valence === 'neutral') return { label: 'informational', rank: 4, note };
+ if (effect === 'significant') return { label: 'significant', rank: 0, note };
+ if (effect === 'moderate') return { label: 'moderate', rank: 1, note };
+ if (effect === 'mild') return { label: 'mild', rank: 2, note };
+ if (effect === 'none') return { label: 'normal', rank: 5, note };
+ return { label: effect || 'info', rank: 6, note };
+}
+
+function renderDashboardGenomeWidget() {
+ const genetics = state.importedData?.genetics;
+ const snps = genetics?.snps || {};
+ const apoe = genetics?.apoe;
+ const snpTable = typeof window !== 'undefined' ? window._snpTableCache : null;
+ const snpCount = Object.keys(snps).length;
+ if (snpCount && !snpTable) {
+ ensureSNPTable()?.then(() => {
+ if (state.currentView === 'dashboard' && window.navigate) window.navigate('dashboard');
+ }).catch(() => {});
+ }
+ const findings = Object.entries(snps)
+ .map(([rsid, stored]) => {
+ const entry = snpTable?.[rsid];
+ const impact = getDashboardGenomeImpact(stored, entry);
+ return {
+ rsid,
+ ...stored,
+ impactLabel: impact.label,
+ impactRank: impact.rank,
+ note: impact.note || stored.note || '',
+ };
+ })
+ .filter(f => f.gene || f.variant || f.genotype)
+ .sort((a, b) => (a.impactRank - b.impactRank) || String(a.gene || a.rsid).localeCompare(String(b.gene || b.rsid)) || String(a.variant || '').localeCompare(String(b.variant || '')));
+ if (!findings.length && !apoe && !genetics?.mtdna) {
+ return ``;
+ }
+ const rows = findings.map(f => `
+
+ ${escapeHTML(f.gene || f.rsid)}
+ ${escapeHTML(f.variant || f.rsid)}
+
+ ${escapeHTML(f.impactLabel || 'info')}
+ ${escapeHTML(f.genotype || '—')}
+ ${f.note ? `${escapeHTML(f.note)}` : ''}
+
`).join('');
+ const meta = [
+ snpCount ? `${snpCount} imported SNP${snpCount === 1 ? '' : 's'}` : '',
+ genetics?.source || '',
+ genetics?.importDate || '',
+ ].filter(Boolean).join(' · ');
+ return `
+ ${meta ? `
`;
+}
+
+function dashboardPearson(aValues, bValues) {
+ const xs = [];
+ const ys = [];
+ const n = Math.min(aValues?.length || 0, bValues?.length || 0);
+ for (let i = 0; i < n; i++) {
+ const x = Number(aValues[i]);
+ const y = Number(bValues[i]);
+ if (Number.isFinite(x) && Number.isFinite(y)) {
+ xs.push(x);
+ ys.push(y);
+ }
+ }
+ if (xs.length < 3) return null;
+ const meanX = xs.reduce((sum, value) => sum + value, 0) / xs.length;
+ const meanY = ys.reduce((sum, value) => sum + value, 0) / ys.length;
+ let num = 0;
+ let denX = 0;
+ let denY = 0;
+ for (let i = 0; i < xs.length; i++) {
+ const dx = xs[i] - meanX;
+ const dy = ys[i] - meanY;
+ num += dx * dy;
+ denX += dx * dx;
+ denY += dy * dy;
+ }
+ const den = Math.sqrt(denX * denY);
+ return den ? num / den : null;
+}
+
+function getDashboardCorrelationPairs(ctx) {
+ const target = getDashboardMarkerByPath(ctx.data, 'lipids', 'apoB')
+ || getDashboardMarkerByPath(ctx.data, 'lipids', 'ldl')
+ || getDashboardMarkerByPath(ctx.data, 'diabetes', 'hba1c')
+ || getDashboardSpotlight(ctx);
+ if (!target?.marker?.values) return null;
+ const pairs = [];
+ for (const [catKey, category] of Object.entries(ctx.data.categories || {})) {
+ for (const [markerKey, marker] of Object.entries(category.markers || {})) {
+ const id = `${catKey}_${markerKey}`;
+ if (id === target.id || !safeMarkerId(id) || !markerHasData(marker)) continue;
+ const r = dashboardPearson(target.marker.values || [], marker.values || []);
+ if (r == null || !Number.isFinite(r)) continue;
+ const latestIdx = getLatestValueIndex(marker.values || []);
+ state.markerRegistry[id] = marker;
+ pairs.push({
+ id,
+ name: marker.name || markerKey,
+ category: category.label || catKey,
+ value: latestIdx >= 0 ? formatValue(marker.values[latestIdx]) : '—',
+ unit: marker.unit || '',
+ r,
+ });
+ }
+ }
+ pairs.sort((a, b) => Math.abs(b.r) - Math.abs(a.r));
+ return { target, pairs: pairs.slice(0, 12) };
+}
+
+function renderDashboardCorrelationWidget(ctx) {
+ const result = getDashboardCorrelationPairs(ctx);
+ if (!result?.pairs?.length) {
+ return ``;
+ }
+ return ``;
+}
+
+function renderDashboardWidgets(ctx, title) {
+ const prefs = getDashboardWidgetPrefs();
+ const ordered = getOrderedDashboardWidgets(prefs);
+ const visibleEntries = ordered
+ .map(def => ({ def, body: def.render(ctx) || '' }))
+ .filter(entry => !prefs.hidden.includes(entry.def.id) && (entry.body || _dashboardOrganizeMode));
+ let html = renderDashboardGreeting(ctx, title, visibleEntries.length);
+ html += ``;
+ html += renderOnboardingBanner();
+ html += renderAIConnectionReminder();
+ html += ``;
+ if (_dashboardOrganizeMode) {
+ html += ``;
+ }
+ return html;
+}
+
+function renderDashboardKeyTrendsWidget(ctx) {
+ const { filteredData, keyMarkers } = ctx;
+ let html = ``;
+ if (keyMarkers.length > 0) {
+ html += `${escapeHTML(meta)}
` : ''}
+ ${apoe ? `APOEHaplotypecontext${escapeHTML(apoe)}
` : ''}
+ ${genetics?.mtdna ? `mtDNA${escapeHTML(genetics.mtdna.coupling?.shortLabel || 'Haplogroup')}lineage${escapeHTML(genetics.mtdna.haplogroup)}
` : ''}
+ ${rows}
+ `;
+ for (const km of keyMarkers) {
+ const marker = filteredData.categories[km.cat].markers[km.key];
+ html += renderChartCard(km.cat + "_" + km.key, marker, filteredData.dateLabels);
+ }
+ html += `
`;
+ } else {
+ html += ``;
+ }
+ return html;
+}
+
+function renderDashboardAlertsWidget(ctx) {
+ const { trendAlerts, criticalFlags } = ctx;
+ const totalAttention = trendAlerts.length + criticalFlags.length;
+ if (totalAttention === 0) return '';
+ let html = ``;
+ return html;
+}
+
+function renderDashboardNotesWidget() {
+ const hasNotes = state.importedData.notes && state.importedData.notes.length > 0;
+ let html = ``;
+ return html;
+}
+
+function rerenderDashboardFromWidgetChange() {
+ window.navigate?.('dashboard');
+}
+
+export function toggleDashboardOrganizeMode(force) {
+ _dashboardOrganizeMode = typeof force === 'boolean' ? force : !_dashboardOrganizeMode;
+ rerenderDashboardFromWidgetChange();
+}
+
+export function moveDashboardWidget(id, direction) {
+ const prefs = getDashboardWidgetPrefs();
+ const visible = prefs.order.filter(widgetId => !prefs.hidden.includes(widgetId));
+ const visibleIndex = visible.indexOf(id);
+ const targetVisibleId = visible[visibleIndex + direction];
+ if (visibleIndex < 0 || !targetVisibleId) return;
+ const from = prefs.order.indexOf(id);
+ const to = prefs.order.indexOf(targetVisibleId);
+ prefs.order.splice(from, 1);
+ prefs.order.splice(to, 0, id);
+ saveDashboardWidgetPrefs(prefs);
+ rerenderDashboardFromWidgetChange();
+}
+
+export function hideDashboardWidget(id) {
+ const prefs = getDashboardWidgetPrefs();
+ if (!prefs.hidden.includes(id)) prefs.hidden.push(id);
+ saveDashboardWidgetPrefs(prefs);
+ rerenderDashboardFromWidgetChange();
+}
+
+export function showDashboardWidget(id) {
+ const prefs = getDashboardWidgetPrefs();
+ prefs.hidden = prefs.hidden.filter(widgetId => widgetId !== id);
+ if (!prefs.order.includes(id)) prefs.order.push(id);
+ saveDashboardWidgetPrefs(prefs);
+ closeDashboardWidgetPicker();
+ rerenderDashboardFromWidgetChange();
+}
+
+export function resetDashboardWidgets() {
+ localStorage.removeItem(dashboardWidgetStorageKey());
+ _dashboardOrganizeMode = false;
+ rerenderDashboardFromWidgetChange();
+}
+
+export function clearDashboardWidgets() {
+ saveDashboardWidgetPrefs({
+ order: [...DASHBOARD_WIDGET_IDS],
+ hidden: [...DASHBOARD_WIDGET_IDS],
+ });
+ _dashboardOrganizeMode = false;
+ rerenderDashboardFromWidgetChange();
+}
+
+export function openDashboardWidgetPicker() {
+ closeDashboardWidgetPicker();
+ const prefs = getDashboardWidgetPrefs();
+ const hidden = getOrderedDashboardWidgets(prefs).filter(def => prefs.hidden.includes(def.id));
+ const hiddenList = hidden.length ? hidden.map(def => ``).join('') : ``;
+ document.body.insertAdjacentHTML('beforeend', ``);
+}
+
+export function closeDashboardWidgetPicker() {
+ document.getElementById('dashboard-widget-picker-overlay')?.remove();
+}
+
+export function startDashboardWidgetDrag(event, id) {
+ _draggingDashboardWidgetId = id;
+ event.dataTransfer?.setData('text/plain', id);
+ event.dataTransfer?.setDragImage?.(event.currentTarget, 20, 20);
+}
+
+export function allowDashboardWidgetDrop(event) {
+ if (!_dashboardOrganizeMode) return;
+ event.preventDefault();
+}
+
+export function dropDashboardWidget(event, targetId) {
+ if (!_dashboardOrganizeMode) return;
+ event.preventDefault();
+ const sourceId = event.dataTransfer?.getData('text/plain') || _draggingDashboardWidgetId;
+ _draggingDashboardWidgetId = null;
+ if (!sourceId || sourceId === targetId) return;
+ const prefs = getDashboardWidgetPrefs();
+ const from = prefs.order.indexOf(sourceId);
+ const to = prefs.order.indexOf(targetId);
+ if (from < 0 || to < 0) return;
+ prefs.order.splice(from, 1);
+ prefs.order.splice(to, 0, sourceId);
+ saveDashboardWidgetPrefs(prefs);
+ rerenderDashboardFromWidgetChange();
+}
+
+Object.assign(window, {
+ toggleDashboardOrganizeMode,
+ moveDashboardWidget,
+ hideDashboardWidget,
+ showDashboardWidget,
+ resetDashboardWidgets,
+ clearDashboardWidgets,
+ openDashboardWidgetPicker,
+ closeDashboardWidgetPicker,
+ startDashboardWidgetDrag,
+ allowDashboardWidgetDrop,
+ dropDashboardWidget,
+});
+
+// ═══════════════════════════════════════════════
+// MOBILE DASHBOARD
+// ═══════════════════════════════════════════════
+
+const MOBILE_DASHBOARD_QUERY = '(max-width: 799px)';
+let _mobileDashboardScrollHandler = null;
+let _mobileDashboardManualTabLockUntil = 0;
+
+function isMobileDashboardViewport() {
+ return typeof window !== 'undefined'
+ && typeof window.matchMedia === 'function'
+ && window.matchMedia(MOBILE_DASHBOARD_QUERY).matches;
+}
+
+function teardownMobileDashboardScrollSpy() {
+ if (_mobileDashboardScrollHandler && typeof window !== 'undefined') {
+ window.removeEventListener('scroll', _mobileDashboardScrollHandler);
+ }
+ _mobileDashboardScrollHandler = null;
+}
+
+function setupMobileDashboardScrollSpy() {
+ teardownMobileDashboardScrollSpy();
+ if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') return;
+ let ticking = false;
+ const update = () => {
+ if (!document.body.classList.contains('mobile-dashboard-active')) return;
+ if (document.getElementById('chat-panel')?.classList.contains('open')) return;
+ if (document.getElementById('settings-modal-overlay')?.classList.contains('show')) return;
+ if (document.getElementById('client-list-overlay')?.classList.contains('show')) return;
+ const lockRemaining = _mobileDashboardManualTabLockUntil - Date.now();
+ if (lockRemaining > 0) {
+ setTimeout(update, lockRemaining + 20);
+ return;
+ }
+
+ const threshold = window.innerHeight * 0.35;
+ const sections = [
+ { tab: 'labs', el: document.querySelector('.m-greeting') },
+ { tab: 'body', el: document.getElementById('mobile-body-section') },
+ { tab: 'genome', el: document.getElementById('mobile-genome-section') },
+ ].filter(section => section.el);
+
+ let active = 'labs';
+ for (const section of sections) {
+ if (section.el.getBoundingClientRect().top <= threshold) active = section.tab;
+ }
+ mobileDashboardSetTab(active, { fromScroll: true });
+ };
+ _mobileDashboardScrollHandler = () => {
+ if (ticking) return;
+ ticking = true;
+ window.requestAnimationFrame(() => {
+ ticking = false;
+ update();
+ });
+ };
+ window.addEventListener('scroll', _mobileDashboardScrollHandler, { passive: true });
+ setTimeout(update, 0);
+}
+
+if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+ const mobileDashboardMedia = window.matchMedia(MOBILE_DASHBOARD_QUERY);
+ const refreshDashboardForBreakpoint = () => {
+ if (state.currentView === 'dashboard') window.navigate?.('dashboard');
+ };
+ if (typeof mobileDashboardMedia.addEventListener === 'function') {
+ mobileDashboardMedia.addEventListener('change', refreshDashboardForBreakpoint);
+ } else if (typeof mobileDashboardMedia.addListener === 'function') {
+ mobileDashboardMedia.addListener(refreshDashboardForBreakpoint);
+ }
+}
+
+function getMobileDashboardProfile() {
+ const profiles = getProfiles() || [];
+ return profiles.find(p => p.id === state.currentProfile) || profiles[0] || { id: 'default', name: 'Default' };
+}
+
+function getMobileGreetingName(profile) {
+ const name = (profile?.name || 'there').trim();
+ if (!name || name === 'Default') return 'there';
+ return name.split(/\s+/)[0];
+}
+
+function getMobileAvatar(profile) {
+ const name = profile?.name || '?';
+ if (profile?.avatar) {
+ return `
+
`;
+ }
+ return ``;
+}
+
+function getMobileDashboardStats(data, ctx, markers) {
+ const counts = getMobileDashboardCounts(data);
+ const cards = markers.slice(0, 4).map(marker => ({ ...marker, type: 'marker' }));
+ const summaryCards = [
+ { type: 'summary', label: 'Attention', value: String((ctx.trendAlerts?.length || 0) + counts.flagged), meta: 'active flags' },
+ { type: 'summary', label: 'In range', value: `${counts.inRange}/${counts.markerCount || 0}`, meta: 'latest values' },
+ { type: 'summary', label: 'Last labs', value: counts.latestDate ? formatDate(counts.latestDate, 'short') : 'N/A', meta: `${data.dates?.length || 0} dates` },
+ { type: 'summary', label: 'Markers', value: String(counts.markerCount), meta: 'tracked' },
+ ];
+ for (const card of summaryCards) {
+ if (cards.length >= 4) break;
+ cards.push(card);
+ }
+ return cards.slice(0, 4);
+}
+
+function getMobileDashboardInsights(ctx, markers) {
+ const insights = [];
+ for (const flag of ctx.criticalFlags.slice(0, 2)) {
+ const summary = markers.find(m => m.id === flag.id);
+ insights.push({
+ id: flag.id,
+ tone: 'danger',
+ eyebrow: flag.status === 'high' ? 'Critical high' : 'Critical low',
+ title: flag.name,
+ body: `${formatValue(flag.rawValue)} ${flag.unit || ''} is outside the active range.`,
+ meta: summary?.trend?.arrow || summary?.date || '',
+ });
+ }
+ for (const alert of ctx.trendAlerts.slice(0, 3)) {
+ if (insights.length >= 3) break;
+ insights.push({
+ id: alert.id,
+ tone: alert.concern.startsWith('past_') || alert.concern.startsWith('sudden_') ? 'warn' : 'info',
+ eyebrow: 'Trend',
+ title: alert.name,
+ body: alert.concern.replace(/_/g, ' '),
+ meta: (alert.spark || []).join(' -> '),
+ });
+ }
+ if (insights.length === 0) {
+ insights.push({
+ tone: 'good',
+ eyebrow: 'Snapshot',
+ title: 'No urgent trend alerts',
+ body: 'Latest high-priority markers are not showing sudden range breaks.',
+ meta: `${markers.length} markers in the mobile watch list`,
+ });
+ }
+ return insights.slice(0, 3);
+}
+
+function renderMobileInsightCard(insight) {
+ const body = `${escapeHTML(insight.eyebrow)}
+ ${escapeHTML(insight.title)}
+ ${escapeHTML(insight.body)}
+ ${insight.meta ? `${escapeHTML(insight.meta)}` : ''}`;
+ if (insight.id && safeMarkerId(insight.id)) {
+ return ``;
+ }
+ return `${escapeHTML(item.label)}
+ ${escapeHTML(item.value)}
+
+ ${body}
`;
+}
+
+function renderMobileMarkerRow(marker) {
+ return ``;
+}
+
+const MOBILE_WEARABLE_PRIORITY = [
+ 'hrv_rmssd',
+ 'sleep_score',
+ 'readiness_score',
+ 'steps',
+ 'rhr',
+ 'weight',
+ 'body_fat_pct',
+ 'bp_systolic',
+];
+
+function formatMobileWearableValue(metricId, metric, summary) {
+ if (metricId === 'bp_systolic' && summary?.metrics?.bp_diastolic?.latest != null) {
+ return `${formatValue(metric.latest)}/${formatValue(summary.metrics.bp_diastolic.latest)}`;
+ }
+ const value = Number(metric?.latest);
+ if (!Number.isFinite(value)) return '—';
+ if (metricId === 'steps' && Math.abs(value) >= 1000) {
+ return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1).replace(/\.0$/, '')}k`;
+ }
+ return formatValue(value);
+}
+
+function formatMobileWearableDelta(metricId, metric, canon) {
+ const latest = Number(metric?.latest);
+ const baseline = Number(metric?.baseline);
+ if (!Number.isFinite(latest) || !Number.isFinite(baseline) || baseline === 0) return '';
+ if (metricId === 'steps') return '';
+ if (canon?.sub === 'Δ') {
+ const diff = latest - baseline;
+ const arrow = diff > 0.005 ? '↑' : diff < -0.005 ? '↓' : '→';
+ return `${arrow} ${Math.abs(diff).toFixed(2)}${canon.unit || ''}`;
+ }
+ const pct = ((latest - baseline) / baseline) * 100;
+ if (Math.abs(pct) < 0.5) return '→ baseline';
+ const arrow = pct > 0 ? '↑' : '↓';
+ return `${arrow} ${Math.abs(pct).toFixed(0)}%`;
+}
+
+function getMobileWearableTiles() {
+ const summary = state.importedData?.wearableSummary;
+ if (!summary?.metrics || Object.keys(summary.metrics).length === 0) return [];
+ const sourceIds = Object.keys(summary.sources || {});
+ const registryOrder = metricsForSources(sourceIds.length ? sourceIds : Object.keys(summary.metrics || {}));
+ const ordered = [
+ ...MOBILE_WEARABLE_PRIORITY,
+ ...registryOrder,
+ ...Object.keys(summary.metrics || {}),
+ ];
+ const seen = new Set();
+ const tiles = [];
+ for (const metricId of ordered) {
+ if (seen.has(metricId)) continue;
+ seen.add(metricId);
+ if (metricId === 'bp_diastolic' && summary.metrics.bp_systolic) continue;
+ const metric = summary.metrics[metricId];
+ const canon = canonicalMetric(metricId);
+ if (!metric || !canon || metric.latest == null) continue;
+ tiles.push({
+ id: metricId,
+ label: canon.label,
+ value: formatMobileWearableValue(metricId, metric, summary),
+ unit: metricId === 'bp_systolic' ? 'mmHg' : (canon.unit || canon.sub || ''),
+ change: formatMobileWearableDelta(metricId, metric, canon),
+ });
+ if (tiles.length >= 4) break;
+ }
+ return tiles;
+}
+
+function renderMobileWearableTiles(tiles) {
+ if (!tiles.length) {
+ return `
+ Connect body data
+ HRV, sleep, steps, recovery and body composition can sit next to your labs.
+
+
`;
+ }
+ return `
+ ${tiles.map(tile => ``).join('')}
+
`;
+}
+
+function renderMobileSectionHead(title, count, actionLabel = '', action = '') {
+ return `
+
`;
+}
+
+export function mobileDashboardSetTab(tab, { fromScroll = false } = {}) {
+ if (!fromScroll) _mobileDashboardManualTabLockUntil = Date.now() + 600;
+ document.querySelectorAll('.m-tab').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.tab === tab);
+ });
+}
+
+function renderMobileBottomTabs() {
+ return ``;
+}
+
+export function openMobileDashboardSearch() {
+ if (window.toggleMobileSidebar) window.toggleMobileSidebar();
+ setTimeout(() => document.getElementById('sidebar-search')?.focus(), 80);
+}
+
+export function mobileDashboardJump(section) {
+ if (section === 'genome') {
+ const target = document.getElementById('mobile-genome-section') || document.getElementById('genetics-section');
+ if (target) target.scrollIntoView({ behavior: 'auto', block: 'start' });
+ else window.triggerDNAFilePicker?.();
+ return;
+ }
+ if (section === 'body') {
+ const target = document.getElementById('mobile-body-section') || document.querySelector('.wearable-strip');
+ if (target) target.scrollIntoView({ behavior: 'auto', block: 'start' });
+ else window.openSettingsModal?.('wearables');
+ }
+}
+
+function renderMobileDashboard(data, { resetScroll = false } = {}) {
+ const main = document.getElementById("main-content");
+ if (!main) return;
+ const ctx = buildDashboardWidgetContext(data);
+ const profile = getMobileDashboardProfile();
+ const markers = getMobileDashboardMarkers(ctx);
+ const stats = getMobileDashboardStats(data, ctx, markers);
+ const insights = getMobileDashboardInsights(ctx, markers);
+ const lightHtml = renderLightTodayStrip();
+ const wearableTiles = getMobileWearableTiles();
+ const geneticsHtml = renderGeneticsSection();
+ const watchRows = markers.slice(0, 7).map(renderMobileMarkerRow).join('');
+ const firstName = getMobileGreetingName(profile);
+ const counts = getMobileDashboardCounts(data);
+ const greetingSub = [
+ `${counts.markerCount || 0} markers`,
+ counts.latestDate ? `last draw ${formatDate(counts.latestDate, 'short')}` : '',
+ `${data.dates?.length || 0} draw${data.dates?.length === 1 ? '' : 's'}`,
+ ].filter(Boolean).join(' · ');
+
+ document.body.classList.add('mobile-dashboard-active');
+ main.innerHTML = `
+
+ ${escapeHTML(title)}
+ ${count ? `${escapeHTML(count)}` : ''}
+
+ ${actionLabel && action ? `` : ''}
+
+
+
`;
+
+ if (resetScroll && typeof window.scrollTo === 'function') {
+ window.scrollTo(0, 0);
+ }
+ setupDropZone();
+ setupMobileDashboardScrollSpy();
+ loadContextHealthDots();
+ if (window.loadContextCardTips) window.loadContextCardTips();
+ loadCommitHash();
+ if (window.loadCatalog) window.loadCatalog().then(c => { window._cachedCatalog = c; });
+}
+
+Object.assign(window, {
+ openMobileDashboardSearch,
+ mobileDashboardJump,
+ mobileDashboardSetTab,
+});
+
// ═══════════════════════════════════════════════
// DASHBOARD
// ═══════════════════════════════════════════════
@@ -2705,6 +4051,9 @@ export function showDashboard(data) {
if (window.ensureActiveDeviceTicker) try { window.ensureActiveDeviceTicker(); } catch (e) {}
if (!data) data = getActiveData();
const main = document.getElementById("main-content");
+ const wasMobileDashboardActive = document.body.classList.contains('mobile-dashboard-active');
+ teardownMobileDashboardScrollSpy();
+ document.body.classList.remove('mobile-dashboard-active');
const hasData = data.dates.length > 0 || Object.values(data.categories).some(c => c.singlePoint && c.singleDate);
// Show/hide import FAB based on whether dashboard has data
@@ -2792,8 +4141,13 @@ export function showDashboard(data) {
// firing — openChatPanel idempotently re-toggles chat-panel-fullscreen
// from localStorage, which would stomp manual class state set by tests
// (or any other in-flight UI gesture).
- if (state.chatHistory.length === 0) {
+ if (state.chatHistory.length === 0 && Date.now() > _suppressEmptyDashboardChatUntil) {
setTimeout(() => {
+ if (Date.now() <= _suppressEmptyDashboardChatUntil) return;
+ const latestData = getActiveData();
+ const stillEmpty = latestData.dates.length === 0
+ && !Object.values(latestData.categories).some(c => c.singlePoint && c.singleDate);
+ if (!stillEmpty || window._demoLoadingProfileId) return;
if (!document.getElementById('chat-panel')?.classList.contains('open')) {
window.openChatPanel?.();
}
@@ -2802,145 +4156,23 @@ export function showDashboard(data) {
return;
}
- // ── Has data: full dashboard ──
- let html = `
+
+
+
+
+
+
+
+ ${stats.map(renderMobileStatCard).join('')}
+
+
+
+ ${renderMobileSectionHead('Insights', String(insights.length), 'Ask AI', 'window.openChatPanel && window.openChatPanel()')}
+
+
+
+ ${renderMobileSectionHead('Watch list', String(Math.min(markers.length, 7)), 'Explore', "window.navigate('correlations')")}
+
+
+
+ ${renderMobileSectionHead('Today', wearableTiles.length ? `synced body data` : 'not connected', 'Connect', "window.openSettingsModal && window.openSettingsModal('wearables')")}
+ ${renderMobileWearableTiles(wearableTiles)}
+
+
+ ${lightHtml ? `` : ''}
+
+ ${geneticsHtml ? `` : ''}
+
+
+ ${renderMobileBottomTabs()}
+
+ getbased
+ ${escapeHTML(profile?.name || 'Default')}
+
+
+ Hey ${escapeHTML(firstName)}.
+${escapeHTML(greetingSub)}
+ ${insights.map(renderMobileInsightCard).join('')}
+ ${watchRows || '
+ No markers in the current range.
'}Dashboard Overview
-Summary of all results across ${data.dates.length} collection date${data.dates.length !== 1 ? 's' : ''}
-
- ${renderDateRangeFilter()}
- ${renderChartLayersDropdown()}
-
`;
-
- const keyMarkers = getKeyTrendMarkers(filteredData);
- if (keyMarkers.length > 0) {
- html += `Key Trends
-Auto-selected from your data
`;
- for (const km of keyMarkers) {
- const marker = filteredData.categories[km.cat].markers[km.key];
- html += renderChartCard(km.cat + "_" + km.key, marker, filteredData.dateLabels);
- }
- html += `
`;
- }
-
- // ── 7b. Genetics (static data, after dynamic trends) ──
- html += renderGeneticsSection();
-
- // ── 8. Trends & Critical Flags ──
- const trendAlerts = detectTrendAlerts(filteredData);
- const trendMarkerIds = new Set(trendAlerts.map(a => a.id));
- const allFlags = getAllFlaggedMarkers(data);
- // Critical flags always use reference range (not optimal) — critical is a medical concept
- const criticalFlags = allFlags.filter(f => {
- if (trendMarkerIds.has(f.id)) return false;
- const refRange = f.refMax - f.refMin;
- if (refRange <= 0 || f.refMin == null || f.refMax == null) return false;
- const distance = f.status === 'high' ? (f.rawValue - f.refMax) : (f.refMin - f.rawValue);
- return distance > refRange * 0.5;
- });
- const totalAttention = trendAlerts.length + criticalFlags.length;
- if (totalAttention > 0) {
- html += `Trends & Alerts (${totalAttention})
`;
- for (const alert of trendAlerts) {
- const isSudden = alert.concern.startsWith('sudden_');
- const isPast = alert.concern.startsWith('past_');
- const cls = isSudden ? 'trend-alert-sudden' : isPast ? 'trend-alert-danger' : 'trend-alert-warning';
- const arrow = isSudden ? '\u26A1' : alert.direction === 'rising' ? '\u2197' : '\u2198';
- const label = alert.concern === 'sudden_high' ? 'Sudden jump above range'
- : alert.concern === 'sudden_low' ? 'Sudden drop below range'
- : alert.concern === 'past_high' ? 'Above range & rising'
- : alert.concern === 'past_low' ? 'Below range & falling'
- : alert.concern === 'approaching_high' ? 'Approaching upper limit'
- : 'Approaching lower limit';
- html += `
- ${arrow}
-
`;
- }
- for (const f of criticalFlags) {
- const cls = f.status === "high" ? "alert-high" : "alert-low";
- const label = f.status === "high" ? "\u25B2 CRITICAL HIGH" : "\u25BC CRITICAL LOW";
- html += `
-
- ${escapeHTML(alert.name)} ${escapeHTML(alert.category)}
- ${label}
- ${alert.spark.join(' \u2192 ')}
-
- ${label}
- ${escapeHTML(f.name)}
- ${escapeHTML(String(f.value))} ${escapeHTML(f.unit)}
- ${formatValue(f.effectiveMin)} \u2013 ${formatValue(f.effectiveMax)}
`;
- }
- html += `Notes${noteBadge}
`;
- html += ``;
- html += ``;
- if (hasNotes) {
- const notes = state.importedData.notes
- .map((note, i) => ({ note, idx: i }))
- .sort((a, b) => a.note.date.localeCompare(b.note.date));
- for (const { note, idx } of notes) {
- const d = new Date(note.date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
- const preview = escapeHTML(note.text.length > 200 ? note.text.slice(0, 200) + '...' : note.text);
- html += `
`;
- }
+ // ── Has data: full dashboard, rendered through modular widgets ──
+ const dashboardCtx = buildDashboardWidgetContext(data);
+ const dashboardTitle = 'Dashboard Overview';
+ let html = renderDashboardWidgets(dashboardCtx, dashboardTitle);
main.innerHTML = html;
- for (const km of keyMarkers) {
- const marker = filteredData.categories[km.cat].markers[km.key];
- createLineChart(km.cat + "_" + km.key, marker, filteredData.dateLabels, filteredData.dates, filteredData.phaseLabels);
+ for (const km of dashboardCtx.keyMarkers) {
+ const id = km.cat + "_" + km.key;
+ if (!document.getElementById("chart-" + id)) continue;
+ const marker = dashboardCtx.filteredData.categories[km.cat].markers[km.key];
+ createLineChart(id, marker, dashboardCtx.filteredData.dateLabels, dashboardCtx.filteredData.dates, dashboardCtx.filteredData.phaseLabels);
}
setupDropZone();
@@ -3969,10 +5201,49 @@ export function showDetailModal(id, opts = {}) {
// Remember which marker is open so toggleAltUnits can re-render in place.
state._activeDetailMarkerId = id;
rememberModalTrigger();
- const modal = document.getElementById("detail-modal");
+ const modal = setDetailModalShell('marker-detail-modal');
const overlay = document.getElementById("modal-overlay");
+ if (!modal) return;
const dates = marker.singlePoint ? [marker.singleDateLabel || "N/A"] : data.dateLabels;
const r = getEffectiveRange(marker);
+ const modalPoints = marker.values.map((v, i) => ({ v, i })).filter(x => x.v !== null && x.v !== undefined);
+ const latestPoint = modalPoints[modalPoints.length - 1] || null;
+ const prevPoint = modalPoints.length > 1 ? modalPoints[modalPoints.length - 2] : null;
+ const firstPoint = modalPoints[0] || null;
+ const latestRange = latestPoint ? getEffectiveRangeForDate(marker, latestPoint.i) : r;
+ const latestStatus = latestPoint ? getStatus(latestPoint.v, latestRange.min, latestRange.max) : 'missing';
+ const statusText = latestStatus === 'normal' ? 'In range'
+ : latestStatus === 'high' ? 'Above range'
+ : latestStatus === 'low' ? 'Below range'
+ : 'No value';
+ const deltaFromPrev = latestPoint && prevPoint && Number(prevPoint.v) !== 0
+ ? (((Number(latestPoint.v) - Number(prevPoint.v)) / Number(prevPoint.v)) * 100)
+ : null;
+ const deltaFromFirst = latestPoint && firstPoint && Number(firstPoint.v) !== 0
+ ? (((Number(latestPoint.v) - Number(firstPoint.v)) / Number(firstPoint.v)) * 100)
+ : null;
+ const latestUnit = marker.unit || '';
+ const latestDisplay = latestPoint ? formatValue(latestPoint.v) : '—';
+ const latestDateLabel = latestPoint ? (dates[latestPoint.i] || 'Latest') : 'No values';
+ const rangeDisplay = `${latestRange.min != null ? formatValue(latestRange.min) : '—'}–${latestRange.max != null ? formatValue(latestRange.max) : '—'} ${latestUnit}`.trim();
+ const optimalDisplay = `${marker.optimalMin != null ? formatValue(marker.optimalMin) : '—'}–${marker.optimalMax != null ? formatValue(marker.optimalMax) : '—'} ${latestUnit}`.trim();
+ const clampPct = value => Math.max(0, Math.min(100, value));
+ const rangeBandHtml = (() => {
+ const min = latestRange.min;
+ const max = latestRange.max;
+ if (min == null || max == null || Number(max) === Number(min) || !latestPoint) return '';
+ const span = Number(max) - Number(min);
+ const dot = clampPct(((Number(latestPoint.v) - Number(min)) / span) * 100);
+ const optStart = marker.optimalMin != null ? clampPct(((Number(marker.optimalMin) - Number(min)) / span) * 100) : null;
+ const optEnd = marker.optimalMax != null ? clampPct(((Number(marker.optimalMax) - Number(min)) / span) * 100) : null;
+ const optWidth = optStart != null && optEnd != null ? Math.max(2, optEnd - optStart) : 0;
+ return `
-
`;
- }
- } else {
- html += `${d}
- ${preview}
-
-
-
-
- No notes yet — add notes to track context around your lab results
`;
- }
- html += `
+
+ ${optWidth ? `` : ''}
+
+
`;
+ })();
const dotKey = id.replace('_', '.');
let rangeInfo = '';
const overrides = state.importedData?.refOverrides?.[dotKey] || {};
@@ -4040,11 +5311,32 @@ export function showDetailModal(id, opts = {}) {
}
}
let html = `
- ${escapeHTML(formatValue(min))}${escapeHTML(formatValue(max))}
+ ${escapeHTML(marker.name)}${renameLink}
-${escapeHTML(marker.unit)}${rangeInfo}
- ${altUnitInfo}
+
+
+
+
+ ${escapeHTML(statusText)}
+ ${escapeHTML(data.categories[catKey]?.label || catKey)}
+ ${escapeHTML(marker.name)}${renameLink}
+${escapeHTML(marker.unit)}${rangeInfo}
+ ${altUnitInfo}
+
+
+ ${rangeBandHtml}
+
+
+ Latest
+ ${escapeHTML(latestDisplay)}${latestUnit ? ` ${escapeHTML(latestUnit)}` : ''}
+
+
+
+ Ranges
+ ${escapeHTML(optimalDisplay)} optimal
+
+ Trend
+ History
`;
for (let i = 0; i < marker.values.length; i++) {
const v = marker.values[i];
@@ -4323,8 +5615,9 @@ export function openManualEntryForm(id, prefillDate) {
const marker = data.categories[catKey]?.markers[mKey];
if (marker) state.markerRegistry[id] = marker;
if (!marker) return;
- const modal = document.getElementById("detail-modal");
+ const modal = setDetailModalShell('gb-form-modal', 'marker-form-modal');
const overlay = document.getElementById("modal-overlay");
+ if (!modal) return;
const today = new Date().toISOString().slice(0, 10);
// Date fallback chain: explicit prefill (e.g. empty-cell click) → last-used in this session → today.
// sessionStorage clears when the tab closes, so we don't outlast a single sitting.
@@ -4362,8 +5655,14 @@ export function openManualEntryForm(id, prefillDate) {
`
: `(${escapeHTML(marker.unit)})`;
- modal.innerHTML = `
-
`;
overlay.classList.add("show");
setTimeout(() => {
@@ -4532,15 +5832,22 @@ export function saveAndAddAnotherManualEntry(id) {
}
export function openCreateMarkerModal() {
- const modal = document.getElementById("detail-modal");
+ const modal = setDetailModalShell('gb-form-modal', 'marker-form-modal');
const overlay = document.getElementById("modal-overlay");
+ if (!modal) return;
// Build category options from schema + existing custom categories
const data = getActiveData();
const catOptions = Object.entries(data.categories)
.map(([key, c]) => ``)
.join('');
- modal.innerHTML = `
-
- `;
overlay.classList.add("show");
setTimeout(() => { const el = document.getElementById('cm-name'); if (el) el.focus(); }, 50);
@@ -4869,6 +6177,8 @@ export async function deleteValueNote(id, date) {
export function closeModal() {
document.getElementById("modal-overlay").classList.remove("show");
+ const detailModal = document.getElementById("detail-modal");
+ if (detailModal) detailModal.className = 'modal';
if (state.chartInstances["modal"]) { state.chartInstances["modal"].destroy(); delete state.chartInstances["modal"]; }
document.removeEventListener('click', closeSuggestionsOnClickOutside);
if (window.closeEMFInterpretation) window.closeEMFInterpretation();
diff --git a/service-worker.js b/service-worker.js
index d0f38427..0ed39422 100755
--- a/service-worker.js
+++ b/service-worker.js
@@ -26,6 +26,7 @@ const APP_SHELL = [
'/version.js',
'/index.html',
'/styles.css',
+ '/themes-extra.css',
'/js/main.js',
'/js/schema.js',
'/js/constants.js',
diff --git a/styles.css b/styles.css
index 76cef6f7..af457dac 100755
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,8 @@
--text-muted: #9aa0b3;
--accent: #4f8cff;
--accent-light: #6ba0ff;
+ --on-accent: #030712;
+ --accent-fill: rgba(79, 140, 255, 0.10);
--accent-gradient: linear-gradient(135deg, #4f8cff 0%, #6366f1 100%);
--green: #34d399;
--green-bg: rgba(52, 211, 153, 0.15);
@@ -34,8 +36,11 @@
--purple: #a78bfa;
--purple-light: rgba(167,139,250,0.15);
--cyan: rgba(56, 189, 248, 0.6);
+ --neutral-soft-bg: rgba(154, 160, 179, 0.10);
+ --alert-soft-bg: rgba(248, 113, 113, 0.10);
--radius: 12px;
--radius-sm: 8px;
+ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Outfit', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}
@@ -50,6 +55,8 @@
--text-muted: #6b7085;
--accent: #3b7cf5;
--accent-light: #2b6ce5;
+ --on-accent: #030712;
+ --accent-fill: rgba(59,124,245,0.10);
--accent-gradient: linear-gradient(135deg, #3b7cf5 0%, #5b5bf6 100%);
--green: #059669;
--green-bg: rgba(5,150,105,0.12);
@@ -70,13 +77,15 @@
--purple: #7c3aed;
--purple-light: rgba(124,58,237,0.12);
--cyan: rgba(14, 165, 233, 0.6);
+ --neutral-soft-bg: rgba(107, 112, 133, 0.10);
+ --alert-soft-bg: rgba(220, 38, 38, 0.08);
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
--shadow-glow: 0 0 0 1px var(--accent), 0 4px 12px rgba(59, 124, 245, 0.08);
}
.skip-link {
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
- z-index: 1000; padding: 8px 16px; background: var(--accent); color: #fff; border-radius: var(--radius-sm);
+ z-index: 1000; padding: 8px 16px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm);
font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; overflow: visible; }
@@ -101,7 +110,7 @@
html { overflow-x: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body {
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
@@ -134,7 +143,7 @@ body {
width: 260px;
background: var(--bg-secondary);
border-right: 1px solid var(--border);
- padding: 16px 0;
+ padding: 18px 12px;
overflow-y: auto;
overscroll-behavior: contain;
position: fixed;
@@ -143,28 +152,94 @@ body {
height: calc(100vh - 57px);
z-index: 10;
}
+.sidebar-search-wrap {
+ position: relative;
+ margin: 0 4px 18px;
+}
+.sidebar-search-icon {
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 14px;
+ pointer-events: none;
+}
+.sidebar-search {
+ width: 100%;
+ padding: 10px 12px 10px 36px;
+ background: var(--bg-primary);
+ border: 1px solid var(--border);
+ color: var(--text-primary);
+ border-radius: var(--radius-sm);
+ font-size: 13px;
+}
+.sidebar-search:focus { border-color: var(--accent); }
+.sidebar-search::placeholder { color: var(--text-muted); }
+.nav-section {
+ margin: 16px 8px 8px;
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
.sidebar-title {
- font-size: 11px; font-weight: 600; text-transform: uppercase;
- letter-spacing: 1px; color: var(--text-muted); padding: 8px 20px; margin-top: 8px;
+ display: flex; align-items: center; justify-content: space-between; gap: 8px;
+ padding: 0 8px;
}
.nav-item {
- display: flex; align-items: center; gap: 10px; padding: 10px 20px;
+ display: flex; align-items: center; gap: 10px; padding: 8px 12px;
+ min-height: 36px;
cursor: pointer; font-size: 14px; color: var(--text-secondary);
- transition: all 0.15s; border-left: 3px solid transparent;
+ transition: all 0.15s; border: 1px solid transparent;
+ border-radius: var(--radius-sm);
+ background: transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
-.nav-item.active {
- background: rgba(79, 140, 255, 0.12); color: var(--accent);
- border-left-color: var(--accent); font-weight: 500;
+.nav-item.active,
+.nav-item.is-active {
+ background: var(--bg-card); color: var(--text-primary);
+ border-color: var(--border); font-weight: 600;
}
-.nav-item .icon { font-size: 16px; width: 24px; text-align: center; }
-.nav-item .count {
- margin-left: auto; font-size: 11px; background: var(--bg-card);
- padding: 1px 7px; border-radius: 10px; color: var(--text-muted);
+.nav-item.active .nav-item-dot,
+.nav-item.is-active .nav-item-dot {
+ background: var(--accent);
+}
+.nav-item-icon {
+ width: 16px;
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 13px;
+ text-align: center;
+ flex-shrink: 0;
+}
+.nav-item.active .nav-item-icon { color: var(--accent); }
+.nav-item-dot {
+ width: 8px; height: 8px;
+ border-radius: 50%;
+ background: var(--border);
+ flex-shrink: 0;
+}
+.nav-item-label {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.nav-item .count,
+.nav-item-count {
+ margin-left: auto; font-size: 11px; background: var(--bg-primary);
+ padding: 1px 7px; border-radius: 4px; color: var(--text-muted);
+ border: 1px solid var(--border);
+ font-family: var(--font-mono);
}
.nav-item .flag-count {
margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: var(--red-bg);
- padding: 1px 7px; border-radius: 10px; color: var(--red); font-weight: 600;
+ padding: 1px 7px; border-radius: 4px; color: var(--red); font-weight: 700;
box-shadow: 0 0 6px rgba(248, 113, 113, 0.15);
}
.nav-item .nav-count {
@@ -172,7 +247,7 @@ body {
padding: 1px 7px; border-radius: 10px; color: var(--text-muted);
}
.sidebar-group-header {
- display: flex; align-items: center; gap: 8px; padding: 8px 20px; margin-top: 8px;
+ display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px;
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-muted); user-select: none;
/* Mouse-only click affordance — onclick on the outer div fires
@@ -261,6 +336,982 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
display: flex; align-items: center; gap: 10px;
}
.category-header p { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
+.dashboard-greeting {
+ display: flex; align-items: flex-start; justify-content: space-between;
+ gap: 16px; margin-bottom: 16px;
+}
+.dashboard-greeting h1 {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 32px;
+ line-height: 1.08;
+ font-weight: 700;
+ letter-spacing: 0;
+ color: var(--text-primary);
+}
+.dashboard-greeting-kicker {
+ margin-bottom: 5px;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: var(--text-muted);
+}
+.dashboard-greeting-sub {
+ margin-top: 6px; font-family: var(--font-mono); font-size: 12px;
+ color: var(--text-secondary);
+}
+.dashboard-actions, .dashboard-widget-picker-actions, .dashboard-organize-footer {
+ display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+}
+.dashboard-actions { justify-content: flex-end; flex-shrink: 0; }
+.dashboard-action-btn {
+ padding: 8px 12px; border-radius: var(--radius-sm);
+ border: 1px solid var(--border); background: var(--bg-secondary);
+ color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 600;
+ cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s;
+}
+.dashboard-action-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
+.dashboard-action-btn:active { transform: translateY(1px); }
+.dashboard-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.dashboard-action-btn-primary {
+ background: var(--accent); border-color: transparent; color: var(--on-accent);
+}
+.dashboard-widgets {
+ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
+ gap: 18px; align-items: start; grid-auto-flow: dense;
+}
+.dashboard-widget {
+ grid-column: span 12; min-width: 0;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px;
+ box-shadow: var(--shadow);
+ transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+.dashboard-widget:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
+.dashboard-widget-half { grid-column: span 6; }
+.dashboard-widget-quarter { grid-column: span 3; }
+.dashboard-widget-third { grid-column: span 4; }
+.dashboard-widget-two-third { grid-column: span 8; }
+.dashboard-widget-chrome {
+ display: flex; align-items: center; gap: 10px;
+ margin-bottom: 14px; min-width: 0;
+}
+.dashboard-widget-handle {
+ display: none; color: var(--text-muted); font-family: var(--font-mono);
+ font-size: 13px; line-height: 1; cursor: grab;
+}
+.dashboard-widget-heading { flex: 1; min-width: 0; }
+.dashboard-widget-title {
+ font-family: var(--font-display); font-size: 14px; font-weight: 700;
+ text-transform: uppercase; color: var(--text-primary); letter-spacing: 0;
+}
+.dashboard-widget-description {
+ margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.dashboard-widget-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.dashboard-widget-tool {
+ min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--radius-sm);
+ border: 1px solid var(--border); background: var(--bg-secondary);
+ color: var(--text-primary); font: inherit; font-size: 12px; cursor: pointer;
+}
+.dashboard-widget-tool:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-hover); }
+.dashboard-widget-tool:disabled { opacity: 0.45; cursor: default; }
+.dashboard-widget-body { min-width: 0; }
+.dashboard-widget-body > .lens-section:first-child,
+.dashboard-widget-body > .focus-card:first-child,
+.dashboard-widget-body > .light-today-strip:first-child,
+.dashboard-widget-body > .wearable-strip:first-child,
+.dashboard-widget-body > .wearable-strip-empty:first-child,
+.dashboard-widget-body > .genetics-section:first-child {
+ margin-top: 0;
+}
+.dashboard-widget-body > .alerts-section,
+.dashboard-widget-body > .notes-section { margin-bottom: 0; }
+.dashboard-widget-body > .focus-card,
+.dashboard-widget-body > .light-today-strip,
+.dashboard-widget-body > .wearable-strip,
+.dashboard-widget-body > .wearable-strip-empty,
+.dashboard-widget-body > .genetics-section,
+.dashboard-widget-body > .lens-section {
+ box-shadow: none;
+}
+.dashboard-widget[data-widget-id="focus"] .focus-card {
+ align-items: flex-start;
+ margin: 0;
+ max-height: 222px;
+}
+.dashboard-widget[data-widget-id="focus"] .focus-card-body {
+ max-height: 176px;
+ overflow: hidden;
+}
+.dashboard-widget[data-widget-id="focus"] .focus-card-text {
+ display: -webkit-box;
+ -webkit-line-clamp: 8;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.dashboard-widget-inline-controls {
+ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
+}
+.dashboard-widget-empty {
+ padding: 12px 0; color: var(--text-muted); font-size: 13px; font-style: italic;
+}
+.dashboard-widgets.is-organizing .dashboard-widget {
+ padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius);
+ background: color-mix(in srgb, var(--bg-card) 46%, transparent);
+}
+.dashboard-widgets.is-organizing .dashboard-widget:hover {
+ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
+}
+.dashboard-widgets.is-organizing .dashboard-widget-handle { display: block; }
+.dashboard-organize-footer { margin-top: 18px; justify-content: flex-end; }
+.dashboard-widget-picker { max-width: 520px; }
+.dashboard-widget-picker-grid {
+ display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0;
+}
+.dashboard-widget-picker-card {
+ display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
+ width: 100%; padding: 14px; border-radius: var(--radius);
+ background: var(--bg-card); border: 1px solid var(--border);
+ color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
+ transition: background 0.15s, border-color 0.15s;
+}
+.dashboard-widget-picker-card:hover { background: var(--bg-hover); border-color: var(--accent); }
+.dashboard-widget-picker-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.dashboard-widget-picker-title { font-size: 14px; font-weight: 700; }
+.dashboard-widget-picker-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
+.dashboard-widget-picker-action { margin-top: 4px; font-size: 12px; color: var(--accent); font-weight: 700; }
+.dashboard-widget-picker-empty {
+ padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius);
+ color: var(--text-muted); font-size: 13px;
+}
+@media (max-width: 1100px) {
+ .dashboard-widget-half,
+ .dashboard-widget-two-third { grid-column: span 12; }
+ .dashboard-widget-quarter,
+ .dashboard-widget-third { grid-column: span 6; }
+}
+@media (max-width: 640px) {
+ .dashboard-widget,
+ .dashboard-widget-quarter,
+ .dashboard-widget-third { grid-column: span 12; }
+ .dashboard-greeting { flex-direction: column; align-items: stretch; }
+ .dashboard-actions { justify-content: flex-start; }
+ .dashboard-widget-chrome { align-items: flex-start; }
+ .dashboard-widget-tools { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
+}
+
+.db-hero-bio {
+ display: grid; grid-template-columns: 1fr auto; align-items: center;
+ gap: 24px; cursor: pointer;
+}
+.db-hero-bio-left { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
+.db-hero-bio-num {
+ font-family: var(--font-display); font-size: 86px; font-weight: 700;
+ letter-spacing: 0; line-height: 1;
+ background: var(--accent-gradient);
+ -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.db-hero-bio-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.db-hero-bio-label .top {
+ font-family: var(--font-mono); font-size: 11px; font-weight: 700;
+ text-transform: uppercase; color: var(--text-muted);
+}
+.db-hero-bio-label .actual { font-size: 13px; color: var(--text-secondary); }
+.db-hero-bio-label .delta { font-family: var(--font-mono); font-size: 13px; color: var(--red); }
+.db-hero-bio-right {
+ width: 220px; display: flex; flex-direction: column; gap: 10px;
+ font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
+}
+.db-hero-row,
+.db-hero-scale { display: flex; justify-content: space-between; gap: 10px; }
+.db-hero-row strong { color: var(--text-primary); }
+.db-hero-bio-bar {
+ width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
+ background: var(--bg-hover); border: 1px solid var(--border);
+}
+.db-hero-bio-bar > div { height: 100%; background: var(--accent-gradient); }
+.db-spark { width: 100%; height: 100%; color: var(--accent); overflow: visible; }
+.db-spark polyline {
+ fill: none; stroke: currentColor; stroke-width: 2;
+ stroke-linecap: round; stroke-linejoin: round;
+}
+.db-spark circle { fill: currentColor; }
+.db-spark-high,
+.db-spark-low { color: var(--red); }
+.db-spark-normal { color: var(--green); }
+.db-spark-empty { display: block; height: 2px; background: var(--border); border-radius: 2px; }
+.db-stat-widget {
+ width: 100%; min-height: 150px; padding: 0; border: 0; background: transparent;
+ color: var(--text-primary); display: flex; flex-direction: column; gap: 8px;
+ align-items: stretch; text-align: left; font: inherit; cursor: pointer;
+}
+.db-stat-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.db-stat-head span:last-child {
+ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+ font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
+ color: var(--text-secondary);
+}
+.db-status-dot {
+ width: 11px; height: 11px; border-radius: 50%; display: inline-block;
+ background: var(--text-muted); flex-shrink: 0;
+}
+.db-status-dot.db-status-normal { background: var(--green); }
+.db-status-dot.db-status-high { background: var(--red); }
+.db-status-dot.db-status-low { background: var(--yellow); }
+.db-stat-widget.db-status-high .db-stat-delta,
+.db-stat-widget.db-status-low .db-stat-delta { color: var(--red); }
+.db-stat-value {
+ font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 700;
+ font-variant-numeric: tabular-nums;
+}
+.db-stat-value small { margin-left: 5px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
+.db-stat-delta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+.db-stat-widget .db-spark { height: 34px; margin-top: auto; }
+.db-spotlight { display: flex; flex-direction: column; gap: 14px; cursor: pointer; }
+.db-spotlight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.db-spotlight-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
+.db-spotlight-meta { margin-top: 4px; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
+.db-spotlight-value { font-family: var(--font-mono); font-size: 22px; font-weight: 800; text-align: right; white-space: nowrap; }
+.db-spotlight-value small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; font-weight: 500; }
+.db-spotlight .db-spark { height: 150px; }
+.db-marker-list { min-width: 0; }
+.db-marker-list-head,
+.db-marker-row {
+ display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(120px, 1fr) 86px 74px;
+ align-items: center; gap: 12px;
+}
+.db-marker-list-head {
+ padding: 4px 10px 8px; color: var(--text-muted);
+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+ text-transform: uppercase;
+}
+.db-marker-list-scroll { max-height: 520px; overflow: auto; padding-right: 4px; }
+.db-marker-row {
+ width: 100%; min-height: 52px; padding: 10px;
+ border: 1px solid transparent; border-radius: var(--radius-sm);
+ background: transparent; color: var(--text-primary); text-align: left; font: inherit;
+ cursor: pointer; transition: background 0.12s, border-color 0.12s;
+}
+.db-marker-row:hover { background: var(--bg-hover); border-color: var(--border); }
+.db-marker-name-wrap { min-width: 0; }
+.db-marker-name {
+ font-size: 13px; font-weight: 700; display: inline-block; max-width: 100%;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
+}
+.db-marker-cat {
+ margin-left: 6px; padding: 2px 6px; border-radius: 4px;
+ background: var(--bg-hover); color: var(--text-muted); font-family: var(--font-mono); font-size: 10px;
+}
+.db-marker-spark { height: 28px; min-width: 0; }
+.db-marker-latest { text-align: right; font-family: var(--font-mono); }
+.db-marker-latest strong { display: block; font-size: 13px; }
+.db-marker-latest small { color: var(--text-muted); font-size: 10px; }
+.db-marker-trend { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
+.db-insights-list { display: grid; gap: 10px; }
+.db-insight {
+ width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
+ border: 1px solid var(--border); background: var(--bg-hover);
+ color: var(--text-primary); display: flex; flex-direction: column; gap: 6px;
+ align-items: flex-start; text-align: left; font: inherit; cursor: pointer;
+}
+.db-insight-danger { border-left: 3px solid var(--red); }
+.db-insight-warn { border-left: 3px solid var(--yellow); }
+.db-insight-good { border-left: 3px solid var(--green); }
+.db-insight-info { border-left: 3px solid var(--accent); }
+.db-insight-tag {
+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+ text-transform: uppercase; color: var(--text-muted);
+}
+.db-insight strong { font-size: 14px; }
+.db-insight span:last-child { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
+.db-wearable-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
+.db-wearable-tile {
+ min-height: 104px; padding: 14px; border-radius: var(--radius-sm);
+ border: 1px solid var(--border); background: var(--bg-hover);
+ color: var(--text-primary); display: flex; flex-direction: column;
+ align-items: stretch; justify-content: space-between; text-align: left;
+ font: inherit; cursor: pointer;
+}
+.db-wearable-label {
+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+ text-transform: uppercase; color: var(--text-muted);
+}
+.db-wearable-tile strong { font-family: var(--font-display); font-size: 24px; line-height: 1; }
+.db-wearable-foot { display: flex; justify-content: space-between; gap: 6px; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
+.db-wearable-foot em { font-style: normal; color: var(--text-secondary); }
+.db-genome-list { display: grid; gap: 7px; }
+.db-genome-summary {
+ padding: 0 2px 4px;
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 11px;
+}
+.db-snp-row {
+ display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
+ gap: 4px 10px; align-items: center;
+ padding: 9px 10px; border-radius: var(--radius-sm);
+ background: var(--bg-hover); border: 1px solid transparent;
+}
+.db-snp-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.db-snp-main strong {
+ font-family: var(--font-mono); font-size: 12px; overflow: hidden;
+ text-overflow: ellipsis; white-space: nowrap;
+}
+.db-snp-main small,
+.db-snp-impact { color: var(--text-muted); font-size: 11px; }
+.db-snp-impact { font-family: var(--font-mono); text-transform: uppercase; }
+.db-snp-geno {
+ padding: 3px 7px; border-radius: 4px;
+ background: var(--accent); color: var(--on-accent);
+ font-family: var(--font-mono); font-size: 11px; font-weight: 800;
+}
+.db-snp-note {
+ grid-column: 1 / -1;
+ color: var(--text-secondary);
+ font-size: 12px;
+ line-height: 1.45;
+}
+.db-genome-empty,
+.db-correlation-empty {
+ width: 100%; min-height: 130px; padding: 18px; border-radius: var(--radius-sm);
+ border: 1px dashed var(--border); background: transparent; color: var(--text-primary);
+ display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
+ gap: 6px; text-align: left; font: inherit; cursor: pointer;
+}
+.db-genome-empty span,
+.db-correlation-empty span { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
+.db-correlation-widget { display: grid; gap: 12px; }
+.db-correlation-head {
+ display: flex; align-items: center; justify-content: space-between; gap: 12px;
+ color: var(--text-secondary); font-size: 12px;
+}
+.db-correlation-head strong { color: var(--text-primary); }
+.db-correlation-head button {
+ padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border);
+ background: var(--bg-secondary); color: var(--text-primary); font: inherit;
+ font-size: 11px; cursor: pointer;
+}
+.db-correlation-grid {
+ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 8px;
+}
+.db-correlation-cell {
+ min-height: 74px; padding: 10px;
+ background: var(--bg-hover);
+ border: 1px solid var(--border);
+ border-left-width: 3px;
+ border-radius: var(--radius-sm); color: var(--text-primary);
+ display: flex; flex-direction: column; justify-content: space-between;
+ text-align: left; font: inherit; cursor: pointer;
+}
+.db-correlation-cell-pos { border-left-color: var(--red); }
+.db-correlation-cell-neg { border-left-color: var(--accent); }
+.db-correlation-cell span {
+ font-size: 10px; color: var(--text-primary);
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.db-correlation-cell strong { font-family: var(--font-mono); font-size: 18px; }
+.db-correlation-cell small { color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); }
+
+[data-theme="glass"] .dashboard-widget {
+ background: color-mix(in srgb, var(--bg-card) 66%, transparent);
+ backdrop-filter: blur(24px) saturate(140%);
+ -webkit-backdrop-filter: blur(24px) saturate(140%);
+}
+[data-theme="cyberterm"] .dashboard-widget,
+[data-theme="cyberterm"] .db-insight,
+[data-theme="cyberterm"] .db-wearable-tile,
+[data-theme="cyberterm"] .db-snp-row,
+[data-theme="cyberterm"] .db-correlation-cell {
+ border-radius: 0; box-shadow: 2px 2px 0 var(--border);
+}
+[data-theme="cyberterm"] .dashboard-widget-title::before { content: "[ "; color: var(--accent); }
+[data-theme="cyberterm"] .dashboard-widget-title::after { content: " ]"; color: var(--accent); }
+[data-theme="cyberterm"] .db-hero-bio-num {
+ background: none; color: var(--accent); -webkit-text-fill-color: var(--accent);
+ font-family: var(--font-mono);
+}
+[data-theme="cyberterm"] .db-status-dot,
+[data-theme="cyberterm"] .db-hero-bio-bar,
+[data-theme="cyberterm"] .db-marker-row { border-radius: 0; }
+@media (max-width: 900px) {
+ .db-hero-bio { grid-template-columns: 1fr; }
+ .db-hero-bio-right { width: 100%; }
+ .db-wearable-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .db-correlation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .db-marker-list-head { display: none; }
+ .db-marker-row { grid-template-columns: 16px minmax(0, 1fr) 82px; }
+ .db-marker-spark,
+ .db-marker-trend { display: none; }
+}
+
+/* Mobile dashboard app shell */
+.m-shell { display: none; }
+@media (max-width: 800px) {
+ body.mobile-dashboard-active .header { display: none; }
+ body.mobile-dashboard-active .layout {
+ display: block;
+ min-height: 100svh;
+ }
+ body.mobile-dashboard-active .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ transform: translateX(-100%);
+ z-index: 300;
+ }
+ body.mobile-dashboard-active .sidebar.mobile-open {
+ transform: translateX(0);
+ }
+ body.mobile-dashboard-active .main {
+ padding: 0;
+ padding-bottom: 0;
+ margin-left: 0;
+ max-width: none;
+ overflow-x: hidden;
+ }
+ body.mobile-dashboard-active .app-footer { display: none; }
+ body.mobile-dashboard-active #chat-fab { display: none; }
+ body.mobile-dashboard-active #import-fab {
+ right: 16px;
+ bottom: calc(92px + env(safe-area-inset-bottom));
+ }
+ .m-shell {
+ position: relative;
+ display: block;
+ min-height: 100svh;
+ overflow: hidden;
+ isolation: isolate;
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ }
+ .m-bg {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ background:
+ linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--bg-primary)) 0%, var(--bg-primary) 34%),
+ var(--bg-primary);
+ }
+ .m-content {
+ width: min(100%, 540px);
+ margin: 0 auto;
+ padding: calc(12px + env(safe-area-inset-top)) 14px calc(128px + env(safe-area-inset-bottom));
+ }
+ .m-topbar {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 0 12px;
+ backdrop-filter: blur(18px);
+ }
+ .m-topbar-actions { display: flex; align-items: center; gap: 8px; }
+ .m-avatar-btn,
+ .m-icon-btn,
+ .m-chat-fab,
+ .m-tab {
+ -webkit-tap-highlight-color: transparent;
+ }
+ .m-avatar-btn,
+ .m-icon-btn {
+ width: 42px;
+ height: 42px;
+ border-radius: 14px;
+ border: 1px solid var(--border);
+ background: color-mix(in srgb, var(--bg-card) 86%, transparent);
+ color: var(--text-primary);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: var(--shadow);
+ }
+ .m-icon-btn { font-size: 24px; line-height: 1; }
+ .m-avatar-img,
+ .m-avatar-initial {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 800;
+ object-fit: cover;
+ }
+ .m-brand { min-width: 0; line-height: 1.15; }
+ .m-brand strong {
+ display: block;
+ font-family: var(--font-display);
+ font-size: 18px;
+ font-weight: 800;
+ }
+ .m-brand span {
+ display: block;
+ margin-top: 2px;
+ color: var(--text-muted);
+ font-size: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .m-greeting {
+ padding: 14px 2px 12px;
+ }
+ .m-greeting h1 {
+ margin: 0;
+ max-width: 360px;
+ font-family: var(--font-display);
+ font-size: 28px;
+ line-height: 1.08;
+ letter-spacing: 0;
+ }
+ .m-greeting-sub {
+ margin-top: 6px;
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: 12px;
+ line-height: 1.35;
+ }
+ .m-stats {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+ margin: 12px 0 20px;
+ }
+ .m-stat-card {
+ min-height: 118px;
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ background: color-mix(in srgb, var(--bg-card) 94%, transparent);
+ color: var(--text-primary);
+ padding: 13px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ text-align: left;
+ box-shadow: var(--shadow);
+ font: inherit;
+ cursor: pointer;
+ }
+ .m-stat-summary { cursor: default; }
+ .m-stat-card:focus-visible,
+ .m-insight:focus-visible,
+ .m-marker-row:focus-visible,
+ .m-tab:focus-visible,
+ .m-chat-fab:focus-visible,
+ .m-icon-btn:focus-visible,
+ .m-avatar-btn:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
+ .m-stat-card strong {
+ font-size: 25px;
+ line-height: 1;
+ font-variant-numeric: tabular-nums;
+ }
+ .m-stat-card small {
+ margin-left: 4px;
+ font-size: 11px;
+ color: var(--text-muted);
+ }
+ .m-stat-head {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ min-width: 0;
+ }
+ .m-stat-label {
+ max-width: 100%;
+ color: var(--text-secondary);
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1.25;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .m-stat-meta {
+ color: var(--text-muted);
+ font-size: 11px;
+ line-height: 1.25;
+ }
+ .m-stat-normal { border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
+ .m-stat-high,
+ .m-stat-low { border-color: color-mix(in srgb, var(--red) 36%, var(--border)); }
+ .m-section {
+ margin: 22px 0 0;
+ min-width: 0;
+ }
+ .m-section-head {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 12px;
+ margin: 0 2px 10px;
+ }
+ .m-section-labels {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+ .m-section-title {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ }
+ .m-section-count {
+ font-family: var(--font-mono);
+ font-size: 10px;
+ color: var(--text-muted);
+ }
+ .m-section-head button {
+ min-height: 32px;
+ padding: 0 10px;
+ border-radius: 999px;
+ border: 1px solid var(--border);
+ background: var(--bg-card);
+ color: var(--text-secondary);
+ font: inherit;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ .m-insights {
+ display: grid;
+ gap: 10px;
+ }
+ .m-insight {
+ width: 100%;
+ min-height: 96px;
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ background: var(--bg-card);
+ color: var(--text-primary);
+ padding: 14px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 6px;
+ text-align: left;
+ font: inherit;
+ cursor: pointer;
+ box-shadow: var(--shadow);
+ }
+ .m-insight strong { font-size: 15px; line-height: 1.25; }
+ .m-insight span:not(.m-insight-eyebrow) {
+ color: var(--text-secondary);
+ font-size: 13px;
+ line-height: 1.35;
+ }
+ .m-insight small {
+ color: var(--text-muted);
+ font-size: 11px;
+ }
+ .m-insight-eyebrow {
+ font-family: var(--font-mono);
+ font-size: 10px;
+ font-weight: 800;
+ text-transform: uppercase;
+ color: var(--accent);
+ }
+ .m-insight-danger { border-color: color-mix(in srgb, var(--red) 38%, var(--border)); border-left: 3px solid var(--red); }
+ .m-insight-warn { border-color: color-mix(in srgb, var(--yellow) 42%, var(--border)); border-left: 3px solid var(--yellow); }
+ .m-insight-good { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); border-left: 3px solid var(--green); }
+ .m-insight-info { border-left: 3px solid var(--accent); }
+ .m-marker-list {
+ display: grid;
+ gap: 8px;
+ }
+ .m-marker-row {
+ width: 100%;
+ min-height: 68px;
+ display: grid;
+ grid-template-columns: 10px minmax(0, 1fr) 74px minmax(58px, auto);
+ align-items: center;
+ gap: 10px;
+ padding: 10px 12px;
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ background: var(--bg-card);
+ color: var(--text-primary);
+ text-align: left;
+ font: inherit;
+ cursor: pointer;
+ }
+ .m-marker-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-muted);
+ }
+ .m-marker-normal { background: var(--green); }
+ .m-marker-high,
+ .m-marker-low { background: var(--red); }
+ .m-marker-main { min-width: 0; }
+ .m-marker-main strong,
+ .m-marker-main small {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .m-marker-main strong { font-size: 13px; }
+ .m-marker-main small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
+ .m-marker-value {
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+ }
+ .m-marker-value strong { display: block; font-size: 14px; line-height: 1.1; }
+ .m-marker-value small { color: var(--text-muted); font-size: 10px; }
+ .m-spark {
+ width: 74px;
+ height: 32px;
+ color: var(--accent);
+ overflow: visible;
+ }
+ .m-spark polyline {
+ fill: none;
+ stroke: currentColor;
+ stroke-width: 3;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+ .m-spark-high,
+ .m-spark-low { color: var(--red); }
+ .m-spark-normal { color: var(--green); }
+ .m-spark-empty {
+ display: block;
+ height: 2px;
+ border-radius: 2px;
+ background: var(--border);
+ }
+ .m-empty {
+ padding: 14px;
+ border: 1px dashed var(--border);
+ border-radius: 14px;
+ color: var(--text-muted);
+ font-size: 13px;
+ }
+ .m-wear-strip {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 7px;
+ }
+ .m-wear-tile {
+ min-width: 0;
+ min-height: 92px;
+ padding: 10px 8px;
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ background: var(--bg-card);
+ color: var(--text-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ text-align: left;
+ font: inherit;
+ cursor: pointer;
+ box-shadow: var(--shadow);
+ }
+ .m-wear-label {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-family: var(--font-mono);
+ font-size: 9px;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ }
+ .m-wear-tile strong {
+ max-width: 100%;
+ font-size: 17px;
+ line-height: 1;
+ font-variant-numeric: tabular-nums;
+ }
+ .m-wear-tile small {
+ margin-left: 2px;
+ color: var(--text-muted);
+ font-size: 8px;
+ font-weight: 500;
+ }
+ .m-wear-change {
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ line-height: 1.2;
+ }
+ .m-wear-empty {
+ display: grid;
+ gap: 6px;
+ padding: 14px;
+ border: 1px dashed var(--border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--bg-card) 74%, transparent);
+ color: var(--text-secondary);
+ font-size: 13px;
+ line-height: 1.4;
+ }
+ .m-wear-empty strong { color: var(--text-primary); }
+ .m-wear-empty button {
+ justify-self: start;
+ min-height: 32px;
+ padding: 0 10px;
+ border-radius: 999px;
+ border: 1px solid var(--border);
+ background: var(--bg-card);
+ color: var(--text-primary);
+ font: inherit;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ .m-embedded-strip > .light-today-strip,
+ .m-embedded-strip > .wearable-strip,
+ .m-embedded-strip > .wearable-strip-empty,
+ .m-embedded-strip > .genetics-section {
+ margin: 0;
+ border-radius: 16px;
+ }
+ .m-embedded-strip .light-today-head,
+ .m-embedded-strip .wearable-strip-head {
+ align-items: flex-start;
+ }
+ .m-embedded-strip .light-pills-row,
+ .m-embedded-strip .wearable-metrics {
+ overflow-x: auto;
+ flex-wrap: nowrap;
+ padding-bottom: 2px;
+ scroll-snap-type: x proximity;
+ }
+ .m-embedded-strip .light-pill,
+ .m-embedded-strip .wearable-card {
+ min-width: 128px;
+ scroll-snap-align: start;
+ }
+ .m-chat-fab {
+ position: fixed;
+ right: 16px;
+ bottom: calc(154px + env(safe-area-inset-bottom));
+ z-index: 220;
+ width: 52px;
+ height: 52px;
+ border-radius: 18px;
+ border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
+ background: var(--accent);
+ color: #fff;
+ font-size: 22px;
+ box-shadow: var(--shadow-lg);
+ cursor: pointer;
+ }
+ .m-tabbar {
+ position: fixed;
+ left: 10px;
+ right: 10px;
+ bottom: calc(10px + env(safe-area-inset-bottom));
+ z-index: 210;
+ width: min(520px, calc(100% - 20px));
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 4px;
+ padding: 8px;
+ border: 1px solid var(--border);
+ border-radius: 24px;
+ background: color-mix(in srgb, var(--bg-card) 92%, transparent);
+ box-shadow: var(--shadow-lg);
+ backdrop-filter: blur(20px);
+ }
+ .m-tab {
+ min-width: 0;
+ height: 52px;
+ border: 0;
+ border-radius: 17px;
+ background: transparent;
+ color: var(--text-muted);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ font: inherit;
+ cursor: pointer;
+ }
+ .m-tab span { font-size: 18px; line-height: 1; }
+ .m-tab small { font-size: 10px; line-height: 1; }
+ .m-tab.active {
+ background: color-mix(in srgb, var(--accent) 16%, transparent);
+ color: var(--accent);
+ }
+ [data-theme="cyberterm"] .dashboard-greeting h1::before,
+ [data-theme="cyberterm"] .m-greeting h1::before {
+ content: "> ";
+ color: var(--accent);
+ }
+ [data-theme="cyberterm"] .m-section-title::before { content: "[ "; color: var(--accent); }
+ [data-theme="cyberterm"] .m-section-title::after { content: " ]"; color: var(--accent); }
+ [data-theme="cyberterm"] .m-icon-btn,
+ [data-theme="cyberterm"] .m-avatar-btn,
+ [data-theme="cyberterm"] .m-stat-card,
+ [data-theme="cyberterm"] .m-insight,
+ [data-theme="cyberterm"] .m-marker-row,
+ [data-theme="cyberterm"] .m-wear-tile,
+ [data-theme="cyberterm"] .m-chat-fab,
+ [data-theme="cyberterm"] .m-tabbar {
+ border-radius: 0;
+ }
+ [data-theme="cyberterm"] .m-stat-card,
+ [data-theme="cyberterm"] .m-insight,
+ [data-theme="cyberterm"] .m-marker-row,
+ [data-theme="cyberterm"] .m-wear-tile {
+ box-shadow: 2px 2px 0 var(--border);
+ }
+ [data-theme="synth-sunrise"] .m-bg {
+ top: 44%;
+ background:
+ linear-gradient(transparent 0%, color-mix(in srgb, var(--accent) 20%, transparent) 100%),
+ linear-gradient(to right, color-mix(in srgb, var(--accent) 42%, transparent) 1px, transparent 1px),
+ linear-gradient(to bottom, color-mix(in srgb, var(--accent) 42%, transparent) 1px, transparent 1px);
+ background-size: 100% 100%, 36px 36px, 36px 36px;
+ transform: perspective(360px) rotateX(60deg);
+ transform-origin: center bottom;
+ opacity: 0.42;
+ }
+ [data-theme="neuromancer"] .m-bg {
+ background-image:
+ linear-gradient(to right, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
+ linear-gradient(to bottom, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
+ background-size: 18px 18px;
+ opacity: 0.45;
+ }
+ [data-theme="glass"] .m-stat-card,
+ [data-theme="glass"] .m-insight,
+ [data-theme="glass"] .m-marker-row,
+ [data-theme="glass"] .m-wear-tile,
+ [data-theme="glass"] .m-tabbar {
+ backdrop-filter: blur(20px) saturate(140%);
+ -webkit-backdrop-filter: blur(20px) saturate(140%);
+ background: color-mix(in srgb, var(--bg-card) 68%, transparent);
+ }
+}
+
.view-toggle {
display: flex; gap: 4px; background: var(--bg-secondary); padding: 3px;
border-radius: var(--radius-sm); border: 1px solid var(--border);
@@ -307,6 +1358,15 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.chart-card-header {
display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 8px;
}
+.chart-card-header > div:first-child {
+ min-width: 0;
+ flex: 1;
+}
+.chart-card-header > div:first-child .chart-card-title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
.chart-card-header > div:last-child {
display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
@@ -315,9 +1375,9 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.chart-card-status {
font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 20px;
}
-.status-normal { background: var(--green-bg); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.2); }
-.status-high { background: var(--red-bg); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.2); animation: statusPulse 0.6s ease 0.3s; }
-.status-low { background: var(--yellow-bg); color: var(--yellow); border: 1px solid rgba(251, 191, 36, 0.2); animation: statusPulse 0.6s ease 0.3s; }
+.status-normal { background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 20%, transparent); }
+.status-high { background: var(--red-bg); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 20%, transparent); animation: statusPulse 0.6s ease 0.3s; }
+.status-low { background: var(--yellow-bg); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent); animation: statusPulse 0.6s ease 0.3s; }
.status-missing { background: var(--bg-hover); color: var(--text-muted); }
@keyframes statusPulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.chart-container { position: relative; height: 200px; min-height: 160px; overflow: hidden; }
@@ -405,8 +1465,14 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
background: rgba(0,0,0,0); z-index: 275; display: none;
align-items: center; justify-content: center; cursor: pointer;
transition: background 0.25s ease; overflow: hidden;
+ padding: 32px;
+}
+.modal-overlay.show {
+ display: flex;
+ background: rgba(0,0,0,0.68);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
}
-.modal-overlay.show { display: flex; background: rgba(0,0,0,0.7); }
.modal {
position: relative; cursor: default;
background: var(--bg-secondary); border-radius: var(--radius);
@@ -416,15 +1482,470 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal-overlay.show .modal { transform: scale(1) translateY(0); opacity: 1; }
-/* Knowledge Base modal — wider than the default 700px to fit the
- per-backend controls (model picker, library list, document list,
- ingest UI) without horizontal cramping. */
-.kb-modal { max-width: 760px; }
-.modal-nudge { animation: modal-nudge 0.3s ease; }
-@keyframes modal-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); box-shadow: 0 0 0 2px var(--accent); } }
-.modal-close {
- position: absolute; top: 16px; right: 16px;
- background: none; border: none; color: var(--text-muted);
+.gb-form-modal,
+.gb-history-modal,
+.settings-modal,
+.marker-detail-modal {
+ padding: 0;
+ width: min(94vw, 880px);
+ max-height: 90vh;
+ background: var(--bg-secondary);
+ box-shadow: var(--shadow-lg);
+}
+.gb-form-modal { max-width: 680px; }
+.gb-history-modal { max-width: 840px; }
+.gb-modal-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+ padding: 22px 26px;
+ border-bottom: 1px solid var(--border);
+ background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
+}
+.gb-modal-kicker {
+ font-family: var(--font-mono);
+ color: var(--text-muted);
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+.gb-modal-title {
+ margin-top: 3px;
+ color: var(--text-primary);
+ font-family: var(--font-display);
+ font-size: 22px;
+ font-weight: 700;
+ letter-spacing: 0;
+}
+.gb-modal-head .modal-close {
+ position: static;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 34px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-muted);
+ font-size: 22px;
+ line-height: 1;
+ padding: 0;
+ flex-shrink: 0;
+}
+.gb-modal-head .modal-close:hover {
+ color: var(--text-primary);
+ border-color: var(--accent);
+ background: var(--bg-hover);
+}
+.gb-form-body {
+ padding: 24px 26px 26px;
+}
+.gb-form-modal .modal-unit,
+.gb-history-modal .modal-unit {
+ margin-bottom: 18px;
+ color: var(--text-secondary);
+}
+.gb-form-actions {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ margin-top: 18px;
+ padding-top: 16px;
+ border-top: 1px solid var(--border);
+}
+.settings-modal {
+ width: min(94vw, 860px);
+ max-width: 860px;
+ overflow: hidden;
+}
+.settings-modal .settings-layout {
+ display: grid;
+ grid-template-columns: 200px minmax(0, 1fr);
+ min-height: 560px;
+ max-height: calc(90vh - 78px);
+ gap: 0;
+}
+.settings-modal .settings-tabs-bar {
+ position: static;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ margin: 0;
+ padding: 18px 14px;
+ border-right: 1px solid var(--border);
+ border-bottom: 0;
+ background: var(--bg-secondary);
+ overflow-y: auto;
+}
+.settings-modal .settings-tab-btn {
+ width: 100%;
+ justify-content: flex-start;
+ gap: 9px;
+ padding: 10px 12px;
+ border: 0;
+ border-radius: var(--radius-sm);
+ background: transparent;
+ color: var(--text-secondary);
+ font-size: 13px;
+}
+.settings-modal .settings-tab-btn::after { display: none; }
+.settings-modal .settings-tab-btn:hover {
+ color: var(--text-primary);
+ background: var(--bg-card);
+}
+.settings-modal .settings-tab-btn.active {
+ background: var(--bg-card);
+ color: var(--text-primary);
+ border: 1px solid var(--border);
+ font-weight: 600;
+}
+.settings-modal .settings-tab-btn.active svg { color: var(--accent); }
+.settings-modal .settings-content {
+ min-width: 0;
+ overflow-y: auto;
+ padding: 18px 24px 24px;
+}
+.settings-modal .settings-tab-panel { padding-top: 0; }
+.settings-modal .settings-row {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+.settings-modal .settings-row .settings-section {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
+ gap: 16px;
+ align-items: center;
+ margin: 0;
+ padding: 14px 0;
+ border-bottom: 1px solid var(--border);
+}
+.settings-modal .settings-row .settings-section > :only-child {
+ grid-column: 1 / -1;
+}
+.settings-modal .settings-section {
+ margin-top: 14px;
+}
+.settings-modal .settings-label {
+ margin: 0;
+ color: var(--text-primary);
+ font-size: 14px;
+}
+.settings-modal .settings-group-title {
+ margin-top: 22px;
+ border: 0;
+ padding-bottom: 0;
+ font-family: var(--font-mono);
+ letter-spacing: 0.1em;
+}
+.settings-modal .settings-theme-grid {
+ margin: 0;
+ min-width: 280px;
+}
+.settings-modal .settings-theme-grid .settings-theme-btn,
+.settings-modal .ai-provider-btn,
+.settings-modal .imported-entry,
+.settings-modal .local-ai-settings,
+.settings-modal .privacy-status-card {
+ background: var(--bg-card);
+ border-color: var(--border);
+}
+.settings-modal .settings-theme-grid .settings-theme-btn.active {
+ border-color: var(--accent);
+ box-shadow: inset 0 0 0 1px var(--accent-fill);
+}
+.settings-modal .settings-links-row {
+ padding-top: 8px;
+ border-top: 1px solid var(--border);
+}
+.import-preview-modal {
+ max-width: 920px;
+}
+.import-preview-modal .import-table {
+ margin-top: 16px;
+}
+.import-preview-modal .gb-form-body {
+ overflow-x: auto;
+}
+.changelog-modal.gb-history-modal {
+ max-width: 680px;
+}
+.feedback-redesign-modal {
+ max-width: 560px !important;
+}
+.kb-modal.settings-modal {
+ max-width: 780px;
+}
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) > h3:first-of-type,
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) > .modal-header:first-child {
+ margin: -32px -32px 20px;
+ padding: 22px 56px 18px 26px;
+ border-bottom: 1px solid var(--border);
+ background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
+}
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) > h3:first-of-type {
+ color: var(--text-primary);
+ font-family: var(--font-display);
+ font-size: 22px;
+ font-weight: 700;
+ letter-spacing: 0;
+}
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) > .modal-header:first-child h3 {
+ margin: 0;
+ color: var(--text-primary);
+ font-size: 22px;
+}
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) > .modal-unit:first-of-type {
+ margin-top: -6px;
+}
+.modal:not(.marker-detail-modal):not(.gb-form-modal):not(.gb-history-modal):not(.settings-modal) .modal-actions {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ padding-top: 16px;
+ border-top: 1px solid var(--border);
+}
+@media (max-width: 720px) {
+ .modal-overlay { padding: 12px; }
+ .gb-modal-head { padding: 18px 20px; }
+ .gb-form-body { padding: 20px; }
+ .settings-modal {
+ width: 100%;
+ max-height: 92vh;
+ }
+ .settings-modal .settings-layout {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ max-height: calc(92vh - 72px);
+ }
+ .settings-modal .settings-tabs-bar {
+ flex-direction: row;
+ overflow-x: auto;
+ overflow-y: hidden;
+ border-right: 0;
+ border-bottom: 1px solid var(--border);
+ padding: 10px 12px;
+ }
+ .settings-modal .settings-tab-btn {
+ width: auto;
+ flex: 0 0 auto;
+ white-space: nowrap;
+ }
+ .settings-modal .settings-content {
+ padding: 16px 18px 20px;
+ }
+ .settings-modal .settings-row .settings-section {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ }
+ .settings-modal .settings-theme-grid {
+ min-width: 0;
+ grid-template-columns: 1fr;
+ }
+ .gb-form-actions {
+ justify-content: stretch;
+ }
+ .gb-form-actions .import-btn {
+ flex: 1 1 100%;
+ }
+}
+.marker-detail-modal {
+ max-width: 880px;
+ background: var(--bg-secondary);
+ box-shadow: var(--shadow-lg);
+}
+.marker-detail-modal .modal-close {
+ top: 18px;
+ right: 20px;
+ z-index: 2;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 34px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-muted);
+ font-size: 22px;
+ line-height: 1;
+ padding: 0;
+}
+.gb-detail-head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 22px;
+ padding: 24px 28px 18px;
+ border-bottom: 1px solid var(--border);
+}
+.gb-detail-kicker,
+.gb-detail-section-label {
+ font-family: var(--font-mono);
+ color: var(--text-muted);
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+.marker-detail-modal h3 {
+ margin: 4px 48px 4px 0;
+ font-size: 24px;
+}
+.gb-detail-status {
+ margin-right: 32px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ padding: 5px 10px;
+ color: var(--text-secondary);
+ background: var(--bg-card);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ white-space: nowrap;
+}
+.gb-detail-status-normal { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
+.gb-detail-status-high { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
+.gb-detail-status-low { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, var(--border)); }
+.marker-detail-modal .marker-description,
+.marker-detail-modal .gb-detail-summary,
+.marker-detail-modal .gb-range-band,
+.marker-detail-modal .gb-detail-section-label,
+.marker-detail-modal .modal-chart,
+.marker-detail-modal .modal-values-grid,
+.marker-detail-modal .modal-ref-info,
+.marker-detail-modal .calc-missing-inputs,
+.marker-detail-modal .manual-entry-btn,
+.marker-detail-modal .marker-note-section,
+.marker-detail-modal .ask-ai-btn {
+ margin-left: 28px;
+ margin-right: 28px;
+}
+.marker-detail-modal .manual-entry-btn,
+.marker-detail-modal .ask-ai-btn {
+ width: calc(100% - 56px);
+ display: block;
+}
+.marker-detail-modal .marker-description {
+ margin-top: 18px;
+}
+.gb-detail-summary {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+ margin-top: 20px;
+ margin-bottom: 16px;
+}
+.marker-detail-modal .stat-card {
+ padding: 14px 16px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+}
+.marker-detail-modal .stat-card-label {
+ font-family: var(--font-mono);
+ color: var(--text-muted);
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+.marker-detail-modal .stat-card-value {
+ margin-top: 6px;
+ color: var(--text-primary);
+ font-family: var(--font-display);
+ font-size: 30px;
+ font-weight: 700;
+ line-height: 1;
+}
+.marker-detail-modal .stat-card-value span {
+ color: var(--text-muted);
+ font-size: 13px;
+ font-weight: 500;
+}
+.marker-detail-modal .stat-card-value-range {
+ font-family: var(--font-mono);
+ font-size: 16px;
+}
+.marker-detail-modal .stat-card-value.val-normal { color: var(--green); }
+.marker-detail-modal .stat-card-value.val-high { color: var(--red); }
+.marker-detail-modal .stat-card-value.val-low { color: var(--yellow); }
+.marker-detail-modal .stat-card-meta {
+ margin-top: 7px;
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: 12px;
+}
+.gb-range-band {
+ position: relative;
+ height: 48px;
+ margin-top: 4px;
+ margin-bottom: 22px;
+}
+.gb-range-band-track {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 15px;
+ height: 14px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: var(--bg-card);
+}
+.gb-range-band-opt {
+ position: absolute;
+ top: 15px;
+ height: 14px;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--green) 34%, transparent);
+}
+.gb-range-band-dot {
+ position: absolute;
+ top: 10px;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ transform: translateX(-50%);
+ border: 3px solid var(--bg-secondary);
+ background: var(--text-muted);
+ box-shadow: 0 0 0 1px var(--border);
+}
+.gb-range-band-dot-normal { background: var(--green); }
+.gb-range-band-dot-high { background: var(--red); }
+.gb-range-band-dot-low { background: var(--yellow); }
+.gb-range-band-scale {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: space-between;
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 11px;
+}
+.marker-detail-modal .gb-detail-section-label {
+ margin-top: 18px;
+ margin-bottom: 10px;
+}
+.marker-detail-modal .modal-chart {
+ height: 260px;
+ margin-bottom: 22px;
+}
+/* Knowledge Base modal — wider than the default 700px to fit the
+ per-backend controls (model picker, library list, document list,
+ ingest UI) without horizontal cramping. */
+.kb-modal { max-width: 760px; }
+.modal-nudge { animation: modal-nudge 0.3s ease; }
+@keyframes modal-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); box-shadow: 0 0 0 2px var(--accent); } }
+.modal-close {
+ position: absolute; top: 16px; right: 16px;
+ background: none; border: none; color: var(--text-muted);
font-size: 24px; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--text-primary); }
@@ -652,7 +2173,7 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
background: transparent; color: var(--text-secondary); font-size: 12px;
cursor: pointer; transition: all 0.15s;
}
-.time-toggle-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
+.time-toggle-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.time-toggle-btn:hover:not(.active) { background: var(--bg-hover); }
/* Range Mode Toggle */
.range-toggle { display: flex; align-items: center; gap: 4px; }
@@ -661,7 +2182,7 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
background: transparent; color: var(--text-secondary); font-size: 12px;
cursor: pointer; font-weight: 500; transition: all 0.15s; font-family: inherit;
}
-.range-toggle-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
+.range-toggle-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.range-toggle-btn:hover:not(.active) { background: var(--bg-hover); }
/* Drop Zone */
.drop-zone {
@@ -670,8 +2191,8 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
transition: all 0.25s ease; margin-bottom: 24px; background: var(--bg-card);
}
.drop-zone:hover, .drop-zone.drag-over {
- border-color: var(--accent); background: rgba(79,140,255,0.05);
- transform: scale(1.01); box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.06);
+ border-color: var(--accent); background: var(--accent-fill);
+ transform: scale(1.01); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 6%, transparent);
}
.drop-zone-icon { font-size: 28px; margin-bottom: 6px; animation: dropBounce 2s ease-in-out infinite; }
@keyframes dropBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@@ -777,13 +2298,14 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
}
.import-map-select:focus { border-color: var(--accent); outline: none; }
.import-btn {
- padding: 8px 24px; border-radius: 6px; border: none;
- font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s;
+ padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
+ font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s;
+ display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
-.import-btn-primary { background: var(--accent-gradient); color: white; }
-.import-btn-primary:hover { box-shadow: 0 2px 12px rgba(79, 140, 255, 0.2); }
+.import-btn-primary { background: var(--accent); color: #07111f; border-color: var(--accent); }
+.import-btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.import-btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }
-.import-btn-secondary:hover { background: var(--bg-hover); }
+.import-btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); }
/* Correlation View */
.correlation-controls {
background: var(--bg-card); border-radius: var(--radius);
@@ -899,7 +2421,7 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.mv-note-text {
display: none; font-size: 11px; color: var(--yellow);
margin-top: 6px; padding: 6px 8px; line-height: 1.4;
- background: rgba(251, 191, 36, 0.08); border-radius: 4px;
+ background: var(--yellow-bg); border-radius: 4px;
text-align: left; word-break: break-word;
}
.mv-note-text.show { display: block; }
@@ -934,6 +2456,9 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
min-height: 90px; display: flex; flex-direction: column; overflow: visible; min-width: 0;
}
.context-card:hover { border-color: var(--accent); }
+.context-card:has(.ctx-health-dot-red) { border-left: 3px solid var(--red); }
+.context-card:has(.ctx-health-dot-yellow) { border-left: 3px solid var(--yellow); }
+.context-card:has(.ctx-health-dot-green) { border-left: 3px solid var(--green); }
.context-card-header {
display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-shrink: 0;
}
@@ -959,7 +2484,7 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.context-card:has(.context-card-placeholder):hover { opacity: 1; }
/* Food contaminant warnings on diet card */
.diet-contaminants {
- margin-top: 4px; font-size: 11px; color: #eab308; line-height: 1.4;
+ margin-top: 4px; font-size: 11px; color: var(--yellow); line-height: 1.4;
cursor: pointer; padding: 4px 0;
}
.diet-contaminants:hover { text-decoration: underline; }
@@ -971,10 +2496,10 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.contaminant-section-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.contaminant-detail-item {
font-size: 13px; line-height: 1.5; padding: 8px 10px; margin-bottom: 6px;
- background: var(--bg-card); border-radius: 6px; border-left: 3px solid #eab308;
+ background: var(--bg-card); border-radius: 6px; border-left: 3px solid var(--yellow);
}
.contaminant-detail-item a { color: var(--accent); font-size: 11px; margin-left: 4px; }
-.contaminant-section:last-of-type .contaminant-detail-item { border-left-color: #22c55e; }
+.contaminant-section:last-of-type .contaminant-detail-item { border-left-color: var(--green); }
.contaminant-actions { display: flex; gap: 8px; margin-top: 20px; }
.contaminant-attribution {
margin-top: 12px; font-size: 11px; color: var(--text-muted); text-align: center;
@@ -1600,10 +3125,10 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
}
.supp-list-item:not(:last-child):not(.supp-list-item-active) { margin-bottom: 6px; }
.supp-list-item:hover { border-color: var(--accent); }
-.supp-list-item-active { border-color: var(--accent); background: rgba(99, 135, 255, 0.06); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
+.supp-list-item-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.supp-list-expanded {
border: 1px solid var(--accent); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
- padding: 12px; margin-bottom: 6px; background: rgba(99, 135, 255, 0.03);
+ padding: 12px; margin-bottom: 6px; background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.supp-list-expanded .supp-form { border-top: none; padding-top: 0; margin-top: 0; }
.supp-add-section { margin-top: 8px; }
@@ -1685,7 +3210,7 @@ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
.supp-ing-pill { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
.supp-mitotox {
margin-top: 8px; padding: 8px 12px; border-radius: 8px;
- background: rgba(234, 179, 8, 0.06); border: 1px solid rgba(234, 179, 8, 0.15);
+ background: color-mix(in srgb, var(--yellow) 6%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 15%, transparent);
font-size: 12px; color: var(--text-secondary);
}
.supp-mitotox-header { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
@@ -2013,7 +3538,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
.settings-tab-btn.active { color: var(--accent); font-weight: 600; }
.settings-tab-btn.active::after {
background: var(--accent);
- box-shadow: 0 0 8px rgba(79, 140, 255, 0.3);
+ box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.settings-tab-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
.settings-tab-btn.active svg { opacity: 1; }
@@ -2089,24 +3614,66 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
}
.settings-theme-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.settings-theme-btn:hover:not(.active) { background: var(--bg-hover); }
-/* Chat FAB */
-.import-fab {
- position: fixed; bottom: 92px; right: 24px; z-index: 240;
- width: 44px; height: 44px; border-radius: 50%;
- background: var(--bg-card); color: var(--text-muted);
- cursor: pointer; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
- display: flex; align-items: center; justify-content: center;
- transition: transform 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s;
+.settings-theme-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+ margin-top: 6px;
}
-.import-fab:hover { transform: scale(1.08); color: var(--accent); border-color: var(--accent); box-shadow: 0 4px 20px rgba(79,140,255,0.2); }
-.import-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.import-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.import-fab.hidden { display: none; }
-.import-status-fab {
- position: fixed; bottom: 160px; right: 24px; z-index: 1001;
- height: 36px; border-radius: 18px; padding: 0 12px 0 10px;
- background: var(--bg-card); color: var(--text-muted);
- cursor: pointer; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
+.settings-theme-grid .settings-theme-btn {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 12px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ color: var(--text-primary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.12s, border-color 0.12s;
+}
+.settings-theme-grid .settings-theme-btn:hover { background: var(--bg-hover); }
+.settings-theme-grid .settings-theme-btn.active {
+ border-color: var(--accent);
+ background: var(--bg-hover);
+}
+.settings-theme-swatch {
+ width: 24px;
+ height: 24px;
+ border-radius: 6px;
+ flex-shrink: 0;
+ border: 1px solid rgba(255,255,255,0.06);
+}
+.settings-theme-swatch-dark { background: linear-gradient(135deg, #222635 0%, #4f8cff 100%); }
+.settings-theme-swatch-light { background: linear-gradient(135deg, #f5f6fa 0%, #3b7cf5 100%); }
+.settings-theme-swatch-cyberterm { background: linear-gradient(135deg, #0b0d0b 0%, #4ade80 100%); border-radius: 0; }
+.settings-theme-swatch-glass { background: linear-gradient(135deg, #c986ff 0%, #6ec4ff 100%); border-radius: 12px; }
+.settings-theme-swatch-synth-sunrise { background: linear-gradient(135deg, #ff7a18 0%, #ff2bd6 50%, #7c3aed 100%); border-radius: 2px; }
+.settings-theme-swatch-neuromancer { background: linear-gradient(135deg, #00e5ff 0%, #ff2bd6 100%); border-radius: 0; }
+@media (max-width: 480px) {
+ .settings-theme-grid { grid-template-columns: 1fr; }
+}
+/* Chat FAB */
+.import-fab {
+ position: fixed; bottom: 92px; right: 24px; z-index: 240;
+ width: 44px; height: 44px; border-radius: 50%;
+ background: var(--bg-card); color: var(--text-muted);
+ cursor: pointer; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
+ display: flex; align-items: center; justify-content: center;
+ transition: transform 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s;
+}
+.import-fab:hover { transform: scale(1.08); color: var(--accent); border-color: var(--accent); box-shadow: 0 4px 20px rgba(79,140,255,0.2); }
+.import-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.import-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.import-fab.hidden { display: none; }
+.import-status-fab {
+ position: fixed; bottom: 160px; right: 24px; z-index: 1001;
+ height: 36px; border-radius: 18px; padding: 0 12px 0 10px;
+ background: var(--bg-card); color: var(--text-muted);
+ cursor: pointer; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
display: flex; align-items: center; gap: 6px;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s, color 0.2s;
}
@@ -2117,7 +3684,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
.import-status-fab.is-running { border-color: var(--accent); color: var(--accent); }
.import-status-fab.is-running svg { animation: progressSpin 0.8s linear infinite; }
.import-status-fab.is-done { border-color: var(--green); color: var(--green); }
-.import-status-fab.is-failed { border-color: #ef4444; color: #ef4444; }
+.import-status-fab.is-failed { border-color: var(--red); color: var(--red); }
.chat-fab {
position: fixed; bottom: 24px; right: 24px; z-index: 240;
width: 56px; height: 56px; border-radius: 50%; border: none;
@@ -2133,7 +3700,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
.chat-fab-badge {
position: absolute; top: -2px; right: -2px;
width: 14px; height: 14px; border-radius: 50%;
- background: #ef4444; border: 2px solid var(--bg-card);
+ background: var(--red); border: 2px solid var(--bg-card);
pointer-events: none;
}
.chat-fab-nudge { animation: fabNudge 3s ease-in-out 2s 2; }
@@ -2392,8 +3959,8 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
background: var(--text-muted);
transition: background 0.15s;
}
-.chat-lens-indicator.active .chat-lens-dot { background: #22c55e; }
-.chat-lens-indicator.error .chat-lens-dot { background: #fbbf24; }
+.chat-lens-indicator.active .chat-lens-dot { background: var(--green); }
+.chat-lens-indicator.error .chat-lens-dot { background: var(--yellow); }
/* Local Knowledge Base — per-document row delete button */
.kb-doc-delete {
@@ -2409,7 +3976,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
transition: color 0.15s, background 0.15s;
}
.kb-doc-delete:hover {
- color: #ef4444;
+ color: var(--red);
background: var(--bg-hover);
}
@@ -2657,7 +4224,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
.chat-msg.chat-ai {
align-self: flex-start; background: var(--bg-card); color: var(--text-primary);
border: 1px solid var(--border); border-bottom-left-radius: 4px;
- border-left: 2px solid rgba(79, 140, 255, 0.3);
+ border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.chat-persona-label {
align-self: flex-start; font-size: 11px; color: var(--text-muted);
@@ -2854,7 +4421,7 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
}
.chat-drop-active {
outline: 2px dashed var(--accent); outline-offset: -4px;
- background: rgba(79, 140, 255, 0.05);
+ background: color-mix(in srgb, var(--accent) 5%, transparent);
}
@media (pointer: coarse) {
.chat-attach-btn, .chat-hd-btn { width: 44px; height: 44px; }
@@ -2891,10 +4458,10 @@ details[open] > .cl-archived-header::before { content: '\25BE '; }
transition: border-color 0.15s, background 0.15s, transform 0.05s;
font: inherit;
}
-.chat-quiz-option:hover { border-color: var(--accent); background: rgba(124, 58, 237, 0.06); }
+.chat-quiz-option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--purple) 6%, transparent); }
.chat-quiz-option:active { transform: translateY(1px); }
.chat-quiz-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.chat-quiz-recommended { border-color: rgba(124, 58, 237, 0.5); }
+.chat-quiz-recommended { border-color: color-mix(in srgb, var(--purple) 50%, transparent); }
.chat-quiz-recommended:hover { border-color: var(--accent); }
.chat-quiz-icon { font-size: 22px; line-height: 1; flex: 0 0 28px; text-align: center; }
.chat-quiz-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@@ -3099,8 +4666,15 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
}
.sidebar-search:focus { border-color: var(--accent); }
.sidebar-search::placeholder { color: var(--text-muted); }
+.sidebar-search-wrap .sidebar-search {
+ width: 100%;
+ margin: 0;
+ padding: 10px 12px 10px 36px;
+ border-radius: var(--radius-sm);
+}
@media (max-width: 1024px) {
.sidebar-search { width: calc(100% - 16px); margin: 4px 8px; }
+ .sidebar-search-wrap .sidebar-search { width: 100%; margin: 0; }
}
/* Chat Example Prompts */
.chat-prompts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; width: 100%; }
@@ -3150,6 +4724,45 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
width: auto; padding: 2px 8px; font-size: 11px; margin-left: 6px;
font-weight: 400; color: var(--text-muted); vertical-align: middle;
}
+.gb-form-modal .manual-entry-form { margin-top: 18px; }
+.gb-form-modal .manual-entry-form .me-field {
+ margin-bottom: 14px;
+}
+.gb-form-modal .manual-entry-form .me-field label {
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.gb-form-modal .manual-entry-form .me-field input,
+.gb-form-modal .manual-entry-form .me-field textarea,
+.gb-form-modal .manual-entry-form .me-field select,
+.gb-form-modal .api-key-input,
+.gb-form-modal .ctx-note-input,
+.gb-form-modal .ctx-notes-textarea,
+.settings-modal .api-key-input {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ color: var(--text-primary);
+ min-height: 40px;
+}
+.gb-form-modal .manual-entry-form .me-field input:focus,
+.gb-form-modal .manual-entry-form .me-field textarea:focus,
+.gb-form-modal .manual-entry-form .me-field select:focus,
+.gb-form-modal .api-key-input:focus,
+.gb-form-modal .ctx-note-input:focus,
+.gb-form-modal .ctx-notes-textarea:focus,
+.settings-modal .api-key-input:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-fill);
+}
+.gb-form-modal .cm-cat-row,
+.gb-form-modal .me-field > div {
+ min-width: 0;
+}
.sidebar-add-marker {
float: right; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border);
background: transparent; color: var(--text-muted); font-size: 14px; line-height: 18px; cursor: pointer;
@@ -3276,19 +4889,22 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7); z-index: 1200; display: none;
align-items: center; justify-content: center;
+ padding: 24px;
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
}
.confirm-overlay.show { display: flex; }
.confirm-dialog {
background: var(--bg-secondary); border-radius: var(--radius);
- border: 1px solid var(--border); padding: 28px 32px;
- max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+ border: 1px solid var(--border); padding: 24px 26px;
+ max-width: 460px; width: min(100%, 460px); box-shadow: var(--shadow-lg);
}
.confirm-message {
font-size: 15px; line-height: 1.6; color: var(--text-primary); margin-bottom: 24px;
}
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-btn {
- padding: 8px 20px; border-radius: 6px; border: none;
+ padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
font-size: 13px; font-weight: 600; cursor: pointer;
font-family: inherit; transition: all 0.15s;
}
@@ -3296,8 +4912,8 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border);
}
.confirm-btn-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }
-.confirm-btn-danger { background: var(--red); color: white; }
-.confirm-btn-danger:hover { opacity: 0.85; }
+.confirm-btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
+.confirm-btn-danger:hover { opacity: 0.9; transform: translateY(-1px); }
/* Trend Alert Cards */
.trend-alert-card {
display: flex; align-items: center; gap: 12px; padding: 10px 14px;
@@ -3332,9 +4948,9 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
.sync-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block; transition: background 0.3s;
}
-.sync-dot-synced { background: #22c55e; }
+.sync-dot-synced { background: var(--green); }
.sync-dot-syncing { background: var(--accent); animation: sync-pulse 1.5s ease-in-out infinite; }
-.sync-dot-offline { background: #fbbf24; }
+.sync-dot-offline { background: var(--yellow); }
.sync-dot-error { background: var(--red); }
@keyframes sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.sync-popover {
@@ -3423,10 +5039,10 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
.cycle-alert-icon { font-size: 18px; flex-shrink: 0; }
.cycle-alert strong { font-size: 13px; }
.cycle-alert-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
-.cycle-alert-perimenopause { background: rgba(245, 158, 11, 0.08); border-color: var(--yellow); }
-.cycle-alert-critical { background: rgba(239, 68, 68, 0.08); border-color: var(--red); }
-.cycle-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: var(--yellow); }
-.cycle-alert-info { background: rgba(59, 130, 246, 0.08); border-color: var(--accent); }
+.cycle-alert-perimenopause { background: var(--yellow-bg); border-color: var(--yellow); }
+.cycle-alert-critical { background: var(--red-bg); border-color: var(--red); }
+.cycle-alert-warning { background: var(--yellow-bg); border-color: var(--yellow); }
+.cycle-alert-info { background: var(--accent-fill); border-color: var(--accent); }
.cycle-editor-form { margin-top: 12px; }
.modal .supp-form-row { flex-wrap: wrap; }
.modal .supp-form-field { min-width: min(140px, 100%); }
@@ -3536,13 +5152,13 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
.dashboard-cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 10px; padding: 9px 16px;
- background: rgba(124, 58, 237, 0.08);
+ background: color-mix(in srgb, var(--purple) 8%, transparent);
border: 1px solid var(--purple); border-radius: 999px;
font-size: 13px; font-weight: 500; color: var(--purple);
cursor: pointer; font-family: inherit;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
-.dashboard-cta:hover { background: rgba(124, 58, 237, 0.18); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
+.dashboard-cta:hover { background: color-mix(in srgb, var(--purple) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent); }
.dashboard-cta:active { transform: translateY(1px); }
.dashboard-cta:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.dashboard-cta-icon { font-size: 15px; line-height: 1; }
@@ -3635,7 +5251,7 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
border-radius: var(--radius); cursor: pointer; transition: all 0.2s; min-width: 140px;
}
.demo-card:hover {
- border-color: var(--accent); background: rgba(79, 140, 255, 0.05); transform: translateY(-1px);
+ border-color: var(--accent); background: var(--accent-fill); transform: translateY(-1px);
}
.demo-card-avatar { font-size: 28px; line-height: 1; }
.demo-card-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
@@ -3705,7 +5321,7 @@ body.import-focus .welcome-hero > .drop-zone {
/* Dashboard reminder for users who skipped the AI provider quiz. */
.ai-reminder-banner {
display: flex; align-items: center; gap: 12px;
- background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.25);
+ background: color-mix(in srgb, var(--purple) 6%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 25%, transparent);
border-radius: var(--radius); padding: 12px 16px; margin-top: 16px;
}
.ai-reminder-icon { font-size: 22px; line-height: 1; flex: 0 0 28px; text-align: center; }
@@ -3778,10 +5394,10 @@ body.import-focus .welcome-hero > .drop-zone {
margin-top: 12px; line-height: 1.5;
}
.privacy-notice-success {
- background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); color: var(--green);
+ background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);
}
.privacy-notice-warning {
- background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.25); color: var(--yellow);
+ background: var(--yellow-bg); border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--yellow);
}
/* Local AI settings in Settings modal */
@@ -3969,11 +5585,11 @@ body.import-focus .welcome-hero > .drop-zone {
.privacy-status-title { font-size: 13px; font-weight: 600; }
.privacy-status-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.privacy-status-enhanced {
- background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25);
+ background: color-mix(in srgb, var(--green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
}
.privacy-status-enhanced .privacy-status-title { color: var(--green); }
.privacy-status-basic {
- background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.25);
+ background: color-mix(in srgb, var(--yellow) 8%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent);
}
.privacy-status-basic .privacy-status-title { color: var(--yellow); }
.privacy-configure-toggle {
@@ -4395,7 +6011,7 @@ body.import-focus .welcome-hero > .drop-zone {
.rec-section-gated { display: none; }
/* Rec disclosure & warnings */
.rec-disclosure-banner {
- background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25);
+ background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius); padding: 8px 10px; margin: 12px 0 8px;
font-size: 12px; line-height: 1.45; color: var(--text-secondary);
}
@@ -4459,12 +6075,18 @@ body.import-focus .welcome-hero > .drop-zone {
.analytics-consent-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.analytics-consent-btn { font-size: 12px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.analytics-consent-btn:hover { background: var(--bg-elevated, rgba(255,255,255,0.04)); color: var(--text-primary); border-color: var(--text-muted); }
-.analytics-consent-btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
-.analytics-consent-btn-primary:hover { filter: brightness(1.08); background: var(--accent); color: white; }
+.analytics-consent-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.analytics-consent-btn-primary:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent); }
@media (max-width: 600px) {
.analytics-consent-banner { left: 12px; right: 12px; transform: none; max-width: none; bottom: 12px; }
@keyframes analytics-consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
+@media (max-width: 800px) {
+ body.mobile-dashboard-active .analytics-consent-banner {
+ bottom: calc(96px + env(safe-area-inset-bottom));
+ z-index: 205;
+ }
+}
/* DNA-aware recommendation hints */
.rec-dna-hints { border-left: 3px solid var(--accent); padding: 8px 12px; margin-bottom: 10px; background: rgba(99, 102, 241, 0.04); border-radius: 0 var(--radius) var(--radius) 0; }
.rec-dna-row { font-size: 13px; padding: 4px 0; color: var(--text-secondary); line-height: 1.5; }
@@ -4474,11 +6096,11 @@ body.import-focus .welcome-hero > .drop-zone {
/* Tips badge on chart cards and context cards */
.ctx-tips-badge {
font-size: 9px; font-weight: 600; letter-spacing: 0.05em; color: var(--accent);
- padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(99, 102, 241, 0.4);
+ padding: 1px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: all 0.15s;
margin-left: 6px; vertical-align: middle;
}
-.ctx-tips-badge:hover { background: rgba(99, 102, 241, 0.15); border-color: var(--accent); }
+.ctx-tips-badge:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }
/* Tips modal */
.ctx-tips-modal-header { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.ctx-tip-slot { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
@@ -4524,7 +6146,7 @@ body.import-focus .welcome-hero > .drop-zone {
display: flex; gap: 6px; align-items: center;
}
.wearable-strip-stub-cta {
- background: var(--accent); color: #fff; border: none; padding: 6px 14px;
+ background: var(--accent); color: var(--on-accent); border: none; padding: 6px 14px;
border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.wearable-strip-stub-cta:hover { filter: brightness(1.08); }
@@ -4556,7 +6178,7 @@ body.import-focus .welcome-hero > .drop-zone {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
background: var(--yellow-bg); color: var(--yellow);
padding: 2px 7px; border-radius: 8px;
- border: 1px solid rgba(251, 191, 36, 0.25);
+ border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent);
cursor: pointer; transition: filter 0.15s;
}
.wearable-strip-demo-pill:hover { filter: brightness(1.1); }
@@ -4564,18 +6186,18 @@ body.import-focus .welcome-hero > .drop-zone {
user knows the ◀ ▶ arrows are intentional, not accidental. */
.wearable-strip-reorder-pill {
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
- background: var(--accent-bg, rgba(96, 165, 250, 0.12)); color: var(--accent, #60a5fa);
+ background: var(--accent-fill); color: var(--accent);
padding: 3px 9px; border-radius: 8px;
- border: 1px solid rgba(96, 165, 250, 0.35);
+ border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
white-space: nowrap;
}
/* Grid tint while reordering — a subtle accent so it's obviously different. */
.wearable-card-grid-reorder {
- background: var(--accent-bg, rgba(96, 165, 250, 0.04));
+ background: color-mix(in srgb, var(--accent) 4%, transparent);
border-radius: 14px;
padding: 8px;
margin: -8px;
- outline: 1px dashed rgba(96, 165, 250, 0.25);
+ outline: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Apple Health export how-to disclosure — long instructions live behind a
"How to export from your iPhone" summary so the dropzone is the headline. */
@@ -4860,7 +6482,7 @@ body.import-focus .welcome-hero > .drop-zone {
}
.wearable-delta.delta-good { background: var(--green-bg); color: var(--green); }
.wearable-delta.delta-bad { background: var(--red-bg); color: var(--red); }
-.wearable-delta.delta-flat { background: rgba(128,128,128,0.12); color: var(--text-muted); }
+.wearable-delta.delta-flat { background: var(--neutral-soft-bg); color: var(--text-muted); }
.wearable-value-row {
display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
@@ -4930,19 +6552,19 @@ body.import-focus .welcome-hero > .drop-zone {
.wearable-trend-pill {
font-size: 10px; font-weight: 500; color: var(--text-muted);
padding: 1px 6px; border-radius: 6px;
- background: rgba(128,128,128,0.08);
+ background: var(--neutral-soft-bg);
text-transform: none; letter-spacing: 0;
white-space: nowrap; flex-shrink: 0;
}
.wearable-trend-bad { color: var(--red); background: var(--red-bg); }
.wearable-trend-good { color: var(--green); background: var(--green-bg); }
.wearable-trend-improving { color: var(--green); background: var(--green-bg); }
-.wearable-trend-flat { color: var(--text-muted); background: rgba(128,128,128,0.08); }
+.wearable-trend-flat { color: var(--text-muted); background: var(--neutral-soft-bg); }
.wearable-source-badge {
font-size: 10px; font-weight: 600; color: var(--text-muted);
letter-spacing: 0.02em;
padding: 1px 5px; border-radius: 4px;
- background: rgba(128,128,128,0.08);
+ background: var(--neutral-soft-bg);
min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@@ -5128,7 +6750,7 @@ body.import-focus .welcome-hero > .drop-zone {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 8px;
}
-.wearable-adapter-chip-off { background: rgba(128,128,128,0.12); color: var(--text-muted); }
+.wearable-adapter-chip-off { background: var(--neutral-soft-bg); color: var(--text-muted); }
.wearable-adapter-chip-ok { background: var(--green-bg); color: var(--green); }
.wearable-adapter-chip-bad { background: var(--red-bg); color: var(--red); }
/* ── Apple Health file import dropzone ── */
@@ -5235,9 +6857,9 @@ body.import-focus .welcome-hero > .drop-zone {
}
.wearable-adapter-chip-beta {
- background: linear-gradient(90deg, rgba(168, 85, 247, 0.18), rgba(59, 130, 246, 0.18));
- color: #a78bfa;
- border: 1px solid rgba(168, 85, 247, 0.35);
+ background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
+ color: var(--purple);
+ border: 1px solid color-mix(in srgb, var(--purple) 35%, transparent);
font-size: 9px;
letter-spacing: 0.08em;
margin-left: 4px;
@@ -5277,7 +6899,7 @@ body.import-focus .welcome-hero > .drop-zone {
color: var(--accent);
}
.wearable-adapter-card.is-connected {
- border-color: rgba(79, 140, 255, 0.25);
+ border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
/* ── Unified adapter action button (replaces ad-hoc ctx-btn-option overrides) ── */
@@ -5488,15 +7110,15 @@ body.import-focus .welcome-hero > .drop-zone {
authorise them out-of-band (defence against mnemonic-leak mass-wipe). */
.sync-tombstone-banner {
margin-bottom: 16px; padding: 12px 14px;
- border: 1px solid #fbbf24; background: rgba(251,191,36,0.08);
+ border: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, transparent);
border-radius: 6px; font-size: 12px;
}
.sync-tombstone-head { margin-bottom: 8px; line-height: 1.45; }
-.sync-tombstone-head strong { color: #fbbf24; }
+.sync-tombstone-head strong { color: var(--yellow); }
.sync-tombstone-help { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.sync-tombstone-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
- border-top: 1px solid rgba(251,191,36,0.18);
+ border-top: 1px solid color-mix(in srgb, var(--yellow) 18%, transparent);
}
.sync-tombstone-name { flex: 1; font-weight: 500; color: var(--text-primary); }
.sync-tombstone-meta { font-size: 11px; color: var(--text-muted); }
@@ -5504,8 +7126,8 @@ body.import-focus .welcome-hero > .drop-zone {
font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer;
border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
}
-.sync-tombstone-apply { background: #ef4444; color: #fff; border-color: #ef4444; }
-.sync-tombstone-reject { background: #22c55e; color: #fff; border-color: #22c55e; }
+.sync-tombstone-apply { background: var(--red); color: #fff; border-color: var(--red); }
+.sync-tombstone-reject { background: var(--green); color: #fff; border-color: var(--green); }
/* ═══════════════════════════════════════════════
LIGHT & SUN — Light Today strip + dedicated page
@@ -5535,8 +7157,8 @@ body.import-focus .welcome-hero > .drop-zone {
.light-today-altitude {
font-size: 11px; color: var(--text-primary); font-weight: 600;
padding: 2px 8px; border-radius: 999px;
- background: rgba(245, 158, 11, 0.12);
- border: 1px solid rgba(245, 158, 11, 0.4);
+ background: var(--yellow-bg);
+ border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
margin-left: 6px;
}
.light-today-link { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; }
@@ -5631,11 +7253,11 @@ body.import-focus .welcome-hero > .drop-zone {
margin-left: auto;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
-/* CTA — brand gradient. Active (mid-session) flips to red as a "stop" cue. */
+/* CTA — active (mid-session) flips to red as a "stop" cue. */
.light-today-cta {
padding: 8px 16px;
- background: var(--accent-gradient);
- color: #fff;
+ background: var(--accent);
+ color: var(--on-accent);
border: none; border-radius: var(--radius-sm);
font-weight: 600; font-size: 13px;
cursor: pointer;
@@ -5643,6 +7265,7 @@ body.import-focus .welcome-hero > .drop-zone {
.light-today-cta:hover { filter: brightness(1.1); box-shadow: 0 2px 12px rgba(79, 140, 255, 0.2); }
.light-today-cta-active {
background: var(--red);
+ color: #fff;
}
.light-today-cta-active:hover { box-shadow: 0 2px 12px var(--red-bg); }
/* Secondary CTA used as a paired "🔴 Device" button next to the
@@ -5673,7 +7296,7 @@ body.import-focus .welcome-hero > .drop-zone {
top: -10px; left: 14px;
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 8px; border-radius: 10px;
- background: var(--accent); color: #fff;
+ background: var(--accent); color: var(--on-accent);
box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.light-active-session-pinned .sun-session { position: relative; }
@@ -5778,7 +7401,7 @@ body.import-focus .welcome-hero > .drop-zone {
.light-channel-hero {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 14px; border-radius: 8px;
- background: linear-gradient(135deg, rgba(79, 140, 255, 0.06), rgba(99, 102, 241, 0.04));
+ background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--purple) 4%, transparent));
border: 1px solid var(--border);
}
.light-channel-hero-primary {
@@ -5846,7 +7469,7 @@ body.import-focus .welcome-hero > .drop-zone {
padding: 8px 12px;
font-size: 11.5px; line-height: 1.5; color: var(--text-secondary);
border-left: 3px solid var(--text-muted);
- background: rgba(148, 163, 184, 0.06);
+ background: var(--neutral-soft-bg);
border-radius: 0 6px 6px 0;
}
.light-channel-banking-note strong {
@@ -6027,7 +7650,7 @@ body.import-focus .welcome-hero > .drop-zone {
.light-setup-chip-home-cool::before { background: #38bdf8; } /* sky blue */
.light-setup-chip-home-sun::before { background: var(--yellow); }
.light-setup-chip-home-neutral::before { background: var(--text-muted); }
-.light-setup-chip-eyewear::before { background: #a78bfa; } /* violet */
+.light-setup-chip-eyewear::before { background: var(--purple); } /* violet */
.light-setup-chip-ott.light-setup-chip-tier-0::before { background: var(--green); }
.light-setup-chip-ott.light-setup-chip-tier-1::before { background: var(--text-muted); }
.light-setup-chip-ott.light-setup-chip-tier-2::before { background: var(--yellow); }
@@ -6109,8 +7732,8 @@ body.import-focus .welcome-hero > .drop-zone {
.light-setup-step .ctx-label { display: block; margin-bottom: 4px; }
.light-setup-photo-row {
padding: 10px 12px;
- background: rgba(245, 158, 11, 0.08);
- border: 1px solid rgba(245, 158, 11, 0.3);
+ background: color-mix(in srgb, var(--yellow) 8%, transparent);
+ border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
border-radius: 8px;
font-size: 13px; line-height: 1.5;
}
@@ -6126,8 +7749,8 @@ body.import-focus .welcome-hero > .drop-zone {
.light-setup-photo-banner {
margin: 8px 0 12px;
padding: 8px 12px;
- background: rgba(245, 158, 11, 0.10);
- border: 1px solid rgba(245, 158, 11, 0.4);
+ background: color-mix(in srgb, var(--yellow) 10%, transparent);
+ border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
border-radius: 6px;
font-size: 12px; color: var(--text-primary);
line-height: 1.5;
@@ -6720,7 +8343,7 @@ body.import-focus .welcome-hero > .drop-zone {
color: var(--text-primary);
}
.light-env-today-on {
- background: rgba(34,197,94,0.08);
+ background: color-mix(in srgb, var(--green) 8%, transparent);
border-color: var(--green);
color: var(--green);
}
@@ -6776,14 +8399,14 @@ body.import-focus .welcome-hero > .drop-zone {
transition: all 0.15s;
}
.light-env-overflow:hover {
- background: rgba(244,67,54,0.08);
+ background: var(--alert-soft-bg);
color: var(--red);
border-color: var(--red);
}
.light-env-overflow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
- background: rgba(244,67,54,0.08);
+ background: var(--alert-soft-bg);
color: var(--red);
}
@@ -7646,7 +9269,7 @@ textarea.ctx-input { resize: vertical; min-height: 56px; }
font-weight: 600;
}
.conditions-now-event-uva .conditions-now-event-icon {
- color: #a78bfa; /* violet — matches the UV-A wavelength visually */
+ color: var(--purple); /* violet — matches the UV-A wavelength visually */
}
.conditions-now-event-now {
color: var(--accent); font-weight: 700;
@@ -7775,8 +9398,8 @@ textarea.ctx-input { resize: vertical; min-height: 56px; }
font-weight: 600;
padding: 1px 8px;
border-radius: 999px;
- background: rgba(245, 158, 11, 0.10);
- border: 1px solid rgba(245, 158, 11, 0.3);
+ background: color-mix(in srgb, var(--yellow) 10%, transparent);
+ border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
}
/* Trust footer — source attribution + refresh + inspect, always shown.
@@ -8275,9 +9898,9 @@ svg.sun-silhouette text.sun-silhouette-label {
font-size: 13px; line-height: 1.5;
border: 1px solid; display: block;
}
-.sun-uvi-warn { background: rgba(245, 158, 11, 0.10); border-color: var(--yellow, #f59e0b); color: var(--text-primary); }
-.sun-uvi-veryhigh { background: rgba(245, 158, 11, 0.15); border-color: var(--orange, #f97316); color: var(--text-primary); }
-.sun-uvi-extreme { background: rgba(239, 68, 68, 0.12); border-color: var(--red, #ef4444); color: var(--text-primary); }
+.sun-uvi-warn { background: var(--yellow-bg); border-color: var(--yellow); color: var(--text-primary); }
+.sun-uvi-veryhigh { background: var(--orange-bg); border-color: var(--orange); color: var(--text-primary); }
+.sun-uvi-extreme { background: var(--red-bg); border-color: var(--red); color: var(--text-primary); }
.sun-uvi-warn strong, .sun-uvi-veryhigh strong, .sun-uvi-extreme strong { color: var(--text-primary); }
/* Heat-stress chip on the active session card */
@@ -8285,8 +9908,8 @@ svg.sun-silhouette text.sun-silhouette-label {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 500;
- background: rgba(239, 68, 68, 0.10); color: var(--red, #ef4444);
- border: 1px solid rgba(239, 68, 68, 0.25);
+ background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red);
+ border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}
/* Eye-UV chip on the active session card (retinal exposure tracker) */
@@ -8294,10 +9917,10 @@ svg.sun-silhouette text.sun-silhouette-label {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 500;
- background: rgba(245, 158, 11, 0.10); color: var(--orange, #f97316);
- border: 1px solid rgba(245, 158, 11, 0.25);
+ background: color-mix(in srgb, var(--yellow) 10%, transparent); color: var(--orange);
+ border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent);
}
-.sun-session-retinal.warn { background: rgba(239, 68, 68, 0.12); color: var(--red, #ef4444); border-color: rgba(239, 68, 68, 0.30); }
+.sun-session-retinal.warn { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
/* Active-session inline controls — Pause/Resume + Sunscreen + Ozone.
Compact pill row beneath the meta line on active session cards. */
@@ -8372,27 +9995,27 @@ svg.sun-silhouette text.sun-silhouette-label {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 500;
- background: rgba(148, 163, 184, 0.18); color: var(--text-secondary);
+ background: var(--neutral-soft-bg); color: var(--text-secondary);
border: 1px solid var(--border);
}
.sun-session-forgot {
margin: 8px 0; padding: 8px 12px;
- background: rgba(245, 158, 11, 0.10);
- border: 1px solid rgba(245, 158, 11, 0.30);
+ background: color-mix(in srgb, var(--yellow) 10%, transparent);
+ border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
border-radius: var(--radius-sm);
font-size: 12px; line-height: 1.4;
cursor: pointer; color: var(--text-primary);
}
-.sun-session-forgot:hover { background: rgba(245, 158, 11, 0.15); }
+.sun-session-forgot:hover { background: color-mix(in srgb, var(--yellow) 15%, transparent); }
/* Vit-D daily budget chip on the dashboard Light Today row. */
.light-today-vitd-warn {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 500;
- background: rgba(239, 68, 68, 0.12); color: var(--red, #ef4444);
- border: 1px solid rgba(239, 68, 68, 0.30);
+ background: var(--red-bg); color: var(--red);
+ border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
margin-left: 8px;
}
.light-today-vitd-info {
@@ -8422,8 +10045,8 @@ svg.sun-silhouette text.sun-silhouette-label {
.light-med-carryover {
margin-top: 6px; font-size: 12px; color: var(--text-primary);
padding: 6px 10px; border-radius: 6px;
- background: rgba(245, 158, 11, 0.12);
- border: 1px solid rgba(245, 158, 11, 0.4);
+ background: var(--yellow-bg);
+ border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}
.light-explainer {
margin: 16px 0; padding: 0;
@@ -9077,6 +10700,628 @@ svg.sun-silhouette text.sun-silhouette-label {
.light-device-typeline { font-size: 10px; }
}
+/* Redesign chrome: header, sidebar, and Tweaks */
+.header {
+ min-height: 64px;
+ padding: 0 24px;
+ background: color-mix(in srgb, var(--bg-primary) 92%, var(--bg-secondary));
+ border-bottom: 1px solid var(--border);
+ gap: 18px;
+}
+.brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 190px;
+}
+.brand-mark,
+.header h1.brand-mark {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 20px;
+ line-height: 1;
+ font-weight: 800;
+ letter-spacing: 0;
+ color: var(--text-primary);
+ background: none;
+ -webkit-text-fill-color: currentColor;
+}
+.pill {
+ display: inline-flex;
+ align-items: center;
+ height: 22px;
+ padding: 0 8px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ color: var(--text-muted);
+ background: var(--bg-card);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+.header-mid {
+ flex: 1;
+ justify-content: center;
+ min-width: 0;
+ gap: 10px;
+}
+.header-right {
+ justify-content: flex-end;
+ gap: 8px;
+ min-width: 190px;
+}
+.chip {
+ display: inline-flex;
+ align-items: center;
+ min-height: 32px;
+ padding: 0 10px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ white-space: nowrap;
+}
+.chip .label,
+.header-info .label {
+ color: var(--text-muted);
+}
+.profile-compact-btn {
+ min-height: 34px;
+ padding: 4px 10px 4px 5px;
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+}
+.range-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0;
+ padding: 2px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+}
+.range-toggle-btn {
+ border: 0;
+ border-radius: calc(var(--radius-sm) - 2px);
+ background: transparent;
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 600;
+ padding: 6px 11px;
+}
+.range-toggle-btn.active {
+ background: var(--accent);
+ color: var(--on-accent);
+ border-color: transparent;
+}
+.header-icon-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ border-radius: var(--radius-sm);
+ border: 1px solid var(--border);
+ background: var(--bg-card);
+ color: var(--text-secondary);
+}
+.header-icon-btn:hover {
+ color: var(--text-primary);
+ border-color: var(--accent);
+ background: var(--bg-hover);
+}
+.donate-btn,
+.donate-btn:hover {
+ width: auto;
+ height: 36px;
+ padding: 0 14px;
+ border: 0;
+ background: #f7931a;
+ color: #030712;
+ font-size: 12px;
+ font-weight: 700;
+ text-decoration: none;
+ gap: 4px;
+ white-space: nowrap;
+}
+.sidebar {
+ top: 64px;
+ height: calc(100vh - 64px);
+ padding: 20px 16px;
+ background: var(--bg-primary);
+}
+.main {
+ margin-left: 260px;
+ max-width: calc(100vw - 260px);
+}
+.sidebar-search-wrap { margin: 0 0 18px; }
+.sidebar-search {
+ background: var(--bg-card);
+ border-color: var(--border);
+}
+.nav-section {
+ margin: 18px 8px 8px;
+ color: var(--text-muted);
+ letter-spacing: 0.1em;
+}
+.nav-item {
+ width: 100%;
+ min-height: 36px;
+ border: 0;
+ border-radius: var(--radius-sm);
+ color: var(--text-secondary);
+ font-size: 13px;
+}
+.nav-item:hover {
+ background: var(--bg-card);
+ color: var(--text-primary);
+}
+.nav-item.active,
+.nav-item.is-active {
+ background: var(--bg-card);
+ color: var(--text-primary);
+ border: 0;
+ font-weight: 600;
+}
+.nav-item.active .nav-item-icon,
+.nav-item.is-active .nav-item-icon {
+ color: var(--accent);
+}
+.nav-item-count,
+.nav-item .count,
+.nav-item .nav-count {
+ border: 1px solid var(--border);
+ background: var(--bg-card);
+ border-radius: 999px;
+ color: var(--text-muted);
+}
+.sidebar-add-marker {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-secondary);
+ cursor: pointer;
+}
+.sidebar-add-marker:hover {
+ color: var(--text-primary);
+ border-color: var(--accent);
+}
+.tweaks-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 850;
+ display: none;
+ background: rgba(0,0,0,0.22);
+}
+.tweaks-overlay.show { display: block; }
+.tweaks-panel {
+ position: absolute;
+ top: 76px;
+ right: 16px;
+ width: min(380px, calc(100vw - 24px));
+ max-height: calc(100vh - 92px);
+ overflow: hidden;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ background: var(--bg-secondary);
+ box-shadow: var(--shadow-lg);
+}
+.tweaks-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 18px 20px;
+ border-bottom: 1px solid var(--border);
+ background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
+}
+.tweaks-head .modal-close {
+ position: static;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 34px;
+ padding: 0;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-muted);
+ font-size: 22px;
+}
+.tweaks-body {
+ max-height: calc(100vh - 172px);
+ overflow-y: auto;
+ padding: 16px 20px 20px;
+}
+.tweaks-section {
+ padding: 14px 0;
+ border-bottom: 1px solid var(--border);
+}
+.tweaks-section:first-child { padding-top: 0; }
+.tweaks-section:last-child { border-bottom: 0; padding-bottom: 0; }
+.tweaks-section-title {
+ margin-bottom: 10px;
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+.tweaks-theme-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+}
+.tweaks-theme-btn,
+.tweaks-action-grid button {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ width: 100%;
+ padding: 9px 10px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ color: var(--text-primary);
+ font: inherit;
+ font-size: 13px;
+ cursor: pointer;
+ text-align: left;
+}
+.tweaks-theme-btn:hover,
+.tweaks-action-grid button:hover {
+ border-color: var(--accent);
+ background: var(--bg-hover);
+}
+.tweaks-theme-btn.active,
+.tweaks-accent-btn.active {
+ border-color: var(--accent);
+ box-shadow: inset 0 0 0 1px var(--accent-fill);
+}
+.tweaks-accent-row {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 8px;
+}
+.tweaks-accent-btn {
+ height: 38px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-card);
+ cursor: pointer;
+ padding: 4px;
+}
+.tweaks-accent-swatch {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ background: var(--tweak-gradient, var(--tweak-accent));
+}
+.tweaks-action-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 8px;
+}
+@media (max-width: 1024px) {
+ .sidebar {
+ top: 0;
+ height: 100vh;
+ padding: 18px 16px;
+ }
+ .main {
+ margin-left: 0;
+ max-width: 100%;
+ }
+}
+@media (max-width: 768px) {
+ .header {
+ min-height: 58px;
+ padding: 0 12px;
+ }
+ .brand { min-width: auto; }
+ .header-data-group,
+ .header-import-btn,
+ .feedback-btn,
+ .donate-btn {
+ display: none !important;
+ }
+ .header-mid {
+ flex: 0 1 auto;
+ margin-left: auto;
+ justify-content: flex-end;
+ }
+ .header-right {
+ min-width: auto;
+ gap: 6px;
+ }
+ .tweaks-panel {
+ top: 66px;
+ right: 8px;
+ width: calc(100vw - 16px);
+ max-height: calc(100vh - 74px);
+ }
+ .tweaks-body { max-height: calc(100vh - 156px); }
+}
+@media (max-width: 480px) {
+ .brand-mark,
+ .header h1.brand-mark {
+ font-size: 17px;
+ }
+ .profile-compact-btn {
+ background: transparent;
+ }
+ .tweaks-action-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Redesign catch-up: sidebar icons, compact chat rail, and typography glue. */
+.sidebar-search-icon,
+.nav-item-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 16px;
+ width: 16px;
+ height: 16px;
+ line-height: 1;
+}
+.sidebar-search-icon svg,
+.nav-item-icon svg {
+ display: block;
+ width: 15px;
+ height: 15px;
+ stroke: currentColor;
+}
+.nav-item-icon {
+ color: var(--text-muted);
+}
+.nav-item:hover .nav-item-icon {
+ color: var(--text-primary);
+}
+.nav-item.active .nav-item-icon,
+.nav-item.is-active .nav-item-icon {
+ color: var(--accent);
+}
+.nav-item-all .nav-item-dot,
+.nav-item[data-category="dashboard"] .nav-item-dot {
+ background: var(--accent);
+}
+.nav-item-count,
+.nav-item .count,
+.nav-item .flag-count,
+.nav-item .nav-count {
+ flex: 0 0 auto;
+ max-width: 86px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.nav-item-dot {
+ flex: 0 0 8px;
+}
+.sidebar-add-marker {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ float: none;
+}
+
+.chat-panel {
+ width: min(600px, 100vw);
+ background: var(--bg-secondary);
+ box-shadow: -16px 0 44px rgba(0, 0, 0, 0.36);
+}
+.chat-panel.open {
+ transform: translateX(0);
+}
+.chat-panel.chat-panel-fullscreen {
+ width: 100vw;
+}
+body.chat-open .main {
+ padding-right: calc(32px + min(600px, 100vw));
+}
+body.chat-open.chat-fullscreen .main {
+ padding-right: 32px;
+}
+body.chat-open .analytics-consent-banner {
+ transform: none;
+ z-index: 220;
+ animation: none;
+}
+@media (min-width: 769px) {
+ body.chat-open .analytics-consent-banner {
+ left: 18px;
+ right: auto;
+ transform: none;
+ max-width: min(640px, calc(100vw - 520px));
+ }
+}
+.chat-fab {
+ color: var(--on-accent);
+ box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.chat-fab:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--accent) 65%, transparent);
+}
+.chat-fab svg {
+ stroke: currentColor;
+}
+.chat-panel-conversation {
+ background: var(--bg-secondary);
+}
+.chat-header {
+ gap: 12px;
+ min-height: 64px;
+ padding: 14px 18px;
+ background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-card));
+}
+.chat-header-title {
+ font-size: 14px;
+ letter-spacing: 0;
+}
+.chat-header-model,
+.chat-personality-current-name,
+.chat-persona-label {
+ font-family: var(--font-mono);
+}
+.chat-header-actions {
+ gap: 6px;
+}
+.chat-summary-btn,
+.chat-clear-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ padding: 0;
+ border-radius: var(--radius-sm);
+}
+.chat-summary-btn svg,
+.chat-clear-btn svg {
+ display: block;
+ width: 15px;
+ height: 15px;
+}
+.chat-rail-toggle,
+.chat-fullscreen-btn,
+.chat-close-btn,
+.chat-thread-new-btn,
+.chat-thread-item-action,
+.chat-attach-btn,
+.chat-hd-btn,
+.chat-discuss-btn {
+ border-radius: var(--radius-sm);
+}
+.chat-fullscreen-btn,
+.chat-close-btn,
+.chat-rail-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ padding: 0;
+}
+.chat-thread-rail {
+ background: var(--bg-primary);
+}
+.chat-thread-rail.open {
+ width: 218px;
+}
+.chat-thread-item {
+ border-radius: var(--radius-sm);
+}
+.chat-personality-bar {
+ background: var(--bg-secondary);
+}
+.chat-personality-current {
+ padding: 8px 18px;
+}
+.chat-messages {
+ padding: 18px;
+ gap: 14px;
+}
+.chat-msg {
+ max-width: 85%;
+ padding: 12px 14px;
+ border-radius: var(--radius);
+ font-size: 14px;
+ line-height: 1.58;
+}
+.chat-msg.chat-ai {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-left: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
+ border-bottom-left-radius: var(--radius-sm);
+}
+.chat-msg.chat-user {
+ color: var(--on-accent);
+ border-bottom-right-radius: var(--radius-sm);
+}
+.chat-user a {
+ color: var(--on-accent);
+}
+.chat-input-area {
+ gap: 8px;
+ padding: 14px;
+ background: var(--bg-secondary);
+}
+.chat-input-row {
+ gap: 8px;
+ align-items: flex-end;
+}
+.chat-input {
+ min-height: 40px;
+ border-radius: var(--radius-sm);
+ background: var(--bg-primary);
+}
+.chat-send-btn {
+ width: 44px;
+ height: 40px;
+ border-radius: var(--radius-sm);
+ color: var(--on-accent);
+}
+.chat-send-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent);
+}
+.chat-prompt-btn,
+.chat-discuss-continue-btn,
+.chat-discuss-done-btn,
+.chat-quiz-option,
+.chat-setup-btn,
+.chat-onboard-next,
+.chat-onboard-cta {
+ border-radius: var(--radius-sm);
+}
+@media (min-width: 1400px) {
+ .chat-panel { width: 600px; }
+ body.chat-open .main { padding-right: calc(32px + 600px); }
+ body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ .chat-messages { padding: 18px; gap: 14px; }
+ .chat-header { padding: 14px 18px; }
+ .chat-input-area { padding: 14px; gap: 8px; }
+ .chat-personality-current { padding: 8px 18px; }
+ .chat-msg { font-size: 14px; padding: 12px 14px; }
+}
+@media (max-width: 768px) {
+ .chat-panel { width: 100%; }
+ body.chat-open .main { padding-right: 20px; }
+ body.chat-open.chat-fullscreen .main { padding-right: 20px; }
+ .chat-messages { padding: 14px 12px; }
+ .chat-msg { max-width: 92%; }
+}
+.chat-panel:has(.chat-thread-rail.open) {
+ width: min(820px, 100vw);
+}
+body.chat-open:has(#chat-thread-rail.open) .main {
+ padding-right: calc(32px + min(820px, 100vw));
+}
+body.chat-open.chat-fullscreen:has(#chat-thread-rail.open) .main {
+ padding-right: 32px;
+}
+@media (max-width: 768px) {
+ .chat-panel:has(.chat-thread-rail.open) { width: 100%; }
+ body.chat-open:has(#chat-thread-rail.open) .main { padding-right: 20px; }
+}
+
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
diff --git a/themes-extra.css b/themes-extra.css
new file mode 100644
index 00000000..d423fc80
--- /dev/null
+++ b/themes-extra.css
@@ -0,0 +1,570 @@
+/* ============================================================
+ themes-extra.css
+ Drop-in additional themes for getbased.
+ Uses the existing token names from styles.css :root -
+ no changes needed to feature CSS, just include this file
+ after styles.css and add "cyberterm" | "glass" | "synth-sunrise"
+ | "neuromancer" as valid values in theme.js.
+ ============================================================ */
+
+/* ------------------------------------------------------------
+ CYPHERPUNK TERMINAL - refined, mono, sharp corners.
+ ------------------------------------------------------------ */
+[data-theme="cyberterm"] {
+ --bg-primary: #0b0d0b;
+ --bg-secondary: #10130f;
+ --bg-card: #0e110d;
+ --bg-hover: #141812;
+ --border: #1f2e23;
+ --text-primary: #cfe9d6;
+ --text-secondary: #7ea88d;
+ --text-muted: #4a6b56;
+ --accent: #4ade80;
+ --accent-light: #6df09a;
+ --accent-fill: rgba(74,222,128,0.10);
+ --accent-gradient: linear-gradient(135deg, #4ade80 0%, #4ade80 100%);
+ --green: #4ade80;
+ --green-bg: rgba(74,222,128,0.12);
+ --red: #e54b4b;
+ --red-bg: rgba(229,75,75,0.12);
+ --yellow: #e0a93a;
+ --yellow-bg: rgba(224,169,58,0.12);
+ --orange: #d4a017;
+ --orange-bg: rgba(212,160,23,0.12);
+ --purple: #9ca5d4;
+ --purple-light: rgba(156,165,212,0.14);
+ --cyan: rgba(78,222,222,0.6);
+ --neutral-soft-bg: rgba(126, 168, 141, 0.08);
+ --alert-soft-bg: rgba(229, 75, 75, 0.10);
+ --ref-band: rgba(74,222,128,0.06);
+ --ref-border: rgba(74,222,128,0.25);
+ --chart-grid: rgba(31,46,35,0.6);
+ --chart-tooltip-bg: rgba(11,13,11,0.95);
+ --shadow: 2px 2px 0 #1f2e23;
+ --shadow-lg: 3px 3px 0 #1f2e23;
+ --shadow-glow: 0 0 0 1px var(--accent);
+ --radius: 0px;
+ --radius-sm: 0px;
+ --font-display: 'JetBrains Mono', ui-monospace, monospace;
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+[data-theme="cyberterm"] body {
+ font-family: 'JetBrains Mono', ui-monospace, monospace;
+}
+/* Signature touches - minimal, only on the chrome */
+[data-theme="cyberterm"] .header h1::before { content: "$ "; color: var(--text-muted); }
+@keyframes ct-cursor { 50% { opacity: 0; } }
+
+
+/* ------------------------------------------------------------
+ GLASS / LIQUID - translucent surfaces, ambient mesh.
+ ------------------------------------------------------------ */
+[data-theme="glass"] {
+ --bg-primary: #0a0817;
+ --bg-secondary: rgba(28, 22, 56, 0.5);
+ --bg-card: rgba(38, 30, 72, 0.35);
+ --bg-hover: rgba(50, 40, 92, 0.45);
+ --border: rgba(255, 255, 255, 0.12);
+ --text-primary: #f6f3ff;
+ --text-secondary: #c8bfe4;
+ --text-muted: #9c92ba;
+ --accent: #c986ff;
+ --accent-light: #e0a5ff;
+ --accent-fill: rgba(201,134,255,0.10);
+ --accent-gradient: linear-gradient(135deg, #c986ff 0%, #6ec4ff 100%);
+ --green: #34e1a8;
+ --green-bg: rgba(52,225,168,0.14);
+ --red: #ff6d8a;
+ --red-bg: rgba(255,109,138,0.14);
+ --yellow: #ffd56b;
+ --yellow-bg: rgba(255,213,107,0.14);
+ --orange: #ff9d5c;
+ --orange-bg: rgba(255,157,92,0.14);
+ --purple: #b794f6;
+ --purple-light: rgba(183,148,246,0.18);
+ --cyan: rgba(120,210,255,0.6);
+ --neutral-soft-bg: rgba(156, 146, 186, 0.12);
+ --alert-soft-bg: rgba(255,109,138,0.12);
+ --ref-band: rgba(201,134,255,0.08);
+ --ref-border: rgba(201,134,255,0.3);
+ --chart-grid: rgba(255,255,255,0.06);
+ --chart-tooltip-bg: rgba(20,15,40,0.85);
+ --shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 24px 60px -20px rgba(0,0,0,0.6);
+ --shadow-lg: 0 40px 80px -20px rgba(0,0,0,0.7);
+ --shadow-glow: 0 0 0 1px var(--accent), 0 8px 24px rgba(201,134,255,0.25);
+ --radius: 22px;
+ --radius-sm: 14px;
+ --font-display: 'Fraunces', Georgia, serif;
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+[data-theme="glass"] body {
+ background: #0a0817;
+ position: relative;
+ font-family: 'Inter', system-ui, sans-serif;
+}
+[data-theme="glass"] body::before {
+ content: "";
+ position: fixed; inset: -10%;
+ background:
+ radial-gradient(40% 40% at 18% 20%, rgba(196,99,255,0.55), transparent 60%),
+ radial-gradient(40% 40% at 80% 12%, rgba(99,180,255,0.5), transparent 65%),
+ radial-gradient(45% 45% at 70% 78%, rgba(180,99,255,0.55), transparent 60%),
+ radial-gradient(35% 35% at 20% 80%, rgba(255,150,99,0.5), transparent 65%);
+ filter: blur(40px);
+ z-index: 0;
+ pointer-events: none;
+ animation: glass-drift 28s ease-in-out infinite alternate;
+}
+@keyframes glass-drift {
+ 0% { transform: translate(0,0) scale(1); }
+ 50% { transform: translate(-3%, 2%) scale(1.05); }
+ 100% { transform: translate(2%, -2%) scale(1.02); }
+}
+[data-theme="glass"] .header,
+[data-theme="glass"] .sidebar,
+[data-theme="glass"] .main,
+[data-theme="glass"] .layout,
+[data-theme="glass"] .app-footer { position: relative; z-index: 1; }
+/* Frosted-glass treatment for primary card surfaces */
+[data-theme="glass"] .chart-card,
+[data-theme="glass"] .context-card,
+[data-theme="glass"] .focus-card,
+[data-theme="glass"] .lens-section,
+[data-theme="glass"] .trend-alert-card,
+[data-theme="glass"] .supp-timeline,
+[data-theme="glass"] .alert-card,
+[data-theme="glass"] .modal,
+[data-theme="glass"] .header,
+[data-theme="glass"] .sidebar {
+ backdrop-filter: blur(24px) saturate(160%);
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
+}
+
+
+/* ------------------------------------------------------------
+ SYNTH SUNRISE - synthwave horizon, gridded ground.
+ ------------------------------------------------------------ */
+[data-theme="synth-sunrise"] {
+ --bg-primary: #0d0524;
+ --bg-secondary: #150830;
+ --bg-card: rgba(28, 14, 64, 0.65);
+ --bg-hover: rgba(40, 22, 80, 0.75);
+ --border: rgba(255, 43, 214, 0.35);
+ --text-primary: #f6e8ff;
+ --text-secondary: #c8b0e4;
+ --text-muted: #9882b8;
+ --accent: #ff2bd6;
+ --accent-light: #ff6ce0;
+ --accent-fill: rgba(255,43,214,0.10);
+ --accent-gradient: linear-gradient(135deg, #ff7a18 0%, #ff2bd6 50%, #7c3aed 100%);
+ --green: #2bffb4;
+ --green-bg: rgba(43,255,180,0.14);
+ --red: #ff3b6b;
+ --red-bg: rgba(255,59,107,0.14);
+ --yellow: #ffd56b;
+ --yellow-bg: rgba(255,213,107,0.14);
+ --orange: #ff7a18;
+ --orange-bg: rgba(255,122,24,0.14);
+ --purple: #c084fc;
+ --purple-light: rgba(192,132,252,0.18);
+ --cyan: rgba(0,224,255,0.65);
+ --neutral-soft-bg: rgba(152, 130, 184, 0.12);
+ --alert-soft-bg: rgba(255,59,107,0.12);
+ --ref-band: rgba(255,43,214,0.06);
+ --ref-border: rgba(255,43,214,0.3);
+ --chart-grid: rgba(255,43,214,0.08);
+ --chart-tooltip-bg: rgba(13,5,36,0.92);
+ --shadow: 0 16px 40px -16px rgba(0,0,0,0.7), 0 0 24px -8px rgba(255,43,214,0.35);
+ --shadow-lg: 0 0 60px -10px rgba(255,43,214,0.45), 0 24px 60px -16px rgba(0,0,0,0.7);
+ --shadow-glow: 0 0 0 1px var(--accent), 0 0 24px rgba(255,43,214,0.4);
+ --radius: 4px;
+ --radius-sm: 2px;
+ --font-display: 'Orbitron', 'Outfit', sans-serif;
+ --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
+}
+[data-theme="synth-sunrise"] body {
+ background:
+ radial-gradient(60% 80% at 50% 95%, #ff7a18 0%, #ff2bd6 22%, #7c3aed 42%, #1c0a4a 70%, #0d0524 100%);
+ background-attachment: fixed;
+ position: relative;
+ font-family: 'Space Grotesk', 'Inter', sans-serif;
+}
+[data-theme="synth-sunrise"] body::before {
+ content: "";
+ position: fixed;
+ left: 0; right: 0; bottom: 0;
+ height: 50vh;
+ background:
+ linear-gradient(transparent 0%, rgba(255,43,214,0.18) 100%),
+ linear-gradient(to right, rgba(255,43,214,0.7) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255,43,214,0.7) 1px, transparent 1px);
+ background-size: 100% 100%, 60px 60px, 60px 60px;
+ transform: perspective(500px) rotateX(60deg);
+ transform-origin: center bottom;
+ mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 30%, black 70%);
+ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 30%, black 70%);
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0.5;
+ animation: synth-scroll 14s linear infinite;
+}
+@keyframes synth-scroll {
+ 0% { background-position: 0 0, 0 0, 0 0; }
+ 100% { background-position: 0 0, 0 60px, 0 60px; }
+}
+@media (prefers-reduced-motion: reduce) {
+ [data-theme="glass"] body::before,
+ [data-theme="synth-sunrise"] body::before {
+ animation: none;
+ }
+}
+[data-theme="synth-sunrise"] .header,
+[data-theme="synth-sunrise"] .sidebar,
+[data-theme="synth-sunrise"] .main,
+[data-theme="synth-sunrise"] .layout,
+[data-theme="synth-sunrise"] .app-footer { position: relative; z-index: 1; }
+
+
+/* ------------------------------------------------------------
+ NEUROMANCER - Chiba City neon, ICE blue + sodium magenta.
+ ------------------------------------------------------------ */
+[data-theme="neuromancer"] {
+ --bg-primary: #050608;
+ --bg-secondary: #0a0d12;
+ --bg-card: rgba(8, 11, 16, 0.7);
+ --bg-hover: rgba(14, 20, 28, 0.85);
+ --border: rgba(0, 229, 255, 0.22);
+ --text-primary: #c8e8f5;
+ --text-secondary: #8aa8b8;
+ --text-muted: #5a7585;
+ --accent: #00e5ff;
+ --accent-light: #5cf2ff;
+ --accent-fill: rgba(0,229,255,0.10);
+ --accent-gradient: linear-gradient(135deg, #00e5ff 0%, #ff2bd6 100%);
+ --green: #00ff9d;
+ --green-bg: rgba(0,255,157,0.14);
+ --red: #ff2244;
+ --red-bg: rgba(255,34,68,0.14);
+ --yellow: #ffb000;
+ --yellow-bg: rgba(255,176,0,0.14);
+ --orange: #ff7a18;
+ --orange-bg: rgba(255,122,24,0.14);
+ --purple: #ff2bd6;
+ --purple-light: rgba(255,43,214,0.18);
+ --cyan: rgba(0,229,255,0.6);
+ --neutral-soft-bg: rgba(90, 117, 133, 0.12);
+ --alert-soft-bg: rgba(255,34,68,0.12);
+ --ref-band: rgba(0,229,255,0.06);
+ --ref-border: rgba(0,229,255,0.3);
+ --chart-grid: rgba(0,229,255,0.08);
+ --chart-tooltip-bg: rgba(5,6,8,0.95);
+ --shadow: 0 0 0 1px rgba(0,229,255,0.1), 0 0 24px -6px rgba(0,229,255,0.3);
+ --shadow-lg: 0 0 60px -10px rgba(0,229,255,0.45), 0 0 120px -30px rgba(255,43,214,0.4);
+ --shadow-glow: 0 0 0 1px var(--accent), 0 0 24px rgba(0,229,255,0.45);
+ --radius: 0px;
+ --radius-sm: 0px;
+ --font-display: 'Major Mono Display', 'Share Tech Mono', ui-monospace, monospace;
+ --font-mono: 'Share Tech Mono', ui-monospace, monospace;
+}
+[data-theme="neuromancer"] body {
+ background-color: #050608;
+ position: relative;
+ font-family: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
+}
+/* Subtle dataspace grid */
+[data-theme="neuromancer"] body::before {
+ content: "";
+ position: fixed; inset: 0;
+ background-image:
+ linear-gradient(to right, rgba(0,229,255,0.05) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(0,229,255,0.05) 1px, transparent 1px);
+ background-size: 24px 24px;
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0.6;
+}
+[data-theme="neuromancer"] .header,
+[data-theme="neuromancer"] .sidebar,
+[data-theme="neuromancer"] .main,
+[data-theme="neuromancer"] .layout,
+[data-theme="neuromancer"] .app-footer { position: relative; z-index: 1; }
+
+
+/* ------------------------------------------------------------
+ Font preconnects - add these s to if you want
+ the new themes' fonts to load. (See README.)
+ ------------------------------------------------------------ */
+
+
+/* ------------------------------------------------------------
+ Phase 6 gap fixes - visual polish and contrast-safe theme glue.
+ ------------------------------------------------------------ */
+
+[data-theme="glass"] .layout,
+[data-theme="glass"] .main,
+[data-theme="synth-sunrise"] .layout,
+[data-theme="synth-sunrise"] .main,
+[data-theme="neuromancer"] .layout,
+[data-theme="neuromancer"] .main {
+ background: transparent;
+}
+
+[data-theme="glass"] .header,
+[data-theme="synth-sunrise"] .header,
+[data-theme="neuromancer"] .header {
+ background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+}
+
+[data-theme="glass"] .sidebar,
+[data-theme="synth-sunrise"] .sidebar,
+[data-theme="neuromancer"] .sidebar {
+ background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
+}
+
+[data-theme="cyberterm"] .chart-card,
+[data-theme="cyberterm"] .alert-card,
+[data-theme="cyberterm"] .context-card,
+[data-theme="cyberterm"] .focus-card,
+[data-theme="cyberterm"] .lens-section,
+[data-theme="cyberterm"] .fa-card,
+[data-theme="cyberterm"] .trend-alert-card,
+[data-theme="cyberterm"] .supp-timeline,
+[data-theme="cyberterm"] .stat-card {
+ box-shadow: var(--shadow);
+}
+
+[data-theme="cyberterm"] .chart-card:hover,
+[data-theme="cyberterm"] .alert-card:hover {
+ box-shadow: 3px 3px 0 var(--accent);
+}
+
+[data-theme="cyberterm"] { --on-accent: #0b0d0b; }
+[data-theme="glass"] { --on-accent: #1a0a2c; }
+[data-theme="synth-sunrise"] { --on-accent: #0d0524; }
+[data-theme="neuromancer"] { --on-accent: #050608; }
+
+[data-theme="cyberterm"] .brand-mark::before {
+ content: "$ ";
+ color: var(--text-muted);
+}
+
+[data-theme="synth-sunrise"] .header {
+ border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+ box-shadow:
+ 0 1px 0 color-mix(in srgb, var(--accent) 14%, transparent) inset,
+ 0 12px 24px -16px rgba(255, 43, 214, 0.4);
+}
+
+[data-theme="synth-sunrise"] .app-footer {
+ background:
+ linear-gradient(180deg, rgba(13, 5, 36, 0.86) 0%, rgba(7, 3, 20, 0.97) 100%);
+ border-top-color: rgba(255, 43, 214, 0.42);
+ box-shadow:
+ 0 -32px 90px rgba(13, 5, 36, 0.82),
+ inset 0 1px 0 rgba(255, 213, 107, 0.16);
+ backdrop-filter: blur(16px) saturate(120%);
+ -webkit-backdrop-filter: blur(16px) saturate(120%);
+}
+
+[data-theme="synth-sunrise"] .app-footer-logo {
+ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
+}
+
+[data-theme="synth-sunrise"] .app-footer-disclaimer {
+ color: #f2e6ff;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
+}
+
+[data-theme="synth-sunrise"] .app-footer-trademarks,
+[data-theme="synth-sunrise"] .app-footer-legal,
+[data-theme="synth-sunrise"] .app-footer-legal a,
+[data-theme="synth-sunrise"] .app-footer-socials a,
+[data-theme="synth-sunrise"] .app-footer-version,
+[data-theme="synth-sunrise"] .app-footer-version a {
+ color: #d9c4f5;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+[data-theme="synth-sunrise"] .app-footer-legal a:hover,
+[data-theme="synth-sunrise"] .app-footer-version a:hover,
+[data-theme="synth-sunrise"] .app-footer-socials a:hover {
+ color: #ffd56b;
+}
+
+[data-theme="neuromancer"] .header {
+ border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
+}
+
+[data-theme="neuromancer"] .brand-mark,
+[data-theme="neuromancer"] .header h1.brand-mark,
+[data-theme="neuromancer"] .app-footer-logo {
+ font-family: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
+ font-variant-caps: normal;
+ letter-spacing: 0;
+ text-transform: lowercase;
+}
+
+[data-theme="neuromancer"] body {
+ letter-spacing: 0.012em;
+}
+
+[data-theme="cyberterm"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
+[data-theme="cyberterm"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
+[data-theme="cyberterm"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+[data-theme="glass"] ::-webkit-scrollbar-track { background: transparent; }
+[data-theme="glass"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; }
+[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); }
+
+[data-theme="synth-sunrise"] ::-webkit-scrollbar-track { background: rgba(13, 5, 36, 0.5); }
+[data-theme="synth-sunrise"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 2px; }
+[data-theme="synth-sunrise"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+[data-theme="neuromancer"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
+[data-theme="neuromancer"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 0; }
+[data-theme="neuromancer"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+@media (prefers-reduced-motion: reduce) {
+ [data-theme="synth-sunrise"] body {
+ background-attachment: scroll;
+ }
+}
+
+[data-theme="glass"] .modal-overlay.show,
+[data-theme="synth-sunrise"] .modal-overlay.show,
+[data-theme="neuromancer"] .modal-overlay.show {
+ background: rgba(0, 0, 0, 0.82);
+}
+
+[data-theme="glass"] .status-normal,
+[data-theme="synth-sunrise"] .status-normal,
+[data-theme="neuromancer"] .status-normal {
+ border-color: color-mix(in srgb, var(--green) 45%, transparent);
+}
+
+[data-theme="glass"] .status-high,
+[data-theme="synth-sunrise"] .status-high,
+[data-theme="neuromancer"] .status-high {
+ border-color: color-mix(in srgb, var(--red) 45%, transparent);
+}
+
+[data-theme="glass"] .status-low,
+[data-theme="synth-sunrise"] .status-low,
+[data-theme="neuromancer"] .status-low {
+ border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
+}
+
+/* Sidebar/chat/font follow-up: wire body type and bring chat chrome in-theme. */
+[data-theme="cyberterm"] {
+ --font-body: 'JetBrains Mono', ui-monospace, monospace;
+}
+[data-theme="glass"] {
+ --font-body: 'Inter', system-ui, sans-serif;
+}
+[data-theme="synth-sunrise"] {
+ --font-body: 'Space Grotesk', 'Inter', sans-serif;
+}
+[data-theme="neuromancer"] {
+ --font-body: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
+}
+[data-theme="cyberterm"] body,
+[data-theme="glass"] body,
+[data-theme="synth-sunrise"] body,
+[data-theme="neuromancer"] body {
+ font-family: var(--font-body);
+}
+
+[data-theme="cyberterm"] .nav-item,
+[data-theme="cyberterm"] .sidebar-search,
+[data-theme="cyberterm"] .chat-panel,
+[data-theme="cyberterm"] .chat-fab,
+[data-theme="cyberterm"] .chat-msg,
+[data-theme="cyberterm"] .chat-input,
+[data-theme="cyberterm"] .chat-send-btn,
+[data-theme="cyberterm"] .chat-thread-item,
+[data-theme="cyberterm"] .chat-thread-new-btn,
+[data-theme="cyberterm"] .chat-fullscreen-btn,
+[data-theme="cyberterm"] .chat-close-btn,
+[data-theme="cyberterm"] .chat-rail-toggle {
+ border-radius: 0;
+}
+[data-theme="cyberterm"] .chat-panel {
+ border-left: 1px solid var(--border);
+ box-shadow: -3px 0 0 var(--border);
+}
+[data-theme="cyberterm"] .chat-fab {
+ width: 64px;
+ height: 64px;
+ background: var(--accent);
+ color: var(--on-accent);
+ border: 1px solid var(--border);
+ box-shadow: 3px 3px 0 var(--border);
+}
+[data-theme="cyberterm"] .chat-msg.chat-user,
+[data-theme="cyberterm"] .chat-send-btn {
+ background: var(--accent);
+ color: var(--on-accent);
+ border: 1px solid var(--border);
+ box-shadow: 2px 2px 0 var(--border);
+}
+[data-theme="cyberterm"] .chat-msg.chat-ai {
+ border-left-color: var(--accent);
+}
+
+[data-theme="glass"] .chat-panel,
+[data-theme="glass"] .chat-panel-conversation,
+[data-theme="glass"] .chat-header,
+[data-theme="glass"] .chat-personality-bar,
+[data-theme="glass"] .chat-input-area {
+ background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
+ backdrop-filter: blur(30px) saturate(160%);
+ -webkit-backdrop-filter: blur(30px) saturate(160%);
+}
+[data-theme="glass"] .chat-msg.chat-ai,
+[data-theme="glass"] .chat-input,
+[data-theme="glass"] .chat-thread-rail {
+ background: color-mix(in srgb, var(--bg-card) 82%, transparent);
+}
+
+[data-theme="synth-sunrise"] .chat-panel {
+ border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
+ box-shadow: -18px 0 48px -24px rgba(255, 43, 214, 0.62), var(--shadow-lg);
+}
+[data-theme="synth-sunrise"] .chat-header,
+[data-theme="synth-sunrise"] .chat-input-area {
+ border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+[data-theme="neuromancer"] .chat-panel {
+ border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
+ box-shadow: -18px 0 52px -26px rgba(0, 229, 255, 0.7), var(--shadow-lg);
+}
+[data-theme="neuromancer"] .chat-msg.chat-ai {
+ border-left-color: var(--accent);
+}
+
+/* Keep the app header sticky in every theme. Some atmospheric theme
+ surface rules lift the header into the body effect layer; that must
+ not downgrade the base sticky positioning. */
+[data-theme] .header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+/* Atmospheric theme wrappers should not change the app shell geometry. */
+[data-theme] .layout,
+[data-theme] .main {
+ position: static;
+ z-index: auto;
+}
+
+@media (min-width: 1025px) {
+ [data-theme] .sidebar {
+ position: fixed;
+ top: 64px;
+ left: 0;
+ height: calc(100vh - 64px);
+ z-index: 10;
+ }
+}
diff --git a/version.js b/version.js
index ff0d2602..4fbb3a30 100644
--- a/version.js
+++ b/version.js
@@ -2,4 +2,4 @@
// Classic script (not ES module) so it works in both browser and service worker.
// Browser:
+
-
+
diff --git a/js/chat.js b/js/chat.js
index b46a4da8..ef22cc18 100644
--- a/js/chat.js
+++ b/js/chat.js
@@ -1520,6 +1520,7 @@ export async function openChatPanel(prefillMessage) {
// dashboard reflows instead of hiding behind the panel; `.chat-
// fullscreen` cancels the shift since fullscreen covers everything.
document.body.classList.add('chat-open');
+ document.body.classList.remove('chat-autostart-reserved');
document.body.classList.toggle('chat-fullscreen', fullscreen);
backdrop.classList.add('open');
// Backdrop is now pointer-events: none — opening chat no longer
@@ -1580,7 +1581,7 @@ export function closeChatPanel() {
document.getElementById('chat-backdrop').classList.remove('open');
// body.style.overflow no longer set on open (so nothing to restore)
// Drop the dashboard-shift body classes so the layout reflows back.
- document.body.classList.remove('chat-open', 'chat-fullscreen', 'cards-focus', 'import-focus');
+ document.body.classList.remove('chat-open', 'chat-fullscreen', 'cards-focus', 'import-focus', 'chat-autostart-reserved');
const fab = document.getElementById('chat-fab');
if (fab) fab.classList.remove('hidden');
window.refreshMobileDashboardActiveTab?.();
diff --git a/js/theme.js b/js/theme.js
index 40296df0..87776a9b 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -90,9 +90,15 @@ function refreshThemeDependents() {
let toggleThemeFrame = 0;
let toggleThemeTimer = 0;
-function scheduleThemeCommit(theme) {
+let toggleReturnTheme = 'dark';
+function cancelScheduledThemeCommit() {
if (toggleThemeFrame && typeof window.cancelAnimationFrame === 'function') window.cancelAnimationFrame(toggleThemeFrame);
if (toggleThemeTimer) clearTimeout(toggleThemeTimer);
+ toggleThemeFrame = 0;
+ toggleThemeTimer = 0;
+}
+function scheduleThemeCommit(theme) {
+ cancelScheduledThemeCommit();
const commit = () => {
toggleThemeTimer = 0;
setTheme(theme);
@@ -112,7 +118,11 @@ function scheduleThemeCommit(theme) {
export function toggleTheme() {
const current = getTheme();
- scheduleThemeCommit(current === 'light' ? 'dark' : 'light');
+ cancelScheduledThemeCommit();
+ const next = current === 'light' ? (VALID_THEMES.includes(toggleReturnTheme) ? toggleReturnTheme : 'dark') : 'light';
+ if (current !== 'light') toggleReturnTheme = current;
+ setTheme(next);
+ refreshThemeDependents();
}
export function getChartColors() {
diff --git a/js/views.js b/js/views.js
index 575272c0..d9c93d87 100644
--- a/js/views.js
+++ b/js/views.js
@@ -4107,7 +4107,7 @@ export function showDashboard(data) {
// welcome-hero / context-details targets no longer exist in the
// data view, so the dimmed-peer rules would be no-ops anyway,
// but stripping the classes keeps body state clean.
- if (hasData) document.body.classList.remove('cards-focus', 'import-focus');
+ if (hasData) document.body.classList.remove('cards-focus', 'import-focus', 'chat-autostart-reserved');
// ── Demo-load in flight: short-lived placeholder while
// importDataJSON parses the demo blob (typically 2–3s). Without
@@ -4123,6 +4123,13 @@ export function showDashboard(data) {
// ── Empty state: welcome hero + collapsed context ──
if (!hasData) {
+ const shouldAutoOpenChat = state.chatHistory.length === 0
+ && Date.now() > _suppressEmptyDashboardChatUntil
+ && localStorage.getItem('labcharts-chat-fullscreen') !== 'true'
+ && typeof window !== 'undefined'
+ && window.innerWidth > 768
+ && !document.getElementById('chat-panel')?.classList.contains('open');
+ document.body.classList.toggle('chat-autostart-reserved', shouldAutoOpenChat);
// No AI configured? Tag the hero so CSS reorders children: demo-cards
// lift above the drop zone ("try before set-up"). With AI configured,
// drop zone leads since the user almost certainly intends to import.
@@ -4184,7 +4191,7 @@ export function showDashboard(data) {
// firing — openChatPanel idempotently re-toggles chat-panel-fullscreen
// from localStorage, which would stomp manual class state set by tests
// (or any other in-flight UI gesture).
- if (state.chatHistory.length === 0 && Date.now() > _suppressEmptyDashboardChatUntil) {
+ if (shouldAutoOpenChat || (state.chatHistory.length === 0 && Date.now() > _suppressEmptyDashboardChatUntil)) {
setTimeout(() => {
if (Date.now() <= _suppressEmptyDashboardChatUntil) return;
const latestData = getActiveData();
diff --git a/styles.css b/styles.css
index 8e2f0ede..a808b61d 100755
--- a/styles.css
+++ b/styles.css
@@ -289,7 +289,7 @@ body {
margin-left: auto; font-size: 10px; transition: transform 0.15s;
}
.sidebar-group-header:not(.collapsed) .sidebar-group-arrow { transform: rotate(90deg); }
-.main { flex: 1; padding: 24px 32px; margin-left: 260px; max-width: calc(100vw - 260px); }
+.main { flex: 1; min-height: calc(100vh - 57px + 180px); padding: 24px 32px; margin-left: 260px; max-width: calc(100vw - 260px); }
/* When chat is open, push the dashboard left by the chat panel's
responsive width so content stays visible alongside the chat
@@ -301,8 +301,10 @@ body {
padding — Chromium aborts the transition partway through when the
chat panel's own transform animation runs simultaneously. The snap
is barely perceptible alongside the panel's slide-in. */
-body.chat-open .main { padding-right: calc(32px + 560px); }
-body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+body.chat-open .main,
+body.chat-autostart-reserved .main { padding-right: calc(32px + 560px); }
+body.chat-open.chat-fullscreen .main,
+body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.app-footer { border-top: 1px solid var(--border); padding: 32px; }
.app-footer-row { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.app-footer-logo { font-family: var(--font-display); font-weight: 800; font-size: 18px; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -4647,7 +4649,8 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
.chat-panel { width: 100%; }
/* Mobile chat is full-screen takeover — no need to shift the
dashboard since the user can't see it anyway. */
- body.chat-open .main { padding-right: 20px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: 20px; }
.chat-thread-rail.open {
position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
z-index: 5; border-right: none;
@@ -4663,8 +4666,10 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
/* Responsive chat panel scaling for larger screens */
@media (min-width: 1400px) {
.chat-panel { width: 640px; }
- body.chat-open .main { padding-right: calc(32px + 640px); }
- body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: calc(32px + 640px); }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.chat-backdrop { background: rgba(0,0,0,0.15); }
.chat-messages { padding: 22px 28px; gap: 16px; }
.chat-header { padding: 18px 24px; }
@@ -4674,8 +4679,10 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
}
@media (min-width: 1600px) {
.chat-panel { width: 740px; }
- body.chat-open .main { padding-right: calc(32px + 740px); }
- body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: calc(32px + 740px); }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.chat-messages { padding: 24px 32px; gap: 16px; }
.chat-msg { font-size: 14.5px; }
.chat-header { padding: 18px 28px; }
@@ -4686,8 +4693,10 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
}
@media (min-width: 2000px) {
.chat-panel { width: 880px; }
- body.chat-open .main { padding-right: calc(32px + 880px); }
- body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: calc(32px + 880px); }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.chat-backdrop { background: rgba(0,0,0,0.08); }
.chat-messages { padding: 28px 36px; gap: 18px; }
.chat-msg { font-size: 15px; padding: 14px 20px; }
@@ -4700,8 +4709,10 @@ select.chat-onboard-unit-select:hover { border-color: var(--accent); }
}
@media (min-width: 3000px) {
.chat-panel { width: 1060px; }
- body.chat-open .main { padding-right: calc(32px + 1060px); }
- body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: calc(32px + 1060px); }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.chat-messages { padding: 32px 42px; gap: 20px; }
.chat-msg { font-size: 16px; padding: 16px 24px; }
.chat-header { padding: 22px 36px; }
@@ -11187,10 +11198,12 @@ svg.sun-silhouette text.sun-silhouette-label {
.chat-panel.chat-panel-fullscreen {
width: 100vw;
}
-body.chat-open .main {
+body.chat-open .main,
+body.chat-autostart-reserved .main {
padding-right: calc(32px + min(600px, 100vw));
}
-body.chat-open.chat-fullscreen .main {
+body.chat-open.chat-fullscreen .main,
+body.chat-autostart-reserved.chat-fullscreen .main {
padding-right: 32px;
}
body.chat-open .analytics-consent-banner {
@@ -11367,8 +11380,10 @@ body.chat-open .analytics-consent-banner {
@media (min-width: 1400px) {
.chat-panel { width: 600px; }
- body.chat-open .main { padding-right: calc(32px + 600px); }
- body.chat-open.chat-fullscreen .main { padding-right: 32px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: calc(32px + 600px); }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 32px; }
.chat-messages { padding: 18px; gap: 14px; }
.chat-header { padding: 14px 18px; }
.chat-input-area { padding: 14px; gap: 8px; }
@@ -11377,8 +11392,10 @@ body.chat-open .analytics-consent-banner {
}
@media (max-width: 768px) {
.chat-panel { width: 100%; }
- body.chat-open .main { padding-right: 20px; }
- body.chat-open.chat-fullscreen .main { padding-right: 20px; }
+ body.chat-open .main,
+ body.chat-autostart-reserved .main { padding-right: 20px; }
+ body.chat-open.chat-fullscreen .main,
+ body.chat-autostart-reserved.chat-fullscreen .main { padding-right: 20px; }
.chat-messages { padding: 14px 12px; }
.chat-msg { max-width: 92%; }
}
@@ -11388,12 +11405,19 @@ body.chat-open .analytics-consent-banner {
body.chat-open:has(#chat-thread-rail.open) .main {
padding-right: calc(32px + min(820px, 100vw));
}
+body.chat-autostart-reserved:has(#chat-thread-rail.open) .main {
+ padding-right: calc(32px + min(820px, 100vw));
+}
body.chat-open.chat-fullscreen:has(#chat-thread-rail.open) .main {
padding-right: 32px;
}
+body.chat-autostart-reserved.chat-fullscreen:has(#chat-thread-rail.open) .main {
+ padding-right: 32px;
+}
@media (max-width: 768px) {
.chat-panel:has(.chat-thread-rail.open) { width: 100%; }
body.chat-open:has(#chat-thread-rail.open) .main { padding-right: 20px; }
+ body.chat-autostart-reserved:has(#chat-thread-rail.open) .main { padding-right: 20px; }
}
/* Reduced motion */
diff --git a/version.js b/version.js
index 4fbb3a30..598c4d66 100644
--- a/version.js
+++ b/version.js
@@ -2,4 +2,4 @@
// Classic script (not ES module) so it works in both browser and service worker.
// Browser:
-
+
-
-
-
@@ -102,7 +106,7 @@
Add Value Manually
+ modal.innerHTML = `
+
+
+
+
+ ${escapeHTML(data.categories[catKey]?.label || catKey)}
+ Add Value Manually
+ ${escapeHTML(marker.name)} \u00b7 ${escapeHTML(marker.unit)}${refText ? ' \u00b7 ' + refText : ''}
@@ -4378,11 +5677,12 @@ export function openManualEntryForm(id, prefillDate) {
-
+
+
Create New Biomarker
+ modal.innerHTML = `
+
+
+
+
+ Custom marker
+ Create New Biomarker
+
@@ -4579,10 +5886,11 @@ export function openCreateMarkerModal() {
+
+