/* ═══════════════════════════════════════════════════════════════════════════
   GalerieGraph Product Customizer — Module IA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panneau ── */
.ggpc-ai-panel {
    border: 1.5px dashed #c4b5fd;
    background: #faf5ff;
    border-radius: 10px;
}

.ggpc-ai-num {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff !important;
    border: none !important;
    font-size: 10px !important;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Toolbar boutons ── */
.ggpc-ai-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ggpc-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1.5px solid #c4b5fd;
    border-radius: 6px;
    background: #fff;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.ggpc-ai-btn:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.ggpc-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ggpc-ai-btn--gen {
    border-color: #a78bfa;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

/* ── Zone génération ── */
.ggpc-ai-gen-zone {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ggpc-ai-gen-zone .ggpc2-textarea {
    font-size: 12px;
    resize: vertical;
}

/* ── Statut ── */
.ggpc-ai-status {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 6px;
}

.ggpc-ai-status--info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ggpc-ai-status--success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.ggpc-ai-status--warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.ggpc-ai-status--error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* ── Aperçu résultat ── */
.ggpc-ai-preview-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1.5px solid #e9d5ff;
    border-radius: 8px;
}

.ggpc-ai-preview-img {
    max-width: 64px;
    max-height: 64px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    object-fit: contain;
    background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.ggpc-ai-preview-name {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* ── Actions (insérer / écarter) ── */
.ggpc-ai-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ── Spinner ── */
@keyframes ggpc-ai-spin {
    to { transform: rotate(360deg); }
}

.ggpc-ai-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ggpc-ai-spin 0.6s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Indicateur de face ── */
.ggpc-ai-face-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 6px;
    font-weight: 600;
}

.ggpc-ai-face-indicator svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ── Badge bêta génération ── */
.ggpc-ai-badge-beta {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f97316;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .ggpc-ai-toolbar { gap: 4px; }
    .ggpc-ai-btn span { display: none; }
    .ggpc-ai-btn { padding: 6px 8px; }
}