262 lines
16 KiB
CSS
262 lines
16 KiB
CSS
/* Panneau Spark — service d'agents (Fusion, J1 → Panneau v2 Lot 1).
|
||
Thème clair/sombre piloté par [data-draco-theme] sur le panneau :
|
||
le JS le cale sur le thème de l'app hôte (html[data-theme], repli
|
||
prefers-color-scheme) et suit les bascules en direct. Toutes les
|
||
couleurs passent par les variables ci-dessous — en-tête et fenêtre
|
||
partagent donc toujours le même mode. */
|
||
.draco-panneau {
|
||
--p-fond: #fbfbfa; --p-surface: #ffffff; --p-bord: #e4e5e0;
|
||
--p-texte: #242624; --p-doux: #6c7268; --p-faint: #8a8f84;
|
||
--p-chip: #f4f5f1; --p-chip-bord: #d6d8d1; --p-chip-survol: #e9ebe4;
|
||
--p-agent: #eef0ea; --p-champ: #ffffff; --p-code: #e8eae3;
|
||
--p-appro-fond: #fdf6ec; --p-danger-fond: #f6e3de; --p-danger: #a03a28;
|
||
--p-accent: #7c5cd6; --p-lien: #5b3df0;
|
||
position: fixed; top: 0; right: 0; height: 100dvh; width: 388px; max-width: 96vw;
|
||
background: var(--p-fond); color: var(--p-texte); z-index: 400;
|
||
box-shadow: -12px 0 36px rgb(0 0 0 / .22);
|
||
display: flex; flex-direction: column;
|
||
transform: translateX(105%); transition: transform .28s ease;
|
||
font: 14px/1.5 system-ui, "Segoe UI", sans-serif;
|
||
}
|
||
.draco-panneau[data-draco-theme="dark"] {
|
||
--p-fond: #17181a; --p-surface: #1f2023; --p-bord: #33353a;
|
||
--p-texte: #eceeeb; --p-doux: #a6aba0; --p-faint: #83887e;
|
||
--p-chip: #26272b; --p-chip-bord: #3a3c41; --p-chip-survol: #2e3036;
|
||
--p-agent: #26272b; --p-champ: #1f2023; --p-code: #2c2e33;
|
||
--p-appro-fond: #2a2118; --p-danger-fond: #40241f; --p-danger: #e8a08d;
|
||
--p-lien: #b39df5;
|
||
}
|
||
.draco-panneau.open { transform: translateX(0); }
|
||
.draco-poignee {
|
||
position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
|
||
cursor: ew-resize; z-index: 5; touch-action: none;
|
||
}
|
||
.draco-poignee:hover { background: color-mix(in srgb, var(--p-accent) 35%, transparent); }
|
||
@media (max-width: 700px) { .draco-poignee { display: none; } }
|
||
.draco-panneau-hd {
|
||
display: flex; align-items: center; gap: 9px;
|
||
padding: 13px 15px; border-bottom: 1px solid var(--p-bord); background: var(--p-surface);
|
||
}
|
||
.draco-panneau-titres { min-width: 0; flex: 1; }
|
||
.draco-panneau-hd .titre { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.draco-panneau-hd .soustitre {
|
||
font-size: 12px; color: var(--p-doux); display: flex; align-items: center; gap: 6px;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.draco-panneau-hd .soustitre .point { width: 8px; height: 8px; border-radius: 50%; background: #b9bdb2; flex: none; }
|
||
.draco-panneau-hd .soustitre.ok .point { background: #2ea36b; }
|
||
.draco-panneau-hd .soustitre.err .point { background: #cf4b32; }
|
||
.draco-panneau-hd .fermer {
|
||
margin-left: auto; border: 0; background: var(--p-agent); color: var(--p-texte);
|
||
border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; flex: none;
|
||
}
|
||
/* Barre des discussions (façon Muse) */
|
||
.draco-disc-bar {
|
||
display: flex; align-items: center; gap: 7px;
|
||
padding: 8px 15px; border-bottom: 1px solid var(--p-bord); background: var(--p-surface);
|
||
}
|
||
.draco-disc-bar .d-titre {
|
||
flex: 1; font-weight: 600; font-size: 13px; min-width: 0;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.draco-disc-bar .d-btn {
|
||
border: 1px solid var(--p-chip-bord); background: var(--p-chip); color: var(--p-texte);
|
||
border-radius: 999px; padding: 4px 10px; font: 600 12px system-ui; cursor: pointer; flex: none;
|
||
}
|
||
.draco-disc-bar .d-btn:hover { background: var(--p-chip-survol); }
|
||
.draco-discussions {
|
||
border-bottom: 1px solid var(--p-bord); background: var(--p-surface);
|
||
max-height: 46%; overflow-y: auto; padding: 8px 12px;
|
||
}
|
||
.draco-discussions .d-section {
|
||
font-size: 11px; font-weight: 700; text-transform: uppercase;
|
||
letter-spacing: .5px; color: var(--p-doux); margin: 8px 2px 4px;
|
||
}
|
||
.draco-discussions .d-section:first-child { margin-top: 0; }
|
||
.draco-discussions .d-item {
|
||
border: 1px solid transparent; border-radius: 9px; padding: 6px 8px; cursor: pointer;
|
||
}
|
||
.draco-discussions .d-item:hover { background: var(--p-chip); }
|
||
.draco-discussions .d-item.actif { border-color: var(--p-accent); background: var(--p-chip); }
|
||
.draco-discussions .d-meta { font-weight: 600; font-size: 13px; }
|
||
.draco-discussions .d-sous { font-size: 12px; color: var(--p-doux); }
|
||
.draco-discussions .d-actions { display: flex; gap: 6px; margin-top: 5px; }
|
||
.draco-discussions .d-actions button {
|
||
border: 1px solid var(--p-chip-bord); background: var(--p-surface); color: var(--p-texte);
|
||
border-radius: 7px; padding: 3px 9px; font: 600 11.5px system-ui; cursor: pointer;
|
||
}
|
||
.draco-discussions .d-actions button.danger { color: var(--p-danger); border-color: var(--p-danger-fond); }
|
||
.draco-discussions .d-vide, .draco-discussions .d-chargement {
|
||
font-size: 12.5px; color: var(--p-doux); padding: 2px 8px 6px;
|
||
}
|
||
.draco-panneau-outils { display: flex; gap: 8px; padding: 9px 15px; border-bottom: 1px solid var(--p-bord); background: var(--p-surface); }
|
||
.draco-panneau-outils button {
|
||
border: 1px solid var(--p-chip-bord); background: var(--p-chip); color: var(--p-texte);
|
||
border-radius: 999px; padding: 5px 12px; font: 600 12.5px system-ui; cursor: pointer;
|
||
}
|
||
.draco-panneau-outils button:hover { background: var(--p-chip-survol); }
|
||
.draco-appro {
|
||
align-self: stretch; background: var(--p-appro-fond); border: 1.6px solid #e8a13c;
|
||
border-radius: 12px; padding: 10px 12px;
|
||
}
|
||
.draco-appro .titre { font-weight: 700; font-size: 12px; color: #9a6a1c; text-transform: uppercase; letter-spacing: .4px; }
|
||
.draco-panneau[data-draco-theme="dark"] .draco-appro .titre { color: #e8bc7a; }
|
||
.draco-appro .resume { margin: 5px 0 8px; }
|
||
.draco-appro .btns { display: flex; gap: 7px; }
|
||
.draco-appro .btns button { border: 0; border-radius: 8px; padding: 6px 11px; font: 600 12.5px system-ui; cursor: pointer; background: var(--p-agent); color: var(--p-texte); }
|
||
.draco-appro .btns button.go { background: #2ea36b; color: #fff; }
|
||
.draco-auj { align-self: stretch; background: var(--p-surface); border: 1px solid var(--p-bord); border-radius: 12px; padding: 10px 12px; }
|
||
.draco-auj h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--p-doux); margin: 6px 0 4px; }
|
||
.draco-auj h5:first-child { margin-top: 0; }
|
||
.draco-auj ul { margin: 0; padding-left: 17px; }
|
||
.draco-auj .etat-source { color: var(--p-doux); font-size: 12.5px; }
|
||
.draco-panneau-msgs { flex: 1; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
|
||
.draco-msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; white-space: pre-wrap; word-wrap: break-word; }
|
||
.draco-msg.user { align-self: flex-end; background: #2f6fed; color: #fff; border-bottom-right-radius: 4px; }
|
||
.draco-msg.agent { align-self: flex-start; background: var(--p-agent); border-bottom-left-radius: 4px; }
|
||
.draco-msg.sys { align-self: center; background: none; color: var(--p-doux); font-size: 12.5px; text-align: center; max-width: 96%; }
|
||
.draco-panneau-ft { padding: 10px 12px 11px; background: var(--p-fond); }
|
||
/* Puces de suggestions, comme la console : au-dessus du composer. */
|
||
.draco-puces {
|
||
display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; padding: 0 2px 8px;
|
||
}
|
||
.draco-puces button {
|
||
border: 1px solid var(--p-chip-bord); background: var(--p-chip); color: var(--p-texte);
|
||
border-radius: 999px; padding: 5px 12px; font: 600 12.5px system-ui; cursor: pointer;
|
||
}
|
||
.draco-puces button:hover { background: var(--p-chip-survol); }
|
||
/* ── Composer façon console (pilule) ─────────────────────────
|
||
* ＋, textarea auto-extensible, micro ou envoi rond bleu ↑ ;
|
||
* pendant la dictée, la rangée d'enregistrement remplace la saisie. */
|
||
.draco-composer {
|
||
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
|
||
background: var(--p-surface); border: 1px solid var(--p-bord);
|
||
border-radius: 24px; padding: 8px 10px;
|
||
box-shadow: 0 1px 4px rgb(0 0 0 / .05);
|
||
}
|
||
.draco-composer [hidden] { display: none !important; }
|
||
.draco-composer-ligne { display: flex; align-items: flex-end; gap: 6px; }
|
||
.draco-composer textarea {
|
||
flex: 1; border: 0; background: none; resize: none; outline: none;
|
||
padding: 8px 2px; max-height: 152px; overflow-y: auto; line-height: 1.45;
|
||
min-height: calc(1.45em + 16px); font: inherit; color: var(--p-texte);
|
||
scrollbar-width: none;
|
||
}
|
||
.draco-composer textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }
|
||
.draco-composer .composer-btn {
|
||
width: 36px; height: 36px; border-radius: 50%; border: 0; flex: none;
|
||
background: var(--p-chip); color: var(--p-texte); font-size: 17px;
|
||
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
|
||
}
|
||
.draco-composer .composer-btn:hover { background: var(--p-chip-survol); }
|
||
.draco-composer .composer-btn.danger { color: var(--p-danger); }
|
||
.draco-composer .composer-envoi {
|
||
width: 36px; height: 36px; border-radius: 50%; border: 0; flex: none;
|
||
background: #2f6fed; color: #fff; font-size: 17px; font-weight: 700;
|
||
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
|
||
}
|
||
.draco-composer .composer-envoi:disabled { opacity: .5; }
|
||
.draco-composer .composer-btn .ic, .draco-composer .composer-envoi .ic { width: 19px; height: 19px; }
|
||
.draco-composer-pieces { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 0; }
|
||
.draco-composer-pieces .piece-carte {
|
||
position: relative; display: flex; align-items: center; gap: 8px;
|
||
background: var(--p-chip); border: 1px solid var(--p-chip-bord);
|
||
border-radius: 12px; padding: 5px 9px 5px 5px; max-width: 230px;
|
||
}
|
||
.draco-composer-pieces .piece-carte img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; display: block; }
|
||
.draco-composer-pieces .piece-nom { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.draco-composer-pieces .piece-doc-ext {
|
||
width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
|
||
background: var(--p-chip); border: 1px solid var(--p-chip-bord); border-radius: 8px;
|
||
}
|
||
.draco-composer-pieces .piece-ext { font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
|
||
.draco-composer-pieces .piece-retirer {
|
||
position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
|
||
border-radius: 50%; border: 0; background: var(--p-texte); color: var(--p-fond);
|
||
font-size: 10px; line-height: 1; padding: 0; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.draco-composer-enreg { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
|
||
.draco-composer-enreg .enreg-temps { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 36px; }
|
||
.draco-composer-enreg .enreg-texte {
|
||
flex: 1; min-width: 0; color: var(--p-doux); font-size: 13px;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.draco-composer-enreg .enreg-onde { display: flex; align-items: center; gap: 3px; height: 26px; flex: none; }
|
||
.draco-composer-enreg .enreg-onde span { width: 4px; height: 30%; border-radius: 2px; background: #2f6fed; }
|
||
.draco-composer.en-cours .enreg-onde span { animation: onde 1.05s ease-in-out infinite; }
|
||
.draco-composer-enreg .enreg-onde span:nth-child(3n+2) { animation-delay: .14s; }
|
||
.draco-composer-enreg .enreg-onde span:nth-child(3n) { animation-delay: .28s; }
|
||
@keyframes onde { 0%, 100% { height: 22%; } 50% { height: 96%; } }
|
||
/* Pièces jointes dans une bulle utilisateur */
|
||
.draco-msg-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
|
||
.draco-msg-pieces img { max-width: 150px; max-height: 120px; border-radius: 10px; display: block; }
|
||
.draco-msg-pieces .piece-fichier {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
background: var(--p-chip); border: 1px solid var(--p-chip-bord); color: var(--p-texte);
|
||
border-radius: 9px; padding: 6px 9px; font-size: 12px;
|
||
}
|
||
.draco-missions { align-self: stretch; background: var(--p-surface); border: 1px solid var(--p-bord); border-radius: 12px; padding: 10px 12px; }
|
||
.draco-missions h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--p-doux); margin: 0 0 6px; }
|
||
.draco-missions label { display: block; font-size: 12px; font-weight: 600; color: var(--p-doux); margin: 8px 0 3px; }
|
||
.draco-missions select, .draco-missions input, .draco-missions textarea {
|
||
width: 100%; box-sizing: border-box; border: 1px solid var(--p-chip-bord); border-radius: 8px;
|
||
padding: 7px 9px; font: inherit; font-size: 13px; background: var(--p-champ); color: var(--p-texte);
|
||
}
|
||
.draco-missions .btns { display: flex; gap: 7px; margin-top: 10px; }
|
||
.draco-missions .btns button { border: 0; border-radius: 8px; padding: 6px 11px; font: 600 12.5px system-ui; cursor: pointer; background: var(--p-agent); color: var(--p-texte); }
|
||
.draco-missions .btns button.go { background: var(--p-accent); color: #fff; }
|
||
.draco-missions .m-liste { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
|
||
.draco-missions .etat-source { color: var(--p-doux); font-size: 12.5px; }
|
||
.draco-missions .m-item { border: 1px solid var(--p-bord); border-radius: 10px; padding: 8px 10px; }
|
||
.draco-missions .m-entete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
|
||
.draco-missions .m-statut { font-size: 11.5px; font-weight: 700; color: var(--p-doux); white-space: nowrap; }
|
||
.draco-missions .m-statut.st-succeeded { color: #2ea36b; }
|
||
.draco-missions .m-statut.st-failed { color: #cf4b32; }
|
||
.draco-missions .m-statut.st-running, .draco-missions .m-statut.st-paused_question { color: #9a6a1c; }
|
||
.draco-missions .m-meta { font-size: 12px; color: var(--p-doux); }
|
||
.draco-missions .m-rapport { font-size: 12.5px; margin-top: 5px; white-space: pre-wrap; word-wrap: break-word; }
|
||
.draco-missions .m-annuler { margin-top: 6px; border: 0; border-radius: 7px; padding: 4px 9px; font: 600 12px system-ui; cursor: pointer; background: var(--p-danger-fond); color: var(--p-danger); }
|
||
/* ── Rendu Markdown (HTML produit par le service) ──────────── */
|
||
.draco-msg.md, .draco-missions .m-rapport.md { white-space: normal; }
|
||
.draco-msg.md > *:first-child, .m-rapport.md > *:first-child { margin-top: 0; }
|
||
.draco-msg.md > *:last-child, .m-rapport.md > *:last-child { margin-bottom: 0; }
|
||
.draco-msg.md p, .m-rapport.md p { margin: 6px 0; }
|
||
.draco-msg.md h1, .draco-msg.md h2, .draco-msg.md h3,
|
||
.draco-msg.md h4, .draco-msg.md h5, .draco-msg.md h6 { margin: 10px 0 4px; line-height: 1.3; }
|
||
.draco-msg.md h1 { font-size: 16.5px; } .draco-msg.md h2 { font-size: 15.5px; }
|
||
.draco-msg.md h3 { font-size: 14.5px; } .draco-msg.md h4,
|
||
.draco-msg.md h5, .draco-msg.md h6 { font-size: 13.5px; }
|
||
.draco-msg.md ul, .draco-msg.md ol, .m-rapport.md ul, .m-rapport.md ol { margin: 6px 0; padding-left: 20px; }
|
||
.draco-msg.md li, .m-rapport.md li { margin: 2px 0; }
|
||
.draco-msg.md code, .m-rapport.md code {
|
||
background: var(--p-code); border-radius: 5px; padding: 1px 5px;
|
||
font: 12.5px ui-monospace, "Cascadia Mono", Consolas, monospace;
|
||
}
|
||
.draco-msg.md pre, .m-rapport.md pre {
|
||
background: var(--p-code); border-radius: 9px; padding: 9px 11px;
|
||
overflow-x: auto; margin: 7px 0;
|
||
}
|
||
.draco-msg.md pre code, .m-rapport.md pre code { background: none; padding: 0; }
|
||
.draco-msg.md blockquote, .m-rapport.md blockquote {
|
||
border-left: 3px solid var(--p-accent); margin: 7px 0; padding: 2px 0 2px 11px;
|
||
color: var(--p-doux);
|
||
}
|
||
.draco-msg.md blockquote.callout, .m-rapport.md blockquote.callout {
|
||
border-radius: 0 8px 8px 0; padding: 6px 11px; color: var(--p-texte);
|
||
background: var(--p-chip);
|
||
}
|
||
.draco-msg.md blockquote.callout-warning { border-left-color: #e8a13c; }
|
||
.draco-msg.md blockquote.callout-danger { border-left-color: #cf4b32; }
|
||
.draco-msg.md blockquote.callout-tip { border-left-color: #2ea36b; }
|
||
.draco-msg.md a, .m-rapport.md a { color: var(--p-lien); }
|
||
.draco-msg.md table, .m-rapport.md table {
|
||
border-collapse: collapse; margin: 7px 0; font-size: 12.5px;
|
||
display: block; overflow-x: auto; max-width: 100%;
|
||
}
|
||
.draco-msg.md th, .draco-msg.md td, .m-rapport.md th, .m-rapport.md td {
|
||
border: 1px solid var(--p-bord); padding: 4px 8px; text-align: left;
|
||
}
|
||
.draco-msg.md hr, .m-rapport.md hr { border: 0; border-top: 1px solid var(--p-bord); margin: 9px 0; }
|
||
.draco-msg.md input[type="checkbox"], .m-rapport.md input[type="checkbox"] { margin-right: 5px; }
|