/* ============================================================
   AI 智能体 + 人工客服 — 全站悬浮入口
   由 app/nav.js 动态注入，所有子页面 / 后台页通用。
   ============================================================ */

/* ---- 悬浮按钮（两个垂直排列） ---- */
.ah-fab{
  position:fixed;right:20px;z-index:9990;
  display:flex;align-items:center;gap:8px;
  height:44px;padding:0 18px 0 12px;
  color:#fff;border:none;border-radius:22px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:650;
  transition:transform .18s, box-shadow .18s;
}
.ah-fab svg{width:22px;height:22px;flex:none}
.ah-fab .ah-fab-txt{letter-spacing:.01em;white-space:nowrap}

.ah-fab-agent{
  bottom:72px;
  background:linear-gradient(135deg,#F08A24,#FFB54D);
  box-shadow:0 6px 20px rgba(240,138,36,.38), 0 2px 6px rgba(0,0,0,.14);
}
.ah-fab-agent:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(240,138,36,.46), 0 3px 8px rgba(0,0,0,.16)}
.ah-fab-agent:active{transform:translateY(0)}

.ah-fab-human{
  bottom:20px;
  background:linear-gradient(135deg,#2563EB,#3B82F6);
  box-shadow:0 6px 20px rgba(37,99,235,.35), 0 2px 6px rgba(0,0,0,.18);
}
.ah-fab-human:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(37,99,235,.42), 0 3px 8px rgba(0,0,0,.2)}
.ah-fab-human:active{transform:translateY(0)}

