feat(assistant): #91 etapes enrichies (sous-sections Reflechon/Sources, chevrons, indicateur anime, suppression barre de chargement)

frontend/style.css

@@ -9421,19 +9421,19 @@ body.popup-mode .content-area {
 .bookslm-status .bookslm-context-bar { flex: 1; height: 4px; border-radius: 2px;
   background: var(--surface2); overflow: hidden; }
 .bookslm-status .bookslm-context-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s; }
-/* Assistant activity indicator (visual workflow: sending/streaming/tools/done/error). */
-.bookslm-activity { display: flex; align-items: center; gap: 8px; padding: 6px 16px;
-  font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border);
-  background: var(--bg-secondary); }
-.bookslm-activity.hidden { display: none; }
-.bookslm-activity.error { color: #f87171; }
-.bookslm-activity.done { color: var(--success, #3fb950); }
-.bookslm-activity-spinner { width: 12px; height: 12px; border: 2px solid var(--border);
-  border-top-color: var(--accent); border-radius: 50%; flex-shrink: 0;
-  animation: bookslm-spin 0.8s linear infinite; }
-.bookslm-activity.done .bookslm-activity-spinner,
-.bookslm-activity.error .bookslm-activity-spinner { animation: none; border-top-color: currentColor; }
-@keyframes bookslm-spin { to { transform: rotate(360deg); } }
+/* Assistant activity — no loading bar above the composer anymore: in agent
+   mode the animated dots sit in the steps header (« ●●● 3 étapes ▶ »), in
+   plain chat they sit in the pending answer. Pure CSS, reduced-motion aware. */
+.bookslm-dots { display: inline-flex; align-items: center; gap: 2px; }
+.bookslm-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
+  opacity: 0.25; animation: bookslm-dot 1.2s ease-in-out infinite; }
+.bookslm-dots i:nth-child(2) { animation-delay: 0.15s; }
+.bookslm-dots i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes bookslm-dot {
+  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-2px); }
+}
+.bookslm-pending { display: flex; align-items: center; height: 20px; color: var(--text-secondary); }
 /* Notion-style AI thread: only this zone scrolls; entries stack vertically
    with generous spacing. The latest user post is anchored to the top of the
    visible area on send: the post is anchored flush at the top (block:start,
@@ -9497,16 +9497,50 @@ body.popup-mode .content-area {
 .bookslm-action-apply:not(:disabled):hover { filter: brightness(1.08); }
 /* Agent-mode toggle in the header. */
 .bookslm-header button.bookslm-btn-agent.active { color: var(--accent); background: var(--surface2); }
-/* Tool-call trace shown above an assistant answer (agent mode). */
-/* Agent tool calls collapse into a discreet “N steps” line (Notion-style). */
+/* Tool-call trace shown above an assistant answer (agent mode).
+   The header is the live indicator (« ●●● 3 étapes ▶ »); expanding it reveals
+   the chronological steps, thinking notes as « Réflexion » sub-sections and
+   web sources as clickable links. */
 .bookslm-tool-trace { margin: 0 0 8px; }
-.bookslm-tool-trace summary { font-size: 11px; color: var(--text-secondary);
-  cursor: pointer; user-select: none; list-style: none; }
-.bookslm-tool-trace summary::before { content: '> '; }
-.bookslm-tool-trace[open] summary { margin-bottom: 4px; }
-.bookslm-tool-trace .bookslm-tool-line { padding-left: 12px; }
-.bookslm-tool-line { font-size: 11px; color: var(--text-secondary); }
+.bookslm-tool-trace > summary { display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--text-secondary); cursor: pointer; user-select: none;
+  list-style: none; padding: 2px 0; }
+.bookslm-tool-trace > summary::-webkit-details-marker { display: none; }
+.bookslm-tool-trace > summary:hover { color: var(--text-primary); }
+.bookslm-tool-trace[open] > summary { margin-bottom: 4px; }
+.bookslm-steps-dots { color: var(--accent); }
+.bookslm-steps-body { display: flex; flex-direction: column; gap: 3px; }
+.bookslm-chevron { font-size: 8px; line-height: 1; opacity: 0.7; }
+.bookslm-chevron::before { content: '▶'; }
+details[open] > summary .bookslm-chevron::before { content: '▼'; }
+.bookslm-thought { margin-left: 12px; }
+.bookslm-thought > summary { display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; color: var(--text-secondary); cursor: pointer; user-select: none;
+  list-style: none; }
+.bookslm-thought > summary::-webkit-details-marker { display: none; }
+.bookslm-thought > summary:hover { color: var(--text-primary); }
+.bookslm-thought-text { margin: 4px 0 6px 6px; padding-left: 9px;
+  border-left: 2px solid var(--border); font-size: 11.5px; line-height: 1.5;
+  color: var(--text-secondary); font-style: italic; white-space: pre-wrap;
+  word-break: break-word; }
+.bookslm-web-sources { margin-left: 12px; }
+.bookslm-web-sources > summary { display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; color: var(--text-secondary); cursor: pointer; user-select: none;
+  list-style: none; }
+.bookslm-web-sources > summary::-webkit-details-marker { display: none; }
+.bookslm-web-sources > summary:hover { color: var(--text-primary); }
+.bookslm-web-sources-list { list-style: none; margin: 4px 0 6px 6px; padding: 0;
+  display: flex; flex-direction: column; gap: 3px; border-left: 2px solid var(--border);
+  padding-left: 9px; }
+.bookslm-web-sources-list a { font-size: 11px; color: var(--accent);
+  text-decoration: none; word-break: break-word; }
+.bookslm-web-sources-list a::before { content: '↗ '; opacity: 0.7; }
+.bookslm-web-sources-list a:hover { text-decoration: underline; }
+.bookslm-tool-line { font-size: 11px; color: var(--text-secondary); padding-left: 12px; }
 .bookslm-tool-line.failed { color: #f87171; }
+@media (prefers-reduced-motion: reduce) {
+  .bookslm-dots i { animation: none; opacity: 0.6; }
+}
 /* Mutation confirmation card (two-step propose/apply). */
 .bookslm-confirm { flex-wrap: wrap; }
 .bookslm-confirm-diff { flex-basis: 100%; width: 100%; margin-top: 4px; }