:root{
  --wa-green:#25D366;
  --wa-dark:#0b141a;
  --wa-card:#ffffff;
  --wa-text:#111827;
  --wa-muted:#6b7280;
  --wa-shadow: 0 12px 35px rgba(0,0,0,.18);
  --wa-radius: 16px;
}

.wa-widget{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wa-fab{
  width:56px;height:56px;
  border:none;border-radius:999px;
  background:var(--wa-green);
  box-shadow: var(--wa-shadow);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wa-fab:focus{
  outline:3px solid rgba(37,211,102,.35);
  outline-offset:3px;
}

.wa-panel{
  position:absolute;
  right:0;
  bottom:70px;
  width:320px;
  background:var(--wa-card);
  border-radius: var(--wa-radius);
  box-shadow: var(--wa-shadow);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
}
.wa-panel.open{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}

.wa-head{
  background: var(--wa-dark);
  color:#fff;
  padding:14px 14px 12px;
}
.wa-title{ font-weight:700; font-size:14px; margin:0; }
.wa-sub{ font-size:12px; margin:4px 0 0; opacity:.85; }

.wa-body{ padding:14px; color:var(--wa-text); }
.wa-label{ font-size:12px; color:var(--wa-muted); margin:0 0 6px; }

.wa-select, .wa-input{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  box-sizing:border-box;
  background:#fff;
}

.wa-input{
  margin-top:10px;
  resize:vertical;
  min-height:84px;
}

.wa-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.wa-btn{
  flex:1;
  border:none;
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
}

.wa-btn.primary{
  background: var(--wa-green);
  color:#fff;
}

.wa-btn.ghost{
  background:#f3f4f6;
  color:#111827;
}

.wa-foot{
  padding:0 14px 14px;
  font-size:11px;
  color:var(--wa-muted);
}