/*
 * O widget do assistente (assistente.js). Tudo preso ao #ns-assistente: o tema
 * (Bootstrap) estiliza botão e campo no site todo, e nada daqui vaza para fora.
 *
 * Paleta do site: branco, grafite (#262e3e), filete, turquesa só de acento.
 * Camada 1040: abaixo dos modais do Bootstrap (1055), do aviso de cookies e da
 * compra rápida (1080).
 */

#ns-assistente {
	--nsa-grafite: #262e3e;
	--nsa-grafite-2: #343d50;
	--nsa-turquesa: #42d5de;
	--nsa-filete: #e4e7ec;
	--nsa-texto: #475467;
	--nsa-fraco: #667085;
	--nsa-fundo: #f7f8fa;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1040;
	font-size: 14px;
	line-height: 1.45;
	color: var(--nsa-grafite);
}

#ns-assistente *,
#ns-assistente *::before,
#ns-assistente *::after {
	box-sizing: border-box;
}

#ns-assistente [hidden] {
	display: none !important;
}

#ns-assistente button {
	font: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* ── O botão ─────────────────────────────────────────────────────────────── */

/* Desenho do Daniel (Figma, 05/10/2026). Um círculo branco com o brilho de IA no
   degradê da marca (turquesa → verde-limão), o contorno aceso com a luz girando em
   volta e, atrás, no lugar da sombra, um glow no mesmo degradê. Expandido ("Precisa
   de ajuda?", pelo convite ou pelo mouse) só abre a pílula com o texto. Com o chat
   aberto, o círculo fica neutro (é o botão de fechar). */
#ns-assistente .nsa-botao {
	--nsa-degrade: linear-gradient(135deg, #42d5de, #7fffd0);
	position: fixed;
	right: 20px;
	/* --nsa-consent: altura do banner de cookies enquanto ele está na tela
	   (assistente.js, medirConsent). O botão sobe acima dele e volta quando ele sai. */
	bottom: calc(20px + var(--nsa-consent, 0px));
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: bottom 0.35s ease;
	animation: nsa-chega 0.35s ease-out 0.4s both;
}

#ns-assistente .nsa-botao:focus-visible {
	outline: none;
}

#ns-assistente .nsa-botao:focus-visible .nsa-corpo {
	box-shadow: 0 0 0 3px rgba(66, 213, 222, 0.45);
}

#ns-assistente .nsa-glow {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--nsa-degrade);
	opacity: 0.8;
	filter: blur(13px);
	transition: opacity 0.4s ease, inset 0.4s ease;
	pointer-events: none;
}

#ns-assistente .nsa-corpo {
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 10px;
	border: 2px solid #f0f0f0;
	border-radius: 999px;
	background: #fff;
	transition: border-color 0.35s ease, transform 0.18s ease;
}

#ns-assistente .nsa-botao:hover .nsa-corpo {
	transform: translateY(-1px);
}

/* O contorno que acende: um anel em degradê cônico, girando. */
#ns-assistente .nsa-corpo::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(from var(--nsa-giro), #43d5dd, #7fffd0 20%, #f8f8f8 45%, #f8f8f8 60%, #43d5dd 85%, #43d5dd);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

#ns-assistente .nsa-icone {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: #505050;
}

#ns-assistente .nsa-i-ia,
#ns-assistente .nsa-i-fechar {
	position: absolute;
	inset: 0;
	margin: auto;
	transition: opacity 0.35s ease;
}

#ns-assistente .nsa-i-cor,
#ns-assistente .nsa-i-fechar {
	opacity: 0;
}

#ns-assistente .nsa-frase {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	color: #505050;
	font-size: 15px;
	line-height: 1;
	transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

/* Aceso sempre que o chat está fechado, no círculo e na pílula. */
#ns-assistente:not(.nsa-aberto) .nsa-corpo {
	border-color: transparent;
}

#ns-assistente:not(.nsa-aberto) .nsa-corpo::after {
	opacity: 1;
	animation: nsa-acende 2.4s linear infinite;
}

#ns-assistente:not(.nsa-aberto) .nsa-glow {
	opacity: 0.9;
}

#ns-assistente:not(.nsa-aberto) .nsa-i-cor {
	opacity: 1;
}

/* Expandido: pelo convite (uns segundos depois de carregar) ou pelo mouse. A única
   diferença do círculo é o texto. */
