/* Uma tela só: sem histórico / swipe */
.swipe-page-indicator, #history-screen, #sidebar, #sidebar-backdrop { display: none !important; }

.tr-mapa { position: relative; flex: 0 0 auto; align-self: flex-end; box-sizing: border-box; width: min(328px, 88%); padding: 4px;
  border-radius: 16px; border-bottom-right-radius: 4px; background: var(--tr-user-bg, rgba(46,31,23,.12)); margin: 0; }
.tr-mapa[hidden] { display: none; }
#tr-mapa-canvas { position: relative; width: 100%; height: min(300px, 34vh); border-radius: 12px; overflow: hidden; background: #050a18; }
.tr-mapa-legenda { pointer-events: none; position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none; }
.tr-mapa-legenda button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); background: rgba(8,14,32,.72);
  color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px); cursor: pointer; }
.tr-mapa-legenda button.ativo { background: rgba(255,207,92,.9); color: #1a1200; border-color: transparent; }
.rocco-pin { width: 14px; height: 14px; border-radius: 50%; background: #ffcf5c;
  box-shadow: 0 0 0 3px rgba(255,207,92,.35), 0 0 18px 6px rgba(255,207,92,.75); animation: roccoPulse 2s ease-out infinite; }
@keyframes roccoPulse { 0% { box-shadow: 0 0 0 0 rgba(255,207,92,.7), 0 0 14px 4px rgba(255,207,92,.7); }
  100% { box-shadow: 0 0 0 16px rgba(255,207,92,0), 0 0 14px 4px rgba(255,207,92,.7); } }

/* Mapa do chat: quadrado 1:1, rola junto com a conversa; toque abre em tela cheia */
.tr-mapa-dica { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; font-size: 11.5px; color: #fff; background: rgba(8,14,32,.72); backdrop-filter: blur(6px); pointer-events: none; }
html body #tr-mapa-abrir { position: absolute; inset: 4px; z-index: 3; width: calc(100% - 8px); height: calc(100% - 8px); padding: 0; border: 0 !important; border-radius: 12px;
  background: transparent !important; background-color: transparent !important; box-shadow: none !important; cursor: pointer; }
html body #tr-mapa .tr-mapa-legenda button { background: rgba(8,14,32,.72) !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important; }
html body #tr-mapa .tr-mapa-legenda button.ativo { background: rgba(255,207,92,.9) !important; color: #1a1200 !important; border-color: transparent !important; }
html body #mapa-intro .mapa-intro-legenda button { background: rgba(8,14,32,.72) !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important; }
html body #mapa-intro .mapa-intro-legenda button.ativo { background: rgba(255,207,92,.9) !important; color: #1a1200 !important; border-color: transparent !important; }

/* Mapa em tela cheia: modo abertura (fala + continuar) x modo viewer (X pra fechar) */
.mapa-intro-fechar { display: none; }
.mapa-intro.modo-viewer .mapa-intro-fala, .mapa-intro.modo-viewer #mapa-intro-continuar { display: none; }
.mapa-intro.modo-viewer .mapa-intro-fechar { display: grid; }
html body #mapa-intro-fechar { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; padding: 0; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55) !important; background: rgba(8,14,32,.78) !important; color: #fff !important; backdrop-filter: blur(6px); }
#mapa-intro-fechar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.mapa-intro-credito { margin: -6px 0 12px; font-size: 10px; color: rgba(255,255,255,.55); }
/* pino com contorno escuro pra aparecer no mapa claro */
.rocco-pin { border: 2px solid #1a1200; }

/* Abertura: o mapa só recebe toque no viewer (a câmera é guiada pela fala) */
.mapa-intro:not(.modo-viewer) #mapa-intro-canvas { pointer-events: none; }

/* Botão "Mapa 3D" no card do chat e no mapa em tela cheia */
html body #tr-mapa-3d { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 999px; font: 600 12px 'Inter', sans-serif; cursor: pointer; border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(8,14,32,.78) !important; color: #fff !important; backdrop-filter: blur(6px); }
#tr-mapa-3d svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mapa-intro-3d { display: none; }
.mapa-intro.modo-viewer .mapa-intro-3d { display: block; }
html body #mapa-intro-3d { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px));
  height: 44px; padding: 0 16px; border-radius: 999px; font: 600 14px 'Inter', sans-serif; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55) !important; background: rgba(8,14,32,.78) !important; color: #fff !important; backdrop-filter: blur(6px); }

/* Minimiza sozinho: encolhe em direção ao topo e some, revelando o chat por baixo */
.mapa-intro.minimizando { pointer-events: none; transform-origin: 50% 0; animation: mapaIntroMinimizar .6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes mapaIntroMinimizar { from { transform: none; opacity: 1; border-radius: 0; }
  to { transform: translateY(-8%) scale(.3); opacity: 0; border-radius: 28px; } }

/* Aviso de navegador interno (TikTok/Instagram) — só ao tocar em enviar foto */
.nav-int { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center;
  padding: 20px; background: rgba(30, 20, 14, .55); backdrop-filter: blur(4px); }
.nav-int.aberto { display: flex; }
.nav-int-card { width: 100%; max-width: 340px; background: var(--card, #fff); color: var(--ink, #2e1f17);
  border-radius: 22px; padding: 30px 24px 18px; text-align: center; box-shadow: 0 24px 60px rgba(30, 20, 14, .28); }
.nav-int-ilustracao { width: 92px; height: 74px; margin: 0 auto 10px; display: grid; place-items: center; }
.nav-int-ilustracao svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav-int-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.nav-int-card p { font-size: 14px; line-height: 1.5; color: var(--ink-mute, #7a6a60); margin: 0 0 20px; }
.nav-int-passos { list-style: none; margin: 0 0 22px; padding: 14px 16px; text-align: left; border-radius: 14px;
  background: var(--card-alt, #f5efe9); display: grid; gap: 10px; font-size: 13.5px; }
.nav-int-passos li { display: flex; align-items: center; gap: 12px; }
.nav-int-passos li span { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent, #7b3c23); color: #fff; font-size: 12px; font-weight: 700; }
.nav-int-primario { width: 100%; padding: 14px; border: 0; border-radius: 999px; background: var(--accent, #7b3c23);
  color: #fff; font: 600 15px 'Inter', sans-serif; cursor: pointer; }
.nav-int-secundario { width: 100%; margin-top: 4px; padding: 12px; border: 0; background: none; text-decoration: none;
  color: var(--ink-mute, #7a6a60); font: 500 13px 'Inter', sans-serif; cursor: pointer; }

/* Botões de texto simples ("Agora não" / "Continuar mesmo assim"):
   o index.css força TODO <button> a ficar marrom com !important, então aqui
   usamos o id (mais forte) para tirar o fundo e o contorno. */
html body #btn-paywall-depois,
html body #btn-paywall-depois:hover,
html body #btn-paywall-depois:active,
html body #btn-fechar-modal-navinterno,
html body #btn-fechar-modal-navinterno:hover,
html body #btn-fechar-modal-navinterno:active {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ink-mute, #7a6a60) !important;
  text-decoration: none !important;
}

/* Abertura em tela cheia: mapa antes do chat de avaliação */
.mapa-intro { position: fixed; inset: 0; z-index: 10003; display: none; flex-direction: column; background: #050a18;
  color: #fff; touch-action: none; overscroll-behavior: none; }
.mapa-intro.ativo { display: flex; animation: mapaIntroEntrar .35s ease-out; }
@keyframes mapaIntroEntrar { from { opacity: 0; } to { opacity: 1; } }
#mapa-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-intro-topo { position: relative; z-index: 2; padding: max(18px, env(safe-area-inset-top, 0px)) 20px 40px; text-align: center;
  background: linear-gradient(180deg, rgba(5,10,24,.85), rgba(5,10,24,0)); pointer-events: none; }
.mapa-intro-topo small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.mapa-intro-topo strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; }
.mapa-intro-base { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 50px 18px max(18px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(5,10,24,.95) 55%, rgba(5,10,24,0)); }
.mapa-intro-legenda { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.mapa-intro-legenda button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); background: rgba(8,14,32,.72);
  color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); cursor: pointer; }
.mapa-intro-legenda button.ativo { background: rgba(255,207,92,.9); color: #1a1200; border-color: transparent; }
.mapa-intro-fala { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.92); }
html body #mapa-intro-continuar { width: 100%; padding: 14px; border: 0 !important; border-radius: 12px;
  background: rgba(255,255,255,.14) !important; color: #fff !important; font: 600 15px 'Inter', sans-serif; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .3s, color .3s; }
html body #mapa-intro-continuar.destaque { background: #ffcf5c !important; color: #1a1200 !important; }