/* 里德科技官网 · 右下角 AI 智能助手（悬浮球 + 问答面板）
 * 独立样式文件，避免影响官网既有样式；主色与官网一致 #1D6FF2
 */

:root {
  --ai-blue: #1D6FF2;
  --ai-blue-dark: #0F4FBE;
  --ai-ink: #0d1526;
  --ai-gray: #64748b;
}

/* ================= 悬浮球 ================= */
.ai-fab {
  position: fixed;
  right: 22px;
  bottom: 149px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border: 1px solid #e4e9f2;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f3f7fd);
  color: var(--ai-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(13, 21, 38, .16);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.ai-fab:hover { transform: translateY(-3px) scale(1.05); background: linear-gradient(180deg, #ffffff, #edf4ff); box-shadow: 0 12px 30px rgba(29, 111, 242, .30); }
.ai-fab svg { width: 26px; height: 26px; display: block; }
/* 悬浮球头像：铺满整个球体，沿用圆形裁切与透明背景 */
.ai-fab .ai-fab-chat { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ai-fab .ai-fab-chat img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.ai-fab .ai-fab-close { display: none; }
.ai-fab.is-open .ai-fab-close { display: block; }
.ai-fab.is-open .ai-fab-chat { display: none; }

/* 悬浮球提示徽标（首次进入提示一句，点击后消失） */
.ai-fab-tip {
  position: fixed;
  right: 90px;
  bottom: 161px;
  z-index: 9999;
  background: #fff;
  color: var(--ai-ink);
  font-size: 13px;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 10px 10px 2px 10px;
  box-shadow: 0 6px 20px rgba(13, 21, 38, .14);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.ai-fab-tip.show { opacity: 1; transform: translateY(0); }

/* ================= 问答面板 ================= */
.ai-panel {
  position: fixed;
  right: 22px;
  /* 顶部固定 12px：完整遮住官网吸顶导航（避免导航蓝色 CTA 露出形成"凸起"），且不顶到窗口边缘 */
  top: 12px;
  /* 视口够高时距底 217px 贴悬浮球；不够高时自动收缩，保证面板高度足够 */
  bottom: min(217px, calc(100vh - 608px));
  z-index: 9999;
  width: 384px;
  max-width: calc(100vw - 32px);
  height: auto;
  /* 大屏下高度封顶 640px（top+bottom 拉伸超过时以 top 为准） */
  max-height: 640px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(13, 21, 38, .22), 0 4px 16px rgba(13, 21, 38, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.ai-panel.open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }

/* 头部 */
.ai-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--ai-blue), var(--ai-blue-dark));
  color: #fff;
}
.ai-panel-head .ai-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ai-panel-head .ai-avatar svg { width: 30px; height: 30px; }
.ai-panel-head .ai-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ai-panel-head .ai-title strong { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; }
.ai-panel-head .ai-online { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .85; }
.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: #35e08c; display: inline-block; }
.ai-head-btn {
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
  flex: 0 0 auto;
}
.ai-head-btn:hover { background: rgba(255, 255, 255, .26); }
.ai-head-btn svg { width: 15px; height: 15px; }

/* 消息区 */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 10px;
  background: #f6f8fc;
  scrollbar-width: thin;
  scrollbar-color: #c9d4e6 transparent;
}
.ai-messages::-webkit-scrollbar { width: 5px; }
.ai-messages::-webkit-scrollbar-thumb { background: #c9d4e6; border-radius: 3px; }

.ai-msg { display: flex; gap: 8px; margin-bottom: 14px; animation: ai-fade-up .25s ease; }
.ai-msg.user { flex-direction: row-reverse; }
@keyframes ai-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ai-msg-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--ai-blue);
}
.ai-msg-avatar svg { width: 26px; height: 26px; }
.ai-msg-avatar img { width: 26px; height: 26px; border-radius: 50%; display: block; object-fit: cover; }
.ai-bubble {
  max-width: 82%;
  padding: 10px 13px;
  font-size: 13.8px;
  line-height: 1.65;
  border-radius: 12px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ai-msg.bot .ai-bubble { background: #fff; color: var(--ai-ink); border: 1px solid #e8edf5; border-top-left-radius: 4px; box-shadow: 0 1px 3px rgba(13, 21, 38, .05); }
.ai-msg.user .ai-bubble { background: linear-gradient(135deg, var(--ai-blue), #3d86f5); color: #fff; border-top-right-radius: 4px; }

/* 气泡内 Markdown 简易排版 */
.ai-bubble p { margin: 0 0 6px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble strong { font-weight: 700; }
.ai-bubble code { background: rgba(29, 111, 242, .08); color: var(--ai-blue-dark); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.ai-msg.user .ai-bubble code { background: rgba(255, 255, 255, .2); color: #fff; }
.ai-bubble pre { background: #0d1526; color: #dbe6f8; padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 6px 0; font-size: 12.5px; line-height: 1.55; }
.ai-bubble pre code { background: none; color: inherit; padding: 0; }
.ai-bubble a { color: var(--ai-blue); text-decoration: underline; }
.ai-msg.user .ai-bubble a { color: #fff; }
.ai-bubble ul, .ai-bubble ol { margin: 4px 0 6px; padding-left: 18px; }

/* 流式输出光标 */
.ai-cursor { display: inline-block; width: 2px; height: 14px; background: var(--ai-blue); margin-left: 2px; vertical-align: -2px; animation: ai-blink .9s steps(1) infinite; }
@keyframes ai-blink { 50% { opacity: 0; } }

/* 处理状态行（如「调用思考模型…」） */
.ai-status-row { display: flex; align-items: center; gap: 7px; margin: -6px 0 12px 36px; font-size: 12px; color: var(--ai-gray); }
.ai-status-row .ai-spin { width: 11px; height: 11px; border: 2px solid #c9d4e6; border-top-color: var(--ai-blue); border-radius: 50%; animation: ai-rotate .8s linear infinite; flex: 0 0 auto; }
@keyframes ai-rotate { to { transform: rotate(360deg); } }

/* 错误气泡 */
.ai-bubble.ai-error { background: #fff4f4; border-color: #ffd9d9; color: #c0392b; }

/* 欢迎语 + 快捷问题（垂直列表，每项前带小圆点） */
.ai-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: -4px 0 12px 36px; }
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d5e2f7;
  background: #fff;
  color: var(--ai-blue-dark);
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ai-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-blue);
  flex: 0 0 auto;
}
.ai-chip:hover { background: #edf4ff; border-color: var(--ai-blue); }

/* 输入区（容器化：大圆角输入盒 + 内置圆形发送按钮，对齐参考样式） */
.ai-input-bar {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #eef2f8;
}
.ai-input-box {
  border: 1px solid #e2e9f4;
  border-radius: 20px;
  background: #f8fafd;
  padding: 10px 12px 8px;
  transition: border-color .15s ease, background .15s ease;
}
.ai-input-box:focus-within { border-color: var(--ai-blue); background: #fff; }
.ai-input-box textarea {
  width: 100%;
  display: block;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  padding: 2px 4px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  max-height: 96px;
}
.ai-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
}
.ai-send {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #e8edf5;
  color: #fff;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.ai-send svg { width: 16px; height: 16px; }
.ai-send.ready { background: linear-gradient(135deg, var(--ai-blue), var(--ai-blue-dark)); cursor: pointer; }
.ai-send.ready:hover { transform: translateY(-1px); }
.ai-send:disabled { opacity: .55; transform: none; }
.ai-foot-note { flex: 0 0 auto; text-align: center; font-size: 11px; color: #9aa7bd; padding: 0 0 8px; background: #fff; }

/* 与官网断点一致：≤768px 时官网悬浮按钮 right 16px，AI 悬浮球同步对齐 */
@media (max-width: 768px) {
  .ai-fab { right: 16px; }
  .ai-fab-tip { right: 84px; }
}

/* 移动端：面板近全屏 */
@media (max-width: 480px) {
  .ai-fab { right: 16px; bottom: 141px; }
  .ai-fab-tip { right: 78px; bottom: 151px; }
  .ai-panel { right: 8px; left: 8px; bottom: 205px; width: auto; height: auto; top: 12px; max-height: none; }
}