/* ===== UI 美化试验覆盖层 ===== */

/* 底部导航栏：悬浮胶囊 */
.bottom-nav {
  position: fixed;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 420px);
  height: 62px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  background: rgba(19, 19, 26, 0.72);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 9999;
}

.nav-item {
  gap: 3px;
  height: 100%;
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item.active {
  text-shadow: none;
  filter: drop-shadow(0 0 6px var(--accent-soft));
}

/* 探索页顶栏与搜索框 */
.browse-header {
  gap: 12px;
  padding: calc(14px + var(--app-top-inset)) 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.browse-search-inline {
  min-width: 180px;
  max-width: 520px;
  height: 42px;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(30, 30, 42, 0.6);
  transition: all var(--transition);
}

.browse-search-inline:focus-within {
  border-color: var(--border-focus);
  background: rgba(30, 30, 42, 0.8);
  box-shadow: 0 0 14px var(--accent-glow);
}

@media (max-width: 520px) {
  .browse-header {
    gap: 10px;
    padding: calc(12px + var(--app-top-inset)) 12px 8px;
  }

  .browse-search-inline {
    height: 40px;
  }
}

/* 创建页表单卡片 — 已迁移至 style.css 统一管理，此处仅保留兼容空位 */

/* ===== 聊天气泡：保持稳固与圆润，不触发触控缩放 ===== */
.msg-bubble {
  padding: 11px 15px;               /* 舒适的文本内边距 */
  border-radius: 18px;              /* 现代圆润弧度 */
  font-size: 15px; 
  line-height: 1.55; 
  word-break: break-word; 
  white-space: pre-wrap;
  transition: background var(--transition); /* 仅平滑过渡背景色 */
}

/* 彻底取消长按或点击气泡时的内缩动画 */
.msg-bubble:active {
  transform: none !important;
}

.msg.user .msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  color: white; 
  border-bottom-right-radius: 4px;
}

.msg.assistant .msg-bubble {
  background: var(--bg-card); 
  color: var(--text-primary);
  border: 1px solid var(--border); 
  border-bottom-left-radius: 4px;
}

/* ===== 角色卡片：注入移动端专属按压果冻特效 ===== */
.char-card {
  position: relative; 
  border-radius: var(--radius-lg); 
  overflow: hidden;
  background: var(--bg-card); 
  cursor: pointer;
  aspect-ratio: 3/4; 
  animation: fadeInUp 0.4s ease both;
  
  /* 关键：给放大和缩小都加上丝滑的过渡阻尼 */
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease;
}

/* 移动端/点按时的 Q 弹反馈：手指向下一按，卡片微微内缩 2%，质感拉满 */
.char-card:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* 桌面端鼠标悬停时的常规高亮（如果是手机端点按后松开也会过渡得很自然） */
.char-card:hover { 
  transform: translateY(-4px) scale(1.01); 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); 
}

/* ==========================================================================
   探索页顶栏超级瘦身与去压抑化美化（开盖即食）
   ========================================================================== */

/* 1. 压缩顶栏整体外壳，减少垂直空间占用 */
.browse-header {
  padding: calc(6px + var(--app-top-inset)) 12px 6px !important; /* 缩减上下内边距 */
  gap: 6px !important; /* 缩小行与行之间的死板间距 */
  background: rgba(10, 10, 15, 0.75) !important; /* 让背景更通透，减少压抑感 */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* 2. 移除 browse-brand 的多余高度，让搜索框和 Logo 处于极度扁平的水平线 */
.browse-logo {
  width: 38px !important;  /* 缩小 Logo 尺寸 */
  height: 38px !important;
}
.browse-title {
  font-size: 14px !important; /* 降低字号，向原生 App 的精致感靠拢 */
}
.browse-subtitle {
  display: none !important; /* 在移动端直接隐藏无意义的二级副标题，彻底释放高度 */
}

/* 3. 搜索框精细化缩减 */
.browse-search-inline {
  height: 34px !important; /* 从原本的臃肿高度压缩至精细的 34px */
  background: rgba(255, 255, 255, 0.04) !important; /* 更隐蔽、不突兀的输入框底色 */
  border-radius: 12px !important; /* 稍微硬朗一点的小圆角，比纯圆胶囊更大气 */
}

/* 4. 彻底统一两排胶囊的高度与间距（核心治愈） */
.browse-filter-row,
.browse-filter-row + .browse-tags-row {
  margin-top: 2px !important;
}

/* 强制将第一排（全部/最新/最热）和第二排（全部/男/女）的高宽内边距完全对齐 */
.filter-chip,
.category-chip,
.tag-btn {
  height: 26px !important;       /* 严格统一高度 */
  line-height: 24px !important;  /* 文字完美居中 */
  padding: 0 10px !important;    /* 统一左右精致留白 */
  font-size: 11px !important;    /* 降低字号，使其不抢戏 */
  border-radius: 6px !important; /* 换成 Mufy 同款的精致微圆角，摆脱老气的大胶囊 */
  background: rgba(255, 255, 255, 0.03) !important; /* 极淡的底色，降低存在感 */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease !important;
}

/* 激活状态下的霓虹微光提升 */
.filter-chip.active,
.category-chip.active,
.tag-btn.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-mid) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* 角色详情标签：保持与主题色同步，避免被通用胶囊样式压成浅灰 */
.detail-tags .tag-btn {
  background: var(--accent-soft) !important;
  border-color: var(--accent-mid) !important;
  color: var(--accent) !important;
}

