/**
 * DotBot — Guia animado dos tutoriais (dotcompany.com.br)
 * Unidade 1.1 do plano DotBot (Onda 1, Parte A).
 *
 * O QUE E: estilos do widget "guia" que acompanha os tutoriais publicos —
 * carinha (sprite via background-position por viseme/pose), balao Popover,
 * botoes "Guia" e "Ouvir o guia", estados idle/talk/point/think/celebrate/alert.
 *
 * REGRAS (vetos da unidade):
 *  - SO tokens var(--token, fallback) — zero hex hardcoded fora de fallback.
 *  - Reaproveita os tokens do site (css/dotcompany-themes.css): --primary, --accent,
 *    --bg-page, --bg-surface, --text, --border, --radius*, --shadow-*, --transition.
 *  - Dark mode: tokens ja trocam em html.theme-dark; +fallback prefers-color-scheme.
 *  - z-index ABAIXO dos widgets do site (ai-widget/coo-widget/exit-intent = 999990+).
 *  - @media print -> escondido. prefers-reduced-motion -> sem animacao.
 *  - Mobile sem scroll horizontal; touch >= 44px; texto >= 16px nos botoes mobile.
 *  - Coexiste com o site: kill-switch via [hidden] no #dotbot-root (JS falha => some,
 *    tutorial 100% intacto). Tudo namespaced sob #dotbot-root / .dotbot-*.
 *
 * O JS (js/dotbot.js, unidade 1.2) so troca atributos:
 *   #dotbot-root[data-state="idle|talk|point|think|celebrate|alert"]
 *   .dotbot-face[data-pose="idle|talk_A..talk_H|point|think|celebrate|alert"]
 * O sprite-map (frames 200x200, grade 4x4 = 800x800) vem de sprites.json.
 */

/* ============================================================
   Tokens locais do DotBot (com fallback ao tema do site)
   ============================================================ */
#dotbot-root {
  /* z-index PROPOSITALMENTE abaixo dos FABs do site (>=999990).
     Token overridable por quem hospedar; fallback seguro. */
  --dotbot-z: var(--z-dotbot, 999900);
  --dotbot-z-balloon: var(--z-dotbot-balloon, 999901);

  /* Tamanho da carinha (sprite frame 200x200 reduzido) */
  --dotbot-face: var(--dotbot-face-size, 88px);

  /* Folha de sprite (trocavel pela arte real mantendo o frame-map).
     O JS pode sobrescrever via style inline se a folha real existir. */
  --dotbot-sheet: var(--dotbot-sheet-url, url('../IMAGEM/_avatar/dotbot/dotbot_placeholder.svg'));
  /* Tamanho total da folha = colunas*200 x linhas*200 = 800x800 (escalado p/ face). */

  /* Cores (herdadas do site, com fallback do tema verde) */
  --dotbot-surface: var(--bg-surface, #f8f9fa);
  --dotbot-page: var(--bg-page, #ffffff);
  --dotbot-text: var(--text, #374151);
  --dotbot-text-light: var(--text-light, #6b7280);
  --dotbot-primary: var(--primary, #0f4c3a);
  --dotbot-accent: var(--accent, #d4a825);
  --dotbot-border: var(--border, #e5e7eb);
  --dotbot-on-primary: var(--text-on-primary, #ffffff);
  --dotbot-radius: var(--radius-lg, 20px);
  --dotbot-radius-sm: var(--radius-sm, 8px);
  --dotbot-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
  --dotbot-shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  --dotbot-transition: var(--transition, 200ms ease);

  /* Posicao: canto inferior esquerdo (FABs do site ficam no inferior direito) */
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: var(--dotbot-z);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  /* Nunca causa scroll horizontal: limitar largura ao viewport */
  max-width: min(360px, calc(100vw - 32px));

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--dotbot-text);

  /* Nao bloqueia cliques na pagina entre os elementos do widget */
  pointer-events: none;
}

/* Kill-switch: JS falhou / DOTBOT_DISABLED -> #dotbot-root hidden -> nada aparece.
   (HTML [hidden] ja esconde; reforco aqui contra reset de display.) */
#dotbot-root[hidden] {
  display: none !important;
}

/* Filhos interativos recuperam os cliques */
#dotbot-root .dotbot-face,
#dotbot-root .dotbot-btn,
#dotbot-root .dotbot-balloon {
  pointer-events: auto;
}

/* ============================================================
   OFF = ZERO byte de avatar (regra BLOQUEANTE do plano).
   Tripla garantia (com o guia OFF nenhuma URL de sprite/placeholder
   e referenciada -> o navegador NUNCA baixa dotbot_placeholder.svg
   nem a sprite-sheet):
   1) a folha (var --dotbot-sheet) SO e usada sob [data-on='1'];
   2) sob [data-on='0'] a carinha nao renderiza (display:none) E
      qualquer background-image (incl. aplicado INLINE pela engine)
      e forcado a 'none' -> nada para o navegador buscar;
   3) o JS limpa faceEl.style.backgroundImage ao desligar (dotbot.js).
   No estado inicial (default) o root nasce data-on='0' -> ZERO byte.
   ============================================================ */
#dotbot-root[data-on='1'] .dotbot-face {
  background-image: var(--dotbot-sheet);
}
#dotbot-root[data-on='0'] .dotbot-face {
  display: none;
  /* derruba qualquer URL aplicada inline pela engine antes do OFF */
  background-image: none !important;
}

/* ============================================================
   Carinha (sprite via background-position por pose/viseme)
   ============================================================ */
#dotbot-root .dotbot-face {
  width: var(--dotbot-face);
  height: var(--dotbot-face);
  flex: 0 0 auto;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--dotbot-surface);
  /* background-image fica fora daqui: so e aplicado quando ON (data-on='1')
     para garantir ZERO byte de avatar com o guia OFF — ver regra abaixo. */
  background-repeat: no-repeat;
  /* Folha 4x4 frames; escalada para 4*face de largura/altura */
  background-size: calc(var(--dotbot-face) * 4) calc(var(--dotbot-face) * 4);
  background-position: 0 0; /* idle (linha0,col0) */
  border: 2px solid var(--dotbot-border);
  box-shadow: var(--dotbot-shadow-sm);
  cursor: pointer;
  transition:
    transform var(--dotbot-transition),
    box-shadow var(--dotbot-transition),
    background-position 90ms steps(1);
  /* GPU-friendly + evita selecionar */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, background-position;
}

