/**
 * Dossiê de Vaga com IA — Fase 3 (v1.95.2).
 * Injeção de UI: cartão de gatilho + Painel Off-Canvas (candidatura
 * externa), Checklist do CV (pré-submissão interna) e Accordion de
 * Entrevista (pós-submissão interna / dentro do Painel Off-Canvas).
 * Carregado só nas páginas intermédias de candidatura
 * (get_query_var('cais_application_page'), functions.php) — nunca na
 * página normal da vaga.
 *
 * Tokens mapeados para variables.css real, nunca valores novos —
 * `--color-primary-light` deliberadamente NUNCA usado como fundo aqui:
 * é intocado no Modo Escuro (variables.css, v1.93.0), o mesmo padrão que
 * já causou o "Fantasma Branco" do Perfil da Empresa (v1.94.0) — evitado
 * de propósito nesta fase nova.
 */

/* ============ Cartões de Gatilho (candidatura externa) ============
   v1.95.4 — 2 gatilhos distintos (CV / Entrevista), lado a lado em
   grelha responsiva, nunca um cartão único. */

.cais-ai-dossier-triggers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

/*
 * ============ Botão Premium (.cais-btn-premium, v1.95.5, cores
 * configuráveis desde v1.95.6) ============
 * Design unificado partilhado por AMBOS os contextos (candidatura
 * externa e interna) e pelos 2 modos de exibição (gatilho de drawer OU
 * link para a Página Dedicada) — nunca 2 implementações visuais
 * divergentes. `.cais-ai-dossier-trigger` (v1.95.2-v1.95.4) deixou de
 * ter qualquer CSS próprio — a classe é mantida só como gancho funcional
 * para assets/js/ai-dossier.js (querySelector), toda a aparência agora
 * vive exclusivamente aqui.
 *
 * v1.95.6 — bug real corrigido: `background: var(--color-heading, #0f172a)`
 * parecia seguro (a v1.95.5 assumiu o valor de MODO CLARO de
 * --color-heading, #0f172a, como um "fundo escuro fixo"), mas
 * --color-heading é redefinida no bloco html[data-theme="dark"]
 * (variables.css) para #f8fafc — quase-branco, por ser semanticamente a
 * cor do TEXTO dos títulos, que tem de ficar clara em fundo escuro. O
 * botão ficava por isso branco-sobre-branco no Modo Escuro (texto também
 * claro via --color-primary-contrast). Corrigido usando cores LITERAIS
 * fixas (#0f172a/#ffffff, agora configuráveis via Customizer,
 * cais_get_ai_features_inline_css(), functions.php) em vez de qualquer
 * variável que possa inverter-se com o tema — e reforçado com um
 * override explícito e forçado em html[data-theme="dark"] mais abaixo,
 * que nunca depende da escolha do admin. `var(--color-card)` (sugerida
 * numa diretiva anterior) NUNCA existe neste tema — confirmado por
 * auditoria repetida (v1.92.0/v1.93.0/v1.94.0/v1.95.5).
 *
 * Ícone/seta usam `currentColor` (nunca --color-primary-contrast) — API
 * mais simples e mais robusta: acompanham SEMPRE a cor de texto real do
 * botão, seja o default ou uma escolha do Customizer, sem precisar de
 * nenhuma lógica de contraste própria.
 */

.cais-btn-premium {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	max-width: 100%;
	background-color: #0f172a;
	color: #ffffff;
	border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	font-family: var(--font-body);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent),
		0 10px 24px -12px rgba(0, 0, 0, 0.45);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cais-btn-premium:hover,
.cais-btn-premium:focus-visible {
	border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent),
		0 14px 30px -12px rgba(0, 0, 0, 0.5);
	transform: translateY(-1px);
	outline: none;
}

.cais-btn-premium-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, currentColor 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cais-btn-premium-icon svg {
	width: 20px;
	height: 20px;
}

.cais-btn-premium-text {
	flex: 1;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	line-height: 1.4;
}

.cais-btn-premium-arrow {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ============ Painel Off-Canvas (Drawer) ============ */

.cais-ai-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cais-ai-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.cais-ai-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	max-width: 100%; /* Proteção crítica — nunca deixa o painel exceder o viewport, mesmo antes do media query abaixo entrar em ação. */
	background: var(--color-background);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.cais-ai-drawer.is-open {
	transform: translateX(0);
}

.cais-ai-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}

.cais-ai-drawer-header h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--color-heading, var(--color-text));
	margin: 0;
}

.cais-ai-drawer-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-background);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.cais-ai-drawer-close:hover {
	background: var(--color-border);
}

.cais-ai-drawer-close svg {
	width: 16px;
	height: 16px;
}

.cais-ai-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
}

/* ============ Checklist do CV ============ */

.cais-ai-checklist {
	margin-bottom: var(--space-lg);
}

.cais-ai-checklist-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-heading, var(--color-text));
	margin-bottom: var(--space-sm);
}

.cais-ai-checklist-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cais-ai-checklist-list li {
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.5;
}

/*
 * Ponto simples, sem motivo (item de texto simples de um dossiê antigo,
 * OU um item novo sem "reason") — layout flex direto no <li>.
 * .cais-ai-checklist-details (abaixo) é o caso com motivo, um
 * <details> de bloco — nunca o mesmo <li> serve os 2 layouts ao mesmo
 * tempo (v1.95.6, retrocompatibilidade).
 */
.cais-ai-checklist-item-simple {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.cais-ai-checklist-list svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	color: var(--color-success, var(--color-primary));
}

/*
 * Ponto com motivo expansível (v1.95.6) — reaproveita .cais-ai-accordion-item
 * por completo (border/radius/padding/hover/chevron, já definidos
 * abaixo), só acrescenta display:flex ao <summary> para caber o ícone de
 * verificação ao lado do texto (a base de .cais-ai-accordion-item summary
 * nunca teve isto, pensada só para uma pergunta de texto simples).
 */
