/* ==========================================================================
   Curador Melhores Marcas — CSS público do Chat de Curadoria [curador_ia]

   REGRA: este ficheiro NÃO redefine nenhuma classe do CSS Definitivo V.12
   (.mm-product-section, .compare-table, .btn-amazon, .t-tip, ...). Esses
   estilos vêm do tema Wolf WP. Aqui só existem classes .cmm-* (interface do
   chat) e pequenos ajustes de CONTEXTO dentro de .cmm-curador.

   Cor principal: variável --cmm-primary, injetada pelo shortcode a partir do
   painel. Variações (hover, fundo suave, foco) derivam dela com color-mix().

   ⚠️ TOOLTIPS: o .t-tip-text do tema usa position:fixed. Nenhum ancestral do
   chat pode ter transform/filter/contain/backdrop-filter PERMANENTES (isso
   prende o tooltip dentro do balão). Por isso as animações de entrada não
   usam fill-mode: ao terminar, o transform volta a "none".

   Estados (data-state na .cmm-curador):
     idle → boas-vindas + caixa de mensagem grande + sugestões.
     chat → painel com altura fixa, barra no topo, rolagem e caixa fixa embaixo.
   ========================================================================== */

.cmm-curador {
	--cmm-primary: #667eea;
	--cmm-primary-dark: color-mix(in srgb, var(--cmm-primary) 82%, #000);
	--cmm-primary-soft: color-mix(in srgb, var(--cmm-primary) 10%, #fff);
	--cmm-primary-ring: color-mix(in srgb, var(--cmm-primary) 28%, transparent);
	--cmm-ink: #2c3e50;
	--cmm-muted: #6b7a89;
	--cmm-line: #e2e8f0;
	--cmm-canvas: #f7f8fb;
	--cmm-chat-h: clamp(540px, 82vh, 860px);
	max-width: 980px;
	margin: 30px auto;
	scroll-margin-top: 90px;
}

.cmm-curador *,
.cmm-curador *::before,
.cmm-curador *::after { box-sizing: border-box; }

.cmm-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   1. PAINEL
   ------------------------------------------------------------------------ */
.cmm-chat {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cmm-line);
	border-radius: 24px;
	background:
		radial-gradient(120% 70% at 50% 0%, var(--cmm-primary-soft) 0%, #ffffff 60%),
		#ffffff;
	box-shadow: 0 10px 40px rgba(44, 62, 80, 0.07);
	overflow: hidden;
}

/* Modo conversa: altura fixa, a rolagem acontece dentro do painel. */
.cmm-curador[data-state="chat"] .cmm-chat {
	height: var(--cmm-chat-h);
	background: var(--cmm-canvas);
}

/* --------------------------------------------------------------------------
   2. BARRA DO CURADOR (só no modo conversa)
   ------------------------------------------------------------------------ */
.cmm-chat__bar {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 12px 18px;
	background: #fff;
	border-bottom: 1px solid var(--cmm-line);
	flex-shrink: 0;
}
.cmm-curador[data-state="chat"] .cmm-chat__bar { display: flex; }

.cmm-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, var(--cmm-primary) 0%, var(--cmm-primary-dark) 100%);
	box-shadow: 0 4px 12px var(--cmm-primary-ring);
}
.cmm-avatar--sm { width: 32px; height: 32px; font-size: .95rem; margin-top: 22px; }

.cmm-chat__id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.cmm-chat__name { font-size: 1rem; font-weight: 800; color: var(--cmm-ink); }
.cmm-chat__status { font-size: .78rem; color: var(--cmm-muted); }
.cmm-chat__status::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: #22c55e;
	vertical-align: 1px;
}

.cmm-curador .cmm-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
	color: var(--cmm-primary-dark);
	background: var(--cmm-primary-soft);
	border: 1px solid var(--cmm-primary-ring);
	border-radius: 50px;
	padding: 9px 14px;
	transition: background .2s, color .2s;
}
.cmm-curador .cmm-reset:hover,
.cmm-curador .cmm-reset:focus-visible { background: var(--cmm-primary); color: #fff; outline: none; }

/* --------------------------------------------------------------------------
   3. ÁREA DE ROLAGEM + BOAS-VINDAS
   ------------------------------------------------------------------------ */
.cmm-chat__scroll {
	position: relative; /* offsetParent das mensagens (scrollToMessage). */
	padding: 48px 28px 6px;
	overscroll-behavior: contain;
}
.cmm-curador[data-state="chat"] .cmm-chat__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 22px 12px;
	scroll-behavior: auto;
}

.cmm-welcome { text-align: center; }
.cmm-curador[data-state="chat"] .cmm-welcome { display: none; }

.cmm-welcome__eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cmm-primary-dark);
	background: var(--cmm-primary-soft);
	border: 1px solid var(--cmm-primary-ring);
	padding: 6px 14px;
	border-radius: 50px;
	margin-bottom: 14px;
}

