/* ══════════════════════════════════════════════════════════════
   智多星 · 站内询问助手挂件
   ──────────────────────────────────────────────────────────────
   原来这套样式长在 page-index.css 里，挂件也只有首页有。助手要能在
   任何页面上被问到才叫助手，所以样式独立成文件，随 partials/helper_widget.html
   一起被各页面引用。变量名沿用全站设计系统（--o 主橙、--tx 正文色…），
   页面没定义时每处都带兜底值，单独引用到没有 ds.css 的页面也不会裸奔。
   ══════════════════════════════════════════════════════════════ */

/* ── 悬浮按钮 ──────────────────────────────────────────────────
   原来是个 60px 的纯头像圆钮，除了「有只松鼠」之外不传达任何信息，
   而且每 5 秒就自己滑出屏幕右侧躲 10 秒 —— 一个要人来问的入口，
   一多半时间是看不见的。现在改成带文字的胶囊：先把「问一下」说清楚，
   用户滚动一段后再收成圆钮让位给内容，不再整个消失。 */
#hw-fab{
  position:fixed;right:20px;bottom:80px;z-index:9999;
  display:flex;align-items:center;gap:8px;
  height:56px;padding:0 18px 0 6px;
  border:none;border-radius:999px;
  background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
  box-shadow:0 6px 20px rgba(245,124,0,.4);
  cursor:pointer;font-family:inherit;
  transition:transform .15s,box-shadow .2s,padding .25s ease,height .25s ease
}
#hw-fab:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(245,124,0,.5)}
#hw-fab:focus-visible{outline:3px solid #1a6fc4;outline-offset:3px}
#hw-fab .hw-fab-ic{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
#hw-fab .hw-fab-ic img{width:38px;height:38px;object-fit:contain;display:block}
#hw-fab .hw-fab-tx{
  color:#fff;font-size:15px;font-weight:700;white-space:nowrap;
  max-width:80px;overflow:hidden;transition:max-width .25s ease,opacity .2s
}
#hw-fab .hw-fab-x{display:none;color:#fff;font-size:28px;line-height:1;font-weight:400}

/* 收起态：滚动一段或问过一次之后，胶囊收成圆钮 */
#hw-fab.mini{padding:0 6px;height:56px}
#hw-fab.mini .hw-fab-tx{max-width:0;opacity:0;margin:0}

/* 打开态：整颗按钮变成关闭钮 */
#hw-fab.open{padding:0;width:56px;justify-content:center}
#hw-fab.open .hw-fab-ic,#hw-fab.open .hw-fab-tx{display:none}
#hw-fab.open .hw-fab-x{display:block}

/* 没被打开过时挂一颗红点。比原来那圈无限脉冲光环安静，
   但「这里有新东西」的意思一样到位，而且点过就不再出现。 */
#hw-fab .hw-fab-dot{
  position:absolute;top:4px;right:4px;
  width:11px;height:11px;border-radius:50%;
  background:#ef4444;border:2px solid #fff;display:none
}
#hw-fab.has-dot .hw-fab-dot{display:block}
#hw-fab.open .hw-fab-dot{display:none}

/* ── 提示气泡 ── */
#hw-tip{
  position:fixed;right:20px;bottom:146px;z-index:9998;
  max-width:calc(100vw - 40px);
  background:#fff;border:1px solid var(--bd,#e2e8f0);border-radius:14px;
  padding:10px 14px;font-size:13px;line-height:1.5;color:var(--tx,#1e293b);
  box-shadow:0 6px 22px rgba(0,0,0,.12);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s,transform .3s;
  font-family:var(--font-sans,inherit)
}
/* 只有真正显示时才吃点击。气泡和聊天窗口的底边几乎重合，
   隐形气泡留着 pointer-events 会把窗口底部那排按钮挡掉。 */
#hw-tip.show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#hw-tip::after{
  content:'';position:absolute;right:34px;bottom:-6px;
  width:12px;height:6px;background:#fff;
  clip-path:polygon(0 0,100% 0,50% 100%)
}

/* ── 聊天窗口外壳 ── */
#hw-win{
  position:fixed;right:20px;bottom:148px;
  width:372px;max-width:calc(100vw - 24px);
  max-height:min(620px,calc(100vh - 180px));
  background:#fff;border:1px solid var(--bd,#e2e8f0);border-radius:20px;
  box-shadow:0 16px 50px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  z-index:9997;overflow:visible;      /* 让松鼠能溢出到窗口顶部外面 */
  font-family:var(--font-sans,inherit)
}
#hw-win[hidden]{display:none}

