/* ============================================================
   普赞智能客服 —— 聊天窗样式（明亮青蓝主题 + 72px 大按钮 + 引导标签 + 可拖动）
   配色：主蓝 #2ba8ee → #0277bb（比官网深蓝亮，保证在深色 Hero 上跳得出来）
   ============================================================ */

/* ---------- 悬浮按钮（72px 大按钮，可拖动） ---------- */
.pz-chat-fab {
  position: fixed; right: 24px; bottom: 24px;
  width: 72px; height: 72px; border-radius: 50%;
  border: 0; cursor: grab; z-index: 9999;
  background: linear-gradient(140deg, #2ba8ee, #0277bb);
  box-shadow: 0 8px 24px rgba(2, 119, 187, .34);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;                      /* 允许内部引导标签溢出显示 */
  touch-action: none;                     /* 触屏拖动必需 */
  transition: box-shadow .25s;
  animation: pz-breathe 3.4s ease-in-out infinite;
}
.pz-chat-fab:hover { box-shadow: 0 12px 32px rgba(2, 119, 187, .46); }
.pz-chat-fab.dragging {
  cursor: grabbing;
  transform: scale(1.07);
  animation: none;
  box-shadow: 0 16px 36px rgba(2, 119, 187, .46);
  opacity: .93;
}
.pz-chat-fab svg {
  width: 34px; height: 34px; fill: none; stroke: #fff;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
/* 呼吸光晕：柔和、慢、幅度小 */
@keyframes pz-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(2, 119, 187, .32), 0 0 0 0 rgba(43, 168, 238, .40); }
  50%      { box-shadow: 0 11px 30px rgba(2, 119, 187, .42), 0 0 0 12px rgba(43, 168, 238, 0); }
}
/* 红点（未读提示） */
.pz-chat-fab .pz-dot {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff6b6b; border: 2.5px solid #fff;
  animation: pz-pulse 2.6s infinite; pointer-events: none;
}
@keyframes pz-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: .8; }
}

