/* 小麦AI助手 · 微信群聊体验（WeUI 色彩体系）
 * 设计哲学：整个应用就是一个微信群聊。
 * 群成员：用户（真人） + 小麦 + 其他AI角色。
 * 喇叭：一个 SVG 图标，四种 CSS 状态切换。
 */
:root {
  --weui-BG-0: #ededed;
  --weui-BG-1: #f7f7f7;
  --weui-BG-2: #ffffff;
  --weui-BRAND: #07c160;
  --weui-LIGHTGREEN: #95ec69;
  --weui-TEXTGREEN: #06ae56;
  --weui-FG-0: rgba(0,0,0,0.9);
  --weui-FG-1: rgba(0,0,0,0.55);
  --weui-FG-2: rgba(0,0,0,0.3);
  --weui-FG-3: rgba(0,0,0,0.1);
  --weui-SEPARATOR-0: rgba(0,0,0,0.1);
  --weui-BG-COLOR-ACTIVE: #ececec;
  --maxw: 430px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; color: var(--weui-FG-0);
  background: #c0c0c0;
  -webkit-font-smoothing: antialiased;
}

/* ============ 品牌启动页 ============ */
.splash-view {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.splash-view.hidden { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.splash-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #013b1a 0%, #002910 30%, #013b1a 60%, #012e14 100%); }
.splash-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(7,193,96,0.25) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(45,212,115,0.2) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(7,193,96,0.15) 0%, transparent 70%); animation: splashGlow 2s ease-in-out infinite alternate; }
@keyframes splashGlow { 0% { opacity: 0.6; } 100% { opacity: 1; } }
.splash-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.splash-logo { width: 120px; height: 120px; animation: logoEntrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both; filter: drop-shadow(0 0 24px rgba(7,193,96,0.5)); }
@keyframes logoEntrance { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.splash-brand-name { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: 4px; animation: fadeUp 0.6s 0.3s ease both; }
.splash-sub-name { font-size: 15px; color: rgba(255,255,255,0.65); letter-spacing: 2px; animation: fadeUp 0.6s 0.5s ease both; }
.splash-slogan { font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 1px; animation: fadeUp 0.6s 0.7s ease both; }
@keyframes fadeUp { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.splash-loader { margin-top: 20px; width: 100px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; animation: fadeUp 0.6s 0.9s ease both; }
.splash-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--weui-BRAND), #2DD473); border-radius: 2px; animation: loadBar 1.5s 0.3s ease forwards; }
@keyframes loadBar { 0% { width: 0; } 100% { width: 100%; } }

/* ============ 视图切换 ============ */
.view { display: none; }
.view.active { display: block; }
#app-view { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; background: var(--weui-BG-0); position: relative; box-shadow: 0 0 20px rgba(0,0,0,.15); }
#login-view { max-width: var(--maxw); margin: 0 auto; background: #f5f7f6; }
#login-view.active { display: flex; flex-direction: column; min-height: 100vh; }

/* ============ 登录页 ============ */
#login-view.active { background: #f5f7f6; display: flex; flex-direction: column; min-height: 100vh; }
.login-header { padding: 60px 0 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 2; }
.login-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, rgba(7,193,96,0.06) 0%, transparent 100%); z-index: -1; }
.login-logo-wrap { width: 88px; height: 88px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(7,193,96,0.12); margin-bottom: 4px; }
.login-logo { width: 64px; height: 64px; }
.login-brand-name { font-size: 22px; font-weight: 700; color: #1a1a1a; letter-spacing: 4px; }
.login-brand-sub { font-size: 14px; color: var(--weui-FG-1); letter-spacing: 1px; margin-top: 2px; }
.login-chat { flex: 1; padding: 0 16px; overflow-y: auto; display: flex; flex-direction: column; }
.login-bubble-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.login-avatar { width: 36px; height: 36px; border-radius: 4px; background: var(--weui-BRAND); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.login-bubble { background: #fff; border-radius: 4px 12px 12px 12px; padding: 12px 14px; font-size: 15px; line-height: 1.55; color: #1a1a1a; max-width: calc(100% - 60px); box-shadow: 0 1px 2px rgba(0,0,0,0.04); position: relative; word-break: break-word; }
.login-bubble::before { content: ""; position: absolute; left: -6px; top: 10px; width: 0; height: 0; border: 6px solid transparent; border-right-color: #fff; }
.login-input-zone { padding: 16px 16px 24px; background: #fff; border-top: 1px solid var(--weui-SEPARATOR-0); position: relative; z-index: 5; }
.login-input-zone.hidden { display: none; }
.login-input-row { display: flex; gap: 10px; align-items: stretch; }
.login-input { flex: 1; min-width: 0; padding: 14px 16px; font-size: 16px; border: 1px solid #e2e2e2; border-radius: 24px; background: #f7f7f7; outline: none; color: #1a1a1a; transition: border-color 0.15s, background 0.15s; }
.login-input:focus { border-color: var(--weui-BRAND); background: #fff; }
.login-input::placeholder { color: #b0b0b0; }
.login-send-btn { flex-shrink: 0; padding: 0 22px; font-size: 15px; color: var(--weui-BRAND); background: #fff; border: 1px solid var(--weui-BRAND); border-radius: 24px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: background 0.15s, color 0.15s; }
.login-send-btn:active { background: rgba(7,193,96,0.08); }
.login-send-primary { background: var(--weui-BRAND); color: #fff; border-color: var(--weui-BRAND); }
.login-send-primary:active { background: var(--weui-TEXTGREEN); }
.login-tip { color: var(--weui-FG-1); font-size: 13px; margin-top: 18px; }

/* ============ 顶栏：左 LOGO+标题 / 中 场景 / 右 用户昵称 ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: 52px;
  background: linear-gradient(180deg, #02ad56 0%, #02984c 100%);
  display: flex; align-items: center;
  padding: 0 12px; gap: 8px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 左侧：LOGO + 标题 */
.topbar-left {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.topbar-logo {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  object-fit: cover;
}
.topbar-title {
  font-size: 16px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

/* 中间：场景选择器 */
.topbar-center {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.18);
  padding: 5px 12px; border-radius: 16px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: #fff; white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.topbar-center:active { background: rgba(255,255,255,0.3); }
.topbar-center .scene-icon {
  width: 14px; height: 14px; opacity: 0.95; flex-shrink: 0;
}
.topbar-center .scene-arrow {
  width: 10px; height: 6px; opacity: 0.7; flex-shrink: 0;
}

/* 右侧：用户昵称 + 喇叭 + 三点 */
.topbar-right {
  display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0;
  justify-content: flex-end;
}
.topbar-nickname {
  font-size: 14px; color: #fff; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,0.18);
  padding: 4px 10px; border-radius: 12px;
  max-width: 100px;
  flex-shrink: 1;
}

/* 喇叭按钮：一个 SVG 图标，四态 */
.speaker-btn {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s;
}
.speaker-btn:active { background: rgba(255,255,255,0.15); }
.speaker-btn .speaker-icon { width: 20px; height: 20px; }
.speaker-btn .speaker-icon polygon,
.speaker-btn .speaker-icon path { transition: stroke 0.2s, opacity 0.2s; }

/* 态1: 开启 — 白色喇叭有声波，无禁止线 */
.speaker-btn.speaker-on { color: #fff; }
.speaker-btn.speaker-on .wave1,
.speaker-btn.speaker-on .wave2 { opacity: 1; animation: none; }
.speaker-btn.speaker-on .mute-x { opacity: 0; }

/* 态2: 关闭 — 白色喇叭无声波，有禁止线 */
.speaker-btn.speaker-muted { color: #fff; }
.speaker-btn.speaker-muted .wave1,
.speaker-btn.speaker-muted .wave2 { opacity: 0; animation: none; }
.speaker-btn.speaker-muted .mute-x { opacity: 1; }

/* 态3: 播放 — 黑色喇叭有声波，声波动画，无禁止线 */
.speaker-btn.speaker-playing {
  color: #1a1a1a;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
}
.speaker-btn.speaker-playing:active { background: rgba(255,255,255,0.7); }
.speaker-btn.speaker-playing .wave1 { opacity: 1; animation: wavePulse1 0.8s ease-in-out infinite; }
.speaker-btn.speaker-playing .wave2 { opacity: 1; animation: wavePulse2 0.8s ease-in-out infinite 0.15s; }
.speaker-btn.speaker-playing .mute-x { opacity: 0; }

/* 态4: 静音 — 黑色喇叭有声波（不播放），有禁止线 */
.speaker-btn.speaker-paused {
  color: #1a1a1a;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
}
.speaker-btn.speaker-paused:active { background: rgba(255,255,255,0.7); }
.speaker-btn.speaker-paused .wave1,
.speaker-btn.speaker-paused .wave2 { opacity: 0.5; animation: none; }
.speaker-btn.speaker-paused .mute-x { opacity: 1; }

@keyframes wavePulse1 {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes wavePulse2 {
  0%,100% { opacity: 0.7; }
  50% { opacity: 0.2; }
}

/* ============ 喇叭 Toast 提示 ============ */
.speaker-toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 10px 24px; border-radius: 20px;
  font-size: 15px; font-weight: 500;
  z-index: 999; pointer-events: none;
  animation: toastFade 1.2s ease forwards;
  white-space: nowrap; letter-spacing: 1px;
}
@keyframes toastFade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 三点更多按钮 */
.topbar-dots {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.topbar-dots:active { background: rgba(255,255,255,0.15); }

/* 扫一扫按钮（顶栏） */
.scan-btn {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  color: #fff; flex-shrink: 0;
}
.scan-btn:active { background: rgba(255,255,255,0.15); }
.scan-btn svg { width: 20px; height: 20px; }

/* 富文本工具栏的扫一扫 */
.composer-icon.scan-icon svg { width: 22px; height: 22px; }

/* ============ 扫一扫弹窗 ============ */
.scan-sheet { background: #1a1a1a; }
.scan-header { color: #fff; }
.scan-body { padding: 0; display: flex; flex-direction: column; }
.scan-frame {
  position: relative; width: 100%;
  height: 320px; background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.scan-corners {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.scan-corners::before {
  content: ""; display: block; width: 220px; height: 220px;
  position: relative;
}
.corner {
  position: absolute; width: 28px; height: 28px;
  border: 3px solid #07c160;
}
.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
.scan-line {
  position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 2px;
  background: linear-gradient(90deg, transparent, #07c160, transparent);
  animation: scanLine 2.4s ease-in-out infinite;
  box-shadow: 0 0 8px #07c160;
}
@keyframes scanLine {
  0%, 100% { top: 50px; }
  50% { top: 268px; }
}
.scan-tip {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,0.75); font-size: 13px;
}
.scan-actions {
  display: flex; gap: 12px; padding: 20px 16px;
  background: #1a1a1a;
}
.scan-action {
  flex: 1; padding: 14px; border-radius: 8px; border: none;
  background: #2a2a2a; color: #fff; font-size: 15px;
  cursor: pointer; transition: background 0.15s;
}
.scan-action:active { background: #3a3a3a; }

/* 弹出菜单 */
.popup-menu {
  position: absolute; top: 46px; right: 8px;
  background: var(--weui-BG-2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 180px; z-index: 60; overflow: hidden;
  animation: menuIn 0.15s ease;
}
.popup-menu.hidden { display: none; }
@keyframes menuIn { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
.popup-item {
  padding: 13px 16px; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  color: var(--weui-FG-0); transition: background 0.1s;
}
.popup-item:active { background: var(--weui-BG-COLOR-ACTIVE); }
.popup-item + .popup-item { border-top: 0.5px solid var(--weui-FG-3); }
.popup-item .popup-check { margin-left: auto; color: var(--weui-BRAND); font-weight: 700; display: none; }
.popup-item.active .popup-check { display: inline; }

/* ============ 群聊消息区 ============ */
.chat-list {
  height: calc(100vh - 52px - 36px - 50px - var(--safe-bottom));
  overflow-y: auto; padding: 12px 14px 8px;
  -webkit-overflow-scrolling: touch;
}

/* 群聊：每条消息都显示头像和昵称 */
.msg { display: flex; align-items: flex-start; margin-bottom: 20px; gap: 10px; }
.msg.me { flex-direction: row-reverse; }

.avatar {
  width: 40px; height: 40px; border-radius: 4px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff; user-select: none;
}
.avatar.wheat { background: var(--weui-BRAND); }
.avatar.helper { background: #1485ee; }
.avatar.me { background: #4b89dc; }

.msg-col { display: flex; flex-direction: column; max-width: 65%; }
.msg.me .msg-col { align-items: flex-end; }
.nick { font-size: 12px; color: var(--weui-FG-1); margin-bottom: 4px; padding: 0 2px; }

.bubble {
  position: relative; padding: 9px 12px; border-radius: 4px;
  font-size: 17px; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
  background: var(--weui-BG-2); color: var(--weui-FG-0); max-width: 100%;
}
.msg.me .bubble { background: var(--weui-LIGHTGREEN); }
.bubble::before { content: ""; position: absolute; top: 12px; border: 5px solid transparent; }
.msg:not(.me) .bubble::before { left: -9px; border-right-color: var(--weui-BG-2); border-right-width: 5px; }
.msg.me .bubble::before { right: -9px; border-left-color: var(--weui-LIGHTGREEN); border-left-width: 5px; }
.bubble img { max-width: 100%; border-radius: 4px; margin-top: 4px; }

.typing::after { content: "▋"; animation: blink 1s steps(2) infinite; color: var(--weui-FG-2); }
@keyframes blink { 50% { opacity: 0; } }

/* TTS 控制条（小麦消息下方） */
.tts-controls { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-left: 2px; }
.tts-ctrl-btn {
  width: 24px; height: 24px; border: none; border-radius: 4px;
  background: var(--weui-BG-1); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--weui-FG-1); padding: 0; transition: all 0.15s;
}
.tts-ctrl-btn:active { background: var(--weui-BG-COLOR-ACTIVE); }
.tts-ctrl-btn.playing { color: var(--weui-BRAND); background: rgba(7,193,96,0.1); }

/* ============ 消息名称旁的嘴巴图标（TTS 播放） ============ */
.tts-mouth {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  border: none; background: transparent; padding: 0;
  cursor: pointer; vertical-align: middle; flex-shrink: 0;
}
.tts-mouth:active { opacity: 0.7; }

.tts-mouth .mouth-face-img {
  width: 22px; height: 26px;
  object-fit: contain; display: block;
}

/* 右侧声波/小点 SVG */
.tts-mouth .mouth-wave-svg {
  width: 16px; height: 26px; display: block;
}
.tts-mouth .mouth-wave { stroke: var(--weui-BRAND); stroke-width: 1.5; stroke-linecap: round; opacity: 0; fill: none; }
.tts-mouth .mouth-dot { fill: var(--weui-FG-2); opacity: 0; }

/* 播放态：声波可见变绿 */
.tts-mouth.tts-state-playing .mouth-wave { opacity: 1; }
.tts-mouth.tts-state-playing .mouth-wave-1 { animation: mouthWave 1s ease-in-out infinite; }
.tts-mouth.tts-state-playing .mouth-wave-2 { animation: mouthWave 1s ease-in-out infinite 0.15s; }
.tts-mouth.tts-state-playing .mouth-wave-3 { animation: mouthWave 1s ease-in-out infinite 0.3s; }
@keyframes mouthWave {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 暂停态：小点可见灰色 */
.tts-mouth.tts-state-paused .mouth-dot { opacity: 1; }

/* 时间分隔线 */
.time-divider {
  text-align: center; margin: 12px 0;
  font-size: 12px; color: var(--weui-FG-2);
}
.time-divider span {
  background: var(--weui-BG-0); padding: 2px 8px; border-radius: 2px;
}

/* ============ 输入栏：语音优先 ============ */
.composer {
  position: sticky; bottom: 0; z-index: 40;
  border-top: 0.5px solid var(--weui-SEPARATOR-0);
  background: var(--weui-BG-1); padding: 7px 10px;
  padding-bottom: calc(7px + var(--safe-bottom));
  min-height: 50px;
}

/* 语音模式 — 默认 */
.voice-mode {
  display: flex; align-items: center; gap: 4px; width: 100%;
}
.voice-mode.hidden { display: none; }
.voice-hold-btn {
  flex: 1; min-width: 0; height: 42px; border: none;
  border-radius: 6px; background: var(--weui-BG-2);
  font-size: 15px; color: var(--weui-FG-0);
  display: flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
  letter-spacing: 2px;
}
.voice-hold-btn:active, .voice-hold-btn.recording {
  background: #e0e0e0;
}
.voice-hold-icon { font-size: 20px; }
.voice-hold-text { font-size: 15px; color: var(--weui-FG-0); white-space: nowrap; }
.switch-btn { font-size: 24px !important; width: 32px !important; height: 36px !important; color: var(--weui-FG-1); flex-shrink: 0; }
.switch-btn svg { display: block; }
.at-icon { color: var(--weui-FG-0); font-size: 20px !important; font-weight: 400; width: 28px !important; }

/* 文本模式 */
.text-mode {
  display: flex; align-items: center; gap: 4px; width: 100%;
}
.text-mode.hidden { display: none; }

.composer-icon {
  width: 32px; height: 32px; border: none; border-radius: 4px;
  background: none; font-size: 22px; cursor: pointer;
  color: var(--weui-FG-1); display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0; line-height: 1; font-weight: 300;
}
.composer-icon:active { opacity: 0.6; }
.composer-input-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  background: var(--weui-BG-2); border-radius: 6px;
  padding: 0 4px;
}

/* 富文本输入框（contenteditable） */
.rich-input {
  flex: 1; min-width: 0; min-height: 22px; max-height: 120px;
  border: none; outline: none;
  padding: 9px 6px; font-size: 17px; line-height: 1.4;
  color: var(--weui-FG-0); overflow-y: auto; word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.rich-input:empty::before {
  content: attr(placeholder);
  color: var(--weui-FG-2); pointer-events: none;
}
.rich-input img { max-height: 100px; vertical-align: middle; border-radius: 4px; }

/* @ 标签（在富文本输入框内） */
.rich-input .at-inline {
  display: inline; color: var(--weui-BRAND); font-weight: 500;
  background: rgba(7,193,96,0.08); padding: 1px 2px; border-radius: 2px;
}

/* @ 前缀标签（输入框外面的） */
.at-tag {
  display: flex; align-items: center; gap: 2px;
  background: rgba(7,193,96,0.1); color: var(--weui-BRAND);
  padding: 2px 6px; border-radius: 4px;
  font-size: 14px; white-space: nowrap; flex-shrink: 0;
  line-height: 1.4; font-weight: 500;
}
.at-tag.hidden { display: none; }
.at-remove {
  background: none; border: none; color: var(--weui-BRAND);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
  opacity: 0.7;
}
.at-remove:active { opacity: 1; }

/* @ 成员选择弹窗 */
.at-menu {
  position: absolute; bottom: 56px; left: 10px; right: 10px;
  background: var(--weui-BG-2); border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); z-index: 30;
  overflow: hidden; animation: menuIn 0.15s ease;
  max-height: 280px; overflow-y: auto;
}
.at-menu.hidden { display: none; }
.at-menu-title {
  padding: 12px 16px; font-size: 13px; color: var(--weui-FG-1);
  border-bottom: 0.5px solid var(--weui-FG-3);
}
.at-member {
  padding: 14px 16px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  color: var(--weui-FG-0); transition: background 0.1s;
}
.at-member:active { background: var(--weui-BG-COLOR-ACTIVE); }
.at-member + .at-member { border-top: 0.5px solid var(--weui-FG-3); }
.at-role { margin-left: auto; font-size: 13px; color: var(--weui-FG-1); }

/* @ 菜单分区标签 */
.at-section-label {
  padding: 10px 16px 4px; font-size: 12px; color: var(--weui-FG-1);
  font-weight: 500; letter-spacing: 0.5px;
  border-top: 0.5px solid var(--weui-FG-3);
}
.at-section-label:first-of-type { border-top: none; }
.at-member-empty {
  padding: 16px; text-align: center; font-size: 14px; color: var(--weui-FG-2);
  line-height: 1.6;
}
.at-member-empty small { font-size: 12px; }

/* ＋号工具栏：2×4 宫格 */
.composer-menu {
  position: absolute; bottom: 56px; left: 0; right: 0;
  background: var(--weui-BG-2); border-radius: 0;
  box-shadow: none; padding: 16px 8px;
  z-index: 30;
  animation: menuIn 0.15s ease;
}
.composer-menu.hidden { display: none; }
.composer-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 4px;
  max-width: 430px; margin: 0 auto;
}
.tool-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px 4px; cursor: pointer;
  border-radius: 8px; transition: background 0.1s;
}
.tool-item:active { background: var(--weui-BG-COLOR-ACTIVE); }
.tool-icon {
  width: 48px; height: 48px; border-radius: 8px;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  filter: grayscale(100%);
  opacity: 0.65;
}
.tool-label {
  font-size: 12px; color: var(--weui-FG-0);
  white-space: nowrap;
}

/* 工具市场底部"添加工具" */
.composer-tools-footer {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 0.5px solid var(--weui-FG-3);
}

/* 录音浮层：按住说话 */
.recording {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; z-index: 100;
}
.recording.hidden { display: none; }
.rec-wave-box {
  display: flex; align-items: flex-end; gap: 4px; height: 80px;
}
.rec-wave-bar {
  width: 6px; border-radius: 3px; background: var(--weui-BRAND);
  animation: recWave 0.8s ease-in-out infinite;
}
.rec-wave-bar:nth-child(1) { height: 30px; animation-delay: 0s; }
.rec-wave-bar:nth-child(2) { height: 50px; animation-delay: 0.1s; }
.rec-wave-bar:nth-child(3) { height: 70px; animation-delay: 0.2s; }
.rec-wave-bar:nth-child(4) { height: 50px; animation-delay: 0.3s; }
.rec-wave-bar:nth-child(5) { height: 30px; animation-delay: 0.4s; }
@keyframes recWave {
  0%,100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(0.4); opacity: 1; }
}
.recording .rec-text {
  font-size: 16px; color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}
.recording.cancel .rec-text { color: #fa5151; }
.recording.cancel .rec-wave-bar { background: #fa5151; }
.rec-hint {
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin-top: 8px;
}

/* ============ 通用 ============ */
.hidden { display: none !important; }

/* ============ 小麦与AI对话折叠条 ============ */
.msg-collapsed {
  margin-bottom: 16px;
  background: var(--weui-BG-2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.collapsed-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: default;
}
.collapsed-bar:active { background: var(--weui-BG-COLOR-ACTIVE); }
.collapsed-avatar-group {
  display: flex; align-items: center; flex-shrink: 0;
}
.collapsed-avatar {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff;
}
.collapsed-avatar.wheat { background: var(--weui-BRAND); z-index: 1; }
.collapsed-avatar.helper {
  background: #1485ee; margin-left: -8px;
}
.collapsed-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.collapsed-title {
  font-size: 14px; color: var(--weui-FG-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.collapsed-summary {
  font-size: 12px; color: var(--weui-FG-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.collapsed-expand {
  flex-shrink: 0; border: none; background: var(--weui-BG-1);
  padding: 4px 10px; border-radius: 4px; font-size: 12px;
  color: var(--weui-BRAND); cursor: pointer;
  white-space: nowrap;
}
.collapsed-expand:active { background: var(--weui-BG-COLOR-ACTIVE); }
.collapsed-detail {
  padding: 0 12px 12px;
  border-top: 0.5px solid var(--weui-FG-3);
}
.collapsed-detail .msg { margin-bottom: 10px; }
.collapsed-detail .msg:last-child { margin-bottom: 0; }
.collapsed-detail .avatar { width: 32px; height: 32px; flex: 0 0 32px; font-size: 13px; }
.collapsed-detail .bubble { font-size: 15px; padding: 7px 10px; }
.collapsed-detail .nick { font-size: 11px; }

/* ============ 弹窗（群成员 / 店长聊天记录） ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  width: 100%; max-width: var(--maxw); max-height: 85vh;
  background: var(--weui-BG-0); border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--weui-BG-2);
  border-bottom: 0.5px solid var(--weui-SEPARATOR-0);
  flex-shrink: 0;
}
.modal-title { font-size: 17px; font-weight: 500; color: var(--weui-FG-0); }
.modal-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--weui-BG-1); font-size: 16px; cursor: pointer;
  color: var(--weui-FG-1); display: flex; align-items: center; justify-content: center;
}
.modal-back {
  width: 30px; height: 30px; border: none; background: none;
  cursor: pointer; color: var(--weui-FG-0); display: flex; align-items: center;
  justify-content: center; padding: 0;
}
.modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 搜索框 */
.modal-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--weui-BG-2);
  border-bottom: 0.5px solid var(--weui-SEPARATOR-0);
  flex-shrink: 0;
}
.modal-search-icon {
  width: 16px; height: 16px; color: var(--weui-FG-2); flex-shrink: 0;
}
.modal-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--weui-FG-0); line-height: 1.4;
}
.modal-search-input::placeholder { color: var(--weui-FG-2); }
.search-empty {
  text-align: center; padding: 40px 16px; color: var(--weui-FG-2); font-size: 14px;
}

/* 群成员列表项 */
.member-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  background: var(--weui-BG-2); transition: background 0.1s;
}
.member-item:active { background: var(--weui-BG-COLOR-ACTIVE); }
.member-item + .member-item { border-top: 0.5px solid var(--weui-FG-3); }
.member-avatar {
  width: 44px; height: 44px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; color: #fff;
}
.member-avatar.wheat { background: var(--weui-BRAND); }
.member-avatar.user { background: #4b89dc; }
.member-avatar.scene { background: #1485ee; }
.member-avatar.shop { background: #fa9d3b; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 16px; color: var(--weui-FG-0); line-height: 1.3; }
.member-note { font-size: 13px; color: var(--weui-FG-1); margin-left: 6px; }
.member-desc { font-size: 13px; color: var(--weui-FG-1); margin-top: 2px; }

/* 成员头像图片 */
.member-avatar-img {
  width: 44px; height: 44px; border-radius: 4px; flex-shrink: 0;
  object-fit: cover;
}
.member-status {
  font-size: 12px; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.member-status.online { background: rgba(7,193,96,0.1); color: var(--weui-BRAND); }
.member-status.offline { background: var(--weui-BG-1); color: var(--weui-FG-2); }
.member-status.bot { color: var(--weui-FG-2); font-size: 12px; }
.member-arrow { color: var(--weui-FG-2); font-size: 14px; flex-shrink: 0; }

/* 群成员分区 */
.member-section {
  padding: 12px 16px 4px; font-size: 12px; color: var(--weui-FG-1);
  font-weight: 500; letter-spacing: 0.5px; background: var(--weui-BG-0);
}

/* 店长聊天记录弹窗内的聊天区 */
.shop-chat-list {
  padding: 12px 14px;
  min-height: 100%;
}
.shop-chat-list .msg { margin-bottom: 16px; }
.shop-chat-list .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 14px; }
.shop-chat-list .bubble { font-size: 16px; }
.shop-chat-list .nick { font-size: 12px; }
.shop-chat-list .msg-collapsed { margin-bottom: 16px; }

/* 成员详情弹窗 */
.member-detail-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 16px; background: var(--weui-BG-2);
  border-bottom: 0.5px solid var(--weui-SEPARATOR-0);
}
.member-detail-avatar {
  width: 64px; height: 64px; border-radius: 8px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; font-weight: 600;
}
.member-detail-avatar.wheat { background: var(--weui-BRAND); }
.member-detail-avatar.user { background: #4b89dc; }
.member-detail-avatar.scene { background: #1485ee; }
.member-detail-avatar.shop { background: #fa9d3b; }
.member-detail-name {
  font-size: 20px; font-weight: 600; color: var(--weui-FG-0);
}
.member-detail-type {
  font-size: 13px; color: var(--weui-FG-1); margin-top: 4px;
}
.member-detail-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--weui-BG-2);
  border-bottom: 0.5px solid var(--weui-FG-3);
}
.member-detail-field:first-of-type { border-top: 8px solid var(--weui-BG-0); }
.member-detail-label { font-size: 15px; color: var(--weui-FG-0); flex-shrink: 0; }
.member-detail-value { font-size: 15px; color: var(--weui-FG-1); text-align: right; }
.member-detail-input {
  border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--weui-FG-0); text-align: right;
  width: 60%; padding: 0;
}
.member-detail-input::placeholder { color: var(--weui-FG-2); }
.member-detail-save {
  margin: 16px; padding: 12px; border: none; border-radius: 8px;
  background: var(--weui-BRAND); color: #fff; font-size: 16px;
  cursor: pointer; text-align: center; font-weight: 500;
}
.member-detail-save:active { opacity: 0.8; }
.member-detail-section {
  padding: 12px 16px 4px; font-size: 12px; color: var(--weui-FG-1);
  background: var(--weui-BG-0);
}

/* ============ 设置弹窗通用行样式 ============ */
.settings-section-label {
  padding: 12px 16px 4px; font-size: 12px; color: var(--weui-FG-1);
  font-weight: 500; letter-spacing: 0.5px; background: var(--weui-BG-0);
}
.settings-row {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; background: var(--weui-BG-2); cursor: pointer;
  transition: background 0.1s;
}
.settings-row:active { background: var(--weui-BG-COLOR-ACTIVE); }
.settings-row + .settings-row { border-top: 0.5px solid var(--weui-FG-3); }
.settings-row-label { font-size: 16px; color: var(--weui-FG-0); flex: 1; min-width: 0; }
.settings-row-value { font-size: 15px; color: var(--weui-FG-1); white-space: nowrap; flex-shrink: 0; }
.settings-row-arrow { color: var(--weui-FG-2); font-size: 16px; flex-shrink: 0; }

/* ============ 字体大小弹窗 ============ */
.fontsize-preview {
  margin: 0 16px 12px; padding: 16px; background: var(--weui-BG-2);
  border-radius: 8px; line-height: 1.55; color: var(--weui-FG-0);
  transition: font-size 0.15s;
}
.fontsize-slider-row {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 12px; padding: 12px 16px; background: var(--weui-BG-2);
  border-radius: 8px;
}
.fontsize-label {
  font-size: 14px; color: var(--weui-FG-1); flex-shrink: 0;
}
.fontsize-label.fontsize-large {
  font-size: 22px; font-weight: 600; color: var(--weui-FG-0);
}
.fontsize-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--weui-FG-3); border-radius: 2px;
  outline: none;
}
.fontsize-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #b0b0b0; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fontsize-presets {
  display: flex; justify-content: space-between;
  margin: 0 16px 16px; padding: 0 16px;
  font-size: 12px; color: var(--weui-FG-2);
}

/* 字体大小档位 */
body.fontsize-1 { font-size: 14px; }
body.fontsize-1 .bubble { font-size: 14px; }
body.fontsize-1 .nick { font-size: 10px; }
body.fontsize-2 { font-size: 16px; }
body.fontsize-2 .bubble { font-size: 16px; }
body.fontsize-2 .nick { font-size: 11px; }
body.fontsize-3 { font-size: 17px; }
body.fontsize-3 .bubble { font-size: 17px; }
body.fontsize-3 .nick { font-size: 12px; }
body.fontsize-4 { font-size: 19px; }
body.fontsize-4 .bubble { font-size: 19px; }
body.fontsize-4 .nick { font-size: 13px; }
body.fontsize-5 { font-size: 22px; }
body.fontsize-5 .bubble { font-size: 22px; }
body.fontsize-5 .nick { font-size: 14px; }

/* ============ 紧急联系人列表 ============ */
.emergency-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--weui-BG-2);
}
.emergency-item + .emergency-item { border-top: 0.5px solid var(--weui-FG-3); }
.emergency-item-empty {
  text-align: center; padding: 40px 16px; color: var(--weui-FG-2); font-size: 14px;
  background: var(--weui-BG-2);
}
.emergency-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; font-weight: 600;
}
.emergency-avatar.blue { background: #4b89dc; }
.emergency-avatar.green { background: #07c160; }
.emergency-info { flex: 1; min-width: 0; }
.emergency-name { font-size: 16px; color: var(--weui-FG-0); line-height: 1.3; }
.emergency-phone { font-size: 13px; color: var(--weui-FG-1); margin-top: 2px; }
.emergency-relation { font-size: 12px; color: var(--weui-FG-2); margin-top: 1px; }
.emergency-call-btn {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--weui-BRAND); color: #fff; font-size: 20px; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.emergency-call-btn:active { opacity: 0.8; }
.emergency-delete-btn {
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: var(--weui-BG-1); color: #fa5151; font-size: 14px; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

/* ============ 添加紧急联系人表单 ============ */
.emergency-form {
  padding: 16px; background: var(--weui-BG-2);
}
.emergency-form-field {
  display: flex; align-items: center; padding: 10px 0;
  border-bottom: 0.5px solid var(--weui-FG-3);
}
.emergency-form-field:last-child { border-bottom: none; }
.emergency-form-label {
  font-size: 15px; color: var(--weui-FG-0); width: 70px; flex-shrink: 0;
}
.emergency-form-input {
  flex: 1; border: none; outline: none; font-size: 15px; color: var(--weui-FG-0);
  padding: 4px 0; background: transparent;
}
.emergency-form-input::placeholder { color: var(--weui-FG-2); }
.emergency-form-save {
  margin: 16px 0 0; padding: 12px; border: none; border-radius: 8px;
  background: var(--weui-BRAND); color: #fff; font-size: 16px;
  cursor: pointer; text-align: center; font-weight: 500; width: 100%;
}
.emergency-form-save:active { opacity: 0.8; }

/* ============ 选择器弹窗（语速、音色等） ============ */
.picker-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.picker-overlay.hidden { display: none; }
.picker-sheet {
  width: 100%; max-width: var(--maxw); max-height: 60vh;
  background: var(--weui-BG-2); border-radius: 12px 12px 0 0;
  overflow: hidden; animation: slideUp 0.2s ease;
}
.picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 0.5px solid var(--weui-SEPARATOR-0);
}
.picker-title { font-size: 17px; font-weight: 500; color: var(--weui-FG-0); }
.picker-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--weui-BG-1); font-size: 16px; cursor: pointer;
  color: var(--weui-FG-1); display: flex; align-items: center; justify-content: center;
}
.picker-body { max-height: 50vh; overflow-y: auto; }
.picker-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; color: var(--weui-FG-0);
  font-size: 16px; transition: background 0.1s;
}
.picker-option:active { background: var(--weui-BG-COLOR-ACTIVE); }
.picker-option + .picker-option { border-top: 0.5px solid var(--weui-FG-3); }
.picker-option.selected { color: var(--weui-BRAND); font-weight: 500; }
.picker-option .picker-check { color: var(--weui-BRAND); font-weight: 700; font-size: 18px; }

/* ============ SOS 菜单项（红色醒目） ============ */
.popup-item.sos-item {
  background: #fa5151 !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}
.popup-item.sos-item:active { background: #d93b3b !important; }
.popup-item.sos-item + .popup-item { border-top: 0.5px solid var(--weui-FG-3); }

/* ============ SOS 顶部横条 ============ */
.sos-bar {
  height: 36px;
  background: #fa5151;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.sos-bar:active { background: #d93b3b; }
.sos-bar-text {
  color: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: 2px;
}

/* ============ SOS 弹窗 — 全屏覆盖 ============ */
.sos-fullscreen {
  align-items: stretch;
  background: var(--weui-BG-0);
  z-index: 300;
}
.sos-fullscreen.hidden { display: none; }
.sos-sheet-full {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  animation: none;
}
.sos-header { color: #1a1a1a; flex-shrink: 0; }

/* 上半部分：确认信息 */
.sos-top-section {
  padding: 16px 20px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--weui-BG-2);
  flex-shrink: 0;
}
.sos-icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(250, 81, 81, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
  animation: sosPulse 1.6s ease-in-out infinite;
}
.sos-icon-text {
  font-size: 24px; font-weight: 700; color: #fa5151;
  letter-spacing: 2px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@keyframes sosPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 81, 81, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(250, 81, 81, 0); }
}
.sos-confirm-text {
  font-size: 15px; color: #1a1a1a; font-weight: 500;
  line-height: 1.4;
}
.sos-phone-number {
  font-size: 24px; font-weight: 700; color: #fa5151;
  letter-spacing: 1px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.sos-hint-text {
  font-size: 13px; color: var(--weui-FG-1);
}

/* 分割线 */
.sos-divider {
  height: 6px; background: var(--weui-BG-0);
}

/* 下半部分：紧急对话窗口 */
.sos-chat-section {
  background: var(--weui-BG-0);
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sos-chat-list {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
  min-height: 120px;
}
.sos-chat-list .sos-msg {
  display: flex; align-items: flex-start; gap: 8px;
}
.sos-chat-list .sos-msg-avatar {
  width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.sos-chat-list .sos-msg-avatar.sos-ai {
  background: #fa5151;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 800;
}
.sos-chat-list .sos-msg-avatar.sos-user { background: #4b89dc; }
.sos-chat-list .sos-msg-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 4px;
  font-size: 14px; line-height: 1.45; word-break: break-word;
  background: #fff; color: var(--weui-FG-0);
}
.sos-chat-list .sos-msg-bubble.sos-urgent {
  background: #fff5f5; border-left: 3px solid #fa5151;
}
.sos-chat-list .sos-msg-bubble .sos-time-tag {
  font-size: 11px; color: var(--weui-FG-2); margin-top: 4px;
}

/* 状态栏 */
.sos-chat-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--weui-BG-2);
  border-top: 0.5px solid var(--weui-FG-3);
  border-bottom: 0.5px solid var(--weui-FG-3);
  font-size: 13px; color: var(--weui-FG-1);
  flex-shrink: 0;
}
.sos-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fa5151; flex-shrink: 0;
  animation: sosDotPulse 1s ease-in-out infinite;
}
@keyframes sosDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.sos-status-dot.active { background: var(--weui-BRAND); animation: sosDotActive 0.6s ease-in-out infinite; }
@keyframes sosDotActive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 底部操作按钮（内联在顶部区域） */
.sos-footer {
  display: flex; gap: 10px;
  padding: 6px 0 0;
}
.sos-footer-inline {
  border-top: none;
  background: transparent;
  width: 100%;
}
.sos-btn {
  flex: 1; padding: 10px; border-radius: 8px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  text-align: center; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  border: none; transition: opacity 0.15s, background 0.15s;
}
.sos-btn-cancel {
  background: #f5f5f5; color: #1a1a1a;
}
.sos-btn-cancel:active { background: #e8e8e8; }
.sos-btn-call {
  background: #fa5151; color: #fff;
  animation: sosCallPulse 2s ease-in-out infinite;
}
.sos-btn-call:active { background: #d93b3b; }
.sos-btn-call.called {
  background: var(--weui-BRAND);
  animation: none;
}
.sos-btn-online {
  background: #fff; color: #fa5151;
  border: 1.5px solid #fa5151;
}
.sos-btn-online:active { background: rgba(250,81,81,0.06); }
.sos-btn-online.called {
  background: var(--weui-BG-1); color: var(--weui-FG-1);
  border-color: var(--weui-FG-2);
}
@keyframes sosCallPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 81, 81, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(250, 81, 81, 0); }
}

/* ============ SOS 底部输入框（直接复用 #composer） ============ */
/* 弹窗打开时 #composer 被移入 #sos-composer-host，关闭时移回原位 */
#sos-composer-host .composer {
  position: relative;
  bottom: auto;
  flex-shrink: 0;
}

/* ============ SOS 紧急联系人确认 ============ */
.sos-emergency-confirm {
  display: flex; flex-direction: column; gap: 10px;
}
.sos-emergency-question {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
}
.sos-emergency-contacts {
  font-size: 13px; color: var(--weui-FG-1);
  background: rgba(250,81,81,0.06); padding: 10px 12px;
  border-radius: 6px; line-height: 1.6;
}
.sos-emergency-countdown {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
}
.sos-countdown-ring {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid #fa5151;
  border-top-color: transparent;
  animation: sosRingSpin 1s linear infinite;
}
@keyframes sosRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.sos-countdown-text {
  font-size: 16px; font-weight: 600; color: #fa5151;
  font-variant-numeric: tabular-nums;
}
.sos-emergency-hint {
  font-size: 12px; color: var(--weui-FG-2);
}
.sos-emergency-btns {
  display: flex; gap: 10px; margin-top: 4px;
}
.sos-emergency-btn {
  flex: 1; padding: 11px; border-radius: 6px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  border: none; transition: opacity 0.15s, background 0.15s;
  text-align: center;
}
.sos-emergency-btn:active { opacity: 0.8; }
.sos-emergency-no {
  background: #f5f5f5; color: #666;
}
.sos-emergency-yes {
  background: #fa5151; color: #fff;
}
.sos-emergency-result {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: #1a1a1a;
  padding: 6px 0;
}
.sos-emergency-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--weui-BRAND); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.sos-emergency-skipped {
  color: var(--weui-FG-1);
}

/* ========== SOS 强介入：环境录像引导 ========== */
.sos-record-prompt {
  text-align: center;
  padding: 12px 8px;
}
.sos-record-icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.sos-record-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--weui-FG-0);
  margin-bottom: 8px;
}
.sos-record-desc {
  font-size: 13px;
  color: var(--weui-FG-1);
  line-height: 1.6;
  margin-bottom: 12px;
  text-align: left;
}
.sos-record-guide {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--weui-FG-2);
}
.sos-record-guide span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sos-record-btn {
  display: inline-block;
  background: #fa5151;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  animation: sosRecordPulse 2s ease-in-out infinite;
}
@keyframes sosRecordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,81,81,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(250,81,81,0); }
}
.sos-record-btn:active {
  transform: scale(0.96);
}
.sos-record-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  color: #fa5151;
  font-size: 13px;
  font-weight: 500;
}
.sos-record-dot {
  width: 8px;
  height: 8px;
  background: #fa5151;
  border-radius: 50%;
  animation: sosDotBlink 1s ease-in-out infinite;
}
@keyframes sosDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.sos-record-skip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--weui-FG-2);
}
.sos-record-skip a {
  color: var(--weui-LINK);
  text-decoration: none;
}