/* public/assets/chat.css —— 用户端「在线咨询」悬浮客服组件（需求②）
   自适应：桌面端右下角悬浮气泡 + 侧边面板；移动端底部抽屉（全宽）。
   复用主题变量（用户端 app.css 已定义 :root 变量），并带深色兜底。 */
.mzh-chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad, linear-gradient(120deg,#7c9bff,#a78bfa 55%,#5eead4));
  color: #fff; cursor: pointer; border: none; outline: none;
  box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.45));
  transition: transform .18s ease, box-shadow .18s ease;
}
.mzh-chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.mzh-chat-fab svg { width: 28px; height: 28px; }
.mzh-chat-fab .badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  box-sizing: border-box; border-radius: 999px;
  background: linear-gradient(180deg, #ff6b6b, #e11d48 62%, #be123c);
  color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
  border: 2px solid var(--bg, #070b18); text-shadow: 0 1px 1px rgba(0,0,0,.22);
  box-shadow: 0 2px 8px rgba(225,29,72,.6);
  display: none;
}
.mzh-chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 9001;
  width: 372px; max-width: calc(100vw - 28px); height: 560px; max-height: calc(100vh - 44px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg2, #0b1226); border: 1px solid var(--line, rgba(124,155,255,.16));
  border-radius: 16px; box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.45));
  color: var(--txt, #eaf0ff); font-size: 14px;
  transform: translateY(12px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.mzh-chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.mzh-chat-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--panel, rgba(20,28,54,.72)); border-bottom: 1px solid var(--line, rgba(124,155,255,.16));
}
.mzh-chat-header .h-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: var(--bg, #070b18); }
.mzh-chat-header .h-txt { flex: 1; min-width: 0; }
.mzh-chat-header .h-title { font-weight: 800; font-size: 15px; }
.mzh-chat-header .h-sub { font-size: 12px; color: var(--txt2, #aab4e0); margin-top: 1px; }
.mzh-chat-header .h-close {
  background: transparent; border: none; color: var(--txt2, #aab4e0); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px; border-radius: 8px;
}
.mzh-chat-header .h-close:hover { color: var(--txt, #eaf0ff); background: var(--line, rgba(124,155,255,.16)); }
.mzh-chat-body {
  flex: 1; overflow-y: auto; padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.mzh-chat-body .empty { color: var(--txt2, #aab4e0); text-align: center; margin-top: 30px; font-size: 13px; }
.mzh-chat-body .agent-card {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--panel, rgba(20,28,54,.5)); border: 1px solid var(--line, rgba(124,155,255,.16)); margin-bottom: 4px;
}
.mzh-chat-body .agent-card .a-name { font-weight: 700; }
.mzh-chat-body .agent-card .a-wx { font-size: 12px; color: var(--txt2, #aab4e0); margin-top: 2px; }
.mzh-chat-body .agent-card img.a-qr { width: 64px; height: 64px; border-radius: 8px; background: #fff; }
.msg { display: flex; gap: 8px; max-width: 86%; }
.msg .bubble { padding: 9px 12px; border-radius: 12px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.msg .who { font-size: 11px; color: var(--txt3, #7c87b8); margin-bottom: 3px; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .bubble { background: var(--grad, linear-gradient(120deg,#7c9bff,#a78bfa)); color: #fff; border-bottom-right-radius: 3px; }
.msg.agent .bubble { background: var(--panel, rgba(28,38,70,.6)); border: 1px solid var(--line, rgba(124,155,255,.16)); border-bottom-left-radius: 3px; }
.msg.system { align-self: center; max-width: 92%; }
.msg.system .bubble { background: transparent; color: var(--txt3, #7c87b8); font-size: 12px; text-align: center; padding: 4px 8px; }
.mzh-chat-form { padding: 12px 14px; border-top: 1px solid var(--line, rgba(124,155,255,.16)); background: var(--panel, rgba(20,28,54,.5)); }
.mzh-chat-form textarea {
  width: 100%; resize: none; min-height: 42px; max-height: 110px; border-radius: 10px; padding: 10px 12px;
  background: var(--bg, #070b18); color: var(--txt, #eaf0ff); border: 1px solid var(--line, rgba(124,155,255,.16));
  font-family: inherit; font-size: 14px; outline: none;
}
.mzh-chat-form textarea:focus { border-color: var(--indigo, #7c9bff); }
.mzh-chat-sendrow { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.mzh-chat-sendrow .hint { font-size: 11px; color: var(--txt3, #7c87b8); }
.btn-chat-send {
  border: none; cursor: pointer; border-radius: 10px; padding: 8px 16px; font-weight: 700; font-size: 13px;
  color: #fff; background: var(--grad, linear-gradient(120deg,#7c9bff,#a78bfa));
}
.btn-chat-send:disabled { opacity: .5; cursor: not-allowed; }
/* 游客留资表单 */
.mzh-chat-guest { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.mzh-chat-guest label { font-size: 12px; color: var(--txt2, #aab4e0); }
.mzh-chat-guest input, .mzh-chat-guest textarea {
  width: 100%; border-radius: 10px; padding: 9px 11px; background: var(--bg, #070b18); color: var(--txt, #eaf0ff);
  border: 1px solid var(--line, rgba(124,155,255,.16)); font-family: inherit; font-size: 13px; outline: none;
}
.mzh-chat-guest input:focus, .mzh-chat-guest textarea:focus { border-color: var(--indigo, #7c9bff); }
.mzh-chat-err { color: var(--rose, #fca5a5); font-size: 12px; min-height: 16px; }
@media (max-width: 768px) {
  .mzh-chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .mzh-chat-panel {
    right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: 78vh; max-height: 78vh; border-radius: 18px 18px 0 0;
  }
}
@media print { .mzh-chat-fab, .mzh-chat-panel { display: none !important; } }