#wl-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #3b6fa0;
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(59,111,160,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 0; overflow: visible;
  transition: transform .2s, background .2s;
}
#wl-btn > svg {
  border-radius: 50%;
  overflow: hidden;
}
#wl-btn:hover { transform: scale(1.08); background: #2d5a8a; }

#wl-btn.wl-minimized {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(59,111,160,.4);
  overflow: hidden;
  opacity: .55;
  transition: width .3s ease, height .3s ease, opacity .3s ease, transform .2s;
}
#wl-btn.wl-minimized:hover {
  width: 68px;
  height: 68px;
  opacity: 1;
  transform: scale(1);
}
#wl-btn.wl-minimized svg,
#wl-btn.wl-minimized #wl-badge { opacity: 0; transition: opacity .2s; }
#wl-btn.wl-minimized:hover svg,
#wl-btn.wl-minimized:hover #wl-badge { opacity: 1; }

/* ── badge ── */
#wl-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 22px; height: 22px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  font-family: system-ui, sans-serif;
  animation: wl-badge-pulse 2s ease-in-out infinite;
}
@keyframes wl-badge-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── panel ── */
#wl-panel {
  position: fixed;
  bottom: 108px; right: 24px;
  width: 300px;
  background: #fff;
  border: 1px solid #dde4f0;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(26,26,46,.2);
  z-index: 9998;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transform: scale(.82) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.34,1.5,.64,1), opacity .22s ease;
}
#wl-panel.wl-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── header ── */
.wl-head {
  background: linear-gradient(135deg, #3b6fa0, #2d5a8a);
  padding: 14px 16px 12px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.wl-x {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,.18); border: none; border-radius: 50%;
  width: 26px; height: 26px; color: #fff; font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; line-height: 1; font-family: inherit;
}
.wl-x:hover { background: rgba(255,255,255,.32); }

.wl-hide {
  position: absolute; top: 10px; right: 44px;
  background: rgba(255,255,255,.18); border: none; border-radius: 10px;
  height: 26px; padding: 0 8px;
  color: #fff; font-size: 11px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  transition: background .15s; font-family: inherit; white-space: nowrap;
}
.wl-hide:hover { background: rgba(255,255,255,.32); }
.wl-head-text h3 { color:#fff; font-size:13px; font-weight:700; margin:0 0 2px; }
.wl-head-text p  { color:rgba(255,255,255,.68); font-size:11px; margin:0; }

/* ── tabs ── */
.wl-tabs {
  display: flex;
  border-bottom: 1px solid #eef1f7;
}
.wl-tab {
  flex:1; background:none; border:none;
  border-bottom: 2px solid transparent;
  color:#999; font-size:11px; font-weight:700;
  padding:9px 4px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em;
  font-family:inherit;
  transition: color .15s, border-color .15s;
}
.wl-tab.wl-on { color:#3b6fa0; border-bottom-color:#3b6fa0; }

/* ── panes ── */
.wl-pane { display:none; padding:12px 14px 14px; }
.wl-pane.wl-on { display:block; }

/* ── items ── */
.wl-item {
  display:flex; gap:9px; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid #f2f4f9;
  font-size:13px; color:#1a1a2e; line-height:1.4;
  cursor:pointer; text-decoration:none;
  transition:opacity .15s;
}
.wl-item:last-child { border-bottom:none; }
.wl-item:hover { opacity:.7; }
.wl-dot { width:7px; height:7px; border-radius:50%; background:#3b6fa0; margin-top:5px; flex-shrink:0; }
.wl-dot.y { background:#fbbf24; }
.wl-dot.g { background:#22c55e; }
.wl-item strong { display:block; font-size:15px; font-weight:600; }
.wl-item span   { font-size:11px; color:#aaa; }

/* ── footer ── */
.wl-foot {
  padding:8px 14px; border-top:1px solid #f2f4f9;
  font-size:10px; color:#ccc; text-align:center; letter-spacing:.06em;
}

/* ── character animations ── */
@keyframes wl-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes wl-blink {
  0%,88%,100% { transform: scaleY(0); }
  92%          { transform: scaleY(1); }
}
@keyframes wl-glow-ring {
  0%,100% { r:76; opacity:.18; }
  50%      { r:82; opacity:.06; }
}
@keyframes wl-badge-glow {
  0%,100% { filter:drop-shadow(0 0 4px #22c55e) drop-shadow(0 0 10px #22c55e); transform:scale(1); }
  50%      { filter:drop-shadow(0 0 10px #4ade80) drop-shadow(0 0 22px #4ade80); transform:scale(1.15); }
}

.wl-char-float { animation: wl-float 2.8s ease-in-out infinite; }
.wl-glow-ring  { animation: wl-glow-ring 2.8s ease-in-out infinite; }
.wl-badge-svg  { animation: wl-badge-glow 2s ease-in-out infinite; transform-origin: 128px 32px; }
.wl-lid-l { transform-origin: 68px 68px; animation: wl-blink 4s ease-in-out infinite; }
.wl-lid-r { transform-origin: 92px 68px; animation: wl-blink 4s ease-in-out infinite; animation-delay:.06s; }

/* ── mobile fixes ── */
@media (max-width: 600px) {
  #wl-btn {
    bottom: 16px; right: 16px;
    width: 58px; height: 58px;
  }
  #wl-panel {
    right: 16px;
    bottom: 90px;
    width: calc(100vw - 32px);
    max-width: 320px;
  }
}