/* NutriSaaS — Intelligence artificielle : carte des Parametres (praticienne), carte admin,
   fenetre "Acces IA". Uniquement des jetons de theme.css : contraste AA en clair et en sombre.
   Charge apres shell.css. */

.ai-card { padding: 1rem; margin-bottom: .75rem; border-radius: .75rem; }
#m-admin .ai-card { margin: 1rem 0 0; }
.ai-card [hidden] { display: none !important; }
.ai-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ai-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.7rem; height: 1.7rem; border-radius: .5rem;
  background: var(--brand-soft); color: var(--brand-ink);
}
.ai-card-icon svg { width: .95rem; height: .95rem; stroke: currentColor; fill: none; }
.ai-card-title { font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.ai-card-head .ai-card-title { margin-bottom: 0; }

.ai-note, .ai-help, .ai-usage { font-size: .78rem; line-height: 1.45; color: var(--muted); margin: 0 0 .75rem; }
.ai-help { font-size: .74rem; margin: .5rem 0 0; }
.ai-note-warn { color: var(--ink-2); font-weight: 600; }
.ai-usage { color: var(--ink-2); }

.ai-prefs, .ai-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .9rem; align-items: end; }
.ai-admin > .ai-help { margin: 0 0 .85rem; }
.ai-prefs { margin-bottom: 0; }
.ai-prefs > :only-child, #ai-provider-wrap[hidden] + div { grid-column: span 2; }
.ai-keys { display: flex; flex-direction: column; gap: .75rem; }
.ai-prefs + .ai-keys:not(:empty) { margin-top: .9rem; }

/* Bloc d'une cle : champ sur toute la largeur, puis Tester / Enregistrer / Effacer, puis l'etat du test. */
.ai-key { padding-top: .1rem; }
.ai-key-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ai-key > .inp { width: 100%; }
.ai-key-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .45rem; }
.ai-btn { min-height: 2.25rem; padding: .4rem .8rem; font-size: .8rem; white-space: nowrap; }
/* Bouton Tester : bord a 3:1 sur la carte (claire et sombre), texte en encre principale.
   Avant : fond #1e293b sur une carte #1e293b en mode sombre, presque invisible. */
.btn-quiet.ai-btn { border-color: var(--field-line); color: var(--ink); background: var(--surface-2); }
.btn-quiet.ai-btn:hover { background: var(--hover); }
.ai-btn:disabled { opacity: .65; cursor: progress; }

.ai-state { font-size: .72rem; font-weight: 600; color: var(--muted); }
.ai-state-on { color: var(--brand-ink); }
.ai-status { display: block; margin: .35rem 0 0; font-size: .75rem; font-weight: 600; color: var(--muted); }
.ai-status:empty { display: none; }
.ai-status-ok { color: var(--brand-ink); }
.ai-status-err { color: var(--danger-ink); }
.ai-status-wait { color: var(--ink-2); }
.ai-link-danger {
  background: none; border: 0; padding: .2rem 0; cursor: pointer; margin-left: auto;
  color: var(--danger-ink); font-size: .75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.ai-save { width: 100%; margin-top: 1rem; }

/* Bouton "IA" dans la liste des praticiens (admin) */
.adm-ai-btn {
  min-width: 2rem; min-height: 1.9rem; padding: 0 .45rem; border-radius: .4rem; cursor: pointer;
  border: 1px solid var(--field-line); background: transparent; color: var(--ink-2);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.adm-ai-btn:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-ink); }

/* Fenetre "Acces IA" */
.ai-access-box { max-width: 440px; }
.ai-modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ai-modal-head strong { font-size: 1.05rem; color: var(--ink); }
.ai-access-form { display: flex; flex-direction: column; gap: .75rem; }
.ai-check { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--ink); cursor: pointer; min-height: 1.75rem; }
.ai-check input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.ai-indent { padding-left: 1.6rem; }
.ai-indent .ai-help { margin-top: .3rem; }
.ai-fieldset { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: .5rem .75rem .6rem; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ai-fieldset legend { padding: 0 .3rem; }
#aia-message:empty { display: none; }
.ai-link {
  align-self: flex-start; background: none; border: 0; padding: .15rem 0; margin: -.4rem 0 .75rem; cursor: pointer;
  color: var(--ink-2); font-size: .78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.ai-link:hover { color: var(--ink); }
.ai-modal-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.ai-spacer { flex: 1; }

@media (max-width: 480px) {
  .ai-prefs, .ai-grid2 { grid-template-columns: 1fr; }
  .ai-prefs > :only-child, #ai-provider-wrap[hidden] + div { grid-column: auto; }
  .ai-modal-actions .btn-primary, .ai-modal-actions .btn-quiet { flex: 1 1 auto; }
  .ai-spacer { display: none; }
}

/* ---------- Co-écriture & Micro-barre IA ---------- */
.cowriter-trigger-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .32rem .65rem;
  border-radius: var(--r-ctl); border: 1px solid var(--field-line);
  color: var(--ink-2); background: var(--surface-2); cursor: pointer;
  transition: all .18s ease;
}
.cowriter-trigger-btn:hover { background: var(--hover); color: var(--ink); border-color: var(--brand); }
.cowriter-box { margin-top: .6rem; }
.cowriter-panel {
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); padding: .75rem; display: flex; flex-direction: column; gap: .6rem;
  animation: nsTabIn .18s ease both;
}
.cowriter-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cowriter-badge {
  font-size: .72rem; font-weight: 700; color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-line);
  padding: .2rem .5rem; border-radius: 9999px;
}
.cowriter-quick-options { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.cowriter-chip {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: .75rem; font-weight: 600;
  padding: .25rem .55rem; border-radius: var(--r-ctl); cursor: pointer;
  transition: all .15s ease;
}
.cowriter-chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.cowriter-close-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: .2rem .4rem; font-size: .85rem; border-radius: .3rem;
  margin-left: auto;
}
.cowriter-close-btn:hover { color: var(--ink); }
.cowriter-custom-row { display: flex; gap: .4rem; align-items: center; }
.cowriter-input { flex: 1; font-size: .8rem; padding: .35rem .6rem; }
.cowriter-go-btn { font-size: .78rem; padding: .35rem .7rem; white-space: nowrap; }
.cowriter-proposal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: .75rem; display: flex; flex-direction: column; gap: .5rem;
  animation: nsTabIn .18s ease both;
}
.cowriter-proposal-label { font-size: .75rem; font-weight: 700; color: var(--muted); }
.cowriter-preview {
  font-size: .82rem; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
  padding: .5rem; background: var(--surface-2); border-radius: .4rem; border: 1px solid var(--line);
}
.cowriter-actions { display: flex; align-items: center; gap: .5rem; }
.cowriter-loading {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  padding: .6rem; text-align: center;
}

/* Animations IA et micro-transitions */
@keyframes aiPulseLoading {
  0% { opacity: .55; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}
.ai-loading-pulse {
  animation: aiPulseLoading 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ai-loading-pulse { animation: none !important; }
}