# mailbox_ai — Design cible « mini-Gmail » (FR) — à reproduire fidèlement

> Basé sur la maquette de référence fournie par le client. **UI 100 % en français.**
> Style : cartes blanches épurées, accents bleus, badges de catégories color-codés (style Gmail/Bootstrap Perfex).

## Layout général : 2 colonnes
### Colonne GAUCHE (étroite ~270px, 2 cartes empilées)
**Carte « Comptes »**
- Titre « Comptes » + badge vert **« Synchronisé »** (état de sync du compte sélectionné) en haut à droite.
- Label « Compte de messagerie » + **menu déroulant** de sélection du compte (liste des comptes visibles).
- Bouton pleine largeur **foncé** : « ✏️ Composer ».
- Bouton pleine largeur **doré/orange** : « 🤖 IA : Résumer les non-lus » (déclenche AIService::summarizeUnread).

**Carte « Dossiers »**
- Bouton « 🔄 Actualiser les dossiers ».
- Liste des dossiers avec icône + libellé FR, dossier actif surligné, compteur non-lus en badge :
  Archive · Brouillons · **Boîte de réception** (badge compteur) · Envoyés · Indésirables · Spam · Corbeille.

### Colonne PRINCIPALE
**En-tête** : « Emails (Boîte de réception) » à gauche ; à droite bouton **« 🔄 Synchroniser »** + badge **« N total »**.
**Barre d'outils** : case à cocher de sélection groupée · champ recherche « Rechercher par expéditeur ou objet… » + bouton loupe · menu déroulant état **« Tous / Non lus / Suivis / Avec pièces jointes »** · menu déroulant **« Toutes les catégories »**.
**Liste d'emails** — chaque ligne :
- à gauche : case à cocher, **avatar** (initiales dans un rond).
- centre : **nom expéditeur** (gras), **objet** (gras + bleu si non-lu), **extrait** (gris) sur une ligne.
- **badge de catégorie** color-codé sous l'objet (ex. Urgent=rouge, Suivi=doré, En attente client=orange, Juridique/Conformité=foncé, Basse priorité=gris, Sans catégorie=clair).
- à droite : **date** courte (ex. « Ven 2/6 »), **icônes d'action** (enveloppe = lu/non-lu, corbeille = supprimer), et un **menu déroulant de catégorie** (changer la catégorie de l'email en 1 clic).
- ligne **non-lue** : bordure gauche bleue + objet en gras.
- pagination « Charger plus » / défilement.

## Catégories par défaut à seeder (FR)
Urgent (rouge), Suivi (doré), En attente client (orange), Juridique/Conformité (foncé/noir), Basse priorité (gris). + « Sans catégorie ».

## IA Ollama (intégrée, à la demande)
- **« 🤖 IA : Résumer les non-lus »** → résume les emails non-lus du dossier courant (liste de résumés courts).
- **Classer** : bouton/auto « IA : classer » qui assigne une catégorie existante (classifyEmail, sortie JSON contrainte → catégorie existante ou « Sans catégorie »).
- **Suggérer des réponses** (dans la vue email / compose) : 2-3 brouillons éditables.
- **Améliorer le message** (compose) : reformulation (plus clair / pro / plus court / direct).
- Provider par défaut **Ollama Cloud** (modèle Gemma cloud), clé chiffrée (option `mailbox_ai_ai_api_key_enc`), tout appel via le controller serveur `Ai.php`. Dégradation gracieuse si IA indisponible (boutons IA désactivés, le webmail reste 100 % fonctionnel).

## Contraintes
- Tout texte via `_l()` (clés FR + EN). Bootstrap/jQuery natifs Perfex. Rendu du corps d'email TOUJOURS en **iframe sandbox + CSP** (cf ARCHITECTURE 5.2). Endpoints via le contrôleur principal **Mailbox_ai** (= nom du module, pour que `admin/mailbox_ai` fonctionne) ; Accounts/Settings/Compose/Categories/Ai = contrôleurs séparés (`admin/mailbox_ai/<controller>`).