/* ═══════════════════════════════════════════════════════════
   Donna · Action cards v2.2
   Aligné CLAUDE.md (Light + Noir uniquement)
   Préfixe : .da-ac-*
   ═══════════════════════════════════════════════════════════ */

/* [v1175] Tokens demo Margot retirés à l'intégration — themes.css global les fournit déjà */

/* ═══════════════════════════════════════════════════════════
   Card root
   ═══════════════════════════════════════════════════════════ */
.da-ac{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-size:13px; line-height:1.45;
  color:var(--text);
  overflow:hidden;
  transition:border-color .15s, opacity .25s, max-height .3s ease;
  animation:da-ac-in .22s cubic-bezier(.2,.7,.3,1.05);
}
@keyframes da-ac-in{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}

/* Barre verticale gauche — accent par défaut (proposed) */
.da-ac::before{
  content:""; position:absolute;
  left:0; top:0; bottom:0; width:2px;
  background:var(--accent);
  transition:background .15s;
}

/* ─── State variants ─── */
.da-ac[data-state="applying"]::before{ background:var(--accent) }
.da-ac[data-state="applied"]::before{ background:var(--green) }
.da-ac[data-state="failed"]::before{ background:var(--danger) }
.da-ac[data-state="cancelled"]::before{ background:var(--border-hi) }

.da-ac[data-state="cancelled"]{ opacity:.55 }

/* ═══════════════════════════════════════════════════════════
   Header — icon + title + (sub)
   ═══════════════════════════════════════════════════════════ */
.da-ac-head{
  display:flex; align-items:flex-start; gap:8px;
  padding:11px 12px 9px 14px;
}
.da-ac-icon{
  width:22px; height:22px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--accent-dim);
  color:var(--accent);
  border-radius:var(--radius-sm);
}
.da-ac-icon svg{ width:13px; height:13px }
.da-ac[data-state="applied"] .da-ac-icon{
  background:color-mix(in srgb, var(--green) 14%, transparent);
  color:var(--green);
}
.da-ac[data-state="failed"] .da-ac-icon{
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  color:var(--danger);
}

.da-ac-headtxt{ flex:1; min-width:0 }
.da-ac-title{
  font-size:13px; font-weight:600;
  color:var(--text);
  line-height:1.3;
}
.da-ac-sub{
  font-size:11px; color:var(--text-dim);
  margin-top:1px;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Preview wrap (tool-specific content inside)
   ═══════════════════════════════════════════════════════════ */
.da-ac-preview{
  margin:0 12px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:9px 11px;
  font-size:12px; line-height:1.5;
  color:var(--text);
}
.da-ac-preview p{ margin:0 }
.da-ac-preview .da-ac-edit{
  width:100%;
  background:transparent; border:0; padding:0;
  font:inherit; color:inherit;
  resize:vertical;
  min-height:56px;
  outline:none;
}

/* ─── Preview variants per tool ─── */

/* Note — quote style */
.da-ac-preview.is-note{
  border-left:2px solid var(--border-hi);
  background:var(--s2);
  padding-left:11px;
}

/* Stage update — pipeline */
.da-ac-stage{
  display:flex; align-items:center; gap:6px;
  font-size:11px;
  flex-wrap:wrap;
}
.da-ac-stage-step{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-dim);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.da-ac-stage-step .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--muted);
}
.da-ac-stage-step.is-from{
  color:var(--muted); text-decoration:line-through;
}
.da-ac-stage-step.is-from .dot{ background:var(--muted) }
.da-ac-stage-step.is-to{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  background:var(--accent-dim);
  font-weight:600;
}
.da-ac-stage-step.is-to .dot{ background:var(--accent) }
.da-ac-stage-arrow{
  color:var(--muted);
  display:inline-flex;
}
.da-ac-stage-arrow svg{ width:12px; height:12px }