#ns-assistente.nsa-expandido .nsa-frase,
#ns-assistente.nsa-pairando .nsa-frase {
	max-width: 180px;
	margin: 0 10px 0 10px;
	opacity: 1;
	transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease 0.15s;
}

/* Aberto (o painel na tela): o círculo com a seta de fechar. */
#ns-assistente.nsa-aberto .nsa-botao {
	animation: none;
}

#ns-assistente.nsa-aberto .nsa-i-ia {
	opacity: 0 !important;
}

#ns-assistente.nsa-aberto .nsa-i-fechar {
	opacity: 1;
}

/* ── O painel ────────────────────────────────────────────────────────────── */

#ns-assistente .nsa-painel {
	position: fixed;
	right: 20px;
	bottom: calc(88px + var(--nsa-consent, 0px));
	width: 400px;
	height: min(680px, calc(100vh - 112px - var(--nsa-consent, 0px)));
	border-radius: 12px;
	overflow: hidden;
	background: #fbfbfc;
	border: 1px solid var(--nsa-filete);
	box-shadow: 0 24px 56px -16px rgba(16, 24, 40, 0.3);
	animation: nsa-chega 0.18s ease-out;
}

#ns-assistente .nsa-quadro,
#ns-assistente .nsa-quadro iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

#ns-assistente .nsa-fechar {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--nsa-fraco);
	cursor: pointer;
	display: grid;
	place-items: center;
}

#ns-assistente .nsa-fechar:hover {
	background: #f2f4f7;
	color: var(--nsa-grafite);
}

#ns-assistente .nsa-tela {
	height: 100%;
	overflow-y: auto;
	padding: 56px 28px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background: #fff;
}

#ns-assistente .nsa-tela[data-tela="carregando"] {
	align-items: center;
	gap: 12px;
	color: var(--nsa-fraco);
}

#ns-assistente .nsa-tela p {
	margin: 0;
}

#ns-assistente .nsa-giro {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--nsa-turquesa);
	border-top-color: transparent;
	animation: nsa-gira 0.8s linear infinite;
}

#ns-assistente .nsa-titulo {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--nsa-grafite);
}

#ns-assistente .nsa-texto {
	margin-top: 8px !important;
	color: var(--nsa-fraco);
	font-size: 14px;
}

#ns-assistente .nsa-entrar {
	justify-content: flex-start;
	padding-top: 64px;
}

#ns-assistente .nsa-passo {
	margin-top: 24px;
}

#ns-assistente .nsa-google {
	min-height: 44px;
	display: flex;
	justify-content: center;
}

#ns-assistente .nsa-ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: #98a2b3;
	font-size: 12px;
}

#ns-assistente .nsa-ou::before,
#ns-assistente .nsa-ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--nsa-filete);
}

#ns-assistente .nsa-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

#ns-assistente .nsa-rotulo {
	font-size: 13px;
	font-weight: 500;
	color: var(--nsa-texto);
}

/* 16px: menos que isso o Safari do iPhone dá zoom na página ao tocar no campo. */
#ns-assistente .nsa-campo {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: var(--nsa-grafite);
	font-size: 16px;
	line-height: 1;
	box-shadow: none;
	outline: none;
}

#ns-assistente .nsa-campo:focus {
	border-color: var(--nsa-turquesa);
	box-shadow: 0 0 0 3px rgba(66, 213, 222, 0.2);
}

#ns-assistente .nsa-campo-codigo {
	letter-spacing: 0.3em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

#ns-assistente .nsa-botao-acao {
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: var(--nsa-grafite);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#ns-assistente .nsa-botao-acao:hover {
	background: var(--nsa-grafite-2);
}

#ns-assistente .nsa-botao-acao:disabled {
	opacity: 0.6;
	cursor: default;
}

#ns-assistente .nsa-tela[data-tela="erro"] .nsa-botao-acao {
	align-self: center;
	margin-top: 20px;
}

#ns-assistente .nsa-ocupado {
	position: relative;
	color: transparent !important;
}

#ns-assistente .nsa-ocupado::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	border-top-color: transparent;
	animation: nsa-gira 0.8s linear infinite;
}

#ns-assistente .nsa-ajuda {
	margin-top: 12px !important;
	color: var(--nsa-fraco);
	font-size: 13px;
}

#ns-assistente .nsa-recado {
	margin-top: 14px !important;
	color: #b54708;
	font-size: 13px;
}

#ns-assistente .nsa-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--nsa-texto);
	font-size: 13px;
	font-weight: 500;
	/* O tema tira o sublinhado de todo link com !important; aqui o link do painel e o
	   botão com cara de link precisam ficar iguais. */
	text-decoration: underline !important;
	text-underline-offset: 2px;
	cursor: pointer;
}

