@consilioweb/payload-support 0.5.1 → 0.6.0

package/dist/views/TicketDetailView/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { redirect } from 'next/navigation';
+import { AdminErrorBoundary } from '../shared/ErrorBoundary';
+import { TicketDetailClient } from './client';
+
+const TicketDetailView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) {
+    redirect("/admin/login");
+  }
+  return /* @__PURE__ */ jsx(
+    DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "TicketDetailView", children: /* @__PURE__ */ jsx(TicketDetailClient, {}) })
+    }
+  );
+};
+var TicketDetailView_default = TicketDetailView;
+
+export { TicketDetailView, TicketDetailView_default as default };

package/dist/views/TicketInboxView/client.js

@@ -0,0 +1,294 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+const STATUS_DOTS = {
+  open: "#22c55e",
+  waiting_client: "#eab308",
+  resolved: "#94a3b8"
+};
+const STATUS_LABEL_KEYS = {
+  open: "inbox.tabs.open",
+  waiting_client: "inbox.tabs.waiting",
+  resolved: "inbox.tabs.resolved"
+};
+const PRIORITY_COLORS = {
+  urgent: "#ef4444",
+  high: "#f97316",
+  normal: "transparent",
+  low: "transparent"
+};
+const CATEGORY_LABEL_KEYS = {
+  bug: "ticket.category.bug",
+  content: "ticket.category.content",
+  feature: "ticket.category.feature",
+  question: "ticket.category.question",
+  hosting: "ticket.category.hosting"
+};
+function relativeTime(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "maintenant";
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}j`;
+  return new Date(dateStr).toLocaleDateString("fr-FR", { day: "numeric", month: "short" });
+}
+const TicketInboxClient = () => {
+  const { t } = useTranslation();
+  const searchParams = useSearchParams();
+  const [tickets, setTickets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [tab, setTab] = useState(() => {
+    const urlTab = searchParams.get("tab");
+    if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) return urlTab;
+    return "all";
+  });
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState("-updatedAt");
+  const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0 });
+  const [selectedIdx, setSelectedIdx] = useState(-1);
+  const [checkedIds, setCheckedIds] = useState(/* @__PURE__ */ new Set());
+  const [bulkAction, setBulkAction] = useState("");
+  const [bulkProcessing, setBulkProcessing] = useState(false);
+  const toggleCheck = (id) => {
+    setCheckedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const handleBulkAction = async (action) => {
+    if (checkedIds.size === 0) return;
+    setBulkProcessing(true);
+    try {
+      const res = await fetch("/api/support/bulk-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ ticketIds: Array.from(checkedIds), action })
+      });
+      if (res.ok) {
+        setCheckedIds(/* @__PURE__ */ new Set());
+        setBulkAction("");
+        fetchTickets();
+      }
+    } catch {
+    }
+    setBulkProcessing(false);
+  };
+  const fetchTickets = useCallback(async () => {
+    const params = [`limit=30`, `sort=${sort}`, `depth=1`, `select[id]=true`, `select[ticketNumber]=true`, `select[subject]=true`, `select[status]=true`, `select[priority]=true`, `select[category]=true`, `select[client]=true`, `select[updatedAt]=true`, `select[lastClientMessageAt]=true`, `select[lastAdminReadAt]=true`];
+    if (tab !== "all") params.push(`where[status][equals]=${tab}`);
+    if (search.trim()) {
+      params.push(`where[or][0][subject][contains]=${encodeURIComponent(search)}`);
+      params.push(`where[or][1][ticketNumber][contains]=${encodeURIComponent(search)}`);
+    }
+    try {
+      const url = `/api/tickets?${params.join("&")}`;
+      const res = await fetch(url, { credentials: "include" });
+      if (res.ok) {
+        const d = await res.json();
+        setTickets(d.docs || []);
+      } else {
+        console.error("[inbox] Fetch failed:", res.status, await res.text().catch(() => ""));
+      }
+    } catch (err) {
+      console.error("[inbox] Fetch error:", err);
+    }
+    setLoading(false);
+  }, [tab, sort, search]);
+  useEffect(() => {
+    setLoading(true);
+    fetchTickets();
+  }, [fetchTickets]);
+  useEffect(() => {
+    const fetchCounts = async () => {
+      try {
+        const [all, openRes, waiting, resolved] = await Promise.all([
+          fetch("/api/tickets?limit=0&depth=0", { credentials: "include" }),
+          fetch("/api/tickets?limit=0&depth=0&where[status][equals]=open", { credentials: "include" }),
+          fetch("/api/tickets?limit=0&depth=0&where[status][equals]=waiting_client", { credentials: "include" }),
+          fetch("/api/tickets?limit=0&depth=0&where[status][equals]=resolved", { credentials: "include" })
+        ]);
+        const [a, o, w, r] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json()]);
+        setCounts({ all: a.totalDocs || 0, open: o.totalDocs || 0, waiting: w.totalDocs || 0, resolved: r.totalDocs || 0 });
+      } catch {
+      }
+    };
+    fetchCounts();
+  }, []);
+  useEffect(() => {
+    const iv = setInterval(fetchTickets, 6e4);
+    return () => clearInterval(iv);
+  }, [fetchTickets]);
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (e.key === "j" || e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIdx((p) => Math.min(p + 1, tickets.length - 1));
+      }
+      if (e.key === "k" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIdx((p) => Math.max(p - 1, 0));
+      }
+      if (e.key === "Enter" && selectedIdx >= 0 && tickets[selectedIdx]) {
+        window.location.href = `/admin/support/ticket?id=${tickets[selectedIdx].id}`;
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [tickets, selectedIdx]);
+  const tabs = [
+    { key: "all", label: t("inbox.tabs.all"), count: counts.all },
+    { key: "open", label: t("inbox.tabs.open"), count: counts.open },
+    { key: "waiting_client", label: t("inbox.tabs.waiting"), count: counts.waiting },
+    { key: "resolved", label: t("inbox.tabs.resolved"), count: counts.resolved }
+  ];
+  const S = {
+    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
+    header: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 },
+    title: { fontSize: 24, fontWeight: 700, margin: 0, color: "var(--theme-text)" },
+    headerRight: { display: "flex", gap: 10, alignItems: "center" },
+    searchWrap: { position: "relative", display: "flex", alignItems: "center" },
+    searchInput: { padding: "6px 12px 6px 30px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)", width: 200 },
+    newTicketBtn: { padding: "7px 14px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 13, fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap" },
+    tabsRow: { display: "flex", gap: 4, marginBottom: 12, borderBottom: "1px solid var(--theme-elevation-200)", paddingBottom: 8 },
+    tab: { padding: "6px 12px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 13, color: "var(--theme-elevation-500)", fontWeight: 500 },
+    tabActive: { background: "var(--theme-elevation-100)", color: "var(--theme-text)", fontWeight: 700 },
+    sortRow: { display: "flex", alignItems: "center", marginBottom: 12 },
+    sortSelect: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, background: "var(--theme-elevation-0)", color: "var(--theme-text)", cursor: "pointer" },
+    loading: { padding: 40, textAlign: "center", color: "#94a3b8" },
+    empty: { padding: 60, textAlign: "center", color: "#94a3b8" },
+    list: { display: "flex", flexDirection: "column", gap: 1 },
+    row: { display: "grid", gridTemplateColumns: "20px 10px 60px 70px 1fr 140px 80px 4px 50px 10px", gap: 8, alignItems: "center", padding: "10px 12px", borderRadius: 8, textDecoration: "none", color: "var(--theme-text)", fontSize: 13, cursor: "pointer", transition: "background 100ms", background: "var(--theme-elevation-0)" },
+    statusDot: { width: 8, height: 8, borderRadius: "50%" },
+    priorityBar: { width: 4, height: 20, borderRadius: 2 },
+    unreadDot: { width: 8, height: 8, borderRadius: "50%", background: "#2563eb" },
+    keyboardHints: { display: "flex", gap: 12, marginTop: 16, fontSize: 11, color: "var(--theme-elevation-400)" }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxs("div", { style: S.header, children: [
+      /* @__PURE__ */ jsx("h1", { style: S.title, children: t("inbox.title") }),
+      /* @__PURE__ */ jsxs("div", { style: S.headerRight, children: [
+        /* @__PURE__ */ jsx("div", { style: S.searchWrap, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            style: S.searchInput,
+            placeholder: t("inbox.searchPlaceholder"),
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", style: S.newTicketBtn, children: t("inbox.newTicketBtn") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: S.tabsRow, children: tabs.map((tb) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        style: { ...S.tab, ...tab === tb.key ? S.tabActive : {} },
+        onClick: () => {
+          setTab(tb.key);
+          setSelectedIdx(-1);
+        },
+        children: [
+          tb.label,
+          " ",
+          /* @__PURE__ */ jsxs("span", { style: { opacity: 0.6 }, children: [
+            "(",
+            tb.count,
+            ")"
+          ] })
+        ]
+      },
+      tb.key
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: S.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--theme-text)" }, children: checkedIds.size > 1 ? t("inbox.selectedPlural", { count: String(checkedIds.size) }) : t("inbox.selected", { count: String(checkedIds.size) }) }),
+      /* @__PURE__ */ jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
+      /* @__PURE__ */ jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
+      /* @__PURE__ */ jsxs("select", { style: S.sortSelect, value: bulkAction, onChange: (e) => {
+        if (e.target.value) handleBulkAction(e.target.value);
+        setBulkAction("");
+      }, children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: t("inbox.moreActions") }),
+        /* @__PURE__ */ jsx("option", { value: "set_priority", children: t("inbox.changePriority") }),
+        /* @__PURE__ */ jsx("option", { value: "delete", children: t("inbox.deleteAction") })
+      ] }),
+      /* @__PURE__ */ jsx("button", { style: { ...S.sortSelect, marginLeft: "auto" }, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), children: t("inbox.deselect") })
+    ] }) : /* @__PURE__ */ jsxs("select", { style: S.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
+      /* @__PURE__ */ jsx("option", { value: "-updatedAt", children: t("inbox.sort.newest") }),
+      /* @__PURE__ */ jsx("option", { value: "updatedAt", children: t("inbox.sort.oldest") }),
+      /* @__PURE__ */ jsx("option", { value: "-createdAt", children: t("inbox.sort.created") }),
+      /* @__PURE__ */ jsx("option", { value: "priority", children: t("inbox.sort.priority") })
+    ] }) }),
+    loading ? /* @__PURE__ */ jsx("div", { style: S.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsx("div", { style: S.empty, children: t("inbox.empty") }) : /* @__PURE__ */ jsx("div", { style: S.list, children: tickets.map((tk, idx) => {
+      const clientObj = typeof tk.client === "object" ? tk.client : null;
+      const clientName = clientObj ? `${clientObj.firstName || ""} ${clientObj.lastName || ""}`.trim() : "";
+      const clientCompany = clientObj?.company || "";
+      const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "--";
+      const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt));
+      const priorityColor = PRIORITY_COLORS[tk.priority] || "transparent";
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `/admin/support/ticket?id=${tk.id}`,
+          style: { ...S.row, ...idx === selectedIdx ? { background: "var(--theme-elevation-100)" } : {} },
+          onClick: (e) => {
+            e.preventDefault();
+            window.location.href = `/admin/support/ticket?id=${tk.id}`;
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: checkedIds.has(tk.id),
+                onClick: (e) => e.stopPropagation(),
+                onChange: () => toggleCheck(tk.id),
+                style: { width: 14, height: 14, cursor: "pointer", accentColor: "#2563eb" }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { ...S.statusDot, backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: STATUS_LABEL_KEYS[tk.status] ? t(STATUS_LABEL_KEYS[tk.status]) : tk.status }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 12, color: "var(--theme-elevation-400)" }, children: tk.ticketNumber }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: tk.subject }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: displayClient }),
+            tk.category ? /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: [
+              "[",
+              CATEGORY_LABEL_KEYS[tk.category] ? t(CATEGORY_LABEL_KEYS[tk.category]) : tk.category,
+              "]"
+            ] }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("div", { style: { ...S.priorityBar, backgroundColor: priorityColor } }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "right" }, children: relativeTime(tk.updatedAt) }),
+            isUnread ? /* @__PURE__ */ jsx("div", { style: S.unreadDot }) : /* @__PURE__ */ jsx("span", {})
+          ]
+        },
+        tk.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { style: S.keyboardHints, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("kbd", { children: "\u2191" }),
+        /* @__PURE__ */ jsx("kbd", { children: "\u2193" }),
+        " ",
+        t("inbox.keyboardNavigate")
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("kbd", { children: "\u21B5" }),
+        " ",
+        t("inbox.keyboardOpen")
+      ] })
+    ] })
+  ] });
+};
+
+export { TicketInboxClient };

package/dist/views/TicketInboxView/index.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { redirect } from 'next/navigation';
+import { AdminErrorBoundary } from '../shared/ErrorBoundary';
+import { TicketInboxClient } from './client';
+
+const TicketInboxView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) redirect("/admin/login");
+  return /* @__PURE__ */ jsx(
+    DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "TicketInboxView", children: /* @__PURE__ */ jsx(TicketInboxClient, {}) })
+    }
+  );
+};
+var TicketInboxView_default = TicketInboxView;
+
+export { TicketInboxView, TicketInboxView_default as default };

package/dist/views/TicketingSettingsView/TicketingSettings.module.scss

@@ -0,0 +1,350 @@
+.page {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 1.5rem 3rem;
+}
+
+.intro {
+  font-size: 0.875rem;
+  color: var(--theme-elevation-600);
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+// ── Sections ──────────────────────────────────
+
+.sectionWrapper {
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  background: var(--theme-elevation-0);
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.25rem;
+  cursor: pointer;
+  user-select: none;
+  transition: background 150ms;
+
+  &:hover {
+    background: var(--theme-elevation-50);
+  }
+}
+
+.sectionIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--theme-text);
+  flex: 1;
+}
+
+.sectionChevron {
+  font-size: 0.625rem;
+  color: var(--theme-elevation-400);
+  transition: transform 200ms;
+
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.sectionBody {
+  padding: 1rem 1.25rem 1.25rem;
+  border-top: 1px solid var(--theme-elevation-100);
+}
+
+.sectionDescription {
+  font-size: 0.8125rem;
+  color: var(--theme-elevation-500);
+  margin: 0 0 1rem;
+  line-height: 1.5;
+}
+
+// ── Badges ────────────────────────────────────
+
+.badge {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+
+// ── Feature cards ─────────────────────────────
+
+.categoryGroup {
+  margin-bottom: 1.25rem;
+}
+
+.categoryHeading {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.categoryDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.featureList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.featureCard {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--theme-elevation-150);
+  cursor: pointer;
+  transition: all 150ms;
+
+  &:hover {
+    background: var(--theme-elevation-50);
+  }
+
+  &.enabled {
+    border-color: var(--theme-elevation-200);
+    background: var(--theme-elevation-50);
+  }
+}
+
+.featureLabel {
+  font-weight: 600;
+  font-size: 0.8125rem;
+  color: var(--theme-text);
+}
+
+.featureDesc {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-500);
+  margin-top: 0.125rem;
+}
+
+// ── Fields ────────────────────────────────────
+
+.fieldRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.625rem 0;
+}
+
+.fieldLabel {
+  flex: 0 0 200px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--theme-text);
+  padding-top: 0.5rem;
+}
+
+.fieldDescription {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-500);
+  font-weight: 400;
+  margin-top: 0.125rem;
+}
+
+.fieldContent {
+  flex: 1;
+}
+
+.input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  background: var(--theme-input-bg, var(--theme-elevation-0));
+  color: var(--theme-text);
+  outline: none;
+  transition: border-color 150ms;
+
+  &:focus {
+    border-color: var(--theme-success-500);
+  }
+}
+
+.inputReadonly {
+  composes: input;
+  background: var(--theme-elevation-50);
+  color: var(--theme-elevation-500);
+  cursor: not-allowed;
+}
+
+.select {
+  composes: input;
+  appearance: auto;
+}
+
+.numberInput {
+  composes: input;
+  max-width: 120px;
+}
+
+.separator {
+  border-top: 1px solid var(--theme-elevation-100);
+  margin: 1rem 0;
+}
+
+// ── Toggle rows ───────────────────────────────
+
+.toggleRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+.inlineLabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.inlineDesc {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-500);
+  margin-top: 0.125rem;
+}
+
+// ── SLA ───────────────────────────────────────
+
+.slaInline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.slaHint {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-500);
+}
+
+// ── API Key ───────────────────────────────────
+
+.apiKeyRow {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.apiKeyToggle {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  background: var(--theme-elevation-50);
+  color: var(--theme-text);
+  font-size: 0.75rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+// ── AI sub features ───────────────────────────
+
+.aiSubFeaturesLabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--theme-text);
+  margin: 0 0 0.5rem;
+}
+
+.aiToggleRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0;
+}
+
+.aiToggleLabel {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--theme-text);
+}
+
+.aiToggleDesc {
+  display: block;
+  font-size: 0.6875rem;
+  color: var(--theme-elevation-500);
+}
+
+// ── Signature ─────────────────────────────────
+
+.signatureTextarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  background: var(--theme-input-bg, var(--theme-elevation-0));
+  color: var(--theme-text);
+  resize: vertical;
+  outline: none;
+
+  &:focus {
+    border-color: var(--theme-success-500);
+  }
+}
+
+// ── Purge ─────────────────────────────────────
+
+.purgeGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.purgeCategory {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.purgeCategoryLabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--theme-text);
+  min-width: 100px;
+}
+
+.purgeButtons {
+  display: flex;
+  gap: 0.375rem;
+}
+
+// ── Bottom bar ────────────────────────────────
+
+.bottomBar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--theme-elevation-100);
+  margin-top: 1rem;
+}