/* 官网在线智能客服 —— 样式（2026-09-25）
 * 取色与官网一致（--navy #0f172a / --red #c0392b / --cyan #0369a1），
 * 字体沿用官网 system-ui 栈，不引入任何网页字体文件、不用 emoji。
 */
.hyc-chat {
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: #0e1a26;
  --hc-navy: #0f172a;
  --hc-red: #c0392b;
  --hc-cyan: #0369a1;
  --hc-line: #e2e8f0;
  --hc-cream: #fdfbf7;
}
.hyc-chat * { box-sizing: border-box; }

/* —— 悬浮按钮 —— */
.hyc-chat .hc-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: var(--hc-navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  /* 2026-09-26：换裴总形象后头像要被圆钮裁切，不加会露出方形四角 */
  overflow: hidden;
  z-index: 9000;
}
/* 2026-09-26：原来 hover 把底色换成 --hc-red，头像满圆后 =
   一张脸外面套个红边圈，很怪。改成「红色描边 + 红投影」表达同一套反馈，
   红边画在元素外侧（box-shadow spread），不压到脸上。 */
.hyc-chat .hc-fab:hover {
  background: var(--hc-navy);
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--hc-red), 0 6px 18px rgba(192, 57, 43, 0.4);
}
.hyc-chat .hc-fab:active { transform: translateY(0); }

/* 2026-09-26：浮钮内裴总形象。144×144 头+肩、透明底，脸占画面约 80%，
   52px 显示时脸约 42px。object-fit:cover 保证两侧肩部贴圆、不出现白边。 */
.hyc-chat .hc-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* —— 面板 —— */
.hyc-chat .hc-panel {
  position: fixed;
  right: 24px;
  bottom: 108px;
  width: 360px;
  max-width: calc(100vw - 32px);
  /* 二维码改为常驻在联系方式下方后内容变高：
     固定 520px 会把二维码挤到可视区外（要滚动才看得到），
     所以让面板自己长高，到 max-height 再让对话区内部滚动。
     实测（1200x900 窗口，100vh=802）：
       内容 = 标题 44 + 对话区 150 + 留言表单 276 + 直连区 324 = 794
       面板 = min(内容, max-height)
     所以设 calc(100vh - 100px) 而不是 -120px：面板顶边距只剩 12px，
     刚好够把 794 的内容装进去、二维码不用滚动就看得全。 */
  height: auto;
  min-height: 420px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid var(--hc-line);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  /* 原来是 overflow:hidden。表单 + 直连入口 + 二维码展开后总高会超过 520px，
     hidden 会把下面的内容直接裁掉且无法滚动（客户看不到二维码）。改为可纵向滚动。 */
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 9001;
}
.hyc-chat .hc-panel[hidden] { display: none; }

.hyc-chat .hc-head {
  flex: none;
  background: var(--hc-navy);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hyc-chat .hc-title { font-size: 14px; line-height: 1.4; }
.hyc-chat .hc-x {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
}
.hyc-chat .hc-x:hover { opacity: 1; }

.hyc-chat .hc-body {
  flex: 1 1 auto;
  /* 对话区是面板里唯一会被压缩的部分：面板顶到 max-height 后，
     高度不够就让对话区让位（它自己会滚动），别把二维码顶出去。
     120px ≈ 能显示 2~3 条气泡，再矮就没法读对话了。
     （上一版 150px，实测会把二维码顶出可视区 100px+） */
  min-height: 120px;
  overflow-y: auto;
  padding: 12px;
  background: var(--hc-cream);
}
.hyc-chat .hc-log { display: flex; flex-direction: column; gap: 8px; }
.hyc-chat .hc-msg {
  max-width: 86%;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.65;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.hyc-chat .hc-msg.bot {
  background: #fff;
  border: 1px solid var(--hc-line);
  border-left: 3px solid var(--hc-cyan);
  align-self: flex-start;
}
.hyc-chat .hc-msg.me {
  background: var(--hc-navy);
  color: #fff;
  align-self: flex-end;
}
.hyc-chat .hc-mail-link { color: var(--hc-red); font-size: 13px; }

.hyc-chat .hc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hyc-chat .hc-q {
  background: #fff;
  border: 1px solid var(--hc-line);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--hc-navy);
  cursor: pointer;
}
.hyc-chat .hc-q:hover { border-color: var(--hc-red); color: var(--hc-red); }

/* —— 提问行 —— */
.hyc-chat .hc-form {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--hc-line);
  background: #fff;
}
.hyc-chat .hc-form[hidden] { display: none; }
.hyc-chat .hc-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
}
.hyc-chat .hc-input:focus { outline: 2px solid rgba(3, 105, 161, 0.35); outline-offset: 0; }
.hyc-chat .hc-send {
  background: var(--hc-navy);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 0 15px;
  font-size: 13px;
  cursor: pointer;
}
.hyc-chat .hc-send:hover { background: var(--hc-red); }

