/* ============================================================
   BUNKER CHAT — Embedded Messaging launcher + modal
   Scoped a `.bk-launcher`, `.bk-overlay`, `.bk-frame`, e ao iframe
   da Salesforce. Não afeta o resto do site. Tunable via CSS vars.
   ============================================================ */
:root {
  --bk-black:        #000000;
  --bk-ink:          #050505;
  --bk-white:        #ffffff;
  --bk-cream:        #ededed;
  --bk-g3:           #bdbdbd;
  --bk-g4:           #969696;
  --bk-g5:           #5a5a5a;
  --bk-line:         rgba(255,255,255,.10);

  --bk-modal-w:      min(94vw, 520px);
  --bk-modal-h:      min(88vh, 760px);
  --bk-modal-offset: 24px;
  --bk-radius:       0px;
  --bk-radius-frame: 2px;
  --bk-launcher-w:   220px;
  --bk-launcher-h:   64px;

  --bk-duration:       760ms;
  --bk-duration-fast:  280ms;
  --bk-easing:         cubic-bezier(.22, 1, .36, 1);
  --bk-easing-genie:   cubic-bezier(.16, 1, .3, 1);

  --bk-blur:    28px;
  --bk-shadow:  0 40px 100px -20px rgba(0,0,0,.95), 0 10px 30px -10px rgba(0,0,0,.7);
}

/* Hide ESW default launcher — usamos o nosso.
   IMPORTANT: NÃO usar display:none — launchChat() faz presence check
   no elemento e display:none o trata como ausente, jogando
   "Default chat button isn't present". Em vez disso, jogamos pra fora
   da tela mantendo no DOM. */
