@consilioweb/payload-support 0.8.1 → 0.9.4

package/src/views/TicketDetailView/client.tsx

@@ -3,6 +3,9 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
+import { RichTextEditor, type RichTextEditorHandle } from '../../components/RichTextEditor/index'
+import { hasCodeBlocks, MessageWithCodeBlocks, CodeBlockRendererHtml } from '../../components/TicketConversation/components/CodeBlock'
+import { CodeBlockInserter } from '../../components/TicketConversation/components/CodeBlockInserter'
 import { getFeatures } from '../shared/config'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import s from '../../styles/TicketDetail.module.scss'
@@ -16,10 +19,10 @@ interface ClientInfo { id: number; company: string; firstName: string; lastName:
 interface TimeEntry { id: string | number; duration: number; description?: string; date: string }
 interface ActivityEntry { id: string | number; action: string; detail?: string; actorType?: string; createdAt: string }
 
-const STATUS: Record<string, { label: string; bg: string; color: string }> = {
-  open: { label: 'Ouvert', bg: '#dbeafe', color: '#1e40af' },
-  waiting_client: { label: 'En attente', bg: '#fef3c7', color: '#92400e' },
-  resolved: { label: 'Resolu', bg: '#dcfce7', color: '#166534' },
+const STATUS_STYLE: Record<string, { bg: string; color: string }> = {
+  open: { bg: '#dbeafe', color: '#1e40af' },
+  waiting_client: { bg: '#fef3c7', color: '#92400e' },
+  resolved: { bg: '#dcfce7', color: '#166534' },
 }
 
 function timeAgo(d: string): string {
@@ -38,11 +41,81 @@ function dateLabel(d: string): string {
   return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' })
 }
 
+// ── Rewrite style dropdown ──────────────────────────────────────────────
+const REWRITE_STYLES = [
+  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
+  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
+  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
+  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
+  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
+  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
+]
+
+const RewriteDropdown: React.FC<{
+  disabled: boolean
+  loading: boolean
+  onSelect: (style: string) => void
+  toolbarBtnClass?: string
+}> = ({ disabled, loading, onSelect, toolbarBtnClass }) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        type="button"
+        className={toolbarBtnClass}
+        onClick={() => setOpen(!open)}
+        disabled={disabled}
+        style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {loading ? '...' : '✏️ Reformuler'}
+        {!loading && <span style={{ fontSize: 9, opacity: 0.6 }}>▼</span>}
+      </button>
+      {open && !disabled && !loading && (
+        <div style={{
+          position: 'absolute', bottom: '100%', left: 0, marginBottom: 4,
+          background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
+          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', zIndex: 100, minWidth: 180, overflow: 'hidden',
+        }}>
+          {REWRITE_STYLES.map((style) => (
+            <button
+              key={style.id}
+              type="button"
+              onClick={() => { setOpen(false); onSelect(style.id) }}
+              style={{
+                display: 'flex', flexDirection: 'column', width: '100%', padding: '8px 12px',
+                border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left',
+                borderBottom: '1px solid #f3f4f6',
+              }}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = '#f9fafb' }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent' }}
+            >
+              <span style={{ fontSize: 12, fontWeight: 600 }}>{style.label}</span>
+              <span style={{ fontSize: 10, color: '#9ca3af' }}>{style.desc}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export const TicketDetailClient: React.FC = () => {
   const { t } = useTranslation()
   const searchParams = useSearchParams()
   const ticketId = searchParams.get('id')
   const features = getFeatures()
+  const editorRef = useRef<RichTextEditorHandle>(null)
   const threadEndRef = useRef<HTMLDivElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -56,17 +129,21 @@ export const TicketDetailClient: React.FC = () => {
   const [loading, setLoading] = useState(true)
 
   const [replyBody, setReplyBody] = useState('')
+  const [replyHtml, setReplyHtml] = useState('')
   const [isInternal, setIsInternal] = useState(false)
   const [notifyClient, setNotifyClient] = useState(true)
   const [sending, setSending] = useState(false)
 
   const [showMenu, setShowMenu] = useState(false)
-  const [clientTyping, setClientTyping] = useState(false)
+const [clientTyping, setClientTyping] = useState(false)
   const [aiReplying, setAiReplying] = useState(false)
   const [aiRewriting, setAiRewriting] = useState(false)
   const [sentiment, setSentiment] = useState<{ emoji: string; label: string; color: string } | null>(null)
   const [statusUpdating, setStatusUpdating] = useState(false)
   const [showActivity, setShowActivity] = useState(false)
+  // Client Intelligence
+  const [clientSummary, setClientSummary] = useState<{ summary: string; recurringTopics?: { topic: string; count: number }[]; keyFacts?: string[] } | null>(null)
+  const [summaryLoading, setSummaryLoading] = useState(false)
   const [timerRunning, setTimerRunning] = useState(() => {
     if (typeof window === 'undefined' || !ticketId) return false
     return localStorage.getItem(`timer-run-${ticketId}`) === '1'
@@ -87,23 +164,23 @@ export const TicketDetailClient: React.FC = () => {
   const [macros, setMacros] = useState<Array<{ id: number; name: string }>>([])
   const [applyingMacro, setApplyingMacro] = useState(false)
 
-  // Undo toast state
+  // #2 — Undo toast state
   const [undoToast, setUndoToast] = useState<{ msgId: string | number; timer: ReturnType<typeof setTimeout> } | null>(null)
 
-  // Split modal state
+  // #2 — Split modal state
   const [splitModal, setSplitModal] = useState<{ messageId: string | number; preview: string } | null>(null)
   const [splitSubject, setSplitSubject] = useState('')
 
-  // File upload state
+  // #5 — File upload state
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [composerDragOver, setComposerDragOver] = useState(false)
 
-  // Tags state
+  // #6 — Tags state
   const [tags, setTags] = useState<string[]>([])
   const [addingTag, setAddingTag] = useState(false)
   const [newTagValue, setNewTagValue] = useState('')
 
-  // ---- DATA FETCHING ----
+  // ─── DATA FETCHING ───
   const fetchAll = useCallback(async () => {
     if (!ticketId) return
     try {
@@ -119,6 +196,7 @@ export const TicketDetailClient: React.FC = () => {
         const d = await tr.json()
         setTicket(d)
         if (d.client && typeof d.client === 'object') setClient(d.client)
+        // #6 — Sync tags
         if (Array.isArray(d.tags)) setTags(d.tags.map((t: { tag?: string } | string) => typeof t === 'object' ? (t.tag || '') : t).filter(Boolean))
       }
       if (ter.ok) { const d = await ter.json(); setTimeEntries(d.docs || []) }
@@ -128,52 +206,77 @@ export const TicketDetailClient: React.FC = () => {
     setLoading(false)
   }, [ticketId])
 
+  // Circuit breaker: stop polling after consecutive failures
+  const failCountRef = useRef({ messages: 0, typing: 0, presence: 0 })
+  const MAX_FAILS = 3
+
   useEffect(() => { fetchAll() }, [fetchAll])
+  // Fetch client summary when ticket loads
   useEffect(() => {
+    if (!ticket) return
+    const clientId = typeof ticket.client === 'object' ? (ticket.client as any)?.id : ticket.client
+    if (!clientId) return
+    setSummaryLoading(true)
+    fetch(`/api/support/client-intelligence?clientId=${clientId}`, { credentials: 'include' })
+      .then((r) => r.ok ? r.json() : null)
+      .then((d) => { if (d) setClientSummary(d) })
+      .catch(() => {})
+      .finally(() => setSummaryLoading(false))
+  }, [ticket?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { // Poll 10s
     if (!ticketId || loading) return
     const iv = setInterval(async () => {
+      if (failCountRef.current.messages >= MAX_FAILS) return
       try {
         const [mr, tr] = await Promise.all([
           fetch(`/api/ticket-messages?where[ticket][equals]=${ticketId}&sort=createdAt&limit=200&depth=1`, { credentials: 'include' }),
           fetch(`/api/tickets/${ticketId}?depth=0`, { credentials: 'include' }),
         ])
-        if (mr.ok) { const d = await mr.json(); setMessages(d.docs || []) }
-        if (tr.ok) { const d = await tr.json(); setTicket((p) => p ? { ...p, ...d } : d) }
-      } catch { /* */ }
+        if (mr.ok && tr.ok) {
+          failCountRef.current.messages = 0
+          const d = await mr.json(); setMessages(d.docs || [])
+          const td = await tr.json(); setTicket((p) => p ? { ...p, ...td } : td)
+        } else { failCountRef.current.messages++ }
+      } catch { failCountRef.current.messages++ }
     }, 10000)
     return () => clearInterval(iv)
   }, [ticketId, loading])
-  useEffect(() => {
+  useEffect(() => { // Mark read
     if (!ticketId) return
     fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ lastAdminReadAt: new Date().toISOString() }) }).catch(() => {})
   }, [ticketId, messages.length])
-  useEffect(() => {
+  useEffect(() => { // Typing
     if (!ticketId) return
     const iv = setInterval(async () => {
-      try { const r = await fetch(`/api/support/typing?ticketId=${ticketId}`, { credentials: 'include' }); if (r.ok) { const d = await r.json(); setClientTyping(d.typing) } } catch (err) { console.warn('[support] typing poll error:', err) }
-    }, 2000)
+      if (failCountRef.current.typing >= MAX_FAILS) return
+      try {
+        const r = await fetch(`/api/support/typing?ticketId=${ticketId}`, { credentials: 'include' })
+        if (r.ok) { failCountRef.current.typing = 0; const d = await r.json(); setClientTyping(d.typing) }
+        else { failCountRef.current.typing++ }
+      } catch { failCountRef.current.typing++ }
+    }, 3000)
     return () => clearInterval(iv)
   }, [ticketId])
-  useEffect(() => {
+  useEffect(() => { // Sentiment
     if (!features.ai || messages.length === 0) return
-    const last = [...messages].reverse().find((m) => m.authorType === 'client' || m.authorType === 'email')
-    if (!last) return
-    fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ action: 'sentiment', text: last.body.slice(0, 500) }) })
+    // Use last 3 client messages for better context (not just the last one)
+    const clientMsgs = messages.filter((m) => m.authorType === 'client' || m.authorType === 'email').slice(-3)
+    if (clientMsgs.length === 0) return
+    const contextText = clientMsgs.map((m) => m.body).join('\n---\n').slice(0, 1000)
+    fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ action: 'sentiment', text: contextText }) })
       .then((r) => r.json()).then((d) => {
-        const raw = (d.sentiment || '').toLowerCase()
+        const raw = (d.sentiment || '').toLowerCase().replace(/[^a-zéèêàùûîôëüöç]/g, '')
         const map: Record<string, { emoji: string; label: string; color: string }> = {
-          'frustre': { emoji: ':(', label: 'Frustre', color: '#dc2626' },
-          'mecontent': { emoji: ':(', label: 'Mecontent', color: '#ea580c' },
-          'urgent': { emoji: '!', label: 'Urgent', color: '#dc2626' },
-          'neutre': { emoji: '-', label: 'Neutre', color: '#6b7280' },
-          'satisfait': { emoji: ':)', label: 'Satisfait', color: '#16a34a' },
+          'frustré': { emoji: '😤', label: 'Frustré', color: '#dc2626' }, 'frustre': { emoji: '😤', label: 'Frustré', color: '#dc2626' },
+          'mécontent': { emoji: '😠', label: 'Mécontent', color: '#ea580c' }, 'mecontent': { emoji: '😠', label: 'Mécontent', color: '#ea580c' },
+          'urgent': { emoji: '🔥', label: 'Urgent', color: '#dc2626' }, 'neutre': { emoji: '😐', label: 'Neutre', color: '#6b7280' }, 'satisfait': { emoji: '😊', label: 'Satisfait', color: '#16a34a' },
         }
         const m = Object.keys(map).find((k) => raw.includes(k))
-        setSentiment(m ? map[m] : { emoji: '-', label: 'Neutre', color: '#6b7280' })
+        setSentiment(m ? map[m] : { emoji: '😐', label: 'Neutre', color: '#6b7280' })
       }).catch(() => {})
   }, [messages.length, features.ai]) // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { threadEndRef.current?.scrollIntoView({ behavior: 'smooth' }) }, [messages.length])
-  useEffect(() => {
+  useEffect(() => { // Timer with localStorage persistence
     if (timerRunning) {
       localStorage.setItem(`timer-run-${ticketId}`, '1')
       localStorage.setItem(`timer-ts-${ticketId}`, String(Date.now()))
@@ -194,7 +297,7 @@ export const TicketDetailClient: React.FC = () => {
     return () => { if (timerRef.current) clearInterval(timerRef.current) }
   }, [timerRunning, ticketId]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Presence
+  // ─── PRESENCE / COLLISION DETECTION ───
   useEffect(() => {
     if (!ticketId) return
     const join = () => fetch('/api/support/presence', {
@@ -215,15 +318,17 @@ export const TicketDetailClient: React.FC = () => {
   useEffect(() => {
     if (!ticketId) return
     const poll = setInterval(async () => {
+      if (failCountRef.current.presence >= MAX_FAILS) return
       try {
         const r = await fetch(`/api/support/presence?ticketId=${ticketId}`, { credentials: 'include' })
-        if (r.ok) { const d = await r.json(); setOtherViewers(d.viewers || []) }
-      } catch { /* silent */ }
+        if (r.ok) { failCountRef.current.presence = 0; const d = await r.json(); setOtherViewers(d.viewers || []) }
+        else { failCountRef.current.presence++ }
+      } catch { failCountRef.current.presence++ }
     }, 5_000)
     return () => clearInterval(poll)
   }, [ticketId])
 
-  // Fetch macros
+  // ─── FETCH MACROS ───
   useEffect(() => {
     fetch('/api/macros?where[isActive][equals]=true&depth=0&limit=50', { credentials: 'include' })
       .then((r) => r.ok ? r.json() : null)
@@ -231,7 +336,7 @@ export const TicketDetailClient: React.FC = () => {
       .catch(() => {})
   }, [])
 
-  // Close dropdown on outside click
+  // #12 — Close dropdown on outside click
   useEffect(() => {
     if (!showMenu) return
     const handler = (e: MouseEvent) => {
@@ -243,19 +348,22 @@ export const TicketDetailClient: React.FC = () => {
     return () => document.removeEventListener('mousedown', handler)
   }, [showMenu])
 
-  // Keyboard shortcuts
+  // #3 — Keyboard shortcuts
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       const mod = e.metaKey || e.ctrlKey
+      // Cmd/Ctrl+Enter -> send
       if (mod && e.key === 'Enter') {
         e.preventDefault()
         const sendBtn = document.querySelector('[data-action="send-reply"]') as HTMLButtonElement | null
         if (sendBtn && !sendBtn.disabled) sendBtn.click()
       }
+      // Cmd/Ctrl+Shift+N -> toggle internal
       if (mod && e.shiftKey && e.key.toLowerCase() === 'n') {
         e.preventDefault()
         setIsInternal((prev) => !prev)
       }
+      // Escape -> close dropdown / split modal
       if (e.key === 'Escape') {
         setShowMenu(false)
         setSplitModal(null)
@@ -265,12 +373,12 @@ export const TicketDetailClient: React.FC = () => {
     return () => document.removeEventListener('keydown', handler)
   }, [])
 
-  // ---- HANDLERS ----
+  // ─── HANDLERS ───
   const handleSend = async () => {
-    if (!replyBody.trim() || !ticketId) return
+    if ((!replyBody.trim() && !replyHtml.trim()) || !ticketId) return
     setSending(true)
     try {
-      // Upload pending files first
+      // #5 — Upload pending files first
       const uploadedLinks: string[] = []
       for (const file of pendingFiles) {
         const formData = new FormData()
@@ -284,19 +392,21 @@ export const TicketDetailClient: React.FC = () => {
           }
         } catch { /* silent */ }
       }
-      const finalBody = uploadedLinks.length > 0 ? `${replyBody.trim()}\n\n${uploadedLinks.join('\n')}` : replyBody.trim()
+      const finalBody = uploadedLinks.length > 0 ? `${replyBody.trim()}\n\n${uploadedLinks.join('\n')}` : (replyBody.trim() || '[Contenu enrichi]')
+      const finalHtml = uploadedLinks.length > 0 ? `${replyHtml || replyBody.trim()}<br/><br/>${uploadedLinks.map((l) => l.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')).join('<br/>')}` : (replyHtml || undefined)
 
       const res = await fetch('/api/ticket-messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
-        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, authorType: 'admin', isInternal, skipNotification: isInternal || !notifyClient }) })
-      if (res.ok) { setReplyBody(''); setIsInternal(false); setPendingFiles([]); fetchAll() }
-    } catch (err) { console.warn('[support] send reply error:', err) } finally { setSending(false) }
+        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, ...(finalHtml ? { bodyHtml: finalHtml } : {}), authorType: 'admin', isInternal, skipNotification: isInternal || !notifyClient }) })
+      if (res.ok) { setReplyBody(''); setReplyHtml(''); setIsInternal(false); setPendingFiles([]); editorRef.current?.clear(); fetchAll() }
+    } catch {} finally { setSending(false) }
   }
 
   const handleStatusChange = async (v: string) => {
     if (!ticketId) return; setStatusUpdating(true)
-    try { await fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ status: v }) }); fetchAll() } catch (err) { console.warn('[support] status change error:', err) } finally { setStatusUpdating(false) }
+    try { await fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ status: v }) }); fetchAll() } catch {} finally { setStatusUpdating(false) }
   }
 
+  // #1 — Inline field patch
   const handleFieldPatch = async (field: string, value: string) => {
     if (!ticketId) return
     try {
@@ -305,6 +415,7 @@ export const TicketDetailClient: React.FC = () => {
     } catch { /* silent */ }
   }
 
+  // #2 — Delete with undo toast
   const handleDeleteMessage = (msgId: string | number) => {
     if (undoToast) clearTimeout(undoToast.timer)
     const timer = setTimeout(() => {
@@ -321,6 +432,7 @@ export const TicketDetailClient: React.FC = () => {
     }
   }
 
+  // #2 — Split ticket with modal
   const handleSplitConfirm = async () => {
     if (!splitModal || !splitSubject.trim()) return
     try {
@@ -337,21 +449,21 @@ export const TicketDetailClient: React.FC = () => {
     try {
       const r = await fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
         body: JSON.stringify({ action: 'suggest_reply', messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })), clientName: `${client?.firstName || ''} ${client?.lastName || ''}`.trim(), clientCompany: client?.company }) })
-      if (r.ok) { const d = await r.json(); if (d.reply) { setReplyBody(d.reply) } }
-    } catch (err) { console.warn('[support] AI suggest error:', err) } finally { setAiReplying(false) }
+      if (r.ok) { const d = await r.json(); if (d.reply) { setReplyBody(d.reply); setReplyHtml(d.reply.replace(/\n/g, '<br/>')); editorRef.current?.setContent(d.reply.replace(/\n/g, '<br/>')) } }
+    } catch {} finally { setAiReplying(false) }
   }
 
