/* SmartChat AI — widget de frontend. Prefixo sca-* (core-do-projeto.md §19).
   Cor e raio vêm de --sca-cta/--sca-radius, definidos inline pelo PHP a
   partir da aba Aparência.

   NUNCA dark mode aqui (core-do-projeto.md §8.3.1) — o dark
   dourado é a marca do ADMIN Blackship, que só o dono do site vê. Este
   widget é uma ferramenta no site do CLIENTE FINAL, visível pro
   visitante dele — sempre claro/branco, sem relação nenhuma com a marca
   Blackship. Só a cor de destaque (botão + cabeçalho) é customizável. */
.sca-hidden { display: none; }

.sca-widget {
	--sca-bg: #FFFFFF;
	--sca-body-bg: #F4F5F7;
	--sca-line: #E4E6EA;
	--sca-text: #1C1E21;
	--sca-muted: #6B7280;
	--sca-success: #16A34A;
	--sca-header-ink: #FFFFFF;
	--sca-cta-ink: #FFFFFF;
	/* --sca-accent cai pro mesmo valor de --sca-cta quando o PHP não
	   define os dois separados (import antigo, config sem o campo novo)
	   — nunca fica sem cor. Ver split de cores abaixo. */
	--sca-accent: var(--sca-cta);
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Scrollbar customizada em qualquer documento onde o widget é a página
   inteira (?sca_preview=1 aberto direto numa aba, ou o iframe de preview
   do painel admin) — o corpo do chat (.sca-body) já tinha a própria desde
   a sexta rodada, mas o <html>/<body> do próprio documento do widget
   ainda podia mostrar a barra nativa se o conteúdo total passasse da
   viewport (core-do-projeto.md §16, "vale pra qualquer área com
   overflow", achado sétima rodada 2026-09-23). */
html, body { scrollbar-width: thin; scrollbar-color: #E4E6EA transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 7px; height: 7px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #E4E6EA; border-radius: 20px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #C7CBD1; }

.sca-launcher {
	position: fixed; bottom: 24px; width: 58px; height: 58px;
	border-radius: var(--sca-radius); background: var(--sca-cta); color: var(--sca-cta-ink);
	border: none; display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 999999;
}
.sca-pos-right .sca-launcher { right: 24px; }
.sca-pos-left .sca-launcher { left: 24px; }

/* Blindagem de SVGs do widget contra temas e resets globais do WordPress */
#sca-widget-root svg {
	vertical-align: middle !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-width: none !important;
	max-height: none !important;
	overflow: visible !important;
	box-sizing: content-box !important;
	pointer-events: none !important;
}

#sca-widget-root .sca-launcher svg {
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2px !important;
	color: var(--sca-cta-ink) !important;
}

#sca-widget-root .sca-launcher .sca-chat-icon {
	display: block !important;
}

#sca-widget-root .sca-launcher .sca-close-icon {
	display: none !important;
}

#sca-widget-root .sca-launcher.is-open .sca-chat-icon {
	display: none !important;
}

#sca-widget-root .sca-launcher.is-open .sca-close-icon {
	display: block !important;
}

#sca-widget-root .sca-input-row button svg,
#sca-widget-root #scaSendMessage svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2px !important;
	color: var(--sca-cta-ink) !important;
}

#sca-widget-root svg path {
	stroke: currentColor !important;
	stroke-width: inherit !important;
	fill: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	display: inline !important;
}

.sca-panel {
	position: fixed; bottom: 94px; width: 360px; max-width: calc(100vw - 48px);
	height: 520px; max-height: calc(100vh - 130px);
	/* --sca-radius também vale pro launcher (58x58) e pras bolhas de
	   mensagem — numa caixa grande (360x520) o mesmo valor no preset
	   "Pill" (999px) estoura pra metade da menor dimensão inteira,
	   virando uma cápsula/oval em vez de canto arredondado (achado
	   2026-09-22, "preview parece um ovo"). Capar em 20px preserva os
	   presets pequenos/médios (8/16px, sem mudança) e só limita os
	   grandes (28/999px) especificamente aqui, sem afetar launcher/bolhas. */
	background: var(--sca-bg); border: 1px solid var(--sca-line); border-radius: min(var(--sca-radius), 20px);
	display: flex; flex-direction: column; overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,.22); z-index: 999998;
	opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.sca-pos-right .sca-panel { right: 24px; }
.sca-pos-left .sca-panel { left: 24px; }
.sca-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ===== Tamanho da janela — opção da aba Aparência (sétima rodada,
   2026-09-23). "Grande" é o tamanho padrão (regras acima, sem mudança);
   "Compacto" é a alternativa menor pro cliente que achar o padrão grande
   demais. Mesma lógica do preset de raio: classe no #sca-widget-root,
   nunca inline. ===== */
