:root{
  --wa-ci:#27A02D;
  --wa-ci-dark:#1E7C23;
  --wa-text-on:#fff;
  --panel-bottom:86px;
}

.wa-chat{
  position:fixed; right:14px; bottom: var(--wa-bottom, 14px); z-index:2147483647;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; isolation:isolate;
}

.wa-overlay{ position:fixed; inset:0; background:rgba(255,255,255,.55);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease; }
.wa-chat.panel-open .wa-overlay{ opacity:1; visibility:visible; pointer-events:auto; }

.wa-pill{
  position:relative; display:flex; align-items:center; gap:10px; border:0; cursor:pointer; color:var(--wa-text-on);
  background:var(--wa-ci); border-radius:9999px; padding:14px 18px 14px 78px; min-height:76px;
  box-shadow:0 10px 26px rgba(0,0,0,.18); opacity:1; transition:opacity .25s ease;
}
.wa-chat.panel-open .wa-pill{ opacity:0; pointer-events:none; }
.wa-pill:hover{ background:var(--wa-ci-dark); }

.wa-pill__avatarWrap{
  position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:84px; height:84px; border-radius:9999px; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.wa-pill__avatar{ width:72px; height:72px; border-radius:9999px; background:#ddd center/cover no-repeat; }

.wa-pill__badge{
  position:absolute; left:-6px; top:-6px; width:28px; height:28px; border-radius:9999px;
  background:var(--wa-ci); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.2); 
}

.wa-pill__row1{ display:flex; align-items:center; gap:8px; opacity:.95; }
.wa-pill__name{ font-weight:600; font-size:15px; }
.wa-pill__online{ font-size:11px; padding:3px 7px; background:rgba(255,255,255,.22); color:#fff; border-radius:9999px; }
.wa-pill__row2{ margin-top:2px; }
.wa-pill__heading{ font-weight:700; font-size:16px; text-transform: none !important; }

.wa-panel{
  position:fixed; right:14px; bottom:var(--panel-bottom);
  width:340px; max-width:92vw; background:#fff; border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.18); overflow:hidden;
  opacity:0; transform:translateY(12px); visibility:hidden; transition:all .22s ease; z-index:2147483647;
}
.wa-chat.panel-open .wa-panel{ opacity:1; transform:translateY(0); visibility:visible; }

.wa-hero{ display:flex; align-items:center; gap:10px; background:var(--wa-ci); color:#fff; padding:14px 16px; }
.wa-hero__avatar{ flex:0 0 auto; width:48px; height:48px; border-radius:9999px; background:#ddd center/cover no-repeat; border:3px solid rgba(255,255,255,.95); box-shadow:0 5px 14px rgba(0,0,0,.22); }
.wa-hero__title{ font-weight:700; font-size:16px; }
.wa-hero__subtitle{ font-size:13px; line-height:1.3; opacity:.95; }

.wa-body{ padding:12px; }
.wa-welcome{ margin:.2rem 0 .8rem 0; color:#111; font-size:14px; }
.wa-label{ font-size:.8rem; color:#333; display:block; margin-bottom:6px; }
.wa-textarea{ width:100%; border:2px solid var(--wa-ci); border-radius:10px; padding:10px; resize:vertical; min-height:68px; font:14px/1.4 inherit; }
.wa-textarea:focus{ outline:none; border-color:var(--wa-ci-dark); box-shadow:0 0 0 3px rgba(106,62,161,.18); }
.wa-send{ margin-top:10px; width:100%; padding:9px 10px; border:none; border-radius:10px; background:var(--wa-ci); color:#fff; font-weight:700; font-size:15px; cursor:pointer; text-transform: none !important; }
.wa-send:hover{ background:var(--wa-ci-dark); filter:brightness(.97); }
.wa-note{ display:block; margin-top:8px; color:#6b7280; font-size:12px; }

.wa-close{
  position:fixed; right:32px; bottom:18px;
  width:52px; height:52px; border-radius:9999px; border:0;
  background:var(--wa-ci); color:#fff; font-size:20px;
  box-shadow:0 10px 22px rgba(0,0,0,.22); cursor:pointer;
  opacity:0; transform:scale(.9); visibility:hidden; pointer-events:none;
  transition:all .22s ease; z-index:2147483647;
}

.wa-close:hover{ background:var(--wa-ci-dark); }

.wa-chat.panel-open .wa-close{ opacity:1; transform:scale(1); visibility:visible; pointer-events:auto; }

@media (max-width:640px){
  .wa-chat.panel-open .wa-overlay{ background:rgba(255,255,255,.82); }
  .wa-chat:not(.panel-open) .wa-pill{ background:transparent; box-shadow:none; padding:0; min-height:auto; width:auto; height:auto; }
  .wa-chat:not(.panel-open) .wa-pill__content{ display:none; }
  .wa-chat:not(.panel-open) .wa-pill__avatarWrap{ position:static; transform:none; width:72px; height:72px; box-shadow:0 6px 16px rgba(0,0,0,.2); }
  .wa-chat:not(.panel-open) .wa-pill__badge{ position:absolute; left:50%; bottom:-12px; top:auto; transform:translateX(-50%); width:28px; height:28px; }
  .wa-close{ bottom:10px !important; }
}