/*
 * Home: destaque do Zafarie CRM. Referencia: "Destaque CRM com IA na Home"
 * aprovado em 24/09/2026. So transform/opacity nas animacoes.
 */

.zf-hcrm {
	--c-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--c-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
	width: 100%;
	max-width: calc(var(--h-largura, 75rem) + 2 * var(--h-gutter, 2.5rem));
	margin: 0 auto;
	padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--h-gutter, 1.25rem) clamp(1rem, 0.5rem + 2vw, 2rem);
	box-sizing: border-box;
}
.zf-hcrm *, .zf-hcrm *::before, .zf-hcrm *::after { box-sizing: border-box; }

.zf-hcrm__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: center;
	border-radius: clamp(22px, 1rem + 1vw, 32px);
	box-shadow: 0 0 120px rgba(122, 30, 246, 0.22);
}
@media (min-width: 1024px) { .zf-hcrm__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* Borda luminosa em camada propria (a luz da uma volta na entrada). */
.zf-hcrm__borda { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; background: #6109d7; }
.zf-hcrm__borda::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160%;
	aspect-ratio: 1;
	background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(217, 191, 252, 0.95) 300deg, rgba(236, 140, 255, 1) 320deg, transparent 340deg);
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}
.zf-hcrm__borda::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background:
		radial-gradient(700px 420px at 100% 0%, rgba(122, 30, 246, 0.35), rgba(16, 15, 22, 0) 65%),
		radial-gradient(520px 360px at 0% 100%, rgba(180, 17, 188, 0.14), rgba(16, 15, 22, 0) 70%),
		#0f0d17;
}

/* ---------- Texto ---------- */