/* 5. 顺手把角色卡片的触控 Q 弹效果补上（卡片按压反馈） */
.char-card {
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease !important;
}
.char-card:active {
  transform: scale(0.97) !important; /* 按下去微微内缩 3%，稳重且高级 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ===== 新版精细图标样式控制中心 ===== */
.bottom-nav .ui-icon {
  width: 20px !important;  /* 统一缩放到极致精致的 20px */
  height: 20px !important;
  color: #7A798A !important; /* 未激活时，使用更有质感的烟灰色 */
  transition: all 0.2s ease !important;
}

/* 当导航被激活（.active）时触发赛博高亮 */
.nav-item.active .ui-icon {
  color: var(--accent) !important;
  /* 给精细线条图层追加一层柔和的外霓虹晕 */
  filter: drop-shadow(0 0 4px var(--accent-strong)) !important; 
}

/* 顺手把那个“创建”按钮做个特殊放大凸起，仅在按压或激活状态下高亮亮起 */
.nav-create:active .ui-icon,
.nav-create.active .ui-icon {
  width: 22px !important;
  height: 22px !important;
  color: #12111A !important; /* 让加号变成黑色 */
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important; /* 渐变圆形底托 */
  border-radius: 50% !important;
  padding: 3px !important;
  box-shadow: 0 4px 12px var(--accent-strong) !important;
  transform: scale(0.9) !important; /* 戳“创建”时有个Q弹反馈 */
}

/* ==========================================================================
   底部悬浮栏：横向扁平化瘦身（只在激活项显示文字，高度暴砍）
   ========================================================================== */

/* 1. 底部悬浮外壳保留轻盈感，同时给手指足够点击高度 */
.bottom-nav {
  height: 52px !important;
  bottom: 10px !important;            /* 悬浮离底距离微调 */
  padding: 0 14px !important;
  background: rgba(10, 10, 15, 0.65) !important; /* 调高透明度，让遮挡感彻底消失 */
  border-radius: 28px !important;
}

/* 2. 默认隐藏所有未激活的文字标签，释放垂直高度 */
.nav-item .nav-label {
  display: none !important;           /* 默认藏起文字 */
}

/* 3. 将导航项改成横向排列布局（图标和文字排成一排） */
.nav-item {
  display: flex !important;
  flex-direction: row !important;     /* 核心：从上下改成左右并排 */
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;                /* 图标 and 文字的横向精致间距 */
  flex: unset !important;             /* 取消等分，让未激活的图标缩回原本的宽度 */
  padding: 0 12px !important;
  height: 40px !important;
  border-radius: 22px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 4. 当某一个标签被激活（.active）时的华丽变身 */
.nav-item.active {
  background: var(--accent-soft) !important; /* 动态气泡底托，完美跟随主题色变色 */
  border: 1px solid var(--accent-mid) !important;
}

/* 5. 只有激活状态下的文字，才会优雅地显示出来 */
.nav-item.active .nav-label {
  display: inline-block !important;   /* 激活时，横向展开文字 */
  font-size: 12px !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* 6. 图标尺寸配合加高后的外壳，避免视觉重心过轻 */
.bottom-nav .ui-icon {
  width: 19px !important;
  height: 19px !important;
}

/* 7. 中间那个特殊的“创建（+）”按钮单独适配 */
.nav-create {
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
}
.nav-create .ui-icon {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 创建按钮不需要文字 */
.nav-create .nav-label {
  display: none !important;
}

/* 8. 既然底部变薄了，瀑布流列表底部的留空也可以相应缩减，腾出更多看卡片的空间 */
.tab-page {
  padding-bottom: 76px !important;
}

/* ==========================================================================
   全局皮肤清爽化：星空夜蓝紫暗调升级（告别死黑，全面通透）
   ========================================================================== */

:root {
  /* 核心：将最底层的死黑换成清爽、有深度的深海蓝紫 */
  --bg-primary: #10101a !important; 
  
  /* 二级背景（顶栏、卡片容器）换成更具呼吸感的色号 */
  --bg-secondary: #161624 !important;
  
  /* 输入框底色稍微提亮，拉开层次 */
  --bg-input: #1b1b2c !important;
  
  /* 边框线换成带有一点点夜光紫的半透明细线 */
  --border: rgba(255, 255, 255, 0.05) !important;
}

/* 1. 净化网页基础底色 */
html, body {
  background: var(--bg-primary) !important;
}

/* 2. 让探索页顶栏、聊天记录页顶栏更通透清爽 */
.browse-header {
  background: rgba(16, 16, 26, 0.75) !important; /* 换成和新底色融为一体的半透明 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* 3. 让角色卡片（.char-card）和合集卡片不再死气沉沉 */
.char-card {
  background: #181826 !important; /* 微微提亮的暗舱色 */
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; /* 换成更轻盈的阴影 */
}

/* 4. 优化底部悬浮胶囊的背景，让它跟新底色完美交融 */
.bottom-nav {
  background: rgba(22, 22, 36, 0.70) !important; 
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4) !important;
}

/* 5. 顺手给整个系统铺一层极其微弱的“赛博呼吸光晕”（做在登录和主页的渐变里） */
.login-container {
  background: radial-gradient(circle at 50% 20%, var(--accent-soft), transparent 70%) !important;
}

/* ==========================================================================
   聊天记录页 (History Page) 华丽蜕变：复刻深夜小酒馆微光列表
   ========================================================================== */

/* 1. 净化历史记录列表容器，与我们的星空夜蓝紫底色完美融合 */
.history-swipe-item {
  background: var(--bg-primary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; /* 极淡的精细分割线 */
}

.history-card {
  background: transparent !important;
  padding: 14px 16px !important; /* 增大上下内边距，给手指划动留出空间 */
  transition: background 0.2s ease !important;
}

/* 划过或点击历史卡片时的清爽高亮反馈 */
.history-card:hover,
.history-card:active {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 2. 核心灵魂：重塑【未读消息】视觉逻辑 — 抛弃土气的小圆点，换成左侧霓虹呼吸条 */
.history-swipe-item.is-unread::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important; /* 极细霓虹条 */
  border-radius: 0 4px 4px 0 !important;
  /* 从亮紫到深紫的华丽渐变 */
  background: linear-gradient(180deg, var(--accent), var(--accent-gradient-end)) !important;
  /* 赋予它像萤火虫一样的紫色外发光 */
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.8) !important;
  z-index: 3 !important;
}

/* 未读状态下，整条卡片的背景带有一层淡淡的紫色微光向右晕染 */
.history-card.is-unread {
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.04) 0%, transparent 60%) !important;
}

/* 隐藏原本臃肿的未读硬色块数字 */
.local-unread-badge.history-unread-badge {
  display: none !important; 
}

/* 3. 字体排版精细化拉开层次 */
.history-name {
  font-size: 15px !important;
  font-weight: 700 !important; /* 名字强力加粗，突出主体 */
  color: #ffffff !important;
}

/* 角色标签（如 AI 标志）微型化，采用精致微光底托 */
.history-name span:contains("AI") {
  font-size: 10px !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  background: rgba(192, 132, 252, 0.1) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* 最后一条聊天消息摘要：收敛亮度，使其甘当背景 */
.history-session {
  font-size: 12px !important;
  color: #7a798a !important; /* 烟灰色 */
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* 4. 右上角时间戳（Meta）极限精致化 */
.history-meta {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #555566 !important; /* 极淡的暗灰色，绝对不抢戏 */
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
}

/* ==========================================================================
   聊天记录列表：从“死板分割线”升级为“呼吸感扁平小舱室”
   ========================================================================== */

/* 1. 调整历史记录单行外壳，增加行与行之间的间距 */
.history-swipe-item {
  background: transparent !important; /* 让它底色透明，完全吃全局的深紫底色 */
  border-bottom: none !important;     /* 彻底扔掉原本死板的横切下划线！ */
  margin: 0 12px 6px !important;      /* 左右缩进，上下留空，让它变成独立的小舱室 */
}

/* 2. 重塑单条卡片的皮肤：引入 Mufy 同款微光包围边框 */
.history-card {
  background: rgba(255, 255, 255, 0.015) !important; /* 极淡的半透明提亮，拉开前后层次 */
  border: 1px solid rgba(255, 255, 255, 0.04) !important; /* 四周全包围的极细发光微框 */
  border-radius: 14px !important;     /* 给每个历史格子加上精致的现代大圆角 */
  padding: 11px 14px !important;      /* 缩减上下内边距，使得头像放大后整体高度保持不变！ */
  
  display: flex !important;
  align-items: center !important;     /* 强制头像、名字、数据在同一条水平中心线上绝对居中 */
  position: relative !important;
}

/* 3. 头像与文字的横向呼吸感微调 */
.history-avatar {
  width: 50px !important;             /* 放大头像尺寸，让头像细节尽显 */
  height: 50px !important;
  margin-right: 14px !important;      /* 加大头像跟右侧文字之间的精致间距 */
}

/* 4. 点击或者手指按住整条记录时的Q弹缩放与微光高亮 */
.history-card:active {
  background: rgba(255, 255, 255, 0.03) !important; /* 按下去时微微变亮 */
  transform: scale(0.99) !important;  /* 手指按住时，卡片整体微微内缩 1%，果冻质感十足 */
  transition: all 0.1s ease !important;
}

/* 5. 适配未读状态：如果是未读，让它整张卡片的微框亮起来，而不是用土气的小红点 */
.history-swipe-item.is-unread .history-card {
  border-color: rgba(192, 132, 252, 0.25) !important; /* 框线变成亮紫色 */
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.03) 0%, transparent 100%) !important;
}

/* ==========================================================================
   聊天页模型选择器：App 风格胶囊按钮 + 底部卡片选择层
   ========================================================================== */

.chat-model-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.chat-model-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 172px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(22, 22, 36, 0.56);
  color: var(--text-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.chat-model-picker-btn:active {
  transform: scale(0.96);
}

.chat-model-picker-btn .cmp-meta {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.chat-model-picker-btn .cmp-name {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-picker-btn .cmp-arrow {
  color: var(--text-muted);
  font-size: 12px;
}

.chat-model-picker-panel {
  padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--app-bottom-inset)) + 14px) !important;
}

#chatModelPickerSheet .chat-sheet-panel {
  top: 0 !important;
  bottom: 0 !important;
  max-height: none !important;
  height: var(--app-viewport-height, 100vh) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  border-top: none !important;
  border-radius: 0 !important;
}

#chatModelPickerSheet .chat-sheet-panel::before {
  display: none !important;
}

