/* Agent Personal Branding 1.5 — bandeau, parcours, chat.
   Jetons : ceux du thème AZ (--azl-*) quand ils existent, sinon les repli ci-dessous. */

.aoaz-app {
	--ao-p50: var(--azl-primary-50, #E6F7FA);
	--ao-p100: var(--azl-primary-100, #C0EBF2);
	--ao-p200: var(--azl-primary-200, #8FD9E6);
	--ao-p400: var(--azl-primary-400, #14b8cf);
	--ao-p500: var(--azl-primary-500, #0e8fa3);
	--ao-p600: var(--azl-primary-600, #0a6f80);
	--ao-p700: var(--azl-primary-700, #0a5a68);
	--ao-text: var(--azl-text, #1a1d21);
	--ao-muted: var(--azl-muted, #6b7280);
	--ao-line: var(--azl-line, #e5e7eb);
	--ao-n600: var(--azl-neutral-600, #475569);
	--ao-r: var(--azl-radius-xl, 14px);
	--ao-sh: var(--azl-shadow-sm, 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .06));
	--ao-shl: var(--azl-shadow-lg, 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .06));
	--ao-hero: var(--azl-hero-gradient, linear-gradient(125deg, #12171c, #123c46 60%, #0a6f80));
	--ao-font: var(--azl-font-body, inherit);
	font-family: var(--ao-font);
	color: var(--ao-text);
	font-size: 14px;
	line-height: 1.55;
}
.aoaz-app *, .aoaz-side * { box-sizing: border-box; }
.aoaz-app [hidden], .aoaz-side [hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Bandeau                                                             */
/* ------------------------------------------------------------------ */
.aoaz-hero {
	background: var(--ao-hero);
	color: #fff;
	border-radius: 18px;
	padding: 26px 28px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: center;
	box-shadow: var(--ao-shl);
	margin-bottom: 22px;
}
.aoaz-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7fd4e2;
}
.aoaz-hero-title {
	margin: 6px 0 8px;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}
.aoaz-hero-text {
	margin: 0;
	color: #b9ccd2;
	line-height: 1.65;
	max-width: 600px;
	font-size: 14px;
}
.aoaz-hero-text strong { color: #fff; }
.aoaz-hero-cta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.aoaz-btn {
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
}
.aoaz-btn:disabled { opacity: .55; cursor: default; }
.aoaz-btn-white { background: #fff; color: var(--ao-p700); }
.aoaz-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.aoaz-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }

.aoaz-journey {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	padding: 16px 18px;
}
.aoaz-journey-head {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	color: #7fd4e2;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.aoaz-journey-head span { color: #fff; letter-spacing: 0; text-transform: none; font-weight: 700; }
.aoaz-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-bottom: 14px; }
.aoaz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ao-p400), #7fd4e2); border-radius: 99px; transition: width .5s ease; }
.aoaz-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.aoaz-step { text-align: center; font-size: 10.5px; font-weight: 700; color: #8fa6ae; line-height: 1.2; }
.aoaz-step i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin: 0 auto 5px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2);
	font-style: normal;
	font-size: 12px;
}
.aoaz-step.is-done { color: #fff; }
.aoaz-step.is-done i { background: var(--ao-p400); border-color: var(--ao-p400); color: #fff; }
.aoaz-step.is-cur { color: #fff; }
.aoaz-step.is-cur i { border-color: #7fd4e2; color: #7fd4e2; box-shadow: 0 0 0 4px rgba(20, 184, 207, .25); }

/* ------------------------------------------------------------------ */
/* Chat                                                                */
/* ------------------------------------------------------------------ */
.aoaz-chat {
	background: #fff;
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-r);
	box-shadow: var(--ao-sh);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 560px;
	height: calc(100vh - 340px);
}
.aoaz-chat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ao-line);
	background: #fff;
}
.aoaz-agent-av {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--ao-hero);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 13px;
	position: relative;
	flex-shrink: 0;
}
.aoaz-agent-av::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid #fff;
}
.aoaz-chat-name { font-weight: 800; font-size: 14px; }
.aoaz-chat-sub { font-size: 12px; color: var(--ao-muted); }
.aoaz-header-actions { margin-left: auto; display: flex; gap: 8px; }
.aoaz-chip {
	border: 1px solid var(--ao-line);
	background: #fff;
	border-radius: 99px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ao-n600);
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
}
.aoaz-chip:hover:not(:disabled) { border-color: var(--ao-p400); color: var(--ao-p700); }
.aoaz-chip-static { cursor: default; background: var(--ao-p50); color: var(--ao-p700); border-color: var(--ao-p100); }

.aoaz-messages {
	flex: 1;
	overflow: auto;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #fbfcfd;
}
.aoaz-empty {
	color: var(--ao-muted);
	text-align: center;
	padding: 28px 16px;
	font-size: 14px;
	line-height: 1.6;
}
.aoaz-row { display: flex; gap: 10px; max-width: 88%; }
.aoaz-row-me { align-self: flex-end; flex-direction: row-reverse; }
.aoaz-av {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--ao-hero);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.aoaz-row-me .aoaz-av { background: var(--ao-p100); color: var(--ao-p700); }
.aoaz-bubble {
	padding: 12px 15px;
	border-radius: 14px;
	line-height: 1.6;
	font-size: 13.5px;
	overflow-wrap: anywhere;
}
.aoaz-bubble p { margin: 0; }
.aoaz-bubble ul { margin: 6px 0; padding-left: 20px; }
.aoaz-bubble code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.aoaz-agent { background: #fff; border: 1px solid var(--ao-line); border-top-left-radius: 4px; }
.aoaz-user { background: var(--ao-p700); color: #fff; border-top-right-radius: 4px; }
.aoaz-user code { background: rgba(255, 255, 255, .18); }

.aoaz-q {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ao-p50);
	border-left: 3px solid var(--ao-p400);
}
.aoaz-q-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ao-p600); text-transform: uppercase; }
.aoaz-q-t { font-weight: 700; margin: 3px 0 4px; }
.aoaz-q-c { font-size: 12.5px; color: var(--ao-n600); }

.aoaz-saved-badge {
	align-self: flex-start;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	background: #e7f8ee;
	color: #137a41;
	border: 1px solid #c9edd9;
	border-radius: 99px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.aoaz-error {
	align-self: center;
	background: #fff1f2;
	color: #9f1239;
	border: 1px solid #fecdd3;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
}

/* Indicateur de frappe */
.aoaz-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.aoaz-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ao-p200); animation: aoaz-blink 1.2s infinite ease-in-out; }
.aoaz-typing span:nth-child(2) { animation-delay: .2s; }
.aoaz-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aoaz-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* Amorces */
.aoaz-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 10px; background: #fbfcfd; }

/* Saisie */
.aoaz-form { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--ao-line); align-items: flex-end; background: #fff; }
.aoaz-form textarea {
	flex: 1;
	border: 1px solid var(--ao-line);
	border-radius: 12px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 13.5px;
	resize: none;
	min-height: 56px;
	background: #fff;
	color: var(--ao-text);
}
.aoaz-form textarea:focus { outline: none; border-color: var(--ao-p400); box-shadow: 0 0 0 3px rgba(14, 143, 163, .2); }
.aoaz-send-btn {
	background: var(--ao-p600);
	color: #fff;
	border: 0;
	border-radius: 12px;
	width: 48px;
	height: 48px;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
}
.aoaz-send-btn:hover:not(:disabled) { background: var(--ao-p700); }
.aoaz-send-btn:disabled { opacity: .5; cursor: default; }
.aoaz-footer { padding: 8px 16px 12px; font-size: 11.5px; color: var(--ao-muted); background: #fff; }

/* Panneau « Mes conversations » */
.aoaz-history-panel {
	background: #fff;
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-r);
	box-shadow: var(--ao-sh);
	padding: 10px;
	margin-bottom: 16px;
}
.aoaz-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.aoaz-history-item {
	text-align: left;
	background: #fff;
	border: 1px solid var(--ao-line);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font-family: inherit;
	color: var(--ao-text);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.aoaz-history-item:hover:not(:disabled) { border-color: var(--ao-p400); }
.aoaz-history-item-title { font-weight: 700; font-size: 13px; }
.aoaz-history-item-meta { font-size: 11.5px; color: var(--ao-muted); }
.aoaz-history-active { border-color: var(--ao-p400); background: var(--ao-p50); }

/* ------------------------------------------------------------------ */
/* Accès : connexion requise / verrouillé                              */
/* ------------------------------------------------------------------ */
.aoaz-login-required {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 32px 24px;
	background: #fafbfe;
}
.aoaz-login-btn {
	display: inline-block;
	background: var(--azl-primary-600, #0a6f80);
	color: #fff !important;
	text-decoration: none;
	border-radius: 10px;
	padding: 10px 22px;
	font-weight: 700;
}
.aoaz-locked {
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid #f0cf8a;
	border-radius: 14px;
	padding: 28px 28px 22px;
	background: #fffdf7;
}
.aoaz-locked-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c98a12; margin-bottom: 8px; }
.aoaz-locked-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.aoaz-locked-text { margin: 0 0 16px; line-height: 1.65; color: #4b5563; }
.aoaz-locked-btn { display: inline-block; background: #c98a12; color: #fff !important; text-decoration: none; border-radius: 10px; padding: 10px 22px; font-weight: 700; }
.aoaz-locked-btn:hover { background: #a8720c; }

/* ------------------------------------------------------------------ */
/* Portail AZ : gabarit page-mon-personal-branding.php                 */
/* Chat à gauche, colonne livrables à droite (collante)                */
/* ------------------------------------------------------------------ */
.azl-page-content--agent .azl-page-content__header { display: none; }
.azl-page-content--agent .azl-page-content__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 22px; align-items: start; max-width: 1360px; }
.azl-page-content--agent .azl-page-content__body > p.wp-block-paragraph,
.azl-page-content--agent .azl-page-content__body > h2.wp-block-heading { display: none; }
.azl-page-content--agent .aoaz-app { grid-column: 1 / -1; display: contents; }
.azl-page-content--agent .aoaz-hero { grid-column: 1 / -1; }
.azl-page-content--agent .aoaz-chat { grid-column: 1; }
.azl-page-content--agent .aoaz-side { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 20px; }
.azl-page-content--agent .aoaz-gate { grid-column: 1 / -1; }

@media (max-width: 1100px) {
	.aoaz-hero { grid-template-columns: 1fr; }
	.aoaz-chat { height: auto; min-height: 480px; }
	.azl-page-content--agent .azl-page-content__body { grid-template-columns: 1fr; }
	.azl-page-content--agent .aoaz-side { grid-column: 1; grid-row: auto; position: static; margin-top: 18px; }
	.azl-page-content--agent .aoaz-chat { grid-column: 1; }
}
@media (max-width: 600px) {
	.aoaz-hero { padding: 20px 18px; }
	.aoaz-hero-title { font-size: 22px; }
	.aoaz-row { max-width: 100%; }
	.aoaz-steps { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
}

/* Disponibilité et export personnel (1.7). */
.aoaz-service-status { padding: 14px 20px; background: #fff3cd; color: #654d00; border-bottom: 1px solid #e3cd88; }
.aoaz-service-status[hidden] { display: none; }
.aoaz-conversation-quota { font-size: 13px; margin-top: 12px; }
.aoaz-hero-cta form { margin: 0; display: inline-flex; }
.aoaz-app button:disabled { opacity: .55; cursor: not-allowed; }

/* Agent Orientation AZ 1.9 — compléments au style du chat (chat.css).
   Mêmes jetons : ceux du thème AZ (--azl-*) quand ils existent. */

.abpo-app .abpo-steps { grid-template-columns: repeat(4, 1fr); }

/* Étiquette « Question 12 / 25 » en tête de bulle */
.abpo-q-k {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ao-p600);
	margin-bottom: 6px;
}

.abpo-quote {
	border-left: 3px solid var(--ao-p200);
	padding-left: 10px;
	color: var(--ao-n600);
}

/* Boutons de réponse (Q1–Q17) et LET'S GO */
.abpo-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 18px 12px;
	background: #fbfcfd;
}
.abpo-choice {
	text-align: left;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.45;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid var(--ao-line);
	background: #fff;
	color: var(--ao-text);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.abpo-choice:hover:not(:disabled),
.abpo-choice:focus-visible {
	border-color: var(--ao-p400);
	background: var(--ao-p50);
	outline: none;
}
.abpo-choice:disabled { opacity: .55; cursor: default; }

.abpo-choice.abpo-go {
	align-self: flex-start;
	font-weight: 800;
	letter-spacing: .04em;
	background: var(--ao-p600);
	border-color: var(--ao-p600);
	color: #fff;
	padding: 11px 22px;
}
.abpo-choice.abpo-go:hover:not(:disabled) { background: var(--ao-p700); border-color: var(--ao-p700); color: #fff; }

/* Q17 : échelle de 1 à 10 */
.abpo-choices.abpo-scale { flex-direction: row; flex-wrap: wrap; }
.abpo-choice.abpo-num {
	width: 44px;
	height: 44px;
	padding: 0;
	text-align: center;
	font-weight: 700;
}

.abpo-hint {
	margin: 0;
	padding: 0 18px 10px;
	font-size: 12.5px;
	color: var(--ao-p700);
	background: #fbfcfd;
}

/* Carte du portrait, dans la bulle de l'agent */
.abpo-portrait {
	margin: 10px 0;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid var(--ao-p100);
	background: linear-gradient(180deg, var(--ao-p50), #fff 140px);
}
.abpo-portrait-k {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ao-p600);
	margin-bottom: 8px;
}
.abpo-portrait strong { color: var(--ao-p700); font-weight: 700; }
.aoaz-bubble strong { font-weight: 700; }
.abpo-portrait p + p { margin-top: 2px; }

/* Après le portrait : vers la leçon 2 */
.abpo-next {
	margin-top: 16px;
	padding: 18px 22px;
	border-radius: var(--ao-r);
	border: 1px solid var(--ao-p100);
	background: var(--ao-p50);
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.abpo-next-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ao-p600);
	margin-bottom: 4px;
}
.abpo-next p { margin: 0; color: var(--ao-n600); max-width: 520px; }
.abpo-next-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.abpo-btn-primary { background: var(--ao-p600); color: #fff; text-decoration: none; }
.abpo-btn-primary:hover { background: var(--ao-p700); color: #fff; }
.abpo-btn-download { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ao-p700); border: 1px solid var(--ao-p200); text-decoration: none; font-weight: 700; }
.abpo-btn-download:hover { background: var(--ao-p50); color: var(--ao-p700); border-color: var(--ao-p400); }
.abpo-btn-download.is-busy { opacity: .6; pointer-events: none; }
.abpo-btn-quiet { background: transparent; color: var(--ao-p700); border: 1px solid var(--ao-p200); }
.abpo-btn-quiet:hover:not(:disabled) { background: #fff; }

@media (max-width: 640px) {
	.abpo-choices { padding: 4px 12px 12px; }
	.abpo-next { padding: 16px; }
}
