/* =========================================================
   WhatsApp chat popup — Re-Inventing "You"
   ========================================================= */
.wa-chat{display:block!important;position:fixed;right:22px;bottom:22px;z-index:1500;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.wa-chat--left{right:auto;left:22px}
.wa-chat *{box-sizing:border-box}

/* Floating button */
.wa-chat__fab{position:relative;width:64px;height:64px;border-radius:50%;border:0;padding:0;cursor:pointer;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(18,140,126,.35),0 2px 6px rgba(0,0,0,.12);transition:transform .25s ease,box-shadow .25s ease;margin-left:auto}
.wa-chat--left .wa-chat__fab{margin-left:0}
.wa-chat__fab:hover{transform:scale(1.06);box-shadow:0 14px 34px rgba(18,140,126,.42),0 3px 8px rgba(0,0,0,.14)}
.wa-chat__fab:focus-visible{outline:3px solid #128C7E;outline-offset:3px}
.wa-chat__fab svg{width:34px;height:34px}
.wa-chat__badge{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#E53935;border:2px solid #fff;animation:wa-pulse 2s ease-in-out infinite}
.wa-chat.is-open .wa-chat__badge,.wa-chat.is-seen .wa-chat__badge{display:none}

/* Panel */
.wa-chat__panel{position:absolute;right:0;bottom:84px;width:360px;max-width:calc(100vw - 32px);border-radius:22px;overflow:hidden;background:#EFE7DE;box-shadow:0 24px 60px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.08);transform-origin:bottom right;animation:wa-in .28s cubic-bezier(.2,.9,.3,1.2)}
.wa-chat--left .wa-chat__panel{right:auto;left:0;transform-origin:bottom left}
.wa-chat__panel[hidden]{display:none}

.wa-chat__header{position:relative;display:flex;align-items:center;gap:16px;padding:24px 48px 24px 22px;background:#357F6B;color:#fff}
.wa-chat__avatar{position:relative;flex:0 0 64px;width:64px;height:64px}
.wa-chat__avatar img,.wa-chat__initial{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;background:#dfe7e4;border:2px solid rgba(255,255,255,.85)}
.wa-chat__initial{display:grid;place-items:center;font-size:26px;font-weight:700;color:#357F6B}
.wa-chat__online{position:absolute;right:1px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#4AD34A;border:2px solid #357F6B}
.wa-chat__who{min-width:0;display:flex;flex-direction:column;gap:4px}
.wa-chat__name{font-size:19px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat__status{font-size:14px;opacity:.9}
.wa-chat__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;padding:0}
.wa-chat__close:hover{color:#fff;background:rgba(255,255,255,.12)}
.wa-chat__close:focus-visible{outline:2px solid #fff;outline-offset:1px}
.wa-chat__close svg{width:18px;height:18px}

.wa-chat__body{position:relative;padding:14px 22px 26px;min-height:230px;background-color:#EFE7DE;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23cdbfae' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><path d='M18 20h26a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6H30l-8 7v-7h-4a6 6 0 0 1-6-6V26a6 6 0 0 1 6-6z'/><path d='M120 18l3.5 7.2 7.9 1.1-5.7 5.6 1.3 7.9-7-3.7-7 3.7 1.3-7.9-5.7-5.6 7.9-1.1z'/><path d='M78 70c-3-5-11-4-11 2 0 5 7 9 11 12 4-3 11-7 11-12 0-6-8-7-11-2z'/><circle cx='150' cy='82' r='9'/><path d='M146 82h8M150 78v8'/><rect x='20' y='104' width='26' height='18' rx='4'/><circle cx='33' cy='113' r='5'/><path d='M100 120l10-14 10 14z'/><path d='M140 140c6 0 10 4 10 10s-4 10-10 10'/><path d='M60 150h20M70 140v20'/><path d='M92 28c4 0 7 3 7 7M92 22c8 0 13 5 13 13'/><path d='M8 166l8-8 8 8'/></g></svg>");background-size:180px 180px}
.wa-chat__time{text-align:center;font-size:12px;color:#8a8580;margin:4px 0 16px;letter-spacing:.02em}
.wa-chat__bubble,.wa-chat__typing{position:relative;display:inline-block;max-width:82%;background:#fff;color:#1f1f1f;border-radius:0 16px 16px 16px;padding:13px 18px;font-size:15px;line-height:1.45;box-shadow:0 1px 1.5px rgba(0,0,0,.13);margin-left:8px}
.wa-chat__bubble:before,.wa-chat__typing:before{content:"";position:absolute;top:0;left:-8px;border-style:solid;border-width:0 9px 10px 0;border-color:transparent #fff transparent transparent}
.wa-chat__bubble[hidden],.wa-chat__typing[hidden]{display:none}
.wa-chat__bubble{animation:wa-fade .25s ease}
.wa-chat__typing{padding:14px 18px;display:inline-flex;gap:5px}
.wa-chat__typing span{width:7px;height:7px;border-radius:50%;background:#9aa3a0;animation:wa-dot 1.2s infinite ease-in-out}
.wa-chat__typing span:nth-child(2){animation-delay:.15s}
.wa-chat__typing span:nth-child(3){animation-delay:.3s}

.wa-chat__cta{display:flex;align-items:center;justify-content:center;gap:12px;width:calc(100% - 36px);margin:26px auto 0;padding:15px 22px;border:0;border-radius:999px;background:#25D366;color:#fff;font-family:inherit;font-weight:700;font-size:17px;line-height:1.1;cursor:pointer;box-shadow:0 6px 16px rgba(37,211,102,.35);transition:background .2s ease,transform .2s ease}
.wa-chat__cta:hover{background:#1EBE5B;transform:translateY(-1px)}
.wa-chat__cta:focus-visible{outline:3px solid #128C7E;outline-offset:2px}
.wa-chat__cta svg{width:26px;height:26px;flex:0 0 auto}

@keyframes wa-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wa-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes wa-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

@media (max-width:480px){
  .wa-chat{right:14px;bottom:14px}
  .wa-chat--left{left:14px}
  .wa-chat__fab{width:58px;height:58px}
  .wa-chat__fab svg{width:31px;height:31px}
  .wa-chat__panel{bottom:74px;width:calc(100vw - 28px);border-radius:18px}
  .wa-chat__header{padding:18px 46px 18px 18px}
  .wa-chat__body{min-height:210px;padding:12px 16px 22px}
}
@media (prefers-reduced-motion:reduce){
  .wa-chat__panel,.wa-chat__bubble,.wa-chat__badge,.wa-chat__typing span{animation:none!important}
  .wa-chat__fab,.wa-chat__cta{transition:none}
}
@media print{.wa-chat{display:none!important}}
