@consilioweb/payload-support 0.10.1 → 0.12.0

package/src/portal/auth/tickets/detail/TransferAndInviteActions.tsx

@@ -0,0 +1,402 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+type Toast = { type: 'success' | 'error'; message: string } | null
+type Modal = 'transfer' | 'invite' | null
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+interface Props {
+  ticketId: number | string
+}
+
+/**
+ * Sidebar actions on the ticket detail page:
+ * - Transferer par email     → POST /api/support/tickets/:id/transfer
+ * - Inviter un collegue      → POST /api/support/tickets/:id/invite
+ *
+ * Each action opens a modal (focus trap + ESC to close) with a small form
+ * and a toast for feedback.
+ */
+export function TransferAndInviteActions({ ticketId }: Props) {
+  const [modal, setModal] = useState<Modal>(null)
+  const [toast, setToast] = useState<Toast>(null)
+
+  useEffect(() => {
+    if (!toast) return
+    const t = setTimeout(() => setToast(null), 3500)
+    return () => clearTimeout(t)
+  }, [toast])
+
+  const closeModal = useCallback(() => setModal(null), [])
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setModal('transfer')}
+        className="inline-flex w-full items-center gap-2 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 transition-colors hover:bg-slate-50 dark:hover:bg-slate-700"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <polyline points="22,6 12,13 2,6" />
+        </svg>
+        Transf&eacute;rer par email
+      </button>
+      <button
+        type="button"
+        onClick={() => setModal('invite')}
+        className="inline-flex w-full items-center gap-2 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 transition-colors hover:bg-slate-50 dark:hover:bg-slate-700"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="8.5" cy="7" r="4" />
+          <line x1="20" y1="8" x2="20" y2="14" />
+          <line x1="23" y1="11" x2="17" y2="11" />
+        </svg>
+        Inviter un coll&egrave;gue
+      </button>
+
+      {modal === 'transfer' && (
+        <TransferModal
+          ticketId={ticketId}
+          onClose={closeModal}
+          onResult={(t) => {
+            setToast(t)
+            if (t.type === 'success') closeModal()
+          }}
+        />
+      )}
+      {modal === 'invite' && (
+        <InviteModal
+          ticketId={ticketId}
+          onClose={closeModal}
+          onResult={(t) => {
+            setToast(t)
+            if (t.type === 'success') closeModal()
+          }}
+        />
+      )}
+
+      {toast && (
+        <div
+          role="status"
+          aria-live="polite"
+          className={`fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium shadow-lg ${
+            toast.type === 'success'
+              ? 'border-emerald-200 bg-white text-emerald-800 dark:border-emerald-700/50 dark:bg-slate-800 dark:text-emerald-200'
+              : 'border-red-200 bg-white text-red-800 dark:border-red-700/50 dark:bg-slate-800 dark:text-red-200'
+          }`}
+        >
+          {toast.type === 'success' ? (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-emerald-500" aria-hidden>
+              <polyline points="20,6 9,17 4,12" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-red-500" aria-hidden>
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+          )}
+          {toast.message}
+        </div>
+      )}
+    </>
+  )
+}
+
+// ─── Modale Transferer ───────────────────────────────────
+
+function TransferModal({
+  ticketId,
+  onClose,
+  onResult,
+}: {
+  ticketId: number | string
+  onClose: () => void
+  onResult: (t: Toast) => void
+}) {
+  const [email, setEmail] = useState('')
+  const [includeAttachments, setIncludeAttachments] = useState(true)
+  const [message, setMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const cleaned = email.trim().toLowerCase()
+    if (!cleaned || !EMAIL_RE.test(cleaned)) {
+      onResult({ type: 'error', message: 'Email invalide' })
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/support/tickets/${ticketId}/transfer`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: cleaned, includeAttachments, message }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok) {
+        onResult({ type: 'error', message: (data && data.error) || 'Echec du transfert' })
+      } else {
+        onResult({ type: 'success', message: `Transfert envoye a ${cleaned}` })
+      }
+    } catch (err) {
+      console.warn('[TransferModal] Network error:', err)
+      onResult({ type: 'error', message: 'Erreur reseau' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal title="Transferer par email" onClose={onClose}>
+      <form onSubmit={submit} className="flex flex-col gap-4">
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="font-medium text-slate-700 dark:text-slate-300">Destinataire</span>
+          <input
+            type="email"
+            required
+            autoFocus
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="collegue@exemple.com"
+            className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+        </label>
+        <label className="flex items-start gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={includeAttachments}
+            onChange={(e) => setIncludeAttachments(e.target.checked)}
+            className="mt-0.5 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+          />
+          <span className="text-slate-700 dark:text-slate-300">
+            Inclure les pieces jointes (en liens cliquables)
+          </span>
+        </label>
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="font-medium text-slate-700 dark:text-slate-300">Message (optionnel)</span>
+          <textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            rows={3}
+            maxLength={1000}
+            placeholder="Un mot pour le destinataire..."
+            className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 resize-none"
+          />
+        </label>
+        <ModalFooter onClose={onClose} loading={loading} submitLabel="Envoyer" />
+      </form>
+    </Modal>
+  )
+}
+
+// ─── Modale Inviter ──────────────────────────────────────
+
+function InviteModal({
+  ticketId,
+  onClose,
+  onResult,
+}: {
+  ticketId: number | string
+  onClose: () => void
+  onResult: (t: Toast) => void
+}) {
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<'viewer' | 'collaborator'>('viewer')
+  const [loading, setLoading] = useState(false)
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const cleaned = email.trim().toLowerCase()
+    if (!cleaned || !EMAIL_RE.test(cleaned)) {
+      onResult({ type: 'error', message: 'Email invalide' })
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/support/tickets/${ticketId}/invite`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: cleaned, role }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok) {
+        onResult({ type: 'error', message: (data && data.error) || "Echec de l'invitation" })
+      } else {
+        onResult({ type: 'success', message: `Invitation envoyee a ${cleaned}` })
+      }
+    } catch (err) {
+      console.warn('[InviteModal] Network error:', err)
+      onResult({ type: 'error', message: 'Erreur reseau' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal title="Inviter un collegue" onClose={onClose}>
+      <form onSubmit={submit} className="flex flex-col gap-4">
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="font-medium text-slate-700 dark:text-slate-300">Email du collegue</span>
+          <input
+            type="email"
+            required
+            autoFocus
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="collegue@exemple.com"
+            className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+        </label>
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="font-medium text-slate-700 dark:text-slate-300">Role</span>
+          <select
+            value={role}
+            onChange={(e) => setRole(e.target.value as 'viewer' | 'collaborator')}
+            className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          >
+            <option value="viewer">Lecteur (consultation seule)</option>
+            <option value="collaborator">Collaborateur (peut repondre)</option>
+          </select>
+        </label>
+        <ModalFooter onClose={onClose} loading={loading} submitLabel="Inviter" />
+      </form>
+    </Modal>
+  )
+}
+
+// ─── Modal shell (focus trap + ESC) ──────────────────────
+
+function Modal({
+  title,
+  onClose,
+  children,
+}: {
+  title: string
+  onClose: () => void
+  children: React.ReactNode
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    lastFocusedRef.current = document.activeElement as HTMLElement | null
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+        return
+      }
+      if (e.key === 'Tab') {
+        const root = containerRef.current
+        if (!root) return
+        const focusables = root.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        )
+        if (focusables.length === 0) return
+        const first = focusables[0]
+        const last = focusables[focusables.length - 1]
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault()
+          last.focus()
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault()
+          first.focus()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', onKey)
+    // Prevent background scroll
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = previousOverflow
+      try {
+        lastFocusedRef.current?.focus()
+      } catch {
+        /* noop */
+      }
+    }
+  }, [onClose])
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4"
+    >
+      <div
+        className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        ref={containerRef}
+        className="relative w-full max-w-md rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-2xl"
+      >
+        <div className="mb-4 flex items-start justify-between">
+          <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Fermer"
+            className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800 dark:hover:text-slate-300"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function ModalFooter({
+  onClose,
+  loading,
+  submitLabel,
+}: {
+  onClose: () => void
+  loading: boolean
+  submitLabel: string
+}) {
+  return (
+    <div className="mt-2 flex items-center justify-end gap-2">
+      <button
+        type="button"
+        onClick={onClose}
+        disabled={loading}
+        className="rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 transition-colors hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50"
+      >
+        Annuler
+      </button>
+      <button
+        type="submit"
+        disabled={loading}
+        className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 disabled:opacity-50"
+      >
+        {loading && (
+          <svg className="h-3.5 w-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+        )}
+        {submitLabel}
+      </button>
+    </div>
+  )
+}

package/src/portal/auth/tickets/detail/page.tsx

@@ -15,6 +15,7 @@ import { PrintButton } from './PrintButton'
 import { TypingIndicator } from './TypingIndicator'
 import { MessageActions, EditedBadge, DeletedMessage } from './MessageActions'
 import { ReadReceipt } from './ReadReceipt'
+import { TransferAndInviteActions } from './TransferAndInviteActions'
 // Document type for ticket attachments
 type PayloadDocument = { filename?: string; title?: string; url?: string }
 
@@ -138,6 +139,20 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
   const priority = priorityConfig[ticket.priority || 'normal']
   const isClosed = ticket.status === 'resolved'
 
+  // Compute the "next-step" banner: resolved → done, last msg from admin → client to play,
+  // last msg from client/email → support to play.
+  const lastMsg = messages.docs.length > 0 ? messages.docs[messages.docs.length - 1] : null
+  const lastMsgFromClient = lastMsg ? (lastMsg.authorType === 'client' || lastMsg.authorType === 'email') : false
+  const nextStep: 'done' | 'us' | 'you' = isClosed
+    ? 'done'
+    : lastMsgFromClient
+      ? 'us'
+      : 'you'
+
+  // Configurable support phone for urgent help (env var with sane fallback).
+  const SUPPORT_PHONE = process.env.NEXT_PUBLIC_SUPPORT_PHONE || '01 23 45 67 89'
+  const SUPPORT_PHONE_HREF = SUPPORT_PHONE.replace(/\s+/g, '')
+
   // Compute client initials for avatar
   const clientInitials = (() => {
     const fn = (user as { firstName?: string }).firstName || ''
@@ -274,13 +289,37 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
           )
         })()}
 
+        {/* Urgent contact — surfaced when a phone is configured */}
+        <div className="rounded-2xl border border-amber-200 dark:border-amber-900/60 bg-amber-50 dark:bg-amber-950/30 p-4 shadow-sm">
+          <h2 className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-300">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5" aria-hidden>
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+            </svg>
+            Besoin urgent ?
+          </h2>
+          <p className="mb-3 text-xs text-amber-800 dark:text-amber-200">
+            Pour un site indisponible ou un blocage critique, appelez Christophe directement.
+          </p>
+          <a
+            href={`tel:${SUPPORT_PHONE_HREF}`}
+            className="inline-flex w-full items-center justify-center gap-2 rounded-xl border-2 border-amber-500 bg-white px-3 py-2.5 text-sm font-bold text-amber-700 transition-colors hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-200 dark:hover:bg-amber-900/50"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+            </svg>
+            {SUPPORT_PHONE}
+          </a>
+        </div>
+
         {/* Actions sidebar */}
         <div className="rounded-2xl border border-slate-200/80 dark:border-slate-700/80 bg-white dark:bg-slate-800/90 p-4 shadow-sm">
+          <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Actions</h2>
           <div className="flex flex-col gap-2">
-            <PrintButton />
             {!isClosed && (
               <CloseTicketButton ticketId={ticket.id} />
             )}
