/* 🎨 现代化聊天页面样式 - 深色主题 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;
  /* 确保page占满可用高度 */
  height: 100%;
  background-color: var(--background-color);

}

/* 固定深色主题容器样式 */
.chat-container.theme-dark {
  box-sizing: border-box;
  /* border: 10px solid red; */
  background: linear-gradient(130deg, #111623,#054B58);
  color: var(--text-primary);
  height: 100vh;
}

/* 简化：去除主题切换过渡 */
.chat-container { transition: background 0s, color 0s; }

/* 消息气泡、输入区等关键区域同步过渡，避免突变 */
.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;
}

/* 现代化导航栏（chat.wxml 未使用，相关样式移除；保留通用图标尺寸变量） */
.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;
  /* when used as <image>, size via width/height; when used as <text>, below font props are ignored */
  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-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%;
  /* border: 1px solid red; */
}

/* 对方消息：头像在左 */
.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 32rpx 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; */
  /* height: 200rpx; */
  max-width: 500rpx;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  /* border: 1px solid red; */
}
.message-line{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  /* height: 90rpx; */
  /* border: 1px solid rgb(12, 235, 98); */
}

.message-wrapper.self .message-line {
  justify-content: flex-end;
}

.message-wrapper.other .message-line {
  justify-content: flex-start !important;
}

/* 图片消息的 message-line 需要允许内容自适应 */
.message-line .message-content.image {
  width: auto;
  max-width: 420rpx;
  min-width: 200rpx;
  flex-shrink: 0;
  align-self: flex-start;
}

.message-line .message-content.video {
  width: auto;
  max-width: 400rpx;
  min-width: 160rpx;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  align-self: flex-start;
}

/* 图片消息外层容器 - 确保有正确的布局 */
.message-content.image > view {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
.message-wrapper.other .message-body {
  align-items: flex-start;
  margin-left: 0rpx;
}

.message-wrapper.self .message-body {
  align-items: flex-end;
  margin-right: 20rpx;
}

/* 发送者名称（群聊） */
.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;
  /* 让气泡宽度跟随容器铺满（在 message-body 容器内） */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  /* line-height: 1.6; */
  font-size: 32rpx;
  font-weight: 400;
  box-shadow: none;
  backdrop-filter: blur(6rpx);
  transition: all 0.15s ease;
  color: black;

}
.self .message-content:not(.image):not(.video)::after{
  content: "";
  position: absolute;
  top: 20rpx;
  left: 100%;
  margin-left: -10rpx;
  border: 25rpx solid transparent;
  border-left: 15px solid #4DD1A1;
}
.other .message-content:not(.image):not(.video)::before{
  content: "";
  top: 20rpx;
  position: absolute;
  right: 100%;
  margin-right: -10rpx;
  border: 25rpx solid transparent;
  border-right: 15px solid #D9D9D9;
}

/* 对方消息气泡（深色） */
.message-wrapper.other .message-content {
  background: #D9D9D9;
  /* 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:not(.image):not(.video):hover {
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.45);
}

/* 对方的图片消息：无气泡 */
.message-wrapper.other .message-content.image {
  background: transparent;
  padding: 0;
  width: auto;
  max-width: 420rpx;
  margin: 0;
  align-self: flex-start;
}

.message-wrapper.other .message-content.image:hover {
  box-shadow: none;
}

/* 对方的视频消息：无气泡 */
.message-wrapper.other .message-content.video {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  border-radius: 0;
  backdrop-filter: none;
  width: auto;
  max-width: 420rpx;
  align-self: flex-start;
}

.message-wrapper.other .message-content.video:hover {
  box-shadow: none;
}

/* 我的消息气泡（偏蓝） */
.message-wrapper.self .message-content {
  /* background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); */
  background-color: #4DD1A1;
  /* 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:not(.image):not(.video):hover {
  box-shadow: 0 8rpx 28rpx rgba(10,132,255,0.14);
}

/* 我的图片消息：无气泡 */
.message-wrapper.self .message-content.image {
  background-color: transparent;
  box-shadow: none;
  border-top-right-radius: 0;
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  border-radius: 0;
  backdrop-filter: none;
  width: auto;
  max-width: 420rpx;
  align-self: flex-end;
}

.message-wrapper.self .message-content.image:hover {
  box-shadow: none;
}

/* 我的视频消息：无气泡 */
.message-wrapper.self .message-content.video {
  background-color: transparent;
  box-shadow: none;
  border-top-right-radius: 0;
  padding: 0;
  margin-right: 0;
  position: relative;
  display: block;
  border-radius: 0;
  backdrop-filter: none;
  width: auto;
  max-width: 420rpx;
  align-self: flex-end;
}

.message-wrapper.self .message-content.video:hover {
  box-shadow: none;
}

/* 为气泡内时间/状态预留右侧空间（收窄，避免出现一列明显空白） */
.message-wrapper.self .message-content:not(.image):not(.video) { padding-right: 70rpx; }
.message-wrapper.other .message-content:not(.image):not(.video) { padding-right: 70rpx; }

/* 语音消息在气泡中的宽度约束，确保不会超出屏幕 */
.message-content.voice, .message-content.audio {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.message-content.voice .voice-message-container,
.message-content.audio .voice-message-container {
  width: 100%;
  max-width: 100%;
}

/* 气泡内时间与状态（右下角） */
.bubble-meta {
  position: absolute;
  right: 20rpx;
  bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  opacity: 0.75;
}
.bubble-meta { white-space: nowrap; }

/* 图片和视频消息不显示时间/状态 */
.message-content.image .bubble-meta,
.message-content.video .bubble-meta {
  display: none;
}

.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; }

/* 失败重发行：显示在自己消息气泡下方靠右 */
.resend-row {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 8rpx;
}
.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; }


/* 文本、图片等样式保持，但颜色适配深色 */
.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;
}
.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 {
  width: 420rpx;
  max-width: 420rpx;
  height: auto;
  display: block;
  border-radius: 16rpx;
}