/* —— 留言表单 —— */
.hyc-chat .hc-leave {
  flex: none;   /* 不允许被 flex 压扁，否则表单会挤成一条 */
  padding: 12px;
  border-top: 1px solid var(--hc-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hyc-chat .hc-leave[hidden] { display: none; }
.hyc-chat .hc-f {
  width: 100%;
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.hyc-chat .hc-f:focus { outline: 2px solid rgba(3, 105, 161, 0.35); }
.hyc-chat .hc-submit {
  background: var(--hc-red);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
}
.hyc-chat .hc-submit:hover { background: #a93226; }
.hyc-chat .hc-submit:disabled { opacity: 0.6; cursor: default; }

/* —— 直连入口（WhatsApp / 微信）——
 * 只在点「转人工」后露出（由 chat.js 的 openLeave 打开），浮窗平时保持安静。
 * 图标用品牌色（识别度高），文字保持 navy（保证对比度可读）。
 */
.hyc-chat .hc-direct {
  flex: none;   /* 同上：不被压扁 */
  padding: 12px;
  border-top: 1px solid var(--hc-line);
  background: #fff;
}
.hyc-chat .hc-direct[hidden] { display: none; }
.hyc-chat .hc-direct-t {
  font-size: 12px;
  color: #5b6b7c;
  margin-bottom: 8px;
}
.hyc-chat .hc-direct-row {
  display: flex;
  gap: 8px;
}
.hyc-chat .hc-dbtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  background: #fff;
  color: var(--hc-navy);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hyc-chat .hc-dbtn:hover { background: #f8fafc; }
.hyc-chat .hc-dbtn svg { flex: none; }
.hyc-chat .hc-wa svg { color: #1da851; }
.hyc-chat .hc-wa:hover { border-color: #25d366; }
.hyc-chat .hc-wx svg { color: #07c160; }
.hyc-chat .hc-wx:hover { border-color: #07c160; }
.hyc-chat .hc-qr {
  /* width:fit-content：边框贴着二维码和提示文字，不拉满整个面板宽度
     （360px 的面板里塞一个 120px 的二维码，外面再套一圈 342px 宽的框会很空）。 */
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 8px;
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  background: #fff;
  text-align: center;
}
.hyc-chat .hc-qr[hidden] { display: none; }
.hyc-chat .hc-qr img {
  display: block;
  /* 不设 width:100%：图是正方形（纯二维码裁切，400x400），
     写 100% 会和父级 fit-content 互相牵制，直接用固有尺寸 + 上限更确定。
     120px 时二维码实体约 97px ≈ 2.6cm，扫描时每模块只有 2.5px —— 屏幕上发虚，
     属于"能扫但不稳"，所以再给一个点击放大的出口（见 .hc-zoom）。
     16vh 上限：矮屏（1366x768 笔记本，内高约 670）自动再缩一档，
     而不是被面板裁掉一截。 */
  max-width: min(120px, 16vh);
  margin: 0 auto;
  height: auto;
  border: 0;
  cursor: zoom-in;
}
.hyc-chat .hc-qr-t {
  margin-top: 6px;
  font-size: 12px;
  color: #5b6b7c;
}

/* —— 二维码放大层 ——
 * 点面板里的二维码或「微信」按钮弹出，300px（二维码约 243px，≈5px/模块）扫得稳。
 * 点任意处 / 按 Esc 关闭。纯 CSS + 一个 hidden 开关，不引入任何依赖。
 */
.hyc-chat .hc-zoom {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9100;
  background: rgba(15, 23, 42, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.hyc-chat .hc-zoom[hidden] { display: none; }
.hyc-chat .hc-zoom-box {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.4);
  max-width: 100%;
  text-align: center;
}
.hyc-chat .hc-zoom-box img {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  border: 0;
}
.hyc-chat .hc-zoom-t {
  margin-top: 8px;
  font-size: 13px;
  color: #5b6b7c;
}

/* 2026-09-26：客服面板里的 AIGC 显式标识（深色标题栏上的小字） */
.hyc-chat .hc-note {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* —— 窄屏 —— */
@media (max-width: 520px) {
  .hyc-chat .hc-panel { right: 12px; left: 12px; width: auto;
                        bottom: 100px; max-height: calc(100vh - 112px); }
  .hyc-chat .hc-fab { right: 16px; bottom: 16px; width: 72px; height: 72px; }
}