:root{
  --wa-green: #25D366;
  --bg: #ffffff;
  --card-bg: #f8faf9;
  --muted: #6b7280;
  --shadow: 0 8px 30px rgba(2,6,23,0.12);
  --btn-size: 62px;
  --blue-bubble: #6fb4ff;
  --bubble-text: #fff;
}
.wa-widget {
  position: fixed;
  right: 6px;
  bottom: 24px;
  z-index: 99999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.wa-card {
  width: 360px;
  background: linear-gradient(180deg, #ffffff, var(--card-bg));
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* opacity: 0; */
  display: none;
  transform: translateY(16px) scale(.98);
  pointer-events: none;
  transition: 0.25s ease;
}
.wa-card.open {
  /* opacity: 1; */
  display: block;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-header {
  display:flex;
  align-items:center;
  padding:12px;
  gap:12px;
  background:linear-gradient(90deg, rgba(37,211,102,0.08), rgba(37,211,102,0.02));
}
.wa-header .title { font-size:15px; font-weight:600; color:#0b3940; }
.wa-header .subtitle { font-size:12px; color:var(--muted); }
.wa-header .close-btn {
  margin-left:auto;
  background:none;
  border:none;
  cursor:pointer;
}
.wa-chat { padding:12px; }
.msg-row { display:flex; gap:12px; }
.avatar {
  width:44px; height:44px;
  border-radius:10px;
  background:#eef7f6;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bubble {
  max-width: 100%;
  width: fit-content;
    font-size: 14px;
    color: white;
  padding: 14px 18px;
  line-height: 1.45;
  border-radius: 14px;
  background: #078DD2;
}
.quick-replies { margin:10px 0 0 56px; display:flex; flex-direction:column; gap:10px; }
.pill {
  border:1.5px solid rgba(37,130,255,0.18);
  padding:7px 12px;
  border-radius:8px;
  background:white;
      color: black;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  transition:0.2s ease;
}
.pill:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,0.08); }
.wa-btn {
  width:62px; height:62px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:#078DD2;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.wa-btn i {
  font-size: 32px;  
  color: #ffffff;        
  line-height: 1;
}
