/* Overlay dedicato — mobile-safe */
#vcg-overlay {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 2147483647 !important;
  isolation: isolate;
  /* forza layer compositing su mobile */
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform;
}

/* Neutralizza stacking context aggressivi nei figli del widget */
#vcg-overlay, #vcg-overlay * {
  transform: none !important;
}

/* Bolla 40x40 — safe area e mobile layer */
#vcg-bubble {
  position: fixed !important;
  bottom: calc(max(20px, env(safe-area-inset-bottom))) !important;
  right: calc(max(20px, env(safe-area-inset-right))) !important;
  background: #c12400;
  color: #fff;
  width: 40px; height: 40px;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  z-index: 2147483647 !important;
  animation: vcgBounce 10s infinite;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* riduce delay su mobile */
}

/* Bounce leggero */
@keyframes vcgBounce {
  0%, 90%, 100% { transform: translateY(0); }
  92% { transform: translateY(-10px); }
  94% { transform: translateY(0); }
  96% { transform: translateY(-6px); }
  98% { transform: translateY(0); }
}

/* Tooltip — mostra/sparisce via JS, sopra tutto */
#vcg-tooltip {
  display: none;
  position: absolute;
  bottom: 60px; right: 0;
  background: #333; color: #fff;
  padding: 8px 12px; border-radius: 6px;
  font-size: 14px; white-space: nowrap;
  z-index: 2147483647 !important;
  pointer-events: none;
}

/* Popup — animazione slide/fade, safe area */
#vcg-chatbox {
  position: fixed !important;
  bottom: calc(max(80px, env(safe-area-inset-bottom) + 60px)) !important;
  right: calc(max(20px, env(safe-area-inset-right))) !important;
  width: 300px;
  background: #fff;
  border: 2px solid #c12400; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  font-family: Arial, sans-serif;
  z-index: 2147483647 !important;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
  -webkit-transform: translateZ(0); /* iOS fix */
}
#vcg-chatbox.vcg-hidden {
  opacity: 0; transform: translateY(50px);
  pointer-events: none;
}

.vcg-chat-header {
  background: #c12400; color: #fff;
  padding: 10px; font-weight: bold; text-align: center;
}
.vcg-chat-body { padding: 10px; }
.vcg-btn {
  width: 100%; margin: 5px 0; padding: 8px;
  background: #c12400; color: #fff;
  border: none; cursor: pointer; border-radius: 4px;
}

/* Mitiga header/sticky esagerati (senza rompere layout) */
header, .header, .site-header, [class*="header"],
.fixed-header, .sticky-header {
  /* non imponiamo z-index basso globale: lasciamo invariato */
}

/* Mobile specific adjustments */
@media (max-width: 480px) {
  #vcg-chatbox {
    width: 92vw;
    right: calc(max(4vw, env(safe-area-inset-right)));
    bottom: calc(max(70px, env(safe-area-inset-bottom) + 50px));
  }
}