/* ==========================================================================
   whatsapp.css — 全站 WhatsApp 悬浮入口
   标记在 inc/modules/whatsapp.php，全站常显（含 404）。

   设计取舍
   --------
   - 绿色用 WhatsApp 品牌色 #25d366，唯一一个不遵循 navy/orange 品牌色系的
     元素。这是刻意的：绿色是识别信号，用户看到它就知道点下去会开 WhatsApp。
   - 默认 56px 圆按钮，鼠标悬停 / 键盘聚焦时向左展开成胶囊，「Chat on
     WhatsApp」滑出。触屏设备不展开 —— 移动端没有 hover，也不该为一次点击
     多占 180px 屏宽。
   - z-index 90：低于 header(100) 与移动抽屉(95)，抽屉打开时按钮被盖住，
     不会压住菜单项；高于正文任何内容。
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  /* 图标贴右、文字向左长：fixed 靠 right 定位，展开时向左延伸不越界 */
  flex-direction: row-reverse;
  align-items: center;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(18, 140, 70, 0.78),
    0 2px 8px rgba(21, 40, 61, 0.16);
  transition: background-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.wa-float__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
}

.wa-float__icon svg {
  width: 27px;
  height: 27px;
}

.wa-float__label {
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: max-width 0.24s var(--ease), opacity 0.16s var(--ease),
    padding-left 0.24s var(--ease);
}

/* 仅真·指针设备展开：触屏不触发，避免第一次点击只「展开不跳转」 */
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover,
  .wa-float:focus-visible {
    background: #1fb457;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(18, 140, 70, 0.86),
      0 3px 10px rgba(21, 40, 61, 0.18);
  }

  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label {
    max-width: 190px;
    padding-left: 20px;
    opacity: 1;
  }
}

/* 绿色底上橙色焦点环不够清晰，换成深 navy 外环 */
.wa-float:focus-visible {
  outline-color: var(--navy);
  outline-offset: 3px;
}

/* 移动端：贴边更近、略小，但仍 ≥ 48px 触控目标 */
@media (max-width: 640px) {
  .wa-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 52px;
  }

  .wa-float__icon {
    width: 52px;
    height: 52px;
  }

  .wa-float__icon svg {
    width: 25px;
    height: 25px;
  }
}

@media print {
  .wa-float {
    display: none;
  }
}