#chatModelPickerSheet .chat-sheet-title-row {
  top: 0 !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

#chatModelPickerSheet .chat-sheet-title-row .chat-sheet-title {
  flex: 1;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

.chat-model-picker-search {
  padding: 12px 0 8px;
}

.chat-model-picker-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 13px;
}

.chat-model-picker-search input:focus {
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-model-picker-current {
  display: grid;
  gap: 3px;
  margin: 2px 0 8px;
  padding: 11px 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chat-model-picker-current span,
.chat-model-picker-current small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-picker-current strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-picker-list {
  display: grid;
  gap: 0;
  max-height: none;
  overflow-y: auto;
  padding: 2px 0 10px;
}

.chat-model-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.chat-model-picker-item.selected {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
}

.chat-model-picker-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chat-model-picker-item strong,
.chat-model-picker-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-picker-item strong {
  font-size: 13px;
}

.chat-model-picker-item small {
  color: var(--text-muted);
  font-size: 11px;
}

.chat-model-picker-item em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
}

.chat-model-picker-item.selected em {
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.chat-model-picker-empty {
  padding: 20px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: var(--text-muted);
  text-align: center;
}

.chat-model-picker-settings {
  width: 100%;
  min-height: 44px;
  margin: 10px 0 4px;
  border: 1px solid var(--accent-mid);
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.chat-session-model-cards,
.chat-response-length-cards {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.chat-session-model-cards {
  max-height: 220px;
  overflow-y: auto;
}

.chat-session-model-card,
.chat-response-length-card {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.chat-session-model-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.chat-session-model-card.selected,
.chat-response-length-card.selected {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
}

.chat-session-model-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chat-session-model-card strong,
.chat-session-model-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-session-model-card strong {
  font-size: 13px;
}

.chat-session-model-card small {
  color: var(--text-muted);
  font-size: 11px;
}

.chat-session-model-card em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
}

.chat-session-model-card.selected em {
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

.chat-session-model-card.selected strong {
  color: var(--accent) !important;
}

.chat-response-length-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.chat-response-length-card {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  padding: 11px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.chat-response-length-card + .chat-response-length-card::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.chat-response-length-card strong {
  color: var(--text-primary);
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 900;
}

.chat-response-length-card small {
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-response-length-card.selected strong {
  color: var(--accent) !important;
}

.chat-response-length-card.selected {
  border: 1px solid var(--accent-mid) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.chat-response-length-card.selected small {
  color: var(--accent) !important;
}

@media (max-width: 480px) {
  .chat-model-picker-btn {
    max-width: 136px;
    height: 32px;
    padding: 0 8px;
  }

  .chat-model-picker-btn .cmp-meta {
    display: none;
  }

  .chat-response-length-cards {
    grid-template-columns: 1fr;
  }

  .chat-response-length-card {
    justify-content: flex-start;
  }

  .chat-response-length-card + .chat-response-length-card::before {
    left: 9px;
    right: 9px;
    top: -2px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ==========================================================================
   通用 App 风格弹窗：替换浏览器原生 confirm / prompt
   ========================================================================== */

.dream-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dream-dialog {
  width: min(100%, 360px);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(28, 28, 44, 0.96), rgba(14, 14, 24, 0.96));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: dreamDialogIn 0.16s ease both;
}

.dream-dialog h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
}

.dream-dialog p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.dream-dialog-input {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-primary);
}

.dream-dialog-input:focus {
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dream-dialog-error {
  min-height: 18px;
  margin-top: 6px;
  color: var(--error);
  font-size: 12px;
}

.dream-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.dream-dialog-btn {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-weight: 800;
}

.dream-dialog-btn.secondary {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-secondary);
}

.dream-dialog-btn.primary {
  border-color: var(--accent-mid);
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end));
  color: #11111a;
}

.dream-dialog-btn.danger {
  border-color: rgba(239, 68, 68, 0.42);
  background: linear-gradient(135deg, #ef4444, #fb7185);
  color: white;
}

.dream-dialog-btn:active {
  transform: scale(0.97);
}

@keyframes dreamDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   App 风格开关：替换网页感 checkbox
   ========================================================================== */

input[type="checkbox"]:not(#loginAgreementCheckbox) {
  width: 46px !important;
  min-width: 46px !important;
  height: 26px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"]:not(#loginAgreementCheckbox)::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="checkbox"]:not(#loginAgreementCheckbox):checked {
  border-color: var(--accent-mid) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

input[type="checkbox"]:not(#loginAgreementCheckbox):checked::after {
  background: #fff !important;
  transform: translateX(20px) !important;
}

input[type="checkbox"]:not(#loginAgreementCheckbox):focus-visible {
  outline: 2px solid var(--accent-mid) !important;
  outline-offset: 3px !important;
}

.chat-setting-row input[type="checkbox"],
.toggle-label input[type="checkbox"],
.storyline-worldbook-option input[type="checkbox"],
.standalone-manager-check input[type="checkbox"],
.standalone-manager-flags input[type="checkbox"],
.worldbook-flags input[type="checkbox"] {
  flex: 0 0 auto;
}

.chat-setting-row,
.toggle-label {
  cursor: pointer;
}

.chat-setting-row[hidden] {
  display: none !important;
}

/* 系统设置与舞台剧顶栏 */
#systemSettingsPage .create-header,
#windowModeSettingsPage .create-header,
#fontPreviewPage .create-header,
#themeSettingsPage .create-header,
#stagePlayEditorPage .create-header,
#scenesPage .browse-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 36, 0.70) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

#systemSettingsPage .create-header,
#windowModeSettingsPage .create-header,
#fontPreviewPage .create-header,
#themeSettingsPage .create-header,
#stagePlayEditorPage .create-header {
  position: sticky !important;
  top: 0;
  z-index: 20;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

.system-fullscreen-header h2 {
  flex: 1;
  text-align: center;
}

.system-fullscreen-header .create-back-btn {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 24px !important;
}

#windowModeSettingsPage,
#fontPreviewPage,
#themeSettingsPage {
  background: var(--bg-main);
}

#saveWindowModeBtn,
#fontPreviewSaveBtn,
#themeSaveBtn,
#saveModelSettingsBtn {
  display: none !important;
}

#systemSettingsPage .profile-section-card,
#windowModeSettingsPage .profile-section-card,
#fontPreviewPage .create-form,
#themeSettingsPage .theme-settings-section {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#systemSettingsPage .standalone-manager-item,
#windowModeSettingsPage .standalone-manager-item,
#themeSettingsPage .theme-mode-row {
  margin: 0 !important;
  padding: 13px 4px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#windowModeSettingsPage .category-select-grid,
#fontPreviewPage .category-select-grid {
  display: grid;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

#windowModeSettingsPage .category-chip,
#fontPreviewPage .category-chip {
  border-radius: 12px !important;
}

#windowModePreview,
#fontPreviewStage {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  overflow: hidden;
}

#themeSettingsPage .create-form {
  display: grid;
  gap: 14px;
}

#themeSettingsPage .theme-settings-section {
  padding: 14px !important;
}

.chat-bg {
  opacity: var(--chat-bg-opacity, 0.32) !important;
  filter: none !important;
}

.chat-bg::after {
  background: rgba(10, 10, 15, var(--chat-bg-overlay-alpha, 0.18)) !important;
}

/* 聊天抽屉 */
#chatToolSheet .chat-sheet-backdrop,
#modelSettingsSheet .chat-sheet-backdrop,
#chatModelSettingSheet .chat-sheet-backdrop,
#chatModelPickerSheet .chat-sheet-backdrop,
#chatWindowBeautySheet .chat-sheet-backdrop,
#chatAppearanceSheet .chat-sheet-backdrop,
#customSettingSheet .chat-sheet-backdrop,
#sessionSupplementSheet .chat-sheet-backdrop,
#archiveSheet .chat-sheet-backdrop {
  background: rgba(4, 5, 10, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#chatToolSheet .chat-sheet-panel,
#chatModelSettingSheet .chat-sheet-panel,
#chatModelPickerSheet .chat-sheet-panel,
#chatWindowBeautySheet .chat-sheet-panel,
#chatAppearanceSheet .chat-sheet-panel,
#customSettingSheet .chat-sheet-panel,
#sessionSupplementSheet .chat-sheet-panel,
#archiveSheet .chat-sheet-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 36, 0.70) !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

#chatModelSettingSheet .chat-sheet-panel,
#chatWindowBeautySheet .chat-sheet-panel {
  top: 0 !important;
  bottom: 0 !important;
  max-height: none !important;
  height: var(--app-viewport-height, 100vh) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  border-top: none !important;
  border-radius: 0 !important;
}

#modelSettingsSheet .chat-sheet-panel {
  top: 0 !important;
  bottom: 0 !important;
  max-height: none !important;
  height: var(--app-viewport-height, 100vh) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  border-top: none !important;
  border-radius: 0 !important;
  background: rgba(22, 22, 36, 0.70) !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

#modelSettingsSheet .chat-sheet-panel::before {
  display: none !important;
}

