/**
 * Artigos Vivos Interativos — estilos
 * -----------------------------------------------------------------------
 * Mobile-first: as regras "base" (fora de media query) já são o layout
 * mobile; a partir de 480px o layout ganha mais respiro em telas maiores.
 * Todas as variáveis ficam escopadas em .av-vivo-box, então é fácil
 * sobrescrever cores por tema/site sem editar este arquivo (basta
 * redeclarar as variáveis em um CSS do seu tema).
 */

.av-vivo-box {
	--av-cor-primaria: #6366f1;
	--av-cor-primaria-escura: #4338ca;
	--av-cor-sucesso: #10b981;
	--av-cor-erro: #ef4444;
	--av-cor-fundo: #ffffff;
	--av-cor-fundo-suave: #f8fafc;
	--av-cor-borda: #e2e8f0;
	--av-cor-texto: #0f172a;
	--av-cor-texto-suave: #64748b;
	--av-cor-chip-fundo: #eef2ff;
	--av-cor-chip-texto: #3730a3;
	--av-raio: 16px;
	--av-raio-pequeno: 10px;
	--av-sombra: 0 4px 20px -4px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);

	box-sizing: border-box;
	position: relative;
	margin: 28px 0;
	padding: 20px;
	background: var(--av-cor-fundo);
	border: 1px solid var(--av-cor-borda);
	border-radius: var(--av-raio);
	box-shadow: var(--av-sombra);
	font-family: inherit;
	color: var(--av-cor-texto);
	scroll-margin-top: 24px; /* garante que a âncora #id não fique colada no topo */
	container-type: inline-size;
}

.av-vivo-box *,
.av-vivo-box *::before,
.av-vivo-box *::after {
	box-sizing: border-box;
}

/* Suporte a tema escuro automático (respeitando o site, se ele já não define cores). */
@media (prefers-color-scheme: dark) {
	.av-vivo-box {
		--av-cor-fundo: #1e293b;
		--av-cor-fundo-suave: #0f172a;
		--av-cor-borda: #334155;
		--av-cor-texto: #f1f5f9;
		--av-cor-texto-suave: #94a3b8;
		--av-cor-chip-fundo: #312e81;
		--av-cor-chip-texto: #e0e7ff;
	}
}

/* --- Pergunta --- */
.av-vivo-pergunta {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	margin: 0 0 14px;
}

.av-vivo-pergunta a {
	color: var(--av-cor-primaria);
}

/* --- Formulário --- */
.av-vivo-label-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.av-vivo-linha-input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.av-vivo-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--av-cor-texto);
	background: var(--av-cor-fundo-suave);
	border: 1.5px solid var(--av-cor-borda);
	border-radius: var(--av-raio-pequeno);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.av-vivo-input::placeholder {
	color: var(--av-cor-texto-suave);
}

.av-vivo-input:focus {
	border-color: var(--av-cor-primaria);
	background: var(--av-cor-fundo);
	box-shadow: 0 0 0 3px rgb(99 102 241 / 18%);
}

.av-vivo-input:disabled {
	opacity: 0.6;
}

.av-vivo-btn-enviar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 18px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--av-cor-primaria), var(--av-cor-primaria-escura));
	border: none;
	border-radius: var(--av-raio-pequeno);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	touch-action: manipulation;
}

.av-vivo-btn-enviar:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgb(99 102 241 / 45%);
}

.av-vivo-btn-enviar:active:not(:disabled) {
	transform: translateY(0);
}

.av-vivo-btn-enviar:disabled {
	cursor: default;
	opacity: 0.85;
}

.av-vivo-btn-enviar:focus-visible {
	outline: 2px solid var(--av-cor-primaria-escura);
	outline-offset: 2px;
}

.av-vivo-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgb(255 255 255 / 40%);
	border-top-color: #fff;
	border-radius: 50%;
}

.av-vivo-btn-enviar.is-carregando .av-vivo-btn-texto {
	visibility: hidden;
	position: absolute;
}

.av-vivo-btn-enviar.is-carregando .av-vivo-spinner {
	display: inline-block;
	animation: av-vivo-girar 0.7s linear infinite;
}

@keyframes av-vivo-girar {
	to {
		transform: rotate(360deg);
	}
}

.av-vivo-contador {
	margin-top: 6px;
	text-align: right;
	font-size: 0.75rem;
	color: var(--av-cor-texto-suave);
}

.av-vivo-contador.is-perto-limite {
	color: var(--av-cor-erro);
	font-weight: 600;
}

/* --- Feedback (mensagens de sucesso/erro) --- */
.av-vivo-feedback {
	min-height: 0;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

.av-vivo-feedback.is-visivel {
	max-height: 60px;
	opacity: 1;
	margin: 10px 0 0;
}

.av-vivo-feedback.is-sucesso {
	color: var(--av-cor-sucesso);
}

.av-vivo-feedback.is-erro {
	color: var(--av-cor-erro);
}

/* --- Lista de respostas / chips --- */
.av-vivo-respostas-container {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--av-cor-borda);
}

.av-vivo-lista-respostas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.av-vivo-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--av-cor-chip-fundo);
	color: var(--av-cor-chip-texto);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.3;
	word-break: break-word;
	max-width: 100%;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.av-vivo-chip-entrando {
	opacity: 0;
	transform: scale(0.7) translateY(6px);
}

.av-vivo-vazio {
	font-size: 0.88rem;
	color: var(--av-cor-texto-suave);
	font-style: italic;
	list-style: none;
}

/* --- Skeleton (esqueleto de carregamento) --- */
.av-vivo-lista-respostas.is-loading {
	gap: 8px;
}

.av-vivo-skeleton {
	width: 88px;
	height: 26px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--av-cor-borda) 25%, var(--av-cor-fundo-suave) 37%, var(--av-cor-borda) 63%);
	background-size: 400% 100%;
	animation: av-vivo-shimmer 1.4s ease infinite;
	list-style: none;
}

.av-vivo-skeleton:nth-child(2) {
	width: 64px;
}

.av-vivo-skeleton:nth-child(3) {
	width: 104px;
}

@keyframes av-vivo-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

/* --- Confete (o canvas em si já é posicionado via JS; aqui só garantimos que não intercepta cliques) --- */
.av-vivo-confete-canvas {
	pointer-events: none;
}

/* -----------------------------------------------------------------------
 * Responsivo — a partir daqui usamos container queries (com fallback via
 * media query) para telas maiores, já que uma caixa pode estar dentro de
 * uma coluna estreita mesmo num desktop (ex.: sidebar).
 * ---------------------------------------------------------------------*/
@media (min-width: 480px) {
	.av-vivo-box {
		padding: 24px 28px;
	}

	.av-vivo-pergunta {
		font-size: 1.15rem;
	}

	.av-vivo-linha-input {
		flex-direction: row;
	}

	.av-vivo-input {
		flex: 1;
	}

	.av-vivo-btn-enviar {
		width: auto;
		min-width: 120px;
	}
}

@container (min-width: 420px) {
	.av-vivo-linha-input {
		flex-direction: row;
	}

	.av-vivo-input {
		flex: 1;
	}

	.av-vivo-btn-enviar {
		width: auto;
		min-width: 120px;
	}
}

/* Respeita usuários que preferem menos animação. */
@media (prefers-reduced-motion: reduce) {
	.av-vivo-chip,
	.av-vivo-skeleton,
	.av-vivo-spinner,
	.av-vivo-btn-enviar,
	.av-vivo-input,
	.av-vivo-feedback {
		animation: none !important;
		transition: none !important;
	}

	.av-vivo-chip-entrando {
		opacity: 1;
		transform: none;
	}
}