// docs.jsx — printable documents (relevé, facture, plaquette…) + lead message thread
const { useState: useD, useEffect: useDE, useRef: useDR } = React;

/* ---- shared letterhead ---- */
function Letterhead({ right }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', paddingBottom:22, borderBottom:'2px solid var(--navy)', marginBottom:26 }}>
      <div>
        <div style={{ display:'flex', alignItems:'flex-start', gap:1 }}>
          <span style={{ fontWeight:800, fontSize:26, letterSpacing:'-.03em', color:'var(--navy)' }}>LBC</span>
          <span style={{ fontWeight:800, fontSize:16, color:'var(--brand)' }}>*</span>
        </div>
        <div style={{ fontSize:11, color:'var(--muted)', marginTop:2, letterSpacing:'.02em' }}>Les Bras Cassés · Déménagement · Nice</div>
      </div>
      <div style={{ textAlign:'right', fontSize:11.5, color:'var(--muted)', lineHeight:1.6 }}>{right}</div>
    </div>
  );
}
const docTd = { padding:'9px 10px', fontSize:12.5, borderBottom:'1px solid #eee', color:'#333' };
const docTh = { padding:'9px 10px', fontSize:10.5, textTransform:'uppercase', letterSpacing:'.05em', color:'#888', textAlign:'left', borderBottom:'2px solid #ddd' };

