/* Tutu loadscreen — peek from map sidebar while layers load */
.pm-tutu-loadscreen {
  /* Assets HD 1024×1536. Keep CSS modest for retina sharpness. */
  --pm-tutu-ls-w: min(220px, 30vw);
  position: fixed;
  /* Borda da aba + 7px para a direita (encaixe na lateral) */
  right: calc(16px + var(--pm-map-rail-width, 420px) - 7px);
  /* Ao lado do bloco "Filtrar por categoria" (abaixo das tabs da sidebar) */
  top: max(132px, calc(76px + 56px));
  bottom: auto;
  z-index: 120;
  width: auto;
  max-width: min(460px, calc(100vw - 24px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  display: none;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0;
}

body.map-source-active .pm-tutu-loadscreen {
  display: flex;
}

.pm-tutu-loadscreen.is-visible {
  opacity: 1;
  visibility: visible;
}

.pm-tutu-loadscreen__sprite-wrap {
  position: relative;
  width: var(--pm-tutu-ls-w);
  flex: 0 0 auto;
}

.pm-tutu-loadscreen__sprite {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 1536;
  object-fit: contain;
  object-position: right top;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

.pm-tutu-loadscreen__bubble {
  position: relative;
  align-self: flex-start;
  margin-top: 22%;
  /* -24px anterior + 15px à direita = -39px */
  margin-right: -39px;
  max-width: 190px;
  padding: 11px 13px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(36, 78, 156, 0.18);
  box-shadow: 0 14px 30px rgba(36, 78, 156, 0.18);
  color: #1f3f7a;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translate3d(8px, 4px, 0) scale(0.96);
  transition:
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-tutu-loadscreen__bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 48%;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid rgba(36, 78, 156, 0.18);
  border-bottom: 1px solid rgba(36, 78, 156, 0.18);
  transform: translateY(-50%) rotate(-45deg);
}

.pm-tutu-loadscreen.has-bubble .pm-tutu-loadscreen__bubble {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: pm-tutu-bubble-float 2.8s ease-in-out infinite;
}

@keyframes pm-tutu-bubble-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -5px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-tutu-loadscreen.has-bubble .pm-tutu-loadscreen__bubble {
    animation: none;
  }
}

body.map-source-active:has(.pm-map-sidebar-rail-collapsed) .pm-tutu-loadscreen {
  right: 18px;
}

@media (max-width: 980px) {
  .pm-tutu-loadscreen {
    right: 12px;
    top: auto;
    bottom: calc(min(62vh, 520px) + 12px);
    --pm-tutu-ls-w: min(150px, 36vw);
  }

  .pm-tutu-loadscreen__bubble {
    max-width: 140px;
    font-size: 11px;
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-tutu-loadscreen,
  .pm-tutu-loadscreen__bubble {
    transition: none;
  }
}