/* ========================================
   Chat CSS - 聊天页面
   融合 X / Instagram / Telegram 风格
   极简 · 高级感 · 干净 · 可主题美化

   ─── 类名结构 ───
   .chat-screen          聊天页整体容器
   .chat-header          顶栏
   .chat-header__status  在线状态
   .chat-messages        聊天消息滚动区
   .chat-bubble          聊天气泡
   .chat-bubble-row      气泡行（含头像）
   .chat-time-divider    时间分割线
   .chat-input-bar       底部输入栏
   .chat-input-bar__*    输入栏子元素
   ======================================== */

/* ================================================
   1. 全屏容器
   ================================================ */
.chat-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 默认隐藏：用 transform + visibility 代替 display:none，保证滑出动画可见 */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.3s;
  will-change: transform;
}

.chat-screen.is-active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
}

/* ================================================
   2. 顶部导航栏（chat-header）
   ================================================ */
.chat-header {
  height: 56px;
  margin-top: var(--safe-area-top);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* 返回按钮 */
.chat-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.chat-header__back:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-header__back svg {
  width: 22px;
  height: 22px;
}

/* 中间信息区 */
.chat-header__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 8px;
}

.chat-header__name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  letter-spacing: 0.2px;
}

/* 在线状态 */
.chat-header__status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.chat-header__status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: #34c759;
  flex-shrink: 0;
  animation: chat-status-breathe 2.4s ease-in-out infinite;
}

/* 呼吸灯动画 */
@keyframes chat-status-breathe {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0);
  }
}

/* 离线状态修饰类 */
.chat-header__status-dot--offline {
  background-color: var(--color-text-hint);
  animation: none;
}

/* 行程状态：忙碌/外出 — 橙色慢闪 */
.chat-header__status-dot--busy {
  background-color: #ff9500;
  animation: chat-status-breathe-slow 3s ease-in-out infinite;
}

/* 行程状态：休息 — 灰色无动画 */
.chat-header__status-dot--rest {
  background-color: #aaa;
  animation: none;
}

/* 行程状态：睡眠 — 深灰无动画 */
.chat-header__status-dot--sleep {
  background-color: #666;
  animation: none;
}

@keyframes chat-status-breathe-slow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.chat-header__status-text {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
}

/* 设置按钮 */
.chat-header__settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.chat-header__settings:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-header__settings svg {
  width: 20px;
  height: 20px;
}

/* ================================================
   3. 聊天消息滚动区（chat-messages）
   ================================================ */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* 聊天背景层 - 按 chatId 独立设置 */
.chat-messages__bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chat-messages__bg-layer.has-bg {
  opacity: 1;
}

/* 聊天背景直接应用到 .chat-messages 容器 */
.chat-messages.has-chat-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 隐藏滚动条（保持极简感） */
.chat-messages::-webkit-scrollbar {
  width: 0;
  display: none;
}

.chat-messages__inner {
  position: relative;
  z-index: 1;
  padding: 16px 14px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

/* ================================================
   4. 时间分割线（chat-time-divider）
   ================================================ */
.chat-time-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
  user-select: none;
}

.chat-time-divider__text {
  font-size: 11px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  line-height: 1.4;
  margin-top: 2px;
  max-width: 220px;

}

/* ======== 表情包选择面板 ======== */
.chat-sticker-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--color-bg-primary, #fff);
  border-top: 1px solid var(--color-border, #e5e5e5);
  border-radius: 16px 16px 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  height: 55vh;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
  pointer-events: none;
}
.chat-sticker-panel.is-active {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.chat-sticker-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
.chat-sticker-panel__title {
  font-size: var(--font-size-base, 15px);
  font-weight: 600;
  color: var(--color-text-primary, #1a1a1a);
}
.chat-sticker-panel__close {
  width: 28px; height: 28px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--color-text-secondary, #666);
  transition: background .15s;
}
.chat-sticker-panel__close:active {
  background: rgba(0,0,0,.06);
}
.chat-sticker-panel__close svg {
  width: 16px; height: 16px;
}

/* 分类标签 */
.chat-sticker-panel__tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chat-sticker-panel__tabs::-webkit-scrollbar { display: none; }

.chat-sticker-panel__tab {
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-bg-secondary, #f5f5f5);
  color: var(--color-text-secondary, #666);
  font-size: var(--font-size-sm, 13px);
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.chat-sticker-panel__tab.is-active {
  background: var(--color-primary, #007aff);
  color: #fff;
  border-color: var(--color-primary, #007aff);
}

/* 表情网格 */
.chat-sticker-panel__grid {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.chat-sticker-panel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background: var(--color-bg-secondary, #f5f5f5);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s, background .12s;
  padding: 6px 4px;
  overflow: hidden;
  min-height: 0;
}
.chat-sticker-panel__item:active {
  transform: scale(.92);
  background: rgba(0,0,0,.08);
}
.chat-sticker-panel__item-img {
  width: 100%;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.chat-sticker-panel__item-name {
  display: block;
  font-size: 11px;
  color: var(--color-text-secondary, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 4px;
  line-height: 1.3;
  flex-shrink: 0;
}

.chat-sticker-panel__item-name.is-editing {
  background: #fff;
  border: 1.5px solid #07c160;
  border-radius: 4px;
  padding: 1px 4px;
  outline: none;
  cursor: text;
  min-width: 36px;
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
}

.chat-sticker-panel__item-emoji {
  font-size: 32px;
  line-height: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-sticker-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--color-text-tertiary, #999);
  font-size: var(--font-size-sm, 13px);
  text-align: center;
}
/* 表情包多选按钮 */
.chat-sticker-panel__multiselect {
  width: 28px; height: 28px;
  border: none; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-secondary, #666);
  transition: background .15s;
}
.chat-sticker-panel__multiselect:hover { background: rgba(0,0,0,.06); }
.chat-sticker-panel__multiselect svg { width: 16px; height: 16px; }

/* 多选模式下的选中标记 */
.chat-sticker-panel__item-check {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25); background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.chat-sticker-panel__item-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
.chat-sticker-panel__item.is-selected .chat-sticker-panel__item-check {
  border-color: var(--color-primary, #007aff); background: var(--color-primary, #007aff);
}
.chat-sticker-panel__item.is-selected .chat-sticker-panel__item-check svg { opacity: 1; stroke: #fff; }
.chat-sticker-panel__item { position: relative; }

/* 多选底部操作栏 */
.chat-sticker-panel__multi-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid rgba(0,0,0,.06);
  background: var(--color-bg-primary, #fff);
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
}
.chat-sticker-panel__multi-exit {
  border: none; background: none; font-size: 13px;
  color: var(--color-text-secondary, #666); cursor: pointer; padding: 4px 8px;
}
.chat-sticker-panel__multi-exit:hover { color: var(--color-text-primary, #333); }
.chat-sticker-panel__multi-count { font-size: 12px; color: var(--color-text-secondary, #999); }
.chat-sticker-panel__multi-actions { display: flex; gap: 8px; }
.chat-sticker-panel__multi-btn {
  display: flex; align-items: center; gap: 4px;
  border: none; border-radius: 6px; padding: 5px 10px;
  font-size: 12px; cursor: pointer; transition: opacity .15s;
}
.chat-sticker-panel__multi-btn:disabled { opacity: .4; cursor: not-allowed; }
.chat-sticker-panel__multi-btn svg { width: 14px; height: 14px; }
.chat-sticker-panel__multi-btn--move { background: rgba(0,122,255,.1); color: var(--color-primary, #007aff); }
.chat-sticker-panel__multi-btn--delete { background: rgba(255,59,48,.1); color: #ff3b30; }

/* 移动分组弹窗 */
.chat-stk-move-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.chat-stk-move-overlay.is-active { opacity: 1; pointer-events: auto; }
.chat-stk-move__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.chat-stk-move__card {
  position: relative; background: var(--color-bg-primary, #fff);
  border-radius: 14px; padding: 20px; width: 280px; max-height: 70vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); overflow: hidden;
  display: flex; flex-direction: column;
}
.chat-stk-move__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.chat-stk-move__desc { font-size: 13px; color: var(--color-text-secondary, #666); margin-bottom: 12px; }
.chat-stk-move__list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.chat-stk-move__option {
  border: 1px solid rgba(0,0,0,.08); border-radius: 8px;
  padding: 10px 14px; background: none; text-align: left;
  font-size: 14px; cursor: pointer; transition: background .15s;
}
.chat-stk-move__option:hover { background: rgba(0,122,255,.06); border-color: var(--color-primary, #007aff); }
.chat-stk-move__footer { margin-top: 14px; text-align: center; }
.chat-stk-move__cancel {
  border: none; background: none; font-size: 14px;
  color: var(--color-text-secondary, #666); cursor: pointer; padding: 6px 16px;
}

.chat-sticker-panel__empty-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: var(--color-text-tertiary, #999);
  font-size: var(--font-size-sm, 13px);
  grid-column: 1 / -1;
}

/* ======== 表情包气泡卡片 ======== */
.chat-sticker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 140px;
  padding: 6px;
}
.chat-sticker-card__img {
  width: 120px; height: 120px;
  object-fit: contain;
  border-radius: 8px;
}
.chat-sticker-card__emoji {
  font-size: 64px;
  line-height: 1.1;
}
.chat-sticker-card__name {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-tertiary, #999);
  margin-top: 4px;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 发送的表情包气泡无背景 */
.chat-bubble--sent .chat-sticker-card,
.chat-bubble--received .chat-sticker-card {
  background: transparent;
}
.chat-bubble-row--sent .chat-bubble .chat-sticker-card {
  background: transparent;
}
.chat-bubble-row--received .chat-bubble .chat-sticker-card {
  background: transparent;
}
/* 让表情包气泡本身也去掉背景色 */
.chat-bubble-row .chat-bubble:has(.chat-sticker-card) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ================================================
   5. 气泡行（chat-bubble-row）
   ================================================ */
.chat-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

/* 收到的消息：左对齐 */
.chat-bubble-row--received {
  justify-content: flex-start;
  padding-right: 48px;
}

/* 发送的消息：右对齐 */
.chat-bubble-row--sent {
  justify-content: flex-end;
  padding-left: 48px;
}

/* ================================================
   6. 气泡头像（chat-bubble-avatar）
   ================================================ */
.chat-bubble-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-bubble-avatar__placeholder {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: #999;
  line-height: 1;
}

/* ── 头像显示开关：隐藏头像 ── */
#chatMessages.hide-avatars .chat-bubble-avatar {
  display: none !important;
}

/* ── 连续消息隐藏头像 ── */
.chat-bubble-avatar.consecutive-hidden {
  visibility: hidden;
}

/* ── 时间戳显示模式 ── */
#chatMessages.ts-mode-none .chat-bubble__time,
#chatMessages.ts-mode-none .chat-bubble__read-status {
  display: none !important;
}

/* 已读/双勾显示开关：独立隐藏 read-status */
#chatMessages.hide-read-status .chat-bubble__read-status {
  display: none !important;
}

.chat-bubble-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* ================================================
   7. 聊天气泡（chat-bubble）
   ================================================ */
.chat-bubble {
  position: relative;
  max-width: 100%;
  word-break: break-word;
}

/* 收到的气泡样式 */
.chat-bubble--received {
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* 发送的气泡样式 */
.chat-bubble--sent {
  background: var(--color-text-primary);
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 气泡内容文字 */
.chat-bubble__content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.1px;
}

.chat-bubble--received .chat-bubble__content {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-bubble__content {
  color: #ffffff;
}

/* 气泡列容器（包裹气泡 + 外部 meta） */
.chat-bubble-col {
  position: relative;
  max-width: 100%;
  min-width: 0;
}

/* 气泡外部元信息（时间戳 + 已读），绝对定位贴着气泡外侧底部 */
.chat-bubble__meta-outer {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

/* 收到的消息：meta 贴在气泡右侧外边 */
.chat-bubble-row--received .chat-bubble__meta-outer {
  left: calc(100% + 6px);
  align-items: flex-start;
}

/* 发送的消息：meta 贴在气泡左侧外边 */
.chat-bubble-row--sent .chat-bubble__meta-outer {
  right: calc(100% + 6px);
  align-items: flex-end;
}

.chat-bubble__read-status {
  font-size: 9px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
  line-height: 1.2;
  user-select: none;
}

.chat-bubble__time {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--color-text-hint);
}

/* ================================================
   8. 空状态（chat-empty）
   ================================================ */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  user-select: none;
}

.chat-empty__icon {
  width: 56px;
  height: 56px;
  color: var(--color-text-light);
  margin-bottom: 16px;
  opacity: 0.4;
}

.chat-empty__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-hint);
  line-height: 1.5;
}

/* ================================================
   9. 底部输入栏（chat-input-bar）
   ================================================ */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 10px;
  padding-bottom: calc(10px + var(--safe-area-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-chat-input);
}

/* 通用工具按钮基础样式 */
.chat-input-bar__tool,
.chat-input-bar__emoji,
.chat-input-bar__send,
.chat-input-bar__ai {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  padding: 0;
}

/* 加号按钮 */
.chat-input-bar__tool {
  color: var(--color-text-secondary);
}

.chat-input-bar__tool:active {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

.chat-input-bar__tool svg {
  width: 22px;
  height: 22px;
}

/* 输入框容器 */
.chat-input-bar__field-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

/* 输入框 */
.chat-input-bar__field {
  width: 100%;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  resize: none;
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-input-bar__field::placeholder {
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
}

.chat-input-bar__field:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

/* 隐藏 textarea 滚动条 */
.chat-input-bar__field::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* 表情按钮 */
.chat-input-bar__emoji {
  color: var(--color-text-secondary);
}

.chat-input-bar__emoji:active {
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-input-bar__emoji svg {
  width: 22px;
  height: 22px;
}

/* 发送按钮 */
.chat-input-bar__send {
  background: var(--color-text-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.chat-input-bar__send:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.chat-input-bar__send svg {
  width: 17px;
  height: 17px;
}

/* AI 回复按钮 ── 黑灰白极简风格 ✦ */
.chat-input-bar__ai {
  color: transparent;
  border: none;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #d5d5d5 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
              0 0 0 0 rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  animation: chat-ai-btn-glow 3s ease-in-out infinite;
}

/* 柔和呼吸光晕 */
@keyframes chat-ai-btn-glow {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
                0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18),
                0 0 0 3px rgba(0, 0, 0, 0.04);
  }
}

.chat-input-bar__ai:active {
  transform: scale(0.88);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #e5e5e5 0%, #d0d0d0 50%, #c0c0c0 100%);
}

.chat-input-bar__ai .chat-ai-icon {
  width: 20px;
  height: 20px;
}

/* 大星星缓慢旋转 */
.chat-ai-icon__star-main {
  transform-origin: 12px 12px;
  animation: chat-ai-star-spin 6s linear infinite;
}

@keyframes chat-ai-star-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 小星星1 闪烁 */
.chat-ai-icon__star-sm1 {
  animation: chat-ai-twinkle1 2s ease-in-out infinite;
}

@keyframes chat-ai-twinkle1 {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}

/* 小星星2 闪烁（错开节奏） */
.chat-ai-icon__star-sm2 {
  animation: chat-ai-twinkle2 2.5s ease-in-out 0.8s infinite;
}

/* 停止图标默认隐藏，loading 时显示 */
.chat-ai-icon--stop {
  display: none;
}
.chat-input-bar__ai--loading .chat-ai-icon--normal {
  display: none;
}
.chat-input-bar__ai--loading .chat-ai-icon--stop {
  display: block;
  animation: chat-ai-stop-pulse 1s ease-in-out infinite;
}
@keyframes chat-ai-stop-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes chat-ai-twinkle2 {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(0.5); }
}

/* ================================================
   10. 正在输入中指示器（chat-typing-indicator）
   ================================================ */
.chat-typing-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  justify-content: flex-start;
  padding-right: 48px;
  animation: chat-typing-fadein 0.25s ease-out;
}

@keyframes chat-typing-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-typing-bubble {
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-hint);
  animation: chat-typing-bounce 1.4s ease-in-out infinite;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.16s;
}

.chat-typing-dot:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes chat-typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.chat-typing-label {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-left: 4px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
}

/* ================================================
   11. 气泡操作栏（chat-bubble-actions）
   ================================================
   点击对方消息气泡后弹出的一排操作按钮
   风格：融入当前极简设计，类 Telegram / X 操作层

   ─── 类名结构 ───
   .chat-bubble-actions-overlay   全屏透明遮罩（点击关闭）
   .chat-bubble-actions           操作栏容器
   .chat-bubble-actions__bar      按钮组容器
   .chat-bubble-actions__btn      单个操作按钮
   .chat-bubble-actions__icon     按钮图标区
   .chat-bubble-actions__label    按钮文字标签
   .chat-bubble--active           当前被选中的气泡高亮态
   ================================================ */

/* 透明遮罩层：覆盖整个聊天页，捕获外部点击 */
.chat-bubble-actions-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.03);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.chat-bubble-actions-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 操作栏容器：绝对定位，由 JS 设置 top/left */
.chat-bubble-actions {
  position: absolute;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transform-origin: left bottom;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.chat-bubble-actions.is-active {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 按钮组容器 */
.chat-bubble-actions__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 14px;
  padding: 6px 4px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08),
              0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* 单个操作按钮 */
.chat-bubble-actions__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 52px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  padding: 0;
  transition: background-color 0.15s ease,
              transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.chat-bubble-actions__btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-bubble-actions__btn:active {
  background-color: rgba(0, 0, 0, 0.07);
  transform: scale(0.92);
}

/* 按钮图标区 */
.chat-bubble-actions__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-text-primary);
}

.chat-bubble-actions__icon svg {
  width: 18px;
  height: 18px;
}

/* 按钮文字标签 */
.chat-bubble-actions__label {
  font-size: 10px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary);
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* 当前被选中的气泡 - 轻微高亮 */
.chat-bubble--active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}

/* ================================================
   12. 引用预览条（chat-quote-preview）
   ================================================
   点击"引用"后，在输入栏上方显示被引用消息的预览
   点击关闭按钮可取消引用

   ─── 类名结构 ───
   .chat-quote-preview           预览条容器（默认隐藏）
   .chat-quote-preview.is-active 显示状态
   .chat-quote-preview__bar      内部横排布局
   .chat-quote-preview__icon     左侧引用图标
   .chat-quote-preview__body     中间文字区
   .chat-quote-preview__author   引用作者名
   .chat-quote-preview__text     引用内容摘要
   .chat-quote-preview__close    右侧关闭按钮
   ================================================ */

.chat-quote-preview {
  display: none;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.chat-quote-preview.is-active {
  display: block;
  animation: chat-quote-preview-in 0.2s ease-out;
}

@keyframes chat-quote-preview-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-quote-preview__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 40px;
}

.chat-quote-preview__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-hint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-quote-preview__icon svg {
  width: 16px;
  height: 16px;
}

.chat-quote-preview__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--color-text-hint);
  padding-left: 10px;
}

.chat-quote-preview__author {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.chat-quote-preview__text {
  font-size: 12px;
  color: var(--color-text-hint);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-quote-preview__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-quote-preview__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-text-secondary);
}

.chat-quote-preview__close:active {
  background-color: rgba(0, 0, 0, 0.07);
}

.chat-quote-preview__close svg {
  width: 16px;
  height: 16px;
}

/* ================================================
   13. 气泡内引用块（chat-bubble-quote）
   ================================================
   消息气泡内部的引用内容区域
   显示在气泡正文上方，类 Telegram 风格

   ─── 类名结构 ───
   .chat-bubble-quote           引用块容器
   .chat-bubble-quote__author   引用作者
   .chat-bubble-quote__text     引用摘要文字
   ================================================ */

.chat-bubble-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid rgba(0, 0, 0, 0.15);
  padding: 4px 10px;
  margin-bottom: 6px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.chat-bubble--sent .chat-bubble-quote {
  border-left-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

.chat-bubble-quote__author {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text-secondary);
}

.chat-bubble--sent .chat-bubble-quote__author {
  color: rgba(255, 255, 255, 0.7);
}

.chat-bubble-quote__text {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.chat-bubble--sent .chat-bubble-quote__text {
  color: rgba(255, 255, 255, 0.55);
}


/* ================================================
   14. 删除确认弹窗（chat-delete-confirm）
   ================================================
   点击删除按钮后弹出的确认对话框
   极简风格，融入当前聊天页面设计

   ─── 类名结构 ───
   .chat-delete-confirm              容器（默认隐藏）
   .chat-delete-confirm.is-active    显示状态
   .chat-delete-confirm__backdrop    半透明遮罩
   .chat-delete-confirm__card        弹窗卡片
   .chat-delete-confirm__title       标题
   .chat-delete-confirm__desc        描述文字
   .chat-delete-confirm__actions     按钮组
   .chat-delete-confirm__btn         按钮基础
   .chat-delete-confirm__btn--cancel 取消按钮
   .chat-delete-confirm__btn--confirm 确认删除按钮
   ================================================ */

.chat-delete-confirm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chat-delete-confirm.is-active {
  pointer-events: auto;
  opacity: 1;
}

.chat-delete-confirm__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}

.chat-delete-confirm__card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 16px;
  padding: 24px 20px 16px;
  width: 280px;
  max-width: 85%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12),
              0 0 0 0.5px rgba(0, 0, 0, 0.04);
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.chat-delete-confirm.is-active .chat-delete-confirm__card {
  transform: scale(1);
}

.chat-delete-confirm__title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.chat-delete-confirm__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.chat-delete-confirm__actions {
  display: flex;
  gap: 10px;
}

.chat-delete-confirm__btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-delete-confirm__btn:active {
  transform: scale(0.96);
}

.chat-delete-confirm__btn--cancel {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

.chat-delete-confirm__btn--cancel:hover {
  background: rgba(0, 0, 0, 0.08);
}

.chat-delete-confirm__btn--confirm {
  background: #ff3b30;
  color: #ffffff;
}

.chat-delete-confirm__btn--confirm:hover {
  background: #e0332b;
}

/* ================================================
   15. 编辑面板（chat-edit-panel）
   ================================================
   点击编辑后从底部滑出的编辑面板
   覆盖在输入栏上方，极简风格

   ─── 类名结构 ───
   .chat-edit-panel              编辑面板容器（默认隐藏）
   .chat-edit-panel.is-active    显示状态
   .chat-edit-panel__header      面板头部
   .chat-edit-panel__title       标题
   .chat-edit-panel__close       关闭按钮
   .chat-edit-panel__body        面板主体
   .chat-edit-panel__field       编辑输入框
   .chat-edit-panel__footer      面板底部
   .chat-edit-panel__save        保存按钮
   .chat-bubble__edited-tag      气泡内"已编辑"标签
   .chat-bubble-row--editing     编辑中气泡行高亮
   ================================================ */

.chat-edit-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 56;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  padding-bottom: var(--safe-area-bottom);
}

.chat-edit-panel.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-edit-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
}

.chat-edit-panel__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.chat-edit-panel__close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-edit-panel__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-text-secondary);
}

.chat-edit-panel__close:active {
  background-color: rgba(0, 0, 0, 0.07);
}

.chat-edit-panel__close svg {
  width: 16px;
  height: 16px;
}

.chat-edit-panel__body {
  padding: 4px 14px;
}

.chat-edit-panel__field {
  width: 100%;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  resize: none;
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-edit-panel__field:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.chat-edit-panel__field::-webkit-scrollbar {
  width: 0;
  display: none;
}

.chat-edit-panel__footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 10px;
}

.chat-edit-panel__save {
  height: 34px;
  padding: 0 20px;
  border: none;
  border-radius: 17px;
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-edit-panel__save:hover {
  opacity: 0.9;
}

.chat-edit-panel__save:active {
  transform: scale(0.95);
}

/* 气泡内"已编辑"标签 */
.chat-bubble__edited-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-hint);
  margin-top: 4px;
  letter-spacing: 0.2px;
  opacity: 0.7;
}

.chat-bubble--sent .chat-bubble__edited-tag {
  color: rgba(255, 255, 255, 0.5);
}

/* 编辑中气泡行高亮 */
.chat-bubble-row--editing .chat-bubble {
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
  transition: box-shadow 0.2s ease;
}

/* ================================================
   16. 多选模式（chat-multiselect）
   ================================================
   点击"多选"后进入批量选择模式
   每条消息左侧显示复选框，底部显示操作栏

   ─── 类名结构 ───
   .chat-multiselect-checkbox        复选框容器（默认隐藏）
   .chat-multiselect-checkbox__inner  复选框内圆
   .chat-multiselect-active           聊天页多选模式激活态
   .chat-bubble-row--selected         选中行
   .chat-multiselect-bar              底部批量操作栏
   .chat-multiselect-bar.is-active    操作栏显示
   .chat-multiselect-bar__inner       操作栏内部
   .chat-multiselect-bar__btn         操作栏按钮
   .chat-multiselect-bar__count       已选计数
   ================================================ */

/* 复选框 - 默认隐藏 */
.chat-multiselect-checkbox {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}

.chat-multiselect-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: all 0.18s ease;
  position: relative;
}

/* 多选模式激活时显示复选框 */
.chat-multiselect-active .chat-multiselect-checkbox {
  display: flex;
  animation: chat-ms-checkbox-in 0.2s ease-out;
}

@keyframes chat-ms-checkbox-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* 选中行的复选框填充 */
.chat-bubble-row--selected .chat-multiselect-checkbox__inner {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
}

.chat-bubble-row--selected .chat-multiselect-checkbox__inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* 选中行的背景高亮 */
.chat-bubble-row--selected {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  margin: -2px -4px;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 4px;
  padding-right: 4px;
}

/* 多选模式下隐藏输入栏 */
.chat-multiselect-active .chat-input-bar,
.chat-multiselect-active .chat-quote-preview {
  display: none;
}

/* 底部批量操作栏 */
.chat-multiselect-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
}

.chat-multiselect-bar.is-active {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.chat-multiselect-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  padding-bottom: calc(10px + var(--safe-area-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.chat-multiselect-bar__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 18px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-multiselect-bar__btn svg {
  width: 16px;
  height: 16px;
}

.chat-multiselect-bar__btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-multiselect-bar__btn:active {
  transform: scale(0.95);
  background-color: rgba(0, 0, 0, 0.07);
}

.chat-multiselect-bar__btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.chat-multiselect-bar__btn--exit {
  color: var(--color-text-secondary);
}

.chat-multiselect-bar__btn--del {
  color: #ff3b30;
}

.chat-multiselect-bar__btn--fav {
  color: #ff9500;
}

.chat-multiselect-bar__count {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.chat-multiselect-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ================================================
   18. 撤回消息提示（chat-bubble-recalled）
   ================================================ */

.chat-bubble-row--recalled {
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.chat-bubble-col--recalled {
  max-width: 100%;
}

.chat-bubble-recalled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  user-select: none;
}

.chat-bubble-recalled__icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-hint);
  flex-shrink: 0;
  opacity: 0.6;
}

.chat-bubble-recalled__text {
  font-size: 12px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
}

.chat-bubble-recalled__prob {
  font-size: 10px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  opacity: 0.6;
  letter-spacing: 0.1px;
}

/* 撤回确认弹窗 - 确认按钮用橙色 */
.chat-recall-confirm__btn--confirm {
  background: #ff9500 !important;
}

.chat-recall-confirm__btn--confirm:hover {
  background: #e08600 !important;
}

/* ================================================
   18.1 撤回强度选择（chat-recall-strength）
   ================================================
   撤回弹窗中的"普通撤回 / 强力撤回"双选按钮组

   ─── 类名结构 ───
   .chat-recall-confirm__card          撤回弹窗卡片（加宽）
   .chat-recall-strength               选项组容器
   .chat-recall-strength__opt          单个选项按钮
   .chat-recall-strength__opt.is-selected  选中态
   .chat-recall-strength__radio        单选圆圈
   .chat-recall-strength__radio-dot    选中圆点
   .chat-recall-strength__info         文字信息区
   .chat-recall-strength__name         选项名称
   .chat-recall-strength__hint         选项描述
   .chat-recall-prob-hint              底部概率提示条
   ================================================ */

.chat-recall-confirm__card {
  width: 300px;
}

/* 选项组容器 */
.chat-recall-strength {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* 单个选项按钮 */
.chat-recall-strength__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.015);
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  font-family: var(--font-family);
}

.chat-recall-strength__opt:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.chat-recall-strength__opt:active {
  transform: scale(0.98);
}

/* 选中态 */
.chat-recall-strength__opt.is-selected {
  border-color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.02);
}

.chat-recall-strength__opt--force.is-selected {
  border-color: #ff3b30;
  background: rgba(255, 59, 48, 0.03);
}

/* 单选圆圈 */
.chat-recall-strength__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: border-color 0.18s ease;
}

.chat-recall-strength__opt.is-selected .chat-recall-strength__radio {
  border-color: var(--color-text-primary);
}

.chat-recall-strength__opt--force.is-selected .chat-recall-strength__radio {
  border-color: #ff3b30;
}

/* 选中圆点 */
.chat-recall-strength__radio-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: transparent;
  transition: background-color 0.18s ease, transform 0.18s ease;
  transform: scale(0);
}

.chat-recall-strength__opt.is-selected .chat-recall-strength__radio-dot {
  background: var(--color-text-primary);
  transform: scale(1);
}

.chat-recall-strength__opt--force.is-selected .chat-recall-strength__radio-dot {
  background: #ff3b30;
}

/* 文字信息区 */
.chat-recall-strength__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-recall-strength__name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.chat-recall-strength__hint {
  font-size: 11px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-hint);
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.chat-recall-strength__opt--force .chat-recall-strength__hint {
  color: rgba(255, 59, 48, 0.55);
}

.chat-recall-strength__opt--force.is-selected .chat-recall-strength__hint {
  color: rgba(255, 59, 48, 0.7);
}

/* 自定义选项 */
.chat-recall-strength__opt--custom.is-selected {
  border-color: #007aff;
  background: rgba(0, 122, 255, 0.03);
}

.chat-recall-strength__opt--custom.is-selected .chat-recall-strength__radio {
  border-color: #007aff;
}

.chat-recall-strength__opt--custom.is-selected .chat-recall-strength__radio-dot {
  background: #007aff;
}

/* ── 自定义滑条区域 ── */
.chat-recall-slider {
  margin-bottom: 12px;
  padding: 10px 12px 6px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.03);
  border: 1px solid rgba(0, 122, 255, 0.08);
  animation: chat-recall-slider-in 0.2s ease-out;
}

@keyframes chat-recall-slider-in {
  from { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 100px; margin-bottom: 12px; }
}

.chat-recall-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.chat-recall-slider__label {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.chat-recall-slider__value {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #007aff;
  min-width: 36px;
  text-align: right;
}

/* Range 滑条样式 */
.chat-recall-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #007aff 0%, #007aff var(--track-pct, 50%), rgba(0,0,0,0.08) var(--track-pct, 50%), rgba(0,0,0,0.08) 100%);
  outline: none;
  cursor: pointer;
  margin: 0;
  --track-pct: 50%;
}

.chat-recall-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.chat-recall-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.chat-recall-slider__input::-webkit-slider-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 1px 6px rgba(0, 122, 255, 0.3);
}

.chat-recall-slider__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.chat-recall-slider__input::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

.chat-recall-slider__input::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #007aff;
}

/* 刻度标记 */
.chat-recall-slider__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 2px;
}

.chat-recall-slider__marks span {
  font-size: 9px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  letter-spacing: 0;
}

/* 自定义概率提示条颜色 */
.chat-recall-prob-hint--custom {
  background: rgba(0, 122, 255, 0.05);
  color: #007aff;
}

.chat-recall-prob-hint--custom strong {
  color: #007aff;
}

/* 底部概率提示条 */
.chat-recall-prob-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}

.chat-recall-prob-hint--normal {
  background: rgba(0, 0, 0, 0.03);
}

.chat-recall-prob-hint--force {
  background: rgba(255, 59, 48, 0.05);
  color: #ff3b30;
}

.chat-recall-prob-hint__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

.chat-recall-prob-hint strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chat-recall-prob-hint--force strong {
  color: #ff3b30;
}

/* ================================================
   20. 工具栏面板（chat-toolbar）
   ================================================
   点击加号按钮后从底部展开的工具栏面板
   类 Telegram / Instagram 附件面板风格

   ─── 类名结构 ───
   .chat-toolbar-overlay          遮罩层
   .chat-toolbar                  工具栏面板容器
   .chat-toolbar.is-active        展开状态
   .chat-toolbar__grid            宫格布局容器
   .chat-toolbar__item            单个工具项按钮
   .chat-toolbar__icon            工具图标容器
   .chat-toolbar__label           工具文字标签
   .chat-input-bar__tool--active  加号按钮旋转态
   ================================================ */

/* 遮罩层 - 覆盖聊天区域，点击收起面板 */
.chat-toolbar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.chat-toolbar-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 工具栏面板容器 - 流式布局，位于消息区和输入栏之间 */
.chat-toolbar {
  position: relative;
  z-index: 13;
  flex-shrink: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.22s ease;
  will-change: max-height, opacity;
}

.chat-toolbar.is-active {
  max-height: 240px;
  opacity: 1;
  overflow-y: auto;
}

/* 隐藏工具栏滚动条 */
.chat-toolbar::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* 宫格布局 */
.chat-toolbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 0;
  padding: 16px 12px 12px;
}

