/* =============================================================================
   MFC e-Memo Automation Platform — demo styles
   Hand-written, zero dependencies, no build step, no network. Palette sampled
   from the client's own deck so the mock wears MFC's colours.
   ========================================================================== */

:root {
  --red: #DA0812;
  --red-bright: #E52B2F;
  --red-dark: #A80009;
  --grey: #575756;
  --ink: #1B1D26;
  --ink-2: #4A4F5C;
  --ink-3: #767B88;
  --blush: #F4E6E7;
  --blue: #0070C0;
  /* Two of the deck's workflow-category colours (data.js CATEGORY_COLOR) promoted
     to variables: the flow diagram carries node type in the border, so it needs
     them as colours, not just as per-card accents. */
  --teal: #028090;
  --purple: #5C3D8F;

  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #FBFBFC;
  --line: #E4E5E9;
  --line-2: #EFEFF2;

  --ok: #1A7F4B;
  --ok-bg: #E9F6EF;
  --warn: #B26A00;
  --warn-bg: #FDF3E4;
  --err: #C0261F;
  --err-bg: #FCECEB;
  --info-bg: #EAF3FB;
  --purple-bg: #F5F2FA;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(27, 29, 38, .06), 0 1px 3px rgba(27, 29, 38, .04);
  --shadow: 0 2px 6px rgba(27, 29, 38, .06), 0 8px 24px rgba(27, 29, 38, .06);
  --shadow-lg: 0 12px 40px rgba(27, 29, 38, .14);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --thai: "Noto Sans Thai", "IBM Plex Sans Thai", Sarabun, Thonburi, "Leelawadee UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Thai runs get the Thai stack first — Latin UI chrome keeps the system font. */
:lang(th), .th { font-family: var(--thai), var(--sans); line-height: 1.75; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue); }

.ico { flex: none; vertical-align: -.15em; }

/* ============================================================ login screen */
#login {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--blush), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, #FCE7E9, transparent 55%),
    var(--surface);
  z-index: 100;
}

.login-card {
  width: 380px;
  padding: 40px;
  text-align: center;
}

.login-card h1 {
  margin: 22px 0 4px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.login-card p { margin: 0 0 28px; color: var(--ink-3); }

.sso-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .12s, background .12s;
}
.sso-btn:hover { background: #000; transform: translateY(-1px); }

.login-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ================================================================== brand */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--grey);
}
.logo .mark { font-size: 26px; }
.logo .dot {
  width: 9px; height: 9px;
  background: var(--red);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg) translateY(-2px);
  display: inline-block;
}
.logo .sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* =================================================================== shell */
#app { display: none; height: 100%; }
#app.on { display: grid; grid-template-columns: 264px 1fr; }

/* ------------------------------------------------------------- sidebar */
.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-btn {
  margin: 0 12px 14px;
  padding: 9px 12px;
  border-radius: var(--r);
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background .12s;
}
.new-btn:hover { background: var(--red-dark); }

.side-scroll { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 0; }

.side-label {
  padding: 12px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.proj { margin-bottom: 2px; }

.proj-head {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
}
.proj-head:hover { background: var(--line-2); }
.proj-head .chev { margin-left: auto; transition: transform .15s; color: var(--ink-3); }
.proj.closed .chev { transform: rotate(-90deg); }
.proj.closed .thread-list { display: none; }

.thread-list { padding: 2px 0 4px 10px; }

.thread {
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  display: block;
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.35;
  position: relative;
}
.thread:hover { background: var(--line-2); }
.thread.on { background: var(--blush); color: var(--ink); font-weight: 600; }
.thread .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}
.thread-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dot-status { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot-status.running { background: var(--warn); }
.dot-status.done { background: var(--ok); }
.dot-status.rejected { background: var(--err); }

.side-foot { border-top: 1px solid var(--line); padding: 8px; }

.nav-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
}
.nav-btn:hover { background: var(--line-2); }
.nav-btn.on { background: var(--blush); color: var(--red-dark); font-weight: 600; }
.nav-btn .count {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------- main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  height: 56px;
  flex: none;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb { color: var(--ink-3); font-size: 13px; }

.spacer { margin-left: auto; }

/* role switcher ---------------------------------------------------------- */
.roles {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--line-2);
  gap: 2px;
}
.role-btn {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
  white-space: nowrap;
}
.role-btn:hover { background: #fff8; }
.role-btn.on { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); }

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: none;
  font-family: var(--thai), var(--sans);
}
.avatar.lg { width: 34px; height: 34px; font-size: 12px; }
.avatar.sm { width: 20px; height: 20px; font-size: 9px; }