-  const handleAiRewrite = async () => {
+  const handleAiRewrite = async (style: string = 'auto') => {
     if (!replyBody.trim()) return; setAiRewriting(true)
     try {
-      const r = await fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ action: 'rewrite', text: replyBody }) })
-      if (r.ok) { const d = await r.json(); if (d.rewritten) { setReplyBody(d.rewritten) } }
-    } catch (err) { console.warn('[support] AI rewrite error:', err) } finally { setAiRewriting(false) }
+      const r = await fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ action: 'rewrite', text: replyBody, style }) })
+      if (r.ok) { const d = await r.json(); if (d.rewritten) { setReplyBody(d.rewritten); setReplyHtml(d.rewritten.replace(/\n/g, '<br/>')); editorRef.current?.setContent(d.rewritten.replace(/\n/g, '<br/>')) } }
+    } catch {} finally { setAiRewriting(false) }
   }
 
   const handleTimerSave = async () => {
     if (!ticketId || timerSeconds < 60) return
-    try { await fetch('/api/time-entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ ticket: Number(ticketId), duration: Math.round(timerSeconds / 60), date: new Date().toISOString(), description: 'Timer' }) }); setTimerSeconds(0); setTimerRunning(false); fetchAll() } catch (err) { console.warn('[support] timer save error:', err) }
+    try { await fetch('/api/time-entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ ticket: Number(ticketId), duration: Math.round(timerSeconds / 60), date: new Date().toISOString(), description: 'Timer' }) }); setTimerSeconds(0); setTimerRunning(false); fetchAll() } catch {}
   }
 
   const handleApplyMacro = async (macroId: number) => {
@@ -363,9 +475,10 @@ export const TicketDetailClient: React.FC = () => {
         body: JSON.stringify({ macroId, ticketId: Number(ticketId) }),
       })
       if (r.ok) { fetchAll() }
-    } catch (err) { console.warn('[support] apply macro error:', err) } finally { setApplyingMacro(false) }
+    } catch { /* silent */ } finally { setApplyingMacro(false) }
   }
 
+// #5 — File handling
   const handleFileSelect = (files: FileList | null) => {
     if (!files) return
     setPendingFiles((prev) => [...prev, ...Array.from(files)])
@@ -377,6 +490,7 @@ export const TicketDetailClient: React.FC = () => {
     handleFileSelect(e.dataTransfer.files)
   }
 
+  // #6 — Tags
   const handleRemoveTag = async (tag: string) => {
     const newTags = tags.filter((t) => t !== tag)
     setTags(newTags)
@@ -398,75 +512,42 @@ export const TicketDetailClient: React.FC = () => {
     }
   }
 
-  // ---- RENDER ----
+  // ─── RENDER ───
   if (!ticketId) return <div style={{ padding: 60, textAlign: 'center', color: '#94a3b8', fontSize: 14 }}>{t('detail.selectTicket')}</div>
   if (loading) return <div style={{ padding: 60, textAlign: 'center', color: '#94a3b8', fontSize: 14 }}>{t('common.loading')}</div>
   if (!ticket) return <div style={{ padding: 60, textAlign: 'center', color: '#94a3b8', fontSize: 14 }}>{t('detail.notFound')}</div>
 
-  const st = STATUS[(ticket.status as string) || 'open'] || STATUS.open
+  const st = STATUS_STYLE[(ticket.status as string) || 'open'] || STATUS_STYLE.open
   const totalMin = timeEntries.reduce((a, e) => a + (e.duration || 0), 0)
   const initials = client ? `${(client.firstName?.[0] || '').toUpperCase()}${(client.lastName?.[0] || '').toUpperCase()}` : '?'
 
-  const S: Record<string, React.CSSProperties> = {
-    page: { padding: '16px 20px', maxWidth: 1200, margin: '0 auto' },
-    topBar: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12, padding: '8px 0', borderBottom: '1px solid var(--theme-elevation-200)' },
-    backLink: { fontSize: 18, textDecoration: 'none', color: 'var(--theme-elevation-500)', padding: '4px 8px' },
-    ticketNumber: { fontWeight: 700, fontSize: 14, color: 'var(--theme-elevation-400)' },
-    ticketSubject: { fontWeight: 600, fontSize: 15, color: 'var(--theme-text)', flex: 1 },
-    statusChip: { padding: '4px 10px', borderRadius: 6, border: 'none', fontWeight: 600, fontSize: 12, cursor: 'pointer' },
-    layout: { display: 'grid', gridTemplateColumns: '1fr 280px', gap: 20 },
-    thread: { display: 'flex', flexDirection: 'column' as const, gap: 12, maxHeight: 'calc(100vh - 400px)', overflowY: 'auto' as const, padding: '8px 0' },
-    message: { display: 'flex', gap: 10, padding: '12px 14px', borderRadius: 10, border: '1px solid var(--theme-elevation-150)', position: 'relative' as const },
-    avatar: { width: 32, height: 32, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11, fontWeight: 700, flexShrink: 0 },
-    messageBody: { fontSize: 14, lineHeight: 1.6, color: 'var(--theme-text)', whiteSpace: 'pre-wrap' as const },
-    composer: { marginTop: 12, border: '1px solid var(--theme-elevation-200)', borderRadius: 10, padding: 12 },
-    composerInternal: { borderColor: '#fbbf24', background: '#fefce8' },
-    textarea: { width: '100%', minHeight: 100, padding: 10, border: 'none', outline: 'none', resize: 'vertical' as const, fontSize: 14, fontFamily: 'inherit', background: 'transparent', color: 'var(--theme-text)' },
-    composerFooter: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 },
-    sendBtn: { padding: '8px 16px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontWeight: 600, fontSize: 13, cursor: 'pointer' },
-    sidebar: { display: 'flex', flexDirection: 'column' as const, gap: 16 },
-    sideSection: { padding: '12px 14px', borderRadius: 10, border: '1px solid var(--theme-elevation-150)', fontSize: 13 },
-    sideSectionTitle: { fontSize: 12, fontWeight: 700, textTransform: 'uppercase' as const, color: 'var(--theme-elevation-500)', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-    sideField: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0' },
-    sideLabel: { fontSize: 12, color: 'var(--theme-elevation-500)' },
-    sideSelect: { padding: '2px 6px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', fontSize: 12, background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
-    sideValue: { fontSize: 12, fontWeight: 500, color: 'var(--theme-text)' },
-    badge: { padding: '2px 6px', borderRadius: 4, fontSize: 10, fontWeight: 600 },
-    tagChip: { display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 4, background: 'var(--theme-elevation-100)', fontSize: 11, fontWeight: 500 },
-    tagRemove: { background: 'none', border: 'none', cursor: 'pointer', fontSize: 14, color: 'var(--theme-elevation-400)', padding: 0 },
-    tagInput: { padding: '2px 6px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', fontSize: 11, width: 80 },
-    tagAddBtn: { padding: '2px 8px', borderRadius: 4, border: '1px dashed var(--theme-elevation-300)', background: 'none', fontSize: 11, cursor: 'pointer', color: 'var(--theme-elevation-400)' },
-    toolbarBtn: { padding: '4px 10px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', fontSize: 11, fontWeight: 700, cursor: 'pointer', color: 'var(--theme-text)' },
-    dateSeparator: { textAlign: 'center' as const, padding: '8px 0', fontSize: 11, color: 'var(--theme-elevation-400)' },
-  }
-
   return (
-    <div style={S.page}>
+    <div className={s.page}>
       {/* TOP BAR */}
-      <div style={S.topBar}>
-        <Link href="/admin/support/inbox" style={S.backLink} aria-label="Retour">&larr;</Link>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
-          <span style={S.ticketNumber}>{ticket.ticketNumber as string}</span>
-          <span style={S.ticketSubject}>{ticket.subject as string}</span>
+      <div className={s.topBar}>
+        <Link href="/admin/support/inbox" className={s.backLink} aria-label="Retour à la boîte de réception">&larr;</Link>
+        <div className={s.ticketMeta}>
+          <span className={s.ticketNumber}>{ticket.ticketNumber as string}</span>
+          <span className={s.ticketSubject}>{ticket.subject as string}</span>
         </div>
-        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-          <select style={{ ...S.statusChip, background: st.bg, color: st.color }} value={(ticket.status as string) || 'open'} onChange={(e) => handleStatusChange(e.target.value)} disabled={statusUpdating}>
+        <div className={s.topBarRight}>
+          <select className={s.statusChip} style={{ background: st.bg, color: st.color }} value={(ticket.status as string) || 'open'} onChange={(e) => handleStatusChange(e.target.value)} disabled={statusUpdating} aria-label={t('ticket.status.label')}>
             <option value="open">{t('detail.statusOpen')}</option>
             <option value="waiting_client">{t('detail.statusWaiting')}</option>
             <option value="resolved">{t('detail.statusResolved')}</option>
           </select>
           {sentiment && features.ai && (
-            <span style={{ ...S.badge, background: `${sentiment.color}12`, color: sentiment.color }}>
+            <span className={s.sentimentBadge} style={{ background: `${sentiment.color}12`, color: sentiment.color }}>
               {sentiment.emoji} {sentiment.label}
             </span>
           )}
-          <div ref={dropdownRef} style={{ position: 'relative' }}>
-            <button onClick={() => setShowMenu(!showMenu)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 18, color: 'var(--theme-elevation-500)' }}>&middot;&middot;&middot;</button>
+          <div className={s.dropdown} ref={dropdownRef}>
+            <button className={s.moreBtn} onClick={() => setShowMenu(!showMenu)} aria-label="Plus d&apos;options">&middot;&middot;&middot;</button>
             {showMenu && (
-              <div style={{ position: 'absolute', right: 0, top: '100%', background: 'var(--theme-elevation-0)', border: '1px solid var(--theme-elevation-200)', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', zIndex: 50, minWidth: 160 }}>
-                <button style={{ display: 'block', width: '100%', padding: '8px 14px', border: 'none', background: 'none', cursor: 'pointer', textAlign: 'left', fontSize: 13, color: 'var(--theme-text)' }} onClick={() => { navigator.clipboard.writeText(window.location.href); setShowMenu(false) }}>{t('detail.copyLink')}</button>
-                <Link href={`/admin/collections/tickets/${ticketId}`} style={{ display: 'block', padding: '8px 14px', fontSize: 13, color: 'var(--theme-text)', textDecoration: 'none' }} onClick={() => setShowMenu(false)}>{t('detail.payloadView')}</Link>
-                <a href={`/support/tickets/${ticketId}`} target="_blank" rel="noopener noreferrer" style={{ display: 'block', padding: '8px 14px', fontSize: 13, color: 'var(--theme-text)', textDecoration: 'none' }} onClick={() => setShowMenu(false)}>{t('detail.clientView')}</a>
+              <div className={s.dropdownMenu}>
+                <button className={s.dropdownItem} onClick={() => { navigator.clipboard.writeText(window.location.href); setShowMenu(false) }}>{t('detail.copyLink')}</button>
+                <Link href={`/admin/collections/tickets/${ticketId}`} className={s.dropdownItem} onClick={() => setShowMenu(false)}>{t('detail.payloadView')}</Link>
+                <a href={`/support/tickets/${ticketId}`} target="_blank" rel="noopener noreferrer" className={s.dropdownItem} onClick={() => setShowMenu(false)}>{t('detail.clientView')}</a>
               </div>
             )}
           </div>
@@ -475,58 +556,88 @@ export const TicketDetailClient: React.FC = () => {
 
       {/* PRESENCE BANNER */}
       {otherViewers.length > 0 && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', marginBottom: 12, borderRadius: 8, background: '#fef3c7', border: '1px solid #fde68a', fontSize: 13, fontWeight: 500, color: '#92400e' }}>
-          {otherViewers.map((v) => v.name).join(', ')} {otherViewers.length === 1 ? 'est aussi en train de voir ce ticket' : 'sont aussi en train de voir ce ticket'}
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 8,
+          padding: '8px 14px', marginBottom: 12, borderRadius: 8,
+          background: '#fef3c7', border: '1px solid #fde68a',
+          fontSize: 13, fontWeight: 500, color: '#92400e',
+        }}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}><path d="M9 1L3 9h4l-1 6 6-8H8l1-6z" fill="#92400e"/></svg>
+          {otherViewers.length === 1 ? t('detail.viewingAlso', { names: otherViewers.map((v) => v.name).join(', ') }) : t('detail.viewingAlsoPlural', { names: otherViewers.map((v) => v.name).join(', ') })}
         </div>
       )}
 
       {/* LAYOUT */}
-      <div style={S.layout}>
+      <div className={s.layout}>
         {/* LEFT: Conversation */}
-        <div>
-          <div style={S.thread}>
+        <div className={s.conversationCol}>
+          <div className={s.thread}>
             {messages.map((msg, idx) => {
               const prev = idx > 0 ? messages[idx - 1] : null
               const showDate = msg.createdAt && (!prev?.createdAt || new Date(msg.createdAt).toDateString() !== new Date(prev.createdAt).toDateString())
               const isAdmin = msg.authorType === 'admin'
+              // #2 — Hide message visually if pending delete
               const isPendingDelete = undoToast?.msgId === msg.id
 
               return (
                 <React.Fragment key={msg.id}>
-                  {showDate && <div style={S.dateSeparator}><span>{dateLabel(msg.createdAt)}</span></div>}
-                  <div style={{ ...S.message, ...(msg.isInternal ? { borderColor: '#fbbf24', background: '#fefce8' } : {}), ...(isPendingDelete ? { opacity: 0.3, pointerEvents: 'none' as const } : {}) }}>
-                    <div style={{ ...S.avatar, backgroundColor: isAdmin ? '#2563eb' : msg.authorType === 'email' ? '#ea580c' : '#7c3aed' }}>
+                  {showDate && <div className={s.dateSeparator}><span className={s.dateSeparatorText}>{dateLabel(msg.createdAt)}</span></div>}
+                  <div className={`${s.message} ${msg.isInternal ? s.messageInternal : ''}`} style={isPendingDelete ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
+                    {/* #10 — Client avatar purple */}
+                    <div className={s.avatar} style={{ backgroundColor: isAdmin ? '#2563eb' : msg.authorType === 'email' ? '#ea580c' : '#7c3aed' }}>
                       {isAdmin ? 'CW' : initials}
                     </div>
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
-                        <span style={{ fontWeight: 600, fontSize: 13 }}>{isAdmin ? 'Support' : msg.authorType === 'email' ? 'Email' : client?.firstName || 'Client'}</span>
-                        <span style={{ fontSize: 11, color: 'var(--theme-elevation-400)' }}>{timeAgo(msg.createdAt)}</span>
-                        {msg.isInternal && <span style={{ ...S.badge, background: '#fef3c7', color: '#92400e' }}>Interne</span>}
-                        {msg.isSolution && <span style={{ ...S.badge, background: '#dcfce7', color: '#166534' }}>Solution</span>}
+                    <div className={s.messageContent}>
+                      <div className={s.messageHeader}>
+                        <span className={s.messageAuthor}>{isAdmin ? 'Support' : msg.authorType === 'email' ? 'Email' : client?.firstName || 'Client'}</span>
+                        <span className={s.messageTime}>{timeAgo(msg.createdAt)}</span>
+                        {msg.isInternal && <span className={s.badge} style={{ background: '#fef3c7', color: '#92400e' }}>Interne</span>}
+                        {msg.isSolution && <span className={s.badge} style={{ background: '#dcfce7', color: '#166534' }}>Solution</span>}
+                        <span className={s.messageMeta}>
+                          {isAdmin && !msg.isInternal && (() => {
+                            const ext = msg as unknown as { emailOpenedAt?: string; emailSentAt?: string }
+                            if (ext.emailOpenedAt) {
+                              const d = new Date(ext.emailOpenedAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+                              return <span style={{ color: '#16a34a', cursor: 'help' }} title={`Ouvert le ${d}`}>✓✓ Lu {d}</span>
+                            }
+                            if (ext.emailSentAt) {
+                              const d = new Date(ext.emailSentAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+                              return <span style={{ color: '#2563eb', cursor: 'help' }} title={`Envoyé le ${d}`}>✓ Envoyé {d}</span>
+                            }
+                            return <span style={{ color: '#94a3b8' }}>✓</span>
+                          })()}
+                        </span>
                       </div>
-                      {msg.bodyHtml ? (
-                        <div style={S.messageBody} dangerouslySetInnerHTML={{ __html: msg.bodyHtml }} />
+                      {(msg as unknown as { deletedAt?: string }).deletedAt ? (
+                        <div className={s.messageBody} style={{ color: '#94a3b8', fontStyle: 'italic' }}>{t('detail.messageDeleted')}</div>
+                      ) : msg.bodyHtml && hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, '')) ? (
+                        <CodeBlockRendererHtml html={msg.bodyHtml} />
+                      ) : msg.bodyHtml ? (
+                        <div className={`${s.messageBody} ${s.rteDisplay}`} dangerouslySetInnerHTML={{ __html: msg.bodyHtml }} />
+                      ) : hasCodeBlocks(msg.body) ? (
+                        <MessageWithCodeBlocks text={msg.body} style={{ fontSize: '13px', lineHeight: 1.5 }} />
                       ) : (
-                        <div style={S.messageBody}>{msg.body}</div>
+                        <div className={s.messageBody}>{msg.body}</div>
                       )}
                       {Array.isArray(msg.attachments) && msg.attachments.length > 0 && (
-                        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
+                        <div className={s.attachments}>
                           {msg.attachments.map((att, i) => {
                             const file = typeof att.file === 'object' ? att.file : null
                             if (!file) return null
                             return (file.mimeType || '').startsWith('image/')
-                              ? <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer"><img src={file.url || ''} alt="" style={{ maxWidth: 200, maxHeight: 120, borderRadius: 6 }} /></a>
-                              : <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: '#2563eb' }}>PJ {file.filename || 'Fichier'}</a>
+                              ? <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer"><img src={file.url || ''} alt="" className={s.attachmentImg} /></a>
+                              : <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer" className={s.attachmentFile}>PJ {file.filename || 'Fichier'}</a>
                           })}
                         </div>
                       )}
                     </div>
-                    {/* Hover actions */}
-                    <div style={{ position: 'absolute', top: 8, right: 8, display: 'flex', gap: 4, opacity: 0.6 }}>
-                      <button style={{ ...S.toolbarBtn, color: '#dc2626', fontSize: 11 }} onClick={() => handleDeleteMessage(msg.id)}>{t('common.delete')}</button>
-                      {features.splitTicket && !msg.isInternal && <button style={{ ...S.toolbarBtn, fontSize: 11 }} onClick={() => { setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) }); setSplitSubject(`Split: ${ticket.subject}`) }}>{t('actions.extractMessage')}</button>}
-                      {isAdmin && !msg.isInternal && <button style={{ ...S.toolbarBtn, fontSize: 11 }} onClick={() => fetch('/api/support/resend-notification', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ messageId: msg.id }) })}>{t('actions.resendEmail')}</button>}
+                    {/* Hover actions — icon buttons with aria-labels (#7) */}
+                    <div className={s.messageActions}>
+                      {/* #2 — Undo toast instead of confirm() */}
+                      <button className={`${s.actionIcon} ${s.danger}`} title={t('actions.deleteMessage')} aria-label={t('actions.deleteMessage')} onClick={() => handleDeleteMessage(msg.id)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.deleteMessage')}</button>
+                      {/* #2 — Split modal instead of prompt() */}
+                      {features.splitTicket && !msg.isInternal && <button className={s.actionIcon} title={t('actions.extractMessage')} aria-label={t('actions.extractToNewTicket')} onClick={() => { setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) }); setSplitSubject(`Split: ${ticket.subject}`) }} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.extractMessage')}</button>}
+                      {isAdmin && !msg.isInternal && <button className={s.actionIcon} title={t('actions.resendEmail')} aria-label={t('actions.resendEmail')} onClick={() => fetch('/api/support/resend-notification', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ messageId: msg.id }) })} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.resendEmail')}</button>}
                     </div>
                   </div>
                 </React.Fragment>