/* Neutraliza a sublinha 3px do h2 global do tema apenas aqui. */
.cmm-curador .cmm-welcome__title {
	font-size: clamp(1.7rem, 3.6vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.15;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	display: block;
	width: auto;
}

.cmm-curador .cmm-welcome__subtitle {
	max-width: 620px;
	margin: 0 auto 8px;
	font-size: 1.05rem;
	color: var(--cmm-muted) !important;
}

.cmm-thread { display: flex; flex-direction: column; gap: 18px; }
.cmm-curador[data-state="idle"] .cmm-thread { display: none; }

/* --------------------------------------------------------------------------
   4. MENSAGENS
   ------------------------------------------------------------------------ */
.cmm-msg {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	animation: cmm-in .32s ease-out; /* sem fill-mode — ver aviso dos tooltips. */
}
.cmm-msg.no-anim { animation: none; }

/* Visitante — à direita */
.cmm-msg--user { justify-content: flex-end; }
.cmm-msg--user .cmm-msg__bubble {
	max-width: min(78%, 620px);
	padding: 12px 16px;
	border-radius: 18px 18px 4px 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--cmm-primary) 0%, var(--cmm-primary-dark) 100%);
	box-shadow: 0 6px 16px var(--cmm-primary-ring);
	font-size: 1rem;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Curador — à esquerda */
.cmm-msg__col { flex: 1 1 auto; min-width: 0; }

.cmm-msg__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px 4px;
	font-size: .78rem;
	color: var(--cmm-muted);
}
.cmm-msg__meta strong { color: var(--cmm-ink); font-size: .85rem; }
.cmm-msg__mode {
	font-weight: 700;
	color: var(--cmm-primary-dark);
	background: var(--cmm-primary-soft);
	border-radius: 50px;
	padding: 2px 10px;
}
.cmm-msg__cached { font-weight: 700; }

.cmm-msg--bot .cmm-msg__bubble {
	background: #fff;
	border: 1px solid var(--cmm-line);
	border-radius: 4px 18px 18px 18px;
	padding: 20px 22px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
	max-width: 100%;
}

/* Tipografia do balão (o tema usa 1.1rem nos <p> de artigo). */
.cmm-curador .cmm-answer__body p,
.cmm-curador .cmm-answer p { font-size: 1rem; line-height: 1.75; }
.cmm-answer__body > :last-child { margin-bottom: 0; }
.cmm-curador .cmm-answer__list { margin: 0 0 15px 1.2em; padding: 0; }
.cmm-curador .cmm-answer__list li { margin-bottom: 8px; line-height: 1.7; }
.cmm-curador .cmm-answer__h { margin: 24px 0 12px; font-size: 1.12rem; color: var(--cmm-ink) !important; }
.cmm-curador .cmm-answer__body code { background: #f1f4f8; padding: 2px 6px; border-radius: 4px; font-size: .92em; }

/* O 1º parágrafo/callout não herda margem superior do navegador. */
.cmm-curador .cmm-answer p { margin-top: 0; }
.cmm-answer__body > :first-child { margin-top: 0 !important; }

/* Componentes do Motor dentro do balão: margens mais compactas
   (o tema usa margin:30px 0 !important na .compare-table-wrapper). */
.cmm-curador .cmm-answer .compare-table-wrapper { margin: 12px 0 26px !important; }
.cmm-answer .compare-table th img { box-shadow: none; }
.cmm-answer .pros-cons-grid { margin-top: 18px !important; gap: 22px !important; }
.cmm-answer .pros-cons-grid li { font-size: .95rem; line-height: 1.6; }
.cmm-answer > :last-child { margin-bottom: 0 !important; }

/* Citações [1] estilo Perplexity. */
.cmm-curador a.cmm-cite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35em;
	height: 1.35em;
	padding: 0 .3em;
	margin: 0 1px;
	font-size: .72em;
	font-weight: 800;
	line-height: 1;
	vertical-align: super;
	color: var(--cmm-primary-dark);
	background: var(--cmm-primary-soft);
	border: 1px solid var(--cmm-primary-ring);
	border-radius: 6px;
	text-decoration: none;
}
.cmm-curador a.cmm-cite:hover { background: var(--cmm-primary); color: #fff; text-decoration: none; }

/* Tooltips do tema: no telemóvel não há hover — o toque dá foco (tabindex=0). */
.cmm-curador .t-tip:focus { outline: none; }
.cmm-curador .t-tip:focus .t-tip-text,
.cmm-curador .t-tip:focus-within .t-tip-text {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%) translateY(0) !important;
}

/* --------------------------------------------------------------------------
   5. "DIGITANDO" — SHIMMER
   ------------------------------------------------------------------------ */
