@consilioweb/payload-support 0.9.12 → 0.10.0

package/dist/styles/TicketInbox.module.scss

@@ -18,9 +18,21 @@
 
 .title {
   font-size: 24px;
-  font-weight: 800;
+  font-weight: 700;
   color: var(--theme-text);
   margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin: 2px 0 0;
+}
+
+.subtitleBreach {
+  color: var(--theme-error-500, #c4392c);
+  font-weight: 600;
 }
 
 .headerRight {
@@ -56,8 +68,8 @@
 
   &:focus {
     outline: none;
-    border-color: #2563eb;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+    border-color: var(--theme-info-500, #2a6bd8);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
   }
 
   &::placeholder { color: var(--theme-elevation-400); }
@@ -78,50 +90,84 @@
 .newTicketBtn {
   padding: 8px 18px;
   border-radius: 8px;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-0, #fff);
-  color: var(--theme-text);
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 100ms;
   text-decoration: none;
-  &:hover { background: var(--theme-elevation-100); }
+  &:hover {
+    background: var(--theme-elevation-800);
+    border-color: var(--theme-elevation-800);
+  }
 }
 
-// Filter tabs
+// Filter tabs / segments
 .tabs {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   gap: 0;
-  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
-  margin-bottom: 0;
+  background: var(--theme-elevation-100);
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 8px;
+  padding: 2px;
+  margin: 4px 0 6px;
+  flex-wrap: wrap;
 }
 
 .tab {
-  padding: 10px 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-elevation-500);
   background: none;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 100ms;
+  transition: background 100ms, color 100ms;
   white-space: nowrap;
 
   &:hover { color: var(--theme-text); }
 
   &.tabActive {
     color: var(--theme-text);
-    border-bottom-color: #2563eb;
+    background: var(--theme-elevation-0, #fff);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  }
+
+  &.tabAlert:not(.tabActive) {
+    color: var(--theme-error-500, #c4392c);
   }
 }
 
 .tabCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
   font-size: 11px;
-  font-weight: 700;
-  color: var(--theme-elevation-400);
-  margin-left: 4px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  background: var(--theme-elevation-200);
+  border-radius: 999px;
+}
+
+.tabActive .tabCount {
+  background: var(--theme-elevation-100);
+  color: var(--theme-text);
+}
+
+.tabCountAlert {
+  color: var(--theme-error-500, #c4392c) !important;
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 12%, transparent) !important;
 }
 
 .sortRow {
@@ -147,54 +193,73 @@
   flex-direction: column;
 }
 
+// Layout : check | priority-dot | StatusPill | ticket# | subject | client | sla | updated | unread
 .row {
   display: grid;
-  grid-template-columns: 18px 16px 70px 50px 1fr 180px 100px 80px 100px 12px;
-  gap: 10px;
+  grid-template-columns: 18px 12px 110px 80px 1fr 200px 90px 90px 12px;
+  gap: 12px;
   align-items: center;
-  padding: 11px 12px;
-  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--theme-elevation-100, #f3f3f3);
   cursor: pointer;
-  transition: background 60ms;
+  transition: background 80ms ease;
   text-decoration: none;
   color: inherit;
+  position: relative;
 
   &:hover { background: var(--theme-elevation-50); }
 
   @media (max-width: 900px) {
-    grid-template-columns: 16px 60px 1fr 100px 80px;
+    grid-template-columns: 16px 110px 1fr 80px 80px;
   }
 }
 
 .rowSelected {
-  background: #eff6ff;
-  border-left: 3px solid #2563eb;
-  padding-left: 9px;
+  background: var(--theme-elevation-100);
+}
+
+.rowUnread {
+  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-info-500, #2a6bd8) 8%, transparent) 0, transparent 6px);
+
+  .subject { font-weight: 700; }
 }
 
-.statusDot {
+.rowBreach::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--theme-error-500, #c4392c);
+}
+
+.rowCheck {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  accent-color: var(--theme-text);
+}
+
+.priorityDot {
+  display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 
-.statusText {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-}
-
 .ticketNum {
   font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
   font-size: 11px;
   color: var(--theme-elevation-400);
   font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 .subject {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -209,35 +274,32 @@
   white-space: nowrap;
 }
 
-.categoryChip {
+// SLA cell — color reflects state (computed in computeSlaState)
+.slaCell {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--theme-elevation-100);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--theme-elevation-400);
   white-space: nowrap;
 }
-
-.priorityBar {
-  width: 4px;
-  height: 18px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
+.slaOk     { color: var(--theme-elevation-400); }
+.slaWarn   { color: var(--theme-warning-500, #c97a0a); font-weight: 600; }
+.slaBreach { color: var(--theme-error-500, #c4392c); font-weight: 700; }
 
 .timeAgo {
   font-size: 12px;
   color: var(--theme-elevation-400);
   white-space: nowrap;
   text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 
 .unreadDot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--theme-info-500, #2a6bd8);
   flex-shrink: 0;
 }
 

package/dist/views/TicketDetailView/client.cjs

@@ -8,6 +8,7 @@ var index = require('../../components/RichTextEditor/index');
 var CodeBlock = require('../../components/TicketConversation/components/CodeBlock');
 var CodeBlockInserter = require('../../components/TicketConversation/components/CodeBlockInserter');
 var config = require('../shared/config');
+var sla = require('../shared/sla');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
 var s = require('../../styles/TicketDetail.module.scss');
 
@@ -669,6 +670,46 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         ] })
       ] })
     ] }),
