/* ==========================================================================
   AI 视频工厂 · 智能客服窗口
   --------------------------------------------------------------------------
   纯 CSS，无框架。所有页面通过 <link> 引入。

   ## 两条硬性位置要求（都来自用户）
   1. **不盖底部转化栏** —— 悬浮气泡与聊天面板的 bottom 都要让开转化栏。
   2. 手机端**全屏**，电脑端右下**浮窗**（380×560）。

   ## ⚠️ 为什么用一个"派生变量"而不是直接 `--barh`
   `index.html` 里定义的是：
       --barh: 137px;
       body { padding-bottom: calc(var(--barh) + env(safe-area-inset-bottom)); }
   即 **`--barh` 是"底栏净高"，而 padding 才是"净高 + 安全区"**。
   如果我们把聊天窗写成 `bottom: var(--barh)`，那是**净高**，正确；
   但若写成 `bottom: calc(var(--barh) + env(...))` 而对 `--barh` 的理解有误，
   就会**双重累加安全区**（iPhone 上多出 34px 空隙）。

   这里的做法：**不改 index.html 的一行 CSS**，用自引用把净高精确反解出来：
       --barh-set: calc(var(--barh) - env(safe-area-inset-bottom, 0px));
   * 老浏览器（不支持自引用）会丢弃这条 ⇒ 上面另有一行 `--barh-set: 137px` 兜底；
   * 新旧浏览器都能用（最后一条有效声明胜出）。
   `chat.js` 还会用 getComputedStyle 把实测值写回 `--barh-set`，
   兜住"底栏高度因文案换行而变"（实测 375px 下是 137px 而不是 72px）。
   ========================================================================== */

:root {
  /* 兜底：与 index.html 的 --barh 初值一致（老浏览器走这条） */
  --barh-set: 137px;
  /* 精确反解底栏净高（去掉 body padding 里的安全区，避免双重累加） */
  --barh-set: calc(var(--barh, 137px) - env(safe-area-inset-bottom, 0px));
  /* 让开转化栏后的"安全底边距" —— 气泡与面板都用它 */
  --chat-gap: 16px;
  --chat-z: 150;               /* 高于转化栏（转化栏 z-index 见 style.css） */
  --chat-bg: #161b22;
  --chat-border: #30363d;
  --chat-fg: #e6edf3;
  --chat-dim: #9aa7b4;
  --chat-accent: #2f81f7;
}

/* ==========================================================================
   一、右下角悬浮气泡
   ========================================================================== */
.chat-fab {
  position: fixed;
  right: 16px;
  /* ⚠️ 让开底部转化栏 + 安全区。这是"不盖转化栏"的第一处 */
  bottom: calc(var(--barh-set) + env(safe-area-inset-bottom, 0px) + var(--chat-gap));
  z-index: var(--chat-z);
  width: 56px;                 /* >= 44px 触控目标 */
  height: 56px;
  border: 1px solid var(--chat-border);
  border-radius: 50%;
  background: var(--chat-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: transform .15s ease, opacity .2s ease;
  /* 关掉 300ms 点击延迟 */
  touch-action: manipulation;
}
.chat-fab:active { transform: scale(.94); }
.chat-fab svg { width: 26px; height: 26px; display: block; }

/* 气泡上的红点（首次进入时提示"有人在这里"） */
.chat-fab-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f85149;
  border: 2px solid var(--chat-bg);
}
.chat-fab-dot[hidden] { display: none; }

/* 面板打开时藏起气泡，避免它压在面板上 */
body.chat-open .chat-fab { opacity: 0; pointer-events: none; }

/* ==========================================================================
   二、聊天面板（手机全屏 / 桌面浮窗）
   ========================================================================== */
.chat-panel {
  position: fixed;
  z-index: var(--chat-z);
  background: var(--chat-bg);
  color: var(--chat-fg);
  border: 1px solid var(--chat-border);
  display: flex;
  flex-direction: column;
  /* 默认隐藏用 visibility+opacity（而不是 display:none）——
     这样输入框焦点与滚动位置在开关之间不会丢 */
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
  font-size: 15px;
  line-height: 1.55;
}
.chat-panel.is-open { visibility: visible; opacity: 1; }