/* Event — vignette agenda */
.da-ac-event{
  display:flex; align-items:center; gap:10px;
}
.da-ac-event-date{
  width:38px; flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  text-align:center;
  padding:3px 0 4px;
  font-variant-numeric:tabular-nums;
}
.da-ac-event-date .m{
  display:block; font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent);
}
.da-ac-event-date .d{
  display:block; font-size:14px; font-weight:700;
  color:var(--text); line-height:1.1;
}
.da-ac-event-info{ flex:1; min-width:0 }
.da-ac-event-title{
  font-size:12px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.da-ac-event-meta{
  font-size:11px; color:var(--text-dim);
  margin-top:1px;
  font-variant-numeric:tabular-nums;
}
.da-ac-event-meta .sep{ color:var(--muted); margin:0 4px }
.da-ac-event-type{
  display:inline-flex; align-items:center;
  font-size:9px; font-weight:600;
  padding:1px 5px;
  background:var(--accent-dim);
  color:var(--accent);
  border-radius:99px;
  letter-spacing:.04em;
  margin-left:6px;
  vertical-align:middle;
}

/* Priority — toggle visuel */
.da-ac-toggle{
  display:flex; align-items:center; gap:8px;
}
.da-ac-toggle-state{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:99px;
  font-size:11px; font-weight:500;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.da-ac-toggle-state .pill-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--muted);
}
.da-ac-toggle-state.is-from{
  text-decoration:line-through;
}
.da-ac-toggle-state.is-to{
  background:var(--accent-dim);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent);
  font-weight:600;
}
.da-ac-toggle-state.is-to .pill-dot{ background:var(--accent) }
.da-ac-toggle-arrow{
  color:var(--muted);
  display:inline-flex;
}
.da-ac-toggle-arrow svg{ width:12px; height:12px }

/* Draft message — sujet + body collapsed */
.da-ac-draft-subj{
  font-size:11px; font-weight:600;
  color:var(--text);
  margin-bottom:5px;
  padding-bottom:5px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
}
.da-ac-draft-subj .tag{
  font-size:9px; font-weight:600;
  padding:1px 5px;
  background:var(--accent-dim);
  color:var(--accent);
  border-radius:99px;
  letter-spacing:.04em;
}
.da-ac-draft-body{
  font-size:12px; line-height:1.5;
  color:var(--text-dim);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.da-ac-draft.is-expanded .da-ac-draft-body{
  display:block;
  -webkit-line-clamp:unset;
}
.da-ac-draft-toggle{
  display:inline-flex; align-items:center; gap:3px;
  font:inherit; font-size:11px; font-weight:500;
  background:transparent; border:0; padding:4px 0 0;
  color:var(--text-dim); cursor:pointer;
}
.da-ac-draft-toggle:hover{ color:var(--text) }
.da-ac-draft-toggle svg{ width:10px; height:10px }

/* ═══════════════════════════════════════════════════════════
   Actions row
   ═══════════════════════════════════════════════════════════ */
.da-ac-actions{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px 11px;
}
.da-ac-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:28px; padding:0 10px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:inherit; font-size:12px; font-weight:500;
  cursor:pointer;
  transition:background 80ms, border-color 80ms, color 80ms;
}
.da-ac-btn:hover{ background:var(--s3); border-color:var(--border-hi) }
.da-ac-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.da-ac-btn svg{ width:11px; height:11px }
.da-ac-btn[disabled]{
  opacity:.55; cursor:not-allowed;
}
.da-ac-btn[disabled]:hover{
  background:var(--s2); border-color:var(--border);
}

.da-ac-btn-ghost{
  background:transparent;
  color:var(--text-dim);
  border-color:transparent;
}
.da-ac-btn-ghost:hover{
  background:var(--s2); color:var(--text);
  border-color:var(--border);
}

.da-ac-btn-primary{
  margin-left:auto;
  background:var(--text); color:var(--bg);
  border-color:var(--text);
  font-weight:600;
  padding:0 12px;
}
.da-ac-btn-primary:hover{
  background:var(--text-dim); border-color:var(--text-dim);
}
.da-ac-btn-primary[disabled]:hover{
  background:var(--text); border-color:var(--text);
}

/* Spinner pour applying */
.da-ac-spin{
  width:11px; height:11px;
  border:1.5px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:da-ac-spin .7s linear infinite;
}
@keyframes da-ac-spin{
  to{ transform:rotate(360deg) }
}