+    (() => {
+      const slaInfo = sla.computeSlaState({
+        slaFirstResponseDue: ticket.slaFirstResponseDue,
+        slaFirstResponseBreached: ticket.slaFirstResponseBreached,
+        slaResolutionDue: ticket.slaResolutionDue,
+        slaResolutionBreached: ticket.slaResolutionBreached,
+        firstResponseAt: ticket.firstResponseAt
+      });
+      if (slaInfo.state !== "breach") return null;
+      const duration = sla.formatSlaRemaining(slaInfo.remainingMs).replace(/^−/, "");
+      const target = slaInfo.due ? new Date(slaInfo.due).toLocaleString("fr-FR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }) : "";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.slaBanner, role: "alert", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.slaBannerIcon, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4M12 17h.01" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.slaBannerBody, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: t("inbox.slaBanner.breached") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.slaBannerSep, children: "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("inbox.slaBanner.responseAwaitedFor", { duration }) }),
+          target && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.slaBannerTarget, children: [
+            "\xB7 ",
+            t("inbox.slaBanner.target", { target })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: s__default.default.slaBannerCta,
+            onClick: () => handleStatusChange("escalated"),
+            "aria-label": t("inbox.slaBanner.escalate"),
+            children: [
+              "\u2191 ",
+              t("inbox.slaBanner.escalate")
+            ]
+          }
+        )
+      ] });
+    })(),
     otherViewers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
       display: "flex",
       alignItems: "center",
@@ -695,8 +736,17 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             const isPendingDelete = undoToast?.msgId === msg.id;
             return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
               showDate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.dateSeparator, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.dateSeparatorText, children: dateLabel(msg.createdAt) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${s__default.default.message} ${msg.isInternal ? s__default.default.messageInternal : ""}`, style: isPendingDelete ? { opacity: 0.3, pointerEvents: "none" } : void 0, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.avatar, style: { backgroundColor: isAdmin ? "#2563eb" : msg.authorType === "email" ? "#ea580c" : "#7c3aed" }, children: isAdmin ? "CW" : initials }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${s__default.default.message} ${isAdmin ? s__default.default.messageAdmin : s__default.default.messageClient} ${msg.isInternal ? s__default.default.messageInternal : ""}`, style: isPendingDelete ? { opacity: 0.3, pointerEvents: "none" } : void 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: s__default.default.avatar,