/* 单个工具项 */
.chat-toolbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 4px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  transition: background-color 0.15s ease,
              transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

.chat-toolbar__item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.chat-toolbar__item:active {
  background-color: rgba(0, 0, 0, 0.06);
  transform: scale(0.92);
}

/* 工具图标容器 */
.chat-toolbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary);
  transition: background-color 0.15s ease,
              color 0.15s ease;
}

.chat-toolbar__item:active .chat-toolbar__icon {
  background: rgba(0, 0, 0, 0.07);
}

.chat-toolbar__icon svg {
  width: 22px;
  height: 22px;
}

/* 工具文字标签 */
.chat-toolbar__label {
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* 加号按钮激活态：旋转 45° 变成 × */
.chat-input-bar__tool--active {
  color: var(--color-text-primary) !important;
}

.chat-input-bar__tool--active svg {
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.chat-input-bar__tool svg {
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 工具栏展开时隐藏引用预览 */
.chat-toolbar-open .chat-quote-preview {
  display: none;
}

/* ================================================
   21. 语音消息气泡（chat-voice）
   ================================================
   模拟语音消息的独立渲染组件
   type: "voice" 消息专用样式

   ─── 类名结构 ───
   .chat-voice                 语音消息主容器
   .chat-voice__bar            语音条主体（可点击）
   .chat-voice__play-icon      播放图标
   .chat-voice__waveform       模拟波形
   .chat-voice__duration       时长文字
   .chat-voice__transcript     转文字展开区
   ================================================ */

/* 语音消息主容器 - 替代普通 .chat-bubble__content */
.chat-voice {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 120px;
}

/* 语音条主体 */
.chat-voice__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 0;
}

.chat-voice__bar:active {
  opacity: 0.7;
}

/* 播放图标 */
.chat-voice__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.chat-bubble--received .chat-voice__play-icon {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-voice__play-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.chat-voice__play-icon svg {
  width: 14px;
  height: 14px;
}

/* 模拟波形 */
.chat-voice__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 24px;
  min-width: 40px;
}

.chat-voice__waveform-bar {
  width: 3px;
  border-radius: 1.5px;
  transition: height 0.2s ease;
}

.chat-bubble--received .chat-voice__waveform-bar {
  background: rgba(0, 0, 0, 0.2);
}

.chat-bubble--sent .chat-voice__waveform-bar {
  background: rgba(255, 255, 255, 0.4);
}

/* 时长文字 */
.chat-voice__duration {
  font-size: 12px;
  font-weight: var(--font-weight-light);
  flex-shrink: 0;
  letter-spacing: 0.2px;
  min-width: 28px;
  text-align: right;
}

.chat-bubble--received .chat-voice__duration {
  color: var(--color-text-hint);
}

.chat-bubble--sent .chat-voice__duration {
  color: rgba(255, 255, 255, 0.6);
}

/* 转文字展开区 */
.chat-voice__transcript {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  padding-top: 8px;
  margin-top: 8px;
  letter-spacing: 0.1px;
  animation: chat-voice-transcript-in 0.22s ease-out;
}

.chat-voice__transcript.is-open {
  display: block;
}

.chat-bubble--received .chat-voice__transcript {
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-bubble--sent .chat-voice__transcript {
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes chat-voice-transcript-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   22. 语音输入面板（chat-voice-input）
   ================================================ */

.chat-voice-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 56;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  padding-bottom: var(--safe-area-bottom);
}

.chat-voice-input.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-voice-input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
}

.chat-voice-input__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-voice-input__title svg {
  width: 15px;
  height: 15px;
  opacity: 0.5;
}

.chat-voice-input__close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.chat-voice-input__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-voice-input__close svg {
  width: 16px;
  height: 16px;
}

.chat-voice-input__body {
  padding: 4px 14px;
}

.chat-voice-input__field {
  width: 100%;
  min-height: 36px;
  max-height: 80px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  resize: none;
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-voice-input__field:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.chat-voice-input__field::-webkit-scrollbar {
  width: 0;
  display: none;
}

.chat-voice-input__hint {
  font-size: 11px;
  color: var(--color-text-hint);
  padding: 4px 2px 0;
  letter-spacing: 0.1px;
}

.chat-voice-input__footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 10px;
}

.chat-voice-input__send {
  height: 34px;
  padding: 0 20px;
  border: none;
  border-radius: 17px;
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.chat-voice-input__send:hover {
  opacity: 0.9;
}

.chat-voice-input__send:active {
  transform: scale(0.95);
}

.chat-voice-input__send svg {
  width: 14px;
  height: 14px;
}

/* ================================================
   23. 转账输入面板（chat-transfer-input）
   ================================================ */

.chat-transfer-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 56;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  padding-bottom: var(--safe-area-bottom);
}

.chat-transfer-input.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-transfer-input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}

.chat-transfer-input__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-transfer-input__title svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-primary);
}

