/* AI 客服 H5 会话页样式 —— 移动端适配，无外部依赖，默认暗色主题 */
:root {
  --fs-small: 13px;   /* 2026-10-15：此前只在 var(--fs-small,13px) 里兜底，属未定义令牌 */
  --bg: #0e1116;
  --bg-panel: #141922;
  --header-bg: rgba(20, 25, 34, 0.92);
  --border: #232b3a;
  --text: #e8ebf2;
  --text-dim: #9aa3b5;
  --accent: #2f6bff;
  --accent-soft: rgba(47, 107, 255, 0.14);
  --on-accent: #ffffff;          /* 强调色上的文字：唯一来源，别再写裸 #fff */
  --bubble-assistant: #1e2634;
  --bubble-user: #2f6bff;
  --bubble-user-text: #ffffff;
  --err-bg: #3a1f26;
  --err-text: #ff8fa3;
  --sys-pill: #232b3a;
  --sys-text: #aab3c6;
  --input-bg: #1a2030;
  --send-disabled: #2a3242;

  /* ---- 字号阶梯（只有这几档，不要随手写 14.5px / 10px）---- */
  --fs-meta: 11px;    /* 时间戳、头部副标题、加载提示 */
  --fs-sm: 12px;      /* 系统提示胶囊 */
  --fs-md: 13px;      /* 小控件与横幅（反馈 Yes/No、重试、错误条）*/
  --fs-base: 14.5px;  /* 气泡正文、输入框 */
  --fs-cta: 14px;     /* 主按钮 Send */
  --fs-title: 16px;   /* 页头标题 */

  /* ---- 圆角阶梯 ---- */
  --r-xs: 4px;        /* 气泡尾巴 */
  --r-sm: 8px;        /* 小控件 */
  --r-md: 10px;       /* 横幅 */
  --r-lg: 14px;       /* 气泡 */
  --r-control: 18px;  /* 输入框 / 主按钮 */
  --r-pill: 999px;    /* 胶囊（系统提示、反馈按钮）*/

  /* 滚动条滑块：用 --border(#232b3a) 画在 --bg-panel(#141922) 上几乎看不见，
     用户反馈"没有滚动条"（2026-09-29）——单独给一个够对比的颜色 */
  --scroll-thumb: #39445a;
}
body.light {
  --bg: #f2f5fa;
  --bg-panel: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.94);
  --border: #e2e7ef;
  --text: #1c2230;
  --text-dim: #6b7688;
  --accent: #2f6bff;
  --accent-soft: rgba(47, 107, 255, 0.10);
  --on-accent: #ffffff;
  --bubble-assistant: #eef1f7;
  --bubble-user: #2f6bff;
  --bubble-user-text: #ffffff;
  --err-bg: #fde8ec;
  --err-text: #c0392b;
  --sys-pill: #eef1f7;
  --sys-text: #6b7688;
  --input-bg: #f4f6fa;
  --send-disabled: #c9d2e0;
  --scroll-thumb: #c3ccdb;   /* 亮色下滑块（对应暗色 --scroll-thumb） */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }  /* body 不滚，消息区独滚（修多滚动条） */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* 表单控件默认不继承 font-family —— 不写这条，页面上每个按钮都会退化成 Arial，
   和正文的系统字体栈对不上（2026-09-17 实测：Send / Yes / No / Retry / 主题按钮
   全部是 Arial）。 */
button, input, textarea, select { font-family: inherit; }

.app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}

/* ---------- 头部 ---------- */
.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}
.chat-header__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7a5cff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(47, 107, 255, 0.35);
}
.chat-header__info { display: flex; flex-direction: column; line-height: 1.25; }
.chat-header__title { font-size: var(--fs-title); font-weight: 650; letter-spacing: .1px; }
.chat-header__sub {
  font-size: var(--fs-meta); color: var(--text-dim);
  display: flex; align-items: center; gap: 5px;
}
.chat-header__sub::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #2fd07a; display: inline-block;
  box-shadow: 0 0 0 2px rgba(47, 208, 122, .25);
}
.theme-toggle {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: var(--fs-cta);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform .15s ease;
}
.theme-toggle:hover { transform: scale(1.06); }