+                    style: {
+                      backgroundColor: isAdmin ? "var(--theme-info-500, #2a6bd8)" : msg.authorType === "email" ? "var(--theme-warning-500, #c97a0a)" : "var(--theme-accent-500, #6b46e8)"
+                    },
+                    children: isAdmin ? "CW" : initials
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageContent, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageHeader, children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.messageAuthor, children: isAdmin ? "Support" : msg.authorType === "email" ? "Email" : client?.firstName || "Client" }),
@@ -798,7 +848,17 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerToolbar, children: [
                 features.ai && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.toolbarBtn, "data-tooltip": t("detail.iaSuggestion"), "aria-label": t("detail.iaSuggestion"), onClick: handleAiSuggest, disabled: aiReplying || messages.length === 0, style: { fontSize: 11, fontWeight: 700, padding: "4px 10px", width: "auto" }, children: aiReplying ? "..." : `\u2728 ${t("detail.iaSuggestion")}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: `${s__default.default.toolbarBtn} ${s__default.default.toolbarBtnAi}`,
+                      "data-tooltip": t("detail.iaSuggestion"),
+                      "aria-label": t("detail.iaSuggestion"),
+                      onClick: handleAiSuggest,
+                      disabled: aiReplying || messages.length === 0,
+                      children: aiReplying ? "\u2026" : `\u2728 ${t("detail.iaSuggestion")}`
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsx(RewriteDropdown, { disabled: aiRewriting || !replyBody.trim(), loading: aiRewriting, onSelect: (style) => handleAiRewrite(style), toolbarBtnClass: s__default.default.toolbarBtn })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -921,6 +981,10 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                     ] })
                   ] })
                 ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.sendShortcut, "aria-hidden": true, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { children: "\u2318" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { children: "\u21B5" })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.sendBtn} ${isInternal ? s__default.default.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : sendAsClient ? "Ajouter message client" : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
               ] })
             ]
@@ -946,6 +1010,18 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.smallBtn, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
           ] })
         ] }),
+        clientSummary && clientSummary.summary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${s__default.default.sideSection} ${s__default.default.aiCard}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiCardTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardIcon, "aria-hidden": true, children: "\u2728" }),
+            "Synth\xE8se client"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: s__default.default.aiCardLead, children: clientSummary.summary }),
+          clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.aiCardChips, children: clientSummary.recurringTopics.slice(0, 5).map((tp, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiChip, children: tp.topic }, `tp-${i}`)) }),
+          clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: s__default.default.aiCardFacts, children: clientSummary.keyFacts.slice(0, 4).map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: s__default.default.aiCardFact, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardDot, "aria-hidden": true }),
+            f
+          ] }, `kf-${i}`)) })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.details") }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
@@ -1203,16 +1279,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             ] })
           ] }, a.id))
         ] }),
-        clientSummary && clientSummary.summary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, style: { background: "linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSectionTitle, style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: "\u{1F9E0}" }),
-            " R\xE9sum\xE9 client"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 8px", fontSize: 11, lineHeight: 1.6, color: "#374151" }, children: clientSummary.summary }),
-          clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 6 }, children: clientSummary.recurringTopics.slice(0, 3).map((tp, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "rgba(37,99,235,0.08)", color: "#2563eb", fontSize: 10, fontWeight: 600 }, children: tp.topic }, i)) }),
-          clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: clientSummary.keyFacts.slice(0, 3).map((f, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "rgba(22,163,74,0.08)", color: "#16a34a", fontSize: 10, fontWeight: 600 }, children: f }, i)) })
-        ] }),
-        summaryLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSection, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "#94a3b8", textAlign: "center", padding: 8 }, children: "\u{1F9E0} Chargement r\xE9sum\xE9..." }) })
+        summaryLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSection, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "center", padding: 8 }, children: "\u2728 Chargement de la synth\xE8se\u2026" }) })
       ] })
     ] }),
     undoToast && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.undoToast, role: "alert", children: [

package/dist/views/TicketDetailView/client.js

@@ -7,6 +7,7 @@ import { RichTextEditor } from '../../components/RichTextEditor/index.js';
 import { hasCodeBlocks, CodeBlockRendererHtml, MessageWithCodeBlocks } from '../../components/TicketConversation/components/CodeBlock.js';
 import { CodeBlockInserter } from '../../components/TicketConversation/components/CodeBlockInserter.js';
 import { getFeatures } from '../shared/config.js';
+import { computeSlaState, formatSlaRemaining } from '../shared/sla.js';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
 import s from '../../styles/TicketDetail.module.scss';
 
@@ -662,6 +663,46 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         ] })
       ] })
     ] }),
+    (() => {
+      const slaInfo = computeSlaState({
+        slaFirstResponseDue: ticket.slaFirstResponseDue,
+        slaFirstResponseBreached: ticket.slaFirstResponseBreached,
+        slaResolutionDue: ticket.slaResolutionDue,
+        slaResolutionBreached: ticket.slaResolutionBreached,
+        firstResponseAt: ticket.firstResponseAt
+      });
+      if (slaInfo.state !== "breach") return null;
+      const duration = formatSlaRemaining(slaInfo.remainingMs).replace(/^−/, "");
+      const target = slaInfo.due ? new Date(slaInfo.due).toLocaleString("fr-FR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }) : "";
+      return /* @__PURE__ */ jsxs("div", { className: s.slaBanner, role: "alert", children: [
+        /* @__PURE__ */ jsx("span", { className: s.slaBannerIcon, "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" }),
+          /* @__PURE__ */ jsx("path", { d: "M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: s.slaBannerBody, children: [
+          /* @__PURE__ */ jsx("strong", { children: t("inbox.slaBanner.breached") }),
+          /* @__PURE__ */ jsx("span", { className: s.slaBannerSep, children: "\u2014" }),
+          /* @__PURE__ */ jsx("span", { children: t("inbox.slaBanner.responseAwaitedFor", { duration }) }),
+          target && /* @__PURE__ */ jsxs("span", { className: s.slaBannerTarget, children: [
+            "\xB7 ",
+            t("inbox.slaBanner.target", { target })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: s.slaBannerCta,
+            onClick: () => handleStatusChange("escalated"),
+            "aria-label": t("inbox.slaBanner.escalate"),
+            children: [
+              "\u2191 ",
+              t("inbox.slaBanner.escalate")
+            ]
+          }
+        )
+      ] });
+    })(),
     otherViewers.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
       display: "flex",
       alignItems: "center",
@@ -688,8 +729,17 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             const isPendingDelete = undoToast?.msgId === msg.id;
             return /* @__PURE__ */ jsxs(React.Fragment, { children: [
               showDate && /* @__PURE__ */ jsx("div", { className: s.dateSeparator, children: /* @__PURE__ */ jsx("span", { className: s.dateSeparatorText, children: dateLabel(msg.createdAt) }) }),
-              /* @__PURE__ */ jsxs("div", { className: `${s.message} ${msg.isInternal ? s.messageInternal : ""}`, style: isPendingDelete ? { opacity: 0.3, pointerEvents: "none" } : void 0, children: [
-                /* @__PURE__ */ jsx("div", { className: s.avatar, style: { backgroundColor: isAdmin ? "#2563eb" : msg.authorType === "email" ? "#ea580c" : "#7c3aed" }, children: isAdmin ? "CW" : initials }),
+              /* @__PURE__ */ jsxs("div", { className: `${s.message} ${isAdmin ? s.messageAdmin : s.messageClient} ${msg.isInternal ? s.messageInternal : ""}`, style: isPendingDelete ? { opacity: 0.3, pointerEvents: "none" } : void 0, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: s.avatar,
+                    style: {
+                      backgroundColor: isAdmin ? "var(--theme-info-500, #2a6bd8)" : msg.authorType === "email" ? "var(--theme-warning-500, #c97a0a)" : "var(--theme-accent-500, #6b46e8)"
+                    },
+                    children: isAdmin ? "CW" : initials
+                  }
+                ),
                 /* @__PURE__ */ jsxs("div", { className: s.messageContent, children: [
                   /* @__PURE__ */ jsxs("div", { className: s.messageHeader, children: [
                     /* @__PURE__ */ jsx("span", { className: s.messageAuthor, children: isAdmin ? "Support" : msg.authorType === "email" ? "Email" : client?.firstName || "Client" }),
@@ -791,7 +841,17 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             children: [
               /* @__PURE__ */ jsxs("div", { className: s.composerToolbar, children: [
                 features.ai && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("button", { className: s.toolbarBtn, "data-tooltip": t("detail.iaSuggestion"), "aria-label": t("detail.iaSuggestion"), onClick: handleAiSuggest, disabled: aiReplying || messages.length === 0, style: { fontSize: 11, fontWeight: 700, padding: "4px 10px", width: "auto" }, children: aiReplying ? "..." : `\u2728 ${t("detail.iaSuggestion")}` }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: `${s.toolbarBtn} ${s.toolbarBtnAi}`,
+                      "data-tooltip": t("detail.iaSuggestion"),
+                      "aria-label": t("detail.iaSuggestion"),
+                      onClick: handleAiSuggest,
+                      disabled: aiReplying || messages.length === 0,
+                      children: aiReplying ? "\u2026" : `\u2728 ${t("detail.iaSuggestion")}`
+                    }
+                  ),
                   /* @__PURE__ */ jsx(RewriteDropdown, { disabled: aiRewriting || !replyBody.trim(), loading: aiRewriting, onSelect: (style) => handleAiRewrite(style), toolbarBtnClass: s.toolbarBtn })
                 ] }),
                 /* @__PURE__ */ jsx(
@@ -914,6 +974,10 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                     ] })
                   ] })
                 ] }),
+                /* @__PURE__ */ jsxs("span", { className: s.sendShortcut, "aria-hidden": true, children: [
+                  /* @__PURE__ */ jsx("kbd", { children: "\u2318" }),
+                  /* @__PURE__ */ jsx("kbd", { children: "\u21B5" })
+                ] }),
                 /* @__PURE__ */ jsx("button", { className: `${s.sendBtn} ${isInternal ? s.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : sendAsClient ? "Ajouter message client" : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
               ] })
             ]
