/* ============================================================
   湖南华知知识产权 · 官网「周周」顾问悬浮球
   —— 面向客户，专业顾问形象；不含任何员工/后台入口
   配色：墨蓝 #0B172B / 香槟金 #C8A359 / 米白 #FBF6EC
   ============================================================ */

.zz {
  --zz-navy: #0b172b;
  --zz-navy2: #172b4c;
  --zz-gold: #c8a359;
  --zz-gold-l: #e6c88c;
  --zz-cream: #fbf6ec;
  --zz-line: #ece3d3;
  --zz-txt: #1d2839;
  --zz-sub: #7b8698;
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 9000;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 悬浮球 ---------------- */
.zz-ball {
  position: relative;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(148deg, #fffdf8 0%, #f6e9d2 58%, #edd9b4 100%);
  box-shadow: 0 10px 26px rgba(120, 92, 46, 0.26), 0 2px 8px rgba(11, 23, 43, 0.14),
    inset 0 0 0 1px rgba(200, 163, 89, 0.42);
  display: grid;
  place-items: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.2), box-shadow 0.28s;
  -webkit-tap-highlight-color: transparent;
}
.zz-ball::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(200, 163, 89, 0.34);
  pointer-events: none;
  animation: zz-breathe 3.6s ease-in-out infinite;
}
.zz-ball:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 34px rgba(120, 92, 46, 0.32), 0 3px 10px rgba(11, 23, 43, 0.16),
    inset 0 0 0 1px rgba(200, 163, 89, 0.6);
}
.zz-ball:active { transform: translateY(-1px) scale(0.99); }
.zz-ball svg.zz-portrait { width: 52px; height: 52px; border-radius: 50%; display: block; }
.zz-ball.hide { opacity: 0; transform: scale(0.72); pointer-events: none; }

@keyframes zz-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  55% { opacity: 0.75; transform: scale(1.07); }
}

.zz-dot {
  position: absolute;
  right: 3px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #24b47e;
  border: 2.4px solid #fffdf8;
  box-shadow: 0 0 0 0 rgba(36, 180, 126, 0.5);
  animation: zz-live 2.6s infinite;
}
@keyframes zz-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 180, 126, 0.5); }
  65% { box-shadow: 0 0 0 7px rgba(36, 180, 126, 0); }
}

/* 名牌气泡 */
.zz-card-tip {
  position: absolute;
  right: 74px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px 10px 13px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--zz-line);
  box-shadow: 0 10px 28px rgba(11, 23, 43, 0.13);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.zz-card-tip::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 18px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-right: 1px solid var(--zz-line);
  border-bottom: 1px solid var(--zz-line);
  transform: rotate(-45deg);
}
.zz-card-tip b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--zz-txt);
  letter-spacing: 0.4px;
}
.zz-card-tip i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--zz-gold);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.zz-card-tip.on,
.zz-ball:hover + .zz-card-tip { opacity: 1; transform: none; }

/* ---------------- 面板 ---------------- */
.zz-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 392px;
  height: 616px;
  max-height: calc(100dvh - 36px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 70px rgba(11, 23, 43, 0.28), 0 6px 18px rgba(11, 23, 43, 0.1),
    0 0 0 1px rgba(200, 163, 89, 0.22);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transform-origin: right bottom;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.zz-panel.on { opacity: 1; transform: none; pointer-events: auto; }

/* 头部 */
.zz-hd {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  background: linear-gradient(132deg, #0b172b 0%, #16294a 62%, #1d3357 100%);
  color: #fff;
  overflow: hidden;
}
.zz-hd::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 163, 89, 0.22), transparent 68%);
  pointer-events: none;
}
.zz-hd-top { display: flex; align-items: center; gap: 12px; position: relative; }
.zz-hd-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(230, 200, 140, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.zz-hd-id { flex: 1; min-width: 0; }
.zz-hd-id b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.zz-hd-id span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #cbb287;
  letter-spacing: 0.4px;
}
.zz-hd-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  transition: 0.2s;
}
.zz-hd-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.zz-hd-slogan {
  position: relative;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(200, 163, 89, 0.24);
  font-size: 10.5px;
  color: #a9b6c9;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zz-hd-slogan em {
  font-style: normal;
  color: #e6c88c;
  font-size: 12px;
  letter-spacing: 1px;
}

