:root { --fond:#f7f6f3; --carte:#fff; --texte:#1f1e1c; --doux:#6b6862; --bord:#e4e1da; --accent:#c96442; --moi:#efe9df; }
@media (prefers-color-scheme: dark) { :root { --fond:#1d1c1a; --carte:#262523; --texte:#ece9e3; --doux:#a29e96; --bord:#3a3835; --accent:#d97757; --moi:#33302c; } }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--fond); color:var(--texte); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; border:0; border-radius:10px; padding:.6em 1em; background:var(--accent); color:#fff; }
button:disabled { opacity:.5; cursor:default; }
button.lien { background:none; color:var(--doux); padding:0; text-decoration:underline; justify-self:start; }
input,textarea,select { font:inherit; color:var(--texte); background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:.6em .8em; }
#connexion { display:grid; place-items:center; height:100%; padding:16px; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:16px; padding:28px; width:100%; max-width:360px; display:grid; gap:14px; }
.carte h1 { margin:0; font-size:1.4em; }
.carte label { display:grid; gap:6px; font-size:.9em; color:var(--doux); }
.erreur { color:#c0392b; margin:0; min-height:1.2em; font-size:.9em; }
#app { display:flex; height:100%; }
#cote { width:270px; flex:none; border-right:1px solid var(--bord); display:flex; flex-direction:column; padding:12px; gap:10px; background:var(--carte); }
#liste { list-style:none; margin:0; padding:0; overflow:auto; flex:1; }
#liste li { display:flex; align-items:center; gap:4px; border-radius:8px; }
#liste li a { flex:1; padding:.5em .6em; color:inherit; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.92em; }
#liste li.active, #liste li:hover { background:var(--moi); }
#liste li button { background:none; color:var(--doux); padding:.2em .5em; }
#compte { border-top:1px solid var(--bord); padding-top:10px; font-size:.85em; color:var(--doux); display:grid; gap:6px; }
#compte p { margin:0; }
#jauge { height:6px; background:var(--bord); border-radius:3px; overflow:hidden; }
#jaugeRemplie { height:100%; width:0; background:var(--accent); }
main { flex:1; display:flex; flex-direction:column; min-width:0; }
header { display:flex; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--bord); }
#menu { display:none; background:none; color:var(--texte); font-size:1.3em; padding:0 .3em; }
#fil { flex:1; overflow:auto; padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
.msg { max-width:780px; width:100%; margin:0 auto; overflow-wrap:anywhere; }
.msg.user { background:var(--moi); border-radius:14px; padding:.7em 1em; white-space:pre-wrap; }
.msg.assistant pre { background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:12px; overflow:auto; }
.msg.assistant code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; }
.msg.assistant p { margin:.5em 0; }
#formMessage { display:flex; gap:10px; padding:12px 16px 16px; max-width:812px; width:100%; margin:0 auto; }
#texte { flex:1; resize:none; max-height:40vh; }
.msg .info { color:var(--doux); font-size:.8em; margin-top:4px; }
@media (max-width:720px) {
  #cote { position:fixed; inset:0 auto 0 0; z-index:5; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 30px rgba(0,0,0,.3); }
  #cote.ouvert { transform:none; }
  #menu { display:block; }
}