.wfg-root{
  position: fixed;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}
.wfg-fab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  color: #fff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wfg-fab-text{ font-size: 14px; font-weight: 600; }
.wfg-icon{
  width: 22px; height: 22px; display: inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19.11 17.05c-.26-.13-1.5-.74-1.73-.82-.23-.09-.4-.13-.57.13-.17.26-.66.82-.81.99-.15.17-.3.19-.56.06-.26-.13-1.1-.4-2.1-1.28-.78-.69-1.31-1.54-1.46-1.8-.15-.26-.02-.4.11-.53.12-.12.26-.3.4-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44h-.49c-.17 0-.45.06-.69.32-.23.26-.9.88-.9 2.15s.92 2.49 1.05 2.66c.13.17 1.82 2.78 4.41 3.9.62.27 1.1.43 1.47.55.62.2 1.19.17 1.64.1.5-.08 1.5-.61 1.71-1.2.21-.6.21-1.1.15-1.2-.06-.1-.23-.17-.49-.3zM16.02 3C9.39 3 4 8.19 4 14.6c0 2.28.69 4.39 1.87 6.17L4.64 28l7.56-1.99c1.71.9 3.67 1.42 5.82 1.42 6.63 0 12.02-5.19 12.02-11.6C30.04 8.19 22.65 3 16.02 3zm0 22.06c-1.99 0-3.83-.55-5.4-1.5l-.39-.23-4.49 1.18 1.2-4.26-.26-.42c-1.09-1.67-1.72-3.65-1.72-5.77 0-5.64 4.85-10.22 10.84-10.22 5.99 0 10.84 4.58 10.84 10.22 0 5.64-4.85 10.22-10.84 10.22z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19.11 17.05c-.26-.13-1.5-.74-1.73-.82-.23-.09-.4-.13-.57.13-.17.26-.66.82-.81.99-.15.17-.3.19-.56.06-.26-.13-1.1-.4-2.1-1.28-.78-.69-1.31-1.54-1.46-1.8-.15-.26-.02-.4.11-.53.12-.12.26-.3.4-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44h-.49c-.17 0-.45.06-.69.32-.23.26-.9.88-.9 2.15s.92 2.49 1.05 2.66c.13.17 1.82 2.78 4.41 3.9.62.27 1.1.43 1.47.55.62.2 1.19.17 1.64.1.5-.08 1.5-.61 1.71-1.2.21-.6.21-1.1.15-1.2-.06-.1-.23-.17-.49-.3zM16.02 3C9.39 3 4 8.19 4 14.6c0 2.28.69 4.39 1.87 6.17L4.64 28l7.56-1.99c1.71.9 3.67 1.42 5.82 1.42 6.63 0 12.02-5.19 12.02-11.6C30.04 8.19 22.65 3 16.02 3zm0 22.06c-1.99 0-3.83-.55-5.4-1.5l-.39-.23-4.49 1.18 1.2-4.26-.26-.42c-1.09-1.67-1.72-3.65-1.72-5.77 0-5.64 4.85-10.22 10.84-10.22 5.99 0 10.84 4.58 10.84 10.22 0 5.64-4.85 10.22-10.84 10.22z"/></svg>') center/contain no-repeat;
}

/* panel */
.wfg-panel{
  position: absolute;
  bottom: 56px;
  width: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: all .18s ease;
}
.wfg-root.is-left .wfg-panel{ left: 0; }
.wfg-root:not(.is-left) .wfg-panel{ right: 0; }

.wfg-panel.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.wfg-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  color: #fff;
}
.wfg-panel-title{ font-weight: 800; font-size: 15px; }
.wfg-close{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
}
.wfg-panel-body{ padding: 12px; }
.wfg-greeting{ margin: 0; font-size: 14px; line-height: 1.4; color: #1f2937; }
.wfg-panel-footer{ padding: 12px; padding-top: 0; }
.wfg-open{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
}

/* themes */
.wfg-root[data-theme="green"] .wfg-fab{ background: #25D366; }
.wfg-root[data-theme="green"] .wfg-panel-header{ background: #128C7E; }
.wfg-root[data-theme="green"] .wfg-open{ background: #25D366; }

.wfg-root[data-theme="dark"] .wfg-fab{ background: #111827; }
.wfg-root[data-theme="dark"] .wfg-panel-header{ background: #111827; }
.wfg-root[data-theme="dark"] .wfg-open{ background: #111827; }

@media (max-width: 767px){
  .wfg-panel{ width: 260px; }
  .wfg-fab-text{ display: none; }
  .wfg-fab{ padding: 12px; }
}