/**
 * ============================================================
 *  line.css — Line 聊天 App 样式表
 * ============================================================
 *  命名空间：所有类名以 .chat-app- 开头
 *  布局：Flexbox 垂直三段式（Header / Content / BottomBar）
 * ============================================================
 */

/* ——————————————————————————————————————————————
 *  z-index 层级系统
 * —————————————————————————————————————————————— */
:root {
  --z-index-backdrop: 100;      /* 背景遮罩层 */
  --z-index-bubble-menu: 200;   /* 气泡菜单 */
  --z-index-modal: 10002;       /* 地理信息模态框 - 提升到堆叠模态框之上 */
  --z-index-stacked-modal: 10001; /* 堆叠模态框 */
  --z-index-toast: 9999;        /* 提示信息 */
}

/* ——————————————————————————————————————————————
 *  根容器：占满 viewport，纯白背景，垂直 Flex
 * —————————————————————————————————————————————— */

.chat-app-root {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  color: #000000;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

/* ——————————————————————————————————————————————
 *  顶部功能区 Header
 * —————————————————————————————————————————————— */

.chat-app-header {
  flex-shrink: 0;
  background: #ffffff;
  padding-top: var(--safe-area-top);
  padding-bottom: 0;
}

/* 第一行：Title Bar */
.chat-app-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.chat-app-back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #000000;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-app-back-btn svg {
  width: 12px;
  height: 20px;
  flex-shrink: 0;
}

.chat-app-title-center {
  position: absolute;
  left: 60px; /* 靠左对齐，与返回键保持适当距离 */
  transform: none; /* 移除居中变换 */
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.2px;
}

.chat-app-title-center .chat-app-dropdown-arrow {
  font-size: 10px;
  color: #8e8e93;
  margin-top: 1px;
}

.chat-app-title-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chat-app-title-actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #000000;
}

.chat-app-title-actions button svg {
  width: 22px;
  height: 22px;
}

/* 收藏按钮样式（功能待开发） */
#btn-favorites {
  color: #8e8e93; /* 灰色表示禁用状态 */
  cursor: not-allowed; /* 禁用鼠标指针 */
  opacity: 0.6; /* 降低透明度表示禁用 */
}

#btn-favorites:active {
  transform: none; /* 禁用点击效果 */
}

/* 第二行：Search Bar */
.chat-app-search-bar {
  padding: 8px 16px;
}

.chat-app-search-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: #f2f2f7;
  border-radius: 10px;
  font-size: 15px;
  color: #8e8e93;
  cursor: pointer;
}

.chat-app-search-inner svg {
  width: 16px;
  height: 16px;
  color: #8e8e93;
}

/* 第三行：Sub-Tabs */
.chat-app-sub-tabs {
  display: flex;
  align-items: center;
  padding: 6px 16px 0;
  gap: 0;
  border-bottom: 0.5px solid #e5e5ea;
}

.chat-app-sub-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

.chat-app-sub-tab.active {
  color: #000000;
  font-weight: 600;
}

.chat-app-sub-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2.5px;
  background: #000000;
  border-radius: 2px;
}

/* ——————————————————————————————————————————————
 *  中间列表区：自适应高度 + 垂直滚动
 * —————————————————————————————————————————————— */

#chat-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* 隐藏滚动条 */
#chat-list-container::-webkit-scrollbar {
  display: none;
}

#chat-list-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ——————————————————————————————————————————————
 *  底部导航条 Bottom Tab Bar
 * —————————————————————————————————————————————— */

.chat-app-bottom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: var(--total-bottom-bar-height) !important;
  padding-top: 6px;
  padding-bottom: var(--safe-area-bottom) !important;
  background: #ffffff;
  border-top: 0.5px solid #d1d1d6;
}

.chat-app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 56px;
}

.chat-app-tab svg {
  width: 24px;
  height: 24px;
  color: #8e8e93;
}

.chat-app-tab span {
  font-size: 10px;
  color: #8e8e93;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* 选中态 */
.chat-app-tab.active svg {
  color: #000000;
}

.chat-app-tab.active span {
  color: #000000;
  font-weight: 600;
}

/* ——————————————————————————————————————————————
 *  设置页面
 * —————————————————————————————————————————————— */

/* 全局背景色：带一点点冷灰蓝，极其高级 */
#settings-container {
    background: #eef2f6;
    padding: 30px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#settings-container::-webkit-scrollbar {
    display: none;
}

#settings-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 悬浮卡片魔法 */
.settings-card {
    /* 微微的渐变底色 */
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    /* 极其圆润的倒角 */
    border-radius: 32px;
    /* 高光描边（玻璃质感核心） */
    border: 1px solid rgba(255, 255, 255, 0.9);
    /* 多层弥散阴影 + 顶部微微的内发光 */
    box-shadow:
        0 20px 40px -10px rgba(180, 195, 215, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    padding: 28px 24px;
    margin-bottom: 24px;
}

/* 头像卡片内部微调 */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 头像立体感 */
.avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e2e8f0;
    margin-bottom: 16px;
    /* 给头像加一圈白边和浮雕阴影 */
    border: 4px solid #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.temp-avatar { width: 100%; height: 100%; border-radius: 50%; }

/* 字体的高级感重构 */
.user-name {
    color: #1e293b; /* 深石板灰，比纯黑高级 */
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px; /* 字距微缩，极其现代 */
    margin: 0 0 4px 0;
}
.user-id {
    color: #94a3b8; /* 浅银灰 */
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* 列表项布局 */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9; /* 极浅的分割线 */
    cursor: pointer;
    transition: all 0.2s ease;
}
.menu-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 左侧图标和文字包裹 */
.menu-left {
    display: flex;
    align-items: center;
    gap: 16px; /* 文字和图标的呼吸间距 */
}

/* 左侧彩色小方块图标 */
.icon-box {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

/* 列表文字 */
.menu-left span {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}

/* 右侧倾斜高级箭头 */
.menu-arrow {
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 600;
}

/* 点击反馈 */
.menu-item:active {
    opacity: 0.6;
    transform: scale(0.98);
}

/* ——————————————————————————————————————————————
 *  网络设置子页面（右侧滑入）
 * —————————————————————————————————————————————— */

.network-settings-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #eef2f6 !important;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.network-settings-page.active {
  transform: translateX(0);
}

/* 子页面 Header */
.network-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #eef2f6;
  border-bottom: 0.5px solid #d1d1d6;
}

.network-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #007aff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.network-back-btn svg {
  color: #007aff;
}

.network-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.network-header-spacer {
  width: 60px;
}