.chat-transfer-input__close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.chat-transfer-input__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-transfer-input__close svg {
  width: 16px;
  height: 16px;
}

.chat-transfer-input__body {
  padding: 8px 16px;
}

/* 金额输入区 */
.chat-transfer-input__amount-area {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 10px;
  transition: border-color 0.2s ease;
}

.chat-transfer-input__amount-area:focus-within {
  border-bottom-color: var(--color-text-primary);
}

.chat-transfer-input__currency {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
}

.chat-transfer-input__field {
  flex: 1;
  border: none;
  background: none;
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  outline: none;
  min-width: 0;
  font-family: var(--font-family);
  line-height: 1;
}

.chat-transfer-input__field::placeholder {
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
}

/* 隐藏 number input 的箭头 */
.chat-transfer-input__field::-webkit-inner-spin-button,
.chat-transfer-input__field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.chat-transfer-input__field[type="number"] {
  -moz-appearance: textfield;
}

/* 余额显示 */
.chat-transfer-input__balance {
  font-size: 12px;
  color: var(--color-text-hint);
  letter-spacing: 0.1px;
  margin-bottom: 12px;
}

.chat-transfer-input__balance span {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* 快捷金额按钮组 */
.chat-transfer-input__presets {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chat-transfer-input__preset {
  flex: 1;
  height: 32px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.02);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-family);
}