/* ---- 帮助面板（非 packflow 页用，右下角弹窗） ---- */
.ah-panel{
  position:fixed;right:20px;bottom:124px;z-index:9995;
  width:min(372px,calc(100vw - 32px));height:min(560px,calc(100vh - 160px));
  background:#fff;border:1px solid #e5e8ec;border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(20,24,32,.28), 0 4px 14px rgba(20,24,32,.12);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.ah-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.ah-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#FFFFFF;border-bottom:1px solid #E7E2D6;color:#1F2B3A;flex:none}
.ah-head-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#F08A24,#FFB54D);display:flex;align-items:center;justify-content:center;flex:none}
.ah-head-ico svg{width:20px;height:20px}
.ah-head-txt{flex:1;min-width:0}
.ah-head-txt b{display:block;font-size:14.5px;font-weight:650}
.ah-head-txt span{font-size:11px;color:#7A8494}
.ah-close{width:30px;height:30px;border:none;background:transparent;color:#7A8494;font-size:22px;line-height:1;cursor:pointer;border-radius:6px;flex:none}
.ah-close:hover{color:#1F2B3A;background:#FAF8F3}

.ah-body{flex:1;overflow-y:auto;padding:14px 14px 10px;background:#FAF8F3;display:flex;flex-direction:column;gap:10px}
.ah-msg{display:flex;flex-direction:column;gap:4px;max-width:88%}
.ah-msg.user{align-self:flex-end;align-items:flex-end}
.ah-msg.bot{align-self:flex-start;align-items:flex-start}
.ah-bubble{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ah-msg.bot .ah-bubble{background:#fff;border:1px solid #E7E2D6;color:#2A3950;border-top-left-radius:4px}
.ah-msg.user .ah-bubble{background:linear-gradient(135deg,#F08A24,#FFB54D);color:#2A3950;border-top-right-radius:4px}
.ah-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 14px;background:#F08A24;color:#2A3950;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;transition:.15s}
.ah-link:hover{background:#D97A0F}
.ah-link svg{width:14px;height:14px}
.ah-typing{display:inline-flex;gap:4px;padding:12px}
.ah-typing i{width:6px;height:6px;border-radius:50%;background:#b6bcc4;animation:ahbounce 1.2s infinite}
.ah-typing i:nth-child(2){animation-delay:.15s}
.ah-typing i:nth-child(3){animation-delay:.3s}
@keyframes ahbounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.ah-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;background:#f6f7f9;border-top:1px solid #eef0f2;flex:none}
.ah-quick button{border:1px solid #DCD5C4;background:#fff;color:#5B6470;border-radius:14px;padding:5px 11px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:.12s}
.ah-quick button:hover{border-color:#8A6420;color:#8A6420;background:#F6EFDF}

.ah-input{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid #E7E2D6;flex:none}
.ah-input input{flex:1;height:38px;padding:0 12px;border:1.5px solid #DCD5C4;border-radius:19px;font-size:13px;font-family:inherit;color:#1F2B3A;outline:none;transition:border-color .15s}
.ah-input input:focus{border-color:#8A6420}
.ah-send{width:38px;height:38px;border:none;border-radius:50%;background:#F08A24;color:#2A3950;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.ah-send:hover{background:#D97A0F}
.ah-send:disabled{background:#d0d5db;cursor:default}
.ah-send svg{width:18px;height:18px}

/* ---- 人工客服弹窗 ---- */
.ah-human-popup{
  position:fixed;right:20px;bottom:72px;z-index:9995;
  width:300px;background:#fff;border:1px solid #e5e8ec;border-radius:16px;
  box-shadow:0 18px 50px rgba(20,24,32,.28), 0 4px 14px rgba(20,24,32,.12);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .2s, transform .2s;overflow:hidden;
}
.ah-human-popup.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ah-human-head{padding:16px 18px;background:linear-gradient(135deg,#2563EB,#3B82F6);color:#fff}
.ah-human-head b{display:block;font-size:15px;font-weight:650}
.ah-human-head span{font-size:11.5px;color:#BFDBFE}
.ah-human-body{padding:18px}
.ah-human-contact{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f1f3}
.ah-human-contact:last-child{border-bottom:none}
.ah-human-ico{width:40px;height:40px;border-radius:10px;background:#EFF6FF;display:flex;align-items:center;justify-content:center;flex:none}
.ah-human-ico svg{width:20px;height:20px;color:#2563EB}
.ah-human-info{flex:1;min-width:0}
.ah-human-info b{display:block;font-size:13px;font-weight:600;color:#1a1d23}
.ah-human-info span{font-size:12px;color:#6b7280}
.ah-human-foot{padding:12px 18px;background:#f9fafb;border-top:1px solid #f0f1f3;font-size:11.5px;color:#9ca3af;text-align:center}

/* ---- AI 智能体 面板（packflow 专属，替换左侧参数面板） ---- */
.agent-panel{
  grid-column:1;grid-row:1;
  background:var(--surface,#fff);border:1px solid var(--line,#e1e4e8);
  border-radius:var(--radius,10px);
  display:flex;flex-direction:column;overflow:hidden;
  min-height:600px;height:calc(100vh - 150px);
  box-shadow:var(--shadow-s,0 1px 2px rgba(15,17,21,.04));
  opacity:0;transform:translateX(-110%);pointer-events:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.wrap.agent-on .panel{
  opacity:0;transform:translateX(-110%);pointer-events:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.wrap.agent-on .agent-panel{
  opacity:1;transform:translateX(0);pointer-events:auto;
}
/* .panel 也加 transition（非 agent-on 状态下恢复时也要动画） */
.panel{transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s}

.agent-head{display:flex;align-items:center;gap:10px;padding:16px 18px 13px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#e1e4e8);color:var(--ink,#16191F);flex:none}
.agent-head-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#F08A24,#FFB54D);display:flex;align-items:center;justify-content:center;flex:none}
.agent-head-ico svg{width:20px;height:20px}
.agent-head-txt{flex:1;min-width:0}
.agent-head-txt b{display:block;font-size:14px;font-weight:640;letter-spacing:-.01em}
.agent-head-txt span{font-size:12px;color:var(--muted,#7A8494);margin-top:3px}
.agent-back{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:1.5px solid var(--line-2,#DCD5C4);background:#fff;color:var(--ink-2,#2A3950);border-radius:8px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;flex:none;transition:.15s}
.agent-back:hover{border-color:#8A6420;color:#8A6420;background:#F6EFDF}
.agent-back svg{width:15px;height:15px}

.agent-body{flex:1;overflow-y:auto;padding:16px;background:#FAF8F3;display:flex;flex-direction:column;gap:12px}
.agent-msg{display:flex;flex-direction:column;gap:4px;max-width:85%}
.agent-msg.user{align-self:flex-end;align-items:flex-end}
.agent-msg.bot{align-self:flex-start;align-items:flex-start}
.agent-msg .ah-bubble{font-size:13.5px;line-height:1.65}
.agent-msg.bot .ah-bubble{border-top-left-radius:4px}
.agent-msg.user .ah-bubble{border-top-right-radius:4px}
.agent-credit-note{font-size:11px;color:#D97A0F;background:rgba(240,138,36,.08);border:1px solid rgba(240,138,36,.25);border-radius:99px;padding:2px 10px;align-self:flex-start;margin-top:1px;font-variant-numeric:tabular-nums}

.agent-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;background:#FAF8F3;border-top:1px solid #EFEBE1;flex:none}
.agent-suggestions button{border:1px solid #DCD5C4;background:#fff;color:#5B6470;border-radius:14px;padding:5px 11px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:.12s}
.agent-suggestions button:hover{border-color:#8A6420;color:#8A6420;background:#F6EFDF}

.agent-input{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid #E7E2D6;flex:none}
.agent-input textarea{flex:1;min-height:38px;max-height:120px;padding:8px 12px;border:1.5px solid #DCD5C4;border-radius:10px;font-size:13.5px;font-family:inherit;color:#1F2B3A;outline:none;resize:none;transition:border-color .15s;line-height:1.5}
.agent-input textarea:focus{border-color:#8A6420}
.agent-send{width:38px;height:38px;border:none;border-radius:50%;background:#F08A24;color:#2A3950;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.agent-send:hover{background:#D97A0F}
.agent-send:disabled{background:#d0d5db;cursor:default}
.agent-send svg{width:18px;height:18px}

/* Agent 执行结果指示器 */
.agent-executing{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;font-size:12.5px;color:#9a3412}
.agent-executing .ah-typing{padding:0}
.agent-result-ok{padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;font-size:12.5px;color:#15803d}

/* ---- 顶部 Banner AI 智能体 按钮 ---- */
.topbar-agent-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px;
  border:none;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:650;color:#fff;
  background:linear-gradient(135deg,#E08A2E,#F09A3E);
  box-shadow:0 1px 4px rgba(200,110,30,.18);
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
}
.topbar-agent-btn svg{width:16px;height:16px}
.topbar-agent-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(200,110,30,.24)}
.topbar-agent-btn:active{transform:translateY(0)}
.topbar-agent-btn.active{background:linear-gradient(135deg,#D27A28,#E08A38);box-shadow:0 0 0 2px rgba(200,110,30,.15)}

/* ---- 顶部 Banner 积分 chip ---- */
.topbar-credit{
  display:inline-flex;align-items:center;gap:4px;
  height:32px;padding:0 12px;
  border:1px solid #DCD5C4;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:650;color:#2A3950;
  background:#FAF8F3;white-space:nowrap;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.topbar-credit:hover{background:#fff;transform:translateY(-1px);box-shadow:0 1px 4px rgba(31,43,58,.08)}
.topbar-credit .tc-ico{font-size:10px;opacity:.7;color:#7A8494}
.topbar-credit #creditBalance{font-variant-numeric:tabular-nums;font-weight:750;min-width:8px;text-align:right;color:#2A3950}
.topbar-credit .tc-unit{font-size:11px;opacity:.85;color:#7A8494}