/* LDG WhatsApp Widget v1.0.1 — LIANUDOM Digital Group */
:root{ --ldgwa-color:#25D366; }

.ldgwa{position:fixed;bottom:22px;z-index:99999;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Sarabun,Prompt,"Helvetica Neue",sans-serif;
  line-height:1.4}
.ldgwa[data-side="right"]{right:22px}
.ldgwa[data-side="left"]{left:22px}
.ldgwa *,.ldgwa *:before,.ldgwa *:after{box-sizing:border-box}

/* ---------- ปุ่มกลม + วงแหวนวื๊บ ๆ ---------- */
.ldgwa-fab{position:relative;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin-inline-start:auto;padding:0;border:0;border-radius:50%;
  background:var(--ldgwa-color);color:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .25s ease}
.ldgwa-fab:hover{transform:scale(1.08)}
.ldgwa-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ldgwa-fab > svg{position:relative;z-index:2;width:32px;height:32px}

.ldgwa-ring{position:absolute;inset:0;z-index:1;border-radius:50%;
  background:var(--ldgwa-color);opacity:.55;
  animation:ldgwaPulse 2s cubic-bezier(.4,0,.6,1) infinite}
.ldgwa-ring.r2{animation-delay:1s}
@keyframes ldgwaPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}

.ldgwa-badge{position:absolute;z-index:3;top:-2px;right:-2px;
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;border:2px solid #fff;
  background:#ff3b30;color:#fff;font-size:12px;font-weight:700;line-height:16px;
  animation:ldgwaBlink 1.4s ease-in-out infinite}
@keyframes ldgwaBlink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.85)}
}
.ldgwa.is-open .ldgwa-ring,
.ldgwa.is-open .ldgwa-badge{display:none}

/* ---------- popup card ---------- */
.ldgwa-box{position:absolute;bottom:76px;width:290px;overflow:hidden;
  background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1),visibility .28s}
.ldgwa[data-side="right"] .ldgwa-box{right:0;transform-origin:bottom right}
.ldgwa[data-side="left"]  .ldgwa-box{left:0;transform-origin:bottom left}
.ldgwa.is-open .ldgwa-box{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.ldgwa-x{position:absolute;z-index:3;top:6px;right:10px;
  padding:0;border:0;background:none;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;opacity:.85}
.ldgwa-x:hover{opacity:1}

.ldgwa-head{padding:20px 16px 16px;text-align:center;color:#fff;
  background:linear-gradient(160deg,var(--ldgwa-color),#128C7E)}
.ldgwa-av{position:relative;width:56px;height:56px;margin:0 auto 8px}
.ldgwa-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:#fff;border:2px solid rgba(255,255,255,.7)}
.ldgwa-av-fallback{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;background:#fff;color:var(--ldgwa-color)}
.ldgwa-av-fallback svg{width:32px;height:32px}
.ldgwa-dot{position:absolute;right:2px;bottom:2px;width:13px;height:13px;
  border-radius:50%;background:#4ade80;border:2px solid #fff}
.ldgwa-name{font-size:14px;font-weight:700}
.ldgwa-role{margin-top:2px;font-size:12px;opacity:.9}

.ldgwa-body{padding:16px 16px 6px;background:#ece5dd}
.ldgwa-bubble{position:relative;padding:10px 12px;border-radius:0 10px 10px 10px;
  background:#fff;color:#303030;font-size:13.5px;line-height:1.5;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ldgwa-bubble:before{content:"";position:absolute;left:-7px;top:0;
  border:7px solid transparent;border-top-color:#fff;border-right:0}

.ldgwa-typing{display:flex;gap:4px;padding:10px 4px 6px}
.ldgwa-typing span{width:6px;height:6px;border-radius:50%;background:#9aa19c;
  animation:ldgwaDot 1.2s infinite}
.ldgwa-typing span:nth-child(2){animation-delay:.2s}
.ldgwa-typing span:nth-child(3){animation-delay:.4s}
@keyframes ldgwaDot{
  0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

.ldgwa-cta{display:block;padding:12px 16px 16px;background:#ece5dd;text-decoration:none}
.ldgwa-cta i{display:block;padding:11px;border-radius:22px;
  background:var(--ldgwa-color);color:#fff;font-style:normal;font-size:14px;font-weight:700;
  text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:filter .2s}
.ldgwa-cta:hover i{filter:brightness(1.08)}

/* ---------- responsive ---------- */
@media (max-width:480px){
  .ldgwa{bottom:16px}
  .ldgwa[data-side="right"]{right:16px}
  .ldgwa[data-side="left"]{left:16px}
  .ldgwa-box{width:calc(100vw - 32px);max-width:300px}
}

@media (prefers-reduced-motion:reduce){
  .ldgwa-ring,.ldgwa-badge,.ldgwa-typing span{animation:none}
  .ldgwa-box{transition:none}
}