/* V171 — isolated floating-control positioning + responsive safe-area layout only */
:root{
  --hph-float-edge: 16px;
  --hph-float-size: 54px;
  --hph-float-gap: 10px;
}

/* Right side: LINE centered directly above WhatsApp */
.hph-whatsapp-float{
  right:var(--hph-float-edge) !important;
  bottom:calc(var(--hph-float-edge) + env(safe-area-inset-bottom, 0px)) !important;
  min-width:132px;
  justify-content:center;
}
.hph-line-float{
  width:var(--hph-float-size) !important;
  height:var(--hph-float-size) !important;
  right:calc(var(--hph-float-edge) + 39px) !important;
  bottom:calc(var(--hph-float-edge) + env(safe-area-inset-bottom, 0px) + 52px + var(--hph-float-gap)) !important;
}

/* Left side: internal chat launcher and panel */
#hph-chat-launcher{
  left:var(--hph-float-edge) !important;
  right:auto !important;
  bottom:calc(var(--hph-float-edge) + env(safe-area-inset-bottom, 0px)) !important;
}
#hph-chat-panel{
  left:var(--hph-float-edge) !important;
  right:auto !important;
  bottom:calc(var(--hph-float-edge) + env(safe-area-inset-bottom, 0px) + var(--hph-float-size) + var(--hph-float-gap)) !important;
}

@media(max-width:640px){
  :root{--hph-float-edge:14px;--hph-float-size:54px;--hph-float-gap:10px}
  .hph-whatsapp-float{
    width:var(--hph-float-size) !important;
    min-width:var(--hph-float-size) !important;
    height:var(--hph-float-size) !important;
    padding:0 !important;
    right:var(--hph-float-edge) !important;
  }
  .hph-line-float{
    right:var(--hph-float-edge) !important;
    bottom:calc(var(--hph-float-edge) + env(safe-area-inset-bottom, 0px) + var(--hph-float-size) + var(--hph-float-gap)) !important;
  }
  #hph-chat-launcher{
    left:var(--hph-float-edge) !important;
    right:auto !important;
  }
  #hph-chat-panel{
    left:10px !important;
    right:auto !important;
    width:calc(100vw - 20px) !important;
    max-width:390px;
    height:min(68vh,600px) !important;
  }
}

@media(min-width:641px) and (max-width:1024px){
  :root{--hph-float-edge:16px}
  #hph-chat-panel{max-width:min(390px,calc(100vw - 32px))}
}

@media(max-width:390px){
  :root{--hph-float-edge:12px;--hph-float-size:52px;--hph-float-gap:9px}
  .hph-whatsapp-float{width:52px !important;min-width:52px !important;height:52px !important}
  .hph-line-float{width:52px !important;height:52px !important}
  #hph-chat-launcher{width:52px !important;height:52px !important}
}