/* CW Floating Contact v1.1 */
.cwfc{
  position:fixed;
  bottom:26px;
  z-index:9998;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.cwfc--right{ right:26px; }
.cwfc--left{ left:26px; align-items:flex-start; }

.cwfc__item{ position:relative; display:flex; align-items:center; }

/* 按钮：常态圆形，悬停横向展开成胶囊，露出文字 */
.cwfc__btn{
  display:flex; align-items:center; justify-content:center;
  height:52px; min-width:52px; width:52px;
  padding:0;
  border-radius:26px;
  background:var(--cwfc-bg,#111);
  color:var(--cwfc-fg,#fff) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  text-decoration:none !important;
  overflow:hidden;
  box-sizing:border-box;
  transition:width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1), background .18s, box-shadow .18s;
  white-space:nowrap;
}
.cwfc__btn svg{
  width:26px; height:26px; fill:currentColor; display:block; flex:0 0 26px;
}
.cwfc__label{
  display:inline-block;
  max-width:0; opacity:0;
  margin-left:0;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  line-height:1;
  overflow:hidden;
  transition:max-width .28s cubic-bezier(.4,0,.2,1), opacity .2s, margin-left .28s cubic-bezier(.4,0,.2,1);
}
/* 悬停 / 触摸展开 */
.cwfc__item:hover .cwfc__btn,
.cwfc__item.cwfc-open .cwfc__btn{
  width:auto; padding:0 20px 0 15px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.cwfc__item:hover .cwfc__label,
.cwfc__item.cwfc-open .cwfc__label{
  max-width:220px; opacity:1; margin-left:10px;
}

/* 二维码：统一放在按钮组上方，绝不遮挡按钮 */
.cwfc__qrpanel{
  position:absolute;
  bottom:calc(100% + 14px);
  width:var(--cwfc-qr,168px); height:var(--cwfc-qr,168px);
  max-width:calc(100vw - 60px);
  background:#fff; border:1px solid #E8E8E8;
  padding:10px; box-sizing:content-box;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
  z-index:6;
}
.cwfc--right .cwfc__qrpanel{ right:0; }
.cwfc--left  .cwfc__qrpanel{ left:0; }
.cwfc__qrpanel svg{ width:100%; height:100%; display:block; }
.cwfc__qrpanel.is-show{ opacity:1; visibility:visible; transform:translateY(0); }
.cwfc__qrpanel__hint{
  position:absolute; left:0; right:0; bottom:-10px;
  height:10px;
}

@media (max-width:849px){
  .cwfc{ bottom:18px; gap:10px; }
  .cwfc--right{ right:16px; }
  .cwfc--left{ left:16px; }
  .cwfc__btn{ height:46px; min-width:46px; width:46px; border-radius:23px; }
  .cwfc__btn svg{ width:23px; height:23px; flex-basis:23px; }
  .cwfc__item:hover .cwfc__btn,
  .cwfc__item.cwfc-open .cwfc__btn{ padding:0 16px 0 12px; }
  .cwfc__label{ font-size:11px; }
  .cwfc__qrpanel{
    width:calc(var(--cwfc-qr,168px) * .8);
    height:calc(var(--cwfc-qr,168px) * .8);
    padding:8px;
    max-width:calc(100vw - 40px);
    bottom:calc(100% + 12px);
  }
  .cwfc--right .cwfc__qrpanel{ right:0; }
  .cwfc--left  .cwfc__qrpanel{ left:0; }
}