@@ -536,41 +647,56 @@ export const TicketDetailClient: React.FC = () => {
           </div>
 
           {clientTyping && (
-            <div style={{ padding: '8px 14px', fontSize: 13, color: 'var(--theme-elevation-400)' }}>
-              {client?.firstName || 'Client'} est en train d&apos;ecrire...
+            <div className={s.typing}>
+              <span className={s.typingDots}><span /><span /><span /></span>
+              {t('detail.typing', { name: client?.firstName || 'Client' })}
             </div>
           )}
 
           {/* COMPOSER */}
           <div
-            style={{ ...S.composer, ...(isInternal ? S.composerInternal : {}), ...(composerDragOver ? { borderColor: '#2563eb', background: '#eff6ff' } : {}) }}
+            className={`${s.composer} ${isInternal ? s.composerInternal : ''} ${composerDragOver ? s.composerDragOver : ''}`}
             onDragOver={(e) => { e.preventDefault(); setComposerDragOver(true) }}
             onDragLeave={() => setComposerDragOver(false)}
             onDrop={handleFileDrop}
           >
-            <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
+            <div className={s.composerToolbar}>
               {features.ai && (
                 <>
-                  <button style={S.toolbarBtn} onClick={handleAiSuggest} disabled={aiReplying || messages.length === 0}>{aiReplying ? '...' : t('detail.iaSuggestion')}</button>
-                  <button style={S.toolbarBtn} onClick={handleAiRewrite} disabled={aiRewriting || !replyBody.trim()}>{aiRewriting ? '...' : t('detail.rewrite')}</button>
+                  <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' }}>{aiReplying ? '...' : `✨ ${t('detail.iaSuggestion')}`}</button>
+                  <RewriteDropdown disabled={aiRewriting || !replyBody.trim()} loading={aiRewriting} onSelect={(style) => handleAiRewrite(style)} toolbarBtnClass={s.toolbarBtn} />
                 </>
               )}
-              <button style={S.toolbarBtn} onClick={() => fileInputRef.current?.click()}>{t('detail.file')}</button>
-              <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={(e) => handleFileSelect(e.target.files)} />
+              <CodeBlockInserter
+                className={s.toolbarBtn}
+                onInsert={(block) => {
+                  const nb = replyBody ? replyBody + block : block
+                  setReplyBody(nb)
+                  setReplyHtml(nb.replace(/\n/g, '<br/>'))
+                  editorRef.current?.setContent(nb.replace(/\n/g, '<br/>'))
+                }}
+              />
+              {/* #5 — File upload button */}
+              <button className={s.toolbarBtn} data-tooltip={t('detail.file')} aria-label={t('detail.file')} onClick={() => fileInputRef.current?.click()} style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto' }}>📎 {t('detail.file')}</button>
+              <input ref={fileInputRef} type="file" multiple className={s.hiddenFileInput} onChange={(e) => handleFileSelect(e.target.files)} />
               {macros.length > 0 && (
                 <select
-                  style={{ ...S.sideSelect, marginLeft: 0 }}
+                  className={s.cannedSelect}
                   onChange={(e) => { const id = Number(e.target.value); if (id) handleApplyMacro(id); e.target.value = '' }}
                   disabled={applyingMacro}
+                  style={{ marginLeft: 0 }}
+                  aria-label="Appliquer une macro"
                 >
                   <option value="">{applyingMacro ? t('detail.applyingMacro') : t('detail.macros')}</option>
                   {macros.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
                 </select>
               )}
+              <span className={s.toolbarDivider} />
+              {/* #9 — "Canned" -> "Réponses types" */}
               {features.canned && cannedResponses.length > 0 && (
-                <select style={S.sideSelect} onChange={(e) => {
+                <select className={s.cannedSelect} aria-label="Réponses types" onChange={(e) => {
                   const cr = cannedResponses.find((c) => String(c.id) === e.target.value)
-                  if (cr) { let b = cr.body; if (client) { b = b.replace(/\{\{client\.firstName\}\}/g, client.firstName).replace(/\{\{client\.company\}\}/g, client.company) }; setReplyBody(b) }
+                  if (cr) { let b = cr.body; if (client) { b = b.replace(/\{\{client\.firstName\}\}/g, client.firstName).replace(/\{\{client\.company\}\}/g, client.company) }; setReplyBody(b); setReplyHtml(b.replace(/\n/g, '<br/>')); editorRef.current?.setContent(b.replace(/\n/g, '<br/>')) }
                   e.target.value = ''
                 }}>
                   <option value="">{t('detail.cannedResponses')}</option>
@@ -578,28 +704,26 @@ export const TicketDetailClient: React.FC = () => {
                 </select>
               )}
             </div>
-            <textarea
-              style={S.textarea}
-              value={replyBody}
-              onChange={(e) => setReplyBody(e.target.value)}
-              placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })}
-            />
+            <RichTextEditor ref={editorRef} onChange={(html, text) => { setReplyHtml(html); setReplyBody(text) }} placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })} minHeight={100} borderColor="transparent" />
+            {/* #5 — File upload preview */}
             {pendingFiles.length > 0 && (
-              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 6 }}>
+              <div className={s.uploadPreview}>
                 {pendingFiles.map((f, i) => (
-                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 4, background: 'var(--theme-elevation-100)', fontSize: 11 }}>
+                  <div key={i} className={s.uploadPreviewItem}>
                     <span>PJ {f.name}</span>
-                    <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 14, color: 'var(--theme-elevation-400)' }} onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== i))}>&times;</button>
+                    <button className={s.uploadRemoveBtn} aria-label={`Retirer ${f.name}`} onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== i))}>&times;</button>
                   </div>
                 ))}
               </div>
             )}
