/* ==========================================================================
 * kp-contact-float.css — 全站右侧悬浮客服 · 统一黑金皮肤
 * --------------------------------------------------------------------------
 * 目的：把三套并存的客服浮层样式收敛为同一套视觉（黑底 / 品牌橙 / 简约线性图标），
 *      与顶部导航「登录 / 注册 / 合作洽谈」按钮同一设计语言。
 *
 * 背景（为什么需要本文件）：
 *   站内同时存在 3 处 .kp-contact-* 样式定义，互不同源：
 *     ① template/default/skin/css/style.css  —— 旧版「白底 + 蓝色图标(#4a90e2)」，用于所有 PbootCMS 模板页
 *     ② template/default/html/index.html     —— 首页内联的深色版本（与插件 CSS 重复的一份拷贝）
 *     ③ /static/kp-contact-float.js          —— 运行时 document.head.appendChild 注入的深色版本
 *   三处选择器特异性均为 (0,1,0)。本文件统一加 `html body` 前缀 → (0,2,1)，
 *   因此无论加载顺序与媒体查询，均能稳定覆盖，且只作用于 .kp-contact-* / .kp-ai-* 自身类名，
 *   不产生任何站点级样式污染。
 *
 * 边界：仅覆盖样式，不改动插件 JS 逻辑、DOM 结构、接口与交互行为；
 *      在线咨询（AI 客服）/ 加微信 / 服务热线 / 返回顶部 四项功能全部保留。
 * 版本：kf20260913a（改后请 bump 引用查询串）
 * ========================================================================== */

/* 设计令牌（--kf- 前缀，避免与站点变量冲突） */
html body{
  --kf-bg:#FFFFFF;                 /* 面板白底 */
  --kf-bg2:#F7F8FA;                /* 次级浅灰底（气泡/输入框） */
  --kf-line:#E5E6EB;               /* 浅边框 */
  --kf-line-org:rgba(22,119,255,.30);  /* 品牌蓝细边 */
  --kf-org:#1677FF;                /* 品牌蓝（图标/强调/按钮） */
  --kf-org2:#0958D9;               /* 品牌蓝深（hover/渐变） */
  --kf-txt:#1D2129;                /* 标题深炭灰 */
  --kf-mut:#4E5969;                /* 正文/次要中灰 */
  --kf-org-soft:#E8F3FF;           /* 浅蓝高亮底 */
  --kf-org-soft2:rgba(22,119,255,.16);
}

/* ---------------- 容器 ---------------- */
html body .kp-contact-float{
  position:fixed; right:20px; bottom:96px; z-index:70;
  display:flex; flex-direction:column; align-items:flex-end;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ---------------- 主卡片：深色黑底、细边、去金色描边与真人头像 ---------------- */
html body .kp-contact-card{
  width:232px;
  background:var(--kf-bg,#FFFFFF);
  border:1px solid var(--kf-line);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.14);
  overflow:hidden; position:relative;
}
/* 去除插件自带的真人头像 / 卡通装饰，保持供应链 B 端克制风格 */
html body .kp-contact-avatar{ display:none !important; }
html body .kp-contact-avatar img{ display:none !important; }

html body .kp-contact-body{ padding:8px; display:flex; flex-direction:column; gap:2px; }

/* 行 = 深色底 + 简约线性图标，hover / 点击橙色高亮（与顶栏按钮同一语言） */
html body .kp-contact-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  text-decoration:none; color:var(--kf-txt); cursor:pointer;
  transition:background .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
html body .kp-contact-row:hover{ background:var(--kf-org-soft); color:var(--kf-org); }
html body .kp-contact-row:active{ background:var(--kf-org-soft2); color:var(--kf-org); }

html body .kp-contact-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:var(--kf-org-soft); color:var(--kf-org);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(22,119,255,.20);
}
html body .kp-contact-icon svg{ width:17px; height:17px; display:block; }
html body .kp-contact-icon .fa,
html body .kp-contact-icon .fas,
html body .kp-contact-icon .far{ font-size:16px; line-height:1; }