/* 表单卡片容器 - 核心玻璃质感 */
.settings-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    border-radius: 32px; /* 极大圆角 */
    margin: 20px; /* 这里的 margin 替代了 padding，让卡片悬浮在页面中间 */
    padding: 32px 24px;
    /* 微光描边与多层柔和阴影 */
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 20px 40px -10px rgba(180, 195, 215, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-form-card::-webkit-scrollbar {
    display: none;
}

/* 表单组间距 */
.form-group {
    margin-bottom: 24px;
}

/* 标签与标题 - 高级深色字 */
.form-group label, .slider-label {
    color: #1e293b; /* 深石板灰 */
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 辅助文字 - 浅银灰 */
.form-helper {
    color: #94a3b8;
    font-size: 13px;
    margin-top: 8px;
}

/* 输入框与下拉框 - 沉浸式凹槽感 */
.form-input, #select-model {
    background-color: #f1f5f9; /* 比卡片背景稍深，形成凹槽感 */
    border: 2px solid transparent; /* 预留边框位置用于聚焦 */
    border-radius: 16px;
    padding: 16px;
    font-size: 16px;
    color: #334155;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
/* 输入框聚焦态 - 高亮蓝框 */
.form-input:focus, #select-model:focus {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* 按钮通用高级样式 */
.premium-btn {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    border: none;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    /* 按钮的柔和阴影 */
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
}
.premium-btn:active { transform: scale(0.98); box-shadow: none; }

/* 次要按钮 (拉取模型) - 浅色风格 */
.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

/* 主要按钮 (测试) - 蓝色渐变 */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 10px 25px -8px rgba(59, 130, 246, 0.5);
}

/* 成功按钮 (保存) - 绿色渐变 */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 10px 25px -8px rgba(34, 197, 94, 0.5);
    margin-bottom: 0; /* 最后一个按钮去掉底部边距 */
}

/* 滑动条样式 - 完全重做 */
.network-range {
    width: 100%;
    height: 8px; /* 增加高度使滑动条更明显 */
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    margin: 20px 0; /* 增加上下边距 */
    position: relative; /* 为定位做准备 */
}

/* Webkit 滑动条滑块 - 完全重做 */
.network-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; /* 稍微减小滑块尺寸 */
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #3b82f6; /* 增加边框宽度 */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    margin-top: -6px; /* 往下移动2px，从-8px调整为-6px */
}

/* Firefox 滑动条滑块 */
.network-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    border: none; /* Firefox 不需要这个属性 */
}

/* 滑动条标签 */
.network-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #94a3b8;
}

/* 温度显示值 - 添加毛玻璃背景 */
.network-temp-value {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #3b82f6;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-left: auto; /* 使数字区块靠右对齐 */
}

/* ——————————————————————————————————————————————
 *  选择联系人模态框样式
 * —————————————————————————————————————————————— */

#modal-select-contact {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10001;
  background: #f2f2f6;
  border-radius: 15px 15px 0 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.25);
  will-change: transform;
}

#modal-select-contact.modal-active {
  transform: translateY(5%);
}

/* 选择联系人头部 */
.select-contact-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: #f2f2f6;
  border-bottom: 0.5px solid #e5e5ea;
}

.select-contact-cancel {
  background: none;
  border: none;
  color: #007aff;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.select-contact-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.select-contact-placeholder {
  width: 60px;
}

/* 选择联系人内容区 */
.select-contact-body {
  flex: 1;
  background: #ffffff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.select-contact-body::-webkit-scrollbar {
  display: none;
}

.select-contact-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 联系人列表 */
.select-contact-list {
  padding: 8px 0;
}

.select-contact-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
  position: relative;
}

.select-contact-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.select-contact-item:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.select-contact-item.disabled {
  opacity: 0.5;
  cursor: default;
}

.select-contact-item.disabled:hover {
  background-color: transparent;
}

.select-contact-item.disabled:active {
  background-color: transparent;
}

/* 联系人头像 */
.select-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e5e5ea;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.select-contact-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select-contact-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* 联系人信息 */
.select-contact-info {
  flex: 1;
  min-width: 0;
}

.select-contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-contact-desc {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 联系人状态 */
.select-contact-status {
  flex-shrink: 0;
  margin-left: 8px;
}

.select-contact-added {
  font-size: 13px;
  color: #8e8e93;
  font-weight: 500;
}

/* 空状态 */
.select-contact-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}

.select-contact-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.select-contact-empty-text {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.select-contact-empty-hint {
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.4;
}

/* ——————————————————————————————————————————————
 *  聊天列表样式
 * —————————————————————————————————————————————— */

/* 聊天列表项 */
.chat-list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
  position: relative;
  min-height: 70px;
  border-bottom: 0.5px solid #e5e5ea;
}

.chat-list-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-list-item:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 分割线 */
.chat-list-item + .chat-list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 68px;
  right: 0;
  height: 0.5px;
  background: #e5e5ea;
}

/* 聊天列表头像 */
.chat-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e5e5ea;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.chat-list-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-list-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* 聊天列表内容 */
.chat-list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.chat-list-name {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.chat-list-time {
  font-size: 10px;
  color: #c7c7cc;
  flex-shrink: 0;
  margin-left: 8px;
  font-weight: 300;
}

.chat-list-message {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 300;
  line-height: 1.2;
}

/* ——————————————————————————————————————————————
 *  iOS 风格双层结构聊天列表
 * —————————————————————————————————————————————— */

/* 聊天项容器 */
.chat-item-wrapper {
  position: relative;
  height: 72px;
  min-height: 70px; /* 确保有最小高度 */
  overflow: hidden;
  background: #ffffff;
  border-bottom: 0.5px solid #e5e5ea;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.chat-item-wrapper:last-child {
  border-bottom: none;
}

/* 下层动作区 */
.chat-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: #ff3b30;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.chat-delete-btn {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.chat-delete-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.chat-delete-btn:active {
  background: rgba(0, 0, 0, 0.2);
}

.chat-delete-icon {
  font-size: 22px;
  margin-bottom: 2px;
  line-height: 1;
}

.chat-delete-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* 上层内容区 */
.chat-item-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* 滑开状态 */
.chat-item-wrapper.swiped-left .chat-item-content {
  transform: translateX(-80px);
}

/* 滑动时的视觉反馈 */
.chat-item-wrapper.swiped-left {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 优化触摸体验 */
@media (hover: none) {
  .chat-item-content:hover {
    background: #ffffff;
  }
  
  .chat-delete-btn:hover {
    background: none;
  }
}

/* 兼容旧样式 - 隐藏单层结构，使用双层结构 */
.chat-list-item {
  display: none; /* 隐藏旧的单层结构，使用双层结构 */
}

/* 确保双层结构正确显示 */
.chat-item-wrapper {
  display: block; /* 确保双层结构容器可见 */
}

.chat-list-delete-btn {
  display: none; /* 隐藏旧的删除按钮 */
}

.chat-list-content-wrapper {
  display: none; /* 隐藏旧的内容包装器 */
}

/* 聊天列表空状态 */
.chat-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}

.chat-list-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.chat-list-empty-text {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.chat-list-empty-hint {
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.4;
}

/* 聊天列表错误状态 */
.chat-list-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
  color: #8e8e93;
  font-size: 16px;
}

/* 下拉选择框 */
.network-select-wrap {
  position: relative;
}

.network-select {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px;
  font-size: 16px;
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.network-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #8e8e93;
  pointer-events: none;
}

/* 滑动条 */
.network-range {
  width: 100%;
  height: 8px; /* 增加高度以便更精确控制 */
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #007aff 0%, #007aff 40%, #e5e5ea 40%, #e5e5ea 100%);
  border-radius: 4px;
  outline: none;
  margin: 12px 0 8px; /* 增加上下边距 */
  cursor: pointer;
  position: relative;
  z-index: 2; /* 确保滑动条在刻度线上方 */
}

