/* Kanal bantuan persisten. Varian preview dan Studio sengaja berada di header
   agar tidak bertabrakan dengan musik, auto-scroll, dock, form, atau toast. */
.support-contact{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.15;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.support-contact__icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#0d6046;
  background:#fff;
}

.support-contact__icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.support-contact__copy{display:flex;min-width:0;flex-direction:column}
.support-contact__copy strong{font-size:.78rem;font-weight:900;white-space:nowrap}
.support-contact__copy small{margin-top:3px;color:rgba(255,255,255,.78);font-size:.61rem;font-weight:650;white-space:nowrap}

.support-contact--floating{
  position:fixed;
  z-index:60;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  min-height:58px;
  padding:9px 15px 9px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(145deg,#187b59,#0f5942);
  box-shadow:0 18px 42px -18px rgba(5,68,47,.85),0 5px 14px rgba(4,46,33,.2);
  animation:support-contact-enter .45s cubic-bezier(.2,.75,.2,1) both;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,opacity .15s ease;
}

.support-contact--floating:hover{
  color:#fff;
  transform:translateY(-2px);
  background:linear-gradient(145deg,#1b8963,#0d513b);
  box-shadow:0 22px 48px -18px rgba(5,68,47,.92),0 7px 17px rgba(4,46,33,.24);
}

.support-contact:active{transform:scale(.975)}
.support-contact:focus-visible{outline:3px solid #f2c86f!important;outline-offset:3px!important}

/* Tombol WhatsApp menjadi kontrol keempat di header preview. */
.support-contact--preview{
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:1px solid rgba(118,234,190,.48);
  border-radius:12px;
  color:#eafff6;
  background:rgba(18,103,74,.92);
  box-shadow:0 9px 20px -14px rgba(40,210,148,.8);
}
.support-contact--preview:hover{color:#fff;background:#167956;border-color:#7de8bf}
.support-contact--preview .support-contact__icon{
  width:30px;
  height:30px;
  color:#eafff6;
  background:transparent;
}
.support-contact--preview .support-contact__icon svg{width:22px;height:22px}
.support-contact--preview .support-contact__copy{display:none}

/* Studio memakai topbar; tidak pernah mengambang di atas inspector/actionbar. */
.support-contact--studio{
  position:static;
  min-width:104px;
  height:44px;
  min-height:44px;
  padding:0 12px 0 7px;
  border:1px solid #9fc8b8;
  border-radius:12px;
  color:#164f3d;
  background:#eef8f4;
  box-shadow:none;
}
.support-contact--studio:hover{color:#0f392c;border-color:#5b9b83;background:#e4f5ee}
.support-contact--studio .support-contact__icon{width:30px;height:30px;color:#fff;background:#187b59}
.support-contact--studio .support-contact__icon svg{width:19px;height:19px}
.support-contact--studio .support-contact__copy strong{font-size:.7rem}

@keyframes support-contact-enter{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:859px){
  .support-contact--studio{width:44px;min-width:44px;padding:0}
  .support-contact--studio .support-contact__copy{display:none}
}

@media(max-width:600px){
  .support-contact--floating{
    right:calc(12px + env(safe-area-inset-right,0px));
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    min-height:54px;
    padding:7px 12px 7px 7px;
  }
  .support-contact--floating .support-contact__icon{width:40px;height:40px}
  .support-contact--floating .support-contact__copy strong{font-size:.72rem}
  .support-contact--floating .support-contact__copy small{display:none}
  .support-contact--floating + .foot{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}

  /* Saat papan ketik terbuka, CTA tidak menutupi field atau tombol formulir. */
  body:has(input:focus,textarea:focus,select:focus) .support-contact--floating{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
  }
}

@media(prefers-reduced-motion:reduce){
  .support-contact{animation:none!important;transition:none!important}
}

@media(forced-colors:active){
  .support-contact{border:2px solid ButtonText}
}