/* ═══════════════════════════════════════════════════════════
   State : applying — boutons disabled, spinner sur primary
   ═══════════════════════════════════════════════════════════ */
.da-ac[data-state="applying"] .da-ac-btn{ pointer-events:none }
.da-ac[data-state="applying"] .da-ac-btn-primary{ opacity:1 }

/* ═══════════════════════════════════════════════════════════
   State : applied — version rétractée (ligne compacte)
   ═══════════════════════════════════════════════════════════ */
.da-ac[data-state="applied"] .da-ac-preview,
.da-ac[data-state="applied"] .da-ac-actions,
.da-ac[data-state="cancelled"] .da-ac-preview,
.da-ac[data-state="cancelled"] .da-ac-actions{
  display:none;
}
.da-ac[data-state="applied"] .da-ac-head,
.da-ac[data-state="cancelled"] .da-ac-head{
  align-items:center;
  padding:7px 10px 7px 12px;
}
.da-ac[data-state="applied"] .da-ac-icon,
.da-ac[data-state="cancelled"] .da-ac-icon{
  width:18px; height:18px;
}
.da-ac[data-state="applied"] .da-ac-icon svg,
.da-ac[data-state="cancelled"] .da-ac-icon svg{
  width:10px; height:10px;
}
.da-ac[data-state="applied"] .da-ac-title{
  font-size:12px; font-weight:500;
  color:var(--text);
}
.da-ac[data-state="applied"] .da-ac-sub{
  display:none;
}
.da-ac[data-state="applied"] .da-ac-undo,
.da-ac[data-state="cancelled"] .da-ac-redo{
  display:inline-flex; align-items:center; gap:4px;
  background:transparent; border:0; padding:2px 6px;
  font:inherit; font-size:11px; font-weight:500;
  color:var(--text-dim);
  cursor:pointer;
  border-radius:var(--radius-sm);
  margin-left:auto;
  flex-shrink:0;
}
.da-ac[data-state="applied"] .da-ac-undo:hover,
.da-ac[data-state="cancelled"] .da-ac-redo:hover{
  background:var(--s2); color:var(--text);
}
.da-ac[data-state="applied"] .da-ac-undo svg,
.da-ac[data-state="cancelled"] .da-ac-redo svg{
  width:10px; height:10px;
}

/* Cancelled : titre barré */
.da-ac[data-state="cancelled"] .da-ac-title{
  font-size:12px; font-weight:500;
  color:var(--muted);
  text-decoration:line-through;
}
.da-ac[data-state="cancelled"] .da-ac-sub{ display:none }

/* Undo / Redo timers (mini countdown bar) */
.da-ac-undo-bar{
  position:absolute; left:2px; right:0; bottom:0;
  height:1px;
  background:var(--border-hi);
}
.da-ac-undo-bar-fill{
  height:100%;
  background:var(--green);
  width:100%;
  animation:da-ac-undo 6s linear forwards;
}
@keyframes da-ac-undo{
  to{ width:0 }
}

/* ═══════════════════════════════════════════════════════════
   State : failed — message + bouton retry
   ═══════════════════════════════════════════════════════════ */
.da-ac-error{
  display:flex; align-items:flex-start; gap:6px;
  margin:0 12px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius:var(--radius);
  font-size:11px;
  color:var(--danger);
}
.da-ac-error svg{ width:12px; height:12px; flex-shrink:0; margin-top:1px }

/* [v1177] Toute la section "Demo canvas" Margot retirée à l'intégration — body{padding:24px}, .demo-*, .theme-toggle servaient à la page de démo standalone (donna.zip/index.html) et causaient les bandes grises de chaque côté du dashboard. */