/* 手动开启新会话（2026-09-24）：与主题切换同尺寸，排在它左边 */
.restart-btn {
  /* 2026-10-13：从 32px 圆形（只放得下一个 emoji）改成胶囊——运营说 "New chat" 挤在圆里很难看 */
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small, 13px);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.restart-btn:hover { transform: scale(1.06); }
.restart-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* 会话列表侧栏（2026-09-24）：窄屏 = 抽屉（☰ 滑出），宽屏 = 常驻左侧。
   实现：侧栏与遮罩都 absolute 于 .app（overflow hidden 裁剪滑出部分）。 */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: var(--fs-cta);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.chat-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;    /* 窄屏/宽屏都要让子元素可收缩 */
  min-height: 0;   /* 2026-09-29 修复：纵向 flex 链的中间层也必须 min-height:0——否则
                      内容长时本层拒绝收缩、撑破 .app(overflow:hidden)，消息区无滚动条
                      （上一版只改了最内层 .msg-list，断点其实在这一层） */
}
.sidebar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(300px, 84%);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateX(-102%);
  transition: transform .22s ease;
}
.sidebar.open { transform: none; }
.scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 25;
}
.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.sidebar__title {
  font-size: var(--fs-title);
  font-weight: 650;
  color: var(--text);
}
.new-btn {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: 5px 12px;
  cursor: pointer;
  transition: transform .15s ease;
}
.new-btn:hover { transform: scale(1.04); }
.conv-list {
  flex: 1 1 auto;
  min-height: 0;   /* 同 .chat-main/.msg-list：定高 flex 列里的滚动子项必须置 0 */
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.conv-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .12s ease;
}
.conv-card:hover { background: var(--input-bg); }
.conv-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.conv-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.conv-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--text-dim);
}
.conv-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2fd07a;
  flex: 0 0 auto;
}
.conv-card.closed .conv-card__dot { background: var(--text-dim); }
.conv-card__time { white-space: nowrap; }
.conv-empty {
  padding: 24px 16px;
  color: var(--text-dim);
  font-size: var(--fs-md);
  text-align: center;
}
.readonly-hint {
  padding: 6px 16px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  background: var(--input-bg);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* 宽屏：侧栏常驻左侧，聊天区居中限宽 */
@media (min-width: 900px) {
  .app { max-width: 1040px; flex-direction: row; }
  .sidebar {
    position: static;
    width: 280px;
    flex: 0 0 280px;
    transform: none;
    transition: none;
  }
  .scrim { display: none; }
  .menu-btn { display: none; }
  .msg-list { width: 100%; max-width: 760px; margin: 0 auto; }
  .readonly-hint { max-width: 760px; margin: 0 auto; width: 100%; }
  .err-banner { max-width: 760px; margin: 0 auto; width: 100%; }
}

/* ---------- 消息区 ---------- */
.msg-list {
  flex: 1 1 auto;
  min-height: 0;   /* 2026-09-29 修复：flex 子项默认 min-height:auto=内容高，长内容时
                      拒绝收缩把 .app(overflow:hidden) 撑破 -> 滚动条消失；置 0 才滚 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
/* 滚动条：消息区与会话列表共用（Firefox 用 scrollbar-*，Chromium 用 ::-webkit-*） */
.msg-list, .conv-list { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.msg-list::-webkit-scrollbar, .conv-list::-webkit-scrollbar { width: 8px; }
.msg-list::-webkit-scrollbar-thumb, .conv-list::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 4px;
}
.msg-list::-webkit-scrollbar-track, .conv-list::-webkit-scrollbar-track { background: transparent; }

.msg-row { display: flex; flex-direction: column; max-width: 86%; }
.msg-row--user { align-self: flex-end; align-items: flex-end; }
.msg-row--assistant { align-self: flex-start; align-items: flex-start; }

.bubble {
  position: relative;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.bubble--user {
  background: linear-gradient(135deg, var(--bubble-user), #5a85ff);
  color: var(--bubble-user-text);
  border-bottom-right-radius: var(--r-xs);
}
.bubble--user::after {
  content: ""; position: absolute; right: -5px; bottom: 0;
  width: 10px; height: 10px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .95;
}
.bubble--assistant {
  background: var(--bubble-assistant);
  border-bottom-left-radius: var(--r-xs);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.msg-time {
  font-size: var(--fs-meta);
  color: var(--text-dim);
  margin-top: 4px;
  opacity: 0.65;
  padding: 0 4px;
}

/* 系统提示：已转人工 / 超时通知 等 */
.sys-row { align-self: center; max-width: 92%; }
.sys-pill {
  display: inline-block;
  background: var(--sys-pill);
  color: var(--sys-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  text-align: center;
  word-break: break-word;
  border: 1px solid transparent;
}
.sys-row--warn .sys-pill {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-color: rgba(47, 107, 255, 0.25);
}

/* AI 思考中 */
.typing-row { display: flex; align-items: center; gap: 6px; }
.typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 错误横幅 ---------- */
.err-banner {
  flex: 0 0 auto;
  margin: 0 12px 8px;
  padding: 10px 12px;
  background: var(--err-bg);
  color: var(--err-text);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.err-banner[hidden] { display: none; }
.err-banner__retry {
  margin-left: auto;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: var(--r-sm);
  padding: 3px 10px;
  font-size: var(--fs-md);
  cursor: pointer;
}

/* ---------- 输入栏 ---------- */
.chat-form {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;   /* 预览区在上、输入行在下（修挤压，2026-09-18） */
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.chat-form__row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: var(--r-control);
  padding: 10px 15px;
  font-size: var(--fs-base);
  line-height: 1.4;
  max-height: 180px;   /* 2026-09-20：原 120px 的 1.5 倍（与 chat.js autoResize 上限同步） */
  min-height: 63px;    /* 原 42px 的 1.5 倍：常态输入框更高 */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.attach-btn {
  flex: 0 0 auto;
  height: 42px;
  width: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--input-bg);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: border-color .15s ease, transform .1s ease;
}
.attach-btn:hover { border-color: var(--accent); transform: scale(1.04); }
/* 待发送附件缩略预览（2026-09-18） */
.attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px 8px;
}
.attach-tile { position: relative; }
.attach-thumb {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.attach-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* 消息里的图片/视频 */
.bubble--img { padding: 6px; }
.chat-img {
  display: block;
  max-width: 220px;
  max-height: 240px;
  border-radius: 8px;
  margin-top: 4px;
  cursor: zoom-in;
}
.chat-video { cursor: default; }
/* 点击查看大图的灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.send-btn {
  flex: 0 0 auto;
  height: 42px;
  min-width: 66px;
  border: none;
  border-radius: var(--r-control);
  background: linear-gradient(135deg, var(--accent), #5a85ff);
  color: var(--on-accent);
  font-size: var(--fs-cta);
  font-weight: 650;
  cursor: pointer;
  transition: opacity 0.15s ease, transform .1s ease;
  box-shadow: 0 2px 8px rgba(47, 107, 255, 0.35);
}
.send-btn:not(:disabled):active { transform: scale(.97); }
.send-btn:disabled { background: var(--send-disabled); color: var(--text-dim); cursor: not-allowed; box-shadow: none; }

/* 加载态遮罩提示 */
.loading-hint {
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-dim);
  padding: 2px 0;
}

/* ---- Operator-reply feedback buttons (P0-1, 2026-09-15) ----
   胶囊里放按钮：按钮也用胶囊圆角，否则一个 999px 的胶囊里嵌两个 12px 圆角方块。
   字号/字重与 Send 对齐；颜色只走 --accent，不再带 #4f8cff 这种"第二个蓝"的兜底。 */
.feedback-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 0 12px;
  min-width: 48px;
  min-height: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.fb-btn:hover,
.fb-btn:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
  outline: none;
}

/* ---------- 快捷选项（主播端流程菜单，2026-10-10） ---------- */
.quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 10px;
  font-size: var(--fs-md);
}
/* 2026-10-14：气泡选定后不消失（运营口径），发送期间只整行临时变灰防连点 */
.quick-row--busy { opacity: .5; pointer-events: none; }
.quick-row-hint { flex-basis: 100%; font-size: 11px; font-style: italic; opacity: .65; padding: 0 2px; }

.quick-chip {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.2;
  max-width: 100%;
  text-align: left;; min-height: 44px; padding: 12px 16px; }
.quick-chip:hover { border-color: var(--accent); color: var(--accent); }
.quick-chip:active { transform: scale(.98); }

/* ---------- 助手气泡的分段排版（2026-10-10：菜单/分点话术不再挤成一坨） ---------- */
.bubble--rich { white-space: normal; }
.seg { }
.seg + .seg { margin-top: 2px; }
.seg--gap { height: 7px; }
/* 编号列 + 文本列用 flex 分栏：换行文字对齐到内容，且编号**不会**被负缩进顶出气泡背景
   （2026-10-10 用户反馈"序号出现在背景之外"，根因就是此前的 padding+负 text-indent） */
.seg--num, .seg--li { display: flex; align-items: baseline; }
.seg-mark {
  flex: 0 0 19px;
  font-weight: 600;
}
.seg-text { flex: 1 1 auto; min-width: 0; }
.seg--sub { padding-left: 19px; color: var(--text-dim); }
/* 返回上一级：弱化样式，和普通选项区分开 */
.quick-chip--back {
  border-style: dashed;
  color: var(--text-dim);
  padding: 6px 12px;
}