/* ── 松鼠探头区 ── */
#hw-squirrel-wrap{
  position:absolute;top:-68px;right:14px;
  width:140px;height:126px;pointer-events:none;z-index:10;overflow:visible
}
#hw-squirrel-wrap img{
  width:140px;height:126px;position:absolute;bottom:0;right:0;
  object-fit:contain;background:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.14));
  animation:hwbob 3s ease-in-out infinite
}
@keyframes hwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── Header ── */
#hw-hd{
  background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
  padding:20px 14px 12px;border-radius:20px 20px 0 0;
  display:flex;align-items:center;gap:10px;flex:0 0 auto
}
.hw-avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.14)
}
.hw-avatar img{width:28px;height:28px;object-fit:contain}
.hw-hname{font-size:15px;font-weight:bold;color:#fff;letter-spacing:.4px}
.hw-hstatus{
  font-size:11px;color:rgba(255,255,255,.9);
  display:flex;align-items:center;gap:4px;margin-top:2px
}
.hw-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block}
.hw-hd-btns{margin-left:auto;display:flex;align-items:center;gap:2px}
.hw-icbtn{
  background:none;border:none;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.88);font-size:16px;line-height:1;
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:background .15s
}
.hw-icbtn:hover{background:rgba(255,255,255,.2);color:#fff}
.hw-icbtn:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ── 消息区 ── */
#hw-msgs{
  flex:1 1 auto;min-height:120px;overflow-y:auto;
  padding:14px 12px;display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain
}
.hw-bbl{
  max-width:86%;padding:10px 13px;border-radius:16px;
  font-size:13.5px;line-height:1.7;word-break:break-word;white-space:pre-wrap
}
.hw-bbl.bot{background:#f1f5f9;color:var(--tx,#1e293b);border-bottom-left-radius:4px;align-self:flex-start}
.hw-bbl.usr{background:var(--o,#f57c00);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.hw-bbl.sys{
  align-self:center;max-width:100%;background:#fff7ed;color:#9a3412;
  border:1px solid #fed7aa;font-size:12px;padding:7px 12px;border-radius:10px;
  text-align:center;white-space:normal
}

/* ── 引用卡片：回答里提到的站内内容 ──────────────────────────
   回答正文里的网址会被服务端剥掉，可点的东西只有这些卡片，
   它们的地址全部来自站内检索结果，点不到不存在的页面。 */
.hw-refs{align-self:stretch;display:flex;flex-direction:column;gap:6px}
.hw-ref{
  display:flex;align-items:flex-start;gap:8px;
  background:#fff;border:1px solid var(--bd,#e2e8f0);border-radius:12px;
  padding:9px 11px;text-decoration:none;color:inherit;transition:.15s
}
.hw-ref:hover{border-color:var(--o,#f57c00);background:#fffaf3;transform:translateX(2px)}
.hw-ref .ic{font-size:16px;line-height:1.3;flex:0 0 auto}
.hw-ref .bd{min-width:0;flex:1}
.hw-ref .tt{
  font-size:13px;font-weight:700;color:var(--tx,#1e293b);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.hw-ref .ds{font-size:11.5px;color:var(--mu,#64748b);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-ref .tag{
  flex:0 0 auto;font-size:10.5px;font-weight:700;color:#9a3412;
  background:#fff7ed;border-radius:6px;padding:2px 6px;align-self:center
}

/* ── 追问 / 快捷问题 ── */
.hw-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.hw-chip{
  background:#fff7ed;border:1.5px solid #fed7aa;border-radius:20px;
  padding:7px 13px;font-size:12px;color:#9a3412;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.15s
}
.hw-chip:hover{background:var(--o,#f57c00);color:#fff;border-color:var(--o,#f57c00)}
.hw-chip:focus-visible{outline:2px solid var(--o,#f57c00);outline-offset:2px}

/* ── 输入区 ── */
#hw-ask{flex:0 0 auto;border-top:1px solid #f1f5f9;padding-top:8px}
.hw-inputbar{display:flex;align-items:flex-end;gap:8px;padding:0 12px 8px}
#hw-q{
  flex:1;resize:none;max-height:88px;
  padding:10px 12px;border:1.5px solid var(--bd,#e2e8f0);border-radius:12px;
  background:#f8fafc;font-size:13.5px;line-height:1.5;color:var(--tx,#1e293b);
  font-family:inherit;outline:none;transition:border-color .15s
}
#hw-q:focus{border-color:var(--o,#f57c00);background:#fff}
#hw-send{
  flex:0 0 auto;width:40px;height:40px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
  color:#fff;font-size:16px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:opacity .15s
}
#hw-send:hover{opacity:.9}
#hw-send:disabled{opacity:.45;cursor:not-allowed}
.hw-tofmt{
  display:block;width:calc(100% - 24px);margin:0 12px 10px;
  background:#fff;border:1.5px dashed #fed7aa;border-radius:11px;
  padding:9px;font-size:12.5px;font-weight:700;color:#9a3412;
  cursor:pointer;font-family:inherit;transition:.15s
}
.hw-tofmt:hover{background:#fff7ed;border-style:solid}
/* 助手答不上来时点亮这一颗：此刻它是用户唯一的出路。
   只改样式不改文案 —— 文案由 i18n 托管，JS 改写会在切语言时被打回中文。 */
.hw-tofmt.hot{
  background:#fff7ed;border-style:solid;border-color:var(--o,#f57c00);
  color:#9a3412;box-shadow:0 0 0 3px rgba(245,124,0,.16)
}

/* ── 需求单 ──────────────────────────────────────────────────
   原来是聊天式四步走，每步一个「下一步」，填完要点四次。
   人工代找是这个挂件的正经生意，不该让人走四道门：收成一屏表单。 */
#hw-form{flex:1 1 auto;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
#hw-form[hidden]{display:none}
/* 填表时把对话区收起来：小窗里两块内容抢高度，结果是两块都不够用 */
#hw-win.form-mode #hw-msgs{display:none}
.hw-fmt-top{display:flex;align-items:flex-start;gap:8px}
.hw-fmt-top>div{flex:1;min-width:0}
.hw-fmt-hd{font-size:13px;font-weight:700;color:var(--tx,#1e293b)}
.hw-fmt-sub{font-size:11.5px;color:var(--mu,#64748b);margin-top:2px}
.hw-fmt-lbl{font-size:12px;font-weight:700;color:var(--tx,#1e293b);margin-top:2px}
.hw-fmt-lbl .req{color:#e53935}
.hw-inp{
  width:100%;box-sizing:border-box;
  padding:9px 11px;border:1.5px solid var(--bd,#e2e8f0);border-radius:10px;
  background:#f8fafc;font-size:13px;color:var(--tx,#1e293b);
  font-family:inherit;outline:none;transition:border-color .15s
}
.hw-inp:focus{border-color:var(--o,#f57c00);background:#fff}
textarea.hw-inp{resize:vertical;min-height:66px}
.hw-types{display:flex;flex-wrap:wrap;gap:6px}
.hw-type{
  background:#f8fafc;border:1.5px solid var(--bd,#e2e8f0);border-radius:18px;
  padding:6px 12px;font-size:12px;color:var(--mu,#64748b);font-weight:600;
  cursor:pointer;font-family:inherit;transition:.15s
}
.hw-type.on{background:#fff7ed;border-color:var(--o,#f57c00);color:#9a3412}
/* 试过把提交钮 sticky 在表单底部，结果它正好压住最后一个字段（联系方式）——
   为了少滚一下把必填项遮掉是赔本买卖。表单一共六行，滚一下就到底了。 */
.hw-sub{
  background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
  color:#fff;border:none;border-radius:11px;padding:12px;
  font-size:13.5px;font-weight:bold;cursor:pointer;font-family:inherit;
  width:100%;transition:opacity .12s;margin-top:6px
}
.hw-sub:hover{opacity:.9}
.hw-sub:disabled{opacity:.5;cursor:not-allowed}
.hw-back{
  flex:0 0 auto;background:none;border:none;color:var(--mu,#64748b);font-size:12px;
  cursor:pointer;font-family:inherit;padding:2px 4px;white-space:nowrap;
  text-decoration:underline
}
.hw-back:hover{color:var(--o,#f57c00)}
.hw-err{font-size:12px;color:#e53935;display:none}
.hw-err.show{display:block}

/* ── 打字指示 ── */
.hw-typing{
  display:flex;align-items:center;gap:4px;padding:11px 14px;
  background:#f1f5f9;border-radius:16px;border-bottom-left-radius:4px;
  align-self:flex-start;width:fit-content
}
.hw-typing span{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:hwdot 1.2s infinite}
.hw-typing span:nth-child(2){animation-delay:.2s}
.hw-typing span:nth-child(3){animation-delay:.4s}
@keyframes hwdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ── 底部说明 ── */
#hw-footer{
  flex:0 0 auto;padding:8px 12px;border-top:1px solid #f1f5f9;
  font-size:10.5px;color:var(--mu,#94a3b8);text-align:center;
  border-radius:0 0 20px 20px;line-height:1.6
}

/* ── 移动端：窗口铺满，别在小屏上做小窗 ── */
@media(max-width:899px){
  #hw-fab{bottom:74px;right:14px;height:52px}
  #hw-fab .hw-fab-ic{width:40px;height:40px;flex:0 0 40px}
  #hw-fab .hw-fab-ic img{width:34px;height:34px}
  #hw-fab.open{width:52px}
  #hw-tip{right:14px;bottom:134px}
  #hw-tip::after{right:28px}
  #hw-win{
    right:8px;left:8px;bottom:70px;width:auto;max-width:none;
    /* 顶部留出站点导航的高度：把整屏盖死会让人不知道自己还在哪一页 */
    max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)
  }
  #hw-squirrel-wrap{width:112px;height:100px;top:-46px;right:12px}
  #hw-squirrel-wrap img{width:112px;height:100px}
  #hw-msgs{min-height:160px}
}

/* ── 无障碍：把三个 infinite 动画一并关掉 ──
   「一直在动」正是 prefers-reduced-motion 想关掉的东西。
   JS 里的提示气泡定时器另有判断。 */
@media(prefers-reduced-motion:reduce){
  #hw-squirrel-wrap img,.hw-typing span{animation:none!important}
  #hw-fab,#hw-tip,.hw-ref{transition:none!important}
  #hw-fab:hover{transform:none}
}