/* v517S — Useful Guide floating contact root fix
   Root cause fixed: Useful Guide pages were loading the floating-contact CSS but not the same
   chatbot + quick-contact dock JavaScript used on normal public pages. That left WhatsApp,
   Telegram as independent fixed buttons, so older CSS rules stacked them on top
   of each other. This file is a final scoped safety layer, loaded after v517F/H/Q/R. */

body.useful-guide-page,
body.useful-article-page{
  --vge-ug-chat-edge: 16px;
  --vge-ug-chat-width: 142px;
  --vge-ug-chat-gap: 14px;
  --vge-ug-icon-size: 42px;
  --vge-ug-dock-bottom: 18px;
  --vge-ug-chat-bottom: 18px;
  padding-bottom:calc(106px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Desktop/tablet: use the same concept as normal pages — quick icons sit to the LEFT of Need Help. */
body.useful-guide-page .vge-chatbot-root:not(.is-open),
body.useful-article-page .vge-chatbot-root:not(.is-open){
  position:fixed !important;
  right:var(--vge-ug-chat-edge) !important;
  left:auto !important;
  bottom:calc(var(--vge-ug-chat-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  transform:none !important;
  z-index:10060 !important;
}

body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher,
body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher{
  width:var(--vge-ug-chat-width) !important;
  min-width:var(--vge-ug-chat-width) !important;
  max-width:var(--vge-ug-chat-width) !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}

body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher span:last-child,
body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher span:last-child{
  display:inline !important;
}

body.useful-guide-page .vge-quick-contact-dock-v419G,
body.useful-article-page .vge-quick-contact-dock-v419G{
  position:fixed !important;
  right:calc(var(--vge-ug-chat-edge) + var(--vge-ug-chat-width) + var(--vge-ug-chat-gap)) !important;
  left:auto !important;
  top:auto !important;
  bottom:calc(var(--vge-ug-dock-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  width:auto !important;
  max-width:calc(100vw - 190px) !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  z-index:10055 !important;
  pointer-events:auto !important;
}

body.useful-guide-page .vge-quick-contact-item-v419G,
body.useful-article-page .vge-quick-contact-item-v419G{
  flex:0 0 var(--vge-ug-icon-size) !important;
  width:var(--vge-ug-icon-size) !important;
  min-width:var(--vge-ug-icon-size) !important;
  max-width:var(--vge-ug-icon-size) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}

body.useful-guide-page .vge-quick-contact-label-v419G,
body.useful-article-page .vge-quick-contact-label-v419G{
  display:none !important;
}
body.useful-guide-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-guide-page .vge-quick-contact-item-v419G > a.telegram-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.telegram-float{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  flex:0 0 var(--vge-ug-icon-size) !important;
  width:var(--vge-ug-icon-size) !important;
  min-width:var(--vge-ug-icon-size) !important;
  max-width:var(--vge-ug-icon-size) !important;
  height:var(--vge-ug-icon-size) !important;
  min-height:var(--vge-ug-icon-size) !important;
  max-height:var(--vge-ug-icon-size) !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

/* Hard fallback if the dock JS is delayed: keep direct body anchors separated too. */
body.useful-guide-page > a.whatsapp-float,
body.useful-article-page > a.whatsapp-float,
body.useful-guide-page > a.telegram-float,
body.useful-article-page > a.telegram-float{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  bottom:calc(var(--vge-ug-dock-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  width:var(--vge-ug-icon-size) !important;
  min-width:var(--vge-ug-icon-size) !important;
  max-width:var(--vge-ug-icon-size) !important;
  height:var(--vge-ug-icon-size) !important;
  min-height:var(--vge-ug-icon-size) !important;
  max-height:var(--vge-ug-icon-size) !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  border-radius:999px !important;
  z-index:10055 !important;
}

body.useful-guide-page > a.telegram-float,
body.useful-article-page > a.telegram-float{
  right:calc(var(--vge-ug-chat-edge) + var(--vge-ug-chat-width) + var(--vge-ug-chat-gap)) !important;
}
body.useful-guide-page > a.whatsapp-float,
body.useful-article-page > a.whatsapp-float{
  right:calc(var(--vge-ug-chat-edge) + var(--vge-ug-chat-width) + var(--vge-ug-chat-gap) + 108px) !important;
}
body.useful-guide-page .whatsapp-text,
body.useful-guide-page .telegram-text,
body.useful-article-page .whatsapp-text,
body.useful-article-page .telegram-text{
  display:none !important;
}

body.useful-guide-page .whatsapp-icon,
body.useful-guide-page .telegram-icon,
body.useful-article-page .whatsapp-icon,
body.useful-article-page .telegram-icon{
  width:23px !important;
  min-width:23px !important;
  height:23px !important;
  min-height:23px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  margin:0 !important;
}

@media (max-width: 760px){
  body.useful-guide-page,
  body.useful-article-page{
    --vge-ug-chat-edge:8px;
    --vge-ug-chat-width:118px;
    --vge-ug-chat-gap:10px;
    --vge-ug-icon-size:38px;
    --vge-ug-dock-bottom:58px;
    --vge-ug-chat-bottom:8px;
    padding-bottom:calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* On narrow screens, row above Need Help is safer than side-by-side. */
  body.useful-guide-page .vge-quick-contact-dock-v419G,
  body.useful-article-page .vge-quick-contact-dock-v419G{
    right:8px !important;
    bottom:calc(var(--vge-ug-dock-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    gap:8px !important;
    max-width:calc(100vw - 16px) !important;
  }

  body.useful-guide-page > a.telegram-float,
  body.useful-article-page > a.telegram-float{
    right:8px !important;
  }
body.useful-guide-page > a.whatsapp-float,
  body.useful-article-page > a.whatsapp-float{
    right:100px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px){
  body.useful-guide-page,
  body.useful-article-page{
    --vge-ug-chat-edge:12px;
    --vge-ug-chat-width:132px;
    --vge-ug-chat-gap:14px;
    --vge-ug-icon-size:40px;
    --vge-ug-dock-bottom:14px;
    --vge-ug-chat-bottom:14px;
  }
}