/* 动态背景 - 通过JavaScript更新，支持0.01精度 */
.network-range[data-progress="0"] { background: linear-gradient(to right, #007aff 0%, #e5e5ea 0%); }
.network-range[data-progress="5"] { background: linear-gradient(to right, #007aff 0%, #007aff 5%, #e5e5ea 5%, #e5e5ea 100%); }
.network-range[data-progress="10"] { background: linear-gradient(to right, #007aff 0%, #007aff 10%, #e5e5ea 10%, #e5e5ea 100%); }
.network-range[data-progress="15"] { background: linear-gradient(to right, #007aff 0%, #007aff 15%, #e5e5ea 15%, #e5e5ea 100%); }
.network-range[data-progress="20"] { background: linear-gradient(to right, #007aff 0%, #007aff 20%, #e5e5ea 20%, #e5e5ea 100%); }
.network-range[data-progress="25"] { background: linear-gradient(to right, #007aff 0%, #007aff 25%, #e5e5ea 25%, #e5e5ea 100%); }
.network-range[data-progress="30"] { background: linear-gradient(to right, #007aff 0%, #007aff 30%, #e5e5ea 30%, #e5e5ea 100%); }
.network-range[data-progress="35"] { background: linear-gradient(to right, #007aff 0%, #007aff 35%, #e5e5ea 35%, #e5e5ea 100%); }
.network-range[data-progress="40"] { background: linear-gradient(to right, #007aff 0%, #007aff 40%, #e5e5ea 40%, #e5e5ea 100%); }
.network-range[data-progress="45"] { background: linear-gradient(to right, #007aff 0%, #007aff 45%, #e5e5ea 45%, #e5e5ea 100%); }
.network-range[data-progress="50"] { background: linear-gradient(to right, #007aff 0%, #007aff 50%, #e5e5ea 50%, #e5e5ea 100%); }
.network-range[data-progress="55"] { background: linear-gradient(to right, #007aff 0%, #007aff 55%, #e5e5ea 55%, #e5e5ea 100%); }
.network-range[data-progress="60"] { background: linear-gradient(to right, #007aff 0%, #007aff 60%, #e5e5ea 60%, #e5e5ea 100%); }
.network-range[data-progress="65"] { background: linear-gradient(to right, #007aff 0%, #007aff 65%, #e5e5ea 65%, #e5e5ea 100%); }
.network-range[data-progress="70"] { background: linear-gradient(to right, #007aff 0%, #007aff 70%, #e5e5ea 70%, #e5e5ea 100%); }
.network-range[data-progress="75"] { background: linear-gradient(to right, #007aff 0%, #007aff 75%, #e5e5ea 75%, #e5e5ea 100%); }
.network-range[data-progress="80"] { background: linear-gradient(to right, #007aff 0%, #007aff 80%, #e5e5ea 80%, #e5e5ea 100%); }
.network-range[data-progress="85"] { background: linear-gradient(to right, #007aff 0%, #007aff 85%, #e5e5ea 85%, #e5e5ea 100%); }
.network-range[data-progress="90"] { background: linear-gradient(to right, #007aff 0%, #007aff 90%, #e5e5ea 90%, #e5e5ea 100%); }
.network-range[data-progress="95"] { background: linear-gradient(to right, #007aff 0%, #007aff 95%, #e5e5ea 95%, #e5e5ea 100%); }
.network-range[data-progress="100"] { background: linear-gradient(to right, #007aff 0%, #007aff 100%, #e5e5ea 100%, #e5e5ea 100%); }

.network-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* 稍微减小以便更精确控制 */
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.network-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.network-range::-webkit-slider-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.network-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.network-range::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.network-range::-moz-range-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.network-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8e8e93;
  padding: 0 2px;
  position: relative;
}

/* 添加更精细的刻度线 - 移到滑动条后面，避免穿模 */
.network-range-labels::after {
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    #c7c7cc 0%, #c7c7cc 20%,
    transparent 20%, transparent 40%,
    #c7c7cc 40%, #c7c7cc 60%,
    transparent 60%, transparent 80%,
    #c7c7cc 80%, #c7c7cc 100%
  );
  z-index: 1;
  pointer-events: none;
}

.network-temp-value {
  font-size: 15px;
  font-weight: 700;
  color: #007aff;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

.network-temp-value:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.02);
}

.network-temp-value:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

/* 温度输入框样式 */
.network-temp-input {
  font-size: 15px;
  font-weight: 700;
  color: #007aff;
  width: 60px;
  text-align: center;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
  outline: none;
  font-variant-numeric: tabular-nums;
}

.network-temp-input:focus {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5);
}

/* 按钮 */
.network-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.1s ease;
  margin-bottom: 16px;
}

.network-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.network-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.network-btn-secondary {
  background: #ffffff;
  color: #007aff;
}

.network-btn-primary {
  background: #007aff;
  color: #ffffff;
}

.network-btn-save {
  background: #34c759;
  color: #ffffff;
}

.network-btn-icon {
  font-size: 18px;
  display: inline-block;
}

.network-btn-icon.spin {
  animation: spin 0.8s linear infinite;
}

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

/* ——————————————————————————————————————————————
 *  气泡菜单（+ 号下拉）
 * —————————————————————————————————————————————— */

.bubble-menu {
  position: absolute;
  top: 44px;
  right: 12px;
  z-index: var(--z-index-bubble-menu);
  min-width: 160px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.08);
  padding: 6px 0;
  opacity: 0;
  transform: scale(0.7) translateY(-8px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.32,0.72,0,1),
              transform 0.2s cubic-bezier(0.32,0.72,0,1);
}

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

.bubble-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 15px;
  color: #000000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.bubble-menu-item:active {
  background: #f2f2f7;
}

.bubble-menu-item + .bubble-menu-item {
  border-top: 0.5px solid #e5e5ea;
}

.bubble-menu-item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.bubble-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-backdrop);
  display: none;
}

.bubble-menu-backdrop.active {
  display: block;
}

/* ——————————————————————————————————————————————
 *  iOS 层叠模态框 (Stacked Modal)
 * —————————————————————————————————————————————— */

/* 主视图被推后的效果 */
#app-viewport.view-pushed-back {
  transform: scale(0.93) translateY(-10px);
  border-radius: 15px;
  filter: brightness(0.7);
  transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  z-index: 9999;
}

/* 确保模态框关闭后主视图立即恢复 */
#app-viewport:not(.view-pushed-back) {
  transform: none;
  filter: none;
  border-radius: 0;
}

/* 确保模态框关闭后主视图立即恢复 */
#app-viewport:not(.view-pushed-back) {
  transform: none;
  filter: none;
  border-radius: 0;
}

/* 模态框容器 */
#stacked-modal-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10001;
  background: #f2f2f6;
  border-radius: 15px 15px 0 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.25);
  will-change: transform;
}

#stacked-modal-container.modal-active {
  transform: translateY(5%);
}

/* 模态框 Header */
.stacked-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: #f2f2f6;
  border-bottom: 0.5px solid #d1d1d6;
  position: relative;
}

.stacked-modal-cancel {
  background: none;
  border: none;
  font-size: 16px;
  color: #007aff;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-weight: 400;
}

.stacked-modal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.stacked-modal-save {
  background: none;
  border: none;
  font-size: 16px;
  color: #007aff;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-weight: 600;
}

.stacked-modal-save:disabled {
  color: #c7c7cc;
  cursor: not-allowed;
}

/* 模态框 Body（可滚动） */
.stacked-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0 60px;
}

.stacked-modal-body::-webkit-scrollbar {
  display: none;
}

/* 头像上传区 */
.stacked-modal-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.stacked-modal-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.stacked-modal-avatar:active {
  transform: scale(0.95);
}

.stacked-modal-avatar svg {
  width: 96px;
  height: 96px;
}

.stacked-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stacked-modal-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stacked-modal-avatar:hover .stacked-modal-avatar-overlay,
.stacked-modal-avatar:active .stacked-modal-avatar-overlay {
  opacity: 1;
}

.stacked-modal-avatar-hint {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 8px;
}

/* 表单组 (iOS Grouped Style) */
.stacked-form-group {
  margin: 0 16px 20px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.stacked-form-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 46px;
  position: relative;
}

.stacked-form-item + .stacked-form-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.5px;
  background: #e5e5ea;
}

.stacked-form-item-textarea {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px;
}

.stacked-form-label {
  font-size: 15px;
  color: #000000;
  font-weight: 400;
  min-width: 90px;
  flex-shrink: 0;
}

.stacked-form-item-textarea .stacked-form-label {
  margin-bottom: 8px;
}

.stacked-form-input {
  flex: 1;
  height: 46px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.stacked-form-input::placeholder {
  color: #c7c7cc;
}

.stacked-form-select-wrap {
  flex: 1;
  position: relative;
}

.stacked-form-select {
  width: 100%;
  height: 46px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: right;
  direction: rtl;
  padding-right: 18px;
}

.stacked-form-select-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #c7c7cc;
  pointer-events: none;
  font-weight: 300;
}

.stacked-form-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.stacked-form-textarea::placeholder {
  color: #c7c7cc;
}

/* ——————————————————————————————————————————————
 *  设置页面头像上传（可点击）
 * —————————————————————————————————————————————— */

.settings-avatar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ——————————————————————————————————————————————
 *  我的资料（面具管理）页面
 * —————————————————————————————————————————————— */

.profile-add-btn {
  background: none;
  border: none;
  color: #007aff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.profile-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.profile-section-title {
  font-size: 13px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
  margin-bottom: 8px;
  margin-top: 20px;
}

.profile-section-title:first-child,
.profile-active-section .profile-section-title {
  margin-top: 0;
}

.profile-active-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 8px;
}

.profile-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.profile-card-info {
  flex: 1;
  min-width: 0;
}

.profile-card-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.profile-card-desc {
  font-size: 13px;
  color: #8e8e93;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-badge {
  font-size: 12px;
  color: #fff;
  background: #34c759;
  border-radius: 10px;
  padding: 3px 10px;
  flex-shrink: 0;
  font-weight: 500;
}

/* 面具列表 */
.profile-mask-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e5e5ea;
  border-radius: 14px;
  overflow: hidden;
}

.profile-mask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  gap: 10px;
}

.profile-mask-item.active {
  background: #f0f8ff;
}

.profile-mask-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.profile-mask-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.profile-mask-item-info {
  flex: 1;
  min-width: 0;
}

.profile-mask-item-name {
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

.profile-mask-item-desc {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-mask-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-mask-badge {
  font-size: 11px;
  color: #34c759;
  font-weight: 600;
}

.profile-mask-use-btn,
.profile-mask-edit-btn {
  background: none;
  border: 1px solid #007aff;
  color: #007aff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-mask-use-btn:active,
.profile-mask-edit-btn:active {
  background: #007aff;
  color: #fff;
}

/* 面具编辑页 textarea */
.mask-edit-textarea {
  height: auto !important;
  min-height: 80px;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px !important;
}

/* 面具编辑页第三层滑入（覆盖在 profile-page 之上） */
.mask-edit-page {
  z-index: 12;
}

/* 删除按钮样式 */
.network-btn-danger {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  background: #ff3b30;
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

.network-btn-danger:active {
  opacity: 0.7;
}

/* ============================================================
 *  聊天对话页面（LINE 风格）
 * ============================================================ */

/* 聊天页面根容器 — 右侧滑入，覆盖整个 App */
.chat-room-page {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #92aed8;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.chat-room-page.active {
  transform: translateX(0);
}

/* ——— 聊天页顶部导航栏 ——— */
.chat-room-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(72px + var(--safe-area-top)) !important;
  padding-top: var(--safe-area-top) !important;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
  background: #92aed8;
  position: relative;
  z-index: 2;
}

/* 顶部行：角色名称 + 操作按钮 */
.info-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-bottom: 0;
}

/* 底部行：位置信息 + 距离信息 */
.info-bottom-row {
  display: flex;
  align-items: center;
  height: 16px;
  padding-left: 44px; /* 与返回按钮对齐 */
}

.chat-room-back {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #000000 !important;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-room-back svg {
  width: 12px;
  height: 20px;
  flex-shrink: 0;
  stroke: #000000 !important;
  fill: none !important;
}

.character-name {
  position: absolute;
  left: 60px;
  font-size: 17px;
  font-weight: 700;
  color: #000000 !important;
  max-width: calc(100% - 120px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.chat-room-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chat-room-actions button {
  background: none;
  border: none;
  color: #000000 !important;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-room-actions svg {
  width: 22px;
  height: 22px;
  stroke: #000000 !important;
  fill: none !important;
}

/* 位置图标 */
.location-icon {
  display: flex;
  align-items: center;
  margin-right: 2px;
}

.location-icon svg {
  width: 14px;
  height: 14px;
  stroke: #000000 !important;
  fill: none !important;
}

/* 位置文本 */
.location-text {
  font-size: 11px;
  color: #555 !important;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分隔符 */
.separator {
  margin: 0 2px;
  font-size: 11px;
  color: #555 !important;
  opacity: 0.7;
}

/* 距离文本 */
.distance-text {
  font-size: 11px;
  color: #555 !important;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— 消息区域 ——— */
.chat-room-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 16px; /* 统一左右边距为12px */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 日期分隔线 */
.chat-date-divider {
  text-align: center;
  padding: 8px 0;
}

.chat-date-divider span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
}

/* 撤回消息提示样式（复用日期分隔符样式） */
.chat-recall-tip {
  text-align: center;
  padding: 8px 0;
}

.chat-recall-tip span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
}

/* 用户撤回消息样式（可选：添加特定样式） */
.chat-recall-tip.user span {
  /* 保持默认样式，或添加特定样式 */
}

/* AI撤回消息样式（可选：添加特定样式） */
.chat-recall-tip.assistant span {
  /* 保持默认样式，或添加特定样式 */
}

/* 消息行 */
.chat-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 2px; /* 进一步减少时间戳和气泡之间的间距 */
  max-width: 80%;
}

/* 1. User 消息行外层容器：强制横向排列、靠右对齐、底部对齐 */
.chat-msg-row.user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important; /* 【核心药方】：强制子元素全部底边对齐 */
    margin-bottom: 0; /* 移除底部边距，让gap统一控制间距 */
    padding: 0 0 0 12px; /* 完全移除右边距，使气泡绝对贴边 */
    width: 100% !important;
    max-width: 100% !important; /* 覆盖父类的 max-width: 80% 限制 */
    box-sizing: border-box;
    gap: 0px !important; /* 移除间距，使时间戳更贴近气泡 */
}

.chat-msg-row.assistant {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important; /* 核心：让头像、气泡和时间戳底部对齐 */
  gap: 6px; /* 增加间距，避免小尾巴与头像重叠 */
  align-self: flex-start;
  width: 100% !important;
  max-width: 100% !important; /* 覆盖父类的 max-width: 80% 限制，与右侧保持一致 */
  box-sizing: border-box;
}

/* 角色头像（仅对方消息显示） */
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  align-self: flex-start;
}

.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #c7c7cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 消息气泡 */
.chat-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 0; /* 移除气泡容器内部的间距 */
}

.chat-msg-sender {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 4px;
  margin-bottom: 2px;
}

.chat-msg-bubble {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  max-width: 100%;
}

/* 对方消息 — 白色气泡 */
.chat-msg-row.assistant .chat-msg-bubble {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 20px !important;
  position: relative;
}

/* 对方消息气泡小尾巴 - 左上角 */
.chat-msg-row.assistant .chat-msg-bubble::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -6px;
  width: 20px;
  height: 20px;
  background-image: url('https://i.ibb.co/spSpP9gz/IMG-4955.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 4. 气泡本体：稳重的绿色与纯黑文字 */
.chat-msg-row.user .chat-msg-bubble {
    background-color: #6ce579 !important;
    color: #000000 !important;
    padding: 8px 14px;
    border-radius: 20px !important;
    word-wrap: break-word;
    display: inline-block;
    position: relative;
}

/* 用户消息气泡小尾巴 - 右上角 */
.chat-msg-row.user .chat-msg-bubble::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-image: url('https://i.ibb.co/B2t2ft9w/IMG-4954.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 隐藏小尾巴 */
.chat-msg-bubble.hide-tail::before,
.chat-msg-bubble.hide-tail::after {
  display: none;
}

/* 消息时间戳 */
.chat-msg-time {
  font-size: 10px;
  color: #3d5275 !important;
  padding: 0 4px;
  align-self: flex-start; /* 改为flex-start，让时间戳不强制底部对齐 */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Assistant消息时间戳：与气泡底部边对齐并上移 */
.chat-msg-row.assistant .chat-msg-time {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* 文字靠左对齐 */
  justify-content: flex-end !important; /* 【核心药方】：底部对齐 */
  margin-bottom: 4px !important; /* 【像素级微调】：在绝对沉底的基础上，向上抬起 4px */
  margin-top: auto !important; /* 彻底清除上方拉扯力 */
  margin-left: -4px !important; /* 向内收，让时间戳更贴近气泡 */
  position: static; /* 移除相对定位，使用margin控制 */
  align-self: flex-end !important; /* 确保时间戳与气泡底部对齐 */
}

/* 2. 时间与"已读"状态容器：纵向排列，与气泡底部边对齐并上移 */
.chat-msg-row.user .chat-msg-time {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* 文字靠右对齐 */
    justify-content: flex-end !important; /* 【核心药方】：底部对齐 */
    margin-right: 0 !important; /* 完全移除右边距 */
    margin-bottom: 4px !important; /* 【像素级微调】：在绝对沉底的基础上，向上抬起 4px */
    margin-top: auto !important; /* 彻底清除上方拉扯力 */
    margin-left: 0px !important; /* 完全贴近角色气泡，与Assistant保持一致 */
    font-size: 10px; /* 与Assistant消息时间戳保持一致 */
    color: #3d5275 !important;
    white-space: nowrap !important; /* 绝对禁止折行 */
    position: static; /* 移除相对定位，使用margin控制 */
    align-self: flex-end !important; /* 确保时间戳与气泡底部对齐，与Assistant保持一致 */
}

.chat-msg-row.user .chat-msg-read {
    font-size: 10px; /* 与时间戳字体大小保持一致 */
    line-height: 1.2;
    margin-bottom: 2px;
    /* 默认添加过渡动画效果 */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* "已读"标签显示状态 */
.chat-msg-row.user .chat-msg-read.visible {
    opacity: 1;
    visibility: visible;
}

/* "已读"标签隐藏状态 - 保留占位空间，避免布局跳动 */
.chat-msg-row.user .chat-msg-read.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 3. 气泡容器：限制最大宽度，防止挤压时间戳 */
.chat-msg-row.user .chat-msg-bubble-wrap {
    max-width: 75%; /* 增加最大宽度，使气泡能够更宽 */
    flex-shrink: 0; /* 防止气泡被强行压缩变形 */
}

/* 左侧气泡容器：释放最大宽度限制，与右侧保持一致 */
.chat-msg-row.assistant .chat-msg-bubble-wrap {
    max-width: 75%; /* 与右侧气泡保持一致的最大宽度 */
    flex-shrink: 0; /* 防止气泡被强行压缩变形 */
}

/* AI 思考中动画 */
.chat-msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
}

.chat-msg-typing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-msg-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-msg-typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ——— 底部输入栏 ——— */
.chat-room-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  /* 修复透明竖线问题 */
  outline: none;
  box-shadow: none;
  position: relative; /* 为引用预览定位提供参考 */
}

.chat-room-input-bar button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #8e8e93;
}

.chat-room-input-bar button svg {
  width: 24px;
  height: 24px;
}

/* 输入框 */
.chat-room-textarea {
  flex: 1;
  min-height: 36px;
  max-height: 100px;
  padding: 8px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  color: #000000;
  resize: none;
  outline: none;
  font-family: inherit;
  overflow-y: auto;
  /* 修复透明竖线问题 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  background-clip: padding-box;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.chat-room-textarea::placeholder {
  color: #b0b0b0;
}

/* 修复透明竖线问题 - 隐藏滚动条 */
.chat-room-textarea::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Firefox特定修复 */
.chat-room-textarea::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* IE/Edge特定修复 */
.chat-room-textarea::-ms-expand {
  display: none;
}

/* 引用指示器样式 */
.quote-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 8px;
  background-color: rgba(0, 122, 255, 0.1);
  border-left: 3px solid #007AFF;
  border-radius: 6px;
  font-size: 14px;
}


.chat-quote-preview-content {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 10px;
}

.chat-quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.chat-quote-text-area {
  flex: 1;
  min-width: 0;
}

.chat-quote-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: #007AFF;
  margin-bottom: 2px;
}

.chat-quote-message-preview {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chat-quote-close-btn {
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-quote-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.chat-quote-divider {
  height: 1px;
  background: #e0e0e0;
}

/* 引用消息高亮效果 */
.quoted-message-highlight {
  animation: quoteHighlight 2s ease-in-out;
}

@keyframes quoteHighlight {
  0% {
    background-color: rgba(0, 122, 255, 0.3);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* 消息中的引用信息样式 */
.message-quote-reference {
  display: flex;
  margin-bottom: 8px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border-left: 3px solid #007AFF;
  cursor: pointer;
  transition: background-color 0.2s;
}

.message-quote-reference:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.quote-reference-line {
  width: 2px;
  background-color: #007AFF;
  margin-right: 8px;
  border-radius: 1px;
}

.quote-reference-content {
  flex: 1;
  min-width: 0;
}

.quote-reference-sender {
  font-size: 12px;
  font-weight: 600;
  color: #007AFF;
  margin-bottom: 2px;
}

.quote-reference-text {
  font-size: 13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-content {
  word-wrap: break-word;
  word-break: break-word;
}

/* 麦克风/发送按钮 */
.chat-room-send-btn {
  background: #6ce579 !important;
  color: #000000 !important;
}

.chat-room-send-btn:disabled {
  background: #c7c7cc !important;
  color: #ffffff !important;
  opacity: 0.6;
}

/* AI 回复按钮（麦克风图标） */
.chat-room-ai-btn {
  color: #555 !important;
  transition: color 0.2s;
}

.chat-room-ai-btn:active {
  color: #83d27c !important;
}

.chat-room-ai-btn.loading {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ——————————————————————————————————————————————
 *  地理信息设置界面
 * —————————————————————————————————————————————— */

/* 地理信息容器 */
.geography-container {
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

/* 添加地点按钮 */
.geography-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f8f8;
  border: 1px dashed #c7c7cc;
  border-radius: 10px;
  color: #007AFF;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.geography-add-btn:hover {
  background: #f0f0f0;
  border-color: #007AFF;
}

.geography-add-btn:active {
  transform: scale(0.98);
}

/* 地点列表 */
.geography-list {
  margin-top: 12px;
}

/* 地点项 */
.geography-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  margin-bottom: 8px;
  position: relative;
  transition: all 0.2s ease;
}

.geography-item:hover {
  border-color: #007AFF;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.geography-item:last-child {
  margin-bottom: 0;
}

/* 地点图标 */
.geography-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* 地点信息 */
.geography-item-info {
  flex: 1;
  min-width: 0;
}

.geography-item-name {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geography-item-desc {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地点操作按钮 */
.geography-item-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.geography-item-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8f8f8;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.geography-item-btn:hover {
  background: #e5e5ea;
}

.geography-item-btn:active {
  transform: scale(0.9);
}

.geography-item-btn.edit {
  color: #007AFF;
}

.geography-item-btn.delete {
  color: #FF3B30;
}

/* ——————————————————————————————————————————————
 *  长按消息气泡功能样式
 * —————————————————————————————————————————————— */

/* 长按时气泡高亮效果 */
.chat-msg-bubble.long-press-active {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

/* 悬浮框背景遮罩 */
.message-context-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 10000; /* 提高到最高层级 */
}

/* 悬浮框容器 - 横向悬浮条 */
.message-context-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.7); /* 降低不透明度，增强玻璃质感 */
  backdrop-filter: blur(30px) saturate(180%); /* 增强模糊和饱和度 */
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3); /* 添加边框增强层次感 */
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); /* 增强阴影层次 */
  padding: 4px 6px;
  z-index: 10001; /* 提高到最高层级，在backdrop之上 */
  height: 40px;
  max-width: 80vw;
  min-width: 120px; /* 最小宽度确保显示滚动条 */
  opacity: 0;
  transform: scale(1); /* 移除初始缩放，避免定位偏移 */
  transition: opacity 0.2s ease;
  pointer-events: auto; /* 确保可以点击 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto; /* 启用横向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
  /* 确保内容不超出圆角边界 */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* 隐藏 WebKit 滚动条 */
.message-context-menu::-webkit-scrollbar {
  display: none;
}

.message-context-menu.show {
  opacity: 1;
}

/* 悬浮框菜单项 - 横向排列 */
.message-context-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85); /* 稍微降低文字不透明度 */
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
  height: 32px;
  touch-action: manipulation; /* 优化触摸体验 */
  background: transparent; /* 默认透明背景 */
}

.message-context-menu-item:hover {
  background: rgba(0, 0, 0, 0.06); /* 降低hover背景不透明度 */
  color: rgba(0, 0, 0, 0.95);
}

.message-context-menu-item:active {
  background: rgba(0, 0, 0, 0.12); /* 降低active背景不透明度 */
  color: #000000;
}

.message-context-menu-item.destructive {
  color: #FF3B30;
}

/* 引用菜单项特殊样式 */
.message-context-menu-item.quote-action {
  color: #007AFF;
}

.message-context-menu-item.quote-action:hover {
  background: rgba(0, 122, 255, 0.1);
}

/* 菜单项图标 */
.message-context-menu-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-context-menu-item-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* 滚动指示器 - 当内容超出时显示 */
.message-context-menu.scrollable::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3));
  border-radius: 1px;
  pointer-events: none;
}

/* 滚动动画 */
.message-context-menu.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 模态框遮罩 */
.message-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-index-stacked-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.message-modal-backdrop.show {
  opacity: 1;
}

/* 模态框容器 */
.message-modal {
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.message-modal-backdrop.show .message-modal {
  transform: scale(1);
}

/* 模态框头部 */
.message-modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.message-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

.message-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f2f7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #8e8e93;
  transition: all 0.2s ease;
}

.message-modal-close:hover {
  background: #e5e5ea;
}

/* 模态框内容区 */
.message-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.message-modal-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.message-modal-textarea:focus {
  border-color: #007AFF;
}

/* 模态框底部按钮区 */
.message-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.message-modal-btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.message-modal-btn.cancel {
  background: #f2f2f7;
  color: #000000;
}

.message-modal-btn.cancel:hover {
  background: #e5e5ea;
}

.message-modal-btn.confirm {
  background: #007AFF;
  color: #ffffff;
}

.message-modal-btn.confirm:hover {
  background: #0051D5;
}

.message-modal-btn.destructive {
  background: #FF3B30;
  color: #ffffff;
}

/* ——————————————————————————————————————————————
 *  错误消息样式
 * —————————————————————————————————————————————— */

/* 错误消息行 */
.chat-msg-row.error-message {
  margin-bottom: 12px;
}

/* 错误消息气泡 */
.chat-msg-bubble.error-bubble {
  background: #ffebee !important;
  border: 1px solid #ef5350;
  color: #c62828;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 错误消息气泡小尾巴 - 使用红色调 */
.chat-msg-row.assistant .chat-msg-bubble.error-bubble::before {
  border-right-color: #ffebee;
  border-top-color: #ffebee;
}

/* 错误内容预格式化文本 */
.error-content {
  margin: 0;
  padding: 0;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: inherit;
}

/* 错误重试按钮 */
.error-retry-btn {
  margin-top: 8px;
  padding: 8px 16px;
  background: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.error-retry-btn:hover {
  background: #0051D5;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.error-retry-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.2);
}

/* 错误消息气泡容器 - 调整布局以容纳重试按钮 */
.error-message .chat-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.message-modal-btn.destructive:hover {
  background: #D70015;
}

.message-modal-btn:active {
  transform: scale(0.95);
}

/* 确认对话框样式 */
.message-confirm-dialog {
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 320px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.message-modal-backdrop.show .message-confirm-dialog {
  transform: scale(1);
}

.message-confirm-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 12px;
}

.message-confirm-text {
  font-size: 15px;
  color: #8e8e93;
  margin-bottom: 24px;
  line-height: 1.5;
}

.message-confirm-buttons {
  display: flex;
  gap: 12px;
}

.message-confirm-buttons .message-modal-btn {
  flex: 1;
}

.geography-item-btn.primary {
  color: #34C759;
}

/* 主要地点标记 */
.geography-item.primary .geography-item-name {
  color: #007AFF;
}

.geography-item.primary .geography-item-icon {
  background: rgba(0, 122, 255, 0.1);
}

/* 地理信息编辑模态框 */
.geography-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  z-index: var(--z-index-modal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.geography-edit-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.geography-edit-modal.active {
  opacity: 1;
  visibility: visible;
}

.geography-edit-modal.active .geography-edit-body {
  transform: translateY(0);
}

/* 地理信息编辑模态框头部 */
.geography-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5ea;
  position: relative;
  width: 100%; /* 修复：添加宽度约束防止布局崩塌 */
  box-sizing: border-box; /* 修复：确保padding包含在宽度内 */
}

.geography-edit-cancel,
.geography-edit-save {
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 8px 12px;
  -webkit-tap-highlight-color: transparent;
  min-width: 60px;
  text-align: center;
}

.geography-edit-cancel {
  color: #007AFF;
}

.geography-edit-save {
  color: #007AFF;
  font-weight: 600;
}

.geography-edit-save:disabled {
  color: #c7c7cc;
}

.geography-edit-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  text-align: center;
}

/* 地理信息编辑模态框主体 */
.geography-edit-body {
  background: #ffffff;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px 16px 0 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .geography-edit-body {
    max-height: 85vh;
    padding: 12px;
  }
  
  .geography-edit-header {
    height: 52px;
    padding: 0 12px;
    width: 100%; /* 修复：响应式设计中也保持宽度约束 */
    box-sizing: border-box;
  }
  
  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 16px;
    padding: 6px 10px;
    min-width: 50px;
  }
  
  .geography-edit-title {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .geography-edit-body {
    max-height: 90vh;
    padding: 10px;
  }
  
  .geography-edit-header {
    height: 48px;
    padding: 0 8px;
    width: 100%; /* 修复：小屏幕响应式设计中也保持宽度约束 */
    box-sizing: border-box;
  }
  
  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 15px;
    padding: 4px 8px;
    min-width: 45px;
  }
  
  .geography-edit-title {
    font-size: 15px;
  }
}

/* 地理信息表单组 */
.geography-form-group {
  margin-bottom: 20px;
}

.geography-form-group:last-child {
  margin-bottom: 0;
}

.geography-form-label {
  display: block;
  font-size: 13px;
  color: #8e8e93;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.geography-form-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.geography-form-input:focus {
  outline: none;
  border-color: #007AFF;
}

.geography-form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
  line-height: 1.5;
}

.geography-form-textarea:focus {
  outline: none;
  border-color: #007AFF;
}

/* 地点类型选择器 */
.geography-type-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.geography-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: #f8f8f8;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.geography-type-btn:hover {
  background: #f0f0f0;
}

.geography-type-btn.active {
  background: rgba(0, 122, 255, 0.1);
  border-color: #007AFF;
}

.geography-type-btn:active {
  transform: scale(0.95);
}

.geography-type-icon {
  font-size: 20px;
}

.geography-type-btn span:last-child {
  font-size: 12px;
  color: #8e8e93;
}

.geography-type-btn.active span:last-child {
  color: #007AFF;
}

/* 地理信息复选框 */
.geography-form-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.geography-form-checkbox input[type="checkbox"] {
  display: none;
}

.geography-checkbox-checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #e5e5ea;
  border-radius: 6px;
  position: relative;
  transition: all 0.2s ease;
}

.geography-form-checkbox input[type="checkbox"]:checked + .geography-checkbox-checkmark {
  background: #007AFF;
  border-color: #007AFF;
}

.geography-form-checkbox input[type="checkbox"]:checked + .geography-checkbox-checkmark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.geography-form-checkbox span:last-child {
  font-size: 15px;
  color: #000000;
}

/* ——————————————————————————————————————————————
 *  编辑按钮样式
 * —————————————————————————————————————————————— */

.chat-edit-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: #FF9500;
  color: #ffffff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-edit-btn:active {
  background: #E6850E;
}

.chat-edit-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.chat-edit-text {
  font-size: 12px;
  font-weight: 500;
}

/* 地理信息空状态 */
.geography-empty {
  padding: 16px;
  text-align: center;
  color: #8e8e93;
  font-size: 14px;
}

/* ——————————————————————————————————————————————
 *  消息引用系统样式
 * —————————————————————————————————————————————— */

/* 消息引用系统CSS变量 */
:root {
  /* 引用预览区域变量 */
  --quote-preview-bg: rgba(255, 255, 255, 0.95);
  --quote-preview-border: #e0e0e0;
  --quote-preview-avatar-size: 32px;
  --quote-preview-sender-size: 12px;
  --quote-preview-text-size: 13px;
  --quote-preview-close-size: 24px;
  
  /* 气泡内引用块变量 */
  --quote-block-bg: #f5f5f5;
  --quote-block-border-user: #007AFF; /* 用户消息引用边框颜色 */
  --quote-block-border-assistant: #34C759; /* 角色消息引用边框颜色 */
  --quote-block-avatar-size: 20px;
  --quote-block-sender-size: 12px;
  --quote-block-text-size: 12px;
  
  /* 高亮动画变量 */
  --highlight-color: #fff3cd;
  --highlight-duration: 3s;
}

/* 引用预览区域样式（输入框上方）- 玻璃质感悬浮条 */
.chat-quote-preview {
  position: absolute;
  bottom: 100%;
  left: 10px;
  right: 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  z-index: 100;
  animation: slideUp 0.3s ease-out;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* 引用预览动画 - 从下向上滑入 */
@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 引用标签 */
.chat-quote-preview-label {
  font-size: 13px;
  font-weight: 600;
  color: #007AFF;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chat-quote-preview-label svg {
  width: 14px;
  height: 14px;
  margin-right: 2px;
}

/* 引用预览发送者名字 */
.chat-quote-preview-sender {
  font-size: 13px;
  font-weight: 600;
  color: #333333; /* 深灰色，比文字(#666666)深一个度 */
  flex-shrink: 0;
}

/* 引用预览文字内容 */
.chat-quote-preview-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 引用预览关闭按钮 */
.chat-quote-preview-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-quote-preview-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.chat-quote-preview-close:active {
  transform: scale(0.9);
}

/* 气泡内引用块样式 - LINE风格 */
.chat-msg-quote-block {
  background: transparent; /* 透明背景 */
  border-radius: 0;
  padding: 0 0 12px 0; /* 移除上padding，让文字与头像顶部对齐，收窄底部空间 */
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部分隔线 */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px; /* 增加间距 */
  cursor: pointer;
  /* 移除所有过渡效果，避免检查元素时的跳动 */
}

/* 引用块悬停效果 - 移除透明度变化 */
.chat-msg-quote-block:hover {
  /* 移除所有效果，保持稳定 */
}

/* 引用块焦点效果 - 简化 */
.chat-msg-quote-block:focus {
  outline: none;
  /* 移除透明度变化 */
}

/* 引用块点击效果 - 简化 */
.chat-msg-quote-block:active {
  /* 移除透明度变化 */
}

/* 撤回消息的引用块样式 */
.chat-msg-quote-recalled {
  opacity: 0.6;
  pointer-events: none;
}

.chat-msg-quote-recalled .chat-msg-quote-text {
  color: #999 !important;
  font-style: italic;
}

.chat-msg-quote-recalled:hover {
  background-color: transparent !important;
  transform: none !important;
}

.chat-msg-quote-recalled:focus {
  outline: none !important;
}

/* 引用块小头像 - LINE风格 */
.chat-msg-quote-avatar {
  width: 19px; /* 缩小1像素 */
  height: 19px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; /* 向下移动2像素 */
}

.chat-msg-quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 引用块内容区域 */
.chat-msg-quote-content {
  flex: 1;
  min-width: 0;
}

/* 引用块角色名 - LINE风格 */
.chat-msg-quote-sender {
  font-size: 11px; /* 缩小1像素 */
  font-weight: 600;
  color: #000000; /* 黑色 */
  margin-bottom: 2px; /* 增加间距 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 引用块预览文本 - LINE风格 */
.chat-msg-quote-text {
  font-size: 12px; /* 缩小1像素 */
  color: #555555; /* 深灰色 */
  line-height: 1.4; /* 增加行高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 跳转高亮动画 */
.highlight-flash {
  animation: highlightPulse var(--highlight-duration) ease-in-out;
}

@keyframes highlightPulse {
  0% {
    background-color: var(--highlight-color); /* 黄色背景 */
  }
  50% {
    background-color: var(--highlight-color); /* 保持黄色背景 */
  }
  100% {
    background-color: transparent; /* 渐变到透明 */
  }
}

/* 消息行高亮效果 */
.chat-msg-row.highlight-flash {
  position: relative;
}

.chat-msg-row.highlight-flash::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background-color: var(--highlight-color);
  border-radius: 12px;
  z-index: -1;
  animation: highlightPulse var(--highlight-duration) ease-in-out;
}

/* ——————————————————————————————————————————————
 *  消息引用系统响应式适配
 * —————————————————————————————————————————————— */

/* 小屏幕适配 (<375px) */
@media screen and (max-width: 374px) {
  /* 引用预览区域小屏幕适配 */
  .chat-quote-preview {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .chat-quote-preview-avatar {
    width: 28px;
    height: 28px;
  }
  
  .chat-quote-preview-sender {
    font-size: 11px;
  }
  
  .chat-quote-preview-text {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }
  
  .chat-quote-preview-close {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
  
  /* 气泡内引用块小屏幕适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 小屏幕也保持顶部对齐，收窄空间 */
    gap: 6px;
  }
  
  .chat-msg-quote-avatar {
    width: 17px; /* 缩小1像素 */
    height: 17px;
    margin-top: 2px; /* 向下移动2像素 */
  }
  
  .chat-msg-quote-sender {
    font-size: 10px; /* 缩小1像素 */
  }
  
  .chat-msg-quote-text {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
}

/* 大屏幕适配 (>768px) */
@media screen and (min-width: 769px) {
  /* 引用预览区域大屏幕适配 */
  .chat-quote-preview {
    padding: 14px 20px;
    gap: 14px;
  }
  
  .chat-quote-preview-avatar {
    width: 36px;
    height: 36px;
  }
  
  .chat-quote-preview-sender {
    font-size: 13px;
  }
  
  .chat-quote-preview-text {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }
  
  .chat-quote-preview-close {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  
  /* 气泡内引用块大屏幕适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 保持LINE风格：透明背景，无左右padding，顶部对齐，收窄空间 */
    gap: 10px;
    border-radius: 10px;
  }
  
  .chat-msg-quote-avatar {
    width: 23px; /* 缩小1像素 */
    height: 23px;
    margin-top: 2px; /* 向下移动2像素 */
  }
  
  .chat-msg-quote-sender {
    font-size: 12px; /* 缩小1像素 */
  }
  
  .chat-msg-quote-text {
    font-size: 13px;
    -webkit-line-clamp: 3; /* 大屏幕显示更多行 */
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  /* 引用预览区域横屏适配 */
  .chat-quote-preview {
    padding: 8px 12px;
    min-height: 48px;
  }
  
  .chat-quote-preview-avatar {
    width: 24px;
    height: 24px;
  }
  
  .chat-quote-preview-sender {
    font-size: 11px;
    margin-bottom: 1px;
  }
  
  .chat-quote-preview-text {
    font-size: 12px;
    -webkit-line-clamp: 1; /* 横屏只显示一行 */
  }
  
  /* 气泡内引用块横屏适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 横屏也保持顶部对齐，收窄空间 */
    margin-bottom: 6px;
  }
  
  .chat-msg-quote-text {
    -webkit-line-clamp: 1; /* 横屏只显示一行 */
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 增大触摸区域 */
  .chat-quote-preview-close {
    width: 32px;
    height: 32px;
  }
  
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 保持LINE风格：透明背景，无左右padding，顶部对齐，收窄空间 */
  }
  
  /* 移除悬停效果 */
  .chat-quote-preview-close:hover,
  .chat-msg-quote-block:hover {
    background-color: transparent;
  }
  
  /* 增强点击反馈 */
  .chat-quote-preview-close:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
  }
  
  .chat-msg-quote-block:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
  }
}

/* ——————————————————————————————————————————————
 *  消息引用系统辅助样式
 * —————————————————————————————————————————————— */

/* 引用状态指示器 */
.chat-quote-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8e8e93;
  margin-left: 4px;
}

.chat-quote-indicator::before {
  content: '↩';
  font-size: 12px;
}

/* 引用计数标签 */
.chat-quote-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: #007AFF;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  margin-left: 4px;
}

/* 引用链指示器 */
.chat-quote-chain {
  position: relative;
  padding-left: 12px;
}

.chat-quote-chain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
}

/* 引用加载状态 */
.chat-quote-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #8e8e93;
  font-size: 12px;
}

.chat-quote-loading::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #e0e0e0;
  border-top-color: #007AFF;
  border-radius: 50%;
  margin-right: 6px;
  animation: quoteSpin 1s linear infinite;
}

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

/* 引用错误状态 */
.chat-quote-error {
  background-color: #ffebee;
  color: #d32f2f;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-quote-error::before {
  content: '⚠';
  font-size: 14px;
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 引用预览区域变量 - 深色主题 */
    --quote-preview-bg: rgba(28, 28, 30, 0.95);
    --quote-preview-border: #38383a;
    
    /* 气泡内引用块变量 - 深色主题 */
    --quote-block-bg: #2c2c2e;
    
    /* 高亮动画变量 - 深色主题 */
    --highlight-color: rgba(255, 243, 205, 0.3);
  }
  
  /* 深色主题下的文本颜色调整 */
  .chat-quote-preview-sender {
    color: #636366; /* 比文字(#98989d)更深（更暗），形成正确对比 */
  }
  
  .chat-quote-preview-text {
    color: #98989d;
  }
  
  /* 消息气泡中的引用块保持LINE风格颜色 */
  .chat-msg-quote-sender {
    color: #000000 !important; /* 黑色 */
  }
  
  .chat-msg-quote-text {
    color: #555555 !important; /* 深灰色 */
  }
  
  .chat-quote-preview-close {
    color: #98989d;
  }
  
  .chat-quote-preview-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .chat-msg-quote-block:hover {
    background-color: #3a3a3c;
  }
}