miniprogramme/pages/message/chat/chat.wxss

/* 🎨 现代化聊天页面样式 - 深色主题 2025 */

/* 🎨 CSS变量定义 - 黑色主题（本文件局部覆盖） */
page {
  --primary-color: #0A84FF; /* accent */
  --primary-light: #3EA8FF;
  --primary-dark: #0056CC;
  --background-color: #070709; /* 页面背景主色（几乎黑） */
  --surface-color: #0F0F11; /* 气泡/卡片背景 */
  --text-primary: #ECECEC; /* 主要文字-浅色 */
  --text-secondary: #A8A8A8; /* 次要文字 */
  --text-tertiary: #7A7A7A;
  --border-color: rgba(255,255,255,0.06);
  --shadow-light: 0 1rpx 6rpx rgba(0, 0, 0, 0.6);
  --shadow-medium: 0 6rpx 18rpx rgba(0, 0, 0, 0.7);
  --radius-small: 8rpx;
  --radius-medium: 12rpx;
  --radius-large: 20rpx;
}

/* ===== 浅色主题覆盖（当根元素包含 .theme-light 时生效） ===== */
.theme-light {
  --primary-color: #007AFF;
  --primary-light: #5AC8FA;
  --primary-dark: #0051D5;
  --background-color: #F2F2F7;
  --surface-color: #FFFFFF;
  --text-primary: #000000;
  --text-secondary: #8E8E93;
  --text-tertiary: #C7C7CC;
  --border-color: #E5E5EA;
  --shadow-light: 0 1rpx 3rpx rgba(0,0,0,0.1);
  --shadow-medium: 0 4rpx 12rpx rgba(0,0,0,0.15);
}

/* 关键覆盖，修正本文件中使用硬编码深色的选择器 */
.theme-light .message-wrapper.other .message-content {
  background: var(--surface-color);
  color: var(--text-primary);
  border: 1rpx solid var(--border-color);
  box-shadow: var(--shadow-medium);
}

.theme-light .message-wrapper.self .message-content {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: #FFFFFF;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
}

.theme-light .avatar-placeholder {
  background: #C8C8CD;
  color: #FFFFFF;
}

.theme-light .message-wrapper.self .avatar-placeholder {
  background: #576B95;
  color: #FFFFFF;
  font-size: 36rpx;
}

.theme-light .input-area {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.95) 100%);
  border-top: 1rpx solid var(--border-color);
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
}

.theme-light .text-input {
  background: rgba(0,0,0,0.02);
  border: 1rpx solid var(--border-color);
  color: var(--text-primary);
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  vertical-align: top;
}

.theme-light .text-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
}

.theme-light .tool-btn {
  border: 1rpx solid var(--border-color);
  background: rgba(0,0,0,0.02);
}

.theme-light .tool-btn:active {
  background: rgba(0,0,0,0.05);
}

.theme-light .emoji-panel,
.theme-light .more-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.95) 100%);
  border-top: 1rpx solid var(--border-color);
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
  color: var(--text-primary);
}

.theme-light .emoji-item {
  background: rgba(0,0,0,0.03);
}

.theme-light .emoji-item:active {
  background: rgba(0,0,0,0.08);
}

.theme-light .loading-container {
  background: rgba(255,255,255,0.95);
  color: #333;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
}

.theme-light .time-text {
  background: var(--surface-color);
  color: var(--text-secondary);
  box-shadow: var(--shadow-light);
}