/* 消息区 */
.zz-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 13px 8px;
  background: linear-gradient(180deg, #fdfcf9 0%, #fff 40%);
  scroll-behavior: smooth;
}
.zz-body::-webkit-scrollbar { width: 4px; }
.zz-body::-webkit-scrollbar-thumb { background: #e2d8c6; border-radius: 3px; }

.zz-msg { display: flex; gap: 9px; margin-bottom: 14px; align-items: flex-start; }
.zz-msg.me { justify-content: flex-end; }
.zz-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 1px solid rgba(200, 163, 89, 0.4);
}
.zz-bubble {
  max-width: 78%;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.72;
  border-radius: 4px 14px 14px 14px;
  background: #fff;
  color: var(--zz-txt);
  border: 1px solid var(--zz-line);
  box-shadow: 0 2px 8px rgba(11, 23, 43, 0.04);
  word-break: break-word;
}
.zz-msg.me .zz-bubble {
  background: linear-gradient(135deg, #172b4c, #0b172b);
  color: #f4f0e8;
  border: 0;
  border-radius: 14px 4px 14px 14px;
  box-shadow: 0 4px 14px rgba(11, 23, 43, 0.18);
}
.zz-disc {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed #efe6d6;
  font-size: 10.5px;
  line-height: 1.6;
  color: #a89a84;
}

/* 快捷提问 */
.zz-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 14px 37px;
}
.zz-quick button {
  border: 1px solid #e7d9bd;
  background: #fffdf8;
  color: #7a6a4c;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.18s;
  font-family: inherit;
}
.zz-quick button:hover {
  background: #fdf6e8;
  border-color: var(--zz-gold);
  color: #8a6c33;
}

