/* 建筑计算器 · 客服 / 留言组件（2026-10-24）
 *
 * 目标：访客在任何一页都能一眼看到，2 次点击内发出留言。
 * 不依赖任何框架，样式全部前缀 .kf- 避免和页面样式打架。
 */

.kf-launch{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:9px;
  padding:13px 16px 13px 13px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#1b6fa0,#14567f);
  color:#fff;font:600 14px/1 inherit;letter-spacing:.2px;
  box-shadow:0 6px 22px rgba(20,86,127,.34),0 2px 6px rgba(20,86,127,.22);
  cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;
  font-family:inherit;
}
.kf-launch:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,86,127,.4)}
.kf-launch:active{transform:translateY(0)}
.kf-launch svg{width:19px;height:19px;flex:0 0 auto}
.kf-launch .kf-dot{
  position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  background:#e8453c;border:2px solid #fff;
}
.kf-launch.kf-has-dot .kf-dot{display:block}
.kf-launch .kf-dot{display:none}

/* 首次进入的招呼气泡：显眼但不挡内容 */
.kf-hello{
  position:fixed;right:18px;bottom:74px;z-index:59;max-width:250px;
  background:#fff;border:1px solid var(--line,#e2e8ef);border-radius:12px;
  padding:11px 34px 11px 13px;font-size:13px;line-height:1.6;color:var(--ink,#16202b);
  box-shadow:0 8px 26px rgba(22,32,43,.14);
  animation:kf-pop .3s ease both;
}
.kf-hello b{color:var(--brand,#14567f)}
.kf-hello .kf-x{
  position:absolute;top:5px;right:6px;width:22px;height:22px;border:0;background:0;
  color:var(--ink-3,#7d8a99);font-size:16px;line-height:1;cursor:pointer;border-radius:50%;
}
.kf-hello .kf-x:hover{background:var(--bg-soft,#f6f8fa)}
@keyframes kf-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 面板 ---------- */
.kf-mask{
  position:fixed;inset:0;background:rgba(16,26,36,.28);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.kf-mask.kf-on{opacity:1;pointer-events:auto}

.kf-panel{
  position:fixed;right:18px;bottom:18px;z-index:71;
  width:378px;max-height:min(624px,calc(100vh - 44px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line,#e2e8ef);border-radius:14px;
  box-shadow:0 18px 52px rgba(16,26,36,.24);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  font-size:14px;line-height:1.65;
}
.kf-panel.kf-on{opacity:1;transform:none;pointer-events:auto}

.kf-hd{
  display:flex;align-items:center;gap:9px;padding:12px 14px;color:#fff;
  background:linear-gradient(135deg,#1b6fa0,#14567f);
}
.kf-hd .kf-av{
  width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.kf-hd .kf-av svg{width:17px;height:17px}
.kf-hd .kf-tt{font-weight:700;font-size:14px}
.kf-hd .kf-sub{font-size:11.5px;opacity:.82;line-height:1.3}
.kf-hd .kf-close{
  margin-left:auto;width:26px;height:26px;border:0;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;line-height:1;
}
.kf-hd .kf-close:hover{background:rgba(255,255,255,.26)}

.kf-tabs{display:flex;border-bottom:1px solid var(--line,#e2e8ef);background:#fff}
.kf-tabs button{
  flex:1;padding:10px 0;border:0;background:0;cursor:pointer;
  font:600 13px/1 inherit;color:var(--ink-3,#7d8a99);
  border-bottom:2px solid transparent;font-family:inherit;
}
.kf-tabs button.kf-act{color:var(--brand,#14567f);border-bottom-color:var(--brand,#14567f)}

.kf-body{flex:1;overflow-y:auto;padding:13px 14px;background:var(--bg-soft,#f6f8fa)}
.kf-body::-webkit-scrollbar{width:7px}
.kf-body::-webkit-scrollbar-thumb{background:#c8d3de;border-radius:4px}

.kf-row{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start}
.kf-row.kf-me{justify-content:flex-end}
.kf-bub{
  max-width:86%;padding:9px 12px;border-radius:11px;background:#fff;
  border:1px solid var(--line,#e2e8ef);color:var(--ink,#16202b);
  box-shadow:0 1px 2px rgba(22,32,43,.04);word-break:break-word;
}
.kf-me .kf-bub{background:var(--brand,#14567f);border-color:var(--brand,#14567f);color:#fff}
.kf-bub a{color:var(--brand,#14567f);text-decoration:underline}
.kf-me .kf-bub a{color:#fff}
.kf-bub .kf-tip{display:block;margin-top:6px;font-size:12px;color:var(--ink-3,#7d8a99)}

.kf-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.kf-chips button{
  padding:6px 11px;border:1px solid var(--line-2,#cfd8e3);border-radius:999px;
  background:#fff;color:var(--ink-2,#4a5766);font:13px/1.35 inherit;cursor:pointer;
  text-align:left;font-family:inherit;
}
.kf-chips button:hover{border-color:var(--brand,#14567f);color:var(--brand,#14567f);background:var(--brand-soft,#eaf3f9)}

.kf-ask{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line,#e2e8ef);background:#fff}
.kf-ask input{
  flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line-2,#cfd8e3);border-radius:9px;
  font:14px/1.3 inherit;color:var(--ink,#16202b);outline:0;font-family:inherit;
}
.kf-ask input:focus{border-color:var(--brand,#14567f);box-shadow:0 0 0 3px rgba(20,86,127,.1)}
.kf-ask button{
  padding:0 15px;border:0;border-radius:9px;background:var(--brand,#14567f);color:#fff;
  font:600 13.5px/1 inherit;cursor:pointer;font-family:inherit;
}
.kf-ask button:disabled{opacity:.45;cursor:default}

/* 留言表单 */
.kf-form{display:none}
.kf-form.kf-on{display:block}
.kf-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2,#4a5766);margin:0 0 5px}
.kf-form .kf-f{margin-bottom:11px}
.kf-form select,.kf-form textarea,.kf-form input[type=text]{
  width:100%;padding:9px 11px;border:1px solid var(--line-2,#cfd8e3);border-radius:9px;
  font:14px/1.5 inherit;color:var(--ink,#16202b);background:#fff;outline:0;font-family:inherit;
}
.kf-form textarea{min-height:96px;resize:vertical}
.kf-form select:focus,.kf-form textarea:focus,.kf-form input[type=text]:focus{
  border-color:var(--brand,#14567f);box-shadow:0 0 0 3px rgba(20,86,127,.1)}
.kf-form .kf-hint{font-size:11.5px;color:var(--ink-3,#7d8a99);margin-top:4px;line-height:1.5}
.kf-submit{
  width:100%;padding:11px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,#1b6fa0,#14567f);color:#fff;
  font:700 14px/1 inherit;font-family:inherit;
}
.kf-submit:disabled{opacity:.5;cursor:default}
.kf-msg{font-size:12.5px;margin-top:9px;padding:8px 10px;border-radius:8px;display:none}
.kf-msg.kf-err{display:block;background:#fdecea;color:#a3231a;border:1px solid #f6cfca}
.kf-msg.kf-ok{display:block;background:#e8f6ef;color:#0f7a4d;border:1px solid #c6e8d6}

/* 首页搜索框下方的常驻入口（比浮标更显眼，且不遮挡内容） */
.kf-banner{
  display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:10px 14px;
  border:1px dashed var(--line-2,#cfd8e3);border-radius:10px;background:#fbfdff;
  font-size:13.5px;color:var(--ink-2,#4a5766);cursor:pointer;width:100%;text-align:left;
  font-family:inherit;line-height:1.5;transition:border-color .14s,background .14s;
}
.kf-banner:hover{border-color:var(--brand,#14567f);background:var(--brand-soft,#eaf3f9)}
.kf-banner b{color:var(--brand,#14567f)}
.kf-banner .arw{margin-left:auto;color:var(--brand,#14567f);font-weight:700;flex:0 0 auto}

/* 手机：面板占满宽度，浮标贴安全区 */
@media (max-width:640px){
  .kf-panel{
    right:0;bottom:0;left:0;width:100%;
    max-height:88vh;border-radius:16px 16px 0 0;border-bottom:0;
  }
  .kf-launch{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:13px 16px 13px 13px}
  .kf-hello{right:12px;bottom:calc(68px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px)}
}

/* 打印时一律不显示 */
@media print{.kf-launch,.kf-hello,.kf-panel,.kf-mask{display:none!important}}