/* System → Mapping, and the category chip/tag used in Chats */
:root { --wm-wa:#2f9e74; --wm-map:var(--gold); --wm-brain:var(--accent); --wm-mind:#8a4fa3; --wm-crm:#3a5f9e; }
@media (prefers-color-scheme: dark) { :root { --wm-wa:#4cc493; --wm-mind:#b98ad0; --wm-crm:#86a3de; } }

.wm-loading { padding:40px; text-align:center; color:var(--muted); }

/* the wiring strip */
.wm-wire { display:flex; align-items:stretch; gap:6px; margin-bottom:18px; padding:14px; border-radius:var(--r); border:1px solid var(--line); background:
  linear-gradient(90deg, color-mix(in srgb, var(--wm-wa) 7%, var(--surface)), var(--surface) 40%, color-mix(in srgb, var(--gold) 8%, var(--surface))); overflow-x:auto; scrollbar-width:thin; position:relative; }
.wm-wire::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--strip); opacity:.7; }
.wm-step { flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background .2s, border-color .2s, transform .2s var(--ease); }
.wm-step[data-go=""] { cursor:default; }
.wm-step:not([data-go=""]):hover { background:var(--surface); border-color:var(--line); transform:translateY(-1px); }
.wm-si { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--k); background:color-mix(in srgb, var(--k) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--k) 30%, transparent); }
.wm-st { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.wm-st b { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.wm-st em { font-style:normal; font-weight:600; font-size:15.5px; color:var(--ink); white-space:nowrap; }
.wm-st small { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-arrow { display:grid; place-items:center; color:var(--gold); flex:none; opacity:.8; }
.wm-arrow svg { width:18px; height:18px; animation:wm-nudge 2.4s var(--ease) infinite; }
.wm-arrow.side { color:var(--wm-crm); margin-left:6px; border-left:1px dashed var(--line-2); padding-left:12px; }
.wm-arrow.side svg { animation:none; }
@keyframes wm-nudge { 50% { transform:translateX(3px); } }

.wm-grid { display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:18px; align-items:start; margin-bottom:18px; }
.wm-grid .panel { margin:0; }
.wm-cats { position:sticky; top:16px; }

/* category tree */
.wm-tree { padding:8px; max-height:calc(100dvh - 300px); overflow:auto; }
.wm-row { position:relative; display:flex; align-items:center; gap:6px; height:36px; padding:0 8px 0 calc(6px + var(--d) * 18px); border-radius:9px; cursor:pointer; user-select:none; transition:background .15s, box-shadow .15s; }
.wm-row:hover { background:var(--hover); }
.wm-row.on { background:color-mix(in srgb, var(--c, var(--gold)) 12%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, var(--gold)) 35%, transparent); }
.wm-row.drop { background:color-mix(in srgb, var(--c, var(--gold)) 22%, var(--surface)); box-shadow:inset 0 0 0 2px var(--c, var(--gold)); }
.wm-kids { position:relative; }
.wm-kids::before { content:""; position:absolute; left:calc(15px + var(--dd, 0px)); top:0; bottom:8px; width:1px; background:var(--line); }
.wm-car { width:22px; height:22px; border:0; background:none; border-radius:6px; color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none; padding:0; }
.wm-car svg { width:14px; height:14px; transition:transform .2s var(--ease); }
.wm-car.open svg { transform:rotate(90deg); }
.wm-car.none { visibility:hidden; }
.wm-dot { width:14px; height:14px; border-radius:50%; flex:none; border:0; padding:0; background:var(--c); cursor:pointer; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); transition:transform .15s; }
.wm-dot:hover { transform:scale(1.25); }
.wm-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; font-size:13.5px; }
.wm-row[style*="--d:0"] > .wm-name { font-weight:600; }
.wm-all .wm-name { color:var(--ink-2); padding-left:4px; }
.wm-n { font-size:11.5px; color:var(--muted); min-width:18px; text-align:right; font-variant-numeric:tabular-nums; }
.wm-n.warn { color:var(--warn); font-weight:600; }
.wm-acts { display:none; gap:2px; }
.wm-row:hover .wm-acts, .wm-row:focus-within .wm-acts { display:flex; }
.wm-row:hover .wm-n { display:none; }
.wm-acts button { width:26px; height:26px; border:0; background:none; border-radius:7px; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.wm-acts button:hover { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.wm-acts button[data-del]:hover { color:var(--bad); }
.wm-acts svg { width:15px; height:15px; }
.wm-edit { flex:1; min-width:0; height:28px; border:1px solid var(--gold); border-radius:7px; padding:0 8px; font:inherit; font-size:13.5px; background:var(--surface); color:var(--ink); outline:none; box-shadow:0 0 0 3px var(--gold-soft); }
.wm-droptop { display:none; margin:8px 4px 2px; padding:10px; border:1.5px dashed var(--line-2); border-radius:10px; text-align:center; font-size:12px; color:var(--muted); }
.wm-tree.dragging .wm-droptop { display:block; }
.wm-droptop.drop { border-color:var(--gold); color:var(--gold-ink); background:var(--gold-soft); }
.wm-hint { padding:12px 16px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); line-height:1.5; }

/* chats */
.wm-search { display:flex; align-items:center; gap:7px; height:34px; padding:0 10px; border-radius:9px; background:var(--soft); color:var(--muted); min-width:min(260px, 100%); }
.wm-search input { border:0; background:none; outline:none; font:inherit; font-size:13.5px; color:var(--ink); width:100%; }
.wm-search svg { width:16px; height:16px; }
.wm-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid var(--line); }
.wm-seg { display:inline-flex; gap:2px; padding:3px; background:var(--soft); border-radius:9px; }
.wm-seg button { border:0; background:none; font:inherit; font-size:12.5px; font-weight:500; color:var(--muted); padding:4px 10px; border-radius:7px; cursor:pointer; }
.wm-seg button.on { background:var(--surface); color:var(--accent-text); box-shadow:var(--shadow-sm), 0 0 0 1px var(--line); }
.wm-bulk { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:13px; animation:fade .2s; }
.wm-tw { max-height:calc(100dvh - 330px); overflow:auto; }
.wm-tw thead th { position:sticky; top:0; z-index:1; background:var(--surface); }
.wm-cb { width:34px; }
.wm-chats tr[data-jid] { cursor:grab; }
.wm-chats tr.chk td { background:color-mix(in srgb, var(--gold) 7%, transparent); }
.wm-who { display:flex; align-items:center; gap:10px; min-width:0; }
.wm-who > div { min-width:0; display:flex; flex-direction:column; }
.wm-who b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
.wm-who small { font-size:12px; color:var(--muted); }
.wm-av { position:relative; width:32px; height:32px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text); font-size:11.5px; font-weight:600; }
.wm-av.g { background:var(--gold-soft); color:var(--gold-ink); }
.wm-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wm-av b { font-weight:600; }
.wm-path { display:inline-flex; align-items:center; gap:5px; max-width:250px; padding:4px 10px 4px 8px; border-radius:99px; border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 9%, var(--surface)); font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer; overflow:hidden; white-space:nowrap; transition:box-shadow .15s, transform .15s; }
.wm-path:hover { box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.wm-path i { width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
.wm-path span { overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.wm-path span.last { color:var(--ink); font-weight:500; }
.wm-path u { text-decoration:none; color:var(--muted); opacity:.6; }
.wm-path.empty { border-style:dashed; border-color:var(--line-2); background:none; color:var(--muted); }
.wm-path.empty svg { width:14px; height:14px; }
.wm-client { width:170px; max-width:170px; height:32px; font:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:0 8px; }
.wm-code { font:500 12px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--accent-text); }
.wm-by, .wm-muted { color:var(--muted); font-size:12px; margin-left:4px; }
.wm-ai { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap; text-transform:capitalize; }
.wm-ai i { width:7px; height:7px; border-radius:50%; background:var(--line-2); }
.wm-ai.on { color:var(--ink-2); }
.wm-ai.on i { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.wm-ghost { position:fixed; top:-100px; left:-100px; padding:6px 12px; border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:12.5px; font-weight:600; }
.wm-log td { font-size:13px; }
.wm-chats td, .wm-chats th { padding-left:10px; padding-right:10px; }
.wm-chats td { padding-top:8px; padding-bottom:8px; }

/* popover (picker, colours, bulk) */
.wm-pop { position:fixed; z-index:200; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; animation:wm-pop .16s var(--ease); color:var(--ink); font:14px/1.45 Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif; }
@keyframes wm-pop { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.wm-pop::before { content:""; height:2px; background:var(--strip); flex:none; }
.wm-pop-h { display:flex; align-items:center; gap:8px; padding:12px 12px 6px 14px; }
.wm-pop-h b { flex:1; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-x { width:28px; height:28px; border:0; background:none; border-radius:7px; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.wm-x:hover { background:var(--hover); }
.wm-x svg, .wm-find svg { width:16px; height:16px; }
.wm-find { display:flex; align-items:center; gap:7px; margin:4px 12px 6px; height:34px; padding:0 10px; border-radius:9px; background:var(--soft); color:var(--muted); }
.wm-find input { border:0; outline:none; background:none; font:inherit; font-size:13.5px; color:var(--ink); width:100%; }
.wm-pop-list { overflow:auto; padding:4px 6px 8px; flex:1; min-height:60px; }
.wm-opt { width:100%; display:flex; align-items:center; gap:8px; height:32px; border:0; background:none; border-radius:8px; padding:0 10px 0 calc(10px + var(--d, 0) * 16px); font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; text-align:left; }
.wm-opt:hover { background:var(--hover); }
.wm-opt.on { background:color-mix(in srgb, var(--c) 12%, transparent); font-weight:600; }
.wm-opt i { width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.wm-opt span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-opt em { font-style:normal; font-size:11px; color:var(--muted); font-weight:500; }
.wm-opt.none { color:var(--bad); margin-top:4px; border-top:1px solid var(--line); border-radius:0 0 8px 8px; }
.wm-pop-f { display:flex; flex-direction:column; gap:6px; padding:10px 14px; border-top:1px solid var(--line); }
.wm-pop-f span { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.wm-pop-f svg { width:14px; height:14px; }
.wm-pop-f select { height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; padding:0 8px; }
.wm-pop-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-top:1px solid var(--line); background:var(--soft); font-size:12px; color:var(--muted); }
.wm-pop-foot button { border:0; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--accent-text); cursor:pointer; padding:0; }
.wm-colors { flex-direction:row; flex-wrap:wrap; gap:8px; padding:12px; width:222px; }
.wm-colors::before { display:none; }
.wm-colors button { width:26px; height:26px; border-radius:50%; border:0; background:var(--c); cursor:pointer; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px transparent; transition:transform .15s; }
.wm-colors button:hover { transform:scale(1.12); }
.wm-colors button.on { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.wm-colors button.inherit { background:var(--soft); color:var(--muted); font-weight:700; --c:var(--line-2); }

/* Chats: chip beside the chat name, tag in the list */
.wm-chip { display:inline-flex; align-items:center; gap:6px; flex:none; max-width:190px; height:28px; padding:0 11px 0 9px; margin-right:4px; border-radius:99px; border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 10%, transparent); color:var(--ink); font:500 12.5px/1 Montserrat, -apple-system, sans-serif; cursor:pointer; transition:box-shadow .15s, background .15s; }
.wm-chip:hover { box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.wm-chip i { width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.wm-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-chip.empty { --c:var(--gold); border-style:dashed; background:none; color:var(--muted); }
.wm-chip.empty svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.75; }
.wm-tag { display:inline-flex; align-items:center; gap:4px; flex:none; max-width:120px; font-size:11px; line-height:18px; padding:0 6px; border-radius:6px; background:color-mix(in srgb, var(--c) 12%, transparent); color:var(--ink-2); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-left:4px; }
.wm-tag i { width:6px; height:6px; border-radius:50%; background:var(--c); flex:none; }

@media (max-width: 980px) {
  .wm-grid { grid-template-columns:1fr; }
  .wm-cats { position:static; }
  .wm-tree { max-height:340px; }
  .wm-tw { max-height:none; }
}
@media (max-width: 820px) {
  .wm-chip span { display:none; }
  .wm-chip { padding:0 8px; }
  .wm-step { min-width:140px; }
  .wm-chats th:nth-child(5), .wm-chats td:nth-child(5) { display:none; }
}

/* keep the chip right beside the chat name in the Chats header */
.wa-hdr .who { flex:0 1 auto; min-width:0; }
.wa-hdr .wm-chip { margin:0 auto 0 8px; }
.wa-l2 .wm-tag { margin-left:6px; max-width:130px; }