/* ============================================================
 * chatUi.css —— Gen3 / 批次 0a：前台 Agent 入口与移动端体验
 * ------------------------------------------------------------
 * 为什么单独一个文件：
 *   style.css 已有基线的 .chat-* / .media 规则，就地改要保证
 *   "媒体查询顺序 + 同名选择器覆盖"处处正确，容易踩坑。
 *   本文件在 index.html 里**最后加载**，同名选择器天然覆盖基线，
 *   规则按 desktop → mobile 顺序书写，覆盖顺序一目了然。
 *   （对升级机制友好：若个别主机漏传本文件，服务仍能启动，
 *     站点的 .chat-* 只是回到基线观感，不会白屏或 500。）
 *
 * 设计要点：
 *   1. 常驻入口是**带文字的胶囊**，不再靠 hover 才出现的 tooltip
 *      —— 触屏没有 hover，旧提示在手机上从未出现过（这才是根因）。
 *   2. 三个入口（首屏按钮 / 胶囊 / 招呼气泡）共用同一个 openChat()，
 *      视觉状态由 .chat-widget.open 统一表达。
 *   3. 展开态按钮上移，避免压住面板输入区。
 * ============================================================ */

/* ---------- 首屏 CTA：主按钮 + 次按钮 ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.hero-cta.ghost:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* ---------- 常驻入口：胶囊按钮 ---------- */
.chat-toggle {
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  gap: 7px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chat-toggle .ai-icon { width: 20px; height: 20px; flex: none; }
.chat-toggle-label { white-space: nowrap; }
/* 桌面上把旧的 hover 提示藏掉：胶囊自带文字，再冒一个 tooltip 是重复信息 */
.chat-toggle .avatar-tooltip { display: none; }

/* 展开态：按钮上移，给面板腾位置；同时给按钮一个"已打开"的视觉反馈 */
.chat-widget.open .chat-toggle {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ---------- 一次性呼吸动效（两下即停） ---------- */
@keyframes chatBreathe {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.06); }
}
.chat-toggle.breathe { animation: chatBreathe 1.5s var(--ease) 2; }

/* 未读脉冲（main.js 一直在加 .bump，但 CSS 里从来没有这条规则 —— 顺手补上） */
@keyframes chatBump {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.14); }
}
.chat-toggle.bump { animation: chatBump 0.9s var(--ease) 2; }

/* ---------- 一次性招呼气泡 ---------- */
.chat-hint {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 199;                 /* 在浮窗(200)之下，绝不遮挡对话面板 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 60vw;
  padding: 10px 12px 10px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.chat-hint.show { opacity: 1; transform: none; }
.chat-hint-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hint-close {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 1rem;
  line-height: 1;
}
.chat-hint-close:hover { color: var(--accent); background: var(--accent-soft); }

/* 面板打开时锁背景滚动（移动端尤其重要：否则滑动会穿透到页面） */
body.chat-open { overflow: hidden; }

/* ---------- Gen3 / 批次 0b：历史找回的分隔线 ---------- */
.msg-divider {
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---------- Gen3 / 批次 1：回答评价（👍/👎） ---------- */
/* 刻意做得极轻：一行小字按钮，悬停才明显 ——
   访客是来了解信息的，不是来填问卷的；评价只是顺手为之。 */
.msg-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease);
}
.msg-feedback:hover { opacity: 1; }
.mf-btn {
  border: none;
  background: none;
  padding: 2px 4px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1;
  filter: grayscale(1);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mf-btn:hover:not(:disabled) { filter: none; transform: scale(1.15); }
.mf-btn.on { filter: none; }
.mf-btn:disabled { cursor: default; }
.mf-note { font-size: 0.7rem; color: var(--text-3); }

/* ---------- 移动端（≤ 640px）---------- */
@media (max-width: 640px) {
  /* 触控热区 ≥44px：标题栏的关闭/清空太小时手机上极易点空 */
  .chat-close,
  .chat-clear {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 招呼气泡：靠右停在胶囊上方，不盖正文流 */
  .chat-hint {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-width: 66vw;
    font-size: 0.82rem;
  }

  /* 气泡内长按别整块选中、点按别闪蓝 */
  .msg-bubble,
  .chat-hint { -webkit-tap-highlight-color: transparent; }
  .msg-bubble { -webkit-user-select: text; user-select: text; }

  /* 评价按钮：手机上热区给足，否则点不中反而显得"没反应" */
  .mf-btn { padding: 6px 8px; font-size: 1rem; }
  .msg-feedback { opacity: 0.7; }
}

/* 极窄屏（≤360px）：只留图标，但保持 48px 触控高度 */
@media (max-width: 360px) {
  .chat-toggle { padding: 0; width: 48px; height: 48px; justify-content: center; }
  .chat-toggle-label { display: none; }
  .chat-hint { max-width: 72vw; }
}

/* 尊重"减弱动态效果"：呼吸/脉冲动效全部关闭（气泡仍可用，只是不动） */
@media (prefers-reduced-motion: reduce) {
  .chat-toggle.breathe,
  .chat-toggle.bump { animation: none !important; }
}