.cmm-typing { display: grid; gap: 12px; min-width: min(100%, 420px); }

.cmm-typing__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: .95rem;
	color: var(--cmm-ink);
}

.cmm-typing__orb {
	flex-shrink: 0;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--cmm-primary), var(--cmm-primary-soft), var(--cmm-primary));
	animation: cmm-spin 1s linear infinite;
	-webkit-mask: radial-gradient(circle, transparent 42%, #000 44%);
	        mask: radial-gradient(circle, transparent 42%, #000 44%);
}

.cmm-typing__text::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: cmm-dots 1.4s steps(4, end) infinite;
}

.cmm-skel {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 40%, #eef1f5 80%);
	background-size: 300% 100%;
	animation: cmm-shimmer 1.4s ease-in-out infinite;
}
.cmm-skel--line  { width: 100%; height: 13px; }
.cmm-skel--short { width: 62%; }
.cmm-skel--block { width: 100%; height: 96px; margin-top: 4px; border-radius: 12px; }

@keyframes cmm-in      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cmm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes cmm-spin    { to { transform: rotate(360deg); } }
@keyframes cmm-dots    { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

/* --------------------------------------------------------------------------
   6. ERROS (balão do Curador)
   ------------------------------------------------------------------------ */
.cmm-msg--bot .cmm-msg__bubble--error {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff8e1;
	border-color: #ffe08a;
	border-left: 4px solid #ffb300;
}
.cmm-error__icon { font-size: 1.4rem; line-height: 1; }
.cmm-curador .cmm-error__msg { margin: 0; font-weight: 700; font-size: 1rem; color: var(--cmm-ink) !important; }

.cmm-curador .cmm-retry {
	cursor: pointer;
	margin-top: 10px;
	font-weight: 800;
	font-size: .9rem;
	border-radius: 50px;
	padding: 9px 18px;
	color: var(--cmm-primary-dark);
	background: #fff;
	border: 2px solid var(--cmm-primary);
	transition: background .2s, color .2s;
}
.cmm-curador .cmm-retry:hover { background: var(--cmm-primary); color: #fff; }

/* --------------------------------------------------------------------------
   7. SUGESTÕES (chips) — iniciais e de continuação
   ------------------------------------------------------------------------ */
.cmm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cmm-chips--start { justify-content: center; margin: 14px auto 0; max-width: 760px; }
.cmm-curador[data-state="chat"] .cmm-chips--start { display: none; }

.cmm-curador .cmm-chip {
	cursor: pointer;
	font-size: .88rem;
	font-weight: 600;
	text-align: left;
	color: var(--cmm-ink);
	background: #fff;
	border: 1px solid var(--cmm-line);
	border-radius: 50px;
	padding: 8px 14px;
	line-height: 1.25;
	transition: border-color .2s, color .2s, background .2s;
}
.cmm-curador .cmm-chip:hover,
.cmm-curador .cmm-chip:focus-visible {
	border-color: var(--cmm-primary);
	color: var(--cmm-primary-dark);
	background: var(--cmm-primary-soft);
	outline: none;
}
.cmm-curador.is-busy .cmm-chip { opacity: .55; pointer-events: none; }

.cmm-followups { margin: 12px 0 0 4px; }
.cmm-followups__label {
	display: block;
	margin-bottom: 8px;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--cmm-muted);
}

/* --------------------------------------------------------------------------
   8. FONTES (análises usadas) — CSS GRID
   ------------------------------------------------------------------------ */
.cmm-sources { margin: 14px 0 0 4px; }
.cmm-curador .cmm-sources__title {
	margin: 0 0 10px;
	font-size: .78rem !important;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--cmm-muted) !important;
}

.cmm-sources__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
}

.cmm-curador a.cmm-source {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--cmm-line);
	border-radius: 12px;
	overflow: hidden;
	color: var(--cmm-ink);
	text-decoration: none;
	font-weight: 400;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
	transition: border-color .25s ease, box-shadow .25s ease;
	scroll-margin-top: 20px;
}
.cmm-curador a.cmm-source:hover,
.cmm-curador a.cmm-source:focus-visible {
	border-color: var(--cmm-primary);
	box-shadow: 0 10px 24px rgba(44, 62, 80, .12);
	text-decoration: none;
	outline: none;
}
.cmm-curador a.cmm-source:target { border-color: var(--cmm-primary); box-shadow: 0 0 0 4px var(--cmm-primary-ring); }

.cmm-source__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--cmm-primary-soft), #f4f6f9);
	overflow: hidden;
}
.cmm-curador .cmm-source__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.cmm-source__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	opacity: .6;
}

.cmm-source__num {
	position: absolute;
	top: 8px;
	left: 8px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: var(--cmm-primary);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.cmm-source__body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.cmm-source__label { font-size: .68rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--cmm-primary-dark); }