#dotbot-root .dotbot-face:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--dotbot-shadow);
}

#dotbot-root .dotbot-face:focus-visible {
  outline: 3px solid var(--dotbot-accent);
  outline-offset: 2px;
}

/* Sprite frame-map (grade 4 colunas x 4 linhas, passo = -1*face por celula).
   Coordenadas conforme sprites.json (frame 200x200; aqui em multiplos de --dotbot-face). */
#dotbot-root .dotbot-face[data-pose='idle']      { background-position: 0 0; }
#dotbot-root .dotbot-face[data-pose='talk_A']    { background-position: calc(var(--dotbot-face) * -1) 0; }
#dotbot-root .dotbot-face[data-pose='talk_B']    { background-position: calc(var(--dotbot-face) * -2) 0; }
#dotbot-root .dotbot-face[data-pose='talk_C']    { background-position: calc(var(--dotbot-face) * -3) 0; }
#dotbot-root .dotbot-face[data-pose='talk_D']    { background-position: 0 calc(var(--dotbot-face) * -1); }
#dotbot-root .dotbot-face[data-pose='talk_E']    { background-position: calc(var(--dotbot-face) * -1) calc(var(--dotbot-face) * -1); }
#dotbot-root .dotbot-face[data-pose='talk_F']    { background-position: calc(var(--dotbot-face) * -2) calc(var(--dotbot-face) * -1); }
#dotbot-root .dotbot-face[data-pose='talk_G']    { background-position: calc(var(--dotbot-face) * -3) calc(var(--dotbot-face) * -1); }
#dotbot-root .dotbot-face[data-pose='talk_H']    { background-position: 0 calc(var(--dotbot-face) * -2); }
#dotbot-root .dotbot-face[data-pose='point']     { background-position: calc(var(--dotbot-face) * -1) calc(var(--dotbot-face) * -2); }
#dotbot-root .dotbot-face[data-pose='think']     { background-position: calc(var(--dotbot-face) * -2) calc(var(--dotbot-face) * -2); }
#dotbot-root .dotbot-face[data-pose='celebrate'] { background-position: calc(var(--dotbot-face) * -3) calc(var(--dotbot-face) * -2); }
#dotbot-root .dotbot-face[data-pose='alert']     { background-position: 0 calc(var(--dotbot-face) * -3); }