-            <div style={S.composerFooter}>
-              <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 12 }}>
+            <div className={s.composerFooter}>
+              <div className={s.composerOptions}>
+                {/* #9 — "Internal" -> "Note interne", "Notify" -> "Notifier" */}
                 <label><input type="checkbox" checked={isInternal} onChange={(e) => setIsInternal(e.target.checked)} /> {t('detail.internalNote')}</label>
                 <label><input type="checkbox" checked={notifyClient} onChange={(e) => setNotifyClient(e.target.checked)} disabled={isInternal} /> {t('detail.notify')}</label>
               </div>
-              <button style={{ ...S.sendBtn, ...(isInternal ? { background: '#d97706' } : {}) }} onClick={handleSend} disabled={sending || !replyBody.trim()} data-action="send-reply">
+              {/* #9 — "Send ->" -> "Envoyer ->" */}
+              <button className={`${s.sendBtn} ${isInternal ? s.sendBtnInternal : ''}`} onClick={handleSend} disabled={sending || !replyBody.trim()} data-action="send-reply">
                 {sending ? t('detail.sending') : isInternal ? t('detail.sendNote') : t('detail.sendReply')}
               </button>
             </div>
@@ -607,40 +731,40 @@ export const TicketDetailClient: React.FC = () => {
         </div>
 
         {/* RIGHT: Sidebar */}
-        <div style={S.sidebar}>
+        <div className={s.sidebar}>
           {client && (
-            <div style={S.sideSection}>
-              <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8 }}>
-                <div style={{ ...S.avatar, backgroundColor: '#7c3aed', width: 36, height: 36 }}>{initials}</div>
-                <div>
-                  <div style={{ fontWeight: 600, fontSize: 13 }}>{client.firstName} {client.lastName}</div>
-                  <div style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{client.company}</div>
-                  <a href={`mailto:${client.email}`} style={{ fontSize: 11, color: '#2563eb' }}>{client.email}</a>
+            <div className={s.sideSection}>
+              <div className={s.clientCard}>
+                <div className={s.clientAvatar}>{initials}</div>
+                <div className={s.clientInfo}>
+                  <div className={s.clientName}>{client.firstName} {client.lastName}</div>
+                  <div className={s.clientCompany}>{client.company}</div>
+                  <a href={`mailto:${client.email}`} className={s.clientEmail}>{client.email}</a>
                 </div>
               </div>
-              <div style={{ display: 'flex', gap: 6 }}>
-                <Link href={`/admin/collections/support-clients/${client.id}`} style={{ padding: '4px 10px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', fontSize: 11, textDecoration: 'none', color: 'var(--theme-text)' }}>{t('client.clientSheet')}</Link>
-                <button style={{ padding: '4px 10px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', fontSize: 11, background: 'none', cursor: 'pointer', color: 'var(--theme-text)' }} onClick={() => window.open(`/api/admin/impersonate?clientId=${client.id}`, '_blank')}>{t('client.clientPortal')}</button>
+              <div className={s.clientActions}>
+                <Link href={`/admin/collections/support-clients/${client.id}`} className={s.smallBtn}>{t('client.clientSheet')}</Link>
+                <button className={s.smallBtn} onClick={() => window.open(`/api/admin/impersonate?clientId=${client.id}`, '_blank')}>{t('client.clientPortal')}</button>
               </div>
             </div>
           )}
 