.cmm-source__title { font-size: .95rem; font-weight: 800; line-height: 1.35; color: var(--cmm-ink); }
.cmm-source__excerpt {
	font-size: .84rem;
	line-height: 1.5;
	color: var(--cmm-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cmm-source__cta { margin-top: auto; padding-top: 6px; font-size: .84rem; font-weight: 800; color: var(--cmm-primary-dark); }

/* --------------------------------------------------------------------------
   9. CAIXA DE MENSAGEM (dock)
   ------------------------------------------------------------------------ */
.cmm-dock { padding: 18px 28px 22px; flex-shrink: 0; }

.cmm-curador[data-state="chat"] .cmm-dock {
	padding: 12px 18px 12px;
	background: #fff;
	border-top: 1px solid var(--cmm-line);
}

.cmm-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 8px 8px 20px;
	background: #fff;
	border: 2px solid var(--cmm-line);
	border-radius: 28px;
	box-shadow: 0 12px 32px rgba(44, 62, 80, 0.10);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cmm-curador[data-state="chat"] .cmm-composer {
	max-width: none;
	box-shadow: none;
	border-radius: 22px;
	padding: 6px 6px 6px 16px;
}
.cmm-composer:focus-within {
	border-color: var(--cmm-primary);
	box-shadow: 0 0 0 5px var(--cmm-primary-ring), 0 12px 32px rgba(44, 62, 80, 0.10);
}
.cmm-curador[data-state="chat"] .cmm-composer:focus-within { box-shadow: 0 0 0 4px var(--cmm-primary-ring); }

.cmm-curador .cmm-composer__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	max-height: 160px;
	resize: none;
	overflow-y: auto;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--cmm-ink);
	padding: 11px 2px;
	margin: 0;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
}
.cmm-curador[data-state="chat"] .cmm-composer__input { font-size: 1rem; padding: 9px 2px; }
.cmm-composer__input::placeholder { color: #9aa7b4; opacity: 1; }

.cmm-curador .cmm-composer__send {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--cmm-primary) 0%, var(--cmm-primary-dark) 100%);
	box-shadow: 0 8px 20px var(--cmm-primary-ring);
	transition: box-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
.cmm-curador[data-state="chat"] .cmm-composer__send { width: 42px; height: 42px; box-shadow: none; }
.cmm-curador .cmm-composer__send:hover { filter: brightness(1.08); }
.cmm-curador .cmm-composer__send:focus-visible { outline: 3px solid var(--cmm-primary); outline-offset: 3px; }
.cmm-curador .cmm-composer__send:disabled { opacity: .55; cursor: progress; filter: none; }

.cmm-curador .cmm-composer__hint {
	max-width: 760px;
	margin: 6px auto 0;
	min-height: 0;
	font-size: .85rem;
	text-align: center;
	color: #c0392b !important;
}
.cmm-curador .cmm-composer__hint:empty { display: none; }

.cmm-curador .cmm-chat__foot {
	max-width: 760px;
	margin: 14px auto 0;
	font-size: .74rem !important;
	line-height: 1.45;
	text-align: center;
	color: #98a3af !important;
}
.cmm-curador[data-state="chat"] .cmm-chat__foot { margin-top: 6px; font-size: .7rem !important; }

.cmm-noscript { text-align: center; color: var(--cmm-muted); }

/* --------------------------------------------------------------------------
   10. RESPONSIVO E ACESSIBILIDADE
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
	.cmm-curador { margin: 20px auto; --cmm-chat-h: min(88svh, 760px); }
	.cmm-chat { border-radius: 18px; }
	.cmm-chat__scroll { padding: 34px 16px 4px; }
	.cmm-dock { padding: 14px 14px 18px; }
	.cmm-curador[data-state="chat"] .cmm-chat__scroll { padding: 16px 12px 10px; }
	.cmm-curador[data-state="chat"] .cmm-dock { padding: 10px 10px; }
	.cmm-msg--bot .cmm-msg__bubble { padding: 16px 14px; }
	.cmm-msg--user .cmm-msg__bubble { max-width: 88%; }
	.cmm-chips--start { justify-content: flex-start; }
	.cmm-curador .cmm-pick { padding: 22px !important; }
}

@media (max-width: 560px) {
	.cmm-msg--bot > .cmm-avatar { display: none; } /* Mais largura para as tabelas. */
	.cmm-curador .cmm-reset span { display: none; }
	.cmm-curador .cmm-reset { padding: 9px 10px; }
	.cmm-chat__status { display: none; }
	.cmm-sources__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cmm-source__excerpt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cmm-msg, .cmm-skel, .cmm-typing__orb, .cmm-typing__text::after { animation: none; }
	.cmm-curador a.cmm-source, .cmm-curador .cmm-composer__send, .cmm-composer { transition: none; }
}