#modelSettingsSheet .chat-sheet-title-row {
  top: 0 !important;
  margin: 0 -16px 14px !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 36, 0.62) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

#modelSettingsSheet .chat-sheet-title-row .chat-sheet-title {
  flex: 1;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

#modelSettingsSheet input,
#modelSettingsSheet select,
#modelSettingsSheet textarea,
#windowModeSettingsPage select,
#fontPreviewPage select,
#themeSettingsPage select {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

#chatModelSettingSheet .chat-sheet-panel::before,
#chatModelPickerSheet .chat-sheet-panel::before,
#chatWindowBeautySheet .chat-sheet-panel::before {
  display: none !important;
}

#chatModelSettingSheet .chat-sheet-title-row,
#chatWindowBeautySheet .chat-sheet-title-row,
#chatModelSettingSheet .chat-sheet-title,
#chatWindowBeautySheet .chat-sheet-title {
  top: 0 !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

#chatModelSettingSheet .chat-sheet-title-row .chat-sheet-title {
  flex: 1;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

.sheet-save-btn {
  flex: 0 0 auto;
  min-width: 52px;
  height: 32px;
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

#chatSessionModelSaveBtn {
  display: none !important;
}

#chatWindowBeautySaveBtn {
  display: none !important;
}

#chatWindowBeautySheet .chat-sheet-title-row {
  position: sticky !important;
  top: 0 !important;
  z-index: 5;
  margin: 0 -16px 14px !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
  align-items: center;
}