-          {/* Editable sidebar fields */}
-          <div style={S.sideSection}>
-            <div style={S.sideSectionTitle}>{t('detail.details')}</div>
-            <div style={S.sideField}>
-              <span style={S.sideLabel}>{t('detail.priority')}</span>
-              <select style={S.sideSelect} value={(ticket.priority as string) || 'normal'} onChange={(e) => handleFieldPatch('priority', e.target.value)}>
+          {/* #1 — Editable sidebar fields */}
+          <div className={s.sideSection}>
+            <div className={s.sideSectionTitle}>{t('detail.details')}</div>
+            <div className={s.sideField}>
+              <span className={s.sideLabel}>{t('detail.priority')}</span>
+              <select className={s.sideSelect} value={(ticket.priority as string) || 'normal'} onChange={(e) => handleFieldPatch('priority', e.target.value)} aria-label={t('detail.priority')}>
                 <option value="low">{t('ticket.priority.low')}</option>
                 <option value="normal">{t('ticket.priority.normal')}</option>
                 <option value="high">{t('ticket.priority.high')}</option>
                 <option value="urgent">{t('ticket.priority.urgent')}</option>
               </select>
             </div>
-            <div style={S.sideField}>
-              <span style={S.sideLabel}>{t('detail.category')}</span>
-              <select style={S.sideSelect} value={(ticket.category as string) || ''} onChange={(e) => handleFieldPatch('category', e.target.value)}>
-                <option value="">--</option>
+            <div className={s.sideField}>
+              <span className={s.sideLabel}>{t('detail.category')}</span>
+              <select className={s.sideSelect} value={(ticket.category as string) || ''} onChange={(e) => handleFieldPatch('category', e.target.value)} aria-label={t('detail.category')}>
+                <option value="">—</option>
                 <option value="bug">{t('ticket.category.bug')}</option>
                 <option value="content">{t('ticket.category.content')}</option>
                 <option value="feature">{t('ticket.category.feature')}</option>
