/* Floating widget styles - fits layuimini / layui simple aesthetic */
.fw-widget {
  position: fixed;
  right: 0; /* 贴合右侧边框 */
  bottom: 24px;
  z-index: 9999;
  font-family: "Helvetica Neue", Arial, "Microsoft Yahei", sans-serif;
  display: flex;
  flex-direction: column-reverse; /* bottom-most button placed at bottom */
  align-items: flex-end; /* keep buttons flush to right */
  gap: 8px;
  padding-right: 0; /* flush to edge */
}
.fw-main-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1e9fff,#3cc51f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  cursor: pointer;
}
.fw-actions {
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中于浮窗宽度 */
}
.fw-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  margin-bottom: 0;
  margin-right: -6px; /* push circle partly beyond page to visually attach to edge */
  cursor: pointer;
}
.fw-action-btn i {font-style: normal;}
.fw-label {font-size:12px;color:#666;margin-top:6px;text-align:center}
/* QR / panel styles */
.fw-panel {
  position: fixed;
  /* 位置由 JS 计算并设置 right/bottom，以便贴合浮窗 */
  z-index: 9998;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  display: none;
  min-width: 220px;
}

.fw-action-btn { transition: transform .12s ease, box-shadow .12s ease; }
.fw-action-btn:hover { transform: translateX(-4px) scale(1.02); box-shadow: 0 10px 26px rgba(0,0,0,0.12); }

/* style for layer.tips tooltip - white background, dark text, soft shadow & fade-in */
.layui-layer-tips {
  background: #fff !important;
  color: #222 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.layui-layer-tips .layui-layer-content { color: #222 !important; }

/* fallback tooltip element */
#fw-tooltip {
  position: fixed;
  padding: 8px 12px;
  background: #fff;
  color: #222;
  border-radius: 8px;
  font-size: 13px;
  z-index: 10000;
  display: none;
  white-space: nowrap;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  transition: opacity .18s ease, transform .18s ease;
  opacity: 0;
  transform: translateX(6px);
}
#fw-tooltip.show { opacity: 1; transform: translateX(0); }
.fw-panel h4 {margin:0 0 8px 0;font-size:14px;color:#333}
.fw-panel .fw-qr {width:160px;height:160px;background:#f7f7f7;display:block}
/* calculator modal */
.fw-calc {display:none;position:fixed;z-index:9998;background:#fff;padding:12px;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,0.12);}
.fw-calc .fw-calc-display{width:220px;height:44px;border:1px solid #eee;border-radius:4px;padding:8px;font-size:18px;text-align:right;background:#fafafa;margin-bottom:8px}
.fw-calc .fw-calc-grid{display:grid;grid-template-columns:repeat(4,54px);grid-gap:8px}
.fw-calc .fw-calc-grid button{height:44px;border-radius:4px;border:none;background:#f5f5f7;cursor:pointer;font-size:16px}
.fw-calc .fw-calc-grid button.op{background:#1e9fff;color:#fff}
.fw-calc .fw-calc-grid button.equal{grid-column: span 2;background:#3cc51f;color:#fff}
/* small responsive tweaks */
@media (max-width:700px){
  .fw-panel { right: 68px; bottom: 20px; }
  .fw-calc { right: 68px; bottom: 20px; }
}