/* 主题覆盖：当 chat container 同时有 .theme-light 时，强制浅色背景覆盖 */
.chat-container.theme-light {
  background: linear-gradient(180deg, var(--background-color) 0%, #F8F8F8 100%);
  color: var(--text-primary);
}

/* 反向：确保 theme-dark 明确覆盖（保守写法） */
.chat-container.theme-dark {
  background: linear-gradient(180deg, var(--background-color) 0%, #0B0B0D 100%);
  color: var(--text-primary);
}

/* === 主题切换过渡（类 Telegram）=== */
.chat-container {
  transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
}
.chat-container.theme-transitioning {
  /* 轻微的亮度过渡，模拟 Telegram 的柔和切换 */
  transition: background 320ms ease, color 320ms ease, filter 320ms ease;
}

/* 消息气泡、输入区等关键区域同步过渡，避免突变 */
.message-content,
.input-area,
.emoji-panel,
.more-panel,
.time-text,
.tool-btn,
.message-wrapper.self .message-content,
.message-wrapper.other .message-content {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

/* 现代化导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(12rpx);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 32rpx;
  position: relative;
}

.navbar-left, .navbar-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.navbar-left {
  width: 80rpx;
  height: 80rpx;
  justify-content: center;
  border-radius: var(--radius-medium);
  transition: all 0.3s ease;
}

.navbar-right {
  justify-content: flex-end;
}

.navbar-left:active, .navbar-right:active {
  background: rgba(255, 255, 255, 0.02);
  transform: scale(0.95);
}

.navbar-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20rpx;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.navbar-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4rpx;
}

.icon-back {
  font-size: 44rpx;
  color: white;
  font-weight: bold;
}

.icon-search, .icon-more {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-medium);
  transition: all 0.3s ease;
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}

.icon-search:active, .icon-more:active {
  background: rgba(255, 255, 255, 0.02);
  transform: scale(0.95);
}

/* 🎨 现代化消息列表 */
.message-list {
  flex: 1;
  padding: 20rpx 0;
  margin-bottom: 200rpx;
  background: transparent;
  position: relative;
}

.message-item {
  margin-bottom: 32rpx;
  padding: 0 32rpx;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 现代化时间分隔线 */
.time-divider {
  display: flex;
  justify-content: center;
  margin: 40rpx 0 32rpx 0;
}

.time-text {
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-size: 24rpx;
  font-weight: 600;
  padding: 12rpx 24rpx;
  border-radius: 999rpx;
  letter-spacing: 0.5rpx;
  box-shadow: none;
  backdrop-filter: blur(6rpx);
}

/* 消息容器 - 布局 */
.message-wrapper {
  display: flex;
  margin-bottom: 20rpx;
  position: relative;
  width: 100%;
}

/* 对方消息：头像在左 */
.message-wrapper.other {
  flex-direction: row !important;
  justify-content: flex-start;
}

/* 我的消息：头像在右 */
.message-wrapper.self {
  flex-direction: row;
  justify-content: flex-end;
}

/* 头像样式 */
.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.message-wrapper.other .avatar {
  margin: 0 20rpx 0 0;
}

.message-wrapper.self .avatar {
  margin: 0 0 0 20rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-image image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,#1B1B1D 0%, #101012 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 50%;
}

.message-wrapper.self .avatar-placeholder {
  background: linear-gradient(135deg,#0A274E 0%, #05203A 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 36rpx;
}

/* 消息主体 */
.message-body {
  flex: 1;
  max-width: 480rpx;
  display: flex;
  flex-direction: column;
}

.message-wrapper.other .message-body {
  align-items: flex-start;
}

.message-wrapper.self .message-body {
  align-items: flex-end;
}

/* 发送者名称（群聊） */
.sender-name {
  font-size: 24rpx;
  color: var(--text-secondary);
  margin-bottom: 8rpx;
  padding: 0 16rpx;
}

/* 消息气泡 */
.message-content {
  border-radius: var(--radius-large);
  padding: 20rpx 28rpx 36rpx 28rpx; /* 为气泡内时间预留底部空间 */
  position: relative;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 520rpx;
  line-height: 1.6;
  font-size: 32rpx;
  box-shadow: none;
  backdrop-filter: blur(6rpx);
  transition: all 0.15s ease;
}

/* 对方消息气泡（深色） */
.message-wrapper.other .message-content {
  background: #141416;
  color: var(--text-primary);
  border: 1rpx solid rgba(255,255,255,0.03);
  border-top-left-radius: var(--radius-small);
}

.message-wrapper.other .message-content:hover {
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.45);
}

/* 我的消息气泡（偏蓝） */
.message-wrapper.self .message-content {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  color: #FFFFFF;
  border-top-right-radius: var(--radius-small);
  box-shadow: 0 6rpx 20rpx rgba(10,132,255,0.18);
}

.message-wrapper.self .message-content:hover {
  box-shadow: 0 8rpx 28rpx rgba(10,132,255,0.14);
}

/* 为气泡内时间/状态预留右侧空间，避免短消息换行抖动 */
.message-wrapper.self .message-content { padding-right: 120rpx; }
.message-wrapper.other .message-content { padding-right: 88rpx; }

/* 气泡内时间与状态（右下角） */
.bubble-meta {
  position: absolute;
  right: 20rpx;
  bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  opacity: 0.75;
}
.bubble-meta { white-space: nowrap; }
.bubble-time {
  font-size: 22rpx;
  color: rgba(255,255,255,0.75);
}
.message-wrapper.other .bubble-time { color: var(--text-secondary); }

.meta-status { font-size: 22rpx; line-height: 1; }
.meta-read { color: #B2E5FF; }
.meta-delivered { color: rgba(255,255,255,0.9); }
.meta-sending { color: var(--text-tertiary); animation: pulse 1.5s ease-in-out infinite; }
.meta-failed { color: #ff6b6b; font-weight: 700; }

/* 强制把自己消息的头像固定在右侧 */
.message-wrapper.self {
  position: relative;
}

.message-wrapper.self .avatar {
  position: absolute;
  right: 16rpx;
  top: 8rpx;
  width: 88rpx;
  height: 88rpx;
}

.message-wrapper.self .message-body {
  margin-right: 120rpx;
}

/* 失败重发行：显示在自己消息气泡下方靠右 */
.resend-row {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 8rpx;
  padding-right: 120rpx; /* 与头像空隙对齐 */
}
.resend-action {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  padding: 8rpx 14rpx;
  border-radius: 999rpx;
  color: #ff6b6b;
  background: rgba(255,107,107,0.1);
  border: 1rpx solid rgba(255,107,107,0.2);
}
.resend-action:active { transform: scale(0.98); background: rgba(255,107,107,0.14); }
.resend-icon { font-size: 22rpx; font-weight: 700; }
.resend-text { font-size: 24rpx; color: #ff7b7b; }

.theme-light .resend-action { color: #c62828; background: rgba(198,40,40,0.08); border-color: rgba(198,40,40,0.2); }
.theme-light .resend-text { color: #d32f2f; }

/* 文本、图片等样式保持，但颜色适配深色 */
.text-content {
  font-size: 32rpx;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.5rpx;
  color: inherit;
}

/* 撤回消息样式 */
.recalled-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-size: 28rpx;
  color: var(--text-tertiary);
  text-align: center;
  padding: 20rpx 30rpx;
  background: transparent;
  border: 1rpx dashed var(--border-color);
  border-radius: var(--radius-medium);
  opacity: 0.7;
}

/* 上传进度条样式 */
.upload-progress {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.upload-progress-bar {
  width: 240rpx;
  height: 8rpx;
  background: rgba(255,255,255,0.1);
  border-radius: 8rpx;
  overflow: hidden;
}
.theme-light .upload-progress-bar {
  background: rgba(0,0,0,0.08);
}
.upload-progress-fill {
  height: 100%;
  background: var(--primary-color);
}
.upload-progress-text {
  font-size: 22rpx;
  color: var(--text-primary);
}

.recalled-icon {
  font-size: 24rpx;
  opacity: 0.8;
}

.recalled-text {
  font-style: italic;
}

.message-content.recalled {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-width: 240rpx;
}

.theme-light .recalled-content {
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.image-content {
  max-width: 420rpx; /* 缩小图片显示宽度 */
  max-height: 360rpx; /* 限制图片高度，避免占满屏 */
  border-radius: var(--radius-medium);
  background: linear-gradient(45deg, #151515, #222);
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
}

.image-content:active {
  transform: scale(0.98);
}

.error-content {
  padding: 20rpx;
  background: rgba(255, 60, 60, 0.08);
  border: 1px solid rgba(255,60,60,0.12);
  border-radius: 12rpx;
  max-width: 400rpx;
}

.error-text { color: #ff6b6b; }
.error-detail { color: #ffb86b; }
.error-original { color: var(--text-secondary); }

/* 文件消息 */
.file-content {
  display: flex;
  align-items: center;
  min-width: 240rpx;
  padding: 20rpx;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-medium);
  backdrop-filter: blur(6rpx);
  border: 1rpx solid rgba(255,255,255,0.03);
  transition: all 0.2s ease;
}

.file-content:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.03);
}

/* 卡片、贴纸等 */
.card-content { background: rgba(255,255,255,0.02); }
.card-name, .file-name { color: var(--text-primary); }
.card-phone, .file-size { color: var(--text-secondary); }

.system-content { background: rgba(255,255,255,0.02); color: var(--text-secondary); }

.video-content { max-width: 420rpx; max-height: 360rpx; border-radius: 12rpx; }
/* 音频、视频、位置等适配 */
.audio-content, .location-content { background: rgba(255,255,255,0.02); border: 1rpx solid rgba(255,255,255,0.03); }
.audio-icon, .file-icon { color: var(--text-secondary); }

@keyframes pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.05)} }

/* Telegram风格的消息状态指示器 */
.message-status { 
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6rpx;
  margin-right: 8rpx;
  font-size: 24rpx;
  line-height: 1;
}

/* 发送中状态 */
.status-sending { 
  color: var(--text-tertiary);
  animation: pulse 1.5s ease-in-out infinite;
}

/* 发送失败状态 */
.status-failed { 
  color: #ff6b6b;
  background: rgba(255,107,107,0.1);
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  font-weight: bold;
}

/* 已送达状态（单勾） */
.status-delivered { 
  color: var(--text-secondary);
  font-size: 28rpx;
  font-weight: 600;
}

/* 已读状态（双勾） */
.status-read { 
  color: var(--primary-color);
  font-size: 28rpx;
  font-weight: 600;
}

/* 等待状态 */
.status-pending { 
  color: var(--text-tertiary);
  font-size: 20rpx;
}

/* 浅色主题下的状态样式 */
.theme-light .status-delivered {
  color: var(--text-secondary);
}

.theme-light .status-read {
  color: var(--primary-color);
}

.theme-light .status-sending,
.theme-light .status-pending {
  color: var(--text-tertiary);
}

.loading-dots .dot { background: var(--text-secondary); }

.load-more-top {
  text-align: center;
  padding: 18rpx 28rpx;
  background: rgba(255,255,255,0.02);
  margin-bottom: 18rpx;
  border-radius: 12rpx;
  margin: 0 16rpx 18rpx 16rpx;
}

.load-more-text { color: var(--text-secondary); font-size: 26rpx; }

/* 输入区域 */
.input-area {
  background: linear-gradient(180deg, rgba(12,12,14,0.98) 0%, rgba(10,10,12,0.98) 100%);
  border-top: 1rpx solid rgba(255,255,255,0.03);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
  max-height: 30vh; /* 限制最大高度为屏幕的30% */
  overflow: hidden;
}

.input-row {
  display: flex;
  align-items: flex-end;
  padding: 20rpx 24rpx;
  min-height: 100rpx;
  max-height: 200rpx;
  width: 100%;
  box-sizing: border-box;
}

.tool-btn {
  width: 80rpx;
  height: 80rpx;
  min-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--radius-medium);
  margin-right: 16rpx;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1rpx solid rgba(255,255,255,0.03);
}

.tool-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.02); }

.text-input-wrapper { 
  flex: 1; 
  margin-right: 16rpx; 
  min-width: 0; /* 确保能够收缩 */
  max-width: calc(100% - 160rpx); /* 为左右按钮预留空间 */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.text-input {
  background: rgba(255,255,255,0.02);
  border: 1rpx solid rgba(255,255,255,0.03);
  border-radius: var(--radius-large);
  padding: 18rpx 24rpx;
  font-size: 32rpx;
  min-height: 44rpx;
  max-height: 120rpx;
  width: 100%;
  color: var(--text-primary);
  transition: all 0.18s ease;
  resize: none;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  vertical-align: top;
}

.text-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06); }

/* 语音输入容器与文本输入保持同样的伸展规则 */
.voice-input-wrapper {
  flex: 1;
  margin-right: 16rpx;
  min-width: 0; /* 允许收缩，避免被按钮挤出 */
  max-width: calc(100% - 160rpx); /* 为左右按钮预留空间，和 text-input-wrapper 保持一致 */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.voice-btn { 
  background: rgba(255,255,255,0.02); 
  color: var(--text-primary); 
  flex-shrink: 0;
  min-height: 76rpx;
  border-radius: var(--radius-medium);
  border: none;
  font-size: 28rpx;
  align-self: flex-end;
  width: 100%; /* 占满容器宽度 */
  box-sizing: border-box;
  padding: 18rpx 24rpx; /* 与文本输入视觉统一 */
}
.voice-btn.recording { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); color: white; }

.send-btn { 
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); 
  color: white; 
  padding: 18rpx 30rpx; 
  border-radius: var(--radius-medium);
  border: none;
  font-size: 28rpx;
  align-self: flex-end;
  margin-bottom: 2rpx;
  flex-shrink: 0;
  min-height: 76rpx;
}

/* 表情面板 */
.emoji-panel {
  background: linear-gradient(180deg, rgba(16,16,18,0.98) 0%, rgba(12,12,14,0.98) 100%);
  border-top: 1rpx solid rgba(255,255,255,0.03);
  padding: 24rpx 20rpx;
  max-height: 400rpx;
  backdrop-filter: blur(12rpx);
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.6);
}

.emoji-scroll {
  height: 100%;
  max-height: 352rpx; /* 400rpx - 48rpx padding */
}

.emoji-list { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: flex-start; 
  gap: 16rpx; 
  padding: 8rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0; /* 为底部安全区留白，避免被遮挡 */
}

.emoji-item { 
  width: 88rpx; 
  height: 88rpx; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 52rpx; 
  border-radius: var(--radius-medium); 
  background: rgba(255,255,255,0.02); 
  transition: all 0.2s ease;
}

.emoji-item:active {
  background: rgba(255,255,255,0.08);
  transform: scale(0.95);
}

/* 表情滚动底部占位，提供安全区滚动空间 */
.emoji-bottom-spacer { height: env(safe-area-inset-bottom); }

/* 更多面板 */
.more-panel-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end; /* panel at bottom */
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2300; /* above input-area (1000) and other floating widgets */
}

.more-panel {
  background: var(--surface-color, #0B0B0D);
  color: var(--text-primary);
  border-radius: 24rpx 24rpx 0 0;
  padding: 12rpx 0 24rpx 0;
  width: 100%;
  max-height: 60vh;
  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.6);
  z-index: 2400; /* ensure panel sits above overlay and any page floats */
}

/* theme-light overrides for panel */
.theme-light .more-panel-overlay { background: rgba(0,0,0,0.35); }
.theme-light .more-panel { background: linear-gradient(180deg, var(--background-color) 0%, #F8F8F8 100%); color: var(--text-primary); box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.08); }
.more-panel-header { display:flex; justify-content:space-between; align-items:center; padding:24rpx 28rpx; border-bottom:1rpx solid rgba(255,255,255,0.03); }
.more-panel-title { font-size:36rpx; font-weight:600; color:var(--text-primary); }
.more-panel-header { position: relative; }
.more-panel-close { width:56rpx; height:56rpx; position:absolute; right:16rpx; top:12rpx; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.12); border-radius:28rpx; font-size:28rpx; color:var(--text-secondary); }
.more-panel-close:active { background: rgba(0,0,0,0.16); transform:scale(0.96); }

/* small drag handle */
.more-panel-handle {
  width: 64rpx;
  height: 8rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 8rpx;
  margin: 8rpx auto 12rpx auto;
}

/* more panel content layout */
.more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx 24rpx;
  padding: 8rpx 20rpx 12rpx 20rpx;
  justify-content: space-around; /* center items evenly */
  align-items: center;
}

.more-item {
  min-width: 84rpx;
  width: 22%;
  max-width: 120rpx;
  height: 96rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  border-radius: 16rpx;
  box-shadow: var(--shadow-light);
  color: var(--text-primary);
  text-align: center;
  padding: 6rpx;
}

.more-item:active { transform: scale(0.96); background: rgba(255,255,255,0.03); }

.more-icon { font-size: 44rpx; margin-bottom: 6rpx; }
.more-text { font-size: 22rpx; color: var(--text-secondary); line-height: 1.1; }

/* ensure panel respects safe-area at bottom */
.more-panel { padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx); }

/* 录音提示 */
.recording-tips { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: rgba(0,0,0,0.85); color:var(--text-primary); padding:28rpx 36rpx; border-radius:12rpx; font-size:30rpx; z-index:2000; }

/* 加载 */
.loading-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2000; background: rgba(0,0,0,0.75); border-radius:16rpx; padding:28rpx; box-shadow:0 12rpx 36rpx rgba(0,0,0,0.7); backdrop-filter: blur(12rpx); }
.loading-spinner { width:56rpx; height:56rpx; border:4rpx solid rgba(255,255,255,0.08); border-top:4rpx solid var(--primary-color); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12rpx; }
.loading-text { font-size:26rpx; color:var(--text-secondary); font-weight:500; }

