/* Global tokens + shared primitives. Theme values: html[data-theme="light"|"dark"].
   Screen CSS should consume tokens; dark.css (loaded last) sets dark values + patches. */

/* =====================================================================
   Semantic tokens (Light defaults) + legacy bridge
   ===================================================================== */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Semantic */
  --bg-app: #eef2f8;
  --bg-surface: #ffffff;
  --bg-surface-muted: #f6f8fc;
  --bg-surface-elevated: #f0f4fa;

  --text-primary: #172033;
  --text-secondary: #475569;
  --text-muted: #7b8798;
  --text-inverse: #ffffff;

  --border-default: #e2e8f1;
  --border-subtle: #eef1f6;
  --border-strong: #d1d9e5;

  --accent: #0068ff;
  --accent-hover: #0057d9;
  --accent-soft: #eaf2ff;

  --success: #12b76a;
  --success-soft: #e9f9f1;
  --warning: #f5a524;
  --warning-soft: #fff6e5;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --info: #5b5bf0;
  --info-soft: #eef0ff;

  --shadow-sm: 0 1px 2px rgba(23, 32, 51, .06);
  --shadow-md: 0 6px 20px rgba(23, 32, 51, .08);
  --focus-ring: 0 0 0 4px rgba(0, 104, 255, .15);

  /* Scrollbar */
  --scrollbar-thumb: #cdd5e1;
  --scrollbar-thumb-hover: #aeb9c9;

  /* Placeholder */
  --placeholder: #9aa5b5;

  /* Brand / gradients (shared across themes unless overridden) */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-soft);
  --primary-soft-2: #d4e5ff;
  --indigo: var(--info);

  --grad: linear-gradient(135deg, #3b93ff 0%, #0068ff 45%, #5b5bf0 100%);
  --grad-hover: linear-gradient(135deg, #2c88ff 0%, #005ae6 45%, #4d4de6 100%);
  --grad-soft: linear-gradient(135deg, #eef5ff 0%, #f1f0ff 100%);
  --grad-danger: linear-gradient(135deg, #ff6b7a 0%, #e5484d 100%);

  /* Legacy aliases → semantic */
  --bg: var(--bg-app);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-surface-muted);
  --surface-hover: var(--bg-surface-elevated);
  --chat-bg: #f5f7fc;
  --chat-glow-tr: rgba(91, 91, 240, .06);
  --chat-glow-bl: rgba(0, 104, 255, .06);
  --chat-header-bg: var(--bg-surface);
  --chat-header-border: var(--border-subtle);
  --chat-bubble-in-bg: var(--bg-surface);
  --chat-bubble-in-border: var(--border-subtle);
  --chat-bubble-in-shadow: var(--shadow-sm);
  --chat-bubble-out-shadow: 0 4px 12px rgba(0, 104, 255, .18);
  --chat-quote-bg: var(--accent-soft);
  --chat-date-bg: var(--bg-surface);
  --chat-date-border: var(--border-subtle);
  --chat-empty-chip-bg: var(--bg-surface);
  --chat-empty-chip-border: var(--border-subtle);
  --chat-popover-bg: var(--bg-surface);
  --chat-selected-row: var(--accent-soft);
  --chat-composer-bg: var(--bg-surface);
  --chat-input-bg: var(--bg-surface-muted);
  --chat-avatar-ring: var(--bg-surface);
  --chat-system-bg: var(--bg-surface);
  --chat-toolbar-icon: var(--text-muted);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --shadow: var(--shadow-md);
  --shadow-lg: 0 24px 60px rgba(23, 32, 51, .2);
  --glow: 0 8px 22px rgba(0, 104, 255, .32);
  --ring: var(--focus-ring);

  /* Shell / navigation (Light) */
  --shell-rail-bg: linear-gradient(180deg, var(--ux-rail-1), var(--ux-rail-2));
  --shell-rail-bg-top: var(--ux-rail-1);
  --shell-rail-fg: rgba(255, 255, 255, .8);
  --shell-rail-fg-strong: #ffffff;
  --shell-rail-hover: rgba(255, 255, 255, .14);
  --shell-rail-active-bg: rgba(255, 255, 255, .22);
  --shell-rail-logo-bg: #ffffff;
  --shell-rail-logo-fg: #2457F5;
  --shell-rail-dot-ring: var(--ux-rail-1);
  --shell-nav-title: var(--ux-muted);
  --shell-nav-fg: var(--ux-text-2);
  --shell-nav-hover-bg: var(--ux-hover);
  --shell-nav-active-bg: var(--ux-sel);
  --shell-nav-active-fg: var(--ux-link);
  --shell-nav-active-bar: var(--ux-sel-bar);
  --shell-search-bg: var(--ux-input);
  --shell-menu-hover: var(--ux-hover);
  --shell-overlay: rgba(15, 23, 42, .18);

  /* Dash bridge (Light) — screens may refine locally */
  --dash-bg: var(--ux-bg);
  --dash-card: var(--ux-surface);
  --dash-border: var(--ux-border);
  --dash-text: var(--ux-text);
  --dash-muted: var(--ux-muted);
  --dash-primary: var(--ux-primary);
  --dash-danger: var(--ux-danger);
  --dash-danger-bg: var(--ux-danger-soft);
  --dash-warn-bg: var(--ux-warn-soft);
  --dash-warn: var(--ux-warn);
  --dash-ok: var(--ux-ok);
  --dash-lavender: var(--info-soft);
  --dash-radius: 12px;
  --dash-row: var(--ux-border);
  --dash-hover: var(--ux-hover);
  --dash-focus: var(--ux-sel-bar);
  --dash-icon-bg: #eef1f7;
  --dash-icon-fg: #667085;
  --dash-meta: var(--ux-muted);
  --dash-chevron: #98a2b3;
  --dash-avatar-bg: #eef1f7;
  --dash-avatar-fg: #475569;
  --dash-ok-soft: var(--ux-ok-soft);
  --dash-ok-fg: var(--ux-ok);
  --dash-info-soft: var(--ux-sel);
  --dash-info-fg: var(--ux-link);
  --dash-ai-soft: var(--ux-ai-soft);
  --dash-ai-fg: var(--ux-ai);
  --dash-warn-soft: var(--ux-warn-soft);
  --dash-warn-fg: var(--ux-warn);
  --dash-kpi-warn-bg: var(--ux-surface);
  --dash-conflict: var(--ux-danger);
  --dash-conflict-soft: var(--ux-danger-soft);
  --dash-neutral-soft: #f4f6fb;
  --dash-neutral-fg: #536176;
  --dash-chip-muted-bg: #eef1f7;
  --dash-chip-muted-fg: #475569;
  --dash-overlay: rgba(15, 23, 42, .28);
  --dash-drawer-shadow: -8px 0 24px rgba(15, 23, 42, .16);
  --dash-health-track: #abefc6;
  --dash-health-fill: #12b76a;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
html {
  background: var(--bg-app);
  color: var(--text-primary);
}
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
#app-screen {
  background: var(--bg-app);
  color: var(--text-primary);
}
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}
::selection { background: rgba(0, 104, 255, .18); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
.muted { color: var(--text-muted); font-size: 13px; }
.small { font-size: 12px; }
.error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0; }

/* ---------- Shared form controls ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select, textarea {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
input[type="radio"] { accent-color: var(--accent); }

/* ---------- Shared buttons ---------- */
.small-btn {
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
  white-space: nowrap;
}
.small-btn:hover { background: var(--bg-surface-elevated); border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.small-btn:active { transform: none; }
.small-btn.danger-ghost:hover { background: var(--danger-soft); border-color: #f5c2c3; color: var(--danger); }

.link-btn {
  background: none; border: none; color: var(--accent); padding: 0;
  font-size: 13px; font-weight: 500;
}
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.icon-btn:hover { background: var(--bg-surface-elevated); color: var(--danger); }

/* Logo chu "Z" — brand, keep inverse text */
.brand-mark {
  position: relative; overflow: hidden;
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--grad);
  color: var(--text-inverse); font-weight: 700; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 104, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand-mark::after {
  content: ""; position: absolute; inset: -40% -20% 55% -20%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .45), transparent);
}
.brand-mark.sm { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; flex-shrink: 0; }