.cais-ai-checklist-details summary {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.cais-ai-checklist-details summary svg {
	margin-top: 0.15rem;
}

/* ============ Accordion de Entrevista ============ */

.cais-ai-interview-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-heading, var(--color-text));
	margin-bottom: var(--space-sm);
}

.cais-ai-interview-subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-md);
}

.cais-ai-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.cais-ai-accordion-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.15rem var(--space-md);
	background: var(--color-background);
	transition: border-color 0.15s ease;
}

.cais-ai-accordion-item[open] {
	border-color: var(--color-primary);
}

.cais-ai-accordion-item summary {
	cursor: pointer;
	list-style: none;
	padding: 0.75rem 1.6rem 0.75rem 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-text);
	position: relative;
}

.cais-ai-accordion-item summary::-webkit-details-marker {
	display: none;
}

.cais-ai-accordion-item summary::after {
	content: '';
	position: absolute;
	right: 0.1rem;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-text-secondary);
	border-bottom: 2px solid var(--color-text-secondary);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s ease;
}

.cais-ai-accordion-item[open] summary::after {
	transform: translateY(-35%) rotate(-135deg);
}

.cais-ai-accordion-content {
	padding: 0 0 var(--space-md);
}

/*
 * Resposta sugerida pela IA (v1.95.4) — etiqueta explícita + fundo
 * subtil para nunca ser confundida com texto normal da pergunta.
 * color-mix() com transparent (nunca uma cor sólida nova): resolve
 * automaticamente para qualquer tema/Modo Escuro, mesmo princípio já
 * usado em .cais-btn-premium-icon.
 */
.ai-strategy-answer-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	margin-bottom: 0.4rem;
}

.ai-strategy-answer {
	background: color-mix(in srgb, var(--color-primary) 6%, transparent);
	border-radius: var(--radius-sm);
	padding: var(--space-sm) var(--space-md);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* ============ Secção do Accordion na Página de Sucesso ============ */

.cais-ai-interview-section-success {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	text-align: left;
}

/* ============ Página Dedicada (v1.95.5, modo 'page') ============
   Layout focado, sem o resto do fluxo de candidatura — largura de
   leitura já usada no resto do tema (var(--cais-container-narrow-width),
   Sistema de Contentor, v1.84.0), nunca um valor novo inventado. */

.cais-ai-dedicated-page {
	max-width: var(--cais-container-narrow-width, 750px);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}

.cais-ai-dedicated-page-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
	margin-bottom: var(--space-lg);
}

.cais-ai-dedicated-page-back:hover {
	color: var(--color-primary);
}

.cais-ai-dedicated-page-back svg {
	width: 16px;
	height: 16px;
}

.cais-ai-dedicated-page-title {
	margin-bottom: var(--space-lg);
}

.cais-ai-dedicated-page-body {
	margin-bottom: var(--space-xl);
}

.cais-ai-dedicated-page-continue {
	justify-content: center;
}

/*
 * Rede de segurança (v1.95.6) — nunca a correção principal (essa é dar a
 * classe .cais-btn-premium-arrow ao <svg> da seta que nunca a tinha,
 * inc/ai-dossier-ui.php), mas garante que NENHUM <svg>/<img> desta página
 * consegue alguma vez repetir o mesmo bug (um <svg> sem width/height
 * nem classe cai no tamanho intrínseco do navegador, 300×150 por
 * omissão) — mesmo que uma fase futura acrescente um ícone aqui sem
 * lhe dar uma classe dedicada.
 */
.cais-ai-dedicated-page svg,
.cais-ai-dedicated-page img {
	max-width: 24px;
	height: auto;
	display: inline-block;
}

/*
 * ============ Modo Escuro (v1.95.6) ============
 * .cais-btn-premium usa cores LITERAIS fixas por omissão desde sempre
 * (v1.95.5), agora configuráveis via Customizer (functions.php,
 * cais_get_ai_features_inline_css()) — mas o Modo Escuro força SEMPRE
 * este override próprio, com !important, independentemente do que o
 * admin tenha escolhido: nunca é seguro assumir que uma cor picked a
 * olho para o Modo Claro vai continuar legível depois de o visitante
 * ligar o Modo Escuro (a causa raiz exata do bug relatado nesta
 * diretiva — --color-heading, reutilizada por engano como "fundo escuro
 * fixo" na v1.95.5, invertia para quase-branco no Modo Escuro).
 * --color-background/--color-text/--color-border são os tokens reais já
 * redefinidos dentro de html[data-theme="dark"] (variables.css) — o
 * botão passa a parecer um cartão normal do tema nesse modo, o que é
 * aceitável: a identidade "premium" só precisa de se destacar sobre um
 * fundo de página claro, já que em Modo Escuro toda a página já é
 * escura. `.cais-btn-premium-icon`/`.cais-btn-premium-arrow` NUNCA
 * precisam de um override próprio aqui — usam `currentColor`
 * (definido acima), por isso seguem automaticamente esta mudança de
 * `color` sem mais nenhuma regra.
 */
html[data-theme="dark"] .cais-btn-premium {
	background-color: var(--color-background) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
}

/* ============ Responsivo ============
   v1.95.4 — breakpoint alargado para 768px (era 560px): o painel
   ficava "esmagado" em telas médias/tablets/phablets entre 560-768px,
   onde a largura fixa (400px) já não sobra espaço suficiente para o
   resto da página, mas ainda não caía no full-width. Confirmado o bug
   por captura de ecrã real antes desta correção. */

@media (max-width: 768px) {
	.cais-ai-drawer {
		width: 100%;
	}
}