/* ==========================================================================
   官网 AI 客服挂件样式（用户端接入方案 · §4）
   - 由静态生成器注入：ContentStaticService::injectServiceWidget() 挂 <link>，
     本文件随 skin 目录由 syncSkinAssets() 镜像到 /template/skin/style/ai-service.css
   - 类名统一 yb-ai 前缀，只作用于挂件自身，不污染宿主页既有样式
   - 主题色走 --yb-ai-theme（挂件脚本按后台配置写入内联样式），本文件不硬编码主题色
   - 尺寸：PC 380×560 固定右下；≤700px 面板全屏（避免移动端键盘遮挡输入框）
   ========================================================================== */
.yb-ai{
  --yb-ai-theme:#2563eb;
  --yb-ai-on-theme:#FFFFFF;
  --yb-ai-fg:#1F2937;
  --yb-ai-muted:#6B7280;
  --yb-ai-line:#E5E7EB;
  --yb-ai-bot-bg:#F3F4F6;
  --yb-ai-shadow:0 18px 44px rgba(15,23,42,.18);
  color:var(--yb-ai-fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.7;
}
.yb-ai[hidden]{display:none}
.yb-ai *{box-sizing:border-box}

/* 悬浮球：默认右下；后台可换 6 个落点 —— 水平 .yb-ai--left/--right、垂直 .yb-ai--top/--middle（--bottom 即默认） */
.yb-ai__ball{
  align-items:center;
  background:var(--yb-ai-theme);
  border:0;
  border-radius:50%;
  bottom:24px;
  box-shadow:var(--yb-ai-shadow);
  color:var(--yb-ai-on-theme);
  cursor:pointer;
  display:flex;
  height:56px;
  justify-content:center;
  padding:0;
  position:fixed;
  right:24px;
  transition:transform .2s ease,box-shadow .2s ease;
  width:56px;
  z-index:2147482000;
}
.yb-ai--left .yb-ai__ball{left:24px;right:auto}
/* 垂直方向：只作用于悬浮球（--bottom 走上面的默认 bottom:24px，无需重复声明） */
.yb-ai--top .yb-ai__ball{bottom:auto;top:24px}
/* 边中点：用 top 减球半径（56/2）而不是 translateY —— 否则会盖掉 hover 的位移 */
.yb-ai--middle .yb-ai__ball{bottom:auto;top:calc(50% - 28px)}
/* 右下角让开宿主站的「返回顶部」按钮（.yb-gotop 为 right:24px / bottom:32px / 46×46）
   球改贴其上方：32 + 46 + 14（留白）= 92px。只在「右 + 下」两个轴同时命中时上抬，
   其余落点（左下 / 左中 / 右中 / 上）与返回顶部不在同一角，保持原位无需让位 */
.yb-ai--right.yb-ai--bottom .yb-ai__ball{bottom:92px}
.yb-ai__ball:hover{box-shadow:0 20px 40px rgba(15,23,42,.28);transform:translateY(-2px)}
.yb-ai__ball svg{display:block;height:26px;width:26px}
.yb-ai__ball-tip{
  background:#111827;
  border-radius:8px;
  color:#fff;
  font-size:12px;
  line-height:1;
  opacity:0;
  padding:7px 10px;
  pointer-events:none;
  position:absolute;
  right:66px;
  transition:opacity .2s ease;
  white-space:nowrap;
}
.yb-ai--left .yb-ai__ball-tip{left:66px;right:auto}
.yb-ai__ball:hover .yb-ai__ball-tip{opacity:1}
.yb-ai--open .yb-ai__ball{display:none}

/* 对话面板 */
.yb-ai__panel{
  background:#fff;
  border-radius:18px;
  bottom:24px;
  box-shadow:var(--yb-ai-shadow);
  display:flex;
  flex-direction:column;
  height:560px;
  max-height:calc(100vh - 48px);
  overflow:hidden;
  position:fixed;
  right:24px;
  width:380px;
  z-index:2147482001;
}
/* 对话面板固定右下角：后台换悬浮球落点只挪球，面板不跟随（.yb-ai--left 不再影响面板） */
.yb-ai__panel[hidden]{display:none}

.yb-ai__head{
  align-items:center;
  background:var(--yb-ai-theme);
  color:var(--yb-ai-on-theme);
  display:flex;
  flex-shrink:0;
  gap:10px;
  padding:12px 14px;
}
/* 客服头像：白底圆 + 线稿人像（矢量内联，不引外链图片，跟随主题色） */
.yb-ai__head-avatar{
  align-items:center;
  background:#fff;
  border-radius:50%;
  color:var(--yb-ai-theme);
  display:flex;
  flex-shrink:0;
  height:34px;
  justify-content:center;
  width:34px;
}
.yb-ai__head-avatar svg{display:block;height:22px;width:22px}
.yb-ai__title{flex:1;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yb-ai__icon-btn{
  align-items:center;
  background:rgba(255,255,255,.16);
  border:0;
  border-radius:8px;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex-shrink:0;
  height:28px;
  justify-content:center;
  padding:0;
  transition:background .2s ease;
  width:28px;
}
.yb-ai__icon-btn:hover{background:rgba(255,255,255,.32)}
.yb-ai__icon-btn svg{display:block;height:15px;width:15px}

/* 消息区 */
.yb-ai__body{
  background:#fff;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  padding:16px;
  -webkit-overflow-scrolling:touch;
}
/* 消息行：头像 + 内容两列 —— 客服头像在左、访客头像在右，
   气泡 / 操作条 / 展开的知识库全文统一定到内容列，逐行往下排 */
.yb-ai__msg{
  align-items:start;
  column-gap:8px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  max-width:100%;
}
.yb-ai__msg--user{grid-template-columns:minmax(0,1fr) 28px}
.yb-ai__msg > .yb-ai__avatar{grid-row:1}
.yb-ai__msg--bot > .yb-ai__avatar{grid-column:1}
.yb-ai__msg--user > .yb-ai__avatar{grid-column:2;justify-self:end}
.yb-ai__msg > :not(.yb-ai__avatar){grid-column:2}
.yb-ai__msg--user > :not(.yb-ai__avatar){grid-column:1;justify-self:end}
/* 头像：访客灰底素人像，客服主题色底耳麦人像（矢量内联，不引外链图片） */
.yb-ai__avatar{
  align-items:center;
  background:var(--yb-ai-bot-bg);
  border-radius:50%;
  color:var(--yb-ai-muted);
  display:flex;
  height:28px;
  justify-content:center;
  width:28px;
}
.yb-ai__avatar svg{display:block;height:17px;width:17px}
.yb-ai__msg--bot .yb-ai__avatar{background:var(--yb-ai-theme);color:var(--yb-ai-on-theme)}
/* 时间分隔：居中灰字，只在首条与「距上一条超过 5 分钟」时出现 */
.yb-ai__time{
  color:var(--yb-ai-muted);
  font-size:11px;
  line-height:1;
  margin:-2px 0;
  text-align:center;
  width:100%;
}
.yb-ai__bubble{
  border-radius:14px;
  max-width:86%;
  padding:10px 13px;
  white-space:pre-wrap;
  word-break:break-word;
}
.yb-ai__msg--bot .yb-ai__bubble{background:var(--yb-ai-bot-bg);color:var(--yb-ai-fg)}
.yb-ai__msg--user .yb-ai__bubble{background:var(--yb-ai-theme);color:var(--yb-ai-on-theme)}
.yb-ai__msg--fail .yb-ai__bubble{background:#FEF2F2;color:#B91C1C}
.yb-ai__msg--fail .yb-ai__meta{color:#B91C1C}
/* 逐字输出光标：done 到达后移除 */
.yb-ai__cursor{
  animation:yb-ai-blink 1s steps(1) infinite;
  background:var(--yb-ai-theme);
  display:inline-block;
  height:14px;
  margin-left:2px;
  vertical-align:-2px;
  width:6px;
}
@keyframes yb-ai-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 「思考中」占位：等待首个字时的状态，首字到达即整块撤掉换回光标 */
.yb-ai__thinking{
  align-items:center;
  color:var(--yb-ai-muted);
  display:inline-flex;
  gap:6px;
}
.yb-ai__dots{display:inline-flex;gap:3px}
.yb-ai__dots i{
  animation:yb-ai-think 1.2s ease-in-out infinite;
  background:currentColor;
  border-radius:50%;
  height:4px;
  opacity:.3;
  width:4px;
}
.yb-ai__dots i:nth-child(2){animation-delay:.2s}
.yb-ai__dots i:nth-child(3){animation-delay:.4s}
@keyframes yb-ai-think{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}
}

/* 单条消息的操作条：来源角标 / 复制 / 重问 / 评分 */
.yb-ai__meta{
  align-items:center;
  color:var(--yb-ai-muted);
  display:flex;
  flex-wrap:wrap;
  font-size:12px;
  gap:8px;
  margin-top:6px;
  max-width:86%;
}
.yb-ai__src{
  background:#fff;
  border:1px solid var(--yb-ai-line);
  border-radius:999px;
  cursor:pointer;
  max-width:100%;
  overflow:hidden;
  padding:2px 9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.yb-ai__src:hover{border-color:var(--yb-ai-theme);color:var(--yb-ai-theme)}
.yb-ai__act{
  align-items:center;
  background:none;
  border:0;
  color:var(--yb-ai-muted);
  cursor:pointer;
  display:inline-flex;
  font:inherit;
  font-size:12px;
  gap:4px;
  padding:2px 4px;
}
/* 纯图标操作（复制 / 重问）：文字说明走 title，宽度收到图标本身 */
.yb-ai__act--icon{padding:2px}
.yb-ai__act svg{display:block;height:15px;width:15px}
.yb-ai__act:hover{color:var(--yb-ai-theme)}
.yb-ai__act.on{color:var(--yb-ai-theme);font-weight:600}
.yb-ai__rate{display:inline-flex;gap:4px;margin-left:auto}
/* 满意度三档（不满意 / 一般 / 满意）用表情脸图标：比复制 / 重问略大，便于辨认与点按 */
.yb-ai__rate .yb-ai__act--icon{padding:3px}
.yb-ai__rate .yb-ai__act svg{height:17px;width:17px}

/* AI 引导留资卡片：内联在回答下方，只收「姓名 + 手机号」两个字段 */
.yb-ai__lead{
  background:#fff;
  border:1px solid var(--yb-ai-line);
  border-radius:12px;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  max-width:86%;
  padding:12px;
}
.yb-ai__lead-title{color:var(--yb-ai-fg);font-size:13px;font-weight:600;line-height:1.5}
.yb-ai__lead-input{
  border:1px solid var(--yb-ai-line);
  border-radius:9px;
  color:inherit;
  font:inherit;
  font-size:13px;
  height:36px;
  outline:none;
  padding:0 11px;
  width:100%;
}
.yb-ai__lead-input:focus{border-color:var(--yb-ai-theme)}
.yb-ai__lead-input::placeholder{color:#9CA3AF}
.yb-ai__lead-input:disabled{background:#F9FAFB;color:var(--yb-ai-muted)}
.yb-ai__lead-submit{
  background:var(--yb-ai-theme);
  border:0;
  border-radius:9px;
  color:var(--yb-ai-on-theme);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:600;
  height:36px;
  padding:0 14px;
}
.yb-ai__lead-submit:disabled{cursor:not-allowed;opacity:.6}
/* 校验与提交反馈：无文案时整行塌掉，不留空白 */
.yb-ai__lead-note{color:var(--yb-ai-muted);font-size:12px;line-height:1.5}
.yb-ai__lead-note:empty{display:none}
.yb-ai__lead-note--error{color:#B91C1C}
/* 提交成功：整卡转成功态，输入框只读留痕 */
.yb-ai__lead--done{background:#EFF6FF;border-color:#BFDBFE}
.yb-ai__lead--done .yb-ai__lead-title{color:#1D4ED8}
.yb-ai__lead--done .yb-ai__lead-note{color:#1D4ED8}

/* 提示条：兜底 / 转人工 / 限流 / 需要登录，文案一律取服务端 msg */
.yb-ai__notice{
  background:#FFFBEB;
  border-top:1px solid var(--yb-ai-line);
  color:#92400E;
  flex-shrink:0;
  font-size:12px;
  padding:9px 16px;
}
.yb-ai__notice[hidden]{display:none}
.yb-ai__notice a{color:inherit;font-weight:600;text-decoration:underline}

/* 输入区 */
.yb-ai__foot{background:#fff;border-top:1px solid var(--yb-ai-line);flex-shrink:0;padding:10px 12px 12px}
.yb-ai__form{align-items:flex-end;display:flex;gap:8px}
.yb-ai__input{
  border:1px solid var(--yb-ai-line);
  border-radius:10px;
  color:inherit;
  flex:1;
  font:inherit;
  line-height:1.5;
  max-height:96px;
  min-height:38px;
  outline:none;
  padding:9px 12px;
  resize:none;
}
.yb-ai__input:focus{border-color:var(--yb-ai-theme)}
.yb-ai__input::placeholder{color:#9CA3AF}
.yb-ai__send{
  background:var(--yb-ai-theme);
  border:0;
  border-radius:10px;
  color:var(--yb-ai-on-theme);
  cursor:pointer;
  flex-shrink:0;
  font:inherit;
  font-weight:600;
  height:38px;
  padding:0 16px;
}
.yb-ai__send:disabled{cursor:not-allowed;opacity:.5}
.yb-ai__tip{color:var(--yb-ai-muted);font-size:12px;margin:8px 0 0;text-align:center}

/* 移动端：面板全屏，规避移动浏览器键盘遮挡与右下角手势区 */
@media (max-width:700px){
  .yb-ai__ball{bottom:18px;right:18px}
  .yb-ai--left .yb-ai__ball{left:18px;right:auto}
  .yb-ai--top .yb-ai__ball{bottom:auto;top:18px}
  /* 移动端返回顶部更贴边（.yb-gotop 为 right:14px / bottom:20px / 42×42）：20 + 42 + 12 = 74px */
  .yb-ai--right.yb-ai--bottom .yb-ai__ball{bottom:74px}
  .yb-ai__ball-tip{display:none}
  .yb-ai__panel{
    border-radius:0;
    bottom:0;
    height:100vh;
    height:100dvh;
    left:0;
    max-height:none;
    right:0;
    top:0;
    width:100%;
  }
  .yb-ai__bubble,.yb-ai__meta{max-width:92%}
  /* 留资卡片同步放宽：移动端面板全屏，86% 在窄屏上放不下两个输入框 */
  .yb-ai__lead{max-width:92%}
}