.embeddedMessagingConversationButton,
button.embeddedMessagingConversationButton,
.embedded-service-help-button,
.helpButton,
[class*="embeddedMessagingConversationButton"] {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* GUARD: enquanto o chat não estiver aberto, NENHUM container ESW pode
   bloquear scroll/touch da página. Em mobile o ESW cria wrappers fixed
   100vw×100vh que, mesmo invisíveis, capturam toques.

   Em iOS Safari, `pointer-events: none` NÃO é suficiente em iframes
   cross-origin que cobrem viewport — só `visibility: hidden` (ou
   tirar do fluxo de layout) remove o hit-area. Aplicamos os dois. */
body:not(.bk-chat-open) iframe[class*="embeddedMessaging"],
body:not(.bk-chat-open) iframe[name*="embedded"],
body:not(.bk-chat-open) iframe[id*="embedded-messaging"],
body:not(.bk-chat-open) iframe[title*="Messaging" i],
body:not(.bk-chat-open) iframe[title*="Mensagens" i],
body:not(.bk-chat-open) iframe[title*="Chat" i],
body:not(.bk-chat-open) [class^="embedded-messaging"],
body:not(.bk-chat-open) [class*="embeddedMessagingFrame"],
body:not(.bk-chat-open) [class*="embeddedMessagingModal"],
body:not(.bk-chat-open) [class*="embeddedMessagingWrapper"],
body:not(.bk-chat-open) [class*="embeddedMessagingContainer"],
body:not(.bk-chat-open) [class*="embeddedServiceSidebar"],
body:not(.bk-chat-open) embedded-messaging,
body:not(.bk-chat-open) embedded-messaging-conversation-root {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ─── LAUNCHER ─── */
.bk-launcher {
  position: fixed;
  right: var(--bk-modal-offset);
  bottom: var(--bk-modal-offset);
  width: var(--bk-launcher-w);
  height: var(--bk-launcher-h);
  border: 1px solid var(--bk-white);
  border-radius: var(--bk-radius);
  background: var(--bk-white);
  color: var(--bk-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  z-index: 2147483646;
  transition: transform .35s var(--bk-easing-genie), background .25s, color .25s, width .35s var(--bk-easing-genie), bottom .35s var(--bk-easing-genie), opacity .6s var(--bk-easing), translate .6s var(--bk-easing-genie);
  outline: none;
  font-family: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
  /* Reveal delay: launcher inicia invisivel + ligeiramente abaixo, JS adiciona
     .is-revealed apos LAUNCHER_REVEAL_DELAY_MS pra fade-in suave. */
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
}
.bk-launcher.is-revealed {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.bk-launcher__label { display: inline-block; }

/* Issue #117: launcher fica em posicao fixa deterministica (bottom:24px right:24px)
   independente de outras CTAs sticky. Foram removidas as regras :has() que
   pulavam o launcher pra cima quando havia .edu-sticky-cta ou
   .industry-v3-sticky-mobile - cada CTA sticky agora ajusta a si mesma se
   precisar evitar overlap. */

.bk-launcher__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-left: 1px solid rgba(0,0,0,.18);
  padding-left: 18px;
  margin-left: 18px;
  transition: transform .35s var(--bk-easing-genie);
}
.bk-launcher__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.bk-launcher:hover {
  background: var(--bk-black);
  color: var(--bk-white);
  border-color: var(--bk-white);
  transform: none;
}
.bk-launcher:hover .bk-launcher__icon { border-left-color: rgba(255,255,255,.22); transform: translateX(4px); }
.bk-launcher:active { transform: scale(.97); }

.bk-launcher.is-open {
  width: var(--bk-launcher-h);
  background: var(--bk-black);
  color: var(--bk-white);
  padding: 0;
  justify-content: center;
}
.bk-launcher.is-open .bk-launcher__label { display: none; }
.bk-launcher.is-open .bk-launcher__icon {
  border-left: none;
  margin-left: 0; padding-left: 0;
  transform: rotate(45deg);
}

.bk-launcher::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--bk-white);
  border-radius: var(--bk-radius);
  opacity: 0;
  animation: bk-ringPulse 2.6s ease-out infinite;
  pointer-events: none;
}
.bk-launcher.is-open::after { animation: none; opacity: 0; }

/* Mobile: launcher começa expandido (com texto) pra deixar claro que é chat;
   após COLLAPSE_DELAY_MS o JS adiciona .is-collapsed e a largura/borda
   transitam pra modo só-ícone. .is-open continua ganhando precedência
   (já força 64px via regra acima). */
@media (max-width: 480px) {
  .bk-launcher {
    width: 260px;
    padding: 0 16px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .bk-launcher__label {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .35s var(--bk-easing), max-width .45s var(--bk-easing-genie);
    max-width: 200px;
    opacity: 1;
  }
  /* Reduz o gap do icone em mobile pra liberar espaco pro label completo
     (labels mais longos: "Iniciar conversa", "Continuar conversacion" etc) */
  .bk-launcher__icon {
    border-left: none;
    padding-left: 0;
    margin-left: 10px;
  }
  .bk-launcher.is-collapsed {
    width: 64px;
    padding: 0;
    justify-content: center;
  }
  .bk-launcher.is-collapsed .bk-launcher__label {
    max-width: 0;
    opacity: 0;
    margin: 0;
  }
  .bk-launcher.is-collapsed .bk-launcher__icon {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-launcher__label { transition: none; }
}

/* ─── OVERLAY ─── */
.bk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--bk-duration-fast) ease, visibility 0s linear var(--bk-duration-fast);
  z-index: 2147483645;
}
.bk-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* backdrop-filter só quando ativo — em iOS Safari blur permanente em
     fullscreen degrada o scroll mesmo invisível. */
  backdrop-filter: blur(var(--bk-blur)) saturate(110%);
  -webkit-backdrop-filter: blur(var(--bk-blur)) saturate(110%);
  transition: opacity var(--bk-duration-fast) ease, visibility 0s linear 0s;
}

/* ─── FRAME (iframe ESW marcado por JS) — GENIE EFFECT ─── */
.bk-frame {
  --bk-genie-tx: 30vw;
  --bk-genie-ty: 30vh;

  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--bk-modal-w) !important;
  height: var(--bk-modal-h) !important;
  max-width: var(--bk-modal-w) !important;
  max-height: var(--bk-modal-h) !important;
  margin-left: calc(var(--bk-modal-w) / -2) !important;
  margin-top: calc(var(--bk-modal-h) / -2) !important;
  border-radius: var(--bk-radius-frame) !important;
  overflow: hidden !important;
  border: 1px solid var(--bk-line) !important;
  box-shadow: var(--bk-shadow) !important;
  background: var(--bk-ink) !important;
  z-index: 2147483646 !important; /* abaixo do .bk-loading (2147483647) enquanto carrega */
  display: block !important;

  transform: translate(var(--bk-genie-tx), var(--bk-genie-ty)) scale(.12);
  transform-origin: center center;
  clip-path: inset(50% 0% 50% 100% round var(--bk-radius-frame));
  opacity: 0;
  filter: blur(16px);
  pointer-events: none;
  /* iOS Safari ignora pointer-events:none em iframes cross-origin com
     position:fixed cobrindo viewport — visibility:hidden é a única forma
     robusta de remover hit-area. Delay sincroniza com o fim da animação
     reversa (close), pra não cortar a saída. */
  visibility: hidden;
  transition:
    transform var(--bk-duration) var(--bk-easing-genie),
    clip-path var(--bk-duration) var(--bk-easing),
    opacity calc(var(--bk-duration) * .8) ease,
    filter var(--bk-duration) ease,
    visibility 0s linear var(--bk-duration);
  will-change: transform, clip-path, opacity, filter;
}

