/* ═══════════════════════════════════════════════════════════════════
   DTISoft — Assistant (Claude), 2026-11-06 — js/modules/assistant.js, préfixe `ai-`.
   Panneau ancré à droite ; z-index 1200 (comme Requêtes) : les fiches (document 8000, article…) passent AU-DESSUS,
   le devis créé par l'assistant s'ouvre donc devant la discussion.
   ═══════════════════════════════════════════════════════════════════ */
.ai-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; z-index: 1200;
    display: flex; flex-direction: column; background: #fff; color: #1e293b; font-size: 13px;
    box-shadow: -8px 0 30px rgba(15, 23, 42, .25); border-left: 1px solid #cbd5e1;
    transform: translateX(105%); transition: transform .18s ease-out; visibility: hidden;
}
.ai-panel.ai-ouvert { transform: none; visibility: visible; }
/* Poignée de largeur (2026-11-06) : bord gauche, glisser à la souris. */
.ai-redim { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; touch-action: none; }
.ai-redim:hover, .ai-redim-actif .ai-redim { background: rgba(37, 99, 235, .25); }
.ai-panel.ai-redim-actif { transition: none; user-select: none; }
.ai-panel.ai-drop { outline: 3px dashed #3b82f6; outline-offset: -6px; }
.ai-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; background: #1e40af; color: #fff; }
.ai-title { flex: 1; font-weight: 700; font-size: 14px; }
.ai-title i { margin-right: 6px; }
.ai-hbtn { background: none; border: 0; color: #fff; cursor: pointer; font-size: 14px; padding: 4px 7px; border-radius: 4px; }
.ai-hbtn:hover { background: rgba(255, 255, 255, .15); }
.ai-close { font-size: 22px; line-height: 1; }

/* Barre de consommation (2026-11-06) : sous le bandeau, tout en haut de la discussion. */
.ai-conso { padding: 6px 12px 7px; background: #eff6ff; border-bottom: 1px solid #bfdbfe; font-size: 11.5px; color: #1e3a8a; }
.ai-conso[hidden] { display: none; }
.ai-conso-l { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ai-conso-reste { font-weight: 700; margin-left: auto; }
.ai-conso-na { font-weight: 400; color: #64748b; }
.ai-conso-bas { color: #c2410c; }
.ai-conso-vide { color: #b91c1c; }
.ai-conso-mod { color: #475569; margin-top: 3px; }
.ai-jauge { height: 5px; background: #dbeafe; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.ai-jauge-fill { height: 100%; background: #2563eb; border-radius: 3px; }
.ai-jauge-fill.ai-conso-bas { background: #ea580c; }
.ai-jauge-fill.ai-conso-vide { background: #dc2626; }

.ai-fil { flex: 1; overflow-y: auto; padding: 12px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.ai-vide { color: #475569; padding: 14px; text-align: left; line-height: 1.5; }
.ai-vide p { margin: 0 0 8px; }
.ai-vide-err { color: #b91c1c; }
.ai-exemple {
    display: block; width: 100%; text-align: left; margin-top: 8px; padding: 8px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; background: #fff; color: #1e3a8a; cursor: pointer; font-size: 12px;
}
.ai-exemple:hover { background: #eff6ff; border-color: #93c5fd; }

.ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg-user { align-self: flex-end; background: #1e40af; color: #fff; border-bottom-right-radius: 3px; }
.ai-msg-fichier { font-size: 11px; opacity: .85; margin-bottom: 4px; }
.ai-msg-ai { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 3px; }
.ai-attente { color: #475569; }
.ai-msg-err { color: #b91c1c; margin-top: 4px; }
.ai-md p { margin: 0 0 6px; }
.ai-md p:last-child { margin-bottom: 0; }
.ai-md ul, .ai-md ol { margin: 2px 0 6px; padding-left: 20px; }
.ai-md .ai-h { font-weight: 700; margin: 6px 0 4px; color: #1e40af; }
.ai-md a { color: #1d4ed8; }
.ai-ref { background: #eef2ff; color: #3730a3; padding: 0 4px; border-radius: 3px; font-size: 12px; }
/* Code reconnu (article, client, document) : lien d'un simple clic (2026-11-06). */
.ai-ref.ai-lien { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.ai-ref.ai-lien:hover { background: #c7d2fe; }
.ai-pre { background: #0f172a; color: #e2e8f0; padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 12px; white-space: pre; }
.ai-table-wrap { overflow-x: auto; margin: 4px 0 6px; }
.ai-table { border-collapse: collapse; font-size: 12px; }
.ai-table th, .ai-table td { border: 1px solid #e2e8f0; padding: 3px 6px; text-align: left; vertical-align: top; }
.ai-table th { background: #f1f5f9; }
.ai-outils { font-size: 11px; color: #64748b; margin-bottom: 6px; }
.ai-outils summary { cursor: pointer; }
.ai-outils ul { margin: 4px 0 0; padding-left: 18px; }
.ai-sources { font-size: 11px; color: #64748b; margin-top: 6px; }
.ai-sources a { color: #1d4ed8; }

/* Articles cités : vignettes photo (2026-11-06). */
.ai-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 8px; }
.ai-art { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.ai-art-img { width: 100%; height: 96px; object-fit: contain; background: #f8fafc; cursor: zoom-in; display: block; }
.ai-art-sans { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #94a3b8; font-size: 11px; cursor: default; }
.ai-art-sans i { font-size: 22px; }
.ai-art-txt { border: 0; border-top: 1px solid #f1f5f9; background: none; text-align: left; padding: 5px 7px; cursor: pointer; font-size: 11px; color: #334155; display: flex; flex-direction: column; gap: 2px; }
.ai-art-txt:hover { background: #eff6ff; }
.ai-art-txt b { color: #3730a3; font-size: 11.5px; overflow-wrap: anywhere; }
.ai-art-txt span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ai-photo-ov { position: fixed; inset: 0; z-index: 14000; background: rgba(15, 23, 42, .75); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.ai-photo { position: relative; margin: 0; background: #fff; border-radius: 10px; padding: 14px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ai-photo img { max-width: calc(90vw - 28px); max-height: calc(90vh - 60px); object-fit: contain; }
.ai-photo figcaption { font-size: 12px; color: #334155; font-weight: 600; }
.ai-photo-x { position: absolute; top: 4px; right: 8px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #475569; }

.ai-devis { margin-top: 8px; padding: 8px 10px; border: 1px solid #93c5fd; background: #eff6ff; border-radius: 8px; }
.ai-devis-t { font-weight: 700; color: #1e3a8a; }
.ai-devis-t i { margin-right: 5px; }
.ai-devis-d { color: #334155; font-size: 12px; margin-top: 2px; }
.ai-devis-etat { font-size: 12px; margin-top: 4px; color: #166534; }
.ai-devis-etat:empty { display: none; }
.ai-devis-err { color: #b91c1c; }
.ai-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 12px; border: 1px solid #1e40af;
    border-radius: 6px; background: #1e40af; color: #fff; font-size: 12px; cursor: pointer;
}
.ai-btn[hidden] { display: none; }

.ai-histo-titre { font-weight: 700; color: #1e40af; margin-bottom: 2px; }
.ai-histo {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid #e2e8f0;
    border-radius: 6px; background: #fff; cursor: pointer;
}
.ai-histo:hover { background: #eff6ff; border-color: #93c5fd; }
/* Ligne d'historique + bouton de suppression (2026-11-06). */
.ai-histo-l { display: flex; gap: 6px; align-items: stretch; }
.ai-histo-l .ai-histo { flex: 1; min-width: 0; }
.ai-histo-suppr { border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #94a3b8; cursor: pointer; padding: 0 10px; }
.ai-histo-suppr:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.ai-histo-t { font-weight: 600; color: #1e293b; }
.ai-histo-d { font-size: 11px; color: #64748b; }

.ai-pied { border-top: 1px solid #e2e8f0; padding: 8px 10px 6px; background: #fff; }
.ai-joint { font-size: 12px; color: #1e3a8a; background: #eff6ff; border-radius: 5px; padding: 3px 6px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ai-joint[hidden] { display: none; }
.ai-saisie { display: flex; align-items: flex-end; gap: 6px; }
.ai-saisie textarea {
    flex: 1; resize: vertical; min-height: 54px; max-height: 40vh; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px;
    font: inherit; color: #1e293b;
}
.ai-saisie textarea:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }
.ai-ibtn { background: none; border: 0; color: #475569; cursor: pointer; font-size: 15px; padding: 6px; border-radius: 4px; }
.ai-ibtn:hover { background: #f1f5f9; }
/* Micro (2026-11-06) : rouge et pulsé quand il écoute. */
.ai-mic.ai-mic-on { color: #fff; background: #dc2626; animation: aiMic 1.2s ease-in-out infinite; }
@keyframes aiMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }
.ai-envoyer { background: #1e40af; color: #fff; border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.ai-occupe .ai-envoyer { opacity: .5; cursor: wait; }
.ai-info { font-size: 11px; color: #64748b; margin-top: 4px; min-height: 14px; }
.ai-info-err { color: #b91c1c; }

@media (max-width: 600px) { .ai-panel { width: 100vw; } }