@@ -939,6 +1003,18 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             /* @__PURE__ */ jsx("button", { className: s.smallBtn, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
           ] })
         ] }),
+        clientSummary && clientSummary.summary && /* @__PURE__ */ jsxs("div", { className: `${s.sideSection} ${s.aiCard}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: s.aiCardTitle, children: [
+            /* @__PURE__ */ jsx("span", { className: s.aiCardIcon, "aria-hidden": true, children: "\u2728" }),
+            "Synth\xE8se client"
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: s.aiCardLead, children: clientSummary.summary }),
+          clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsx("div", { className: s.aiCardChips, children: clientSummary.recurringTopics.slice(0, 5).map((tp, i) => /* @__PURE__ */ jsx("span", { className: s.aiChip, children: tp.topic }, `tp-${i}`)) }),
+          clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsx("ul", { className: s.aiCardFacts, children: clientSummary.keyFacts.slice(0, 4).map((f, i) => /* @__PURE__ */ jsxs("li", { className: s.aiCardFact, children: [
+            /* @__PURE__ */ jsx("span", { className: s.aiCardDot, "aria-hidden": true }),
+            f
+          ] }, `kf-${i}`)) })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: s.sideSection, children: [
           /* @__PURE__ */ jsx("div", { className: s.sideSectionTitle, children: t("detail.details") }),
           /* @__PURE__ */ jsxs("div", { className: s.sideField, children: [
@@ -1196,16 +1272,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             ] })
           ] }, a.id))
         ] }),
-        clientSummary && clientSummary.summary && /* @__PURE__ */ jsxs("div", { className: s.sideSection, style: { background: "linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%)" }, children: [
-          /* @__PURE__ */ jsxs("div", { className: s.sideSectionTitle, style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: "\u{1F9E0}" }),
-            " R\xE9sum\xE9 client"
-          ] }),
-          /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", fontSize: 11, lineHeight: 1.6, color: "#374151" }, children: clientSummary.summary }),
-          clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 6 }, children: clientSummary.recurringTopics.slice(0, 3).map((tp, i) => /* @__PURE__ */ jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "rgba(37,99,235,0.08)", color: "#2563eb", fontSize: 10, fontWeight: 600 }, children: tp.topic }, i)) }),
-          clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: clientSummary.keyFacts.slice(0, 3).map((f, i) => /* @__PURE__ */ jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "rgba(22,163,74,0.08)", color: "#16a34a", fontSize: 10, fontWeight: 600 }, children: f }, i)) })
-        ] }),
-        summaryLoading && /* @__PURE__ */ jsx("div", { className: s.sideSection, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#94a3b8", textAlign: "center", padding: 8 }, children: "\u{1F9E0} Chargement r\xE9sum\xE9..." }) })
+        summaryLoading && /* @__PURE__ */ jsx("div", { className: s.sideSection, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "center", padding: 8 }, children: "\u2728 Chargement de la synth\xE8se\u2026" }) })
       ] })
     ] }),
     undoToast && /* @__PURE__ */ jsxs("div", { className: s.undoToast, role: "alert", children: [