@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* 滚动到底部按钮 */

/* === 主题切换径向遮罩动画 === */
.theme-overlay {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 3000;
}
.theme-overlay-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--background-color);
  transform: scale(0.001);
  opacity: 0;
}
.theme-overlay-circle.play {
  animation: themeExpand 380ms ease forwards;
}
@keyframes themeExpand {
  0% { transform: scale(0.001); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.scroll-to-bottom-btn { position:fixed; right:32rpx; bottom:240rpx; width:88rpx; height:88rpx; background: rgba(255,255,255,0.06); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; transform:translateY(20rpx) scale(0.8); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(10rpx); box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.6); }
.scroll-to-bottom-btn.show { opacity:1; transform:translateY(0) scale(1); }
.scroll-to-bottom-btn:active { transform: translateY(0) scale(0.95); background: rgba(255,255,255,0.08); }
.btn-icon { color: var(--text-primary); font-size:36rpx; font-weight:bold; text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.6); }

/* 其他小节样式保持原逻辑，颜色使用变量或深色背景 */

/* ===== 兼容性修正：避免底部白色撕裂条 ===== */
/* 将容器改为 column flex，使 scroll-view 能正确填满剩余高度（避免 calc(100vh - px) 的子像素或安全区差异） */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fixed viewport height so absolute child heights compute */
  position: relative; /* make absolute children position relative to this container */
  box-sizing: border-box;
}

/* message-list 使用 flex 布局，自行保留底部内边距以避开固定的 input-area */
.message-list {
  /* Use flex so scroll-view fills remaining space and supports touch scrolling */
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  padding: 20rpx 0 240rpx 0; /* 保留底部空间给输入区 */
  margin: 0;
  background: transparent;
  box-sizing: border-box;
}

/* 当表情面板展开时，给消息列表增加额外底部留白，避免被表情面板遮挡 */
.with-emoji .message-list {
  /* 输入区保留 40rpx + 表情面板大约 400rpx + 安全区 */
  padding-bottom: calc(40rpx + 400rpx + env(safe-area-inset-bottom));
}

/* 确保输入区域视觉上与页面背景融合，避免产生可见缝隙 */
.input-area {
  background: linear-gradient(180deg, rgba(12,12,14,0.98) 0%, rgba(10,10,12,0.98) 100%);
  border-top: 1rpx solid rgba(255,255,255,0.03);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
  background-clip: padding-box;
}