@@ -648,23 +772,23 @@ export const TicketDetailClient: React.FC = () => {
                 <option value="hosting">{t('ticket.category.hosting')}</option>
               </select>
             </div>
-            <div style={S.sideField}><span style={S.sideLabel}>{t('detail.source')}</span><span style={S.sideValue}>{(ticket.source as string) || t('ticket.source.portal')}</span></div>
-            <div style={S.sideField}><span style={S.sideLabel}>{t('detail.assigned')}</span><span style={S.sideValue}>{typeof ticket.assignedTo === 'object' && ticket.assignedTo ? (ticket.assignedTo as { firstName?: string }).firstName || 'Admin' : '--'}</span></div>
+            <div className={s.sideField}><span className={s.sideLabel}>{t('detail.source')}</span><span className={s.sideValue}>{(ticket.source as string) || t('ticket.source.portal')}</span></div>
+            <div className={s.sideField}><span className={s.sideLabel}>{t('detail.assigned')}</span><span className={s.sideValue}>{typeof ticket.assignedTo === 'object' && ticket.assignedTo ? (ticket.assignedTo as { firstName?: string }).firstName || 'Admin' : '—'}</span></div>
           </div>
 
-          {/* Tags */}
-          <div style={S.sideSection}>
-            <div style={S.sideSectionTitle}>{t('detail.tags')}</div>
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+          {/* #6 — Tags section */}
+          <div className={s.sideSection}>
+            <div className={s.sideSectionTitle}>{t('detail.tags')}</div>
+            <div className={s.tagsWrap}>
               {tags.map((tag) => (
-                <span key={tag} style={S.tagChip}>
+                <span key={tag} className={s.tagChip}>
                   {tag}
-                  <button style={S.tagRemove} onClick={() => handleRemoveTag(tag)}>&times;</button>
+                  <button className={s.tagRemove} aria-label={`Retirer le tag ${tag}`} onClick={() => handleRemoveTag(tag)}>&times;</button>
                 </span>
               ))}
               {addingTag ? (
                 <input
-                  style={S.tagInput}
+                  className={s.tagInput}
                   value={newTagValue}
                   onChange={(e) => setNewTagValue(e.target.value)}
                   onKeyDown={(e) => { if (e.key === 'Enter') handleAddTag(); if (e.key === 'Escape') { setAddingTag(false); setNewTagValue('') } }}
@@ -673,30 +797,128 @@ export const TicketDetailClient: React.FC = () => {
                   autoFocus
                 />
               ) : (
-                <button style={S.tagAddBtn} onClick={() => setAddingTag(true)}>+ Tag</button>
+                <button className={s.tagAddBtn} onClick={() => setAddingTag(true)} aria-label="Ajouter un tag">+ Tag</button>
               )}
             </div>
           </div>
 
+          {/* ===== BILLING ===== */}
+          <div className={s.sideSection}>
+            <div className={s.sideSectionTitle}>Facturation</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ fontSize: 12 }}>Type</span>
+                <select
+                  value={(ticket as any)?.billingType || 'hourly'}
+                  onChange={async (e) => {
+                    try {
+                      await fetch(`/api/tickets/${ticketId}`, {
+                        method: 'PATCH', credentials: 'include',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ billingType: e.target.value }),
+                      })
+                      fetchAll()
+                    } catch {}
+                  }}
+                  style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', background: '#fff' }}
+                >
+                  <option value="hourly">Au temps</option>
+                  <option value="flat">Forfait</option>
+                </select>
+              </div>
+              {(ticket as any)?.billingType === 'flat' && (
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ fontSize: 12 }}>Montant forfait</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    <input
+                      type="number"
+                      defaultValue={(ticket as any)?.flatRateAmount ?? ''}
+                      placeholder="0"
+                      onBlur={async (e) => {
+                        const val = e.target.value ? Number(e.target.value) : null
+                        try {
+                          await fetch(`/api/tickets/${ticketId}`, {
+                            method: 'PATCH', credentials: 'include',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ flatRateAmount: val }),
+                          })
+                          fetchAll()
+                        } catch {}
+                      }}
+                      style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', width: 80, textAlign: 'right' }}
+                    />
+                    <span style={{ fontSize: 12, color: '#9ca3af' }}>€</span>
+                  </div>
+                </div>
+              )}
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ fontSize: 12 }}>Montant facturé</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <input
+                    type="number"
+                    defaultValue={(ticket as any)?.billedAmount ?? ''}
+                    placeholder="0"
+                    onBlur={async (e) => {
+                      const val = e.target.value ? Number(e.target.value) : null
+                      try {
+                        await fetch(`/api/tickets/${ticketId}`, {
+                          method: 'PATCH', credentials: 'include',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ billedAmount: val }),
+                        })
+                        fetchAll()
+                      } catch {}
+                    }}
+                    style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', width: 80, textAlign: 'right' }}
+                  />
+                  <span style={{ fontSize: 12, color: '#9ca3af' }}>€</span>
+                </div>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ fontSize: 12 }}>Paiement</span>
+                <select
+                  value={(ticket as any)?.paymentStatus || 'unpaid'}
+                  onChange={async (e) => {
+                    try {
+                      await fetch(`/api/tickets/${ticketId}`, {
+                        method: 'PATCH', credentials: 'include',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ paymentStatus: e.target.value }),
+                      })
+                      fetchAll()
+                    } catch {}
+                  }}
+                  style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', background: '#fff' }}
+                >
+                  <option value="unpaid">Non payé</option>
+                  <option value="partial">Partiel</option>
+                  <option value="paid">Payé</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
           {features.timeTracking && (
-            <div style={S.sideSection}>
-              <div style={S.sideSectionTitle}>{t('detail.time')} <span style={{ fontWeight: 700, fontSize: 13, color: '#d97706' }}>{totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, '0')} ${t('detail.total')}` : '0min'}</span></div>
-              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                <span style={{ fontFamily: 'monospace', fontSize: 16, fontWeight: 700, color: timerRunning ? '#dc2626' : 'var(--theme-text)' }}>
+            <div className={s.sideSection}>
+              <div className={s.sideSectionTitle}>{t('detail.time')} <span style={{ fontWeight: 700, fontSize: 13, color: '#d97706' }}>{totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, '0')} ${t('detail.total')}` : '0min'}</span></div>
+              {/* Timer */}
+              <div className={s.timer}>
+                <span className={`${s.timerDisplay} ${timerRunning ? s.timerActive : ''}`}>
                   {String(Math.floor(timerSeconds / 60)).padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
                 </span>
                 {!timerRunning ? (
-                  <button style={{ ...S.toolbarBtn, color: '#dc2626', borderColor: '#dc2626' }} onClick={() => setTimerRunning(true)}>{timerSeconds > 0 ? 'Play' : 'Go'}</button>
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(true)} style={{ color: '#dc2626', borderColor: '#dc2626' }} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
                 ) : (
-                  <button style={S.toolbarBtn} onClick={() => setTimerRunning(false)}>Pause</button>
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸</button>
                 )}
                 {timerSeconds >= 60 && !timerRunning && (
-                  <button style={{ ...S.toolbarBtn, color: '#16a34a', borderColor: '#16a34a' }} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }}>Save {Math.round(timerSeconds / 60)}m</button>
+                  <button className={s.timerBtn} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} style={{ color: '#16a34a', borderColor: '#16a34a' }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
                 )}
               </div>
+              {/* Manual time entry */}
               <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
                 <input type="number" min="1" placeholder="min" style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id="manual-time-input" />
-                <button style={{ ...S.toolbarBtn, fontSize: 11 }} onClick={async () => {
+                <button className={s.timerBtn} onClick={async () => {
                   const input = document.getElementById('manual-time-input') as HTMLInputElement
                   const mins = Number(input?.value)
                   if (!mins || mins < 1 || !ticketId) return
@@ -704,9 +926,31 @@ export const TicketDetailClient: React.FC = () => {
                     await fetch('/api/time-entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: new Date().toISOString(), description: 'Saisie manuelle' }) })
                     if (input) input.value = ''
                     fetchAll()
-                  } catch (err) { console.warn('[support] manual time entry error:', err) }
-                }}>+ Ajouter</button>
+                  } catch {}
+                }} style={{ fontSize: 11 }}>+ Ajouter</button>
               </div>
+              {/* Billing info */}
+              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--theme-elevation-500)' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', alignItems: 'center' }}>
+                  <span>Facturable</span>
+                  <button
+                    onClick={async () => {
+                      const newVal = ticket.billable === false ? true : false
+                      try { await fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ billable: newVal }) }); fetchAll() } catch {}
+                    }}
+                    style={{ fontWeight: 600, color: (ticket.billable !== false) ? '#16a34a' : '#dc2626', background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, textDecoration: 'underline' }}
+                  >
+                    {(ticket.billable !== false) ? 'Oui' : 'Non'}
+                  </button>
+                </div>
+                {totalMin > 0 && (
+                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
+                    <span>Montant estimé</span>
+                    <span style={{ fontWeight: 700, color: 'var(--theme-text)' }}>{((totalMin / 60) * 60).toFixed(0)}€</span>
+                  </div>
+                )}
+              </div>
+              {/* Time entries */}
               {timeEntries.length > 0 && (
                 <div style={{ marginTop: 8, fontSize: 11 }}>
                   {timeEntries.slice(0, 6).map((e) => (
@@ -721,51 +965,80 @@ export const TicketDetailClient: React.FC = () => {
           )}
 
           {features.activityLog && (
-            <div style={S.sideSection}>
-              <div style={S.sideSectionTitle}>
-                <button onClick={() => setShowActivity(!showActivity)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 700, textTransform: 'uppercase' as const, color: 'var(--theme-elevation-500)' }}>
-                  Activite {showActivity ? '&#9662;' : '&#9656;'}
+            <div className={s.sideSection}>
+              <div className={s.sideSectionTitle}>
+                <button className={s.collapseBtn} onClick={() => setShowActivity(!showActivity)} aria-label={showActivity ? 'Masquer le journal' : 'Afficher le journal'}>
+                  Activité {showActivity ? '▾' : '▸'}
                 </button>
               </div>
               {showActivity && activityLog.slice(0, 8).map((a) => (
-                <div key={a.id} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '4px 0' }}>
-                  <div style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 4, flexShrink: 0, backgroundColor: a.actorType === 'admin' ? '#2563eb' : a.actorType === 'system' ? '#6b7280' : '#16a34a' }} />
-                  <div>
-                    <div style={{ fontSize: 12, color: 'var(--theme-text)' }}>{(a.detail || a.action).slice(0, 60)}</div>
-                    <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)' }}>{timeAgo(a.createdAt)}</div>
+                <div key={a.id} className={s.activityItem}>
+                  <div className={s.activityDot} style={{ backgroundColor: a.actorType === 'admin' ? '#2563eb' : a.actorType === 'system' ? '#6b7280' : '#16a34a' }} />
+                  <div className={s.activityContent}>
+                    <div className={s.activityText}>{(a.detail || a.action).slice(0, 60)}</div>
+                    <div className={s.activityTime}>{timeAgo(a.createdAt)}</div>
                   </div>
                 </div>
               ))}
             </div>
           )}