.sca-size-pequeno .sca-panel { width: 320px; height: 460px; }

/* Cabeçalho: leva a cor "do resto" (--sca-accent), separada da cor dos
   botões (--sca-cta) desde a sétima rodada de feedback (2026-09-23,
   reabre o item de cor única da quinta rodada) — é onde ficam a
   imagem/logo e o nome do assistente, customizável pelo cliente final
   (core-do-projeto.md §8.3.1). */
.sca-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; background: var(--sca-accent); border-bottom: 1px solid var(--sca-line); flex-shrink: 0; }
.sca-head-left { display: flex; align-items: center; gap: 10px; flex: 0 1 80%; min-width: 0; }
.sca-avatar { width: 36px; height: 36px; border-radius: calc(var(--sca-radius) * .6); flex-shrink: 0; object-fit: cover; }
.sca-avatar-fallback { background: rgba(255,255,255,.25); color: var(--sca-header-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.sca-head-info { display: flex; flex-direction: column; min-width: 0; justify-content: center; flex: 1; overflow: hidden; }
.sca-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: var(--sca-header-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sca-desc { font-size: 11px; font-weight: 400; color: var(--sca-header-ink); opacity: .88; margin-top: 1px; line-height: 1.25; word-break: break-word; }
.sca-head-right { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; }
.sca-status { font-size: 11px; font-weight: 500; color: var(--sca-header-ink); opacity: .92; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.14); padding: 3px 8px; border-radius: 12px; }
.sca-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sca-success); display: inline-block; }

.sca-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--sca-body-bg); display: flex; flex-direction: column; gap: 10px; }
/* Scrollbar customizada — o nativo do navegador destoa do resto do
   widget desenhado (core-do-projeto.md, pedido do Allan 2026-09-22).
   Firefox e Chromium/WebKit cobertos, sem lib externa. */
.sca-body { scrollbar-width: thin; scrollbar-color: var(--sca-line) transparent; }
.sca-body::-webkit-scrollbar { width: 7px; }
.sca-body::-webkit-scrollbar-track { background: transparent; }
.sca-body::-webkit-scrollbar-thumb { background: var(--sca-line); border-radius: 20px; }
.sca-body::-webkit-scrollbar-thumb:hover { background: var(--sca-muted); }

/* font-weight explícito 400 — sem isso o peso vem do que o navegador/tema
   do site do cliente aplicar por padrão a <div>, podia sair mais pesado
   que o resto do widget (pedido do Allan, quinta rodada, 2026-09-22). */
.sca-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px !important; font-size: 13px; line-height: 1.5; font-weight: 400; word-break: break-word; overflow-wrap: anywhere; box-sizing: border-box; }
.sca-msg.bot { background: var(--sca-bg); border: 1px solid var(--sca-line); align-self: flex-start; color: var(--sca-text); border-bottom-left-radius: 4px !important; }
.sca-msg.user { background: var(--sca-cta); color: var(--sca-cta-ink); align-self: flex-end; border-bottom-right-radius: 4px !important; }

.sca-msg a:not(.sca-whatsapp-btn) { color: var(--sca-cta); text-decoration: underline; word-break: break-word; overflow-wrap: anywhere; }
.sca-msg.user a:not(.sca-whatsapp-btn) { color: inherit; }

.sca-msg .sca-md-p { margin: 0 0 6px; }
.sca-msg .sca-md-p:last-child { margin-bottom: 0; }
.sca-msg .sca-md-list { margin: 4px 0; padding-left: 18px; }
.sca-msg .sca-md-list:last-child { margin-bottom: 0; }
.sca-msg .sca-md-list li { margin-bottom: 2px; }
.sca-msg strong { font-weight: 600; }

.sca-handoff-options {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	gap: 8px !important;
	margin-top: 10px !important;
	box-sizing: border-box !important;
}

#sca-widget-root .sca-msg a.sca-whatsapp-btn,
#sca-widget-root .sca-whatsapp-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 11px 16px !important;
	background: #25D366 !important;
	color: #FFFFFF !important;
	border: none !important;
	outline: none !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 6px rgba(37, 211, 102, .3) !important;
	cursor: pointer !important;
}
#sca-widget-root .sca-msg a.sca-whatsapp-btn:hover,
#sca-widget-root .sca-whatsapp-btn:hover {
	background: #20BA5A !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	filter: brightness(1.05) !important;
}
#sca-widget-root .sca-whatsapp-btn svg,
#sca-widget-root .sca-msg a.sca-whatsapp-btn svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	fill: currentColor !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
}