/* ---- document bodies by kind ---- */
function DocBody({ kind, partner, rows, lead }) {
  if (kind === 'statement') {
    const total = rows.reduce((s, r) => s + r.l.commission, 0);
    const verse = rows.filter(r => r.l.commissionStatus === 'verse').reduce((s, r) => s + r.l.commission, 0);
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Relevé de commissions</strong><br />Mai 2026<br />Édité le 1 juin 2026</>} />
        <div style={{ fontSize:12.5, color:'#444', marginBottom:18, lineHeight:1.6 }}>
          <strong>{partner.company}</strong><br />{partner.firstName} {partner.lastName} · {partner.city}<br />Niveau {partner.tier} — taux {partner.rate}%</div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Client</th><th style={docTh}>Trajet</th><th style={{...docTh, textAlign:'right'}}>Valeur</th><th style={{...docTh, textAlign:'right'}}>Commission</th><th style={{...docTh, textAlign:'right'}}>Statut</th></tr></thead>
          <tbody>{rows.map(({ l, cs }) => (
            <tr key={l.id}><td style={{...docTd, fontWeight:600}}>{l.first} {l.last}</td><td style={docTd}>{l.from} → {l.to}</td>
              <td style={{...docTd, textAlign:'right'}}>{euro(l.value)}</td><td style={{...docTd, textAlign:'right', fontWeight:600}}>{euro(l.commission)}</td>
              <td style={{...docTd, textAlign:'right', color:'#888'}}>{cs.l}</td></tr>))}</tbody>
        </table>
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:20 }}>
          <div style={{ width:260 }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, padding:'6px 0', color:'#555' }}><span>Déjà versé</span><span>{euro(verse)}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, padding:'6px 0', color:'#555', borderBottom:'1px solid #ddd' }}><span>En attente</span><span>{euro(total-verse)}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:15, fontWeight:700, padding:'10px 0', color:'var(--navy)' }}><span>Total</span><span>{euro(total)}</span></div>
          </div>
        </div>
      </>
    );
  }
  if (kind === 'invoice') {
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Facture de commission</strong><br />N° {lead.id.replace('L-','FC-')}<br />{lead.dates.paid || 'En attente'}</>} />
        <div style={{ fontSize:12.5, color:'#444', marginBottom:20, lineHeight:1.6 }}><strong>{partner.company}</strong> · {partner.firstName} {partner.lastName}</div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Désignation</th><th style={{...docTh,textAlign:'right'}}>Base</th><th style={{...docTh,textAlign:'right'}}>Taux</th><th style={{...docTh,textAlign:'right'}}>Montant</th></tr></thead>
          <tbody><tr><td style={{...docTd,fontWeight:600}}>Commission — {lead.first} {lead.last} ({lead.from} → {lead.to})</td>
            <td style={{...docTd,textAlign:'right'}}>{euro(lead.value)}</td><td style={{...docTd,textAlign:'right'}}>{lead.rate}%</td>
            <td style={{...docTd,textAlign:'right',fontWeight:700}}>{euro(lead.commission)}</td></tr></tbody>
        </table>
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:18 }}>
          <div style={{ background:'var(--navy)', color:'#fff', padding:'12px 20px', borderRadius:8, fontSize:15, fontWeight:700 }}>Total à verser : {euro(lead.commission)}</div>
        </div>
        <p style={{ fontSize:11, color:'#999', marginTop:30 }}>Commission versée dans le cadre du programme partenaire LBC. Document généré automatiquement.</p>
      </>
    );
  }
  if (kind === 'grille') {
    const Row = (a,b,c)=>(<tr><td style={{...docTd,fontWeight:600}}>{a}</td><td style={docTd}>{b}</td><td style={{...docTd,textAlign:'right'}}>{c}</td></tr>);
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Grille tarifaire 2026</strong><br />Indicative · hors devis</>} />
        <h3 style={{ fontSize:15, color:'var(--navy)', margin:'0 0 6px' }}>Formule Simple</h3>
        <p style={{ fontSize:12.5, color:'#555', margin:'0 0 12px' }}>Transport, chargement et déchargement par notre équipe.</p>
        <table style={{ width:'100%', borderCollapse:'collapse', marginBottom:26 }}>
          <thead><tr><th style={docTh}>Volume</th><th style={docTh}>Exemple</th><th style={{...docTh,textAlign:'right'}}>À partir de</th></tr></thead>
          <tbody>{Row('< 15 m³','Studio / T1','690 €')}{Row('15–30 m³','T2 / T3','1 200 €')}{Row('30–50 m³','T4 / maison','2 100 €')}</tbody>
        </table>
        <h3 style={{ fontSize:15, color:'var(--navy)', margin:'0 0 6px' }}>Formule Complète</h3>
        <p style={{ fontSize:12.5, color:'#555', margin:'0 0 12px' }}>Montage / démontage du mobilier + protection intégrale + assurance étendue.</p>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Volume</th><th style={docTh}>Exemple</th><th style={{...docTh,textAlign:'right'}}>À partir de</th></tr></thead>
          <tbody>{Row('< 15 m³','Studio / T1','1 050 €')}{Row('15–30 m³','T2 / T3','1 850 €')}{Row('30–50 m³','T4 / maison','3 200 €')}</tbody>
        </table>
      </>
    );
  }
  if (kind === 'plaquette') {
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Plaquette commerciale</strong><br />À remettre à vos clients</>} />
        <h2 style={{ fontSize:24, color:'var(--navy)', margin:'0 0 8px', letterSpacing:'-.02em' }}>Déménager sans rien porter.</h2>
        <p style={{ fontSize:13.5, color:'#444', lineHeight:1.6, margin:'0 0 22px' }}>LBC accompagne vos clients de Nice vers toute la France et l'Europe. Une équipe, un interlocuteur, zéro stress — de l'estimation au dernier carton.</p>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          {[['Formule Simple','Transport + manutention par des pros.'],['Formule Complète','Montage, démontage, protection et assurance.'],['Devis sous 24 h','Une réponse rapide, sans engagement.'],['Couverture Europe','Nice → Milan, Genève, et au-delà.']].map(([t,d],i)=>(
            <div key={i} style={{ border:'1px solid #e5e5e5', borderRadius:10, padding:'14px 16px' }}>
              <div style={{ fontSize:13.5, fontWeight:700, color:'var(--navy)', marginBottom:4 }}>{t}</div>
              <div style={{ fontSize:12, color:'#666', lineHeight:1.5 }}>{d}</div></div>))}
        </div>
        <div style={{ background:'var(--cream)', borderRadius:10, padding:'16px 20px', marginTop:22, fontSize:13, color:'var(--navy)' }}>
          📞 Recommandé par <strong>{window.LBC_DATA.PARTNER.company}</strong> — mentionnez ce partenaire lors de votre demande de devis.</div>
      </>
    );
  }
  if (kind === 'guide') {
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Guide partenaire</strong><br />Maximiser vos commissions</>} />
        <h2 style={{ fontSize:20, color:'var(--navy)', margin:'0 0 16px' }}>5 réflexes pour gagner plus</h2>
        {[['Soumettez tôt','Dès qu\'un client évoque un déménagement, créez le lead. Plus c\'est tôt, plus la conversion est élevée.'],
          ['Renseignez la formule','Préciser Simple ou Complète aide nos équipes à devis-er vite et juste.'],
          ['Ajoutez des notes','Étage, ascenseur, objets fragiles : chaque détail accélère le devis.'],
          ['Visez Silver','5 leads par mois suffisent pour passer de 6 % à 8 % de commission.'],
          ['Utilisez le widget','Intégrez le formulaire LBC sur votre site pour capter des leads en continu.']].map(([t,d],i)=>(
          <div key={i} style={{ display:'flex', gap:14, marginBottom:16 }}>
            <span style={{ width:28, height:28, borderRadius:'50%', background:'var(--navy)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:13, flexShrink:0 }}>{i+1}</span>
            <div><div style={{ fontSize:14, fontWeight:600, color:'var(--navy)' }}>{t}</div><div style={{ fontSize:12.5, color:'#555', lineHeight:1.5, marginTop:2 }}>{d}</div></div></div>))}
      </>
    );
  }
  if (kind === 'email') {
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Modèle d'email</strong><br />À personnaliser</>} />
        <div style={{ background:'#fafafa', border:'1px solid #eee', borderRadius:10, padding:'20px 22px', fontSize:13, color:'#333', lineHeight:1.7 }}>
          <div style={{ color:'#888', fontSize:12, marginBottom:12 }}>Objet : Votre déménagement avec un partenaire de confiance</div>
          Bonjour [Prénom],<br /><br />
          Suite à notre échange, je vous recommande <strong>LBC Déménagement</strong>, avec qui nous travaillons régulièrement. Leur équipe basée à Nice gère tout, de l'emballage au montage des meubles.<br /><br />
          Je leur ai transmis votre contact : ils vous proposeront un devis gratuit sous 24 h. Vous pouvez aussi les joindre directement en mentionnant <strong>{window.LBC_DATA.PARTNER.company}</strong>.<br /><br />
          Bien à vous,<br />[Votre nom]
        </div>
      </>
    );
  }
  if (kind === 'client-invoice') {
    const C = window.CLIENT, dep = Math.round(C.devis*0.3), sol = C.devis-dep;
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Facture déménagement</strong><br />N° {C.ref.replace('LBC-','FD-')}<br />{C.date}</>} />
        <div style={{ fontSize:12.5, color:'#444', marginBottom:18, lineHeight:1.6 }}><strong>{C.firstName} {C.lastName}</strong><br />{C.from} → {C.to}<br />Formule Complète</div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Désignation</th><th style={{...docTh,textAlign:'right'}}>Montant</th></tr></thead>
          <tbody>
            <tr><td style={docTd}>Déménagement {C.from} → {C.to} · Formule Complète</td><td style={{...docTd,textAlign:'right'}}>{euro(C.devis)}</td></tr>
            <tr><td style={{...docTd,color:'#888'}}>Acompte réglé (30 %)</td><td style={{...docTd,textAlign:'right',color:'#888'}}>− {euro(dep)}</td></tr>
          </tbody>
        </table>
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:18 }}>
          <div style={{ width:260 }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, padding:'6px 0', color:'#555' }}><span>Total TTC</span><span>{euro(C.devis)}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, padding:'6px 0', color:'#555', borderBottom:'1px solid #ddd' }}><span>Déjà versé</span><span>{euro(dep)}</span></div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:15, fontWeight:700, padding:'10px 0', color:'var(--navy)' }}><span>Solde dû (jour J)</span><span>{euro(sol)}</span></div>
          </div>
        </div>
        <p style={{ fontSize:11, color:'#999', marginTop:30 }}>TVA 20 % incluse · Document généré automatiquement par LBC Déménagement.</p>
      </>
    );
  }
  if (kind === 'storage-invoice') {
    const C = window.CLIENT, s = C.storage;
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Facture stockage</strong><br />Juin 2026<br />{C.ref.replace('LBC-','FS-')}</>} />
        <div style={{ fontSize:12.5, color:'#444', marginBottom:18, lineHeight:1.6 }}><strong>{C.firstName} {C.lastName}</strong><br />{s.box} · {s.size}<br />Entrepôt LBC sécurisé · Nice</div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Désignation</th><th style={docTh}>Période</th><th style={{...docTh,textAlign:'right'}}>Montant</th></tr></thead>
          <tbody><tr><td style={{...docTd,fontWeight:600}}>Location {s.box} ({s.size})</td><td style={docTd}>1 – 30 juin 2026</td><td style={{...docTd,textAlign:'right',fontWeight:700}}>{euro(s.price)}</td></tr></tbody>
        </table>
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:18 }}>
          <div style={{ background:'var(--navy)', color:'#fff', padding:'12px 20px', borderRadius:8, fontSize:15, fontWeight:700 }}>Total : {euro(s.price)} / mois</div>
        </div>
        <p style={{ fontSize:11, color:'#999', marginTop:30 }}>Stockage géré · sans engagement · TVA 20 % incluse. Récupération sur simple demande.</p>
      </>
    );
  }
  if (kind === 'client-devis') {
    const C = window.CLIENT;
    const FL = { eco:'Coup de main', standard:'Mains libres', premium:'Mains dans les poches', complete:'Mains dans les poches', simple:'Coup de main' };
    const fLabel = FL[C.formule] || 'Sur mesure';
    const inv = C.inventaire || [];
    const hasPrice = (C.devis||0) > 0;
    const sub = [C.volume&&(C.volume+' m³'), C.km&&(C.km+' km'), C.cartons&&(C.cartons+' cartons')].filter(Boolean).join(' · ');
    const tag = (arr)=>(arr||[]).map(t=>(t&&t.qty&&t.qty>1)?(t.label+' ×'+t.qty):((t&&t.label)||t)).join(', ');
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Devis</strong><br />N° {C.ref}<br />Valable 30 jours</>} />
        <div style={{ fontSize:12.5, color:'#444', marginBottom:18, lineHeight:1.6 }}><strong>{C.firstName} {C.lastName}</strong><br />{C.from} → {C.to} · {C.date}<br />Formule {fLabel}</div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr><th style={docTh}>Prestation</th><th style={{...docTh,textAlign:'right'}}>Montant</th></tr></thead>
          <tbody><tr><td style={docTd}>Déménagement formule {fLabel}<div style={{ fontSize:10.5, color:'#999' }}>{sub}</div></td><td style={{...docTd,textAlign:'right'}}>{hasPrice?euro(C.devis):'À définir'}</td></tr></tbody>
        </table>
        {inv.length>0 && (<>
          <div style={{ fontSize:12, fontWeight:700, color:'var(--navy)', margin:'18px 0 4px' }}>Inventaire</div>
          <table style={{ width:'100%', borderCollapse:'collapse' }}>
            <tbody>{inv.map((it,i)=>(<tr key={i}><td style={docTd}>{it.meuble||'—'}<span style={{ color:'#999' }}> · {it.piece||''}</span></td><td style={{...docTd,textAlign:'right'}}>×{it.quantite||1}</td></tr>))}</tbody>
          </table>
        </>)}
        {(C.fragiles&&C.fragiles.length)? <p style={{ fontSize:11.5, color:'#555', marginTop:12 }}><strong>Objets fragiles :</strong> {tag(C.fragiles)}</p>:null}
        {(C.demonter&&C.demonter.length)? <p style={{ fontSize:11.5, color:'#555', marginTop:4 }}><strong>À démonter / remonter :</strong> {tag(C.demonter)}</p>:null}
        <div style={{ display:'flex', justifyContent:'flex-end', marginTop:18 }}>
          <div style={{ background:'var(--navy)', color:'#fff', padding:'12px 20px', borderRadius:8, fontSize:15, fontWeight:700 }}>{hasPrice?('Total TTC : '+euro(C.devis)):'Devis en cours de préparation'}</div>
        </div>
        <p style={{ fontSize:11, color:'#999', marginTop:30 }}>Devis sans engagement · acompte de 30 % à la réservation · solde le jour J · TVA 20 % incluse.</p>
      </>
    );
  }
  if (kind === 'attestation') {
    const C = window.CLIENT;
    return (
      <>
        <Letterhead right={<><strong style={{ color:'var(--navy)', fontSize:13 }}>Attestation d'assurance</strong><br />Police n° AS-{C.ref.replace('LBC-','')}</>} />
        <h2 style={{ fontSize:18, color:'var(--navy)', margin:'0 0 14px' }}>Couverture tous risques</h2>
        <p style={{ fontSize:13, color:'#444', lineHeight:1.6, margin:'0 0 16px' }}>Nous attestons que le déménagement de <strong>{C.firstName} {C.lastName}</strong> ({C.from} → {C.to}, prévu le {C.date}) bénéficie de l'assurance tous risques LBC sur la valeur déclarée des biens transportés.</p>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <tbody>
            <tr><td style={docTd}>Assuré</td><td style={{...docTd,textAlign:'right',fontWeight:600}}>{C.firstName} {C.lastName}</td></tr>
            <tr><td style={docTd}>Formule</td><td style={{...docTd,textAlign:'right'}}>Complète · tous risques</td></tr>
            <tr><td style={docTd}>Plafond de garantie</td><td style={{...docTd,textAlign:'right'}}>50 000 €</td></tr>
            <tr><td style={docTd}>Franchise</td><td style={{...docTd,textAlign:'right'}}>0 €</td></tr>
          </tbody>
        </table>
        <p style={{ fontSize:11, color:'#999', marginTop:30 }}>Document généré automatiquement · LBC Déménagement SAS · Nice.</p>
      </>
    );
  }
  return null;
}

