/*
  Liên Second POC UI foundation
  Icons: Lucide Static 1.16.0 (ISC), pinned via unpkg.
  Typography: compact, readable scale for Calm Workspace.
*/

:root {
  --type-meta: 11px;
  --type-caption: 12px;
  --type-body: 14px;
  --type-body-lg: 15px;
  --type-section: 18px;
  --type-title: 24px;
  --type-display: 28px;

  --lucide-home: url("https://unpkg.com/lucide-static@1.16.0/icons/home.svg");
  --lucide-search: url("https://unpkg.com/lucide-static@1.16.0/icons/search.svg");
  --lucide-inbox: url("https://unpkg.com/lucide-static@1.16.0/icons/inbox.svg");
  --lucide-workspaces: url("https://unpkg.com/lucide-static@1.16.0/icons/panels-top-left.svg");
  --lucide-work: url("https://unpkg.com/lucide-static@1.16.0/icons/list-checks.svg");
  --lucide-devices: url("https://unpkg.com/lucide-static@1.16.0/icons/monitor-smartphone.svg");
  --lucide-bot: url("https://unpkg.com/lucide-static@1.16.0/icons/bot.svg");
  --lucide-settings: url("https://unpkg.com/lucide-static@1.16.0/icons/settings.svg");
  --lucide-overview: url("https://unpkg.com/lucide-static@1.16.0/icons/layout-dashboard.svg");
  --lucide-conversations: url("https://unpkg.com/lucide-static@1.16.0/icons/messages-square.svg");
  --lucide-code: url("https://unpkg.com/lucide-static@1.16.0/icons/code-xml.svg");
  --lucide-knowledge: url("https://unpkg.com/lucide-static@1.16.0/icons/notebook-tabs.svg");
  --lucide-backtest: url("https://unpkg.com/lucide-static@1.16.0/icons/chart-line.svg");
  --lucide-training: url("https://unpkg.com/lucide-static@1.16.0/icons/cpu.svg");
  --lucide-trading: url("https://unpkg.com/lucide-static@1.16.0/icons/chart-candlestick.svg");
  --lucide-data: url("https://unpkg.com/lucide-static@1.16.0/icons/database.svg");
  --lucide-today: url("https://unpkg.com/lucide-static@1.16.0/icons/sun.svg");
  --lucide-calendar: url("https://unpkg.com/lucide-static@1.16.0/icons/calendar-days.svg");
  --lucide-databases: url("https://unpkg.com/lucide-static@1.16.0/icons/table-2.svg");
  --lucide-monitor: url("https://unpkg.com/lucide-static@1.16.0/icons/monitor.svg");
  --lucide-laptop: url("https://unpkg.com/lucide-static@1.16.0/icons/laptop.svg");
  --lucide-phone: url("https://unpkg.com/lucide-static@1.16.0/icons/smartphone.svg");
  --lucide-server: url("https://unpkg.com/lucide-static@1.16.0/icons/server.svg");
  --lucide-nas: url("https://unpkg.com/lucide-static@1.16.0/icons/hard-drive.svg");
  --lucide-moon: url("https://unpkg.com/lucide-static@1.16.0/icons/moon.svg");
  --lucide-menu: url("https://unpkg.com/lucide-static@1.16.0/icons/menu.svg");
  --lucide-chevron-down: url("https://unpkg.com/lucide-static@1.16.0/icons/chevron-down.svg");
  --lucide-chevron-right: url("https://unpkg.com/lucide-static@1.16.0/icons/chevron-right.svg");
  --lucide-arrow-up-right: url("https://unpkg.com/lucide-static@1.16.0/icons/arrow-up-right.svg");
  --lucide-x: url("https://unpkg.com/lucide-static@1.16.0/icons/x.svg");
}

/* Typography scale: metadata 11, caption 12, body 14, lead 15, section 18, title 24, display 28. */
body {
  font-size: var(--type-body);
  line-height: 1.5;
}

.prototype-strip,
.workspace-copy small,
.workspace-presence,
.context-path,
.focus-trigger,
.quiet-button,
.attention-button,
.conversation-mini b,
.related-devices-link strong,
.primary-button,
.secondary-button,
.text-action,
.mode-switch button,
.focus-block p,
.focus-line,
.runtime-lines > div,
.focus-timeline strong,
.muted-copy,
.status-kicker,
.overview-lines span,
.module-proof-list small,
.chat-author strong,
.activity-note strong,
.workbench-state strong,
.step-list strong,
.workbench-context p,
.work-row,
.inline-note,
.work-proof,
.view-tabs button,
.knowledge-filters button,
.relation-list strong,
.empty-relation,
.empty-state,
.picker-intro,
.command-empty {
  font-size: var(--type-caption);
}