#sca-widget-root .sca-continue-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 11px 16px !important;
	margin: 0 !important;
	background: #1e293b !important;
	color: #FFFFFF !important;
	border: 1px solid #334155 !important;
	outline: none !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 5px rgba(0,0,0,.15) !important;
	cursor: pointer !important;
	transition: background .15s ease !important;
}
#sca-widget-root .sca-continue-btn:hover {
	background: #0f172a !important;
	color: #FFFFFF !important;
}
#sca-widget-root .sca-continue-btn svg {
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	min-height: 15px !important;
	stroke: #FFFFFF !important;
	fill: none !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
}
#sca-widget-root .sca-continue-btn.sca-btn-clicked {
	opacity: .6 !important;
	pointer-events: none !important;
}

#sca-widget-root .sca-handoff-wait-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	background: #FFFFFF !important;
	color: #374151 !important;
	border: 1px solid #D1D5DB !important;
	outline: none !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
	cursor: pointer !important;
}
#sca-widget-root .sca-handoff-wait-btn:hover {
	background: #F9FAFB !important;
	border-color: #9CA3AF !important;
}
#sca-widget-root .sca-handoff-wait-btn:disabled {
	opacity: .6 !important;
	cursor: default !important;
}

/* Indicador "digitando" — versão própria (o kit do admin não é
   carregado no frontend), mesmo espírito do .bs-typing (core-do-projeto.md
   §8.4.2, padrão de loading em todo produto). */
.sca-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px; }
.sca-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--sca-muted); animation: sca-typing-bounce 1.1s ease-in-out infinite; }
.sca-typing span:nth-child(2) { animation-delay: .15s; }
.sca-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sca-typing-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5;} 30%{transform:translateY(-4px);opacity:1;} }

.sca-gate { padding: 18px 16px; border-top: 1px solid var(--sca-line); background: var(--sca-bg); flex-shrink: 0; }
.sca-gate-title { margin: 0 0 4px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: var(--sca-text); }
.sca-gate p { margin: 0 0 10px; font-size: 12px; color: var(--sca-muted); }
/* ===== "Modo gate" — enquanto a captação de lead ainda não foi
   preenchida, o corpo de mensagens (vazio, sem boas-vindas — ver
   SCA_Widget::render()) some e o título+formulário ocupam e centralizam
   verticalmente todo o espaço da janela, em vez de ficarem espremidos
   embaixo com uma área vazia grande acima (pedido do Allan, sétima
   rodada, 2026-09-23). A classe é aplicada no PHP (render inicial) e
   removida pelo JS assim que o gate é preenchido/resetado
   (assets/js/widget.js). ===== */
.sca-panel.sca-gate-mode #scaChatBody { display: none; }
.sca-panel.sca-gate-mode .sca-gate { flex: 1; display: flex; flex-direction: column; justify-content: center; border-top: none; }
.sca-gate input { width: 100%; background: var(--sca-body-bg); border: 1px solid var(--sca-line); border-radius: calc(var(--sca-radius) * .5); color: var(--sca-text); font-size: 13px; padding: 9px 12px; margin-bottom: 8px; box-sizing: border-box; }
.sca-gate input:focus { outline: none; border-color: var(--sca-cta); }
#sca-widget-root .sca-gate button,
#sca-widget-root #scaGateSubmit {
	width: 100% !important;
	background: var(--sca-cta) !important;
	color: #FFFFFF !important;
	border: none !important;
	outline: none !important;
	border-radius: var(--sca-radius) !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}
#sca-widget-root .sca-gate button:hover,
#sca-widget-root #scaGateSubmit:hover {
	filter: brightness(1.08) !important;
}

.sca-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--sca-line); background: var(--sca-bg); flex-shrink: 0; align-items: center; }
/* Precisa de especificidade MAIOR que .sca-input-row acima: .sca-hidden (linha 10) tem a
   mesma especificidade e vem ANTES, então perdia pro display:flex da linha acima e o campo de
   mensagem aparecia mesmo marcado como oculto (captação de lead ligada, 1ª visita). */
.sca-input-row.sca-hidden { display: none; }
.sca-input-row input { flex: 1; background: var(--sca-body-bg); border: 1px solid var(--sca-line); border-radius: 999px; color: var(--sca-text); font-size: 13px; padding: 10px 14px; box-sizing: border-box; }
.sca-input-row input:focus { outline: none; border-color: var(--sca-cta); }