/* ============================================================
   Estados (no #dotbot-root[data-state]) — micro animacoes
   ============================================================ */
/* idle: respiracao sutil */
#dotbot-root[data-state='idle'] .dotbot-face {
  animation: dotbot-breathe 4s ease-in-out infinite;
}
/* talk: balanco leve enquanto fala (a boca troca via background-position no JS) */
#dotbot-root[data-state='talk'] .dotbot-face {
  animation: dotbot-talk-nod 0.9s ease-in-out infinite;
}
/* point: inclina indicando */
#dotbot-root[data-state='point'] .dotbot-face {
  animation: dotbot-point-lean 1.4s ease-in-out infinite;
}
/* think: oscila pensativo */
#dotbot-root[data-state='think'] .dotbot-face {
  animation: dotbot-think-tilt 2.4s ease-in-out infinite;
}
/* celebrate: pulinho */
#dotbot-root[data-state='celebrate'] .dotbot-face {
  animation: dotbot-celebrate-hop 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2;
}
/* alert: chacoalha pra chamar atencao + aro de destaque */
#dotbot-root[data-state='alert'] .dotbot-face {
  animation: dotbot-alert-shake 0.5s ease-in-out 2;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 212, 168, 37), 0.45), var(--dotbot-shadow-sm);
}

@keyframes dotbot-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.015); }
}
@keyframes dotbot-talk-nod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1px) rotate(-1.5deg); }
}
@keyframes dotbot-point-lean {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes dotbot-think-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes dotbot-celebrate-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-10px) scale(1.06); }
  60%      { transform: translateY(2px) scale(0.98); }
}
@keyframes dotbot-alert-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ============================================================
   Botoes ("Guia" / "Ouvir o guia")
   ============================================================ */
#dotbot-root .dotbot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none; /* o container nao captura; os botoes sim */
}

#dotbot-root .dotbot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Touch target >= 44px (WCAG 2.5.8) */
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--dotbot-border);
  border-radius: var(--dotbot-radius);
  background: var(--dotbot-page);
  color: var(--dotbot-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--dotbot-shadow-sm);
  transition:
    transform var(--dotbot-transition),
    box-shadow var(--dotbot-transition),
    background-color var(--dotbot-transition),
    color var(--dotbot-transition);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

#dotbot-root .dotbot-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--dotbot-shadow);
}

#dotbot-root .dotbot-btn:focus-visible {
  outline: 3px solid var(--dotbot-accent);
  outline-offset: 2px;
}

#dotbot-root .dotbot-btn:active {
  transform: translateY(0);
}

/* Botao primario "Guia" — superficie saturada => texto/icone claros */
#dotbot-root .dotbot-btn--primary {
  background: var(--gradient-primary, linear-gradient(135deg, var(--dotbot-primary) 0%, var(--primary-light, #1a6b52) 100%));
  border-color: transparent;
  color: var(--dotbot-on-primary);
}
#dotbot-root .dotbot-btn--primary .dotbot-btn-icon {
  color: var(--dotbot-on-primary);
}

/* Botao "Ouvir o guia" — secundario (acento) */
#dotbot-root .dotbot-btn--listen {
  border-color: var(--dotbot-accent);
  color: var(--dotbot-primary);
  background: var(--dotbot-page);
}

/* Icone dentro do botao (emoji 🤖 / ▶ ou bi-* — bi exige a fonte do site) */
#dotbot-root .dotbot-btn-icon {
  font-size: 1.1em;
  line-height: 1;
  flex: 0 0 auto;
}