.who { display: flex; align-items: center; gap: 9px; }
.who .name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.who .role { font-size: 11px; color: var(--ink-3); line-height: 1.2; }

/* ================================================================ views */
.view { flex: 1; min-height: 0; display: none; }
.view.on { display: flex; }

/* --------------------------------------------------------------- chat */
#view-chat { flex-direction: row; }

.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.msgs {
  flex: 1;
  overflow-y: auto;
  padding: 26px 0 8px;
  scroll-behavior: smooth;
}

.msgs-inner { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* empty state */
.empty {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 40px 24px;
  gap: 6px;
}
.empty h3 { margin: 14px 0 2px; font-size: 20px; letter-spacing: -.02em; }
.empty p { margin: 0 0 18px; color: var(--ink-3); max-width: 440px; }

.starter {
  width: 100%;
  max-width: 560px;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 9px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.starter:hover { border-color: var(--red); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.starter .st-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.starter .st-t { display: block; font-weight: 600; font-size: 13px; }
.starter .st-d { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }

/* message rows */
.msg { display: flex; gap: 12px; margin-bottom: 22px; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  max-width: 78%;
}

.msg .body { min-width: 0; flex: 1; }

.ai-badge {
  width: 28px; height: 28px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.prose { white-space: pre-wrap; }
.prose strong { font-weight: 650; }
.prose code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--line-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.caret {
  display: inline-block;
  width: 7px; height: 15px;
  background: var(--red);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink .9s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------ widgets */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-top: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
}
.card-head .tag { margin-left: auto; text-transform: none; letter-spacing: 0; }
/* A second tag rides along with the first instead of being pushed to the far
   edge — a head that carries both a version and a change count reads as one
   group, not as two unrelated corners. */
.card-head .tag ~ .tag { margin-left: 0; }
.card-body { padding: 14px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  background: var(--line-2);
  color: var(--ink-2);
}
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.err { background: var(--err-bg); color: var(--err); }
.tag.info { background: var(--info-bg); color: var(--blue); }

/* tool call strip */
.tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 12.5px;
  animation: rise .25s ease both;
}
.tool .t-name { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.tool .t-label { color: var(--ink-2); }
.tool .t-res { margin-left: auto; color: var(--ink-3); font-size: 12px; text-align: right; }
.tool .spin {
  width: 13px; height: 13px;
  border: 2px solid var(--line);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tool .done { color: var(--ok); }

/* workflow match */
.match { display: flex; gap: 13px; align-items: flex-start; }
.match .swatch { width: 4px; align-self: stretch; border-radius: 3px; flex: none; }
.match .m-name { font-weight: 650; font-size: 14px; }
.match .m-reason { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.match .m-alt { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }

.conf {
  margin-left: auto;
  text-align: right;
  flex: none;
}
.conf .pct { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.conf .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

/* inline form */
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 5px;
  color: var(--ink-2);
}
.field label .req { color: var(--red); }
.field .hint-th { font-weight: 500; color: var(--ink-3); font-family: var(--thai); }

.inp {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
  font-family: var(--thai), var(--sans);
}
.inp:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(218, 8, 18, .1);
}
textarea.inp { min-height: 130px; resize: vertical; line-height: 1.7; }

.ai-filled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--red);
  background: var(--blush);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}

.card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
}
.card-actions .spacer-l { margin-left: auto; }

.btn {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, border-color .12s, transform .1s;
}
.btn:hover { background: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ok:hover { filter: brightness(.94); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* upload */
.drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  padding: 24px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.drop:hover { border-color: var(--red); background: var(--blush); }
.drop .d-t { font-weight: 600; margin-top: 8px; }
.drop .d-h { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 13px;
}
.file-row + .file-row { margin-top: 7px; }
.file-row .f-size { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.file-row .f-ico { color: var(--red); }

/* memo preview */
.memo {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 22px 24px;
  background: #fff;
  font-family: var(--thai), var(--sans);
}
.memo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 16px;
}
.memo-head .m-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.memo-head .m-ref { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.memo-grid {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 5px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
.memo-grid dt { color: var(--ink-3); font-weight: 600; }
.memo-grid dd { margin: 0; }
.memo-body { font-size: 13.5px; line-height: 1.85; white-space: pre-wrap; }

/* approval cards */
.appr { display: flex; gap: 12px; align-items: flex-start; }
.appr .a-main { min-width: 0; flex: 1; }
.appr .a-name { font-weight: 650; }
.appr .a-step { font-size: 12px; color: var(--ink-3); }
.appr .a-comment {
  margin-top: 9px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  font-family: var(--thai), var(--sans);
}

/* audit trail */
.trail { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.trail-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  padding: 4px 0;
}
.trail-row .t-at { margin-left: auto; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* workflow diff */
.diff-row {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: flex-start;
}
.diff-row:last-child { border-bottom: 0; }
.op {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex: none;
  line-height: 1;
}
.op.add { background: var(--ok-bg); color: var(--ok); }
.op.modify { background: var(--warn-bg); color: var(--warn); }
.op.remove { background: var(--err-bg); color: var(--err); }
.diff-row .d-label { font-weight: 600; font-size: 13px; }
.diff-row .d-detail { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.diff-ba { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--line-2);
  color: var(--ink-2);
}
.chip.before { background: var(--err-bg); color: var(--err); text-decoration: line-through; }
.chip.after { background: var(--ok-bg); color: var(--ok); }

/* guardrail checklist */
.guards { margin-top: 4px; }
.guard {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 12.5px;
}
.guard .g-ico { flex: none; margin-top: 1px; }
.guard.ok .g-ico { color: var(--ok); }
.guard.warn .g-ico { color: var(--warn); }
.guard.fail .g-ico { color: var(--err); }
.guard.fail .g-label { color: var(--err); }

/* the publish gate refusing an AI-proposed change */
.blocked-banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  margin-bottom: 14px;
  border-radius: var(--r);
  background: var(--err-bg);
  border: 1px solid #F3C4C1;
}
.blocked-banner .bb-ico { color: var(--err); flex: none; margin-top: 1px; }
.blocked-banner .bb-title { font-weight: 700; color: var(--err); font-size: 13px; }
.blocked-banner .bb-body { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.guard .g-label { font-weight: 600; }
.guard .g-detail { color: var(--ink-3); }

/* mini flow used inside the diff card */
.mini-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.mini-node {
  padding: 5px 9px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mini-node.changed { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.mini-node.added { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.mini-node.decision { border-radius: 999px; border-style: dashed; }
.mini-arrow { color: var(--ink-3); font-size: 11px; }
/* The compose-plan source chips carry a Thai clause rather than a step name, so
   they must be allowed to wrap where .mini-node deliberately does not. */
.mini-node.src { white-space: normal; }

/* --------------------------------------------- workflow flow diagram widget --
   The same vocabulary the architecture document draws with (.flow / .fnode /
   .farrow, docs/architecture/index.html:356-489), retuned from print mm/pt to
   screen px. The client has already read these diagrams on paper; drawing the
   identical shape in the chat is what makes "the agent just changed your
   process" legible without a workshop. Node type is carried by the border
   colour alone — no icons — exactly as in the document. */
.wfx-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 13px; }
.wfx-name .swatch { width: 4px; height: 17px; border-radius: 3px; flex: none; }
.wfx-name .tag { margin-left: auto; }

.flow { padding: 2px 0 0; }

.fnode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  padding: 9px 12px;
  border: 1.2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
/* Thai runs have no inter-word spaces, so a long label has no break opportunity
   and would set the flex item's min-content width to the whole string — that is
   what pushes a card wider than its column. min-width:0 plus an explicit break
   opportunity is what keeps this widget inside the chat. Both text spans need
   it: a decision node's whole question lives in .fn-t. */
.fnode .fn-t { min-width: 0; font-weight: 650; font-size: 13px; overflow-wrap: anywhere; }
.fnode .fn-s {
  min-width: 0;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--thai), var(--sans);
  overflow-wrap: anywhere;
}

/* Badges group hard right. The auto margin belongs to the first badge only, so
   two or three of them travel together instead of spreading across the row. */
.fnode .fn-b {
  margin-left: auto;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.fnode .fn-chg { margin-left: auto; white-space: nowrap; font-family: var(--thai), var(--sans); }
.fnode .fn-b ~ .fn-b,
.fnode .fn-b ~ .fn-chg { margin-left: 0; }
.fnode .fn-form { color: #fff; background: var(--ink); }
.fnode .fn-tool { font-family: var(--mono); font-weight: 600; background: var(--line-2); color: var(--ink-3); }
.fnode .fn-sla { background: var(--info-bg); color: var(--blue); }
.fnode .fn-rej { padding: 0 6px; color: var(--err); border: 1px dashed var(--err); }
/* The branch qualifier is a Thai clause, not a token, so it wraps alongside the
   description instead of joining the nowrap badge group on the right. */
.fnode .fn-branch {
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn);
  overflow-wrap: anywhere;
}

.fnode.actor { background: var(--surface-2); }
.fnode.approve { border-color: var(--teal); }
.fnode.system { border-color: var(--blue); background: var(--info-bg); }
.fnode.decision {
  border-color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  justify-content: center;
}
.fnode.terminal { border-color: var(--ok); background: var(--ok-bg); }
.fnode.terminal .fn-t { color: var(--ok); }
.fnode.ext { border-style: dashed; border-color: var(--purple); background: var(--purple-bg); }

/* Vertical connector. The 9px arrowhead is centred on the 1.2px rule:
   0.6 − 4.5 = −3.9px. */
.farrow {
  height: 16px;
  margin-left: 20px;
  border-left: 1.2px solid var(--ink-3);
  position: relative;
}
.farrow::after {
  content: '';
  position: absolute;
  left: -3.9px;
  bottom: -1px;
  border: 4.5px solid transparent;
  border-top-color: var(--ink-3);
  border-bottom: 0;
}
/* The document positions this label absolutely with nowrap because its labels
   are three English words. Ours are a Thai clause, so the label sits in normal
   flow and the connector grows with it — the annotation wraps down the arrow
   instead of widening the card. */
.farrow.lbl { height: auto; min-height: 16px; }
.farrow.lbl::before {
  content: attr(data-l);
  display: block;
  margin-left: 11px;
  padding: 1px 0 9px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--ink-3);
  font-family: var(--thai), var(--sans);
  overflow-wrap: anywhere;
}

/* Diff affordance. When the agent re-draws a flow after an adjustment the client
   must see WHICH nodes moved without scrolling back to the change list, so the
   change state lives on the node itself. An inset shadow rather than a ::before
   bar, because it follows border-radius for free — including the 999px decision
   pill. Colours match .op.add/.modify/.remove (above) and .mini-node.changed /
   .added, so add is green everywhere in this product and modify amber. */
.fnode.chg-added,
.fnode.chg-modified,
.fnode.chg-removed { padding-left: 15px; animation: rise .3s ease both; }
.fnode.chg-added { box-shadow: inset 3px 0 0 var(--ok); }
.fnode.chg-modified { box-shadow: inset 3px 0 0 var(--warn); }
.fnode.chg-removed { box-shadow: inset 3px 0 0 var(--err); opacity: .72; }
.fnode.chg-removed .fn-t,
.fnode.chg-removed .fn-s { text-decoration: line-through; }

/* Derived from the nodes actually drawn — a fixed legend naming node types the
   flow does not contain is a small lie, and a client reading carefully spots it. */
.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--thai), var(--sans);
}
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1.2px solid; flex: none; }

/* questionnaire — a segmented answer picker. Clicking beats typing when the
   person answering is standing in front of a room, and the pre-selected option
   makes this a confirmation rather than a composition. */
.q-why {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--ink-3);
  margin: -1px 0 8px;
}
.q-why .ico { flex: none; margin-top: 3px; }

.q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.q-opt {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color .12s, background .12s, color .12s;
}
.q-opt:hover { border-color: var(--ink-3); background: var(--surface-2); }
.q-opt.on { border-color: var(--red); background: var(--blush); color: var(--red-dark); }

/* a dry-run step the test flagged but did not fail */
.step.warned .bullet { background: var(--warn); border-color: var(--warn); color: #fff; }
.step.warned::before { background: var(--warn); }

/* ---------------------------------------------------------- composer */
.composer { flex: none; padding: 10px 24px 20px; background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.composer-inner { max-width: 780px; margin: 0 auto; }

.hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
  animation: rise .3s ease both;
}

.box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  transition: border-color .12s, box-shadow .12s;
}
.box:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(218, 8, 18, .09), var(--shadow); }

.box textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  max-height: 160px;
  min-height: 24px;
  line-height: 1.55;
  font-family: var(--thai), var(--sans);
}

.send {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  transition: background .12s, opacity .12s;
}
.send:hover { background: var(--red-dark); }
.send[disabled] { background: var(--line); color: var(--ink-3); pointer-events: none; }

.composer-foot {
  margin-top: 7px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

/* ------------------------------------------------------- right panel */
.rail {
  width: 340px;
  flex: none;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  display: none;
}
.rail.on { display: block; }

.rail-sec { padding: 16px; border-bottom: 1px solid var(--line-2); }
.rail-sec:last-child { border-bottom: 0; }

.rail-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rail-title .tag { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* run step timeline */
.steps { position: relative; }
.step {
  display: flex;
  gap: 11px;
  padding-bottom: 15px;
  position: relative;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.step:last-child::before { display: none; }

.step .bullet {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
}
.step.done .bullet { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.done::before { background: var(--ok); }
.step.active .bullet {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 0 4px rgba(218, 8, 18, .13);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 7px rgba(218, 8, 18, .06); }
}
.step.rejected .bullet { background: var(--err); border-color: var(--err); color: #fff; }

.step .s-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.step.pending .s-name { color: var(--ink-3); font-weight: 500; }
.step .s-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.step .s-tool {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--line-2);
  padding: 0 5px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}

/* fact rows */
.facts { font-size: 13px; }
.fact { display: flex; gap: 10px; padding: 5px 0; }
.fact dt { color: var(--ink-3); width: 96px; flex: none; }
.fact dd { margin: 0; font-weight: 550; min-width: 0; }

/* ------------------------------------------------- inbox / library views */
.page { flex: 1; overflow-y: auto; padding: 26px 32px 60px; }
.page-inner { max-width: 980px; margin: 0 auto; }

.page h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.page .lede { margin: 0 0 26px; color: var(--ink-3); max-width: 620px; }

.list-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.list-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  width: 100%;
  transition: background .12s;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row .lr-main { min-width: 0; flex: 1; }
.list-row .lr-title { font-weight: 600; font-size: 13.5px; }
.list-row .lr-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.list-row .lr-amt { font-variant-numeric: tabular-nums; font-weight: 650; }

.empty-row { padding: 40px; text-align: center; color: var(--ink-3); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}

/* Flat, hairline border, modest radius. The workflow's identity colour lives on the
   reference label only — a coloured side-tab on every card is decoration, and it makes
   six cards shout at equal volume instead of letting the names do the work. */
.wf-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px;
  text-align: left;
  transition: border-color .13s, background .13s;
  position: relative;
}
/* No lift on hover: a card that jumps is decoration, and it fights the eye when
   scanning seven of them. Border and surface carry the affordance instead. */
.wf-card:hover { border-color: var(--ink-3); background: var(--surface-2); }
.wf-card .wf-ref { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.wf-card h3 { margin: 5px 0 2px; font-size: 15px; letter-spacing: -.01em; }
.wf-card .wf-th { font-size: 12.5px; color: var(--ink-3); font-family: var(--thai); }
.wf-card .wf-desc { font-size: 12.5px; color: var(--ink-2); margin: 9px 0 12px; min-height: 34px; }
/* row-gap because a status tag now joins the version tag, and at the 288px grid
   minimum above the row would otherwise overflow the card. */
.wf-card .wf-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; font-size: 11.5px; color: var(--ink-3); }

/* Archived definitions stay in the library — it is the audit surface, not just a
   menu — but they must not read as available work. */
.wf-card.dim { opacity: .58; }
.wf-card.dim:hover { opacity: 1; }

.tool-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px;
}
.tool-card .tc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.tool-card .tc-id { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.tool-card .tc-sum { font-size: 12.5px; color: var(--ink-2); }
.tool-card .tc-sys { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

.kind-core { background: var(--info-bg); color: var(--blue); }
.kind-interaction { background: var(--blush); color: var(--red-dark); }
.kind-integration { background: var(--warn-bg); color: var(--warn); }

/* section heading inside pages */
.sec-h {
  margin: 30px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec-h:first-child { margin-top: 0; }

/* ------------------------------------------------------------- modal */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(27, 29, 38, .42);
  display: none;
  place-items: center;
  z-index: 60;
  padding: 24px;
  animation: fade .16s ease both;
}
.scrim.on { display: grid; }
@keyframes fade { from { opacity: 0; } }

.modal {
  width: 620px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: pop .2s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(8px); } }

.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.modal-head h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.modal-head .mh-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-family: var(--mono); }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  display: flex;
  gap: 9px;
  align-items: center;
}
/* spacer-l was only ever defined for .card-actions, so the two spacers already
   sitting in modal feet were no-ops. Both footers now behave as their markup
   always intended. */
.modal-foot .spacer-l { margin-left: auto; }

/* --------------------------------------------------------- toast */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-end;
}
.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 15px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  max-width: 340px;
  animation: slideIn .26s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } }
.toast .t-title { font-weight: 650; }
.toast .t-sub { color: #ffffffb0; font-size: 12px; margin-top: 1px; }
.toast.leaving { animation: slideOut .2s ease both; }
@keyframes slideOut { to { opacity: 0; transform: translateX(16px); } }

/* -------------------------------------------------------- utilities */
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.strong { font-weight: 650; }
.row { display: flex; align-items: center; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #0000001f; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #00000033; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}