/* Balão de dúvida da página de produto — sai do botão `.bx-whats` (style.css). */

.bx-duvida {
	position: fixed;
	right: 20px;
	bottom: 90px; /* 56px do botão + 20px da margem + folga */
	z-index: 91;
	width: 340px;
	max-width: calc(100vw - 32px);
	padding: 1rem;
	border-radius: var(--radius-lg);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow), 0 0 0 1px rgba(37, 211, 102, .12);
	color: var(--text-soft);
	font-family: var(--font);
	opacity: 0;
	transform: translateY(12px) scale(.97);
	transform-origin: bottom right;
	transition: opacity .22s ease, transform .22s ease;
}
.bx-duvida.is-aberto { opacity: 1; transform: none; }

/* Rabinho apontando para o botão verde. */
.bx-duvida::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--bg-elev);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	transform: rotate(45deg);
}

.bx-duvida__fechar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.bx-duvida__fechar:hover { background: var(--bg-card); color: var(--text); }

.bx-duvida__convite {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: 0 1.6rem 0 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.bx-duvida__convite strong { display: block; color: var(--text); font-size: .98rem; }
.bx-duvida__convite small { display: block; color: var(--muted); font-size: .82rem; }

.bx-duvida__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bx-duvida__avatar svg { width: 22px; height: 22px; display: block; }

.bx-duvida__form { display: none; margin-top: .9rem; }
.bx-duvida.is-completo .bx-duvida__form { display: block; }
.bx-duvida.is-completo .bx-duvida__convite { cursor: default; }

.bx-duvida__rotulo { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .6rem; }
.bx-duvida__rotulo strong { color: var(--text-soft); }

.bx-duvida__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.bx-duvida__chip {
	padding: .35rem .65rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-card);
	color: var(--text-soft);
	font: inherit;
	font-size: .76rem;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.bx-duvida__chip:hover { border-color: #25d366; background: rgba(37, 211, 102, .1); color: var(--text); }

.bx-duvida textarea {
	display: block;
	width: 100%;
	min-height: 78px;
	padding: .6rem .75rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: .9rem; /* ≥ 16px no celular abaixo, para o iOS não dar zoom */
	resize: vertical;
}
.bx-duvida textarea:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }
.bx-duvida textarea::placeholder { color: var(--muted-dim); }

.bx-duvida__erro { margin: .4rem 0 0; color: var(--warning); font-size: .78rem; }

.bx-duvida__enviar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	margin-top: .7rem;
	padding: .7rem 1rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: #25d366;
	color: #06220f;
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.bx-duvida__enviar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bx-duvida__enviar svg { width: 20px; height: 20px; display: block; }

.bx-duvida__horario { margin: .5rem 0 0; text-align: center; font-size: .72rem; color: var(--muted-dim); }

@media (max-width: 600px) {
	.bx-duvida { right: 16px; bottom: 86px; }
	.bx-duvida textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.bx-duvida { transition: none; }
}