+            <PrintButton />
+            <TransferAndInviteActions ticketId={ticket.id} />
           </div>
         </div>
       </div>
@@ -383,6 +422,67 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
                 )}
               </div>
             </div>
+
+            {/* Next-step banner: orients the client on who's expected to act next */}
+            <div className={`mt-4 flex items-center gap-3 rounded-xl border px-4 py-3 ${
+              nextStep === 'done'
+                ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-900/60 dark:bg-emerald-950/30'
+                : nextStep === 'us'
+                  ? 'border-amber-200 bg-amber-50 dark:border-amber-900/60 dark:bg-amber-950/30'
+                  : 'border-blue-200 bg-blue-50 dark:border-blue-900/60 dark:bg-blue-950/30'
+            }`}>
+              <span className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-white shadow-sm ${
+                nextStep === 'done'
+                  ? 'text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400'
+                  : nextStep === 'us'
+                    ? 'text-amber-600 dark:bg-amber-900/50 dark:text-amber-400'
+                    : 'text-blue-600 dark:bg-blue-900/50 dark:text-blue-400'
+              }`}>
+                {nextStep === 'done' ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+                    <polyline points="20,6 9,17 4,12" />
+                  </svg>
+                ) : nextStep === 'us' ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden>
+                    <line x1="12" y1="19" x2="12" y2="5" />
+                    <polyline points="5 12 12 5 19 12" />
+                  </svg>
+                )}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className={`text-sm font-semibold ${
+                  nextStep === 'done'
+                    ? 'text-emerald-900 dark:text-emerald-200'
+                    : nextStep === 'us'
+                      ? 'text-amber-900 dark:text-amber-200'
+                      : 'text-blue-900 dark:text-blue-200'
+                }`}>
+                  {nextStep === 'done'
+                    ? 'Ticket resolu'
+                    : nextStep === 'us'
+                      ? 'Christophe revient vers vous'
+                      : 'On attend votre reponse'}
+                </p>
+                <p className={`text-xs ${
+                  nextStep === 'done'
+                    ? 'text-emerald-700 dark:text-emerald-300'
+                    : nextStep === 'us'
+                      ? 'text-amber-700 dark:text-amber-300'
+                      : 'text-blue-700 dark:text-blue-300'
+                }`}>
+                  {nextStep === 'done'
+                    ? 'N’hesitez pas a rouvrir le ticket si necessaire.'
+                    : nextStep === 'us'
+                      ? 'Premiere reponse sous 2h ouvrees en moyenne.'
+                      : 'Le support attend votre retour pour avancer.'}
+                </p>
+              </div>
+            </div>
           </div>
 
           {/* Documents -- visible below XL only (on XL they are in the sidebar) */}
@@ -508,32 +608,39 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
                   )}
 
                   <div className={`flex items-end gap-2.5 mb-3 ${isClient ? 'flex-row-reverse' : 'flex-row'}`}>
-                    {/* Avatar */}
+                    {/* Avatar — stays on the same side as its bubble */}
                     {isClient ? (
-                      <div className="flex-shrink-0 h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-gradient-to-br from-slate-400 to-slate-500 flex items-center justify-center text-white text-xs font-bold shadow-sm">
+                      <div className="flex-shrink-0 h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold shadow-sm">
                         {clientInitials}
                       </div>
                     ) : (
-                      <div className="flex-shrink-0 h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center text-white text-xs font-bold shadow-sm">
+                      <div className="flex-shrink-0 h-6 w-6 sm:h-7 sm:w-7 rounded-full bg-gradient-to-br from-slate-500 to-slate-700 flex items-center justify-center text-white text-xs font-bold shadow-sm">
                         CW
                       </div>
                     )}
 
-                    {/* Message bubble */}
+                    {/* Asymmetric bubbles:
+                        - client on the RIGHT with soft info-50 background (warm, identifies the user)
+                        - support on the LEFT with neutral elevation background
+                        - text is left-aligned in BOTH bubbles for readability (per refonte brief) */}
                     <div className={`group relative max-w-[88%] sm:max-w-[80%] md:max-w-[75%] ${isClient ? 'items-end' : 'items-start'}`}>
                       <div
-                        className={`relative rounded-2xl px-4 py-2.5 ${
+                        className={`relative rounded-2xl px-4 py-2.5 text-left ${
                           isClient
-                            ? 'rounded-br-md bg-slate-100 dark:bg-slate-700/80 text-slate-800 dark:text-slate-200'
-                            : 'rounded-bl-md bg-blue-600 text-white'
+                            ? 'rounded-br-md bg-blue-50 text-slate-800 ring-1 ring-blue-100 dark:bg-blue-950/40 dark:text-slate-100 dark:ring-blue-900/40'
+                            : 'rounded-bl-md bg-slate-100 text-slate-800 ring-1 ring-slate-200 dark:bg-slate-700/80 dark:text-slate-100 dark:ring-slate-600/40'
                         }`}
                       >
-                        {/* Author + time */}
-                        <div className={`mb-1 flex items-center gap-2 ${isClient ? 'justify-end' : ''}`}>
-                          <span className={`text-xs font-semibold ${isClient ? 'text-slate-500 dark:text-slate-400' : 'text-blue-100'}`}>
+                        {/* Author + time — always left-aligned for both sides */}
+                        <div className="mb-1 flex items-center gap-2">
+                          <span className={`text-xs font-semibold ${
+                            isClient
+                              ? 'text-blue-700 dark:text-blue-300'
+                              : 'text-slate-600 dark:text-slate-300'
+                          }`}>
                             {authorName}
                           </span>
-                          <span className={`text-xs font-mono ${isClient ? 'text-slate-500 dark:text-slate-400' : 'text-blue-200'}`}>
+                          <span className="text-xs font-mono text-slate-500 dark:text-slate-400">
                             {msg.createdAt ? formatMessageDate(msg.createdAt) : ''}
                             <EditedBadge editedAt={(msg as unknown as { editedAt?: string }).editedAt} />
                           </span>
@@ -544,11 +651,7 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
                           <DeletedMessage />
                         ) : msg.bodyHtml ? (
                           <div
-                            className={`text-sm leading-relaxed [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:opacity-80 [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5 [&_p]:mb-1 last:[&_p]:mb-0 ${
-                              isClient
-                                ? '[&_a]:text-blue-600 dark:[&_a]:text-blue-400 [&_a]:underline [&_blockquote]:border-slate-300 [&_blockquote]:bg-slate-50 dark:[&_blockquote]:bg-slate-600/30 [&_blockquote]:rounded-r-lg [&_blockquote]:py-1 [&_blockquote]:px-3'
-                                : '[&_a]:text-blue-100 [&_a]:underline [&_blockquote]:border-blue-300 [&_blockquote]:rounded-r-lg [&_blockquote]:py-1 [&_blockquote]:px-3'
-                            }`}
+                            className="text-sm leading-relaxed [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-slate-300 [&_blockquote]:pl-3 [&_blockquote]:opacity-80 [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5 [&_p]:mb-1 last:[&_p]:mb-0 [&_a]:text-blue-600 dark:[&_a]:text-blue-400 [&_a]:underline"
                             dangerouslySetInnerHTML={{ __html: msg.bodyHtml }}
                           />
                         ) : (
@@ -579,7 +682,7 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
                                     href={file.url || '#'}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    className="block overflow-hidden rounded-xl border border-white/20 transition-opacity hover:opacity-90"
+                                    className="block overflow-hidden rounded-xl border border-slate-200 dark:border-slate-600 transition-opacity hover:opacity-90"
                                   >
                                     {/* eslint-disable-next-line @next/next/no-img-element */}
                                     <img
@@ -626,11 +729,7 @@ export default async function TicketDetailPage({ params }: { params: Promise<{ i
                                       href={file.url || '#'}
                                       target="_blank"
                                       rel="noopener noreferrer"
-                                      className={`inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-colors ${
-                                        isClient
-                                          ? 'bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-500'
-                                          : 'bg-blue-500/30 text-blue-50 hover:bg-blue-500/50'
-                                      }`}
+                                      className="inline-flex items-center gap-1.5 rounded-lg bg-white/70 dark:bg-slate-800/70 px-2.5 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300 transition-colors hover:bg-white dark:hover:bg-slate-700"
                                     >
                                       <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                                         <path strokeLinecap="round" strokeLinejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />