/*
 * Talents Chrétiens — assistant de rédaction.
 *
 * One button under the field and a panel the professional opens deliberately, as the
 * reference design shows it. Rules taken from that file (TC V6/V7); the only additions
 * are the inline status line and the undo control, which the live version needs.
 */

/* ── Under the field ─────────────────────────────────────────────────────── */
.tc-ai { margin-top: 2px; }
.ai-field-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ai-btn {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid rgba(198, 167, 86, .45);
	background: var(--gold-xlt, #FBF7EC);
	color: var(--navy-80, #16233F);
	border-radius: 6px; padding: 9px 12px;
	font-family: inherit; font-size: 12px; font-weight: 800;
	cursor: pointer; transition: .2s;
}
.ai-btn:hover { border-color: var(--gold, #C6A756); transform: translateY(-1px); }
.ai-btn:focus-visible { outline: 2px solid var(--gold-dk, #A8893C); outline-offset: 2px; }
.ai-spark { font-size: 14px; color: var(--gold-dk, #A8893C); }
.ai-note { font-size: 11px; color: var(--soft, #3D4F63); line-height: 1.45; }
.ai-undo {
	border: 1px solid var(--border, #E8EDF2); background: #fff;
	color: var(--navy-80, #16233F); border-radius: 6px; padding: 8px 11px;
	font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.ai-undo:hover { border-color: var(--gold, #C6A756); }
.ai-inline-status { font-size: 11px; line-height: 1.5; margin-top: 7px; color: var(--soft, #3D4F63); }
.ai-inline-status.is-ok { color: #2F6D4F; }
.ai-inline-status.is-error { color: #A53A3A; }
.ai-inline-status:empty { margin-top: 0; }

/* ── The panel ───────────────────────────────────────────────────────────── */
.tc-modal-backdrop {
	position: fixed; inset: 0; background: rgba(8, 24, 42, .58);
	z-index: 10020; display: none; align-items: center; justify-content: center; padding: 18px;
}
.tc-modal-backdrop.open { display: flex; }
.tc-modal {
	width: min(720px, 100%); max-height: min(86vh, 780px); overflow: auto;
	background: #fff; border-radius: 12px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .25); border: 1px solid rgba(0, 0, 0, .08);
}
.tc-modal-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
	padding: 20px 22px 16px; border-bottom: 1px solid var(--border, #E8EDF2);
	position: sticky; top: 0; background: #fff; z-index: 2;
}
.tc-modal-title { font-size: 18px; font-weight: 800; color: var(--navy-80, #16233F); margin: 0; }
.tc-modal-sub { font-size: 12px; color: var(--soft, #3D4F63); line-height: 1.55; margin-top: 5px; }
.tc-modal-close {
	border: 0; background: #F4F5F6; border-radius: 50%; width: 34px; height: 34px;
	cursor: pointer; font-size: 20px; color: var(--navy-80, #16233F); flex: 0 0 auto;
}
.tc-modal-body { padding: 20px 22px; }

.ai-mode-row { display: none; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.ai-mode-row.show { display: flex; }
.ai-mode {
	border: 1px solid var(--border, #E8EDF2); background: #fff; border-radius: 20px;
	padding: 7px 11px; font-family: inherit; font-size: 11px; font-weight: 700;
	cursor: pointer; color: var(--navy-80, #16233F);
}
.ai-mode.active { border-color: var(--gold, #C6A756); background: var(--gold-xlt, #FBF7EC); }

.ai-question { margin-bottom: 15px; }
.ai-question label {
	display: block; font-size: 12px; font-weight: 700;
	color: var(--navy-80, #16233F); margin-bottom: 6px; line-height: 1.4;
}
.ai-question textarea, .ai-question input {
	width: 100%; border: 1px solid var(--border, #E8EDF2); border-radius: 6px;
	padding: 10px 11px; font-family: inherit; font-size: 13px; outline: none;
}
.ai-question textarea { min-height: 72px; resize: vertical; }
.ai-question textarea:focus, .ai-question input:focus {
	border-color: var(--gold, #C6A756); box-shadow: 0 0 0 2px rgba(198, 167, 86, .09);
}
.ai-optional { font-size: 10px; font-weight: 500; color: var(--soft, #3D4F63); }
/*
 * The instruction and the example answer under each question. Small and quiet: they
 * guide without competing with the question, and stay readable on a phone.
 */
.ai-help {
	font-size: 11.5px; color: var(--soft, #3D4F63); line-height: 1.45; margin-bottom: 4px;
}
.ai-example {
	font-size: 11px; color: var(--soft, #3D4F63); line-height: 1.45; margin-bottom: 7px;
	padding-left: 8px; border-left: 2px solid var(--border, #E8EDF2);
}
.ai-modal-hint {
	font-size: 11px; color: var(--soft, #3D4F63); line-height: 1.5;
	background: var(--bg, #F4F6F8); border-radius: 6px; padding: 10px 11px; margin-top: 4px;
}
.ai-modal-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.ai-primary, .ai-secondary {
	border-radius: 6px; padding: 10px 14px; font-family: inherit;
	font-size: 12px; font-weight: 800; cursor: pointer;
}
.ai-primary { border: 1px solid var(--navy-80, #16233F); background: var(--navy-80, #16233F); color: #fff; }
.ai-secondary { border: 1px solid var(--border, #E8EDF2); background: #fff; color: var(--navy-80, #16233F); }
.ai-primary[disabled], .ai-secondary[disabled] { opacity: .55; cursor: default; }

.ai-preview { display: none; margin-top: 18px; border-top: 1px solid var(--border, #E8EDF2); padding-top: 18px; }
.ai-preview.show { display: block; }
.ai-preview-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
	font-weight: 800; color: var(--gold-dk, #A8893C); margin-bottom: 7px;
}
.ai-preview textarea {
	width: 100%; min-height: 150px; border: 1px solid rgba(198, 167, 86, .5);
	background: #FFFDF8; border-radius: 7px; padding: 12px;
	font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
}
.ai-modal-status { font-size: 12px; margin-top: 12px; color: var(--soft, #3D4F63); }
.ai-modal-status.is-error { color: #A53A3A; }
.ai-modal-status:empty { margin-top: 0; }

@media (max-width: 760px) {
	.tc-modal-backdrop { padding: 0; align-items: flex-end; }
	.tc-modal { border-radius: 14px 14px 0 0; max-height: 92vh; }
	.tc-modal-head, .tc-modal-body { padding-left: 16px; padding-right: 16px; }
	.ai-btn { width: 100%; justify-content: center; }
	.ai-note { width: 100%; }
	.ai-modal-actions .ai-primary, .ai-modal-actions .ai-secondary { flex: 1; text-align: center; }
}