#chatWindowBeautySheet .chat-sheet-title-row .chat-sheet-title {
  flex: 1;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

#chatToolSheet .chat-sheet-panel::before,
#chatModelSettingSheet .chat-sheet-panel::before,
#chatModelPickerSheet .chat-sheet-panel::before,
#chatWindowBeautySheet .chat-sheet-panel::before,
#chatAppearanceSheet .chat-sheet-panel::before,
#customSettingSheet .chat-sheet-panel::before,
#sessionSupplementSheet .chat-sheet-panel::before,
#archiveSheet .chat-sheet-panel::before {
  content: '';
  position: sticky;
  top: 0;
  display: block;
  width: 42px;
  height: 4px;
  margin: 9px auto 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

#chatModelSettingSheet .chat-sheet-panel::before,
#chatWindowBeautySheet .chat-sheet-panel::before {
  display: none !important;
}

#chatToolSheet .chat-sheet-title,
#chatModelSettingSheet .chat-sheet-title,
#chatModelPickerSheet .chat-sheet-title,
#chatWindowBeautySheet .chat-sheet-title,
#chatAppearanceSheet .chat-sheet-title,
#customSettingSheet .chat-sheet-title,
#sessionSupplementSheet .chat-sheet-title,
#archiveSheet .chat-sheet-title,
#chatModelSettingSheet .chat-sheet-title-row,
#chatModelPickerSheet .chat-sheet-title-row,
#chatWindowBeautySheet .chat-sheet-title-row,
#sessionSupplementSheet .chat-sheet-title-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 36, 0.62) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

#chatToolSheet .chat-tools-item,
#customSettingSheet .chat-action-row,
#archiveSheet .chat-action-row,
#chatAppearanceSheet .chat-setting-row,
#chatWindowBeautySheet .chat-setting-row,
#sessionSupplementSheet .chat-setting-row,
#chatModelSettingSheet .chat-setting-row {
  margin: 0 !important;
  padding: 13px 4px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chatToolSheet .chat-tools-item:active,
#customSettingSheet .chat-action-row:active,
#archiveSheet .chat-action-row:active,
#chatAppearanceSheet .chat-setting-row:active,
#chatWindowBeautySheet .chat-setting-row:active,
#sessionSupplementSheet .chat-setting-row:active,
#chatModelSettingSheet .chat-setting-row:active {
  transform: none;
  background: rgba(255, 255, 255, 0.035) !important;
}

#chatToolSheet .chat-tools-item span,
#customSettingSheet .chat-action-row span,
#archiveSheet .chat-action-row span,
#chatAppearanceSheet .chat-setting-row span,
#chatWindowBeautySheet .chat-setting-row span,
#sessionSupplementSheet .chat-setting-row span,
#chatModelSettingSheet .chat-setting-row span {
  color: rgba(255, 255, 255, 0.92) !important;
}

#chatToolSheet .chat-tools-item small,
#customSettingSheet .chat-action-row small,
#archiveSheet .chat-action-row small,
#chatAppearanceSheet .chat-setting-row small,
#chatWindowBeautySheet .chat-setting-row small,
#sessionSupplementSheet .chat-setting-row small,
#chatModelSettingSheet .chat-setting-row small {
  color: rgba(255, 255, 255, 0.56) !important;
}

#chatToolSheet .chat-tool-grid,
#customSettingSheet .chat-action-list,
#archiveSheet .chat-action-list,
#chatAppearanceSheet .chat-setting-list {
  gap: 0 !important;
  padding-top: 4px;
}

#chatModelSettingSheet input,
#chatModelSettingSheet textarea,
#chatWindowBeautySheet input,
#chatWindowBeautySheet textarea,
#sessionSupplementSheet textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

#chatModelSettingSheet input::placeholder,
#chatModelSettingSheet textarea::placeholder,
#chatWindowBeautySheet input::placeholder,
#chatWindowBeautySheet textarea::placeholder,
#sessionSupplementSheet textarea::placeholder {
  color: rgba(255, 255, 255, 0.46) !important;
}

/* ==========================================================================
   聊天消息操作条：轻量浮动按钮
   ========================================================================== */

.msg-actions {
  align-items: center;
  gap: 7px !important;
  width: fit-content;
  max-width: 100%;
  margin-top: 7px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.msg.user .msg-actions {
  margin-left: auto;
}

.msg-action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 760;
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.msg-action-btn svg {
  width: 14px;
  height: 14px;
}

.msg-action-btn:active {
  transform: scale(0.94);
}

.msg-action-btn:hover,
.msg-action-btn:focus-visible {
  border-color: rgba(192, 132, 252, 0.34) !important;
  background: rgba(192, 132, 252, 0.09) !important;
  color: var(--accent) !important;
}

.msg-action-btn.msg-action-danger {
  border-color: rgba(248, 113, 113, 0.18) !important;
  background: rgba(248, 113, 113, 0.045) !important;
  color: rgba(252, 165, 165, 0.92) !important;
}

.msg-action-btn.msg-action-danger:hover,
.msg-action-btn.msg-action-danger:focus-visible {
  border-color: rgba(248, 113, 113, 0.36) !important;
  background: rgba(248, 113, 113, 0.1) !important;
  color: #fecaca !important;
}

.msg-variant-switch {
  min-width: auto !important;
  color: #86efac !important;
}

@media (max-width: 520px) {
  .msg-actions {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .msg-actions::-webkit-scrollbar {
    display: none;
  }

.msg-action-btn {
    flex: 0 0 auto;
  }
}

/* 聊天气泡白色选项 */

.chat-messages:not(.classic-mode).assistant-bubble-white .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode).user-bubble-white .msg.user .msg-bubble,
.window-mode-preview.chat-messages.assistant-bubble-white .msg.assistant:not(.failed) .msg-bubble,
.window-mode-preview.chat-messages.user-bubble-white .msg.user .msg-bubble {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 16px rgba(255, 255, 255, 0.26) !important;
}

.msg-bubble .msg-inline-blue {
  color: #0084ff !important;
}

/* 聊天输入栏 */
.chat-input-area {
  background: rgba(22, 22, 36, 0.70) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.4) !important;
}

.chat-input-area textarea {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  caret-color: rgba(255, 255, 255, 0.95);
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chat-input-area textarea::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

.chat-input-area textarea:focus {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* 聊天顶部栏 */
.chat-header {
  background: rgba(22, 22, 36, 0.70) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
}

.chat-header .chat-model-select,
.chat-header .chat-model-picker-btn {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* 窗口美化模式页签 */
.chat-mode-tabs-section {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -1px -16px 10px;
  padding: 10px 16px;
  background: rgba(16, 18, 28, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chat-mode-tabs-section .section-title {
  display: none;
}

.chat-mode-tabs-section .category-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.chat-mode-tabs-section .category-chip {
  height: 36px !important;
  border-radius: 12px !important;
}

.chat-mode-page {
  display: grid;
  gap: 12px;
}

.chat-mode-page[hidden] {
  display: none !important;
}

.classic-mode-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.classic-mode-card strong {
  color: var(--text-primary);
  font-size: 14px;
}

.classic-mode-card span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.chat-beauty-appearance-section {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

#chatWindowBeautySheet[data-beauty-scope="global"] .chat-beauty-appearance-section {
  display: none !important;
}

.beauty-appearance-list {
  display: grid;
  gap: 8px;
}

.beauty-appearance-list .chat-setting-row {
  margin: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.beauty-clarity-row {
  align-items: flex-start !important;
  flex-direction: column;
}

.beauty-clarity-row span {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.beauty-clarity-row small {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px;
}

.beauty-clarity-row input[type="range"] {
  width: 100%;
  accent-color: rgba(126, 231, 255, 0.9);
}

.chat-beauty-preview {
  position: relative;
  background-position: center !important;
  background-size: cover !important;
  isolation: isolate;
}

.chat-beauty-preview.has-chat-bg-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 8, 14, var(--beauty-preview-overlay-alpha, 0.36));
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* 弱气泡自定义 */
.bubble-custom-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.bubble-custom-card {
  display: grid;
  gap: 10px;
}

.bubble-custom-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.bubble-custom-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bubble-custom-meta {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
}

.bubble-custom-meta strong {
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.bubble-picker-entry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.bubble-picker-entry::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--swatch-color);
}

.bubble-swatch-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.bubble-swatch-row::-webkit-scrollbar {
  display: none;
}

.bubble-swatch {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.bubble-text-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.bubble-text-row::-webkit-scrollbar {
  display: none;
}

.bubble-text-swatch {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.bubble-text-default {
  width: auto;
  min-width: 44px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 12px;
}

.bubble-opacity-control {
  display: grid;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12px;
}

.bubble-opacity-control span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.bubble-opacity-control b {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.bubble-opacity-control input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
}

.bubble-opacity-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.36));
}

.bubble-opacity-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.bubble-opacity-control input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.36));
}

.bubble-opacity-control input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

@media (max-width: 420px) {
  .bubble-custom-row-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bubble-picker-entry {
    align-self: flex-start;
  }
}

.chat-messages:not(.classic-mode).assistant-bubble-soft-error .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode).assistant-bubble-soft-purple .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode).assistant-bubble-soft-cyan .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode).assistant-bubble-soft-pink .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode).assistant-bubble-soft-green .msg.assistant:not(.failed) .msg-bubble {
  border-color: var(--assistant-soft-bubble-border, rgba(192, 132, 252, 0.34)) !important;
  background: var(--assistant-soft-bubble-bg, rgba(88, 28, 135, 0.18)) !important;
  color: var(--assistant-soft-bubble-text, var(--text-primary)) !important;
}

.chat-messages:not(.classic-mode).assistant-bubble-soft-error .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode).assistant-bubble-soft-purple .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode).assistant-bubble-soft-cyan .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode).assistant-bubble-soft-pink .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode).assistant-bubble-soft-green .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode).assistant-bubble-soft-error .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode).assistant-bubble-soft-purple .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode).assistant-bubble-soft-cyan .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode).assistant-bubble-soft-pink .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode).assistant-bubble-soft-green .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode).assistant-bubble-soft-error .msg.assistant:not(.failed) .msg-bubble blockquote,
.chat-messages:not(.classic-mode).assistant-bubble-soft-purple .msg.assistant:not(.failed) .msg-bubble blockquote,
.chat-messages:not(.classic-mode).assistant-bubble-soft-cyan .msg.assistant:not(.failed) .msg-bubble blockquote,
.chat-messages:not(.classic-mode).assistant-bubble-soft-pink .msg.assistant:not(.failed) .msg-bubble blockquote,
.chat-messages:not(.classic-mode).assistant-bubble-soft-green .msg.assistant:not(.failed) .msg-bubble blockquote {
  color: var(--assistant-soft-bubble-text, var(--text-primary)) !important;
}

