/* 在线客服 · 界面改版
 *
 * 去掉边框和分隔线，靠留白、圆角和左右对齐建立秩序。原来这里是三层底色叠在
 * 一起（页面底 → 卡片 → 气泡），每层都在争注意力；现在只留气泡这一层。
 *
 * 配色走本文件自己的一组 --chat-* 变量，深浅两套在下面各定义一次。不直接
 * 复用 --app-* 是因为聊天的对比关系和产品页不同：用户气泡在浅色下是近黑、
 * 在深色下反过来是近白，这个"用户消息更重"的关系要在两个主题里都成立，
 * 简单套用产品色板做不到。
 *
 * 浅色是默认值写在 :root 上；深色只重定义变量，不重复写组件规则。
 */

:root {
  --chat-bg: #ffffff;
  --chat-ink: #16191f;
  --chat-ink-2: #6b7480;
  --chat-ink-3: #9aa1ac;
  --chat-agent: #f1f2f4;
  --chat-user: #111318;
  --chat-user-ink: #ffffff;
  --chat-rule: #ebedf0;
  --chat-accent: #1769ff;
  --chat-field: #f4f5f7;
  --chat-hover: rgba(127, 140, 158, .14);
}

/* 深色的一组值只写一次，下面两处入口共用。
   本项目用 data-theme 属性切换主题，但系统偏好也要认 —— 用户没手动选过
   的时候，页面上没有 data-theme，只能靠 prefers-color-scheme 判断。
   两个入口都要有，否则会出现"页面是深色、聊天却是浅色"的错位。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chat-bg: #0d1014;
    --chat-ink: #e9edf2;
    --chat-ink-2: #98a1ad;
    --chat-ink-3: #6d7681;
    --chat-agent: #1b2028;
    /* 深色下用户气泡翻成浅底深字，保持"用户消息更重"这个关系 */
    --chat-user: #f0f2f5;
    --chat-user-ink: #111318;
    --chat-rule: #222831;
    --chat-accent: #5b9bff;
    --chat-field: #171c23;
    --chat-hover: rgba(150, 165, 185, .16);
  }
}

/* 手动选了深色时无条件生效，压过系统偏好 */
:root[data-theme="dark"] {
  --chat-bg: #0d1014;
  --chat-ink: #e9edf2;
  --chat-ink-2: #98a1ad;
  --chat-ink-3: #6d7681;
  --chat-agent: #1b2028;
  --chat-user: #f0f2f5;
  --chat-user-ink: #111318;
  --chat-rule: #222831;
  --chat-accent: #5b9bff;
  --chat-field: #171c23;
  --chat-hover: rgba(150, 165, 185, .16);
}

.exChatWrap {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  background: var(--chat-bg) !important;
  color: var(--chat-ink);
}
.exChatWrap,
.exChatWrap * {
  box-sizing: border-box;
}
.exChatWrap button,
.exChatWrap textarea {
  font-family: inherit;
}

/* ── 顶栏 ────────────────────────────────────────────────────────────
   排成一行：返回、头像、标题，标题右边紧跟在线状态。 */
.exChatHead {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 13px 14px;
  background: var(--chat-bg);
  border-bottom: 1px solid var(--chat-rule);
}
.exChatBack {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--chat-ink-2);
  cursor: pointer;
}
.exChatAvatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
/* 标题在上、状态在下的两行结构。

   排成一行试过，不好看：日文那句「通常数分以内に返信します」很长，会把标题
   顶到最左边，整个顶栏的视觉重心被拉歪，而且两段字号差得远，并排时像是标题
   后面拖了一条尾巴。

   两行的比例是刻意调的：标题 16px/700 与状态 11.5px/400，字号差 1.4 倍、
   字重差两档，层级一眼分明；行高压到 1.25 让两行贴紧成一组，不会散成两块。
   整组用 justify-content: center 在头像高度内居中，与左边的头像对齐。 */
.exChatIdentity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1.25;
}
.exChatTitle {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--chat-ink);
  /* 名字很长时截断，不要把状态那行挤下去 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exChatStatus {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--chat-ink-2);
}
.exChatStatus span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 绿点带一圈同色光晕，看起来是"亮着"的而不是一个死色块。
   纯展示，不接真实在线状态：接了就得处理客服离线时显示灰点，
   那反而会把用户劝退；这行文案只承诺响应速度，不承诺此刻有人。 */
.exChatDot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2.5px rgba(34, 197, 94, .22);
}

/* ── 消息区 ──────────────────────────────────────────────────────── */
.exChatBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  -webkit-overflow-scrolling: touch;
}

.exChatRow {
  display: flex;
  margin-top: 7px;
}
.exChatRow.is-me {
  justify-content: flex-end;
}

/* 全圆角，不做指向说话人的尖角：尖角在密集对话里会让边缘显得毛糙，
   而左右位置已经说明了谁在说话。 */
.exChatBubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--chat-agent);
  color: var(--chat-ink);
  font-size: 14.5px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: break-word;
  transform-origin: left bottom;
}
.exChatRow.is-me .exChatBubble {
  background: var(--chat-user);
  color: var(--chat-user-ink);
  transform-origin: right bottom;
}
/* 图片和视频几乎贴边，只留一点内衬 */
.exChatBubble.is-media {
  padding: 5px;
}
.exChatBubble img,
.exChatBubble video {
  display: block;
  max-width: 200px;
  max-height: 200px;
  border-radius: 14px;
  cursor: pointer;
}
.exChatBubble video {
  max-width: 250px;
  cursor: default;
}

.exChatStamp {
  margin: 3px 3px 0;
  font-size: 11px;
  color: var(--chat-ink-3);
}
.exChatStamp.is-me {
  text-align: right;
}

/* ── 气泡入场动画 ────────────────────────────────────────────────────
   从 0.86 弹到 1，同时上移 8px 淡入。回弹幅度刻意压得小（1.42 而不是常见的
   1.7）：太弹显得幼稚，一点点过冲才是"轻轻落下"。

   transform-origin 挂在气泡靠近说话人的那个角上（上面已设），看起来像是从
   那个方向吹出来的，而不是凭空在中间放大 —— 这一条是"气泡感"的关键。

   340ms 不能再长：客服连发三条时动画必须已经结束，不能排队。 */
@keyframes exChatBubbleIn {
  from { opacity: 0; transform: scale(.86) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.exChatRow.is-fresh .exChatBubble {
  animation: exChatBubbleIn .34s cubic-bezier(.34, 1.42, .64, 1) both;
}
/* 时间戳晚 60ms 跟上：一起出现会像一整块方块在动，
   错开一点气泡才像独立的物体 */
.exChatStamp.is-fresh {
  animation: exChatBubbleIn .34s cubic-bezier(.34, 1.42, .64, 1) .06s both;
}

@media (prefers-reduced-motion: reduce) {
  .exChatRow.is-fresh .exChatBubble,
  .exChatStamp.is-fresh {
    animation: none;
  }
}

/* ── 空状态 ──────────────────────────────────────────────────────── */
.exChatEmpty {
  margin: auto 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--chat-ink-3);
}
.exChatEmpty strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--chat-ink-2);
}
.exChatEmpty span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}

/* ── 输入区 ──────────────────────────────────────────────────────── */
.exChatFoot {
  flex-shrink: 0;
  padding: 10px 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--chat-bg);
  border-top: 1px solid var(--chat-rule);
}
.exChatInputRow {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  border-radius: 22px;
  background: var(--chat-field);
}
.exChatTextarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  max-height: 110px;
  padding: 5px 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--chat-ink);
  /* 16px 是 iOS Safari 不自动放大页面的最小字号，不要调小 */
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  overflow-y: auto;
}
.exChatTextarea::placeholder {
  color: var(--chat-ink-3);
}
/* 打字时不要在输入框四周画蓝框。
   product.css 里有一条全局无障碍规则 input/textarea:focus-visible {
   outline: 2px solid }，会给整个输入区描一圈蓝边。这里的输入框本来就没有
   自己的边框，那圈 outline 会突兀地框住一整条。

   取消它不等于丢掉焦点提示：整个 .exChatInputRow 是一块明显的浅色胶囊，
   光标闪在里面，位置一目了然。 */
.exChatTextarea:focus,
.exChatTextarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 图标一律内联 SVG，不用 emoji 字符：emoji 在 Windows、安卓、iOS 上是三套
   完全不同的画法，颜色和粗细都不受控，混在克制的界面里格外扎眼。 */
.exChatTool {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-ink-2);
  cursor: pointer;
  transition: color .14s, background .14s;
}
.exChatTool:hover {
  color: var(--chat-ink);
  background: var(--chat-hover);
}
.exChatTool.is-active {
  color: var(--chat-accent);
  background: var(--chat-hover);
}
.exChatTool svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* 发送用文字而不是箭头：箭头要靠猜，文字不用。
   多语言复用已有的 chat.send，日文自动是「送信」。 */
.exChatSend {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 16px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 17px;
  background: var(--chat-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s, opacity .14s;
}
.exChatSend:active {
  transform: scale(.94);
}
/* 空输入时压暗而不换灰：换成灰色会让人以为按钮坏了，
   压暗只是在说"现在没内容可发" */
.exChatSend:disabled {
  opacity: .42;
  cursor: default;
}

/* ── 表情面板 ────────────────────────────────────────────────────── */
.exChatEmojiPanel {
  max-height: 168px;
  margin-bottom: 8px;
  padding: 8px 6px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--chat-field);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
}
.exChatEmojiPanel button {
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s;
}
.exChatEmojiPanel button:hover {
  background: var(--chat-hover);
}