/* ─── [v1175 intégration] Gap entre cards multiples ───────────────
   Margot mentionne dans son README que le module ne gère pas le
   spacing entre instances — c'est au container de le faire. Notre
   container est .da-action-cards-zone (créé par donna-assistant.js
   dans le bubble du message donna).
*/
.da-action-cards-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* ─── [v1186] Bouton compact additionnel en state applied (ex: "Compléter
   la fiche compta" sur transition mandat→offre). Affiché entre le head et
   la undo bar. Style ghost cohérent avec les autres boutons ghost.
*/
.da-ac-applied-extra{
  padding: 6px 16px 10px;
}
.da-ac-btn-small{
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.da-ac-btn-small:hover{
  background: var(--s2);
  color: var(--text);
  border-color: var(--text-dim);
}
.da-ac-btn-small svg{
  width: 11px;
  height: 11px;
  opacity: 0.7;
}

/* ─── [v1187] Picker acquéreur dans card update_dossier_etape ────────
   Permet à l'agent de changer l'acquéreur si donna se trompe, avant
   d'apply. Sources : window.CLIENTS_DATA filtré type A/AV.
*/
.da-ac-acq-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
}
.da-ac-acq-label{
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.da-ac-acq-slot{
  display: flex;
  min-height: 28px;
}

/* Chip d'acquéreur sélectionné */
.da-ac-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 5px 5px 9px;
  border-radius: 4px;
  background: var(--s2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  max-width: 100%;
}
.da-ac-chip-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.da-ac-chip-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.da-ac-chip-change{
  margin-left: 4px;
  padding: 3px 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 500;
  transition: color 150ms ease, border-color 150ms ease;
}
.da-ac-chip-change:hover{
  color: var(--text);
  border-color: var(--text-dim);
}

/* Chip vide (pas d'acquéreur encore sélectionné) */
.da-ac-chip-empty{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 4px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.da-ac-chip-empty:hover{
  color: var(--text);
  border-color: var(--text-dim);
}
.da-ac-chip-empty svg{
  width: 11px;
  height: 11px;
}

/* Mode éditeur : input search + liste de résultats */
.da-ac-acq-editor{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.da-ac-acq-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
  background: var(--s2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 6px 0 8px;
  gap: 6px;
}
.da-ac-acq-input-wrap svg:first-child{
  width: 13px;
  height: 13px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.da-ac-acq-input{
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  padding: 7px 0;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
}
.da-ac-acq-input::placeholder{ color: var(--text-dim); }
.da-ac-acq-close{
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.da-ac-acq-close:hover{ color: var(--text); background: var(--bg); }
.da-ac-acq-close svg{ width: 11px; height: 11px; }

/* Liste de résultats */
.da-ac-acq-results{
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 2px;
}
.da-ac-acq-option{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  transition: background 100ms ease;
}
.da-ac-acq-option:hover{ background: var(--s2); }
.da-ac-acq-option-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.da-ac-acq-option.is-hot .da-ac-acq-option-dot{ background: var(--chaud); }
.da-ac-acq-option.is-warm .da-ac-acq-option-dot{ background: var(--tiede); }
.da-ac-acq-option.is-cold .da-ac-acq-option-dot{ background: var(--froid); }
.da-ac-acq-option-name{
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.da-ac-acq-option-meta{
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  white-space: nowrap;
}
.da-ac-acq-empty{
  padding: 12px 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── [v1193] Card propose_bien_matches — batch bien × acquéreurs ──── */
.da-ac-match-bien{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--s2);
  border-radius: 4px;
  margin-bottom: 10px;
}
.da-ac-match-bien-icon{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
}
.da-ac-match-bien-icon svg{ width: 14px; height: 14px; }
.da-ac-match-bien-info{
  flex: 1;
  min-width: 0;
}
.da-ac-match-bien-addr{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.da-ac-match-prix{
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}
.da-ac-match-acqs-label{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.da-ac-match-acqs{
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 140px;
  overflow-y: auto;
}
.da-ac-match-acqs li{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--s1);
  font-size: 12.5px;
  color: var(--text);
}
.da-ac-match-acqs li.da-ac-match-more{
  background: transparent;
  font-style: italic;
  color: var(--text-dim);
  padding-left: 16px;
}
.da-ac-match-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.da-ac-match-foot{
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
}
.da-ac-match-foot strong{ color: var(--accent); }