/* ==========================================================================
   Assistant Puff Division (widget de chat) — chargé quand le bot est configuré.
   ========================================================================== */

.pd-chat-fab {
	position: fixed;
	right: 16px;
	/* --pd-vv-gap : recalage barre d'outils Chrome iOS, pose par main.js. */
	bottom: calc(16px + var(--pd-vv-gap, 0px));
	z-index: 60;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: var(--grad-hot);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(229, 17, 122, 0.42);
	transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.25s ease;
}
.pd-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(229, 17, 122, 0.5); }
.pd-chat-fab.is-open { background: var(--ink); box-shadow: 0 8px 20px rgba(52, 49, 53, 0.35); }

/* Au-dessus de la barre de navigation mobile (64 px). */
@media (max-width: 767px) {
	.pd-chat-fab { bottom: calc(78px + var(--pd-safe-b, 0px) + var(--pd-vv-gap, 0px)); }
	body.pd-buybar-active .pd-chat-fab { display: none; }
}

/* [hidden] serait écrasé par le display:flex ci-dessous (styles auteur > UA) :
   sans cette règle, le panneau reste visible même fermé. */
.pd-chat[hidden] { display: none; }

.pd-chat {
	position: fixed;
	right: 16px;
	bottom: calc(84px + var(--pd-vv-gap, 0px));
	transition: bottom 0.18s ease;
	z-index: 61;
	width: min(380px, calc(100vw - 32px));
	max-height: min(560px, calc(100dvh - 120px));
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(52, 49, 53, 0.25);
	overflow: hidden;
}
@media (max-width: 767px) {
	.pd-chat { bottom: calc(146px + var(--pd-safe-b, 0px) + var(--pd-vv-gap, 0px)); max-height: min(480px, calc(100dvh - 170px)); }
}

.pd-chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--grad-band);
	color: #fff;
}
.pd-chat-head img { border-radius: 50%; background: #fff; flex: none; }
.pd-chat-title { margin: 0; font-weight: 800; font-size: 15px; }
.pd-chat-sub { margin: 0; font-size: 11.5px; opacity: 0.85; }
.pd-chat-close { margin-left: auto; color: #fff; background: rgba(255, 255, 255, 0.15); border-color: transparent; }
.pd-chat-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.pd-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--bg);
	min-height: 180px;
}
.pd-chat-msg { max-width: 85%; }
.pd-chat-msg p {
	margin: 0;
	padding: 9px 13px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: break-word;
}
.pd-chat-msg.is-bot { align-self: flex-start; }
.pd-chat-msg.is-bot p { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.pd-chat-msg.is-user { align-self: flex-end; }
.pd-chat-msg.is-user p { background: var(--grad-hot); color: #fff; border-bottom-right-radius: 6px; }
.pd-chat-msg.is-typing p { color: var(--muted); letter-spacing: 3px; animation: pd-chat-blink 1s infinite; }
@keyframes pd-chat-blink { 50% { opacity: 0.4; } }

.pd-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: var(--bg); }
/* [hidden] serait écrasé par le display:flex ci-dessus (styles auteur > UA). */
.pd-chat-quick[hidden] { display: none; }
.pd-chat-quick button {
	border: 1px solid var(--pink-soft);
	background: var(--pink-pale);
	color: var(--pink-dark);
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 999px;
}
.pd-chat-quick button:hover { background: var(--pink-soft); }

.pd-chat-form {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	background: var(--bg);
	border-top: 1px solid var(--line);
}
.pd-chat-form input[type="text"]#pd-chat-input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 16px;
	font: inherit;
	font-size: 16px; /* anti-zoom iOS */
	background: var(--surface);
}
.pd-chat-form input:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; }
.pd-chat-send { border-radius: 50%; width: 46px; height: 46px; padding: 0; flex: none; display: flex; align-items: center; justify-content: center; }
.pd-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }