Composeur : bandeaux au-dessus de la carte, chrono du tour, anneau réparé

Trois défauts d'affichage, une cause commune pour deux d'entre eux.

Le panneau des critères et la puce « mode Code » étaient insérés AVANT
#composer, qui est en position:absolute : ils restaient dans le flux de
la page et passaient donc SOUS la carte de saisie. Ils vivent maintenant
DANS le composeur, alignés sur sa colonne, et les critères s'ouvrent
repliés (cinq lignes dépliées mangeaient la moitié de l'écran).

Chrono du tour complet au-dessus de la carte : le temps entre l'envoi du
message et le moment où l'on peut reparler — appels d'outils, passes de
vérification et compaction compris. Les durées portées par les cartes ne
mesurent que la génération de texte ; celle-ci répond à « ça a pris
combien de temps, en tout ? ». Il avance à la seconde puis se fige sur le
total.

Anneau d'activité de la liste des discussions : l'animation portait sur
le <svg>, dont l'origine de rotation dépend de transform-box — défaut
qui a changé au fil des versions, d'où un anneau figé. Elle porte
désormais sur le conteneur HTML, qui tourne partout.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

internal/loki/ui/src/styles.css

@@ -1632,12 +1632,18 @@ html[data-files="1"] #files-btn{color:var(--accent)}
    écrasait le titre, exactement comme l'heure avant lui. */
 .preset>.conv-spin,#topbar>.conv-spin{flex:none;display:inline-flex;align-items:center;
   justify-content:center;line-height:0;color:var(--accent)}
-.conv-spin svg{animation:conv-spin 900ms linear infinite}
+/* L'animation porte sur le CONTENEUR (élément HTML), pas sur le <svg> : sur un
+   élément SVG, l'origine de la rotation dépend de transform-box, dont le défaut
+   a changé au fil des versions — l'anneau restait figé chez certains. Un span
+   inline-flex tourne partout, sans ambiguïté. Les deux propriétés restent
+   posées sur le svg pour le cas où une règle le viserait encore. */
+.conv-spin{animation:conv-spin 900ms linear infinite;transform-origin:center}
+.conv-spin svg{transform-box:fill-box;transform-origin:center}
 @keyframes conv-spin{to{transform:rotate(360deg)}}
 /* Mouvement réduit : l'anneau ne tourne plus mais respire — l'information reste,
    le mouvement de rotation disparaît. */
 @media (prefers-reduced-motion:reduce){
-  .conv-spin svg{animation:conv-breathe 1.6s ease-in-out infinite}
+  .conv-spin{animation:conv-breathe 1.6s ease-in-out infinite}
   @keyframes conv-breathe{0%,100%{opacity:1}50%{opacity:.25}}
 }
 /* Dans l'en-tête, l'anneau précède le titre : même gabarit que les boutons
@@ -1971,17 +1977,30 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 #mode-seg button.on{background:var(--accent-bg);color:var(--accent)}
 #mode-seg button:not(.on):hover{color:var(--text)}
 
-#code-hint{display:flex;align-items:center;gap:8px;margin:0 auto 6px;max-width:820px;padding:6px 10px;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:3px;background:var(--panel);color:var(--dim);font-size:12px}
+/* Bandeaux du composeur (chrono du tour, puce mode code, critères). Ils vivent
+   DANS #composer — qui est en position:absolute — et suivent donc sa colonne
+   (--col). Posés avant lui dans le DOM, ils restaient dans le flux de la page
+   et disparaissaient SOUS la carte de saisie. */
+.composer-banner{margin:0 var(--col) 6px;padding:6px 12px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--dim);font-size:12px;font-family:var(--mono)}
+#turn-clock{display:flex;align-items:center;gap:6px;letter-spacing:.03em}
+#turn-clock::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:tcpulse 1.4s ease-in-out infinite}
+#turn-clock.done{color:var(--accent)}
+#turn-clock.done::before{animation:none;opacity:.6}
+@keyframes tcpulse{0%,100%{opacity:.25}50%{opacity:1}}
+
+#code-hint{display:flex;align-items:center;gap:8px;font-size:12px}
 #code-hint button{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:3px;padding:2px 8px;font-size:12px;cursor:pointer;font-family:inherit}
 #code-hint button:hover{background:var(--accent-bg)}
 #code-hint #code-hint-no{border-color:var(--border);color:var(--dim);margin-left:auto}
 
-#criteria-box{margin:0 auto 6px;max-width:820px;border:1px solid var(--border);border-radius:3px;background:var(--panel);font-size:12px;overflow:hidden}
-#criteria-box.allpass{border-left:2px solid var(--accent)}
-#criteria-head{padding:5px 10px;color:var(--dim);cursor:pointer;user-select:none;letter-spacing:.03em}
+#criteria-box{padding:0;overflow:hidden;max-height:38vh;overflow-y:auto}
+#criteria-box.allpass{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
+#criteria-head{padding:6px 12px;color:var(--dim);cursor:pointer;user-select:none;letter-spacing:.03em;position:sticky;top:0;background:var(--panel)}
+#criteria-head::after{content:' ▾';opacity:.5}
+#criteria-box.folded #criteria-head::after{content:' ▸'}
 #criteria-box.allpass #criteria-head{color:var(--accent)}
 #criteria-box.folded #criteria-list{display:none}
-#criteria-list{list-style:none;margin:0;padding:0 10px 6px}
+#criteria-list{list-style:none;margin:0;padding:0 12px 8px}
 #criteria-list li{padding:2px 0;color:var(--text)}
 #criteria-list li.crit-passed{color:var(--accent)}
 #criteria-list li.crit-failed{color:var(--err,#b3564d)}