/* 输入区 */
.zz-ft {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border-top: 1px solid #f2ece1;
  background: #fff;
}
.zz-input {
  flex: 1;
  border: 1px solid #eee5d5;
  background: #fcfaf6;
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 15px;
  min-height: 46px;
  line-height: 1.5;
  color: var(--zz-txt);
  resize: none;
  max-height: 92px;
  outline: none;
  font-family: inherit;
  transition: 0.2s;
}
.zz-input:focus { border-color: #d9c39a; background: #fff; box-shadow: 0 0 0 3px rgba(200, 163, 89, 0.1); }
.zz-send {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(140deg, #1d3357, #0b172b);
  color: #e6c88c;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.2s;
}
.zz-send:hover { background: linear-gradient(140deg, #24406c, #12203a); }
.zz-send:disabled { opacity: 0.5; cursor: default; }
.zz-send svg { width: 17px; height: 17px; }

.zz-note {
  flex: 0 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #5B6B82;
  padding: 0 12px 9px;
  background: #fff;
  letter-spacing: 0.2px;
}

/* 留资卡片 */
.zz-lead {
  display: none;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, #fdf8ee, #fff);
  border-top: 1px solid #f0e4cd;
  flex: 0 0 auto;
}
.zz-lead.on { display: block; }
.zz-lead h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--zz-txt);
  font-weight: 700;
}
.zz-lead p {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--zz-sub);
  line-height: 1.6;
}
.zz-lead-row { display: flex; gap: 8px; margin-bottom: 8px; }
.zz-lead input,
.zz-lead select {
  flex: 1;
  min-width: 0;
  border: 1px solid #e8dcc6;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12.5px;
  background: #fff;
  outline: none;
  font-family: inherit;
  color: var(--zz-txt);
}
.zz-lead input:focus { border-color: var(--zz-gold); }
.zz-lead button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #2a1f0e;
  background: linear-gradient(140deg, #e8cd97, #c8a359);
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
}
.zz-lead button:hover { filter: brightness(1.04); }
.zz-lead button:disabled { opacity: 0.65; cursor: default; }
.zz-lead-note { margin-top: 7px; font-size: 10.5px; color: #b0a48f; text-align: center; }
.zz-lead-note a { color: #a58c5e; text-decoration: underline; }

/* 首次提示：浅金小气泡 + 指向悬浮球的小尾巴（不会被误认成第二个球） */
.zz-hello {
  position: absolute;
  right: 74px;
  bottom: 12px;
  background: linear-gradient(135deg, #fdf6e3, #faf0d8);
  border: 1px solid #ecd9a8;
  border-radius: 14px 14px 3px 14px;
  padding: 8px 13px;
  font-size: 12px;
  color: #6b5a34;
  line-height: 1.6;
  box-shadow: 0 8px 20px rgba(160, 130, 60, 0.16);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.35s;
}
/* 指向球的尾巴 */
.zz-hello::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  background: #faf0d8;
  border-right: 1px solid #ecd9a8;
  border-top: 1px solid #ecd9a8;
  transform: rotate(45deg);
}
.zz-hello.on { opacity: 1; transform: none; }
.zz-hello b { color: var(--zz-gold); font-weight: 600; }
.zz-hello.out { opacity: 0; transform: translateY(-4px); }

/* loading */
.zz-dots { display: flex; gap: 4px; padding: 13px 14px; }
.zz-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d6c7ab;
  animation: zz-jump 1.2s infinite;
}
.zz-dots i:nth-child(2) { animation-delay: 0.16s; }
.zz-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes zz-jump {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* toast */
.zz-toast {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  background: rgba(11, 23, 43, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 18px;
  white-space: nowrap;
  opacity: 1;
  transition: 0.4s;
  pointer-events: none;
}
.zz-toast.out { opacity: 0; transform: translateX(-50%) translateY(6px); }

/* ---------------- 移动端 ---------------- */
@media (max-width: 560px) {
  .zz { right: 14px; bottom: 78px; }
  .zz-ball { width: 54px; height: 54px; }
  .zz-ball svg.zz-portrait { width: 45px; height: 45px; }
  .zz-panel {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 88dvh;
    max-height: none;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .zz-panel.on { transform: none; }
  .zz-hd { padding: 11px 12px 9px; }
  .zz-hd-slogan { margin-top: 6px; }
  .zz-card-tip, .zz-hello { display: none; }
  .zz-bubble { max-width: 84%; }
}

/* ---------------- 悬浮球全屏拖动（2026-11-08） ---------------- */
.zz.zz-drag{right:auto;bottom:auto;left:var(--zz-x,0px);top:var(--zz-y,0px);
  transition:none;will-change:left,top}
.zz.zz-drag .zz-ball{cursor:grab;transition:transform .18s,box-shadow .18s}
.zz.zz-drag .zz-ball:active{cursor:grabbing;transform:scale(.97)}
@media (max-width:767px){
  .hz-on .zz.zz-drag{right:auto!important;bottom:auto!important}
}
@media (min-width:768px){
  .zz.zz-flip .zz-panel{left:0;right:auto;transform-origin:left bottom}
  .zz.zz-flip .zz-card-tip{left:74px;right:auto;transform:translateX(-8px)}
}

/* ---------------- 悬浮球拖动：触摸行为与视觉反馈（2026-11-08 加固） ---------------- */
.zz-ball{
  touch-action:none!important;
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent!important;
}
.zz.zz-drag .zz-ball{transition:transform .16s ease,box-shadow .16s ease}
.zz.zz-drag .zz-ball:active{transform:scale(.94);box-shadow:0 6px 22px rgba(10,23,48,.34)}
/* 拖动中禁用页面文本选择与滚动惯性干扰 */
.zz.zz-dragging,.zz.zz-dragging *{touch-action:none!important;
  -webkit-user-select:none!important;user-select:none!important}
body.zz-dragging{touch-action:none!important;
  -webkit-user-select:none!important;user-select:none!important}

/* ---------------- 面板浅蓝化：提交按钮/头部装饰统一蓝青（2026-11-08） ---------------- */
.zz [data-act="lead"],
.zz .zz-lead button{
  background:linear-gradient(135deg,#2563EB,#0891B2)!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(37,99,235,.35)!important}
.zz .zz-send{background:linear-gradient(135deg,#2563EB,#0891B2)!important;color:#fff!important}
.zz .zz-quick button{border-color:rgba(37,99,235,.3)!important;color:#2563EB!important}
.zz .zz-msg.me .zz-bubble{background:linear-gradient(135deg,#2563EB,#1D4ED8)!important}


/* ============================================================
   2026-11-12：悬浮球视觉对齐 CRM 端周周（86px · 白边 · 光圈 · 呼吸 · 绿点）
   功能保持官网咨询不变
   ============================================================ */
.zz-ball {
  width: 86px;
  height: 86px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(46, 107, 230, 0.42);
  transition: transform 0.18s;
  animation: zz-crm-breath 3.2s ease-in-out infinite;
}
.zz-ball:hover { transform: scale(1.06); }
.zz-ball img.zz-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
  box-shadow: 0 3px 12px rgba(16, 36, 74, 0.28);
}
.zz-ball::after {
  inset: -6px;
  border: 2.5px solid rgba(46, 107, 230, 0.45);
  animation: zz-crm-halo 2.6s ease-out infinite;
}
@keyframes zz-crm-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes zz-crm-halo {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.28); opacity: 0; }
}
.zz-dot {
  width: 16px;
  height: 16px;
  background: #2ecc71;
  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.85);
}
/* 面板与消息里的头像统一照片化 */
.zz-hd-ava img, .zz-ava img,
.zz-ava-wrap img, .zz-hd-ava-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .zz-ball { width: 58px; height: 58px; }
  .zz-ball img.zz-portrait { border-width: 2.5px; }
  .zz-dot { width: 13px; height: 13px; border-width: 2.5px; }
  .zz-ball svg.zz-portrait { width: 58px; height: 58px; }
}

/* ---------- v2 卡片样式 ---------- */
.zz-cardbox{max-width:88%}
.zz-c-title{font-weight:600;font-size:13.5px;margin-bottom:6px}
.zz-c-line{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.zz-tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
.zz-tag.ok{background:#e6f7ef;color:#0f9d6e}
.zz-tag.warn{background:#fff7e6;color:#c97a00}
.zz-tag.bad{background:#fdeaea;color:#d43a3a}
.zz-score{font-size:11px;color:#8a94a6}
.zz-c-op{font-size:12.5px;line-height:1.7;background:#f7f9fc;border-radius:8px;padding:8px 10px;margin-bottom:6px}
.zz-case-row{padding:6px 0;border-top:1px dashed #e5eaf2}
.zz-case-row:first-of-type{border-top:none}
.zz-c-sub{display:block;font-size:11px;color:#8a94a6;margin:2px 0 4px}
.zz-bar{height:5px;border-radius:3px;background:#edf1f7;overflow:hidden}
.zz-bar i{display:block;height:100%;background:linear-gradient(90deg,#2f6bff,#5a8bff);border-radius:3px}
.zz-c-stage{font-size:11px;color:#5b6b84;margin-top:3px;display:inline-block}
.zz-c-foot{margin-top:8px}
.zz-act-btn{display:inline-block;padding:5px 12px;border-radius:16px;background:#2f6bff;color:#fff!important;font-size:12px;text-decoration:none;font-weight:500}
.zz-act-btn:hover{opacity:.9}

/* ---- 案件卡操作 ---- */
.zz-c-ops{display:flex;gap:10px;margin-top:10px}
.zz-opbtn{font-size:12.5px;color:#2B5CE6;background:#F0F4FF;border-radius:8px;padding:6px 12px;cursor:pointer;user-select:none}
.zz-opbtn:active{background:#E0E8FF}

/* ---- 2026-11-14：手机端面板收敛，不再遮挡页面内容 ---- */
@media (max-width: 480px){
  .zz-panel{ width: calc(100vw - 28px); height: min(700px, 80dvh); }
  .zz-hd-close{ width: 34px; height: 34px; font-size: 17px; }
  .zz-hd{ padding: 11px 12px 9px; }
}

/* 2026-11-14 头卡紧凑：容器定尺寸，头像 36px */
.zz-hd-ava-wrap{width:36px;height:36px;max-width:36px;max-height:36px;border-radius:50%;flex:0 0 auto;display:block;overflow:hidden;border:1px solid rgba(230,200,140,.65);box-shadow:0 3px 9px rgba(0,0,0,.3)}
.zz-hd-ava-wrap img{width:36px!important;height:36px!important;object-fit:cover}

/* AI 生成内容显式标识（合规要求，勿删） */
.zz-ai{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:5px;
  background:#EEF3FE;color:#2563EB;font-size:10.5px;font-weight:700;
  letter-spacing:.3px;vertical-align:1px;line-height:1.6;white-space:nowrap}