+
+          {/* Client Intelligence (compact) */}
+          {clientSummary && clientSummary.summary && (
+            <div className={s.sideSection} style={{ background: 'linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%)' }}>
+              <div className={s.sideSectionTitle} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <span style={{ fontSize: 13 }}>🧠</span> Résumé client
+              </div>
+              <p style={{ margin: '0 0 8px', fontSize: 11, lineHeight: 1.6, color: '#374151' }}>{clientSummary.summary}</p>
+              {clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && (
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
+                  {clientSummary.recurringTopics.slice(0, 3).map((tp, i) => (
+                    <span key={i} style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(37,99,235,0.08)', color: '#2563eb', fontSize: 10, fontWeight: 600 }}>{tp.topic}</span>
+                  ))}
+                </div>
+              )}
+              {clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && (
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                  {clientSummary.keyFacts.slice(0, 3).map((f, i) => (
+                    <span key={i} style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(22,163,74,0.08)', color: '#16a34a', fontSize: 10, fontWeight: 600 }}>{f}</span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          {summaryLoading && (
+            <div className={s.sideSection}>
+              <div style={{ fontSize: 11, color: '#94a3b8', textAlign: 'center', padding: 8 }}>🧠 Chargement résumé...</div>
+            </div>
+          )}
         </div>
       </div>
 
-      {/* Undo delete toast */}
+{/* #2 — Undo delete toast */}
       {undoToast && (
-        <div style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', padding: '10px 20px', borderRadius: 8, background: '#1e293b', color: '#fff', fontSize: 13, display: 'flex', gap: 12, alignItems: 'center', zIndex: 100, boxShadow: '0 4px 12px rgba(0,0,0,0.2)' }} role="alert">
-          <span>{t('detail.messageDeleted')}</span>
-          <button onClick={handleUndoDelete} style={{ background: 'none', border: '1px solid rgba(255,255,255,0.3)', borderRadius: 4, padding: '4px 10px', color: '#fff', cursor: 'pointer', fontSize: 12, fontWeight: 600 }}>{t('detail.undo')}</button>
+        <div className={s.undoToast} role="alert">
+          <span>Message supprimé</span>
+          <button className={s.undoBtn} onClick={handleUndoDelete}>Annuler</button>
         </div>
       )}
 
-      {/* Split ticket modal */}
+      {/* #2 — Split ticket modal */}
       {splitModal && (
-        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }} onClick={(e) => { if (e.target === e.currentTarget) { setSplitModal(null); setSplitSubject('') } }}>
-          <div style={{ background: 'var(--theme-elevation-0)', borderRadius: 12, padding: 24, maxWidth: 480, width: '100%', boxShadow: '0 8px 30px rgba(0,0,0,0.15)' }} role="dialog">
-            <h3 style={{ margin: '0 0 12px', fontSize: 16, fontWeight: 700 }}>{t('detail.extractTitle')}</h3>
-            <div style={{ padding: 10, background: 'var(--theme-elevation-50)', borderRadius: 6, fontSize: 13, color: 'var(--theme-elevation-500)', marginBottom: 12 }}>{splitModal.preview}</div>
+        <div className={s.splitOverlay} onClick={(e) => { if (e.target === e.currentTarget) { setSplitModal(null); setSplitSubject('') } }}>
+          <div className={s.splitModal} role="dialog" aria-label="Extraire dans un nouveau ticket">
+            <h3 className={s.splitTitle}>Extraire dans un nouveau ticket</h3>
+            <div className={s.splitPreview}>{splitModal.preview}</div>
             <input
-              style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 13, marginBottom: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }}
+              className={s.splitInput}
               value={splitSubject}
               onChange={(e) => setSplitSubject(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') handleSplitConfirm() }}
-              placeholder={t('detail.extractSubjectPlaceholder')}
+              placeholder="Sujet du nouveau ticket..."
               autoFocus
             />
-            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-              <button style={{ padding: '6px 14px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--theme-text)' }} onClick={() => { setSplitModal(null); setSplitSubject('') }}>{t('common.cancel')}</button>
-              <button style={{ ...S.sendBtn }} onClick={handleSplitConfirm} disabled={!splitSubject.trim()}>{t('ticket.createTicket')}</button>
+            <div className={s.splitActions}>
+              <button className={s.splitCancelBtn} onClick={() => { setSplitModal(null); setSplitSubject('') }}>Annuler</button>
+              <button className={s.splitConfirmBtn} onClick={handleSplitConfirm} disabled={!splitSubject.trim()}>Créer le ticket</button>
             </div>
           </div>
         </div>