/* ---- 手机：全屏，但**让开底部转化栏** ---- */
.chat-panel {
  left: 0;
  right: 0;
  top: 0;
  /* ⚠️ 第二条"不盖转化栏"：面板底部顶在转化栏上沿。
     用户要求"手机端全屏"—— 全屏指**内容区全屏**，
     底栏是全局常驻转化入口，聊天时不该把它遮掉（否则用户聊到一半想打电话就点不到）。 */
  bottom: calc(var(--barh-set) + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* ---- 桌面（>=768px）：右下浮窗 380×560 ---- */
@media (min-width: 768px) {
  .chat-panel {
    left: auto;
    top: auto;
    right: 24px;
    bottom: calc(var(--barh-set) + env(safe-area-inset-bottom, 0px) + 24px);
    width: 380px;
    height: 560px;
    border-radius: 16px;
    border: 1px solid var(--chat-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  }
}

/* 桌面端转化栏是常规块（不吸附），底栏净高为 0 ⇒ 浮窗可以贴底。
   这里不做特判，靠 --barh-set 实测值自然为 0。 */

/* ==========================================================================
   三、面板内部结构
   ========================================================================== */
.chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--chat-border);
  background: #0d1117;
}
.chat-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 在线小绿点 */
.chat-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  display: inline-block;
}
.chat-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--chat-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.chat-close:hover { background: #21262d; color: var(--chat-fg); }

/* 消息滚动区 */
.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;   /* 滚到底不要把整页带着滚 */
}

/* 消息气泡 */
.chat-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  white-space: pre-wrap;          /* 保留后端回复里的换行 */
  word-break: break-word;
}
.chat-msg.bot {
  align-self: flex-start;
  background: #21262d;
  border: 1px solid var(--chat-border);
  border-bottom-left-radius: 4px;
}
.chat-msg.me {
  align-self: flex-end;
  background: var(--chat-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg strong { font-weight: 700; }
.chat-msg.bot a { color: #58a6ff; text-decoration: underline; }

/* "正在输入…" */
.chat-typing { color: var(--chat-dim); font-size: 13px; align-self: flex-start; }

/* ==========================================================================
   四、快捷问按钮
   ========================================================================== */
.chat-quick {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 0 14px 10px;
  flex-wrap: wrap;
}
.chat-chip {
  border: 1px solid var(--chat-border);
  background: transparent;
  color: var(--chat-fg);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 32px;
  touch-action: manipulation;
}
.chat-chip:hover { background: #21262d; }
.chat-chip[disabled] { opacity: .5; cursor: default; }

/* ==========================================================================
   五、输入区
   ========================================================================== */
.chat-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--chat-border);
  background: #0d1117;
}
/* 桌面端浮窗不需要额外安全区（不在屏幕底边） */
@media (min-width: 768px) {
  .chat-form { padding-bottom: 10px; }
}
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  background: #0d1117;
  color: var(--chat-fg);
  padding: 10px 12px;
  /* ⚠️ 16px 是 iOS 的硬要求：小于 16px 时聚焦会**自动放大页面** */
  font-size: 16px;
  font-family: inherit;
  min-height: 44px;
}
.chat-input::placeholder { color: #6e7681; }
.chat-input:focus { outline: 2px solid var(--chat-accent); outline-offset: -1px; }
.chat-send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--chat-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 0 16px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.chat-send:disabled { opacity: .5; cursor: default; }

/* 字数计数（接近上限时才明显） */
.chat-count {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  color: var(--chat-dim);
  min-width: 46px;
  text-align: right;
}
.chat-count.is-warn { color: #d29922; font-weight: 600; }

/* ==========================================================================
   六、无障碍与降级
   ========================================================================== */
/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-fab { transition: none; }
}

/* 没有 JS 时，不显示一个点了没反应的气泡。
   chat.js 加载成功后会给 <html> 加 is-chat-ready。 */
html:not(.is-chat-ready) .chat-fab,
html:not(.is-chat-ready) .chat-panel { display: none; }