.chat-transfer-input__preset:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.chat-transfer-input__preset:active {
  transform: scale(0.95);
}

.chat-transfer-input__preset.is-active {
  border-color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

/* 转账说明输入 */
.chat-transfer-input__note-area {
  margin-bottom: 4px;
}

.chat-transfer-input__note {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background: #f5f5f5;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
}

.chat-transfer-input__note::placeholder {
  color: var(--color-text-hint);
}

.chat-transfer-input__note:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
}

/* 底部确认按钮 */
.chat-transfer-input__footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 12px;
}

.chat-transfer-input__send {
  height: 38px;
  padding: 0 24px;
  border: none;
  border-radius: 19px;
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: var(--font-family);
}

.chat-transfer-input__send:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.chat-transfer-input__send:active {
  transform: scale(0.95);
}

.chat-transfer-input__send svg {
  width: 15px;
  height: 15px;
}

/* ================================================
   24. 转账卡片（chat-transfer-card）
   ================================================
   type: "transfer" 消息专用样式
   模拟微信/支付宝转账卡片风格

   ─── 类名结构 ───
   .chat-transfer-card              卡片主容器
   .chat-transfer-card--pending     待领取状态
   .chat-transfer-card--accepted    已领取状态
   .chat-transfer-card__header      顶部区域（图标+金额）
   .chat-transfer-card__icon        货币图标
   .chat-transfer-card__info        金额+备注信息
   .chat-transfer-card__amount      金额文字
   .chat-transfer-card__note        备注/转账说明
   .chat-transfer-card__footer      底部区域（状态+操作）
   .chat-transfer-card__status      状态文字
   .chat-transfer-card__action      领取按钮
   ================================================ */

