// Recursive MLS — Admin screen: Support desk (ticketing, Zendesk-style).
// Three columns: queue · conversation (multi-channel inbound: form/email/phone/text) ·
// member context (open listings, connected data-feed tools, recent tickets).
// Staff reply with a typed message, an email (with MLS signature), or a KB article.
function AdminSupport() {
  const KB = window.RC_KB;
  const [sel, setSel] = useState(KB.tickets[0].id);
  const [filter, setFilter] = useState("all");
  const [replyMode, setReplyMode] = useState("email"); // email | note | kb
  const [picker, setPicker] = useState(false);
  const [attached, setAttached] = useState(null);

  const t = KB.ticketById(sel);
  const member = KB.members[t.agent] || {};
  const filtered = KB.tickets.filter((x) => filter === "all" ? x.status !== "solved" : filter === "solved" ? x.status === "solved" : x.channel === filter);

  const chanIcon = (c) => KB.channelMeta[c].icon;
  const StatusPill = ({ s }) => { const m = KB.ticketStatus[s]; return <Pill tone={m.tone}>{m.label}</Pill>; };

  const queueCounts = { all: KB.tickets.filter((x) => x.status !== "solved").length };
  ["form", "email", "phone", "text"].forEach((c) => { queueCounts[c] = KB.tickets.filter((x) => x.channel === c && x.status !== "solved").length; });

  return (
    <div style={{ height: "100%", display: "grid", gridTemplateColumns: "330px 1fr 312px", background: "#f4f3ef", overflow: "hidden" }}>

      {/* ===== QUEUE ===== */}
      <div style={{ borderRight: "1px solid #ececec", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <div style={{ padding: "16px 18px 12px", borderBottom: "1px solid #f0efe9" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
            <h1 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Support desk</h1>
            <span style={{ fontSize: 11.5, fontWeight: 600, color: "#006747", background: "#e8f1ec", borderRadius: 999, padding: "3px 9px" }}>{queueCounts.all} open</span>
          </div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            {[["all", "All"], ["form", "Form"], ["email", "Email"], ["phone", "Phone"], ["text", "Text"], ["solved", "Solved"]].map(([v, label]) => (
              <button key={v} onClick={() => setFilter(v)} style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "inherit", fontSize: 11.5, fontWeight: 600, border: "1px solid", borderColor: filter === v ? "#006747" : "#e7e5df", background: filter === v ? "#006747" : "#fff", color: filter === v ? "#fff" : "#6b706a", borderRadius: 999, padding: "5px 10px", cursor: "pointer" }}>
                {v !== "all" && v !== "solved" && <Icon name={KB.channelMeta[v].icon} size={12} color={filter === v ? "#fff" : "#a8aca6"} />}
                {label}{queueCounts[v] ? ` ${queueCounts[v]}` : ""}
              </button>
            ))}
          </div>
        </div>
        <div style={{ overflowY: "auto", flex: 1 }}>
          {filtered.map((x) => {
            const on = x.id === sel;
            return (
              <div key={x.id} onClick={() => { setSel(x.id); setAttached(null); }} className="rc-row" style={{ display: "flex", gap: 11, padding: "13px 16px", borderBottom: "1px solid #f4f3ee", cursor: "pointer", background: on ? "#eef4f1" : "transparent", borderLeft: on ? "3px solid #006747" : "3px solid transparent" }}>
                <span style={{ width: 34, height: 34, borderRadius: "50%", flex: "none", background: "#e7e1d4", color: "#006747", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12 }}>{x.initials}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    {x.priority === "high" && <span title="High priority" style={{ width: 6, height: 6, borderRadius: "50%", background: "#c0612f", flex: "none" }} />}
                    <span style={{ fontSize: 13, fontWeight: 600, color: "#1d241f", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", flex: 1 }}>{x.subject}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: "#8a8e88", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{x.agent}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6 }}>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 10.5, color: "#a8aca6" }}><Icon name={chanIcon(x.channel)} size={11} color="#a8aca6" /> {KB.channelMeta[x.channel].label}</span>
                    <span style={{ fontSize: 10.5, color: "#bcbfba" }}>· {x.updated}</span>
                    <div style={{ flex: 1 }} />
                    <StatusPill s={x.status} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* ===== CONVERSATION ===== */}
      <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", background: "#f4f3ef" }}>
        {/* ticket header */}
        <div style={{ background: "#fff", borderBottom: "1px solid #ececec", padding: "14px 22px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 12, color: "#a8aca6" }}>{t.id}</span>
            <StatusPill s={t.status} />
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, color: "#8a8e88" }}><Icon name={chanIcon(t.channel)} size={13} color="#a8aca6" /> via {KB.channelMeta[t.channel].label}</span>
            <div style={{ flex: 1 }} />
            <button style={deskBtnGhost}><Icon name="user-plus" size={14} color="#006747" /> {t.assignee}</button>
            <button style={deskBtnGhost}><Icon name="check-circle" size={14} color="#006747" /> Solve</button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 10 }}>
            <h2 style={{ margin: 0, fontSize: 17, fontWeight: 600, flex: 1 }}>{t.subject}</h2>
            {t.tags.map((tg) => <span key={tg} style={{ fontSize: 11, color: "#6b706a", background: "#f0efe9", borderRadius: 4, padding: "3px 8px" }}>{tg}</span>)}
          </div>
          {t.linked && (
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 11, background: "#f6f5f1", border: "1px solid #e7e5df", borderRadius: 8, padding: "9px 12px" }}>
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: ".5px", textTransform: "uppercase", color: "#a8aca6", flex: "none" }}>Related to</span>
              <span style={{ width: 28, height: 28, borderRadius: 6, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={t.linked.icon} size={14} color="#006747" /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: "#1d241f" }}>{t.linked.label}</div>
                <div style={{ fontSize: 11, color: "#8a8e88" }}>{t.linked.sub}</div>
              </div>
              <button style={deskBtnGhost}><Icon name="external-link" size={13} color="#006747" /> Open {t.linked.type}</button>
            </div>
          )}
        </div>

        {/* thread */}
        <div style={{ flex: 1, overflowY: "auto", padding: "20px 22px", display: "flex", flexDirection: "column", gap: 16 }}>
          {/* inbound channel context banner */}
          <div style={{ display: "flex", alignItems: "center", gap: 9, alignSelf: "center", fontSize: 11.5, color: "#8a8e88", background: "#fff", border: "1px solid #ececec", borderRadius: 999, padding: "5px 13px" }}>
            <Icon name={chanIcon(t.channel)} size={13} color="#006747" /> Received by {KB.channelMeta[t.channel].label.toLowerCase()} · {t.created}
          </div>

          {/* voicemail recording (phone tickets) — above the transcription */}
          {t.voicemail && (
            <div style={{ background: "#fff", border: "1px solid #ececec", borderRadius: 12, padding: "13px 15px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 11 }}>
                <Icon name="voicemail" size={15} color="#006747" />
                <span style={{ fontSize: 12.5, fontWeight: 600, color: "#1d241f" }}>Voicemail recording</span>
                <span style={{ fontSize: 11, color: "#a8aca6" }}>· from {t.voicemail.from} · {t.voicemail.recordedAt}</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <button style={{ width: 38, height: 38, borderRadius: "50%", flex: "none", background: "#006747", border: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="play" size={17} color="#fff" /></button>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 2, height: 30 }}>
                    {[6,11,18,9,22,28,16,24,30,19,12,26,14,8,20,27,15,10,23,17,7,21,13,25,18,9,29,16,11,6].map((h, i) => (
                      <span key={i} style={{ flex: 1, height: h, borderRadius: 2, background: i < 9 ? "#006747" : "#d4dad5" }} />
                    ))}
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 5 }}>
                    <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10.5, color: "#8a8e88" }}>0:22</span>
                    <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 10.5, color: "#8a8e88" }}>{t.voicemail.duration}</span>
                  </div>
                </div>
                <button style={deskBtnGhost}><Icon name="download" size={13} color="#006747" /> Download</button>
                <button style={deskBtnGhost}><Icon name="gauge" size={13} color="#006747" /> 1.0×</button>
              </div>
              <div style={{ fontSize: 11, color: "#a8aca6", marginTop: 10, paddingTop: 10, borderTop: "1px solid #f4f3ee" }}>Transcription below · auto-generated</div>
            </div>
          )}

          {t.thread.map((m, i) => {
            const staff = m.from === "staff";
            const kb = m.attachedKb ? KB.articleById(m.attachedKb) : null;
            return (
              <div key={i} style={{ display: "flex", gap: 11, flexDirection: staff ? "row-reverse" : "row" }}>
                <span style={{ width: 34, height: 34, borderRadius: "50%", flex: "none", background: staff ? "#006747" : "#e7e1d4", color: staff ? "#fff" : "#006747", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12 }}>{staff ? "MS" : t.initials}</span>
                <div style={{ maxWidth: "76%" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 4, flexDirection: staff ? "row-reverse" : "row" }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: "#1d241f" }}>{staff ? "Maria Santos · MLS support" : t.agent}</span>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 10.5, color: "#a8aca6" }}><Icon name={chanIcon(m.channel)} size={11} color="#a8aca6" /> {KB.channelMeta[m.channel].label}</span>
                    <span style={{ fontSize: 10.5, color: "#bcbfba" }}>{m.at}</span>
                  </div>
                  <div style={{ fontSize: 13, color: "#1d241f", background: staff ? "#eef4f1" : "#fff", border: staff ? "none" : "1px solid #ececec", borderRadius: 10, padding: "12px 14px", lineHeight: 1.55, whiteSpace: "pre-wrap" }}>{m.body}</div>
                  {kb && (
                    <div style={{ marginTop: 7, display: "inline-flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid #d6e7de", borderRadius: 8, padding: "8px 11px" }}>
                      <span style={{ width: 28, height: 28, borderRadius: 6, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={KB.typeMeta[kb.type].icon} size={14} color="#006747" /></span>
                      <div><div style={{ fontSize: 12, fontWeight: 600, color: "#1d241f" }}>{kb.title}</div><div style={{ fontSize: 10.5, color: "#a8aca6" }}>Knowledgebase · {KB.typeMeta[kb.type].label}</div></div>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* composer */}
        <div style={{ background: "#fff", borderTop: "1px solid #ececec", padding: "12px 18px 16px" }}>
          <div style={{ display: "flex", gap: 4, marginBottom: 10 }}>
            {[["email", "Reply by email", "mail"], ["note", "Internal note", "sticky-note"], ["kb", "Send article", "book-open"]].map(([v, label, ic]) => (
              <button key={v} onClick={() => setReplyMode(v)} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, border: 0, borderBottom: "2px solid", borderColor: replyMode === v ? "#006747" : "transparent", background: "none", color: replyMode === v ? "#006747" : "#8a8e88", padding: "6px 11px", cursor: "pointer" }}>
                <Icon name={ic} size={14} color={replyMode === v ? "#006747" : "#a8aca6"} /> {label}
              </button>
            ))}
          </div>

          {replyMode === "note" ? (
            <div style={{ background: "#fbf2dc", border: "1px solid #f0ddca", borderRadius: 9, padding: 12 }}>
              <textarea rows={3} placeholder="Add an internal note — only MLS staff can see this." style={{ width: "100%", boxSizing: "border-box", border: 0, background: "transparent", outline: 0, resize: "none", fontFamily: "inherit", fontSize: 13, color: "#5a4a22", lineHeight: 1.5 }} />
              <div style={{ display: "flex", justifyContent: "flex-end" }}><button style={btnPrimaryS}><Icon name="lock" size={14} color="#fff" /> Save note</button></div>
            </div>
          ) : replyMode === "kb" ? (
            <div>
              <div style={{ fontSize: 12, color: "#8a8e88", marginBottom: 9 }}>Recommended for this ticket — click to attach &amp; send:</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                {t.suggested.map((id) => { const a = KB.articleById(id); return (
                  <div key={id} onClick={() => { setAttached(a); setReplyMode("email"); }} className="rc-row" style={{ display: "flex", gap: 9, alignItems: "center", border: "1px solid #e7e5df", borderRadius: 8, padding: "9px 10px", cursor: "pointer" }}>
                    <span style={{ width: 30, height: 30, borderRadius: 6, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={KB.typeMeta[a.type].icon} size={14} color="#006747" /></span>
                    <div style={{ minWidth: 0 }}><div style={{ fontSize: 12, fontWeight: 600, color: "#1d241f", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.title}</div><div style={{ fontSize: 10.5, color: "#a8aca6" }}>{KB.typeMeta[a.type].label}</div></div>
                  </div>
                ); })}
              </div>
              <button onClick={() => setPicker(true)} style={{ marginTop: 9, fontFamily: "inherit", fontSize: 12, fontWeight: 600, color: "#006747", background: "none", border: 0, cursor: "pointer" }}>+ Browse all articles</button>
            </div>
          ) : (
            /* EMAIL REPLY — with signature */
            <div style={{ border: "1px solid #e2e0d8", borderRadius: 10, overflow: "hidden" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderBottom: "1px solid #f0efe9", fontSize: 12, color: "#8a8e88" }}>
                <span style={{ fontWeight: 600, color: "#6b706a" }}>To:</span> {member.email || "agent@brokerage.com"}
                <div style={{ flex: 1 }} />
                <Icon name="paperclip" size={14} color="#a8aca6" /><Icon name="image" size={14} color="#a8aca6" />
              </div>
              <textarea rows={4} defaultValue={`Hi ${t.agent.split(" ")[0]},\n\n`} style={{ width: "100%", boxSizing: "border-box", border: 0, outline: 0, resize: "none", fontFamily: "inherit", fontSize: 13.5, color: "#1d241f", padding: "12px", lineHeight: 1.55 }} />
              {attached && (
                <div style={{ margin: "0 12px 10px", display: "inline-flex", alignItems: "center", gap: 8, background: "#eef4f1", border: "1px solid #d6e7de", borderRadius: 8, padding: "7px 10px" }}>
                  <Icon name={KB.typeMeta[attached.type].icon} size={14} color="#006747" />
                  <span style={{ fontSize: 12, fontWeight: 600, color: "#1d241f" }}>{attached.title}</span>
                  <button onClick={() => setAttached(null)} style={{ border: 0, background: "none", cursor: "pointer", display: "flex" }}><Icon name="x" size={13} color="#8a8e88" /></button>
                </div>
              )}
              {/* email signature */}
              <div style={{ margin: "0 12px 12px", paddingTop: 12, borderTop: "1px solid #f0efe9", display: "flex", alignItems: "center", gap: 11 }}>
                <svg width="30" height="30" viewBox="0 0 100 100" style={{ flex: "none" }}><rect x="13" y="13" width="74" height="74" rx="2" fill="none" stroke="#006747" strokeWidth="6" /><g transform="translate(50,50) scale(0.78) translate(-50,-52)"><path d="M18 80 A8 8 0 0 1 34 80 A8 8 0 0 1 50 80 A8 8 0 0 1 66 80 A8 8 0 0 1 82 80 M26 64 A8 8 0 0 1 42 64 A8 8 0 0 1 58 64 A8 8 0 0 1 74 64 M34 48 A8 8 0 0 1 50 48 A8 8 0 0 1 66 48 M42 32 A8 8 0 0 1 58 32" fill="none" stroke="#006747" strokeWidth="7" strokeLinecap="round" /></g></svg>
                <div style={{ borderLeft: "2px solid #e7e5df", paddingLeft: 11 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: "#1d241f" }}>Maria Santos</div>
                  <div style={{ fontSize: 11.5, color: "#6b706a" }}>Member Support · {KB.mls}</div>
                  <div style={{ fontSize: 11, color: "#8a8e88", marginTop: 2 }}>support@miamimls.org · (305) 555-0100</div>
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderTop: "1px solid #f0efe9", background: "#faf9f5" }}>
                <button onClick={() => setReplyMode("kb")} style={deskBtnGhost}><Icon name="book-open" size={14} color="#006747" /> Insert article</button>
                <div style={{ flex: 1 }} />
                <span style={{ fontSize: 11, color: "#a8aca6" }}>Sends from support@miamimls.org</span>
                <button style={btnPrimaryS}><Icon name="send" size={15} color="#fff" /> Send reply</button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* ===== MEMBER CONTEXT ===== */}
      <div style={{ borderLeft: "1px solid #ececec", background: "#fff", overflowY: "auto" }}>
        <div style={{ padding: "20px 18px", borderBottom: "1px solid #f0efe9", textAlign: "center" }}>
          <span style={{ width: 56, height: 56, borderRadius: "50%", background: "#e7e1d4", color: "#006747", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 19 }}>{member.initials}</span>
          <div style={{ fontSize: 15.5, fontWeight: 600, marginTop: 10 }}>{t.agent}</div>
          <div style={{ fontSize: 12.5, color: "#8a8e88" }}>{member.brokerage}</div>
          <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 10 }}>
            <button style={{ ...deskBtnGhost, padding: "7px 11px" }}><Icon name="phone" size={13} color="#006747" /> Call</button>
            <button style={{ ...deskBtnGhost, padding: "7px 11px" }}><Icon name="mail" size={13} color="#006747" /> Email</button>
          </div>
        </div>

        <Sect title="Member">
          {[["MLS ID", member.mlsId], ["Office", member.office], ["Role", member.role], ["Transactions (12 mo)", member.txn12], ["Date licensed", member.licensed], ["Date joined", member.joined], ["Phone", member.phone]].map(([k, v]) => (
            <div key={k} style={ctxRow}><span style={ctxK}>{k}</span><span style={ctxV}>{v}</span></div>
          ))}
        </Sect>

        <Sect title={`Open listings · ${(member.listings || []).length}`}>
          {(member.listings || []).map((l, i) => (
            <div key={i} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 0", borderBottom: i < member.listings.length - 1 ? "1px solid #f4f3ee" : "none", cursor: "pointer" }}>
              <span style={{ width: 28, height: 28, borderRadius: 6, background: "#f0efe9", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="home" size={14} color="#8a8e88" /></span>
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: "#1d241f", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{l.addr}</div><div style={{ fontSize: 11, color: "#a8aca6" }}>{l.price}</div></div>
              <Pill tone={l.status === "Active" ? "active" : l.status === "Pending" ? "pending" : "neutral"}>{l.status}</Pill>
            </div>
          ))}
        </Sect>

        <Sect title="Connected tools">
          <div style={{ fontSize: 11, color: "#a8aca6", marginBottom: 9, lineHeight: 1.4 }}>Receiving this member's data via your feed platform:</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {(member.tools || []).map((tool) => (
              <span key={tool} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 500, color: "#4a504a", background: "#f6f5f1", border: "1px solid #ececec", borderRadius: 999, padding: "5px 11px" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#1f8a5b" }} /> {tool}
              </span>
            ))}
          </div>
        </Sect>

        <Sect title="Recent tickets" last>
          {(member.recent || []).length === 0 && <div style={{ fontSize: 12, color: "#a8aca6" }}>No earlier tickets.</div>}
          {(member.recent || []).map((r) => (
            <div key={r.id} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", cursor: "pointer" }}>
              <Icon name="ticket" size={14} color="#a8aca6" />
              <span style={{ flex: 1, fontSize: 12.5, color: "#4a504a", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.subject}</span>
              <StatusPill s={r.status} />
            </div>
          ))}
        </Sect>
      </div>

      {picker && (
        <div onClick={() => setPicker(false)} style={{ position: "absolute", inset: 0, background: "rgba(20,28,22,.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 40, padding: 30 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: 560, maxHeight: "80%", background: "#fff", borderRadius: 4, boxShadow: "0 18px 60px rgba(0,0,0,.3)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "14px 18px", borderBottom: "1px solid #ececec" }}>
              <Icon name="search" size={16} color="#a8aca6" />
              <input autoFocus placeholder="Search knowledgebase…" style={{ flex: 1, border: 0, outline: 0, fontFamily: "inherit", fontSize: 13.5 }} />
              <button onClick={() => setPicker(false)} style={{ border: 0, background: "none", cursor: "pointer", display: "flex" }}><Icon name="x" size={18} color="#8a8e88" /></button>
            </div>
            <div style={{ overflowY: "auto", padding: 10 }}>
              {KB.articles.map((a) => (
                <div key={a.id} onClick={() => { setAttached(a); setReplyMode("email"); setPicker(false); }} className="rc-row" style={{ display: "flex", gap: 11, alignItems: "center", padding: "10px 11px", borderRadius: 8, cursor: "pointer" }}>
                  <span style={{ width: 32, height: 32, borderRadius: 7, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={KB.typeMeta[a.type].icon} size={15} color="#006747" /></span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: "#1d241f" }}>{a.title}</div><div style={{ fontSize: 11, color: "#a8aca6" }}>{(KB.sections.find((s) => s.id === a.section) || {}).label} · {KB.typeMeta[a.type].label}</div></div>
                  <Icon name="plus" size={16} color="#006747" />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Sect({ title, children, last }) {
  return (
    <div style={{ padding: "16px 18px", borderBottom: last ? "none" : "1px solid #f0efe9" }}>
      <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "1px", textTransform: "uppercase", color: "#a8aca6", marginBottom: 11 }}>{title}</div>
      {children}
    </div>
  );
}
const ctxRow = { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 9 };
const ctxK = { fontSize: 12, color: "#8a8e88" };
const ctxV = { fontFamily: "'Space Mono',monospace", fontSize: 12, fontWeight: 600, color: "#1d241f" };
const deskBtnGhost = { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 12, fontWeight: 600, color: "#006747", background: "#fff", border: "1px solid #d7ddd9", borderRadius: 7, padding: "7px 11px", cursor: "pointer" };

window.AdminSupport = AdminSupport;