.zf-hcrm__texto { display: flex; flex-direction: column; gap: 1.375rem; }
.zf-hcrm__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zf-hcrm__marca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px 7px 8px;
	border-radius: 999px;
	background: rgba(122, 30, 246, 0.18);
	border: 1px solid #6109d7;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: #ffffff;
}
.zf-hcrm__novo { padding: 7px 12px; border-radius: 999px; background: #7a1ef6; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; }
.zf-hcrm h2 { margin: 0; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; color: #ffffff; text-wrap: balance; }
.zf-hcrm h2 .zf-destaque-roxo { color: #9a54f8; background: none; }
.zf-hcrm__lead { margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; color: #c4c4cc; }
.zf-hcrm__recursos { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .zf-hcrm__recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.zf-hcrm__recursos li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(13, 12, 19, 0.8); border: 1px solid #25232f; font-size: 0.875rem; font-weight: 700; line-height: 1.35; color: #ffffff; }
.zf-hcrm__recurso-icone { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; border: 1px solid #6109d7; background: #120227; }
.zf-hcrm__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0.375rem; }
.zf-hcrm__botao {
	min-height: 52px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.35s var(--c-ease), transform 0.35s var(--c-ease);
}
.zf-hcrm__botao--principal { background: #7a1ef6; color: #ffffff; box-shadow: 0 0 34px rgba(122, 30, 246, 0.45); }
.zf-hcrm__botao--principal:hover { background: #8b3bf7; color: #ffffff; transform: translate3d(0, -1px, 0); box-shadow: 0 0 44px rgba(122, 30, 246, 0.6); }
.zf-hcrm__botao--principal svg { transition: transform 0.35s var(--c-ease); }
.zf-hcrm__botao--principal:hover svg { transform: translate3d(3px, 0, 0); }
.zf-hcrm__botao--secundario { border: 1px solid #7a1ef6; color: #ffffff; }
.zf-hcrm__botao--secundario:hover { background: rgba(122, 30, 246, 0.14); color: #ffffff; }
.zf-hcrm__botao:focus-visible { outline: 2px solid #d9bffc; outline-offset: 3px; }
@media (max-width: 559px) { .zf-hcrm__botao { width: 100%; } }

/* ---------- Tela (abas) ---------- */

.zf-hcrm__tela { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.zf-hcrm__tela figcaption { font-size: 0.75rem; color: #71717a; text-align: right; }
.zf-hcrm__caixa {
	padding: clamp(14px, 0.6rem + 1vw, 22px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: rgba(13, 12, 19, 0.94);
	border: 1px solid #3b1d6e;
	border-radius: 22px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 60px rgba(122, 30, 246, 0.2);
}
.zf-hcrm__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zf-hcrm-abas { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #0a0a0f; border: 1px solid #25232f; }
.zf-hcrm-abas button {
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #a1a1aa;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.35s var(--c-ease);
}
.zf-hcrm-abas button:hover { color: #ffffff; }
.zf-hcrm-abas button[aria-selected="true"] { background: #7a1ef6; color: #ffffff; box-shadow: 0 0 18px rgba(122, 30, 246, 0.45); }
.zf-hcrm-abas button:focus-visible { outline: 2px solid #d9bffc; outline-offset: 2px; }
.zf-hcrm__selo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #2b045f; font-size: 0.75rem; font-weight: 700; color: #d9bffc; }

/* Sem JS as duas abas aparecem; com JS, so a ativa (mesma altura). */
.zf-hcrm__caixa.zf-hcrm-js { display: grid; grid-template-columns: minmax(0, 1fr); }
.zf-hcrm__caixa.zf-hcrm-js > .zf-hcrm__topo { grid-row: 1; }
.zf-hcrm__caixa.zf-hcrm-js > .zf-hcrm-painel { grid-row: 2; grid-column: 1; }
.zf-hcrm__caixa.zf-hcrm-js > .zf-hcrm-painel[hidden] { display: flex; visibility: hidden; opacity: 0; pointer-events: none; }
.zf-hcrm-painel { display: flex; flex-direction: column; gap: 10px; }

.zf-hcrm-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1c1a26; font-size: 0.75rem; font-weight: 800; color: #d9bffc; }

/* Conversa */
.zf-hcrm-contato { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #100f16; border: 1px solid #25232f; }
.zf-hcrm-contato__nome { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.zf-hcrm-contato__nome strong { font-size: 0.875rem; color: #ffffff; }
.zf-hcrm-contato__nome span { font-size: 0.6875rem; color: #8b8b95; }
.zf-hcrm-vivo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(122, 30, 246, 0.2); font-size: 0.6875rem; font-weight: 700; color: #e9d5ff; white-space: nowrap; }
.zf-hcrm-vivo > span { width: 7px; height: 7px; border-radius: 50%; background: #c084fc; box-shadow: 0 0 8px #c084fc; }
.zf-hcrm-chat { margin: 0; padding: 4px 2px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.zf-hcrm-msg { display: flex; }
.zf-hcrm-msg--lead { justify-content: flex-end; }
.zf-hcrm-msg__balao { max-width: 82%; padding: 8px 11px; border-radius: 14px; font-size: 0.875rem; line-height: 1.45; }
.zf-hcrm-msg--ia .zf-hcrm-msg__balao { border-top-left-radius: 4px; background: #1a1328; border: 1px solid #3b1d6e; color: #ffffff; }
.zf-hcrm-msg--lead .zf-hcrm-msg__balao { border-top-right-radius: 4px; background: #2b045f; color: #f3e8ff; }
.zf-hcrm-msg__autor { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #d9bffc; }
.zf-hcrm-msg__texto { display: block; }
.zf-hcrm-msg__hora { display: block; margin-top: 3px; font-size: 0.625rem; text-align: right; opacity: 0.6; }
.zf-hcrm-digitando { display: none; }

.zf-hcrm-resultado { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 14px; background: rgba(122, 30, 246, 0.12); border: 1px dashed #6109d7; font-size: 0.8125rem; line-height: 1.45; color: #d9bffc; }
.zf-hcrm-resultado strong { color: #ffffff; }

/* Leads */
.zf-hcrm-leads { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.zf-hcrm-lead { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; background: #100f16; border: 1px solid #25232f; }
.zf-hcrm-lead__nome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zf-hcrm-lead__nome strong { font-size: 0.875rem; color: #ffffff; }
.zf-hcrm-lead__nome span { font-size: 0.75rem; color: #8b8b95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zf-hcrm-lead__score { display: flex; align-items: center; gap: 8px; }
.zf-hcrm-lead__score strong { min-width: 28px; text-align: right; font-size: 1.25rem; font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; }
.zf-hcrm-temp { padding: 4px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; }
.zf-hcrm-temp--quente { background: rgba(122, 30, 246, 0.25); color: #e9d5ff; }
.zf-hcrm-temp--morno { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.zf-hcrm-temp--frio { background: #1c1a26; color: #a1a1aa; }

/* =====================================================================
 * Movimento (so com html.zf-mo e o JS ativo)
 * ================================================================== */

/* Borda: uma volta de luz quando o card aparece. */
.zf-hcrm__card.zf-hcrm-visto .zf-hcrm__borda::before { animation: zf-hcrm-gira 2.6s cubic-bezier(0.45, 0, 0.25, 1) 0.4s both; }
@keyframes zf-hcrm-gira {
	0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; }
}

/* Conversa: as mensagens entram em sequencia (o JS controla a ordem). */
.zf-hcrm-roteiro .zf-hcrm-msg:not(.zf-hcrm-on) { display: none; }
.zf-hcrm-roteiro .zf-hcrm-msg.zf-hcrm-on .zf-hcrm-msg__balao { animation: zf-hcrm-msg 0.5s var(--c-mola) both; }
@keyframes zf-hcrm-msg { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.92); } }
.zf-hcrm-roteiro .zf-hcrm-painel[data-zf-hcrm-painel="0"] .zf-hcrm-resultado:not(.zf-hcrm-on) { opacity: 0; transform: translate3d(0, 8px, 0); }
.zf-hcrm-roteiro .zf-hcrm-painel[data-zf-hcrm-painel="0"] .zf-hcrm-resultado { transition: opacity 0.4s ease, transform 0.5s var(--c-ease); }
.zf-hcrm-msg--lead .zf-hcrm-msg__balao { transform-origin: right bottom; }
.zf-hcrm-msg--ia .zf-hcrm-msg__balao { transform-origin: left bottom; }
.zf-hcrm-roteiro .zf-hcrm-painel[data-zf-hcrm-painel="0"] .zf-hcrm-resultado.zf-hcrm-on { animation: zf-hcrm-acende 1.4s ease-out 0.2s both; }
@keyframes zf-hcrm-acende {
	0%, 100% { box-shadow: 0 0 0 0 rgba(154, 84, 248, 0); }
	35% { box-shadow: 0 0 26px 4px rgba(154, 84, 248, 0.45); }
}

/* A conversa guarda a altura final: o card nao muda de tamanho enquanto as mensagens entram. */
.zf-hcrm-roteiro .zf-hcrm-chat { min-height: var(--zf-hcrm-altura, auto); }

/* "digitando..." antes de cada resposta da IA. */
.zf-hcrm-roteiro .zf-hcrm-digitando.zf-hcrm-on {
	display: inline-flex;
	align-self: flex-start;
	gap: 4px;
	padding: 10px 12px;
	border-radius: 14px;
	border-top-left-radius: 4px;
	background: #1a1328;
	border: 1px solid #3b1d6e;
}
.zf-hcrm-digitando span { width: 6px; height: 6px; border-radius: 50%; background: #c084fc; animation: zf-hcrm-ponto 1s ease-in-out infinite; }
.zf-hcrm-digitando span:nth-child(2) { animation-delay: 0.15s; }
.zf-hcrm-digitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes zf-hcrm-ponto {
	0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0); }
	50% { opacity: 1; transform: translate3d(0, -3px, 0); }
}

/* Leads: entram em cascata ao abrir a aba. */
.zf-hcrm-painel.zf-hcrm-troca > * { animation: zf-hcrm-entra 0.5s var(--c-ease) both; }
.zf-hcrm-painel.zf-hcrm-troca .zf-hcrm-lead { animation: zf-hcrm-entra 0.55s var(--c-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes zf-hcrm-entra { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

@media (prefers-reduced-motion: reduce) {
	.zf-hcrm *, .zf-hcrm *::before, .zf-hcrm *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Ajustes finos */
.zf-hcrm-resultado > span { flex: 1 1 12rem; }
.zf-hcrm-abas button { white-space: nowrap; }
.zf-hcrm-contato__nome strong, .zf-hcrm-contato__nome span { white-space: nowrap; }
@media (max-width: 479px) {
	.zf-hcrm { padding-inline: 12px; }
	.zf-hcrm__card { padding: 22px 16px; }
	.zf-hcrm__caixa { padding: 10px; border-radius: 18px; }
	.zf-hcrm__selo { display: none; }
	.zf-hcrm-abas { width: 100%; }
	.zf-hcrm-abas button { flex: 1 1 0; padding: 0 8px; font-size: 0.75rem; }
	.zf-hcrm-msg__balao { max-width: 88%; font-size: 0.8125rem; }
	.zf-hcrm-lead { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
	.zf-hcrm-avatar { width: 34px; height: 34px; }
	.zf-hcrm-temp { display: none; }
}