:root{
  --sw-wa-color:#00E676;      /* FAB + submit button */
  --sw-bg:#0f172a;            /* header/bg */
  --sw-card:#111827;          /* panel/card */
  --sw-text:#e5e7eb;          /* primary text */
  --sw-muted:#94a3b8;         /* helper text */
  --sw-border:#1f2937;        /* borders */
}

.sw-wa *{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.sw-wa__fab{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  background:var(--sw-wa-color); color:#052e16; cursor:pointer; border:none; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.sw-wa__fab svg{ width:28px; height:28px; }
.sw-wa__fab:active{ transform:scale(.98) }

.sw-wa__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:saturate(120%) blur(2px);
  z-index:9998; display:none;
}
.sw-wa__backdrop.active{ display:block }

.sw-wa__panel{
  position:fixed; z-index:9999; right:18px; bottom:86px;
  width:min(360px,92vw); border:1px solid var(--sw-border); border-radius:16px;
  background:var(--sw-card); color:var(--sw-text); box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:none; overflow:hidden;
}
.sw-wa__panel.active{ display:block }

.sw-wa__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--sw-bg) }
.sw-wa__title{ margin:0; font-size:16px }
.sw-wa__close{ background:transparent; border:0; color:var(--sw-text); font-size:20px; cursor:pointer }

.sw-wa__body{ padding:14px 16px }
.sw-wa__label{ display:block; margin:.5rem 0 .25rem; color:#cbd5e1 }
.sw-wa__textarea{
  width:100%; min-height:110px; padding:12px; border-radius:12px; border:1px solid #334155;
  background:#0b1220; color:var(--sw-text);
}
.sw-wa__hint{ color:var(--sw-muted); font-size:.9rem; margin-top:.35rem }
.sw-wa__error{ color:#fda4af; font-size:.9rem; display:none; margin-top:.35rem }
.sw-wa__submit{
  margin-top:12px; width:100%; padding:12px 16px; border-radius:12px; border:0;
  background:var(--sw-wa-color); color:#052e16; font-weight:800; cursor:pointer
}

/* Mobile: bottom sheet */
@media (max-width: 640px){
  .sw-wa__panel{ left:0; right:0; bottom:0; width:100%; border-radius:18px 18px 0 0; border-left:0; border-right:0; }
  .sw-wa__backdrop.active{ display:block }
}
