/* Widget de conversação — versão 2 (Suite 1.0.93, 28-10-2026). A cor vem da Identidade de Marca (--siw-cor). */
#stratechna-ia-widget-root, #stratechna-ia-widget-root * { box-sizing: border-box; }
#stratechna-ia-widget-root { --siw-cor: #333; --siw-curva: cubic-bezier(.2, .8, .2, 1); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }

.siw-fab {
  position: fixed; right: 20px; bottom: var(--siw-base, 20px); z-index: 999999;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); cursor: pointer;
  background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--siw-curva), opacity .2s;
}
.siw-fab:hover { transform: scale(1.05); }
.siw-fab:focus-visible { outline: 2px solid var(--siw-cor); outline-offset: 3px; }
.siw-fab.siw-escondido { transform: scale(.6); opacity: 0; pointer-events: none; }

.siw-inicial { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.siw-header .siw-inicial { width: 30px; height: 30px; font-size: 14px; }

.siw-aviso {
  position: fixed; right: 86px; bottom: calc(var(--siw-base, 20px) + 10px); z-index: 999998;
  background: #fff; color: #1f2224; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  border-radius: 18px 18px 4px 18px; padding: 9px 34px 9px 14px; font-size: 14px; line-height: 1.3; white-space: nowrap; cursor: pointer;
  transform: translateX(24px); opacity: 0; pointer-events: none;
  transition: transform .35s var(--siw-curva), opacity .35s;
}
.siw-aviso.siw-on { transform: translateX(0); opacity: 1; pointer-events: auto; }
.siw-aviso-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #888; cursor: pointer; font-size: 12px; padding: 4px; line-height: 1; }

.siw-panel {
  position: fixed; right: 20px; bottom: var(--siw-base, 20px); z-index: 999999;
  width: 56px; height: 56px; border-radius: 28px; overflow: hidden;
  background: #fff; color: #1f2224; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none; display: flex; flex-direction: column;
  transition: width .26s var(--siw-curva), height .32s var(--siw-curva), border-radius .26s, opacity .12s;
}
.siw-panel.siw-vis { opacity: 1; pointer-events: auto; }
.siw-panel.siw-w { width: min(360px, calc(100vw - 24px)); border-radius: 16px; }
.siw-panel.siw-h { height: min(540px, calc(100vh - var(--siw-base, 20px) - 20px)); }
.siw-in { opacity: 0; transition: opacity .18s; display: flex; flex-direction: column; height: 100%; min-height: 0; width: min(360px, calc(100vw - 24px)); margin-left: auto; }
.siw-panel.siw-h .siw-in { opacity: 1; transition-delay: .15s; }

.siw-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.siw-header img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.siw-ttl { flex: 1; min-width: 0; }
.siw-ttl b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siw-ttl small { display: block; font-size: 11.5px; color: #6b7280; }
.siw-close { border: none; background: none; cursor: pointer; color: #6b7280; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; }
.siw-close:hover { background: #f2f2f3; }

.siw-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #f7f7f8; min-height: 0; }
.siw-msg { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.siw-msg p { margin: 0 0 6px; } .siw-msg p:last-child { margin: 0; }
.siw-msg ul { margin: 4px 0 6px; padding-left: 18px; } .siw-msg li { margin: 2px 0; }
.siw-msg.siw-user { align-self: flex-end; background: var(--siw-cor); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.siw-msg.siw-assistant { align-self: flex-start; background: #fff; border: 1px solid #e6e6e8; border-bottom-left-radius: 4px; }
.siw-msg.siw-note { align-self: center; background: none; color: #6b7280; font-size: 12px; padding: 2px; }
.siw-erro { align-self: center; font-size: 12px; color: #b42318; }
.siw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; }
.siw-typing span { width: 6px; height: 6px; border-radius: 50%; background: #bbb; animation: siw-bounce 1.1s ease-in-out infinite; }
.siw-typing span:nth-child(2) { animation-delay: .15s; } .siw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes siw-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.siw-card { align-self: stretch; position: relative; background: #fff; border: 1px solid #e6e6e8; border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.4; }
.siw-card p { margin: 0 0 4px; }
.siw-card input { display: block; width: 100%; margin: 6px 0 0; height: 36px; font-size: 13.5px; color: #1f2224; background: #fff; border: 1px solid #d6d6d9; border-radius: 8px; padding: 0 10px; }
.siw-card input:focus { outline: none; border-color: var(--siw-cor); }
.siw-card .siw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.siw-card-erro { color: #b42318; font-size: 12px; min-height: 16px; margin-top: 4px; }
.siw-go { width: 100%; height: 36px; border: none; border-radius: 8px; background: var(--siw-cor); color: #fff; cursor: pointer; font-size: 13.5px; }
.siw-go:disabled { opacity: .7; cursor: default; }
.siw-legal { margin-top: 8px; font-size: 11.5px; color: #6b7280; }
.siw-legal a { color: inherit; text-decoration: underline; }
.siw-card-feito { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; color: #4b5563; padding: 8px 12px; }
.siw-ok { color: #15803d; white-space: nowrap; }

.siw-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; background: #fff; flex-shrink: 0; }
.siw-inputrow input { flex: 1; min-width: 0; height: 38px; font-size: 14px; color: #1f2224; background: #fff; padding: 0 11px; border: 1px solid #d6d6d9; border-radius: 8px; }
.siw-inputrow input:focus { outline: none; border-color: var(--siw-cor); }
.siw-send { border: none; color: #fff; background: var(--siw-cor); border-radius: 8px; width: 38px; font-size: 18px; cursor: pointer; flex-shrink: 0; }
.siw-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
  .siw-fab { right: 14px; bottom: var(--siw-base, 14px); }
  .siw-panel { right: 12px; bottom: var(--siw-base, 12px); }
  .siw-panel.siw-h { height: calc(100vh - var(--siw-base, 12px) - 12px); }
  .siw-aviso { right: 78px; bottom: calc(var(--siw-base, 14px) + 8px); font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .siw-panel, .siw-in, .siw-aviso, .siw-fab { transition: opacity .15s !important; }
}

/* O tema não manda dentro do widget: botões e campos com estilo próprio (Kadence & c.ª). */
#stratechna-ia-widget-root button { margin: 0; min-height: 0; text-transform: none; letter-spacing: normal; font-family: inherit; line-height: 1; }
#stratechna-ia-widget-root .siw-fab, #stratechna-ia-widget-root .siw-send, #stratechna-ia-widget-root .siw-close { padding: 0; }
#stratechna-ia-widget-root .siw-aviso-x { padding: 4px; background: none; color: #888; box-shadow: none; }
#stratechna-ia-widget-root .siw-close { background: none; color: #6b7280; box-shadow: none; }
#stratechna-ia-widget-root .siw-close:hover { background: #f2f2f3; }
#stratechna-ia-widget-root .siw-fab { background: #fff; }
#stratechna-ia-widget-root .siw-send, #stratechna-ia-widget-root .siw-go { background: var(--siw-cor); color: #fff; box-shadow: none; padding: 0; }
#stratechna-ia-widget-root input[type] { box-shadow: none; margin-bottom: 0; font-family: inherit; line-height: normal; }
#stratechna-ia-widget-root .siw-card input[type] { height: 36px; padding: 0 10px; border: 1px solid #d6d6d9; border-radius: 8px; background: #fff; color: #1f2224; }
#stratechna-ia-widget-root .siw-inputrow input[type] { height: 38px; padding: 0 11px; border: 1px solid #d6d6d9; border-radius: 8px; background: #fff; color: #1f2224; }
#stratechna-ia-widget-root .siw-card input[type]:focus, #stratechna-ia-widget-root .siw-inputrow input[type]:focus { border-color: var(--siw-cor); outline: none; }
#stratechna-ia-widget-root .siw-card .siw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Animações do círculo (1.0.94) ─────────────────────────────────────────────
   Escolhidas em Suite › Widget. 1–6 usam o símbolo da Identidade de Marca;
   7–12 são generalistas: círculo na cor da marca com um ícone de conversa.
   Cada uma corre UMA vez por `.siw-tocar` (≈3,4 s): à chegada e, no máximo,
   de 45 em 45 s até a pessoa abrir o widget. */
.siw-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.siw-camada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.siw-camada img { width: 34px; height: 34px; object-fit: contain; }
.siw-c2 { opacity: 0; color: var(--siw-cor); }
.siw-c2 svg { width: 26px; height: 26px; display: block; }
.siw-pontos { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; }
.siw-pontos i, .siw-balao i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--siw-cor); }
.siw-balao { position: absolute; right: -7px; top: -11px; display: flex; gap: 3px; padding: 6px 7px; border-radius: 11px 11px 11px 3px; background: var(--siw-cor); transform: scale(0); transform-origin: 0 100%; pointer-events: none; }
.siw-balao i { width: 4px; height: 4px; background: #fff; }
.siw-halo, .siw-halo2 { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--siw-cor); opacity: 0; pointer-events: none; }
.siw-orb { position: absolute; inset: -6px; border-radius: 50%; opacity: 0; pointer-events: none; }
.siw-orb::after { content: ""; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--siw-cor); }
.siw-estado { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; display: none; }
.siw-an-orbita .siw-estado { display: block; }
.siw-brilho { position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); }

/* generalistas: o círculo é a marca */
.siw-gen .siw-c1 { display: none; }
.siw-gen .siw-c2 { opacity: 1; color: #fff; }
.siw-gen .siw-pontos i { background: #fff; }
#stratechna-ia-widget-root .siw-fab.siw-gen { background: var(--siw-cor); border-color: transparent; }

@keyframes siw-pulo { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.siw-tocar .siw-pontos i, .siw-tocar .siw-balao i { animation: siw-pulo 1s ease-in-out infinite; }
.siw-tocar .siw-pontos i:nth-child(2), .siw-tocar .siw-balao i:nth-child(2) { animation-delay: .15s; }
.siw-tocar .siw-pontos i:nth-child(3), .siw-tocar .siw-balao i:nth-child(3) { animation-delay: .3s; }

/* 1 · Moeda */
@keyframes siw-moeda-face { 0%, 100% { transform: scaleX(1); } 12% { transform: scaleX(0); } 24%, 76% { transform: scaleX(1); } 88% { transform: scaleX(0); } }
@keyframes siw-moeda-c1 { 0%, 12% { opacity: 1; } 12.1%, 88% { opacity: 0; } 88.1%, 100% { opacity: 1; } }
@keyframes siw-moeda-c2 { 0%, 12% { opacity: 0; } 12.1%, 88% { opacity: 1; } 88.1%, 100% { opacity: 0; } }
.siw-an-moeda.siw-tocar .siw-face { animation: siw-moeda-face 3.4s ease-in-out; }
.siw-an-moeda.siw-tocar .siw-c1 { animation: siw-moeda-c1 3.4s linear; }
.siw-an-moeda.siw-tocar .siw-c2 { animation: siw-moeda-c2 3.4s linear; }
/* 2 · Balão */
@keyframes siw-balao { 0%, 100% { transform: scale(0); } 12%, 85% { transform: scale(1); } }
.siw-an-balao.siw-tocar .siw-balao { animation: siw-balao 3.4s cubic-bezier(.2, .8, .2, 1); }
/* 3 · Carrossel */
@keyframes siw-car-c1 { 0%, 15%, 85%, 100% { transform: translateY(0); } 27%, 73% { transform: translateY(-100%); } }
@keyframes siw-car-c2 { 0%, 15%, 85%, 100% { transform: translateY(100%); opacity: 1; } 27%, 73% { transform: translateY(0); opacity: 1; } }
.siw-an-carrossel.siw-tocar .siw-c1 { animation: siw-car-c1 3.4s cubic-bezier(.7, 0, .3, 1); }
.siw-an-carrossel.siw-tocar .siw-c2 { animation: siw-car-c2 3.4s cubic-bezier(.7, 0, .3, 1); }
/* 4 · A escrever  e  8 · Reticências */
@keyframes siw-esc-sai { 0%, 15%, 88%, 100% { opacity: 1; transform: scale(1); } 25%, 78% { opacity: 0; transform: scale(.6); } }
@keyframes siw-esc-entra { 0%, 20%, 85%, 100% { opacity: 0; } 28%, 78% { opacity: 1; } }
.siw-an-escrever.siw-tocar .siw-c1, .siw-an-reticencias.siw-tocar .siw-c2 { animation: siw-esc-sai 3.4s ease-in-out; }
.siw-an-escrever.siw-tocar .siw-pontos, .siw-an-reticencias.siw-tocar .siw-pontos { animation: siw-esc-entra 3.4s ease-in-out; }
/* 5 · Halo e aceno */
@keyframes siw-halo { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes siw-aceno { 0%, 40%, 100% { transform: rotate(0); } 8% { transform: rotate(-14deg); } 18% { transform: rotate(10deg); } 28% { transform: rotate(-5deg); } }
.siw-an-halo.siw-tocar .siw-halo { animation: siw-halo 1.7s ease-out 2; }
.siw-an-halo.siw-tocar .siw-c1 { animation: siw-aceno 3.4s ease-in-out; }
/* 6 · Órbita */
/* 1.0.96: 2,5 voltas em vez de 2 — ligeiramente mais rápida (pedido do Vítor). */
@keyframes siw-orbita { 0% { transform: rotate(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: rotate(900deg); opacity: 0; } }
/* 1.0.99: metade do tempo — as mesmas 2,5 voltas em 1,7 s (0,68 s por volta), pedido do Vítor. */
.siw-an-orbita.siw-tocar .siw-orb { animation: siw-orbita 1.7s linear; }
/* 1.0.106 · Cometa — o ponto da Órbita com cauda; no fim pousa no canto como ponto «online». */
.siw-cometa { position: absolute; inset: -6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 250deg, var(--siw-cor) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.siw-cometa::after { content: ""; position: absolute; top: -1px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--siw-cor); box-shadow: 0 0 6px var(--siw-cor); }
.siw-an-cometa .siw-estado { display: block; }
@keyframes siw-cometa { 0% { transform: rotate(0); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: rotate(855deg); opacity: 0; } }
@keyframes siw-pousa { 0%, 70% { transform: scale(0); } 85% { transform: scale(1.5); } 100% { transform: scale(1); } }
.siw-an-cometa.siw-tocar .siw-cometa { animation: siw-cometa 2s cubic-bezier(.35, 0, .25, 1); }
.siw-an-cometa.siw-tocar .siw-estado { animation: siw-pousa 2.4s ease-out; }
/* 1.0.106 · Constelação — oito pontos (cor da marca e cor2 — acento —, alternados) vêm de fora e juntam-se no símbolo. */
.siw-const { position: absolute; inset: 0; pointer-events: none; }
.siw-const i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--siw-cor); opacity: 0; }
.siw-const i:nth-child(even) { background: var(--siw-cor2, #8a949e); width: 5px; height: 5px; }
.siw-const i:nth-child(1) { --a: 0deg; --r: 44px; } .siw-const i:nth-child(2) { --a: 48deg; --r: 38px; }
.siw-const i:nth-child(3) { --a: 92deg; --r: 46px; } .siw-const i:nth-child(4) { --a: 137deg; --r: 36px; }
.siw-const i:nth-child(5) { --a: 182deg; --r: 45px; } .siw-const i:nth-child(6) { --a: 228deg; --r: 39px; }
.siw-const i:nth-child(7) { --a: 271deg; --r: 47px; } .siw-const i:nth-child(8) { --a: 316deg; --r: 37px; }
@keyframes siw-const-ponto {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.6); }
  15% { opacity: 1; transform: rotate(calc(var(--a) + 20deg)) translateY(calc(var(--r) * -1)) scale(1); }
  55% { opacity: 1; transform: rotate(calc(var(--a) + 70deg)) translateY(-9px) scale(1); }
  68%, 100% { opacity: 0; transform: rotate(calc(var(--a) + 80deg)) translateY(0) scale(.3); }
}
@keyframes siw-const-simbolo { 0% { opacity: 1; transform: scale(1); } 12%, 55% { opacity: 0; transform: scale(.4); } 72% { opacity: 1; transform: scale(1.12); } 84% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
.siw-an-constelacao.siw-tocar .siw-const i { animation: siw-const-ponto 2.6s cubic-bezier(.45, 0, .25, 1); }
.siw-an-constelacao.siw-tocar .siw-const i:nth-child(even) { animation-delay: .08s; }
.siw-an-constelacao.siw-tocar .siw-c1 { animation: siw-const-simbolo 2.6s ease-in-out; }
/* 7 · Pulso */
@keyframes siw-pulso { 0%, 50%, 100% { transform: scale(1); } 15%, 65% { transform: scale(1.12); } }
.siw-an-pulso.siw-tocar .siw-c2 { animation: siw-pulso 3.4s ease-in-out; }
/* 9 · Sonar */
@keyframes siw-sonar { 0% { opacity: .6; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
.siw-an-sonar.siw-tocar .siw-halo { animation: siw-sonar 1.7s ease-out 2; }
.siw-an-sonar.siw-tocar .siw-halo2 { animation: siw-sonar 1.7s ease-out .5s 2; }
/* 10 · Salto */
@keyframes siw-salto { 0%, 40%, 100% { transform: translateY(0); } 10% { transform: translateY(-12px); } 20% { transform: translateY(0); } 28% { transform: translateY(-5px); } 34% { transform: translateY(0); } }
.siw-an-salto.siw-tocar { animation: siw-salto 3.4s cubic-bezier(.3, 0, .3, 1); }
/* 11 · Abanar */
@keyframes siw-abanar { 0%, 45%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-12deg); } 10%, 20%, 30% { transform: rotate(12deg); } 35% { transform: rotate(0); } }
.siw-an-abanar.siw-tocar .siw-c2 { animation: siw-abanar 3.4s ease-in-out; }
/* 12 · Brilho */
@keyframes siw-brilho { 0%, 20% { left: -60%; } 55%, 100% { left: 130%; } }
.siw-an-brilho.siw-tocar .siw-brilho { animation: siw-brilho 3.4s ease-in-out; }

/* «Posso ajudar?» ao passar o rato (só em dispositivos com rato) */
.siw-dica { position: absolute; right: 66px; top: 50%; background: #fff; color: #1f2224; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); border-radius: 16px 16px 4px 16px; padding: 8px 13px; font-size: 14px; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translate(14px, -50%); transition: transform .3s var(--siw-curva), opacity .3s; pointer-events: none; }
@media (hover: hover) {
  .siw-fab:hover .siw-dica { opacity: 1; transform: translate(0, -50%); }
}
.siw-fab:focus-visible .siw-dica { opacity: 1; transform: translate(0, -50%); }
.siw-com-aviso .siw-dica { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .siw-tocar, .siw-tocar * { animation: none !important; }
}

/* 1.0.97 — o widget só aparece com o botão «voltar ao cimo» (ou ao fim de 8 s em páginas curtas) */
#stratechna-ia-widget-root .siw-fab { transition: transform .3s var(--siw-curva), opacity .3s; }
#stratechna-ia-widget-root.siw-fora .siw-fab { opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none; }
#stratechna-ia-widget-root.siw-fora .siw-aviso { opacity: 0; pointer-events: none; }

/* Os campos de nome e email são a continuação do balão do assistente */
.siw-card.siw-card-conversa { align-self: flex-start; max-width: 86%; margin-top: -4px; border-top-left-radius: 4px; }
.siw-card-erro .siw-sug { margin-left: 4px; border: none; background: none; color: var(--siw-cor); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }
#stratechna-ia-widget-root .siw-card-erro .siw-sug { background: none; color: var(--siw-cor); padding: 0; }

/* 1.0.100 — ligações dos produtos recomendados */
#stratechna-ia-widget-root .siw-msg.siw-assistant a { color: var(--siw-cor); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