/* ---- modal wrapper with print ---- */
function PrintDoc({ kind, partner, rows, lead, onClose, showToast }) {
  return (
    <div className="doc-overlay" onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'100%', maxWidth:760 }}>
        <div className="no-print" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <span style={{ color:'rgba(255,255,255,.85)', fontSize:13, fontWeight:500 }}>Aperçu du document</span>
          <div style={{ display:'flex', gap:10 }}>
            <button className="btn btn-sm" style={{ background:'rgba(255,255,255,.15)', color:'#fff' }} onClick={()=>{ window.print(); }}>
              <Icon name="download" size={15} />Imprimer / PDF</button>
            <button className="btn btn-sm" style={{ background:'#fff', color:'var(--navy)' }} onClick={onClose}>Fermer</button>
          </div>
        </div>
        <div id="lbc-print" className="doc-paper" style={{ padding:'40px 44px' }}>
          <DocBody kind={kind} partner={partner} rows={rows} lead={lead} />
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   LEAD MESSAGE THREAD
   ============================================================ */
function buildThread(lead) {
  const f = lead.first, has = (...s) => s.includes(lead.status);
  const t = [{ who:'them', text:`Bonjour ${window.LBC_DATA.PARTNER.firstName}, nous avons bien reçu le lead de ${f} ${lead.last} (${lead.from} → ${lead.to}). Nous le contactons sous 24 h.`, time:lead.dates.recu }];
  if (lead.dates.contact) t.push({ who:'them', text:`${f} a été contacté — premier échange positif. Nous préparons le devis.`, time:lead.dates.contact });
  if (has('devis','accepte','effectue','verse')) t.push({ who:'them', text:`Devis de ${euro(lead.value)} envoyé à ${f}. On vous tient au courant de sa réponse.`, time:lead.dates.devis });
  if (has('accepte','effectue','verse')) t.push({ who:'me', text:`Parfait, merci ! ${f} m'a confirmé son intérêt de son côté 👍`, time:lead.dates.accepte });
  if (has('effectue','verse')) t.push({ who:'them', text:`Le déménagement de ${f} est réalisé. Votre commission de ${euro(lead.commission)} est en validation.`, time:lead.dates.toPay });
  if (lead.status==='verse') t.push({ who:'them', text:`Commission de ${euro(lead.commission)} versée sur votre compte. Merci pour cette belle recommandation !`, time:lead.dates.paid });
  if (lead.status==='perdu') t.push({ who:'them', text:`${f} a finalement opté pour une autre solution. Merci tout de même — au plaisir pour le prochain lead !`, time:'' });
  return t;
}