.workspace-copy strong,
.module-item,
.page-header p,
.conversation-header p,
.device-detail > p,
.overview-lead p,
.workbench-primary > p,
.note-body-copy,
.chat-body,
.composer-box textarea {
  font-size: var(--type-body);
}

.module-group-label,
.related-devices-link small,
.sidebar-foot-note,
.eyebrow,
.focus-label,
.focus-section h3,
.device-detail h3,
.note-meta,
.command-section-label,
.context-stack span,
.conversation-mini em,
.focus-timeline small,
.attention-panel p,
.attention-panel button,
.focus-chips span,
.capability-list span,
.knowledge-row small,
.device-row small,
.device-status,
.run-list small,
.settings-list small,
.relation-list small,
.simple-results b,
.prototype-callout p,
.training-run small,
.training-timeline small,
.dashboard-status-line,
.market-list span,
.market-list small,
.extension-relations button,
.run-state small,
.autopilot-flow li span,
.today-intro span,
.today-intro p,
.calendar-strip span,
.calendar-strip small,
.home-now-side > span,
.home-now-side small,
.recent-list small,
.recent-list b,
.workspace-directory small,
.workspace-directory em,
.workspace-directory button > b,
.settings-list b,
.workspace-card small,
.workspace-card p,
.workspace-card em,
.workspace-card > b,
.command-results small,
.command-results kbd,
.context-stack small,
.context-warning p,
.toast small {
  font-size: var(--type-meta);
}

.page-header h1,
.note-detail h1,
.device-detail h1 {
  font-size: var(--type-display);
  line-height: 1.16;
}

.conversation-header h1 {
  font-size: var(--type-title);
  line-height: 1.18;
}

.section-heading h2,
.focus-panel-head h2 {
  font-size: var(--type-section);
}

.overview-lead h2,
.workbench-primary h2,
.home-now-copy h2,
.market-primary h2 {
  font-size: 22px;
}

.note-lead {
  font-size: var(--type-body-lg);
}

.knowledge-list-pane .page-header h1,
.device-list-pane .page-header h1 {
  font-size: var(--type-title);
}

.knowledge-row strong,
.device-row strong,
.run-list strong,
.settings-list strong {
  font-size: 13px;
}

.simple-results strong,
.prototype-callout strong,
.training-timeline strong,
.market-primary p,
.market-list strong,
.run-state strong,
.recent-list strong,
.workspace-directory strong,
.big-search strong,
.workspace-card strong,
.command-results strong,
.context-stack strong,
.mobile-global-links button strong,
.toast strong {
  font-size: var(--type-caption);
}

.today-intro strong,
.calendar-strip strong {
  font-size: 20px;
}

.picker-head h2 {
  font-size: 20px;
}

@media (max-width: 767px) {
  .prototype-strip { font-size: var(--type-meta); }
  .page-header h1,
  .conversation-header h1,
  .note-detail h1,
  .device-detail h1 { font-size: var(--type-title); }
  .chat-body { font-size: var(--type-body); }
  .note-lead { font-size: var(--type-body-lg); }
}

@media (max-width: 420px) {
  .page-header p,
  .conversation-header p { font-size: var(--type-caption); }
  .home-now-copy h2 { font-size: 21px; }
}