.bk-frame iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: var(--bk-radius-frame) !important;
  display: block !important;
}

body.bk-chat-open .bk-frame {
  transform: translate(0, 0) scale(1);
  clip-path: inset(0 0 0 0 round var(--bk-radius-frame));
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    transform var(--bk-duration) var(--bk-easing-genie),
    clip-path var(--bk-duration) var(--bk-easing),
    opacity calc(var(--bk-duration) * .8) ease,
    filter var(--bk-duration) ease,
    visibility 0s linear 0s;
}

@media (max-width: 640px) {
  :root {
    --bk-modal-w: 100vw;
    --bk-modal-h: 100svh;
    --bk-radius-frame: 0px;
    --bk-modal-offset: 16px;
  }
  .bk-frame { border-radius: 0 !important; border: none !important; }
}

/* ─── KEYFRAMES (prefixadas pra não conflitar com site) ─── */
@keyframes bk-ringPulse {
  0%   { transform: scale(.96); opacity: .55; }
  60%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes bk-progressIndeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes bk-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}
@keyframes bk-markPulse {
  0%, 100% { opacity: .45; transform: scale(.92) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1) rotate(90deg); }
}
@keyframes bk-dotBlink {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* ─── LOADING (Issue #122, redesenhado #280) ───
   Mostrado POR CIMA da moldura escura enquanto o iframe ESW carrega
   (~6s no cold open). Crossfade suave revela o chat quando pronto.
   Skeleton de bolhas + marca Bunker + barra de progresso indeterminada. */
.bk-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--bk-modal-w) / -2);
  margin-top: calc(var(--bk-modal-h) / -2);
  width: var(--bk-modal-w);
  height: var(--bk-modal-h);
  box-sizing: border-box;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(255,255,255,.06), transparent 62%),
    var(--bk-ink);
  color: var(--bk-white);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-frame);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
  z-index: 2147483647; /* acima do .bk-frame (2147483646) ate o chat carregar */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(.98);
  transition: opacity .28s ease, transform .4s var(--bk-easing-genie), visibility 0s linear .4s;
}
/* entrada quando abre e o chat ainda nao carregou */
body.bk-chat-open .bk-loading:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .3s ease .06s, transform .5s var(--bk-easing-genie), visibility 0s linear 0s;
}
/* fade-out revelando o chat ja carregado atras */
body.bk-chat-open .bk-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

/* marca Bunker (asterisco) pulsando + girando devagar */
.bk-loading__mark {
  width: 30px;
  height: 30px;
  animation: bk-markPulse 2.4s var(--bk-easing) infinite;
}
.bk-loading__mark svg {
  width: 100%; height: 100%;
  stroke: var(--bk-white);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

/* skeleton de bolhas de chat com shimmer monocromatico */
.bk-loading__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(82%, 340px);
}
.bk-bubble {
  height: 38px;
  border-radius: 14px;
  background-color: rgba(255,255,255,.06);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.13) 50%, transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: bk-shimmer 1.5s ease-in-out infinite;
}
.bk-bubble--in  { align-self: flex-start; width: 72%; border-bottom-left-radius: 3px; }
.bk-bubble--out { align-self: flex-end;   width: 56%; border-bottom-right-radius: 3px; background-color: rgba(255,255,255,.10); animation-delay: .25s; }
.bk-bubble--sm  { width: 46%; height: 30px; animation-delay: .5s; }

/* label "Conectando" + dots animados */
.bk-loading__label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.bk-dots { display: inline-flex; gap: 3px; margin-left: 7px; }
.bk-dots i {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: bk-dotBlink 1.4s ease-in-out infinite;
}
.bk-dots i:nth-child(2) { animation-delay: .2s; }
.bk-dots i:nth-child(3) { animation-delay: .4s; }

/* barra de progresso indeterminada no topo */
.bk-loading__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.bk-loading__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: bk-progressIndeterminate 1.6s linear infinite;
}

@media (max-width: 640px) {
  .bk-loading {
    width: 100vw;
    height: 100svh;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bk-duration: 220ms;
    --bk-duration-fast: 160ms;
    --bk-easing-genie: ease-out;
  }
  .bk-launcher::after { animation: none; }
  .bk-loading__bar::after { animation: none; opacity: .35; }
  .bk-bubble { animation: none; }
  .bk-loading__mark { animation: none; }
  .bk-dots i { animation: none; opacity: .6; }
}