.chat-transfer-card {
  width: 240px;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
}

/* ── 待领取状态（黑白主题） ── */
.chat-transfer-card--pending {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}

/* ── 已领取状态（浅灰淡化） ── */
.chat-transfer-card--accepted {
  background: linear-gradient(135deg, #b0b0b0 0%, #9a9a9a 100%);
}

.chat-transfer-card--rejected,
.chat-transfer-card--expired {
  background: linear-gradient(135deg, #c8c8c8 0%, #b0b0b0 100%);
}

/* 卡片头部 */
.chat-transfer-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
}

/* 货币图标 */
.chat-transfer-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  color: #ffffff;
}

.chat-transfer-card__icon svg {
  width: 22px;
  height: 22px;
}

/* 金额+备注信息 */
.chat-transfer-card__info {
  flex: 1;
  min-width: 0;
}

.chat-transfer-card__amount {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.chat-transfer-card__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片底部 */
.chat-transfer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.08);
}

.chat-transfer-card__status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
}

/* 领取按钮 */
.chat-transfer-card__action {
  height: 28px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease;
  font-family: var(--font-family);
  -webkit-tap-highlight-color: transparent;
}

.chat-transfer-card__action:hover {
  background: #ffffff;
}

.chat-transfer-card__action:active {
  transform: scale(0.93);
}

/* 已领取时的底部样式 */
.chat-transfer-card--accepted .chat-transfer-card__footer {
  background: rgba(0, 0, 0, 0.12);
}

.chat-transfer-card--accepted .chat-transfer-card__status {
  color: rgba(255, 255, 255, 0.6);
}

/* 转账卡片在发送气泡中不需要外部 padding */
.chat-bubble--sent .chat-transfer-card {
  margin: -10px -14px;
}

.chat-bubble--received .chat-transfer-card {
  margin: -10px -14px;
}

/* ================================================
   25. 拍照输入面板（chat-photo-input）
   ================================================ */

.chat-photo-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 56;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  padding-bottom: var(--safe-area-bottom);
}

.chat-photo-input.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-photo-input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
}

.chat-photo-input__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-photo-input__title svg {
  width: 15px;
  height: 15px;
  opacity: 0.5;
}

.chat-photo-input__close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.chat-photo-input__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-photo-input__close svg {
  width: 16px;
  height: 16px;
}

.chat-photo-input__body {
  padding: 4px 14px;
}

.chat-photo-input__field {
  width: 100%;
  min-height: 36px;
  max-height: 80px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  resize: none;
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-photo-input__field:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.chat-photo-input__field::-webkit-scrollbar {
  width: 0;
  display: none;
}

.chat-photo-input__hint {
  font-size: 11px;
  color: var(--color-text-hint);
  padding: 4px 2px 0;
  letter-spacing: 0.1px;
}

.chat-photo-input__footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 10px;
}

.chat-photo-input__send {
  height: 34px;
  padding: 0 20px;
  border: none;
  border-radius: 17px;
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.chat-photo-input__send:hover {
  opacity: 0.9;
}

.chat-photo-input__send:active {
  transform: scale(0.95);
}

.chat-photo-input__send svg {
  width: 14px;
  height: 14px;
}

/* ================================================
   25.1 定位输入面板（chat-location-input）
   ================================================ */

.chat-location-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 56;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  padding-bottom: var(--safe-area-bottom);
}

.chat-location-input.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.chat-location-input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
}

.chat-location-input__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-location-input__title svg {
  width: 15px;
  height: 15px;
  opacity: 0.5;
}

.chat-location-input__close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.chat-location-input__close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.chat-location-input__close svg {
  width: 16px;
  height: 16px;
}