/* ---------- "在线咨询"引导标签（挂在按钮内部，自动跟随拖动） ---------- */
.pz-chat-tip {
  position: absolute; top: 50%; right: calc(100% + 10px);
  transform: translateY(-50%);
  display: none;
  background: linear-gradient(135deg, #1f9de4, #026aa8);
  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  padding: 10px 16px; border-radius: 22px; white-space: nowrap;
  pointer-events: none; user-select: none;
  box-shadow: 0 6px 20px rgba(2, 119, 187, .34), 0 1px 3px rgba(0, 0, 0, .12);
}
.pz-chat-tip.show { display: block; animation: pz-tip-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
.pz-chat-tip.side-right { right: auto; left: calc(100% + 10px); }   /* 按钮太靠左时改到右侧 */
/* 入场只做缩放、不做透明度 —— 避免任何"半透明瞬间"让颜色发虚 */
@keyframes pz-tip-pop {
  from { transform: translateY(-50%) scale(.86); }
  to   { transform: translateY(-50%) scale(1); }
}

/* ---------- 聊天面板 ---------- */
.pz-chat {
  position: fixed; right: 24px; bottom: 112px;
  width: 372px; height: 566px; z-index: 9999;
  background: #fff; border-radius: 18px; overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: 0 20px 60px rgba(8, 40, 70, .22);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .22s, transform .22s;
}
.pz-chat.open { display: flex; opacity: 1; transform: none; }

/* 头部（大面积用略深的蓝，久看不累） */
.pz-chat__head {
  background: linear-gradient(135deg, #2596d8, #0173b5);
  color: #fff; padding: 15px 16px;
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
}
.pz-chat__ava {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
}
.pz-chat__tt { flex: 1; min-width: 0; }
.pz-chat__tt b  { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: .2px; }
.pz-chat__tt span { display: block; font-size: 11.5px; opacity: .95; margin-top: 2px; }
/* 在线状态点保持绿色（"在线"的通用语义色，在蓝底上依然清晰） */
.pz-chat__tt span i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #7bff9d; margin-right: 4px; vertical-align: 1px;
  box-shadow: 0 0 5px rgba(123, 255, 157, .9);
}
.pz-chat__x {
  background: none; border: 0; color: #fff; opacity: .85;
  cursor: pointer; font-size: 20px; line-height: 1; padding: 4px;
}
.pz-chat__x:hover { opacity: 1; }

/* 消息区 */
.pz-chat__body {
  flex: 1; overflow-y: auto; background: #f6f8fb;
  padding: 15px 14px 4px; scroll-behavior: smooth;
}
.pz-chat__body::-webkit-scrollbar { width: 6px; }
.pz-chat__body::-webkit-scrollbar-thumb { background: #b3d6ef; border-radius: 3px; }

.pz-msg { display: flex; gap: 8px; margin-bottom: 13px; align-items: flex-start; }
.pz-msg--me { flex-direction: row-reverse; }
.pz-msg__av {
  width: 29px; height: 29px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.pz-msg--bot .pz-msg__av { background: linear-gradient(140deg, #2ba8ee, #0277bb); color: #fff; }
.pz-msg--me  .pz-msg__av { background: #d8ecfa; color: #0b5c8f; }
.pz-msg__bub {
  max-width: 77%; padding: 10px 13px; border-radius: 13px;
  font-size: 13.6px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.pz-msg--bot .pz-msg__bub {
  background: #fff; color: #2a3242; border: 1px solid #edf1f6; border-top-left-radius: 4px;
}
.pz-msg--me .pz-msg__bub {
  background: linear-gradient(135deg, #2596d8, #0173b5);
  color: #fff; border-top-right-radius: 4px;
}
.pz-msg__bub a { color: #0b6db0; font-weight: 600; text-decoration: underline; }
.pz-msg--me .pz-msg__bub a { color: #fff; }

/* 打字动画 */
.pz-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.pz-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #86c8ee;
  animation: pz-blink 1.4s infinite;
}
.pz-typing i:nth-child(2) { animation-delay: .18s; }
.pz-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes pz-blink {
  0%, 60%, 100% { opacity: .34; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* 快捷问题 */
.pz-chat__quick {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 14px 11px; background: #f6f8fb;
}
.pz-chat__quick button {
  border: 1px solid #bfdff5; background: #fff; color: #0b6db0;
  font-size: 12.3px; padding: 6px 11px; border-radius: 15px;
  cursor: pointer; transition: .16s; font-family: inherit;
}
.pz-chat__quick button:hover {
  background: linear-gradient(135deg, #2596d8, #0173b5);
  border-color: #0173b5; color: #fff;
}

/* 输入区 */
.pz-chat__foot { border-top: 1px solid #eef2f7; padding: 10px 12px; background: #fff; flex-shrink: 0; }
.pz-chat__row { display: flex; gap: 8px; align-items: flex-end; }
.pz-chat textarea {
  flex: 1; border: 1px solid #dfe6ef; border-radius: 11px;
  padding: 9px 12px; font-size: 13.4px; resize: none;
  height: 40px; max-height: 104px; line-height: 1.5;
  font-family: inherit; outline: none; color: #2a3242; box-sizing: border-box;
}
.pz-chat textarea:focus { border-color: #2ba8ee; box-shadow: 0 0 0 3px rgba(43, 168, 238, .14); }
.pz-chat__send {
  width: 40px; height: 40px; border-radius: 11px; border: 0;
  background: linear-gradient(135deg, #2596d8, #0173b5);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: .16s;
  box-shadow: 0 3px 10px rgba(2, 119, 187, .26);
}
.pz-chat__send:hover { box-shadow: 0 5px 14px rgba(2, 119, 187, .36); }
.pz-chat__send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pz-chat__send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pz-chat__note { font-size: 10.8px; color: #97a3b5; text-align: center; margin-top: 7px; line-height: 1.5; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .pz-chat {
    left: 0 !important; top: 0 !important;
    right: 0; bottom: 0; width: 100%; height: 100%;
    max-height: 100%; border-radius: 0;
  }
  .pz-chat-fab { width: 64px; height: 64px; }
  .pz-chat-fab svg { width: 30px; height: 30px; }
  .pz-chat-tip { display: none !important; }   /* 小屏不显示引导标签，避免遮挡 */
  .pz-msg__bub { max-width: 84%; }
}