#sca-widget-root .sca-input-row button,
#sca-widget-root #scaSendMessage {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	outline: none !important;
	border-radius: var(--sca-radius) !important;
	background: var(--sca-cta) !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	font-size: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: filter .15s ease !important;
}
#sca-widget-root .sca-input-row button:hover,
#sca-widget-root #scaSendMessage:hover {
	filter: brightness(1.08) !important;
}

/* Assinatura discreta — abaixo do campo de mensagem, bem pequena pra
   não comprometer a estética do widget do cliente (Allan, 2026-09-22).
   Só texto (sem logo/imagem) desde a quinta rodada de feedback.
   Alinhada à direita (oitava rodada, 2026-09-24, pedido do Allan) — só o
   text-align muda, padding/display/peso de fonte continuam os mesmos da
   sexta rodada. */
.sca-signature { flex-shrink: 0; padding: 10px 12px 10px; text-align: right; background: var(--sca-bg); }
.sca-signature a { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: .04em; color: var(--sca-muted); text-decoration: none; opacity: .75; }
.sca-signature a:hover { opacity: 1; }
.sca-signature span { font-weight: 600; }

.sca-toast-stack { position: fixed !important; left: 24px; bottom: 24px; display: flex; flex-direction: column-reverse; gap: 10px; z-index: 2147483647 !important; pointer-events: none; }
.sca-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 300px; max-width: calc(100vw - 48px); background: var(--sca-bg); border: 1px solid var(--sca-line); border-left: 3px solid var(--sca-success); border-radius: 12px; padding: 13px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; z-index: 2147483647 !important; }
.sca-toast.show { opacity: 1; transform: translateY(0); }
.sca-toast svg { color: var(--sca-success); flex-shrink: 0; width: 20px; height: 20px; }
.sca-toast .t { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; color: var(--sca-text); }
.sca-toast .m { font-size: 12px; color: var(--sca-muted); margin-top: 2px; }

/* ===== Modo preview (?sca_preview=1, ver widget.js) — mostra o widget
   no TAMANHO NATURAL dele (mesmas dimensões do preset escolhido em
   Aparência), centralizado na página/iframe. Achado da sétima rodada
   (2026-09-23): a regra antiga aqui forçava `height:100vh` e zerava
   borda/raio/sombra num segundo bloco de mesma especificidade que
   ganhava do primeiro por ordem — o resultado era o chat abrindo em
   tela cheia, contradizendo o próprio comentário que dizia "tamanho
   natural". As duas declarações conflitantes foram removidas — agora só
   existe UM bloco de regra pra este modo, sem esticar largura/altura. */
body.sca-preview-mode {
	/* Cor fixa, não var(--sca-body-bg) — essa variável só existe dentro de
	   .sca-widget (descendente), body é ancestral dela e não a herda. */
	margin: 0; min-height: 100vh; display: flex; align-items: center;
	justify-content: center; background: #F4F5F7;
}
body.sca-preview-mode .sca-widget { position: static; }
body.sca-preview-mode .sca-launcher { display: none; }
body.sca-preview-mode .sca-panel {
	position: static; opacity: 1; transform: none; pointer-events: auto;
	max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
}
body.sca-preview-mode > *:not(#sca-widget-root):not(.sca-toast-stack) { display: none !important; }

/* ===== [smartchat_ai_status] — licença + provedor de IA, só pra usuário
   logado (redefinição da sétima rodada, 2026-09-23 — substitui o antigo
   [smartchat_ai_horario], removido por render quebrado em aba anônima e
   por decisão do Allan de não valer a pena consertar). ===== */
.sca-status-box { max-width: 360px; border: 1px solid #E4E6EA; border-radius: 12px; padding: 16px 18px; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #fff; }
.sca-status-box + .sca-status-box { margin-top: 12px; }
.sca-status-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; margin-bottom: 10px; color: #1C1E21; }
/* font-weight:400 explícito — mesmo motivo do .sca-status acima (oitava rodada, 2026-09-24). */
.sca-status-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 400; padding: 6px 0; border-top: 1px solid #F0F1F3; color: #4B5563; }
.sca-status-locked { max-width: 360px; border: 1px solid #E4E6EA; border-radius: 12px; padding: 16px 18px; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #fff; color: #6B7280; font-size: 13px; }
.sca-status-footer { max-width: 360px; margin-top: 18px; display: flex; justify-content: center; }
.sca-status-footer a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: #1C1E21; opacity: .85; }
.sca-status-footer a:hover { opacity: 1; }
.sca-status-footer img { height: 15px; width: auto; display: inline-block; vertical-align: middle; }