<aside
  class="drawer"
  [class.drawer-open]="isOpen"
  [class.is-resizing]="isResizing"
  [class.is-wide]="isWide"
  [style.width.px]="effectiveWidth"
  aria-label="Assistant IA">

  <!-- Poignee de redimensionnement (desactivee en mode wide) -->
  @if (!isWide) {
    <div
      class="resize-handle"
      (mousedown)="onResizeStart($event)"
      role="separator"
      aria-orientation="vertical"
      aria-label="Redimensionner le panneau"
    title="Glisser pour redimensionner"></div>
  }


  <!-- Sidebar conversations (mode persistent uniquement) -->
  @if (persistent && sidebarOpen) {
    <section class="conv-sidebar" aria-label="Conversations">
      <div class="conv-sidebar-header">
        <span class="conv-sidebar-title">Conversations</span>
        <button type="button" class="conv-new-btn" (click)="startNewConversation()" [disabled]="isStreaming" title="Nouvelle conversation">
          <lucide-icon [img]="MessageSquarePlus" [size]="16"></lucide-icon>
        </button>
      </div>
      <ul class="conv-list">
        @if (conversations.length === 0) {
          <li class="conv-empty">Aucune conversation</li>
        }
        @for (c of conversations; track c) {
          <li
            class="conv-item"
            [class.active]="c.id === currentConversationId"
            (click)="selectConversation(c)">
            <span class="conv-item-title">{{ c.title }}</span>
            <button
              type="button"
              class="conv-item-del"
              (click)="deleteConversation(c, $event)"
              [disabled]="isStreaming"
              title="Supprimer">
              <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
            </button>
          </li>
        }
      </ul>
    </section>
  }

  <section class="conv-main">

    <header class="drawer-header">
      @if (persistent) {
        <button
          type="button"
          class="sidebar-toggle"
          (click)="toggleSidebar()"
          [attr.aria-label]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'"
          [title]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'">
          <lucide-icon [img]="sidebarOpen ? PanelLeftClose : PanelLeftOpen" [size]="16"></lucide-icon>
        </button>
      }

      <div class="header-title-wrap">
        @if (persistent && currentConversationId) {
          @if (!editingTitle) {
            <h2 class="header-title" [title]="currentTitle">{{ currentTitle || 'Nouvelle conversation' }}</h2>
            <button type="button" class="rename-btn" (click)="startRenameTitle()" title="Renommer" aria-label="Renommer">
              <lucide-icon [img]="Pencil" [size]="12"></lucide-icon>
            </button>
          } @else {
            <input
              class="rename-input"
              type="text"
              [(ngModel)]="titleDraft"
              (keyup.enter)="submitRenameTitle()"
              (keyup.escape)="cancelRenameTitle()"
              (blur)="submitRenameTitle()"
              autofocus />
            }
          } @else {
            <h2 class="header-title">Assistant IA</h2>
          }
        </div>

        <button
          type="button"
          class="wide-toggle-btn"
          (click)="toggleWide()"
          [attr.aria-label]="isWide ? 'Reduire le panneau' : 'Agrandir le panneau'"
          [title]="isWide ? 'Reduire' : 'Agrandir'">
          <lucide-icon [img]="isWide ? Minimize2 : Maximize2" [size]="16"></lucide-icon>
        </button>

        <button type="button" class="close-btn" (click)="onClose()" aria-label="Fermer">
          <lucide-icon [img]="X" [size]="18"></lucide-icon>
        </button>
      </header>

      @if (usage) {
        <div class="context-gauge" [attr.data-level]="usageLevel"
          [attr.title]="'System: ' + usage.system + ' · Historique: ' + usage.history + ' · Courant: ' + usage.current + (usageHasMax ? ' / ' + usage.max : '') + ' tokens'">
          <!-- Barre seulement si on connaît le plafond (Ollama). Cloud : compteur seul. -->
          @if (usageHasMax) {
            <div class="gauge-bar">
              <div class="gauge-fill" [style.width.%]="usagePercent"></div>
            </div>
          }
          <div class="gauge-label">
            <span class="gauge-text">Contexte : {{ usageTotal }}@if (usageHasMax) {
              / {{ usage.max }}
            } tokens</span>
            @if (usageHasMax) {
              <span class="gauge-percent">{{ usagePercent }}%</span>
            }
          </div>
        </div>
      }

      <div #messagesContainer class="messages">
        @if (messages.length === 0 && !currentAssistantText) {
          <div class="msg msg-assistant md"
            [innerHTML]="welcomeMessage | markdown">
          </div>
        }

        @for (m of messages; track m) {
          @if (m.role === 'user') {
            <div class="msg msg-user">{{ m.content }}</div>
          }
          @if (m.role === 'assistant') {
            <div class="msg msg-assistant md"
            [innerHTML]="m.content | markdown"></div>
          }
        }

        @if (currentAssistantText) {
          <div class="msg msg-assistant msg-streaming md">
            <span [innerHTML]="currentAssistantText | markdown"></span><span class="caret"></span>
          </div>
        }

        @if (isStreaming && !currentAssistantText) {
          <div class="typing-indicator" aria-live="polite">
            <span></span><span></span><span></span>
          </div>
        }

        @if (errorMessage) {
          <div class="msg msg-error" role="alert">
            {{ errorMessage }}
          </div>
        }
      </div>

      @if (primaryAction) {
        <div class="primary-action">
          <button
            type="button"
            class="primary-btn"
            (click)="onPrimaryAction()"
            [disabled]="isStreaming">
            <lucide-icon [img]="Wand2" [size]="14"></lucide-icon>
            {{ primaryAction.label }}
          </button>
        </div>
      }

      @if (quickSuggestions.length) {
        <div class="quick-suggestions">
          <p class="quick-label">Suggestions rapides :</p>
          <div class="quick-list">
            @for (s of quickSuggestions; track s) {
              <button
                type="button"
                class="quick-btn"
                (click)="useQuickSuggestion(s)"
                [disabled]="isStreaming">
                <lucide-icon [img]="Lightbulb" [size]="12"></lucide-icon>
                {{ s }}
              </button>
            }
          </div>
        </div>
      }

      <form class="input-row" (ngSubmit)="send()">
        <input
          type="text"
          [(ngModel)]="input"
          name="chatInput"
          placeholder="Posez une question..."
          [disabled]="isStreaming"
          autocomplete="off" />
          <button type="submit" class="send-btn" [disabled]="!input.trim() || isStreaming" aria-label="Envoyer">
            <lucide-icon [img]="Send" [size]="16"></lucide-icon>
          </button>
        </form>

      </section>
    </aside>