/* Lucide icon layer. Existing glyph text remains as fallback when mask-image is unsupported. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .rail-icon,
  .module-icon,
  .device-symbol,
  #themeButton,
  .mobile-nav-button,
  .search-trigger > span:first-child,
  .command-search > span:first-child,
  .chevron,
  .sidebar-dismiss,
  #focusClose,
  #mobileGlobalClose,
  [data-close-picker],
  [data-close-context],
  .related-devices-link > span:first-child,
  .related-devices-link > b,
  .relation-list button > b,
  .mobile-global-links button > span:first-child {
    font-size: 0;
  }

  .rail-icon::before,
  .module-icon::before,
  .device-symbol::before,
  #themeButton::before,
  .mobile-nav-button::before,
  .search-trigger > span:first-child::before,
  .command-search > span:first-child::before,
  .chevron::before,
  .sidebar-dismiss::before,
  #focusClose::before,
  #mobileGlobalClose::before,
  [data-close-picker]::before,
  [data-close-context]::before,
  .related-devices-link > span:first-child::before,
  .related-devices-link > b::before,
  .relation-list button > b::before,
  .mobile-global-links button > span:first-child::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: var(--ui-icon);
    mask-image: var(--ui-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .rail-icon::before { width: 19px; height: 19px; }
  .module-icon::before,
  .device-symbol::before { width: 17px; height: 17px; }
  .chevron::before,
  .related-devices-link > b::before,
  .relation-list button > b::before { width: 15px; height: 15px; }

  .rail-item[data-global="home"] .rail-icon { --ui-icon: var(--lucide-home); }
  .rail-item[data-global="search"] .rail-icon { --ui-icon: var(--lucide-search); }
  .rail-item[data-global="inbox"] .rail-icon { --ui-icon: var(--lucide-inbox); }
  .rail-item[data-global="workspaces"] .rail-icon { --ui-icon: var(--lucide-workspaces); }
  .rail-item[data-global="my-work"] .rail-icon { --ui-icon: var(--lucide-work); }
  .rail-item[data-global="devices"] .rail-icon { --ui-icon: var(--lucide-devices); }
  .rail-item[data-global="autopilot"] .rail-icon { --ui-icon: var(--lucide-bot); }
  .rail-item[data-global="settings"] .rail-icon { --ui-icon: var(--lucide-settings); }

  .module-item[data-module="overview"] .module-icon { --ui-icon: var(--lucide-overview); }
  .module-item[data-module="conversations"] .module-icon { --ui-icon: var(--lucide-conversations); }
  .module-item[data-module="vibe-code"] .module-icon { --ui-icon: var(--lucide-code); }
  .module-item[data-module="work"] .module-icon,
  .module-item[data-module="my-work"] .module-icon { --ui-icon: var(--lucide-work); }
  .module-item[data-module="knowledge"] .module-icon,
  .module-item[data-module="notes"] .module-icon { --ui-icon: var(--lucide-knowledge); }
  .module-item[data-module="autopilot"] .module-icon { --ui-icon: var(--lucide-bot); }
  .module-item[data-module="backtest"] .module-icon { --ui-icon: var(--lucide-backtest); }
  .module-item[data-module="training"] .module-icon { --ui-icon: var(--lucide-training); }
  .module-item[data-module="trading-dashboard"] .module-icon { --ui-icon: var(--lucide-trading); }
  .module-item[data-module="data"] .module-icon { --ui-icon: var(--lucide-data); }
  .module-item[data-module="today"] .module-icon { --ui-icon: var(--lucide-today); }
  .module-item[data-module="calendar"] .module-icon { --ui-icon: var(--lucide-calendar); }
  .module-item[data-module="databases"] .module-icon { --ui-icon: var(--lucide-databases); }

  .device-row[data-device="pc-main"] .device-symbol { --ui-icon: var(--lucide-monitor); }
  .device-row[data-device="laptop"] .device-symbol { --ui-icon: var(--lucide-laptop); }
  .device-row[data-device="android"] .device-symbol { --ui-icon: var(--lucide-phone); }
  .device-row[data-device="vps"] .device-symbol { --ui-icon: var(--lucide-server); }
  .device-row[data-device="nas"] .device-symbol { --ui-icon: var(--lucide-nas); }

  #themeButton { --ui-icon: var(--lucide-moon); }
  .mobile-nav-button { --ui-icon: var(--lucide-menu); }
  .search-trigger > span:first-child,
  .command-search > span:first-child { --ui-icon: var(--lucide-search); }
  .chevron { --ui-icon: var(--lucide-chevron-down); }
  .sidebar-dismiss,
  #focusClose,
  #mobileGlobalClose,
  [data-close-picker],
  [data-close-context] { --ui-icon: var(--lucide-x); }
  .related-devices-link > span:first-child { --ui-icon: var(--lucide-devices); }
  .related-devices-link > b { --ui-icon: var(--lucide-arrow-up-right); }
  .relation-list button > b { --ui-icon: var(--lucide-chevron-right); }

  .mobile-global-links button[data-mobile-global="home"] > span:first-child { --ui-icon: var(--lucide-home); }
  .mobile-global-links button[data-mobile-global="search"] > span:first-child { --ui-icon: var(--lucide-search); }
  .mobile-global-links button[data-mobile-global="inbox"] > span:first-child { --ui-icon: var(--lucide-inbox); }
  .mobile-global-links button[data-mobile-global="workspaces"] > span:first-child { --ui-icon: var(--lucide-workspaces); }
  .mobile-global-links button[data-mobile-global="my-work"] > span:first-child { --ui-icon: var(--lucide-work); }
  .mobile-global-links button[data-mobile-global="devices"] > span:first-child { --ui-icon: var(--lucide-devices); }
  .mobile-global-links button[data-mobile-global="autopilot"] > span:first-child { --ui-icon: var(--lucide-bot); }
  .mobile-global-links button[data-mobile-global="settings"] > span:first-child { --ui-icon: var(--lucide-settings); }

  .rail-icon,
  .module-icon,
  .device-symbol { color: var(--muted); }
  .rail-item.active .rail-icon,
  .module-item.active .module-icon,
  .device-row.active .device-symbol { color: var(--green); }
}