.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 { 
  width: 100%;
  height: auto;
  max-width: 420rpx; 
  max-height: 820rpx; 
  min-width: 160rpx;
  min-height: 360rpx;
  border-radius: 16rpx;
  background: transparent;
  box-shadow: none;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* 音频、视频、位置等适配 */
.location-content { background: rgba(255,255,255,0.02); border: 1rpx solid rgba(255,255,255,0.03); }
/* icon images inside message content */
.location-icon, .file-icon { width: 36rpx; height: 36rpx; margin-right: 12rpx; display: inline-block; }

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

.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; }

/* 输入区域 - 使用 fixed 定位固定在底部 */
.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;
  transition: bottom 0.3s ease;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
  /* max-height: 30vh; */
  overflow: hidden;
}

.input-row {
  display: flex;
  align-items: flex-end;
  padding: 16rpx 24rpx;
  min-height: 80rpx;
  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: 16rpx 24rpx;
  font-size: 32rpx;
  min-height: 48rpx;
  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: 48rpx;
  border-radius: var(--radius-large);
  border: 1rpx solid rgba(255,255,255,0.03);
  font-size: 28rpx;
  align-self: flex-end;
  width: 100%; /* 占满容器宽度 */
  box-sizing: border-box;
  padding: 16rpx 24rpx; /* 与文本输入视觉统一 */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
.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: 16rpx 28rpx; 
  border-radius: var(--radius-large);
  border: none;
  font-size: 28rpx;
  align-self: flex-end;
  flex-shrink: 0;
  min-height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

/* 表情面板 */
.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); }

/* 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 { width: 64rpx; height: 64rpx; margin-bottom: 6rpx; display: block; }
.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)} }

/* 滚动到底部按钮 */

/* 移除主题切换遮罩动画相关样式 */
.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: 100%; /* 改为 100% 以适应页面内容区域，而非整个视口 */
  position: relative; /* make absolute children position relative to this container */
  box-sizing: border-box;
}

/* message-list 使用 fixed 定位固定在视口，不受键盘影响 */
.message-list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px; /* 默认值，会被动态 style 覆盖 */
  width: 100%;
  overflow: hidden;
  padding: 0 0 0 0; /* 增加底部内边距 */
  margin: 0;
  background: transparent;
  box-sizing: border-box;
  z-index: 1;
  transition: bottom 0.3s ease; /* 平滑过渡 */
}

/* 输入区按钮图标基类（与 wxml 中动态类匹配） */
.icon-emoji, .icon-mic, .icon-keyboard {
  width: 48rpx;
  height: 48rpx;
  display: block;
}

/* ensure the 'more' tool icon matches size */
.tool-btn .icon-more { width: 48rpx; height: 48rpx; display: block; }

/* inline icon inside voice button label */
.inline-icon { width: 32rpx; height: 32rpx; margin-right: 8rpx; vertical-align: middle; display: inline-block; }