/* UU远程 · 客服对话风 FAQ —— 微信/AI 聊天气泡样式，主色 UU 红 #ff2d55 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #ededed;
  color: #1f1f1f;
  font-size: 15px;
  line-height: 1.6;
}
.app {
  max-width: 520px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #ededed;
  position: relative;
}

/* ---------- 顶栏 ---------- */
.bar {
  flex: 0 0 auto;
  height: 54px;
  background: #f7f7f7;
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bar__back { color: #333; display: flex; padding: 4px; cursor: pointer; opacity: .55; }
.bar__back.show { opacity: 1; }
.bar__who { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.bar__name { font-size: 16px; font-weight: 600; }
.bar__status { font-size: 11px; color: #9aa0a6; display: flex; align-items: center; gap: 4px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #06c15a; display: inline-block; }
.bar__logo { font-size: 12px; color: #ff2d55; font-weight: 700; letter-spacing: .5px; }

/* ---------- 聊天区 ---------- */
.chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.chat__daytag { text-align: center; margin: 4px 0 14px; }
.chat__daytag::after {
  content: "今天"; display: none;
}
.chat__daytag { color: #fff; }
.chat__daytag span, .chat__daytag {
  font-size: 11px;
}
.daychip {
  display: inline-block; background: #dadada; color: #fff;
  border-radius: 4px; padding: 2px 8px; font-size: 11px;
}

/* 消息行 */
.msg { display: flex; margin: 0 0 16px; align-items: flex-start; gap: 8px; }
.msg__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.msg__avatar svg { width: 100%; height: 100%; display: block; }
.bubble {
  position: relative; max-width: 76%;
  padding: 9px 13px; border-radius: 8px; font-size: 15px;
  word-break: break-word; white-space: normal;
}
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble b { color: inherit; }

/* 客服（左） */
.msg.bot .bubble { background: #fff; color: #1f1f1f; border-top-left-radius: 2px; }
.msg.bot .bubble::before {
  content: ""; position: absolute; left: -5px; top: 12px;
  border: 5px solid transparent; border-right-color: #fff; border-left: 0;
}
/* 用户（右） */
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background: #95ec69; color: #1f1f1f; border-top-right-radius: 2px; }
.msg.me .bubble::before {
  content: ""; position: absolute; right: -5px; top: 12px;
  border: 5px solid transparent; border-left-color: #95ec69; border-right: 0;
}

/* 快速解答标记 */
.bubble__tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: #ff2d55;
  background: #ff2d5514; border-radius: 4px; padding: 1px 7px; margin-bottom: 6px;
}
.bubble .tail { color: #9aa0a6; font-size: 13px; margin-top: 6px; }

/* 配图气泡 */
.figbubble { background: #fff; border-radius: 8px; padding: 8px; max-width: 76%; }
.figbubble svg { display: block; width: 100%; border-radius: 6px; }
.figbubble figcaption { font-size: 12px; color: #9aa0a6; margin-top: 6px; text-align: center; }

/* 打字指示 */
.typing .bubble { padding: 12px 14px; }
.typing .dots { display: inline-flex; gap: 4px; }
.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: #c3c3c3; animation: blink 1.2s infinite both; }
.typing .dots i:nth-child(2) { animation-delay: .2s; }
.typing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

/* 相关问题 / 推荐问题（气泡内可点） */
.suggests { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; border-top: 1px solid #f0f0f0; padding-top: 6px; }
.suggests__t { font-size: 12px; color: #9aa0a6; margin: 2px 0 4px; }
.suggests a { color: #576b95; font-size: 14px; padding: 5px 0; cursor: pointer; display: block; border-bottom: 1px solid #f4f4f4; }
.suggests a:last-child { border-bottom: 0; }
.suggests a:active { opacity: .6; }

/* ---------- 底部：chips + 输入 ---------- */
.dock { flex: 0 0 auto; background: #f7f7f7; border-top: 1px solid #dcdcdc; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; background: #fff; border: 1px solid #e3e3e3; border-radius: 16px;
  padding: 6px 13px; font-size: 13px; color: #444; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.chip:active { transform: scale(.96); }
.chip.cur { background: #ff2d55; border-color: #ff2d55; color: #fff; }
.chip__n { color: #bbb; margin-left: 4px; font-size: 11px; }
.chip.cur .chip__n { color: #ffd0da; }

.composer { display: flex; align-items: center; gap: 8px; }
.composer input {
  flex: 1; height: 40px; border: none; border-radius: 8px; background: #fff;
  padding: 0 14px; font-size: 15px; outline: none;
}
.composer__send {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 8px;
  background: #ff2d55; color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.composer__send:active { opacity: .8; }
.dock__hint { font-size: 11px; color: #b0b0b0; text-align: center; margin-top: 7px; }

/* 搜索结果列表（气泡内） */
.results { display: flex; flex-direction: column; }
.results a { color: #1f1f1f; font-size: 15px; padding: 9px 2px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.results a:last-child { border-bottom: 0; }
.results a:active { background: #fafafa; }
.results__empty { color: #9aa0a6; font-size: 14px; padding: 6px 0; }
.results__more { color: #576b95; font-size: 13px; padding: 8px 0 2px; cursor: pointer; }

/* 桌面留白背景 */
@media (min-width: 560px) {
  body { background: #d6d6d6; }
  .app { box-shadow: 0 0 30px rgba(0,0,0,.12); }
}