.chat-location-input__body {
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-location-input__field {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #f5f5f5;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.chat-location-input__field:focus {
  border-color: rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.chat-location-input__field::placeholder {
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
}

.chat-location-input__field--sub {
  font-size: 13px;
}

.chat-location-input__footer {
  display: flex;
  justify-content: flex-end;
  padding: 4px 14px 10px;
}

.chat-location-input__send {
  height: 34px;
  padding: 0 20px;
  border: none;
  border-radius: 17px;
  background: var(--color-text-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.chat-location-input__send:hover {
  opacity: 0.9;
}

.chat-location-input__send:active {
  transform: scale(0.95);
}

.chat-location-input__send svg {
  width: 14px;
  height: 14px;
}

/* ================================================
   25.2 定位消息卡片（chat-location-card）
   ================================================
   type: "location" 消息专用样式
   模拟定位消息气泡，上方模拟地图 + 下方地点信息

   ─── 类名结构 ───
   .chat-location-card              定位卡片主容器
   .chat-location-card__map         模拟地图区域（渐变占位）
   .chat-location-card__map-pin     地图中的定位针图标
   .chat-location-card__info        地点信息区
   .chat-location-card__name        地点名称
   .chat-location-card__address     详细地址/说明
   .chat-location-card__pin         定位针 SVG 图标
   ================================================ */

.chat-location-card {
  width: 240px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-location-card:active {
  transform: scale(0.97);
}

/* 模拟地图区域 */
.chat-location-card__map {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 地图中的定位针图标 */
.chat-location-card__map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-location-card__pin {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.9);
}

/* 地点信息区 */
.chat-location-card__info {
  padding: 10px 12px;
}

.chat-bubble--received .chat-location-card__info {
  background: rgba(0, 0, 0, 0.015);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.chat-bubble--sent .chat-location-card__info {
  background: rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 地点名称 */
.chat-location-card__name {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.chat-bubble--received .chat-location-card__name {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-location-card__name {
  color: #ffffff;
}

/* 详细地址 */
.chat-location-card__address {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
  letter-spacing: 0.1px;
}

.chat-bubble--received .chat-location-card__address {
  color: var(--color-text-hint);
}

.chat-bubble--sent .chat-location-card__address {
  color: rgba(255, 255, 255, 0.6);
}

/* 定位卡片在气泡中不需要外部 padding */
.chat-bubble--sent .chat-location-card {
  margin: -10px -14px;
}

.chat-bubble--received .chat-location-card {
  margin: -10px -14px;
}

/* ================================================
   26. 照片消息卡片（chat-photo-card）
   ================================================
   type: "photo" 消息专用样式
   模拟照片消息气泡，上方假照片 + 下方文字说明

   ─── 类名结构 ───
   .chat-photo-card              照片卡片主容器
   .chat-photo-card__image       假照片区域（渐变占位）
   .chat-photo-card__placeholder 占位图标
   .chat-photo-card__caption     文字说明
   .chat-photo-card--tapped      点击反馈态
   ================================================ */

.chat-photo-card {
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-photo-card--tapped {
  transform: scale(0.96);
}

/* 假照片区域 */
.chat-photo-card__image {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 占位图标 */
.chat-photo-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-photo-card__icon {
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.85);
}

/* 图片描述（点击展开/收起，类似语音转文字） */
.chat-photo-card__desc {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 12px;
  letter-spacing: 0.1px;
  animation: chat-photo-desc-in 0.22s ease-out;
}

.chat-photo-card__desc.is-open {
  display: block;
}

.chat-bubble--received .chat-photo-card__desc {
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
}

.chat-bubble--sent .chat-photo-card__desc {
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.06);
}

@keyframes chat-photo-desc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 照片卡片在气泡中不需要外部 padding */
.chat-bubble--sent .chat-photo-card {
  margin: -10px -14px;
}

.chat-bubble--received .chat-photo-card {
  margin: -10px -14px;
}

/* ================================================
   27. 图片消息卡片（chat-image-card）
   ================================================
   type: "image" 消息专用样式
   用户上传的真实图片，显示 <img> 标签

   ─── 类名结构 ───
   .chat-image-card              图片卡片主容器
   .chat-image-card__img         图片元素
   .chat-image-card__placeholder 加载失败占位
   .chat-image-card__caption     图片说明文字
   .chat-image-preview-overlay   全屏预览遮罩
   ================================================ */

.chat-image-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-image-card:active {
  transform: scale(0.97);
}

.chat-image-card__img {
  display: block;
  border-radius: 0;
  object-fit: cover;
  max-width: 220px;
  max-height: 280px;
}

.chat-image-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-hint);
  font-size: 12px;
  font-weight: var(--font-weight-light);
}

.chat-image-card__caption {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 6px 10px;
  letter-spacing: 0.1px;
}

.chat-bubble--received .chat-image-card__caption {
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-bubble--sent .chat-image-card__caption {
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 图片卡片在气泡中不需要外部 padding */
.chat-bubble--sent .chat-image-card {
  margin: -10px -14px;
}

.chat-bubble--received .chat-image-card {
  margin: -10px -14px;
}

/* ── 全屏图片预览遮罩 ── */
.chat-image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}

.chat-image-preview-overlay.is-active {
  opacity: 1;
}

.chat-image-preview-overlay__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
}

.chat-image-preview-overlay__img {
  position: relative;
  z-index: 1;
  max-width: 92%;
  max-height: 88%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}

/* ================================================
   19. 聊天页面过渡动画
   ================================================
   动画方案：使用 transform + visibility（非 display:none）
   - 打开：直接添加 .is-active，translateX(0) + visibility:visible
   - 关闭：移除 .is-active，translateX(100%) + 延迟隐藏 visibility
   这样开/关都能看到滑动动画，无需 is-preparing hack */

/* ================================================
   28. 流式输出光标（chat-streaming-cursor）
   ================================================
   AI 流式输出时气泡末尾的闪烁光标

   ─── 类名结构 ───
   .chat-streaming-cursor     闪烁竖线光标
   .chat-bubble-row--streaming 流式气泡行入场动画
   ================================================ */

.chat-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-text-primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: chat-streaming-blink 0.6s ease-in-out infinite;
}

@keyframes chat-streaming-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* 流式气泡行入场动画 */
.chat-bubble-row--streaming {
  animation: chat-streaming-fadein 0.25s ease-out;
}

@keyframes chat-streaming-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   29. 关系变更通知卡片（chat-relationship-notify）
   ================================================
   AI 触发关系变更时在聊天中显示的系统通知
   居中显示，卡片式设计

   ─── 类名结构 ───
   .chat-relationship-notify           通知行容器（系统消息行）
   .chat-relationship-notify__card     通知卡片
   .chat-relationship-notify__icon     顶部图标
   .chat-relationship-notify__text     说明文字
   .chat-relationship-notify__change   关系变化标签
   .chat-relationship-notify__reason   变更原因
   ================================================ */

.chat-relationship-notify {
  justify-content: center !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  animation: chat-rel-notify-in 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes chat-rel-notify-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-relationship-notify__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(252, 231, 243, 0.6) 0%, rgba(237, 233, 254, 0.6) 50%, rgba(224, 231, 255, 0.6) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid rgba(196, 132, 252, 0.15);
  box-shadow: 0 2px 12px rgba(196, 132, 252, 0.1);
  max-width: 260px;
  text-align: center;
  user-select: none;
}

.chat-relationship-notify__icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}

.chat-relationship-notify__text {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.3px;
}

.chat-relationship-notify__change {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
}

.chat-relationship-notify__reason {
  font-size: 11px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  line-height: 1.4;
  margin-top: 2px;
  max-width: 220px;
}

/* ================================================
   30. 表情包联想面板（chat-sticker-suggest）
   ================================================
   用户输入文字时，自动匹配表情包名称并显示联想列表
   位于输入栏上方，横向滚动展示匹配的表情包

   ─── 类名结构 ───
   .chat-sticker-suggest              联想面板容器
   .chat-sticker-suggest.is-active    显示状态
   .chat-sticker-suggest__header      头部（标题+关闭）
   .chat-sticker-suggest__title       标题文字
   .chat-sticker-suggest__close       关闭按钮
   .chat-sticker-suggest__list        横向滚动列表
   .chat-sticker-suggest__item        单个表情项
   .chat-sticker-suggest__item-img    表情图片
   .chat-sticker-suggest__item-name   表情名称
   ================================================ */

.chat-sticker-suggest {
  position: relative;
  z-index: 14;
  flex-shrink: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease;
  will-change: max-height, opacity;
}

.chat-sticker-suggest.is-active {
  max-height: 120px;
  opacity: 1;
}

.chat-sticker-suggest__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 2px;
}

.chat-sticker-suggest__title {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-hint);
  letter-spacing: 0.2px;
}

.chat-sticker-suggest__close {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-hint);
  transition: background-color 0.15s ease;
  padding: 0;
}

.chat-sticker-suggest__close:active {
  background: rgba(0, 0, 0, 0.06);
}

.chat-sticker-suggest__close svg {
  width: 12px;
  height: 12px;
}

.chat-sticker-suggest__list {
  display: flex;
  gap: 8px;
  padding: 6px 12px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.chat-sticker-suggest__list::-webkit-scrollbar {
  display: none;
}

.chat-sticker-suggest__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  max-width: 72px;
  padding: 6px 4px;
  border: none;
  background: var(--color-bg-secondary, #f5f5f5);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-sticker-suggest__item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.chat-sticker-suggest__item:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.09);
}

.chat-sticker-suggest__item-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.chat-sticker-suggest__item-emoji {
  font-size: 28px;
  line-height: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-sticker-suggest__item-name {
  font-size: 10px;
  color: var(--color-text-secondary, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

/* ================================================
   31. 加载更多提示（chat-load-more）
   ================================================
   向上滚动加载历史消息时的顶部提示条
   ================================================ */

.chat-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
  user-select: none;
}

.chat-load-more__text {
  font-size: 11px;
  color: var(--color-text-hint);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
}

.chat-load-more--loading .chat-load-more__text {
  animation: chat-load-more-pulse 1.2s ease-in-out infinite;
}

@keyframes chat-load-more-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ================================================
   32. 购物小票卡片（chat-receipt-card）
   ================================================ */

.chat-receipt-card {
  width: 240px;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  user-select: none;
}

.chat-bubble--sent .chat-receipt-card {
  margin: -10px -14px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.1);
}

.chat-bubble--received .chat-receipt-card {
  margin: -10px -14px;
  background: #fafafa;
}

.chat-receipt-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
}

.chat-receipt-card__logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chat-bubble--received .chat-receipt-card__logo {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-receipt-card__logo {
  color: rgba(255, 255, 255, 0.9);
}

.chat-receipt-card__shop {
  flex: 1;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2px;
}

.chat-bubble--received .chat-receipt-card__shop {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-receipt-card__shop {
  color: #ffffff;
}

.chat-receipt-card__badge {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.chat-bubble--received .chat-receipt-card__badge {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}

.chat-bubble--sent .chat-receipt-card__badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.chat-receipt-card__divider {
  height: 1px;
  margin: 0 14px;
}

.chat-bubble--received .chat-receipt-card__divider {
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 4px, transparent 4px, transparent 8px);
}

.chat-bubble--sent .chat-receipt-card__divider {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.15) 4px, transparent 4px, transparent 8px);
}

.chat-receipt-card__items {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-receipt-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-receipt-card__item-name {
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-bubble--received .chat-receipt-card__item-name {
  color: var(--color-text-secondary);
}

.chat-bubble--sent .chat-receipt-card__item-name {
  color: rgba(255, 255, 255, 0.75);
}

.chat-receipt-card__item-price {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.chat-bubble--received .chat-receipt-card__item-price {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-receipt-card__item-price {
  color: rgba(255, 255, 255, 0.9);
}

.chat-receipt-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.chat-receipt-card__total-label {
  font-size: 12px;
}

.chat-bubble--received .chat-receipt-card__total-label {
  color: var(--color-text-secondary);
}

.chat-bubble--sent .chat-receipt-card__total-label {
  color: rgba(255, 255, 255, 0.6);
}

.chat-receipt-card__total {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
}

.chat-bubble--received .chat-receipt-card__total {
  color: var(--color-text-primary);
}

.chat-bubble--sent .chat-receipt-card__total {
  color: #ffffff;
}

.chat-receipt-card__time {
  font-size: 10px;
  padding: 0 14px 10px;
  letter-spacing: 0.1px;
}

.chat-bubble--received .chat-receipt-card__time {
  color: var(--color-text-hint);
}

.chat-bubble--sent .chat-receipt-card__time {
  color: rgba(255, 255, 255, 0.45);
}

/* ================================================
   33. 气泡翻译（chat-bubble translate）
   ================================================
   角色用外语回复时，气泡显示外语原文，
   点击可展开/收起中文翻译

   ─── 类名结构 ───
   .chat-bubble__content--translatable   可翻译气泡（可点击）
   .chat-bubble__foreign-text            外语原文
   .chat-bubble__translate-hint          "点击查看翻译"提示
   .chat-bubble__zh-text                 中文翻译（默认隐藏）
   .is-translated                        已展开翻译态
   ================================================ */

.chat-bubble__content--translatable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chat-bubble__foreign-text {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble__translate-hint {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-hint);
  margin-top: 6px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.chat-bubble--sent .chat-bubble__translate-hint {
  color: rgba(255, 255, 255, 0.5);
}

.chat-bubble__zh-text {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.1px;
  animation: chat-translate-in 0.22s ease-out;
}

.chat-bubble--received .chat-bubble__zh-text {
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-bubble--sent .chat-bubble__zh-text {
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-bubble__content--translatable.is-translated .chat-bubble__zh-text {
  display: block;
}

@keyframes chat-translate-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   34. TTS 语音生成 loading & 播放器
   ================================================ */
.chat-voice-tts-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  font-size: 12px;
  color: var(--color-text-hint, #999);
}

.chat-voice-tts-loading__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-light, #e5e5ea);
  border-top-color: var(--color-text-secondary, #8e8e93);
  border-radius: 50%;
  animation: voiceTtsSpin 0.6s linear infinite;
}

@keyframes voiceTtsSpin {
  to { transform: rotate(360deg); }
}

.chat-voice-tts-player {
  padding: 4px 0 2px;
}

.chat-voice-tts-player audio {
  width: 100%;
  height: 32px;
  border-radius: 8px;
}

/* ================================================
   19. 旁白剧情模式（narration）
   ================================================ */

/* 旁白行：居中排列，不使用左右气泡布局 */
.chat-bubble-row--narration {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  margin: 2px 0;
}

/* 旁白卡片 */
.sms-narration-card {
  max-width: 78%;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-align: center;
}

/* 旁白文字 */
.sms-narration-text {
  font-size: 12.5px;
  line-height: 1.65;
  color: #999;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* 旁白行不显示头像和状态 */
.chat-bubble-row--narration .chat-bubble-avatar,
.chat-bubble-row--narration .chat-bubble__meta-outer,
.chat-bubble-row--narration .chat-bubble__read-status,
.chat-bubble-row--narration .chat-bubble__time {
  display: none !important;
}

/* 多选模式下旁白的复选框 */
.chat-bubble-row--narration .chat-multiselect-checkbox {
  flex-shrink: 0;
  margin-right: 8px;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .sms-narration-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
  }
  .sms-narration-text {
    color: #777;
  }
}