/* Estado tocando do "Ouvir o guia" */
#dotbot-root .dotbot-btn--listen[aria-pressed='true'] {
  background: var(--gradient-accent, linear-gradient(135deg, var(--dotbot-accent) 0%, var(--accent-dark, #b8922a) 100%));
  color: var(--text-on-accent, #1a1a1a);
  border-color: transparent;
}

/* ============================================================
   Balao (Popover API nativa OU fallback div)
   ============================================================ */
#dotbot-root .dotbot-balloon {
  position: relative;
  max-width: min(300px, calc(100vw - 48px));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--dotbot-border);
  border-radius: var(--dotbot-radius);
  background: var(--dotbot-page);
  color: var(--dotbot-text);
  box-shadow: var(--dotbot-shadow);
  font-size: 14px;
  line-height: 1.45;
  z-index: var(--dotbot-z-balloon);
}

/* Quando usado como Popover nativo, o browser controla overlay; mantemos posicao
   ancorada manualmente pelo JS. Estes resets evitam o centro-de-tela default. */
#dotbot-root .dotbot-balloon[popover] {
  position: fixed;
  inset: auto;
}

/* Bico do balao apontando pra carinha (canto inferior esquerdo) */
#dotbot-root .dotbot-balloon::after {
  content: '';
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: var(--dotbot-page);
  border-right: 1px solid var(--dotbot-border);
  border-bottom: 1px solid var(--dotbot-border);
  transform: rotate(45deg);
}

#dotbot-root .dotbot-balloon-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dotbot-primary);
}

#dotbot-root .dotbot-balloon-text {
  margin: 0;
}

/* Botao de fechar do balao */
#dotbot-root .dotbot-balloon-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  color: var(--dotbot-text-light);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dotbot-transition), color var(--dotbot-transition);
}
#dotbot-root .dotbot-balloon-close:hover {
  background: var(--bg-surface-hover, rgba(0, 0, 0, 0.06));
  color: var(--dotbot-text);
}
#dotbot-root .dotbot-balloon-close:focus-visible {
  outline: 2px solid var(--dotbot-accent);
  outline-offset: 2px;
}

/* ============================================================
   Posicao alternativa: canto inferior direito (opt-in via classe)
   (FABs do site ja ocupam a direita; deixar disponivel mas nao default)
   ============================================================ */
#dotbot-root.dotbot-pos-right {
  left: auto;
  right: max(16px, env(safe-area-inset-right, 0px));
  align-items: flex-end;
}
#dotbot-root.dotbot-pos-right .dotbot-balloon::after {
  left: auto;
  right: 28px;
}

/* ============================================================
   Mobile (sem scroll horizontal; carinha menor; texto legivel)
   ============================================================ */
@media (max-width: 640px) {
  #dotbot-root {
    --dotbot-face: 64px;
    max-width: calc(100vw - 24px);
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  #dotbot-root .dotbot-btn {
    /* font >= 16px no mobile evita zoom iOS e melhora leitura */
    font-size: 16px;
    min-height: 48px;
  }
  #dotbot-root .dotbot-balloon {
    max-width: calc(100vw - 32px);
    font-size: 15px;
  }
}

/* Telas bem estreitas: empilha botoes, garante zero overflow */
@media (max-width: 360px) {
  #dotbot-root .dotbot-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  #dotbot-root .dotbot-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Dark mode — tokens ja trocam em html.theme-dark.
   Fallback: navegador escuro SEM classe de tema do site.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not(.theme-verde):not(.theme-claro):not(.theme-dark) #dotbot-root {
    --dotbot-surface: var(--bg-surface, #18181b);
    --dotbot-page: var(--bg-page, #18181b);
    --dotbot-text: var(--text, #e5e7eb);
    --dotbot-text-light: var(--text-light, #a1a1aa);
    --dotbot-border: var(--border, #3f3f46);
    --dotbot-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4));
    --dotbot-shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.3));
  }
}

/* No tema escuro do site, a carinha ganha um leve aro pra nao "sumir" no fundo */
html.theme-dark #dotbot-root .dotbot-face {
  border-color: var(--border-light, #3f3f46);
  background-color: var(--bg-surface, #18181b);
}

/* ============================================================
   Acessibilidade: reduzir movimento -> SEM animacao
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #dotbot-root .dotbot-face,
  #dotbot-root[data-state] .dotbot-face,
  #dotbot-root .dotbot-btn {
    animation: none !important;
    transition: none !important;
  }
  #dotbot-root .dotbot-face:hover {
    transform: none;
  }
}

/* ============================================================
   Impressao: o guia NUNCA aparece no papel
   ============================================================ */
@media print {
  #dotbot-root {
    display: none !important;
  }
}