function MessageThread({ lead, showToast }) {
  const [msgs, setMsgs] = useD(()=>buildThread(lead));
  const [draft, setDraft] = useD('');
  const endRef = useDR(null);
  useDE(()=>{ setMsgs(buildThread(lead)); }, [lead.id]);

  const send = (text) => {
    const t = (text||draft).trim(); if(!t) return;
    setMsgs(m=>[...m, { who:'me', text:t, time:'à l\'instant' }]);
    setDraft('');
    showToast && showToast('Message envoyé à l\'équipe LBC');
    setTimeout(()=> setMsgs(m=>[...m, { who:'them', text:`Bien reçu ! Un coordinateur LBC revient vers vous très vite concernant ${lead.first}.`, time:'à l\'instant' }]), 1300);
  };

  return (
    <div className="card card-pad">
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
        <span className="section-title" style={{ fontSize:16 }}>Échanges avec LBC</span>
        <button className="btn btn-ghost btn-sm" onClick={()=>send('Bonjour, auriez-vous une mise à jour sur ce dossier ?')}>
          <Icon name="bell" size={15} />Relancer LBC</button>
      </div>
      <div className="scroll" style={{ display:'flex', flexDirection:'column', gap:10, maxHeight:280, overflowY:'auto', padding:'2px 2px 6px' }}>
        {msgs.map((m,i)=>(
          <div key={i} style={{ display:'flex', flexDirection:'column', alignItems: m.who==='me'?'flex-end':'flex-start', gap:3 }}>
            <div className={'msg '+(m.who==='me'?'msg-me':'msg-them')}>{m.text}</div>
            {m.time && <span style={{ fontSize:10.5, color:'var(--faint)', padding:'0 4px' }}>{m.who==='me'?'Vous':'Équipe LBC'} · {m.time}</span>}
          </div>
        ))}
        <div ref={endRef} />
      </div>
      <div style={{ display:'flex', gap:9, marginTop:14 }}>
        <input className="input" value={draft} onChange={e=>setDraft(e.target.value)} onKeyDown={e=>{ if(e.key==='Enter') send(); }}
          placeholder="Écrire à l'équipe LBC…" style={{ flex:1, height:42 }} />
        <button className="btn btn-primary" style={{ width:46, padding:0 }} onClick={()=>send()}><Icon name="arrowR" size={18} /></button>
      </div>
    </div>
  );
}

Object.assign(window, { PrintDoc, MessageThread });