/* ============================================================
   agent-components.css — Composant « Agent IA » (chat)
   ------------------------------------------------------------
   Partagé par ai-agent (AI.biza) et connect-agent (Connect).
   Ex style-standard.css, tokenisé : un seul jeu de règles qui
   s'adapte clair/sombre via les tokens (pas de bloc dark dédié).
   L'accent suit le produit (data-product) via --accent.
   À charger après le product-*.css de la page.
   ============================================================ */

.agent-chat-container { height: calc(100vh - 80px); background: var(--c-surface); border-radius: var(--radius-lg); }
.agent-messages { scroll-behavior: smooth; }

/* Avatars */
.agent-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.agent-message-user .agent-avatar { background: var(--accent); color: var(--accent-contrast); }
.agent-message-assistant .agent-avatar { background: var(--c-info); color: #fff; }
.agent-message-error .agent-avatar { background: var(--c-danger); color: #fff; }

/* Bulles */
.agent-bubble { max-width: 85%; }
.agent-message-user .agent-bubble { background: var(--accent-soft); color: var(--c-text); border-radius: 1rem 1rem 0.25rem 1rem; padding: 0.75rem 1rem; }
.agent-message-assistant .agent-bubble { background: var(--c-surface-2); color: var(--c-text); border-radius: 1rem 1rem 1rem 0.25rem; padding: 0.75rem 1rem; }
.agent-message-error .agent-bubble { background: var(--c-danger-soft); color: var(--c-danger); border-radius: 1rem; padding: 0.75rem 1rem; }
.agent-content { line-height: 1.5; word-break: break-word; }

/* Appels d'outils */
.agent-tool-call { padding: 0.4rem 0.75rem; background: var(--c-info-soft); border-left: 3px solid var(--c-info); border-radius: var(--radius-sm); margin-left: 42px; }
.agent-tool-result { padding: 0.4rem 0.75rem; background: var(--c-success-soft); border-left: 3px solid var(--c-success); border-radius: var(--radius-sm); margin-left: 42px; }
.agent-tool-error { background: var(--c-danger-soft); border-left-color: var(--c-danger); }
/* Bloc de sortie « terminal » : sombre dans les deux thèmes (intentionnel) */
.agent-result-pre { background: #1e293b; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.75rem; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* Carte d'approbation + zone de saisie */
.agent-approval-card .card { border-width: 2px; }
.agent-input-area { background: var(--c-surface); }
.agent-input-area .form-control { border-radius: 1.5rem; padding: 0.6rem 1.2rem; }
.agent-input-area .btn { border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }

/* Points « en train d'écrire » */
.agent-dots { display: flex; gap: 4px; padding: 0.5rem 0; }
.agent-dots span { width: 8px; height: 8px; background: var(--c-info); border-radius: 50%; animation: agentBounce 1.4s ease-in-out infinite; }
.agent-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agentBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* Historique */
.agent-history-list { max-height: calc(100vh - 200px); overflow-y: auto; }
.agent-history-item { cursor: pointer; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: background 0.15s; border-bottom: 1px solid var(--c-border); }
.agent-history-item:hover { background: var(--accent-soft); }
.agent-history-item.active { background: var(--accent-soft); font-weight: var(--fw-medium); }

/* Templates / résultats */
.agent-template-item { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.agent-template-item:hover { background: var(--accent-soft); border-color: var(--accent) !important; }
.agent-result-item { cursor: pointer; transition: background 0.15s; }
.agent-result-item:hover { background: var(--accent-soft); }
.agent-result-unread { background: var(--c-warning-soft); border-left: 3px solid var(--c-warning); }
.agent-result-unread:hover { background: var(--c-warning-soft); }
.agent-unread-dot { width: 8px; height: 8px; background: var(--c-danger); border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Détail des étapes */
.agent-detail-step { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); }
.agent-detail-user { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.agent-detail-assistant { background: var(--c-surface-2); border-left: 3px solid var(--c-info); }
.agent-detail-text { line-height: 1.6; word-break: break-word; }
.agent-detail-tool { background: var(--c-info-soft); border-left: 3px solid var(--c-info); }
.agent-detail-tool-result { margin-left: 1rem; }