@if (detail) {
  <div class="nbd-page">
    <div class="nbd-toolbar">
      <button class="btn-back" (click)="back()">
        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Ateliers
      </button>
      <input class="nbd-title" [(ngModel)]="detail.name" (blur)="rename()" (keyup.enter)="rename()">
    </div>
    <div class="nbd-grid">
      <!-- Sources -->
      <aside class="nbd-sources">
        <div class="nbd-sources-head">
          <h3><lucide-icon [img]="FileText" [size]="15"></lucide-icon> Sources</h3>
          <label class="btn-upload" [class.disabled]="uploading">
            <lucide-icon [img]="Upload" [size]="13"></lucide-icon>
            {{ uploading ? 'Indexation…' : 'Ajouter un PDF' }}
            <input type="file" accept="application/pdf" hidden (change)="onFile($event)" [disabled]="uploading">
          </label>
        </div>
        @if (uploadError) {
          <p class="nbd-upload-error">{{ uploadError }}</p>
        }
        @if (readySourceCount > 1) {
          <p class="nbd-sources-hint"
            [class.partial]="selectedSourceIds.size < readySourceCount">
            {{ selectedSourceIds.size }}/{{ readySourceCount }} source(s) utilisée(s) par le chat et l'analyse approfondie
          </p>
        }
        @for (s of sources; track s) {
          <div class="nbd-source" [class.nbd-source--off]="s.status === 'READY' && !isSelected(s)">
            @if (s.status === 'READY') {
              <input
                type="checkbox"
                class="nbd-source-check"
                [checked]="isSelected(s)"
                (change)="toggleSource(s)"
                [title]="isSelected(s)
                  ? 'Source utilisée par le chat — décocher pour l\'exclure'
                  : 'Source ignorée par le chat — cocher pour l\'inclure'" />
            } @else {
              <lucide-icon
                [img]="s.status === 'FAILED' ? AlertCircle : Loader"
                [size]="14"
                [class.fail]="s.status === 'FAILED'" [class.busy]="s.status === 'INDEXING'">
              </lucide-icon>
            }
            <div class="nbd-source-info">
              <div class="nbd-source-name">{{ s.filename }}</div>
              <div class="nbd-source-meta">
                @if (s.status === 'READY') {
                  <span>{{ s.pageCount }} p. · {{ s.chunkCount }} extraits</span>
                }
                @if (s.status === 'INDEXING') {
                  <span>indexation en cours…</span>
                }
                @if (s.status === 'FAILED') {
                  <span>échec de l'indexation</span>
                }
              </div>
            </div>
            <button class="nbd-source-del" (click)="removeSource(s)" title="Supprimer">
              <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
            </button>
          </div>
        }
        @if (sources.length === 0 && !uploading) {
          <p class="nbd-empty">
            Ajoute un PDF source pour commencer à discuter avec.
          </p>
        }
      </aside>
      <!-- Chat -->
      <section class="nbd-chat">
        <!-- Barre d'actions du chat : archives + vider -->
        <div class="nbd-chat-head">
          @if (viewingArchive) {
            <span class="nbd-archive-banner">
              <lucide-icon [img]="History" [size]="13"></lucide-icon>
              Archive du {{ archiveLabel(viewingArchive) }} — lecture seule
            </span>
            <button type="button" class="nbd-chat-btn" (click)="closeArchive()">
              <lucide-icon [img]="X" [size]="13"></lucide-icon>
              Revenir au chat
            </button>
          } @else {
            @if (referencedArchiveIds.size > 0) {
              <span class="nbd-ref-badge"
                title="Le contenu de ces archives est injecté comme référence dans chaque question">
                <lucide-icon [img]="History" [size]="12"></lucide-icon>
                {{ referencedArchiveIds.size }} archive(s) en référence
              </span>
            }
            <span class="nbd-chat-head-spacer"></span>
            <button type="button" class="nbd-chat-btn" (click)="toggleArchives()"
              [class.active]="archivesOpen"
              title="Conversations archivées (lecture seule + référence)">
              <lucide-icon [img]="History" [size]="13"></lucide-icon>
              Archives
            </button>
            <button type="button" class="nbd-chat-btn nbd-chat-btn--danger" (click)="clearChat()"
              [disabled]="sending || messages.length === 0"
              title="Vider la conversation (le fil actuel est archivé, pas supprimé)">
              <lucide-icon [img]="Eraser" [size]="13"></lucide-icon>
              Vider
            </button>
          }
        </div>
        <!-- Panneau des archives -->
        @if (archivesOpen && !viewingArchive) {
          <div class="nbd-archives">
            @if (archives.length === 0) {
              <p class="nbd-empty">Aucune conversation archivée pour l'instant — « Vider » archive le fil courant ici.</p>
            } @else {
              <p class="nbd-archives-help">
                Cochez une archive pour l'utiliser comme <strong>référence</strong> dans le chat ;
                cliquez sur son nom pour la relire.
              </p>
            }
            @for (a of archives; track a.archivedAt) {
              <div class="nbd-archive-row" [class.referenced]="isReferenced(a)">
                <input
                  type="checkbox"
                  class="nbd-archive-check"
                  [checked]="isReferenced(a)"
                  (change)="toggleReference(a)"
                  [title]="isReferenced(a)
                    ? 'Archive utilisée comme référence — décocher pour la retirer'
                    : 'Utiliser cette archive comme référence dans le chat'" />
                <button type="button" class="nbd-archive-item" (click)="openArchive(a)">
                  <lucide-icon [img]="History" [size]="13"></lucide-icon>
                  {{ archiveLabel(a) }}
                </button>
              </div>
            }
          </div>
        }
        <div class="nbd-messages">
          @if (viewingArchive) {
            <!-- Archive en lecture seule -->
            @for (m of viewingArchive.messages; track $index) {
              <div class="nbd-msg" [class.user]="m.role === 'user'" [class.assistant]="m.role === 'assistant'">
                <div class="nbd-msg-role">
                  @if (m.role === 'assistant') {
                    <lucide-icon [img]="Sparkles" [size]="12"></lucide-icon>
                  }
                  {{ m.role === 'user' ? 'Vous' : 'IA' }}
                </div>
                @if (m.role === 'assistant') {
                  <div class="nbd-msg-content md" [innerHTML]="m.content | markdown"></div>
                } @else {
                  <div class="nbd-msg-content">{{ m.content }}</div>
                }
              </div>
            }
          } @else {
            @if (messages.length === 0) {
              <p class="nbd-empty">
                Pose une question sur ta source, ou demande une adaptation pour ta campagne.
                @if (!hasReadySource()) {
                  <span><br>(Ajoute d'abord une source indexée pour des réponses ancrées.)</span>
                }
              </p>
            }
            @for (m of messages; track m) {
              <div class="nbd-msg" [class.user]="m.role === 'user'" [class.assistant]="m.role === 'assistant'">
                <div class="nbd-msg-role">
                  @if (m.role === 'assistant') {
                    <lucide-icon [img]="Sparkles" [size]="12"></lucide-icon>
                  }
                  {{ m.role === 'user' ? 'Vous' : 'IA' }}
                </div>
                @if (m.role === 'assistant') {
                  @if (parsedOf(m); as p) {
                    @if (sending && deepProgress && !p.text) {
                      <div class="nbd-deep-progress">
                        <lucide-icon [img]="Layers" [size]="13"></lucide-icon>
                        Analyse approfondie du document… {{ deepProgress.current }}/{{ deepProgress.total }}
                      </div>
                    }
                    @if (p.text) {
                      <div class="nbd-msg-content md" [innerHTML]="p.text | markdown"></div>
                    } @else if (sending && !p.actions.length && !deepProgress) {
                      <div class="nbd-msg-content"><span class="cursor">▌</span></div>
                    }
                    @for (a of p.actions; track $index) {
                      <app-notebook-action-card
                        [action]="a"
                        [campaignId]="campaignId"
                        [arcs]="arcs"
                        [chaptersByArc]="chaptersByArc"
                        (created)="onActionCreated()">
                      </app-notebook-action-card>
                    }
                    @if (sourcesLabel(m); as label) {
                      <div class="nbd-msg-sources" title="Pages de la source utilisées pour ancrer cette réponse">
                        📖 {{ label }}
                      </div>
                    }
                  }
                } @else {
                  <div class="nbd-msg-content">{{ m.content }}</div>
                }
              </div>
            }
          }
        </div>
        @if (!viewingArchive) {
        <div class="nbd-input">
          <textarea [(ngModel)]="draft" rows="2"
            placeholder="Demande une adaptation, un résumé, un PNJ inspiré de la source…"
          (keydown.enter)="$event.preventDefault(); send()"></textarea>
          <button class="btn-deep" (click)="send(true)" [disabled]="sending || !draft.trim()"
            title="Analyse approfondie : lit TOUT le document (plus lent, exhaustif). Idéal pour « liste tous les… »">
            <lucide-icon [img]="Layers" [size]="15"></lucide-icon>
          </button>
          <button class="btn-send" (click)="send()" [disabled]="sending || !draft.trim()"
            title="Réponse rapide (recherche ciblée dans le document)">
            <lucide-icon [img]="Send" [size]="15"></lucide-icon>
          </button>
        </div>
        }
      </section>
    </div>
  </div>
}