/* Tour da tela do chat (static/tour.js, T4518). Visual do kit: vidro claro, tinta da casa, azul de destaque. Compacto. */
.tr { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.tr[hidden] { display: none; }
.tr__anel {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--lg-azul, #2f6bff), 0 0 0 6px color-mix(in srgb, var(--lg-azul, #2f6bff) 22%, transparent);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tr--escuro .tr__anel { box-shadow: 0 0 0 2px var(--lg-azul, #2f6bff), 0 0 0 9999px rgba(10, 16, 32, .55); }
.tr--cartao .tr__anel { box-shadow: none; }
.tr__balao {
  position: fixed; width: min(340px, calc(100vw - 28px)); pointer-events: auto;
  padding: 14px 16px 12px; border-radius: 14px;
  background: var(--lg-vidro-forte, rgba(255, 255, 255, .96)); border: 1px solid var(--lg-vidro-borda, rgba(15, 23, 42, .08));
  box-shadow: var(--lg-sombra-alta, 0 18px 48px rgba(15, 23, 42, .18));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--lg-tinta, #0f172a); font-size: 14px; line-height: 1.45; outline: none;
  transition: top .2s ease, left .2s ease;
}
.tr__balao:focus-visible { box-shadow: var(--lg-sombra-alta, 0 18px 48px rgba(15, 23, 42, .18)), 0 0 0 3px color-mix(in srgb, var(--lg-azul, #2f6bff) 35%, transparent); }
.tr__passo { margin: 0 0 4px; font-size: 12px; color: var(--lg-tinta2, #475569); }
.tr__titulo { margin: 0 0 6px; font-size: 15px; font-weight: 650; line-height: 1.3; }
.tr__texto { margin: 0; color: var(--lg-tinta2, #334155); }
.tr__fim { margin: 8px 0 0; font-size: 13px; color: var(--lg-tinta2, #475569); }   /* tour da demonstração: como rever, no último passo */
.tr__fim[hidden] { display: none; }
.tr__pontos { display: flex; gap: 5px; margin: 12px 0 10px; }
.tr__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--lg-linha, #cbd5e1); }
.tr__ponto--atual { width: 16px; border-radius: 3px; background: var(--lg-azul, #2f6bff); }
.tr__acoes { display: flex; align-items: center; gap: 8px; }
.tr__espaco { flex: 1; }
.tr__pular { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 13px; color: var(--lg-tinta2, #475569); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tr__pular:hover { color: var(--lg-tinta, #0f172a); }
.tr__acoes .wm-button { min-height: 34px; padding: 0 14px; font-size: 13px; }
.tr__voltar[hidden] { display: none; }
/* celular: o balao vira uma folha embaixo, o anel continua mostrando o alvo */
.tr__balao--folha {
  top: auto !important; left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto; border-radius: 16px;
}
.tr__balao--folha.tr__balao--topo { top: calc(8px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .tr__anel, .tr__balao { transition: none; } }
/* tema escuro: o balão branco ofuscava na tela escura; vidro escuro com a tinta clara, como os cartões da Caixa */
:root[data-theme="dark"] .tr__balao { background: rgba(28, 31, 38, 0.96); border-color: rgba(255, 255, 255, 0.10); color: #e7eaf0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .tr__passo, :root[data-theme="dark"] .tr__texto, :root[data-theme="dark"] .tr__fim,
:root[data-theme="dark"] .tr__pular { color: #b4bccb; }
:root[data-theme="dark"] .tr__pular:hover { color: #e7eaf0; }
:root[data-theme="dark"] .tr__ponto:not(.tr__ponto--atual) { background: rgba(255, 255, 255, 0.22); }