#ns-assistente .nsa-link:hover {
	color: var(--nsa-grafite);
}

#ns-assistente .nsa-senha {
	align-self: center;
	margin-top: 22px;
}

#ns-assistente .nsa-voltar {
	align-self: center;
	margin-top: 12px;
	color: var(--nsa-fraco);
}

/* A fala que espera o login, pra pessoa ver que ela não se perdeu. */
#ns-assistente .nsa-esperando {
	margin-top: 16px !important;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--nsa-fundo);
	color: var(--nsa-texto);
	font-size: 13px;
	text-align: left;
	overflow-wrap: anywhere;
}

@keyframes nsa-chega {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@keyframes nsa-gira {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	#ns-assistente .nsa-painel,
	#ns-assistente .nsa-botao,
	#ns-assistente .nsa-fundo,
	#ns-assistente .nsa-corpo::after {
		animation: none !important;
	}

	#ns-assistente .nsa-frase,
	#ns-assistente .nsa-corpo,
	#ns-assistente .nsa-glow {
		transition: none !important;
	}
}

#ns-assistente .nsa-fundo,
#ns-assistente .nsa-alca {
	display: none;
}

/* ── Celular: o painel é uma folha que sobe do rodapé ─────────────────────── */

@media (max-width: 640px) {
	#ns-assistente .nsa-botao {
		right: 16px;
		bottom: calc(16px + var(--nsa-consent, 0px));
	}

	/* A folha cobre a tela inteira: aberta, fica por cima do banner de cookies (que
	   volta quando o chat fecha), em vez de subir junto. */
	#ns-assistente.nsa-aberto {
		z-index: 1090;
	}

	#ns-assistente.nsa-aberto .nsa-botao {
		display: none;
	}

	/* O espaço de cima mostra a página escurecida: tocar ali fecha. */
	#ns-assistente .nsa-fundo {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(16, 24, 40, 0.45);
		animation: nsa-aparece 0.2s ease-out;
	}

	#ns-assistente .nsa-painel {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(100dvh - 56px);
		border-radius: 16px 16px 0 0;
		border: 0;
		display: flex;
		flex-direction: column;
		box-shadow: 0 -12px 40px -12px rgba(16, 24, 40, 0.35);
		animation: nsa-sobe 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
		transition: transform 0.2s ease;
	}

	#ns-assistente .nsa-painel[hidden] {
		display: none !important;
	}

	#ns-assistente .nsa-painel.nsa-arrastando {
		transition: none;
	}

	/* A alça: a faixa de cima da folha, fora do chat, que se puxa pra baixo. */
	#ns-assistente .nsa-alca {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 auto;
		height: 20px;
		background: #fff;
		cursor: grab;
		touch-action: none;
	}

	#ns-assistente .nsa-alca span {
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: #d0d5dd;
	}

	#ns-assistente .nsa-quadro,
	#ns-assistente .nsa-tela {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}

	#ns-assistente .nsa-tela {
		padding: 44px 20px 24px;
	}

	#ns-assistente .nsa-fechar {
		top: 26px;
	}

	/* Teclado aberto (assistente.js, ajustarAoTeclado): a folha mantém o topo e
	   termina em cima do teclado. O fundo segue escuro acima dela e, dos últimos
	   600px pra baixo (atrás do teclado e das barras flutuantes), tem a cor do chat. */
	#ns-assistente.nsa-teclado .nsa-painel {
		bottom: auto;
		animation: none;
	}

	#ns-assistente.nsa-teclado .nsa-fundo {
		inset: auto 0;
		background: linear-gradient(rgba(16, 24, 40, 0.45) calc(100% - 600px), #fbfbfc calc(100% - 600px));
		animation: none;
	}
}

/* Com o chat na página, a avaliação do site é feita dentro dele: o botão fixo
   "Avalie sua experiência" do tema (template/modal-feedback.php) sai de cena. */
html.nsa-ativo .feedback-container {
	display: none !important;
}

/* A página atrás da folha não rola junto. */
html.nsa-trava,
html.nsa-trava body {
	overflow: hidden !important;
}

@keyframes nsa-sobe {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes nsa-aparece {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* O ângulo do anel que acende (precisa ser registrado pra poder animar). */
@property --nsa-giro {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes nsa-acende {
	to { --nsa-giro: 360deg; }
}