.chat-messages:not(.classic-mode).user-bubble-soft-error .msg.user .msg-bubble,
.chat-messages:not(.classic-mode).user-bubble-soft-purple .msg.user .msg-bubble,
.chat-messages:not(.classic-mode).user-bubble-soft-cyan .msg.user .msg-bubble,
.chat-messages:not(.classic-mode).user-bubble-soft-pink .msg.user .msg-bubble,
.chat-messages:not(.classic-mode).user-bubble-soft-green .msg.user .msg-bubble {
  border-color: var(--user-soft-bubble-border, rgba(192, 132, 252, 0.34)) !important;
  background: var(--user-soft-bubble-bg, rgba(88, 28, 135, 0.18)) !important;
  color: var(--user-soft-bubble-text, var(--text-primary)) !important;
}

.chat-messages:not(.classic-mode).user-bubble-soft-error .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode).user-bubble-soft-purple .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode).user-bubble-soft-cyan .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode).user-bubble-soft-pink .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode).user-bubble-soft-green .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode).user-bubble-soft-error .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode).user-bubble-soft-purple .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode).user-bubble-soft-cyan .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode).user-bubble-soft-pink .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode).user-bubble-soft-green .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode).user-bubble-soft-error .msg.user .msg-bubble blockquote,
.chat-messages:not(.classic-mode).user-bubble-soft-purple .msg.user .msg-bubble blockquote,
.chat-messages:not(.classic-mode).user-bubble-soft-cyan .msg.user .msg-bubble blockquote,
.chat-messages:not(.classic-mode).user-bubble-soft-pink .msg.user .msg-bubble blockquote,
.chat-messages:not(.classic-mode).user-bubble-soft-green .msg.user .msg-bubble blockquote {
  color: var(--user-soft-bubble-text, var(--text-primary)) !important;
}

/* 聊天默认气泡 */