html body .kp-contact-text{ display:flex; flex-direction:column; line-height:1.3; }
html body .kp-contact-text strong{ font-size:14px; font-weight:600; color:var(--kf-txt); }
html body .kp-contact-text > span{ font-size:12.5px; color:var(--kf-mut); margin-top:2px; }
html body .kp-contact-phone{ color:var(--kf-org); font-weight:600; }

/* 微信二维码浮层：深色 */
html body .kp-contact-qr{
  position:absolute; inset:0; background:var(--kf-bg);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; text-align:center; cursor:pointer;
}
html body .kp-contact-card.show-wechat .kp-contact-qr{ display:flex; }
html body .kp-contact-qr img{
  width:150px; height:150px; max-width:100%; border-radius:10px;
  object-fit:contain; background:#FFFFFF; border:1px solid var(--kf-line);
}
html body .kp-contact-qr p{ font-size:13px; color:var(--kf-mut); margin:10px 0 0; }

/* 返回顶部：与顶栏描边按钮同款 */
html body .kp-contact-backtop{
  width:44px; height:44px; border-radius:12px; margin-top:8px;
  background:var(--kf-org); border:1px solid var(--kf-org);
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
html body .kp-contact-backtop:hover{ background:var(--kf-org2); border-color:var(--kf-org2); }
html body .kp-contact-backtop:active{ background:var(--kf-org2); color:#FFFFFF; }
html body .kp-contact-backtop svg{ width:18px; height:18px; }
html body .kp-contact-backtop .fa{ font-size:16px; line-height:1; }

/* ---------------- 展开客服面板（AI 客服）：深色底 / 白字 / 品牌橙高亮 ---------------- */
html body .kp-ai-chat{
  position:fixed; right:252px; bottom:96px; width:360px; max-width:calc(100vw - 40px);
  background:var(--kf-bg); border:1px solid var(--kf-line);
  border-radius:16px; box-shadow:0 20px 52px rgba(0,0,0,.16); z-index:120;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}
html body .kp-ai-chat.active{ opacity:1; visibility:visible; transform:translateY(0); }
html body .kp-ai-chat.minimized{ height:60px; overflow:hidden; }

html body .kp-ai-chat-header{
  background:var(--kf-bg2); border-bottom:1px solid var(--kf-line);
  color:var(--kf-txt); padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
}
html body .kp-ai-chat-info{ display:flex; align-items:center; gap:10px; }
/* 面板内头像同样去除，改为线性图标位，统一视觉 */
html body .kp-ai-chat-info img{ display:none !important; }
html body .kp-ai-chat-info:before{
  content:""; width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:var(--kf-org-soft); border:1px solid rgba(22,119,255,.20);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231677FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3Cpath d='M12 8v2'/%3E%3C/svg%3E");
  background-size:18px 18px; background-repeat:no-repeat; background-position:center;
}
html body .kp-ai-chat-info div{ display:flex; flex-direction:column; line-height:1.3; }
html body .kp-ai-chat-info strong{ font-size:15px; font-weight:600; color:var(--kf-txt); }
html body .kp-ai-chat-info span{ font-size:12.5px; color:var(--kf-org); }

html body .kp-ai-chat-actions{ display:flex; gap:8px; align-items:center; }
/* 关闭 / 最小化：加边框按钮化，关闭键醒目 */
html body .kp-ai-chat-actions i{
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:1px solid var(--kf-line); background:#F2F3F5;
  color:var(--kf-mut); display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
html body .kp-ai-chat-actions i:hover{ background:var(--kf-org); color:#FFFFFF; border-color:var(--kf-org); }
html body .kp-ai-chat-actions i svg{ width:15px; height:15px; }
html body .kp-ai-chat-actions i .fa{ font-size:14px; line-height:1; }

html body .kp-ai-chat-body{ flex:1; padding:16px; height:300px; overflow-y:auto; background:#FFFFFF; }
html body .kp-ai-msg{ margin-bottom:12px; display:flex; }
html body .kp-ai-msg.ai{ justify-content:flex-start; }
html body .kp-ai-msg.user{ justify-content:flex-end; }
html body .kp-ai-bubble{ max-width:84%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.75; word-break:break-word; }
html body .kp-ai-msg.ai .kp-ai-bubble{ background:var(--kf-bg2); color:var(--kf-txt); border:1px solid var(--kf-line); border-bottom-left-radius:4px; }
html body .kp-ai-msg.user .kp-ai-bubble{ background:linear-gradient(135deg,var(--kf-org),var(--kf-org2)); color:var(--kf-bg); border-bottom-right-radius:4px; }

html body .kp-ai-sugs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
html body .kp-ai-sugs button{
  border:1px solid var(--kf-line-org); background:transparent; color:var(--kf-org);
  border-radius:14px; padding:7px 13px; font-size:12.5px; cursor:pointer;
  font-family:inherit; transition:background .2s ease, border-color .2s ease;
  min-height:34px; -webkit-tap-highlight-color:transparent;
}
html body .kp-ai-sugs button:hover{ background:var(--kf-org-soft2); border-color:var(--kf-org); }

html body .kp-ai-chat-footer{
  padding:10px 12px; background:var(--kf-bg); border-top:1px solid var(--kf-line);
  display:flex; gap:8px; align-items:center;
}
html body .kp-ai-chat-footer input{
  flex:1; border:1px solid var(--kf-line); background:#FFFFFF; color:var(--kf-txt);
  border-radius:20px; padding:10px 15px; font-size:13.5px; outline:none; font-family:inherit; min-width:0;
}
html body .kp-ai-chat-footer input::placeholder{ color:#86909C; }
html body .kp-ai-chat-footer input:focus{ border-color:var(--kf-org); }
html body .kp-ai-chat-footer button{
  width:38px; height:38px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg,var(--kf-org),var(--kf-org2)); color:var(--kf-bg);
  display:flex; align-items:center; justify-content:center;
}
html body .kp-ai-chat-footer button:hover{ filter:brightness(1.08); }
html body .kp-ai-chat-footer button svg{ width:16px; height:16px; }

/* ==========================================================================
 * 移动端（≤768px）：固定右下、限制尺寸、不遮挡核心操作按钮
 *  · 底部主导航 .kp-mtab 高 59px → 悬浮件抬到其上方，并叠加 iOS 安全区
 *  · z-index:70 低于 .kp-mtab(90) 与各页遮罩(9999)，但高于确权页 .kcc-discbar(65)
 *    → 避免出现「浮层被免责条盖住、电话图标点不到」的反向遮挡
 *  · 页面自带底部固定栏时按栏高精准抬升（不给核心操作按钮留任何重叠）
 * ========================================================================== */
@media (max-width:768px){
  html body .kp-contact-float{
    right:8px;
    bottom:calc(71px + env(safe-area-inset-bottom,0px));
    z-index:70;
    align-items:flex-end;
    opacity:.9;                      /* 静置略降透明，降低视觉压迫 */
    transition:opacity .2s ease;
  }
  html body .kp-contact-float:hover,
  html body .kp-contact-float:focus-within,
  html body .kp-contact-float:active{ opacity:1; }
  /* 收成紧凑竖排图标条，宽度仅 44+2*4=52px、高 3*44+2*4+8=148px */
  html body .kp-contact-card{ width:auto; border-radius:13px; box-shadow:0 12px 34px rgba(0,0,0,.14); }
  html body .kp-contact-avatar{ display:none !important; }
  html body .kp-contact-body{ padding:4px; gap:4px; display:flex; flex-direction:column; }
  html body .kp-contact-text{ display:none; }
  html body .kp-contact-row{ padding:0; gap:0; border-radius:11px; }
  html body .kp-contact-row:hover,
  html body .kp-contact-row:active{ background:transparent; }
  /* 触控区达标 44×44 */
  html body .kp-contact-icon{ width:44px; height:44px; border-radius:11px; }
  html body .kp-contact-icon svg{ width:21px; height:21px; }
  html body .kp-contact-icon .fa,
  html body .kp-contact-icon .fas{ font-size:18px; }
  html body .kp-contact-icon:active{ background:var(--kf-org); color:var(--kf-bg); }
  html body .kp-contact-backtop{ width:44px; height:44px; border-radius:11px; margin-top:4px; }

  /* —— 逐页精准避让：把悬浮件抬到「页面自带底部固定栏」之上 ——
     确权公开页：.kcc-discbar 高 87px（top=698）→ 抬到 59+87+12=158px
     打样操作台：.kds-bottom  高 118px（覆盖 667~785）→ 抬到 59+118+12=189px
     其他页面无底部固定栏，用默认 71px 即可。 */
  html body:has(.kcc-discbar) .kp-contact-float{
    bottom:calc(176px + env(safe-area-inset-bottom,0px));   /* 59(导航)+92(免责条)+25 余量 */
  }
  html body:has(.kds-bottom) .kp-contact-float{
    bottom:calc(189px + env(safe-area-inset-bottom,0px));   /* 844-189-198=457 ≥ .kds-bottom top 667 之上 */
  }

  /* 二维码面板：自适应屏宽，不超出屏幕 */
  html body .kp-contact-qr{
    inset:auto 0 0 auto; width:min(76vw,224px); height:auto;
    padding:14px; border-radius:14px;     border:1px solid var(--kf-line-org);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
  }
  html body .kp-contact-qr img{ width:min(54vw,148px); height:auto; aspect-ratio:1/1; }
  html body .kp-contact-qr p{ font-size:14px; }

  /* 展开面板：底部抽屉、贴合屏宽、关闭按钮明显 */
  html body .kp-ai-chat{
    right:0; left:0; bottom:0; width:100%; max-width:100%;
    height:74vh; border-radius:16px 16px 0 0; z-index:130;
    border-left:none; border-right:none; border-bottom:none;
  }
  html body .kp-ai-chat.minimized{ height:auto; }
  html body .kp-ai-chat-header{ padding:12px 14px; }
  html body .kp-ai-chat-actions i{ width:44px; height:44px; }   /* 触控达标 */
  html body .kp-ai-chat-body{ height:calc(74vh - 140px); padding:14px; }
  html body .kp-ai-chat-info strong{ font-size:15px; }
  html body .kp-ai-chat-info span{ font-size:14px; }              /* 移动端正文 ≥14px */
  html body .kp-ai-bubble{ font-size:14.5px; max-width:88%; line-height:1.8; }
  html body .kp-ai-sugs button{ min-height:44px; padding:8px 14px; font-size:14px; }  /* 触控 ≥44px */
  html body .kp-ai-chat-footer{ padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); }
  html body .kp-ai-chat-footer input{ font-size:16px; height:44px; }   /* 16px 防 iOS 聚焦缩放 */
  html body .kp-ai-chat-footer button{ width:44px; height:44px; }
}

/* ==========================================================================
 * 弹窗 / 表单打开时客服按钮自动避让
 * ① 基线保障：各页遮罩 z-index(9999) 远高于本组件(60/70)，弹窗打开时天然被覆盖、不可点击
 * ② 渐进增强：支持 :has() 的内核（Chrome 105+ / Safari 15.4+ / 微信 Android-X5、iOS-WKWebView 新版）
 *    额外做淡出，避免视觉穿帮；不支持的内核自动忽略，不产生副作用
 * ========================================================================== */
html body:has(.kcc-mask.show) .kp-contact-float,
html body:has(.kcc-login-mask.show) .kp-contact-float{
  opacity:0; visibility:hidden; pointer-events:none;
}