/* ═══════════════════════════════════════════════════════════════════════════
   FabOMatic Rédaction IA — Toolbar Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper par champ ─────────────────────────────────────────────────── */
.fabo-ai-wrap {
    position: relative;
    margin-top: 2px;
}

/* ── Toolbar principale ─────────────────────────────────────────────────── */
.fabo-ai-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: #f8f9fb;
    border: 1px solid #e2e6ea;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 6px 10px;
    transition: opacity 0.2s;
}

/* Si le champ est focus → mettre légèrement en avant la toolbar */
.acf-field:focus-within .fabo-ai-toolbar {
    border-color: #2271b1;
    background: #f0f5ff;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.fabo-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
}

.fabo-ai-btn:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Générer */
.fabo-ai-btn--generate {
    background: #1e1e2e;
    color: #fff;
    border-color: #1e1e2e;
}
.fabo-ai-btn--generate:hover {
    background: #2d2d44;
    color: #fff;
    box-shadow: 0 2px 8px rgba(30,30,46,0.25);
}

/* Sublimer */
.fabo-ai-btn--sublimer {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border-color: transparent;
}
.fabo-ai-btn--sublimer:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

/* Reformuler */
.fabo-ai-btn--reformuler {
    color: #0369a1;
    border-color: #bae6fd;
    background: #f0f9ff;
}
.fabo-ai-btn--reformuler:hover {
    background: #0369a1;
    color: #fff;
    border-color: #0369a1;
}

/* Raccourcir */
.fabo-ai-btn--raccourcir {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}
.fabo-ai-btn--raccourcir:hover {
    background: #b45309;
    color: #fff;
    border-color: #b45309;
}

/* Annuler */
.fabo-ai-btn--undo {
    color: #6b7280;
    border-color: #e5e7eb;
    background: #fff;
    opacity: 0.5;
    pointer-events: none;
}
.fabo-ai-btn--undo.fabo-ai-btn--undo-active {
    opacity: 1;
    pointer-events: auto;
}
.fabo-ai-btn--undo.fabo-ai-btn--undo-active:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

/* ── État loading ────────────────────────────────────────────────────────── */
.fabo-ai-btn--loading {
    pointer-events: none;
    opacity: 0.7;
}
.fabo-ai-btn--loading .fabo-ai-btn__icon {
    animation: fabo-spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes fabo-spin {
    to { transform: rotate(360deg); }
}

/* ── Compteur de caractères ──────────────────────────────────────────────── */
.fabo-ai-counter {
    margin-left: auto;
    font-size: 0.74rem;
    color: #9ca3af;
    white-space: nowrap;
    padding-left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.fabo-ai-counter__val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fabo-ai-counter--warn .fabo-ai-counter__val {
    color: #f59e0b;
}
.fabo-ai-counter--over .fabo-ai-counter__val {
    color: #ef4444;
}

/* ── Toast notification ──────────────────────────────────────────────────── */
#fabo-ai-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-width: 400px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#fabo-ai-toast.fabo-toast--show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#fabo-ai-toast.fabo-toast--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
#fabo-ai-toast.fabo-toast--error {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}
#fabo-ai-toast.fabo-toast--info {
    background: #e0f2fe;
    color: #0c4a6e;
    border: 1px solid #7dd3fc;
}

/* ── Badge sur le champ (indicateur "IA disponible") ─────────────────────── */
.fabo-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 20px;
    padding: 2px 7px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Highlight animé lors de l'insertion du texte IA ─────────────────────── */
@keyframes fabo-highlight {
    0%   { background: #ede9fe; }
    100% { background: transparent; }
}
.fabo-ai-inserted {
    animation: fabo-highlight 1.2s ease-out forwards;
    border-radius: 4px;
}

/* ── Quota journalier ────────────────────────────────────────────────────── */
.fabo-ai-quota {
    margin-left: 6px;
    flex-shrink: 0;
}

.fabo-ai-quota__inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.fabo-ai-quota__inner svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.fabo-ai-quota__max {
    opacity: 0.5;
    font-weight: 400;
}

.fabo-ai-quota__inner.fabo-ai-quota--low {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}
.fabo-ai-quota__inner.fabo-ai-quota--low svg { opacity: 1; }

.fabo-ai-quota__inner.fabo-ai-quota--empty {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.fabo-ai-quota__inner.fabo-ai-quota--empty svg { opacity: 1; }

/* ── Séparateur dans toolbar ─────────────────────────────────────────────── */
.fabo-ai-sep {
    width: 1px;
    height: 16px;
    background: #e2e6ea;
    flex-shrink: 0;
    margin: 0 2px;
}