.chat-messages:not(.classic-mode) {
  gap: 2px !important;
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user {
  width: fit-content;
  max-width: min(90%, 720px) !important;
  margin: 1px 0 !important;
}

.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user {
  align-self: flex-end !important;
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant {
  align-self: flex-start !important;
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble {
  padding: 9px 8px !important;
  border-radius: 18px !important;
  line-height: 1.42 !important;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble {
  border-bottom-left-radius: 4px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(30, 30, 30, 0.58) !important;
  color: #e4e4e7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble {
  border-bottom-right-radius: 4px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #27272a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chat-messages:not(.classic-mode) .msg-bubble > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.chat-messages:not(.classic-mode) .msg-bubble p {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.chat-messages:not(.classic-mode) .msg-bubble p:last-child,
.chat-messages:not(.classic-mode) .msg-bubble p:empty {
  margin-bottom: 0 !important;
}

.chat-messages:not(.classic-mode) .msg-bubble p:empty {
  display: none !important;
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble ul,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble ol,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble blockquote,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble pre,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble ul,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble ol,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble blockquote,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble pre {
  line-height: 1.34 !important;
}

.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble p,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble li,
.chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble blockquote {
  color: #e4e4e7;
}

.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble p,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble li,
.chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble blockquote {
  color: #27272a;
}

html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(24, 24, 27, 0.08) !important;
  color: #27272a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble {
  background: rgba(30, 30, 30, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble p,
html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble li,
html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant:not(.failed) .msg-bubble blockquote {
  color: #e4e4e7;
}

html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble p,
html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble li,
html[data-color-mode="light"] .chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user .msg-bubble blockquote {
  color: #27272a;
}

@media (max-width: 520px) {
  .chat-messages:not(.classic-mode):not(.assistant-bubble-white):not(.assistant-bubble-soft-error):not(.assistant-bubble-soft-purple):not(.assistant-bubble-soft-cyan):not(.assistant-bubble-soft-pink):not(.assistant-bubble-soft-green) .msg.assistant,
  .chat-messages:not(.classic-mode):not(.user-bubble-white):not(.user-bubble-soft-error):not(.user-bubble-soft-purple):not(.user-bubble-soft-cyan):not(.user-bubble-soft-pink):not(.user-bubble-soft-green) .msg.user {
    max-width: min(90%, 720px) !important;
    margin: 1px 0 !important;
  }
}

/* 聊天消息高容量排版 */
.chat-messages:not(.classic-mode) .msg {
  max-width: min(90%, 720px) !important;
}

.chat-messages:not(.classic-mode) .msg-bubble {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 9px 8px !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

.chat-messages:not(.classic-mode) .msg {
  width: fit-content !important;
  max-width: min(90%, 720px) !important;
}

.chat-messages:not(.classic-mode) .msg.user {
  align-self: flex-end !important;
  align-items: flex-end !important;
}

.chat-messages:not(.classic-mode) .msg.assistant {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

.chat-messages:not(.classic-mode) .msg-bubble {
  flex: 0 1 auto !important;
  align-self: flex-start !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}

.chat-messages:not(.classic-mode) .msg.user .msg-bubble {
  align-self: flex-end !important;
}

.chat-messages:not(.classic-mode) .msg.assistant .msg-bubble {
  align-self: flex-start !important;
}

.chat-messages.classic-mode .msg.assistant {
  width: auto !important;
  max-width: 100% !important;
  align-self: stretch !important;
  align-items: stretch !important;
}

.chat-messages.classic-mode .msg.assistant .msg-bubble {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.chat-messages.classic-mode .msg.user {
  width: fit-content !important;
  max-width: min(82%, 640px) !important;
  align-self: flex-start !important;
  align-items: flex-start !important;
}

.chat-messages.classic-mode .msg.user .msg-bubble {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}

.chat-messages:not(.classic-mode) .msg-bubble * {
  line-height: 1.42 !important;
}

.chat-messages:not(.classic-mode) .msg-bubble p,
.chat-messages:not(.classic-mode) .msg-bubble li,
.chat-messages:not(.classic-mode) .msg-bubble blockquote,
.chat-messages:not(.classic-mode) .msg-bubble ul,
.chat-messages:not(.classic-mode) .msg-bubble ol {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  line-height: 1.42 !important;
  white-space: normal !important;
}

.chat-messages:not(.classic-mode) .msg-bubble br {
  display: initial !important;
}

.chat-messages:not(.classic-mode) .msg-bubble pre,
.chat-messages:not(.classic-mode) .msg-bubble code {
  white-space: pre-wrap !important;
}

.chat-messages:not(.classic-mode) .msg-bubble p + p,
.chat-messages:not(.classic-mode) .msg-bubble p + ul,
.chat-messages:not(.classic-mode) .msg-bubble p + ol,
.chat-messages:not(.classic-mode) .msg-bubble ul + p,
.chat-messages:not(.classic-mode) .msg-bubble ol + p,
.chat-messages:not(.classic-mode) .msg-bubble blockquote + p,
.chat-messages:not(.classic-mode) .msg-bubble p + blockquote {
  margin-top: 0.55em !important;
}

/* 经典模式纵向密度 */
.chat-messages.classic-mode {
  gap: 8px !important;
}

.chat-messages.classic-mode.font-small .msg-bubble {
  line-height: 1.42 !important;
}

.chat-messages.classic-mode.font-medium .msg-bubble {
  line-height: 1.46 !important;
}

.chat-messages.classic-mode.font-large .msg-bubble {
  line-height: 1.54 !important;
}

.chat-messages.classic-mode .msg-bubble p,
.chat-messages.classic-mode .msg-bubble li,
.chat-messages.classic-mode .msg-bubble blockquote,
.chat-messages.classic-mode .msg-bubble ul,
.chat-messages.classic-mode .msg-bubble ol {
  line-height: inherit !important;
}

.chat-messages.classic-mode .msg-bubble p + p,
.chat-messages.classic-mode .msg-bubble p + ul,
.chat-messages.classic-mode .msg-bubble p + ol,
.chat-messages.classic-mode .msg-bubble ul + p,
.chat-messages.classic-mode .msg-bubble ol + p,
.chat-messages.classic-mode .msg-bubble pre + p,
.chat-messages.classic-mode .msg-bubble p + pre,
.chat-messages.classic-mode .msg-bubble blockquote + p,
.chat-messages.classic-mode .msg-bubble p + blockquote,
.chat-messages.classic-mode .msg-bubble h1 + p,
.chat-messages.classic-mode .msg-bubble h2 + p,
.chat-messages.classic-mode .msg-bubble h3 + p,
.chat-messages.classic-mode .msg-bubble h4 + p,
.chat-messages.classic-mode .msg-bubble h5 + p,
.chat-messages.classic-mode .msg-bubble h6 + p,
.chat-messages.classic-mode .msg-bubble ul + ul,
.chat-messages.classic-mode .msg-bubble ol + ol {
  margin-top: 0.55em !important;
}

/* 经典模式用户气泡 */
.chat-messages.classic-mode.classic-user-bubble-white .msg.user .msg-bubble,
.window-mode-preview.chat-messages.classic-mode.classic-user-bubble-white .msg.user .msg-bubble {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #27272a !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 16px rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chat-messages.classic-mode.classic-user-bubble-soft-purple .msg.user .msg-bubble,
.window-mode-preview.chat-messages.classic-mode.classic-user-bubble-soft-purple .msg.user .msg-bubble {
  background: var(--user-soft-bubble-bg, rgba(192, 132, 252, 0.18)) !important;
  color: var(--user-soft-bubble-text, var(--text-primary)) !important;
  border: 1px solid var(--user-soft-bubble-border, rgba(192, 132, 252, 0.34)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.chat-messages.classic-mode.classic-user-bubble-soft-purple .msg.user .msg-bubble p,
.chat-messages.classic-mode.classic-user-bubble-soft-purple .msg.user .msg-bubble li,
.chat-messages.classic-mode.classic-user-bubble-soft-purple .msg.user .msg-bubble blockquote {
  color: var(--user-soft-bubble-text, var(--text-primary)) !important;
}

/* 消息编辑页 */
.message-editor-overlay {
  background: rgba(4, 5, 10, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.message-editor-panel {
  background: rgba(22, 22, 36, 0.70) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.message-editor-header {
  gap: 10px !important;
  padding: calc(max(env(safe-area-inset-top, 0px), var(--app-top-inset)) + 10px) 12px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(22, 22, 36, 0.70) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

#messageEditorOverlay .message-editor-close {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 24px !important;
  line-height: 30px !important;
  text-align: center !important;
}

#messageEditorOverlay .message-editor-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-editor-actions {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.message-editor-save-btn,
.message-editor-extra-btn {
  flex: 0 1 auto;
  min-width: 48px;
  max-width: 104px;
  height: 34px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--accent-mid);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-editor-extra-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

#messageEditorOverlay .message-editor-footer {
  display: none !important;
}

.message-editor-body {
  padding: 12px 10px !important;
}

.message-editor-input,
.message-editor-field-textarea {
  width: 100% !important;
  align-self: stretch;
  padding: 9px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  background: rgba(30, 30, 30, 0.58) !important;
  color: #e4e4e7 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.message-editor-input {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.message-editor-counter {
  align-self: flex-end;
  margin: -4px 4px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.message-editor-counter.over-limit {
  color: #fb7185;
}

.message-editor-counter[hidden] {
  display: none !important;
}

.message-editor-field-input {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.chat-messages.font-small ~ .chat-message-nav ~ .chat-input-area + .message-editor-overlay .message-editor-input,
.message-editor-overlay.editor-font-small .message-editor-input,
.message-editor-overlay.editor-font-small .message-editor-field-textarea {
  font-size: 14px !important;
}

.message-editor-overlay.editor-font-medium .message-editor-input,
.message-editor-overlay.editor-font-medium .message-editor-field-textarea {
  font-size: 15px !important;
}

.message-editor-overlay.editor-font-large .message-editor-input,
.message-editor-overlay.editor-font-large .message-editor-field-textarea {
  font-size: 17px !important;
}

@media (max-width: 420px) {
  .message-editor-actions {
    gap: 5px;
  }

  #messageEditorOverlay .message-editor-save-btn,
  #messageEditorOverlay .message-editor-extra-btn {
    max-width: 92px;
    padding: 0 8px;
    font-size: 11px;
  }
}