/* ============================================================
   wechat.css - 微信客服入口样式（最小集合）
   
   用途: 微信悬浮按钮 + 弹层
   依赖: core/tokens.css
   更新: 2026-01-22
   ============================================================ */

/* ============================================================
   PC端悬浮区微信按钮
   ============================================================ */
.pb-float__wechat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px var(--overlay-text-10);
  cursor: pointer;
  transition: all var(--duration-200) var(--easing-in-out);
}

.pb-float__wechat:hover {
  background-color: #07c160;
  border-color: #07c160;
  box-shadow: 0 6px 20px rgba(7, 193, 96, 0.3);
  transform: translateY(-2px);
}

.pb-float__wechat img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(500%) hue-rotate(180deg);
  transition: filter var(--duration-150) var(--easing-in-out);
}

.pb-float__wechat:hover img {
  filter: brightness(0) invert(1);
}

/* ============================================================
   移动端底栏微信按钮（仅图标样式，不影响布局）
   ============================================================ */
.pb-mobile-bar__wechat img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(500%) hue-rotate(180deg);
  transition: filter var(--duration-150) var(--easing-in-out);
}

.pb-mobile-bar__wechat:hover img,
.pb-mobile-bar__wechat:focus img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(100deg);
}

/* ============================================================
   微信二维码弹层
   ============================================================ */
.pb-wechat-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.pb-wechat-popup[hidden] {
  display: none;
}

.pb-wechat-popup__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  cursor: pointer;
}

.pb-wechat-popup__content {
  position: relative;
  z-index: 1;
  max-width: 320px;
  width: 100%;
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: pb-wechat-in var(--duration-200) var(--easing-out);
}

@keyframes pb-wechat-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.pb-wechat-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.pb-wechat-popup__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.pb-wechat-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: calc(-1 * var(--space-1));
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-150) var(--easing-in-out);
}

.pb-wechat-popup__close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-tertiary);
}

.pb-wechat-popup__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6);
  text-align: center;
}

.pb-wechat-popup__qrcode {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-secondary);
}

.pb-wechat-popup__hint {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   微信号ID显示区域
   ============================================================ */
.pb-wechat-popup__id {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.pb-wechat-popup__id-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pb-wechat-popup__id-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-family: var(--font-family-mono);
}

.pb-wechat-popup__copy {
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.pb-wechat-popup__copy.is-copied {
  background-color: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

/* ============================================================
   微信绿色按钮变体
   ============================================================ */
.pb-btn--wechat {
  --btn-bg: #07c160;
  --btn-bg-hover: #06ae56;
  background: var(--btn-bg);
  color: var(--color-text-inverse);
}

.pb-btn--wechat:hover {
  background: var(--btn-bg-hover);
}

.pb-float .pb-btn--wechat {
  margin-bottom: var(--space-2);
}

.pb-btn--wechat img {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* 弹层打开时禁止滚动 */
body.wechat-open {
  overflow: hidden;
}