:root {
  --ink: #182033;
  --muted: #667085;
  --line: #dbe1eb;
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --nav: #111827;
  --nav-soft: #202a3c;
  --brand: #4056d6;
  --brand-soft: #eef1ff;
  --green: #18755f;
  --green-soft: #e9f7f1;
  --amber: #99610d;
  --amber-soft: #fff5dd;
  --red: #a83b51;
  --red-soft: #fff0f3;
  --focus: #365bd6;
  --conversation-width: 360px;
  --radius: 12px;
  --shadow: 0 14px 42px rgba(22, 32, 51, .16);
  --font: Inter, "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow-x: hidden; }
body { background: var(--canvas); color: var(--ink); font: 14px/1.45 var(--font); }
button, select, textarea { font: inherit; }
code, pre { font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }