:root {
  color-scheme: dark;
  --bg: #101214;
  --panel: #171a1d;
  --panel-2: #1d2226;
  --line: #2c3338;
  --text: #f3f0e9;
  --muted: #a5aaa9;
  --accent: #e8a35f;
  --accent-2: #7fc7b5;
  --danger: #e58080;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --keyboard-offset: 0px;
  /* 品牌形象图（mark）的圆角：2026-10-16 产品反馈"太方了"——改这一处即可整体调圆 */
  --brand-mark-radius: 34%;
  /* 旧云梦对白/链接色：--SmartThemeQuoteColor 默认值（STV2云梦/public/style.css:71） */
  --msg-quote-color: rgb(225, 138, 36);

  /* ── 旧云梦浅色主题令牌（来源 public/css/yunmeng-ai.css）──
     只用于聊天设定工作区（人设设定 / 世界设定 / 剧情安排）与卡设补全工作区，
     不作用于整体 UI（产品要求：不要整站换肤）。 */
  --ym-ink: #182933;
  --ym-muted: #63747a;
  --ym-line: #ccd9d4;
  --ym-paper: #f8fbf8;
  --ym-paper-2: #eef4f1;
  --ym-canvas: #e6efec;
  --ym-green: #08786d;
  --ym-green-dark: #045e57;
  --ym-coral: #c96750;
  --visual-viewport-height: 100dvh;
  --composer-height: 94px;
  /* ── 玻璃主题令牌（输入面板/贴片/顶栏/菜单统一使用）────────────── */
  --glass-bg: rgba(32, 32, 32, .48);
  --glass-bg-chip: rgba(40, 40, 40, .56);
  --glass-bg-menu: rgba(22, 22, 22, .76);
  --glass-head-bg: rgba(22, 22, 22, .58);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-border-soft: rgba(255, 255, 255, .10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .12);
  --glass-blur: blur(18px) saturate(1.25);
  --glass-blur-soft: blur(12px) saturate(1.18);
  --glass-shadow: 0 12px 30px rgba(0, 0, 0, .30);
  /* 输入框玻璃：内部保持无色（否则会变成实心胶囊），主题色只落在 1px 边框上 */
  --composer-glass-fill: rgba(24, 25, 28, .34);
  --composer-glass-rim: rgba(104, 178, 238, .42);
  --composer-glass-rim-strong: rgba(126, 196, 248, .58);
  /* 冰白：取自配色参考图的冰白（#dcf2fb），用于发送键等冷调强调 */
  --ice-white: #dcf2fb;
  --ice-glow: rgba(150, 205, 245, .38);


  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; touch-action: pan-y; }
button, textarea, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; }
/* ── 左导航（对齐旧云梦）：280px 浅色面板 + 44px 按钮 + 3px 选中指示条 + 内置最近聊天 ── */
.app-shell { grid-template-columns: 280px minmax(0, 1fr); }
.app-nav { grid-column: 1; grid-row: 1 / -1; min-height: 100dvh;
  /* 桌面端：侧栏固定不随页面滚动（旧云梦左侧导航行为） */
  position: sticky; top: 0; align-self: start; height: 100dvh; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 24px 14px 16px; background: #f8fbf8; border-right: 1px solid #c7d8d1; color: var(--ym-ink); z-index: 20; }
.nav-brand { display: flex; align-items: center; gap: 10px; min-height: 60px; margin: 0 2px 18px; padding: 0 5px 18px; border-bottom: 1px solid #cbd9d4; }
.nav-brand .brand-mark { width: 46px; height: 46px; font-size: 18px; }
.nav-brand-copy { display: grid; gap: 4px; }
.nav-brand-copy strong { color: var(--ym-ink); font-size: 21px; font-weight: 700; }
.nav-brand-copy small { color: var(--ym-lilac); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.nav-list, .nav-footer { display: grid; gap: 6px; }
.nav-footer { margin-top: auto; padding-top: 12px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 15px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ym-ink); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.nav-item svg { flex: none; width: 19px; height: 19px; color: #667c7e; }
.nav-item::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.nav-item:hover, .nav-item:focus-visible { border-color: #d0e2db; background: #fff; color: var(--ym-green-dark); outline: none; }
.nav-item.is-active { border-color: #b8dbd0; background: #e1f0ea; color: var(--ym-green-dark); }
.nav-item.is-active::before { background: var(--ym-green); }
.nav-item.is-active svg { color: var(--ym-green); }
.nav-item:disabled { opacity: .45; cursor: not-allowed; }
/* 最近聊天：标题 + 齿轮 + 搜索 + 头像列表（全部内嵌在导航里） */
.nav-recent { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin-top: 24px; padding: 17px 3px 0; border-top: 1px solid #cbd9d4; }
.nav-recent-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 5px; }
.nav-recent-title { color: #6a7b7d; font-size: 11px; font-weight: 700; }
.nav-recent-settings { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #718486; cursor: pointer; }
.nav-recent-settings svg { width: 15px; height: 15px; }
.nav-recent-settings:hover, .nav-recent-settings:focus-visible { border-color: #c9ddd5; background: #fff; color: var(--ym-green-dark); outline: none; }
.nav-recent-search { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 4px; padding: 0 10px; border: 1px solid #cadbd5; border-radius: 5px; background: #fff; }
.nav-recent-search-icon { display: grid; place-items: center; }
.nav-recent-search-icon svg { width: 15px; height: 15px; color: var(--ym-green); opacity: .72; }
.nav-recent-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ym-ink); font-size: 12px; outline: none; }
.nav-recent-search input::placeholder { color: #93a2a0; }
/* 列表：只允许上下滚动（横向裁掉，杜绝左右滑动框）；
   滚动条瘦身到 5px 并做成"滚动时才出现"——默认完全透明，滚动期间显色，停手 700ms 后淡出。
   注意：不能同时写 scrollbar-width/scrollbar-color，否则 Chrome 会忽略 ::-webkit-scrollbar 的 5px 宽度
   （"thin" 在 Chrome 上是 ~11px，不够瘦），故 Firefox 分支用 @supports 单独兜底。 */
.nav-recent-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 8px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.nav-recent-list::-webkit-scrollbar { width: 5px; height: 0; }
.nav-recent-list::-webkit-scrollbar-track, .nav-recent-list::-webkit-scrollbar-corner { background: transparent; }
.nav-recent-list::-webkit-scrollbar-thumb { border-radius: 999px; background: transparent; transition: background-color 260ms ease; }
.nav-recent-list.is-scrolling::-webkit-scrollbar-thumb { background: rgba(116, 152, 145, .62); }
@supports not selector(::-webkit-scrollbar) {
  .nav-recent-list { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 260ms ease; }
  .nav-recent-list.is-scrolling { scrollbar-color: rgba(116, 152, 145, .62) transparent; }
}
/* 行尺寸保持旧云梦值（public/style.css:2690-2722：min-height 48 / padding 8 / gap 10 / 头像 34 / 标题 12px），
   本次只修横向溢出（列表列宽改 minmax(0,1fr) + overflow-x hidden，item 补 min-width:0）与滚动条。 */
.nav-recent-item { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #50656b; text-align: left; overflow: hidden; cursor: pointer; }
.nav-recent-item:hover, .nav-recent-item:focus-visible { border-color: #d0e2db; background: #fff; color: var(--ym-ink); outline: none; }
.nav-recent-item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nav-recent-avatar { flex: none; width: 34px; height: 34px; border: 1px solid #c7d8d1; border-radius: 5px; background: #dce9e4; object-fit: cover; }
.nav-recent-avatar-fallback { display: grid; place-items: center; color: var(--ym-green-dark); font-size: 12px; font-weight: 700; }
.nav-recent-empty { margin: 6px 5px; color: #859592; font-size: 12px; }
.nav-scrim { display: none; }
.nav-scrim[hidden] { display: none !important; }
.topbar { grid-column: 2; grid-row: 1; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: #101214; position: sticky; top: 0; z-index: 15; box-shadow: 0 2px 12px rgba(0, 0, 0, .22); }
.mobile-nav-toggle { display: none; border: 1px solid var(--line); border-radius: 8px; background: #171a1d; color: var(--text); width: 38px; height: 36px; cursor: pointer; }
.app-shell.chat-mode .topbar { display: none; }
.app-shell.chat-mode { display: block; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #171717; }
.app-shell.chat-mode .app-nav, .app-shell.chat-mode #nav-scrim, .app-shell.chat-mode #mobile-nav-toggle { display: none !important; }
.app-shell.chat-mode .view { width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: #0b0f12; }
/* 聊天路由的**首帧**（index.html 内联脚本按 hash 打的 data-boot="chat"）：
 * 刷新 #chat/... 时，app.js 要先等 /session 再等会话数据，这中间会先画出"应用外壳"
 * （导航 + 顶栏 + 空视图）——用户看到的就是"先闪一帧不是聊天页的样子"。
 * 这里让首帧就直接是聊天页的版式（无导航/顶栏、全屏、同色底），app.js 接管后无跳变。
 * 离开聊天（setChatMode(false)）时由 JS 摘掉该标记，避免导航被永久隐藏。 */
html[data-boot="chat"] body { background: #0b0f12; }
html[data-boot="chat"] .app-shell { display: block; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #171717; }
html[data-boot="chat"] .app-nav,
html[data-boot="chat"] .topbar,
html[data-boot="chat"] #nav-scrim,
html[data-boot="chat"] #mobile-nav-toggle { display: none !important; }
html[data-boot="chat"] .view { width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: #0b0f12; }
.brand { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-weight: 760; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #171a1d; background: var(--accent); border-radius: var(--brand-mark-radius, 34%); font-weight: 900; }
/* 形象图版品牌 mark：图片铺满圆角方块（原来的"云"字方块样式保留给纯文字场景） */
.brand-mark-image { object-fit: cover; object-position: 50% 50%; background: #0f1519; }
.topbar-meta { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.topbar-login { color: var(--accent); font-size: 13px; text-decoration: none; }
.topbar-login:hover { color: var(--text); text-decoration: underline; }
/* 阶段 2-A / S4：会话退出入口（最小样式，不改动已有布局与其他控件） */
.topbar-logout { margin-left: 4px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.4; cursor: pointer; }
.topbar-logout:hover { border-color: var(--accent-2); color: var(--text); }
.topbar-logout:disabled { opacity: .6; cursor: default; }
/* 阶段 2-A / S4 修复：退出失败时的明确提示（可重试），不做静默跳转 */
.topbar-notice { color: #e0776c; font-size: 12px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(127, 199, 181, .12); }
.view { grid-column: 2; grid-row: 2; width: min(1240px, 100%); min-width: 0; margin: 0 auto; padding: 30px 28px 50px; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.eyebrow { color: var(--accent-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(26px, 4vw, 42px); line-height: 1.1; margin-top: 8px; }
.subtle { color: var(--muted); line-height: 1.6; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { min-width: 220px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0 13px; outline: none; }
.search:focus, .composer textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); }
.section-tabs { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab { border: 0; border-bottom: 2px solid transparent; background: none; padding: 12px 4px 11px; color: var(--muted); cursor: pointer; }
.tab.active { color: var(--text); border-color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.character-card { position: relative; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color .18s, transform .18s, background .18s; }
.character-card:hover { border-color: #65716f; background: var(--panel-2); transform: translateY(-2px); }
.card-favorite { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(18, 21, 24, .82); color: #f3d2a8; font-size: 19px; line-height: 1; cursor: pointer; }
.card-favorite:hover, .card-favorite.is-active { border-color: var(--accent); background: rgba(18, 21, 24, .96); color: var(--accent); }
.card-art { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #262b2e; }
.card-art-placeholder { display: grid; place-items: center; color: #e8d7bd; background: #2a2928; border-bottom: 1px solid var(--line); }
.card-art-placeholder span { padding: 8px 12px; border: 1px solid rgba(232, 163, 95, .45); border-radius: 999px; font-size: 12px; }
.card-copy { padding: 14px; }
.card-name { min-height: 42px; font-size: 15px; line-height: 1.4; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-meta { color: var(--muted); font-size: 12px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tag { color: #c5d8d1; background: rgba(127, 199, 181, .1); border: 1px solid rgba(127, 199, 181, .2); padding: 3px 7px; border-radius: 999px; font-size: 11px; }
.card-gate { margin-top: 10px; color: #e8d7bd; font-size: 12px; line-height: 1.45; }
.skeleton { min-height: 330px; background: linear-gradient(90deg, #171a1d 25%, #202529 37%, #171a1d 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 8px; border: 1px solid var(--line); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.load-more { display: flex; justify-content: center; padding: 26px 0 0; }
.button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; padding: 10px 14px; cursor: pointer; }
.button:hover { border-color: var(--accent-2); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #1d1b19; font-weight: 750; }
.button.ghost { background: transparent; }
.button.danger { color: var(--danger); }
/* 阶段 3 修复：禁用状态必须一眼可见（禁止与可点击状态同色）。
   要点：降背景强调、降文字对比但仍可读（对背景 ≥ 4.5:1）、cursor: not-allowed，
   且 hover / active / 触摸都不给出“可点”反馈；键盘焦点天然不会落到 disabled 元素上。 */
.button:disabled { cursor: not-allowed; }
.button:disabled:hover { border-color: var(--line); }
.button.primary:disabled,
.button.primary[disabled] {
  background: #2b2823;
  border-color: #3a3733;
  color: #9b958c; /* 对 #2b2823 对比度 ≈ 4.9:1，仍然可读 */
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.button.primary:disabled:hover,
.button.primary:disabled:active,
.button.primary:disabled:focus {
  background: #2b2823;
  border-color: #3a3733;
  color: #9b958c;
}
.button.ghost:disabled,
.button.ghost[disabled] { color: #6f6b64; border-color: var(--line); cursor: not-allowed; background: transparent; }
.button.ghost:disabled:hover { border-color: var(--line); }
.error-banner { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(229, 128, 128, .45); color: #ffd1d1; background: rgba(229, 128, 128, .08); border-radius: 8px; margin-bottom: 18px; }
.banner-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* 中性提示条（已停止生成等非错误状态），沿用错误条的排版，只换配色 */
.notice-banner { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(127, 199, 181, .45); color: #cdeee4; background: rgba(127, 199, 181, .10); border-radius: 8px; margin-bottom: 18px; }
.chat-view { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: #0b0f12;
  /* 背景图亮度可调：上方展示区不再叠加任何压暗（实测 brightness(.84)+opacity .92 曾压暗约 22%） */
  --scene-image-opacity: 1;
  --scene-image-filter: brightness(1) saturate(1);
}
.chat-stage { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: #171717; }
.chat-scene-art { position: absolute; inset: 0; overflow: hidden; background: #171717; }
/* 方案一：全屏暗滤镜已暂停用（保留参数，方案二/回退时把 background 换回下面这行即可）
   原值：linear-gradient(180deg, rgba(7,10,13,.04) 0%, rgba(7,10,13,.08) 32%, rgba(10,13,18,.34) 58%, rgba(10,13,18,.56) 100%) */
.chat-scene-art::after { content: ""; position: absolute; z-index: 2; inset: 0; background: none; pointer-events: none; }
.chat-scene-art-image { position: absolute; z-index: 1; top: 0; left: 50%; width: min(760px, 100%); height: 100%; object-fit: cover; object-position: top center; opacity: var(--scene-image-opacity, 1); filter: var(--scene-image-filter, brightness(1) saturate(1)); transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.chat-scene-art-placeholder { position: absolute; z-index: 1; top: 0; left: 50%; width: min(640px, 100%); height: 100%; transform: translateX(-50%); background: radial-gradient(circle at 50% 20%, #3a4650 0, #202a31 32%, #0b0f12 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 100px, #000 calc(100% - 100px), transparent); mask-image: linear-gradient(90deg, transparent, #000 100px, #000 calc(100% - 100px), transparent); }
.chat-scene-art::before { content: ""; position: absolute; z-index: 0; inset: -26px; background-image: linear-gradient(180deg, rgba(10, 13, 17, .42), rgba(10, 13, 17, .18) 42%, rgba(10, 13, 17, .64)), var(--chat-scene-image); background-position: top center; background-size: cover; filter: blur(18px) saturate(.86); opacity: .72; transform: scale(1.06); pointer-events: none; }
.chat-view.chat-scene-bright .chat-scene-art::after { background: linear-gradient(180deg, rgba(9, 10, 11, .46) 0%, rgba(9, 10, 11, .18) 38%, rgba(9, 10, 11, .52) 100%); }
.chat-surface { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* 顶部固定渐变遮罩：上部角色图干净展示→向下渐暗入文字区（稳定，不随滚动/输入法拉起变化） */

/* 方案一：全屏暗层暂停用（原参数：linear-gradient(180deg, rgba(10,13,20,0) 0%, rgba(10,13,20,0) 24%, rgba(10,13,20,.38) 54%, rgba(10,13,20,.70) 100%)）*/
.chat-message-mask { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; background: none; }
.chat-surface > .chat-head { position: sticky; z-index: 6; flex: 0 0 auto; }
.chat-surface > #chat-error { z-index: 5; flex: 0 0 auto; }
.chat-surface > #message-list { z-index: 1; }
.chat-head { position: sticky; top: 0; z-index: 6; display: flex; gap: 14px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--glass-border-soft); padding: 6px max(16px, calc((100% - 980px) / 2)); background: var(--glass-head-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .30); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.chat-head-identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.chat-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* 模型入口在聊天顶栏（旧云梦 #st-chat-page-topbar 位置，非输入框） */
.chat-head-model-slot { display: flex; align-items: center; min-width: 0; max-width: min(260px, 38vw); }
.chat-head-model-slot .model-picker { width: max-content; max-width: 100%; }
.chat-head-model-slot .model-switcher-button { min-height: 30px; height: 30px; }


/* 模型入口在聊天顶栏（旧云梦 #st-chat-topbar-actions 位置，非输入框内） */
.chat-head-model-slot { display: flex; align-items: center; min-width: 0; max-width: min(280px, 40vw); }
.chat-head-model-slot .model-switcher-button { min-height: 30px; height: 30px; }

/* 顶部栏"存档 / 开启新对话"：产品决定独立可见（原藏在"会话"菜单内），沿用幽灵按钮风格 */
.chat-head-actions .button.chat-action { color: var(--text); white-space: nowrap; }
.chat-head-actions .button.chat-action:hover,
.chat-head-actions .button.chat-action:focus-visible { border-color: var(--accent-2); background: #203039; }
.back-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); cursor: pointer; }
.chat-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.chat-avatar-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.chat-title { min-width: 0; flex: 1; }
.chat-title .subtle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 会话标题**不可重命名**（产品 2026-10-27）：`.chat-title-editor` 相关样式已随功能一并删除。 */
.chat-actions { position: relative; flex: none; }
.chat-favorite-trigger { flex: none; white-space: nowrap; }
.chat-actions-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 12; display: grid; gap: 3px; min-width: 142px; padding: 6px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg-menu); box-shadow: 0 14px 32px rgba(0, 0, 0, .42); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.chat-actions-panel[hidden] { display: none; }
.chat-actions-panel button { border: 0; border-radius: 5px; padding: 8px 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.chat-actions-panel button:hover, .chat-actions-panel button:focus-visible { background: #26363e; outline: none; }
/* 阶段 7B-3：模型切换入口必须跟随输入区，不能退化成无入口的原生下拉框。 */
/* 模型入口"附着"：悬浮吸附在容器上沿之外（bottom: calc(100% + 6px)），不占容器高度。
   依据：旧云梦 yunmeng-ai.css:1043-1048 对 #send_form 内 #st-chat-model-switcher 的 absolute 吸附。 */
/* 附着（absolute 悬浮在容器上沿）+ pointer-events:none：模型贴片只是视觉"附着"，
   不拦截下方消息区；内部切换按钮恢复 auto，保证自身可点。旧云梦该贴片也不挡消息。 */
/* 模型入口：静态贴合输入区容器（旧云梦在 #send_form 内即有 st-chat-model-switcher） */
/* 模型入口贴合输入容器（旧云梦 #send_form 内即有 #st-chat-model-switcher），静态、可点击 */
/* 模型入口附着贴片：absolute 悬浮容器上沿（左侧），不占容器高度。pointer-events 保留按钮可点。
   依据旧云梦 #send_form 内 #st-chat-model-switcher（yunmeng-ai.css:1043-1048, left:0 bottom:calc(100%+6px)）。 */
.model-picker { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 8; display: flex; align-items: center; min-width: 0; width: max-content; max-width: min(460px, 100%); }

/* 聊天操作附着贴片：absolute 悬浮容器上沿（右侧），含存档/开启新对话。
   依据旧云梦 #send_form 内 #st-chat-quick-actions（style.css:7613, right:0 bottom:calc(100%+8px)）。 */
/* 聊天操作面板：开关统一由输入条的「＋」负责（桌面/手机同一套，2026-10-27 去掉了桌面端的 ⌃ 上箭头） */
.chat-quick-actions-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 12; display: grid; gap: 4px; width: fit-content; min-width: 94px; padding: 5px; font-size: 15px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg-menu); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.chat-quick-actions-menu[hidden] { display: none !important; }
.chat-quick-actions-menu button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 4px 7px; background: transparent; color: rgba(243, 243, 243, .84); text-align: left; cursor: pointer; white-space: nowrap; font-size: 12px; }
.chat-quick-action-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: .85; }
.chat-quick-action-icon svg { display: block; }
.chat-quick-actions-menu button:hover, .chat-quick-actions-menu button:focus-visible { background: #203039; }

.model-switcher-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: auto; min-width: 0; min-height: 30px; height: 30px; padding: 0 10px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg-chip); color: rgba(246, 246, 246, .94); text-align: left; cursor: pointer; box-shadow: var(--glass-highlight); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); }
.model-switcher-button:hover, .model-switcher-button:focus-visible, .model-switcher-button[aria-expanded="true"] { border-color: var(--accent-2); background: #203039; outline: none; }
.model-switcher-button-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.model-switcher-button-copy strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.model-switcher-chevron { flex: none; color: var(--accent-2); font-size: 18px; line-height: 1; }
.model-switcher-badge { flex: none; padding: 2px 7px; border: 1px solid rgba(232, 163, 95, .55); border-radius: 999px; color: #f0d6b4; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.model-switcher-panel { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 20; display: grid; gap: 10px; width: min(560px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 150px)); overflow: auto; padding: 14px; border: 1px solid #53636b; border-radius: 12px; background: #121b1f; box-shadow: 0 18px 46px rgba(0, 0, 0, .58); }
.model-switcher-panel[hidden] { display: none !important; }
.model-switcher-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.model-switcher-head > div:first-child { display: grid; gap: 4px; }
.model-switcher-kicker { color: var(--accent-2); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.model-switcher-head strong { font-size: 17px; }
.model-switcher-head-actions { display: flex; gap: 4px; }
.model-switcher-head-actions .icon-button { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px; font-size: 18px; line-height: 1; }
.model-switcher-head-actions .icon-button:hover, .model-switcher-head-actions .icon-button:focus-visible { border-color: var(--line); background: #203039; color: var(--text); outline: none; }
.model-switcher-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #35464d; border-radius: 8px; background: #182328; }
.model-switcher-current span { color: var(--muted); font-size: 12px; }
.model-switcher-current strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-switcher-options { display: grid; gap: 6px; }
.model-switcher-option { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #35464d; border-radius: 8px; background: #172126; color: var(--text); text-align: left; cursor: pointer; }
.model-switcher-option:hover, .model-switcher-option:focus-visible, .model-switcher-option.is-active { border-color: var(--accent-2); background: #203039; outline: none; }
.model-switcher-option.is-disabled { cursor: not-allowed; opacity: .52; }
.model-switcher-option-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.model-switcher-option-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-switcher-option-copy small { color: var(--muted); font-size: 11px; }
.model-switcher-check { flex: none; color: var(--accent-2); font-size: 17px; }
.model-switcher-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 2px 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.model-switcher-channel { display: block; min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-workspace-open { overflow: hidden; }
.app-shell.model-workspace-mode { display: block; width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; background: #0d1519; }
.app-shell.model-workspace-mode .app-nav,
.app-shell.model-workspace-mode #nav-scrim,
.app-shell.model-workspace-mode #mobile-nav-toggle,
.app-shell.model-workspace-mode > .topbar { display: none !important; }
.app-shell.model-workspace-mode .view { width: 100%; height: 100%; max-width: none; min-height: 0; padding: 0; overflow: hidden; }
.model-workspace-page { position: fixed; inset: 0; z-index: 80; display: block; overflow: hidden; background: #0d1519; }
.model-workspace { display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 0; max-height: none; overflow: hidden; border: 0; border-radius: 0; background: #10191e; box-shadow: none; }
.model-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 28px 20px; border-bottom: 1px solid #2c3940; background: #172126; }
.model-workspace-heading { display: grid; gap: 4px; min-width: 0; }
.model-workspace-back { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-bottom: 5px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.model-workspace-back:hover, .model-workspace-back:focus-visible { color: var(--text); outline: none; }
.model-workspace-header h2 { margin: 5px 0 5px; font-size: 24px; letter-spacing: .01em; }
.model-workspace-header p { margin: 0; color: var(--muted); font-size: 13px; }
.model-workspace-kicker { color: var(--accent-2); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.model-workspace-actions { display: flex; gap: 8px; flex: none; }
.model-workspace-actions .icon-button { width: 36px; height: 36px; border: 1px solid #3a4a52; border-radius: 8px; background: #12191e; font-size: 21px; }
.model-workspace-actions .icon-button:hover, .model-workspace-actions .icon-button:focus-visible { color: var(--text); border-color: var(--accent-2); background: #203039; outline: none; }
.model-workspace-current { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 28px; border-bottom: 1px solid #2a363d; background: #141d22; }
.model-workspace-current span { color: var(--muted); font-size: 12px; }
.model-workspace-current strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.model-workspace-current small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.model-workspace-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); flex: 1; min-height: 0; }
.model-provider-pane { min-width: 0; overflow: auto; border-right: 1px solid #2c3940; background: #151e23; }
.model-catalog-pane { min-width: 0; overflow: auto; background: #10171b; }
.model-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px 14px; }
.model-pane-heading > div { display: grid; gap: 4px; min-width: 0; }
.model-pane-heading strong { font-size: 15px; }
.model-pane-heading small { color: var(--muted); font-size: 12px; font-weight: 500; }
.model-pane-count { display: inline-grid; min-width: 27px; height: 27px; place-items: center; border: 1px solid #3a4a52; border-radius: 999px; color: var(--muted); font-size: 12px; }
.model-provider-list { display: grid; gap: 7px; padding: 0 12px 18px; }
.model-provider-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 12px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.model-provider-item:hover, .model-provider-item:focus-visible { border-color: #3d555f; background: #1c2a30; outline: none; }
.model-provider-item.is-active { border-color: #5a887f; background: #20383b; }
.model-provider-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #293941; color: #cce9df; font-size: 10px; font-weight: 800; }
.model-provider-copy { display: grid; gap: 4px; min-width: 0; }
.model-provider-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-provider-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.model-provider-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.model-catalog-heading { border-bottom: 1px solid #2a363d; }
.model-route-status { flex: none; padding: 4px 9px; border: 1px solid #35534d; border-radius: 999px; color: #bde6d7; background: rgba(127, 199, 181, .09); font-size: 11px; white-space: nowrap; }
.model-catalog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 18px 20px 24px; }
.model-catalog-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; min-height: 72px; padding: 12px 13px; border: 1px solid #2f4149; border-radius: 10px; background: #182329; color: var(--text); text-align: left; cursor: pointer; }
.model-catalog-item:hover, .model-catalog-item:focus-visible { border-color: var(--accent-2); background: #20343a; outline: none; }
.model-catalog-item.is-active { border-color: #80c7b5; background: #1f3b3d; box-shadow: inset 3px 0 0 #80c7b5; }
.model-catalog-item.is-disabled { cursor: not-allowed; opacity: .55; }
.model-catalog-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #4c626b; border-radius: 8px; color: #a8d5ca; font-size: 12px; }
.model-catalog-copy { display: grid; gap: 5px; min-width: 0; }
.model-catalog-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-catalog-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.model-catalog-check { color: #9fe0cb; font-size: 18px; }
.model-workspace-state, .model-workspace-empty { display: grid; place-items: center; align-content: center; gap: 9px; min-height: 250px; padding: 30px; color: var(--muted); text-align: center; }
.model-workspace-empty strong { color: var(--text); font-size: 15px; }
.model-workspace-empty span { font-size: 12px; }
.model-workspace-footer { display: flex; align-items: center; gap: 20px; padding: 12px 28px; border-top: 1px solid #2c3940; background: #172126; }
/* 底部只放"当前模型有多个渠道"时的上拉入口。
 * 顺序按产品要求：**模型名在前、渠道在后**；右侧只留"还有几个渠道"+箭头，
 * 其余文案一律去掉，免得模型名一长就被挤掉。 */
.model-channel-bar { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid #3a4a52; border-radius: 10px; background: #18242a; color: var(--text); cursor: pointer; text-align: left; }
.model-channel-bar:hover, .model-channel-bar:focus-visible { border-color: var(--accent-2); background: #203039; outline: none; }
.model-channel-bar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-channel-bar-channel { flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.model-channel-bar-channel::before { content: "· "; }
.model-channel-bar-count { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: 11px; white-space: nowrap; }
.model-channel-bar-arrow { flex: none; color: var(--accent-2); font-size: 14px; line-height: 1; }
.model-workspace-admin { flex: none; align-self: center; padding: 7px 11px; font-size: 12px; }
/* 渠道上拉面板（bottom sheet）：点底部那条"渠道"拉起，选完即切到该渠道的同名模型 */
.model-channel-sheet-scrim { position: fixed; z-index: 90; inset: 0; background: rgba(3, 7, 9, .58); }
.model-channel-sheet { position: fixed; z-index: 91; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; width: min(560px, 100%); max-height: 72dvh; border: 1px solid #2c3940; border-bottom: 0; border-radius: 16px 16px 0 0; background: #172126; box-shadow: 0 -18px 50px rgba(0, 0, 0, .42); animation: model-sheet-up .18s ease-out; }
@keyframes model-sheet-up { from { transform: translate(-50%, 14px); opacity: .65; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .model-channel-sheet { animation: none; } }
.model-channel-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 14px 16px 11px; border-bottom: 1px solid #2c3940; }
.model-channel-sheet-head div { display: grid; gap: 3px; min-width: 0; }
.model-channel-sheet-head strong { font-size: 15px; }
.model-channel-sheet-head small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.model-channel-sheet-list { display: grid; gap: 8px; overflow: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.model-channel-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid #2c3940; border-radius: 10px; background: #10171b; color: var(--text); cursor: pointer; text-align: left; }
.model-channel-option:hover, .model-channel-option:focus-visible { border-color: #5a887f; background: #1c2a30; outline: none; }
.model-channel-option.is-active { border-color: #5a887f; background: #20383b; }
.model-channel-option-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model-channel-option small { flex: none; color: var(--muted); font-size: 11px; }
.model-channel-option-check { flex: none; color: var(--accent-2); }
.chat-title h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ 桌面端聊天顶栏主题（重新设计：对齐旧云梦 desktop chat topbar）════════════════════════
 * 旧的问题：顶栏是"实心玻璃 rgba(22,22,22,.58) + 下边框 + 0 8px 24px 大阴影"，
 *   把角色图硬切成上下两段；再叠加浅色工作区漏进来的深墨文字 → 黑底黑字。
 * 旧云梦桌面端（public/style.css:5294-5305 `body.st-chat-view #st-chat-page-topbar`）是：
 *   padding 16px 18px 10px；**border: none; box-shadow: none**；
 *   background: linear-gradient(180deg, rgba(10,13,20,.22) 0%, rgba(10,13,20,.08) 78%, rgba(10,13,20,0) 100%)；
 *   backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * .62))。
 *   —— 一条"顶部淡淡压暗、到底部完全透明"的遮罩，角色图从顶栏下方继续露出，不再是色块。
 *   我们取 .62 × 自身 18px 玻璃模糊 ≈ 11px。
 * 文字（public/style.css:1001-1020）：
 *   标题 rgba(245,247,252,.96) / 600 / letter-spacing .02em；副标题 rgba(170,178,199,.56) / 12px。
 * 按钮（public/yunmeng-ai.css:1306-1314 `#st-chat-back-button, .st-chat-topbar-button`）：
 *   药丸形 radius 18px、bg rgba(8,15,18,.32)、border rgba(235,248,244,.28)、
 *   color rgba(249,253,251,.95)、backdrop-filter blur(8px)。
 * 断点 ≥721px = 我们的"桌面壳"（≤720px 才收成抽屉导航 + 手机顶栏）。 */
@media (min-width: 721px) {
  .chat-head {
    min-height: 0;
    padding: 16px 18px 10px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(10, 13, 20, .22) 0%, rgba(10, 13, 20, .08) 78%, rgba(10, 13, 20, 0) 100%);
    box-shadow: none;
    backdrop-filter: blur(11px) saturate(1.08);
    -webkit-backdrop-filter: blur(11px) saturate(1.08);
  }
  /* 白字压在亮背景上仍需一点投影才稳（旧云梦标题组 same） */
  .chat-title h1 {
    color: rgba(245, 247, 252, .96);
    font-weight: 600;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .36);
  }
  .chat-title .subtle { color: rgba(170, 178, 199, .56); font-size: 12px; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .36); }
  .back-button,
  .chat-head-actions .button,
  .chat-head-actions .button.chat-action {
    border: 1px solid rgba(235, 248, 244, .28);
    border-radius: 18px;
    background: rgba(8, 15, 18, .32);
    color: rgba(249, 253, 251, .95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .36);
  }
  .back-button:hover, .back-button:focus-visible,
  .chat-head-actions .button:hover, .chat-head-actions .button:focus-visible {
    border-color: rgba(235, 248, 244, .52);
    background: rgba(8, 15, 18, .52);
    color: #fff;
  }
  .chat-head-actions .chat-favorite-trigger.is-active { color: #fff0b3; border-color: rgba(225, 184, 90, .62); }
}
.chat-view > #chat-error, .chat-view > .content-gate, .chat-view > .modal-actions, .chat-surface > #chat-error { width: min(980px, calc(100% - 56px)); margin-left: auto; margin-right: auto; }
.message-list > .message-row:first-child { margin-top: auto; }
/* 方案一：暗化锚定在边界（角色图展示带下沿=列表上沿），边界上方背景图保持正常亮度 */
.message-list { background-image: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, .46) 9%, rgba(11, 11, 11, .64) 44%, rgba(11, 11, 11, .82) 100%); background-repeat: no-repeat; position: relative; isolation: isolate; width: min(660px, 100%); max-width: 660px; flex: 1 1 auto; min-height: 0; margin: 0 auto; padding: 12px 4px calc(var(--composer-height, 120px) + 5px + var(--keyboard-offset, 0px)); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; }
.message-list::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 22px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, .42)); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .82) 52%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .82) 52%, #000 100%); }
/* 消息行对齐与宽度 —— 全部取自**旧云梦真实页面实测值**（工具：tools/legacy-render-baseline.py，
 * 证据：.runtime/logs/stage7p0-message-render/legacy-baseline-evidence.json）：
 *   桌面(≥1025px) 列表 660px；AI 行 `4px 34px 0`、块宽 `min(100%, clamp(440px,35vw,500px))`；
 *                  用户行 `4px 8px 0 clamp(112px,26%,172px)`、块宽 430px
 *   窄屏(≤1024px) AI 行左 16px + 右 6%（yunmeng-ai.css:2242 + mobile-styles.css:1215-1227）；
 *                  用户行左 12%、右 0；块宽 100% */
.message-row { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 100%; min-width: 0; align-items: flex-start; }
.message-row.assistant { padding: 4px 0 0 6px; }
.message-row.user { align-items: flex-end; padding: 4px 0 0 12%; }
.message-row.system { align-items: center; padding: 0; max-width: 92%; }
.message-bubble { box-sizing: border-box; width: auto; max-width: 100%; min-width: 0; font-size: 15px; line-height: 27.6px; letter-spacing: normal; overflow-wrap: anywhere; word-break: break-word; }
/* AI 消息在旧云梦聊天页**没有气泡**：`.mes_text{padding:0;border:0;background:transparent;color:rgb(242,243,245)}`
 * （STV2云梦/public/css/yunmeng-ai.css:2408-2415；实测量到的底色为 rgba(0,0,0,0)） */
.message-bubble-assistant { max-width: 100%; padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; color: rgb(243, 243, 243); }
/* 用户消息有气泡：padding 10px 12px / border rgba(224,218,249,.14) / 圆角 8px 8px 3px 8px / 底色 rgba(82,77,110,.88)
 * （STV2云梦/public/css/yunmeng-ai.css:2417-2424；实测底色逐字一致） */
.message-bubble-user { max-width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(60, 60, 60, .88); border-radius: 8px 8px 3px 8px; color: #fff; }
/* 桌面阅读宽度与两侧留白（旧云梦 yunmeng-ai.css:2218-2226、2370-2386 的最终生效值） */
@media (min-width: 1025px) {
  .message-row.assistant { padding: 4px 34px 0; }
  .message-row.user { padding: 4px 8px 0 clamp(112px, 26%, 172px); }
  .message-bubble-assistant { max-width: min(100%, clamp(440px, 35vw, 500px)); }
  .message-bubble-user { max-width: 430px; }
}
/* 窄屏操作栏改为横滑，不撑破气泡（旧云梦 STV2云梦/public/style.css:15098-15121 的 ≤750px 规则） */
@media (max-width: 750px) {
  .message-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .message-actions::-webkit-scrollbar { display: none; }
  .message-action { min-height: 32px; white-space: nowrap; }
}
.message-row.system .message-bubble { color: var(--muted); font-size: 13px; }
/* ---------------- 剧情推进选项（对齐 夜语 AI「下一步行动」） ----------------
 * 尺寸取自夜语 AI 的实际渲染（chat 页 .choice-buttons-container / .option-button.choice-style-btn）：
 *   容器 12px 外边距 + 16px 内边距 + 12px 圆角；标题 15px/500；选项 2px 描边 + 16px 圆角 + 12px 16px 内边距。
 * 差异只有配色：本仓聊天区恒为深色（.message-bubble-assistant 无底色 + 浅色字），
 * 所以那边"白底 + 蓝字"改成"深色玻璃底 + 亮蓝描边"，其余尺寸逐条对齐。 */
.choice-buttons-container {
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0 4px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.choice-buttons-title { margin-bottom: 12px; font-size: 15px; font-weight: 500; color: rgba(243, 243, 243, .92); }
.choice-buttons-list { display: flex; flex-direction: column; gap: 10px; }
.choice-option {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(96, 165, 250, .78);
  border-radius: 16px;
  background: transparent;
  color: #cfe3ff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
  transition: all .2s ease;
}
.choice-option:hover { border-color: #93c5fd; background: rgba(59, 130, 246, .16); color: #e6f0ff; }
.choice-option:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.choice-option.is-disabled { border-color: rgba(255, 255, 255, .14); color: rgba(243, 243, 243, .52); cursor: default; }
.choice-option.is-disabled:hover { border-color: rgba(255, 255, 255, .14); background: transparent; color: rgba(243, 243, 243, .52); }
.choice-option-letter { font-weight: 600; }
.choice-option-content { user-select: text; -webkit-user-select: text; }
@media (max-width: 750px) {
  .choice-buttons-container { margin: 8px 0 2px; padding: 12px; border-radius: 10px; }
  .choice-buttons-title { margin-bottom: 8px; font-size: 14px; }
  .choice-buttons-list { gap: 8px; }
  .choice-option { padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
}
.message-content { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.message-content-text { white-space: pre-wrap; }
.message-content-html, .message-content-mixed { white-space: normal; }
.message-text-segment { white-space: pre-wrap; }
.message-html-segment { white-space: normal; }
/* 混合消息（围栏 HTML + 围栏外叙述）按块排列，叙述的换行仍由 pre-wrap 保留 */
.message-content-mixed > * { display: block; }
.message-content-mixed > * + * { margin-top: 10px; }
/* 块级元素 —— 均取自旧云梦最终生效值（STV2云梦/public/style.css）：
 *   p 0 0 10px（:4512-4521）、ul/ol 5px（:4528）、table collapse + mb10（:4496）、
 *   td/th 1px + .25em（:4503-4510）、blockquote 左边框 + 底色（:4716-4722）、hr opacity .4（:9085） */
.message-content p { margin: 0 0 10px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { margin: 5px 0 10px; padding-left: 22px; }
.message-content li { margin: 2px 0; }
.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6 { margin: 10px 0 6px; line-height: 1.35; }
.message-content h1:first-child, .message-content h2:first-child, .message-content h3:first-child { margin-top: 0; }
.message-content blockquote { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--msg-quote-color, rgb(225, 138, 36)); background: rgba(0, 0, 0, .3); }
.message-content hr { height: 1px; border: 0; background: currentColor; opacity: .4; }
.message-content img { display: block; max-width: 100%; height: auto; border-radius: 5px; }
.message-content a { color: var(--msg-quote-color, rgb(225, 138, 36)); text-decoration: none; overflow-wrap: anywhere; }
.message-content a:hover { filter: brightness(1.25); }
.message-content code { padding: 0 3px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0, 0, 0, .7); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-content pre { margin: 0 0 10px; padding: 1em; border-radius: 5px; background: rgba(0, 0, 0, .45); overflow-x: auto; }
.message-content pre code { display: block; padding: 0; border: 0; background: transparent; white-space: pre; overflow-wrap: normal; }
/* 表格：窄屏不撑破气泡，改为自身横向滚动（旧云梦只做 collapse，这里补明确滚动策略，见 docs/74 D4） */
.message-content table { display: block; width: max-content; max-width: 100%; margin: 0 0 10px; border-collapse: collapse; overflow-x: auto; }
.message-content th, .message-content td { padding: .25em .5em; border: 1px solid var(--line); }
/* 消息内控件：按内容收缩、允许换行，绝不用缩放整页解决（旧云梦控件继承字体：style.css:9120-9126） */
.message-content button, .message-content input, .message-content select, .message-content textarea {
  max-width: 100%; width: auto; font: inherit; font-size: 13px; line-height: 1.4; color: inherit; box-sizing: border-box;
}
.message-content button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .06); white-space: normal; overflow-wrap: anywhere; cursor: default; }
.message-content input, .message-content textarea, .message-content select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .35); }
.message-content textarea { width: 100%; }
.message-content .message-control-row, .message-content p:has(> button + button) { display: flex; flex-wrap: wrap; gap: 6px; }
/* 对白：原生 `<q>`，旧云梦聊天页用 135° 三色渐变裁切文字
 * （STV2云梦/public/style.css:4687-4699；手机同值 css/mobile-styles.css:1304-1316）
 * 取消浏览器默认引号伪元素（STV2云梦/public/style.css:8403-8407） */
.message-content q { quotes: none; }
.message-content q::before, .message-content q::after { content: ""; }
/* 对白色改用旧云梦主题变量（默认 rgb(225,138,36)）；原来用的蓝→紫→粉渐变会带来明显紫感 */
.message-content q { background-image: none; color: var(--msg-quote-color); -webkit-text-fill-color: currentColor; }
/* position+z-index：消息操作按钮浮到附着模型贴片（z-index:8）之上，保证滚到底部的消息操作可点 */
.message-actions { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; padding: 0 1px; opacity: .64; }
.message-actions:hover, .message-actions:focus-within { opacity: 1; }
.message-row.user .message-actions { justify-content: flex-end; }
.message-action { border: 0; border-radius: 7px; padding: 3px 6px; background: rgba(19, 19, 19, .28); color: var(--muted); font: inherit; font-size: 12px; line-height: 1.35; cursor: pointer; white-space: nowrap; }
.message-action:hover, .message-action:focus-visible { color: var(--text); background: rgba(127, 199, 181, .18); outline: none; }
.message-action:disabled { cursor: not-allowed; opacity: .55; }
.message-actions-trigger { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer; }
.message-actions-trigger::-webkit-details-marker { display: none; }
.message-actions-trigger:hover, .message-actions[open] .message-actions-trigger, .message-actions-trigger:focus-visible { border-color: var(--line); background: #1d292f; color: var(--text); outline: none; }
.message-actions-panel { position: absolute; bottom: calc(100% + 5px); right: 0; z-index: 10; display: grid; gap: 2px; min-width: 132px; padding: 5px; border: 1px solid #46535c; border-radius: 8px; background: #182126; box-shadow: 0 14px 32px rgba(0, 0, 0, .48); }
.message-actions-panel button { border: 0; border-radius: 5px; padding: 7px 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; }
.message-actions-panel button:hover, .message-actions-panel button:focus-visible { background: #26363e; outline: none; }
/* ── 消息编辑（2026-10-27 改版）─────────────────────────────────────────────
 * 两个问题一次解决：
 *   ① 编辑框原来窄到只有 ~220px：`.message-bubble` 是 shrink-to-fit，textarea 写
 *      `width:min(560px,100%)` 里的 100% 是"气泡内容宽度"，于是塌回 textarea 的固有宽度。
 *      现在编辑态的整行铺满消息列（660px），textarea 用 100% 撑满。
 *   ② 配色是深色聊天皮肤，和首页（水墨青绿 ink）不统一 —— 这里整套换成 ink 令牌，
 *      聊天页本身仍是深色皮肤，只有"编辑"这块是浅色纸面卡片（对比反而更聚焦）。
 */
.message-row.is-editing { padding-left: 0; padding-right: 0; align-items: stretch; }
.message-row.is-editing .message-bubble { width: 100%; max-width: 100%; }
.message-edit-box {
  --ie-panel: #ffffff; --ie-line: #e4ebdd; --ie-soft: #e9f0e2; --ie-soft-2: #dfe9d8;
  --ie-text: #1f2b24; --ie-muted: #6f7f72; --ie-green: #2f5d4a; --ie-green-2: #3c705a;
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  width: 100%; padding: 13px 14px 12px; border: 1px solid var(--ie-line); border-radius: 14px;
  background: var(--ie-panel); box-shadow: 0 12px 32px rgba(47, 93, 74, .10);
}
.message-edit-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--ie-text); }
.message-edit-head strong { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.message-edit-head small { color: var(--ie-muted); font-size: 11.5px; }
.message-edit-input {
  display: block; box-sizing: border-box; width: 100%; min-height: 132px; max-height: 46vh;
  resize: vertical; padding: 11px 12px; border: 1px solid var(--ie-line); border-radius: 10px;
  background: #fbfdf9; color: var(--ie-text); font-size: 14px; line-height: 1.7; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.message-edit-input:focus { border-color: #7bb79a; background: #fff; box-shadow: 0 0 0 3px rgba(60, 112, 90, .14); }
.message-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* 按钮与首页 ink 主题逐字对齐（body.ink-mode .button.* 那三条的同一套色值） */
.message-edit-actions .button { padding: 7px 16px; border-radius: 999px; font-size: 13px; border: 1px solid transparent; }
.message-edit-actions .button.primary { background: var(--ie-green); border-color: var(--ie-green); color: #fff; }
.message-edit-actions .button.primary:hover { background: #1a4a44; border-color: #1a4a44; }
.message-edit-actions .button.ghost { background: #fff; border-color: var(--ie-line); color: #3f5a55; }
.message-edit-actions .button.ghost:hover { background: #f6faf7; border-color: var(--ie-soft-2); }
@media (max-width: 640px) {
  .message-edit-box { padding: 11px 12px 10px; border-radius: 12px; }
  .message-edit-input { min-height: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════
   手机端「编辑消息」= 贴着输入法上沿的浮层（2026-10-31 产品反馈：
   键盘弹起后留给编辑框的地方太少，取消/保存还得滚）。
   做法：
     ① 编辑期间隐藏底部输入条（正在编辑这条消息，输入条用不上）；
     ② 编辑行改成 fixed 浮层，bottom 用**已有的** --keyboard-offset（和 composer 同一套
        visualViewport 适配：iOS 键盘不改布局视口 → 该变量＝键盘高度；Android
        `interactive-widget=resizes-content` 时布局视口自己缩 → 变量为 0，fixed 也正好在键盘上沿）；
     ③ 高度上限吃 --visual-viewport-height（同一次测量算出），保证卡片整体在可视区内；
     ④ 正文 textarea 自己滚，操作条永远可见。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .chat-view.is-editing .composer { display: none !important; }
  .message-row.is-editing {
    position: fixed !important;
    left: 10px; right: 10px;
    bottom: calc(var(--keyboard-offset, 0px) + 10px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    max-height: calc(var(--visual-viewport-height, 100dvh) - 28px);
    padding: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .message-row.is-editing .message-bubble { width: 100% !important; max-width: 100% !important; }
  .message-row.is-editing .message-edit-box { box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
  .message-row.is-editing .message-edit-input { min-height: 88px; max-height: 42vh; }
}
.icon-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; }
.icon-button:hover { color: var(--danger); }
/* 输入区（composer）：数值全部取自旧云梦实测，来源
   tools/legacy-composer-baseline.py → .runtime/logs/stage7p1-composer/legacy-composer-evidence.json。
   桌面：容器与消息列表同宽 660px、圆角 14px、内边距 6px 10px、底色 rgb(62,60,82)（不透明）、
   按钮 36×36/圆角 9px、输入框 40px 高（字号 14px、行高 24px）、行内间距 4px、行间 2px。 */
/* 底部容器透明（对齐旧云梦 #form_sheld: rgba(0,0,0,0)），让背景图在输入面板四周与底部安全区透出 */
.composer { position: fixed; z-index: 4; bottom: var(--keyboard-offset, 0px); left: 50%; transform: translateX(-50%); width: min(660px, calc(100% - 32px)); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: transparent; }
/* 容器相对定位，让模型入口可以附着其上沿（旧云梦 yunmeng-ai.css:1043-1048 同款手法） */


.composer-inner { position: relative; display: flex; flex-direction: column; gap: 2px; background: var(--composer-glass-fill); border: 1px solid var(--composer-glass-rim); border-radius: 14px; padding: 6px 10px; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .07); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.composer-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 2px; }
.composer-model-slot { min-width: 0; flex: 1 1 auto; }
.common-phrases-control { position: relative; flex: none; }
/* 输入区图标按钮：旧云梦量到桌面 36×36/圆角 9px、手机 30×30 */
.composer-icon-button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: rgba(246, 246, 246, .88); cursor: pointer; transition: background-color .16s ease, color .16s ease, opacity .16s ease; }
.composer-icon-button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.composer-icon-button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.composer-icon-button[hidden] { display: none !important; }
.composer-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.composer-send { color: var(--ice-white); filter: drop-shadow(0 0 6px var(--ice-glow)); }
.composer-send:hover { background: rgba(120, 219, 255, .16); color: #ffffff; filter: drop-shadow(0 0 9px rgba(170, 220, 255, .55)); }
.composer-icon { display: block; pointer-events: none; }
.common-phrases-panel { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 8; display: grid; gap: 10px; width: min(430px, calc(100vw - 32px)); max-height: min(480px, calc(100dvh - 140px)); overflow: auto; padding: 12px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg-menu); box-shadow: 0 16px 42px rgba(0, 0, 0, .42); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.common-phrases-panel[hidden] { display: none !important; }
.common-phrases-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.common-phrases-head strong { font-size: 14px; }
.common-phrases-groups { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.common-phrases-group { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: #12181c; color: var(--muted); cursor: pointer; white-space: nowrap; }
.common-phrases-group.is-active, .common-phrases-group:hover { border-color: var(--accent-2); color: var(--text); background: #203039; }
.common-phrases-list { display: grid; gap: 7px; }
.common-phrase-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #35434a; border-radius: 8px; background: #12181c; color: var(--text); text-align: left; line-height: 1.45; cursor: pointer; }
button.common-phrase-item:hover, button.common-phrase-item:focus-visible { border-color: var(--accent-2); background: #203039; outline: none; }
.common-phrase-item.is-empty { color: #727b80; cursor: default; }
.common-phrase-index { flex: none; color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.common-phrases-hint, .common-phrases-state { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.common-phrases-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; }
.common-phrases-state-error { color: #ffd1d1; }
.composer-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* 输入框：高度 40px、内边距 8px 10px、圆角 12px、字号 14px、行高 24px、字距 .168px（旧云梦实测） */
.composer textarea { flex: 1; min-width: 0; resize: none; height: 40px; min-height: 40px; max-height: 360px; overflow-y: hidden; border: 0; border-radius: 12px; outline: 0; background: transparent; color: rgba(249, 253, 251, .94); padding: 8px 10px; font-size: 14px; line-height: 24px; letter-spacing: .168px; }
.composer textarea::placeholder { color: rgba(244, 247, 251, .5); }
/* 旧云梦聊天页：输入框**自身**聚焦零变化 —— 焦点表现全部由外层 `#send_form` 承担
   （public/style.css:9199-9203：`body.st-chat-view #send_textarea:focus-visible { border-color: transparent;
   background: transparent; box-shadow: none; }`；外层见 :9205-9214）。
   这里显式清掉上面第 141 行 `.composer textarea:focus` 那条**浅色工作区**的青绿 3px 焦点环：
   它在深色玻璃输入区上是一个突兀方框，也正是"输入引起其他变化"的一种。 */
.composer textarea:focus { border-color: transparent; background: transparent; box-shadow: none; }
@media (max-width: 1000px) {
  /* 旧云梦 mobile-styles.css 的媒体条件同为 max-width:1000px，故此处对齐其手机实测值：
     容器铺满（左右 10px）、内边距 6px、最小高 58px；输入框 48px 高/内边距 12px/字号 13.2px；
     图标按钮 30×30；行内间距 6px。 */
  .composer { width: 100%; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); }
  .composer-inner { min-height: 58px; justify-content: center; padding: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .composer-row { gap: 6px; }
  .composer textarea { height: 48px; min-height: 48px; max-height: 119.7px; padding: 12px; font-size: 13.2px; line-height: 19.14px; letter-spacing: .1584px; color: rgba(248, 249, 251, .96); }
  .composer-icon-button { width: 30px; height: 30px; }
}
.chat-context-scrim { position: fixed; z-index: 55; inset: 0; background: rgba(3, 7, 9, .58); }
.chat-context-scrim[hidden], .chat-context-workspace[hidden] { display: none !important; }
.chat-context-workspace { position: fixed; z-index: 60; top: 0; right: 0; display: flex; flex-direction: column; width: min(520px, 46vw); height: 100dvh; min-height: 0; overflow: hidden; border-left: 1px solid var(--ym-line); background: var(--ym-canvas); color: var(--text); box-shadow: -18px 0 46px rgba(24, 41, 51, .12); }
.chat-context-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; flex: none; padding: 20px 20px 16px; border-bottom: 1px solid var(--ym-line); background: var(--ym-canvas); }
.chat-context-back { align-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 3px 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; }
.chat-context-back:hover, .chat-context-back:focus-visible { color: var(--text); outline: none; }
.chat-context-heading { min-width: 0; }
.chat-context-kicker, .chat-context-section-kicker { display: block; color: var(--accent-2); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.chat-context-heading h2 { margin: 4px 0 4px; font-size: 22px; line-height: 1.15; }
.chat-context-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-context-close { width: 30px; height: 30px; border: 1px solid var(--ym-line); border-radius: 7px; background: var(--ym-paper-2); font-size: 19px; line-height: 1; }
.chat-context-close:hover, .chat-context-close:focus-visible { border-color: var(--accent-2); color: var(--text); outline: none; }
.chat-context-tabs { display: flex; gap: 4px; flex: none; overflow-x: auto; padding: 10px 16px 0; border-bottom: 1px solid var(--ym-line); background: var(--ym-paper-2); scrollbar-width: thin; }
.chat-context-tabs button { flex: none; min-height: 36px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; }
.chat-context-tabs button:hover, .chat-context-tabs button:focus-visible { color: var(--text); outline: none; }
.chat-context-tabs button.is-active { border-bottom-color: var(--accent-2); color: var(--text); font-weight: 700; }
.chat-context-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 18px 32px; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-context-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* 世界设定容器内的子分区（卡设 / 卡设补全 / 提示词管理） */
.chat-context-section { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.chat-context-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.chat-context-section-head p { max-width: 360px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.chat-context-section-head .button { flex: none; padding: 7px 10px; font-size: 12px; }
/* 分区标题 + 状态（对齐旧云梦：当前人设 / 已接入聊天） */
.chat-context-section-title { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.chat-context-section-status { display: inline-block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.chat-context-section-note { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* 世界设定 · 条目行 / 指令行（一行 = 选择区 + 开关）
   2026-11-02 修：这两处原先照搬了**深色侧栏**的配色（rgba(255,255,255,.02) 底 + #20383b 选中），
   但聊天设定面板是**纸色/墨绿**浅色主题（#FDFBF5 / #DED6C6 / #205850），深色块贴上去又脏又跳。
   现在统一成面板同一套纸色令牌：白底、暖灰描边、墨绿选中、淡青绿表示"开"。 */
.world-entry-list { display: grid; gap: 6px; margin-bottom: 12px; }
.world-entry-row,
.prompt-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #E8E1D2; border-radius: 12px; background: #fff;
}
.prompt-row + .prompt-row { margin-top: 8px; }
.world-entry-row.is-selected,
.prompt-row.is-selected { border-color: #205850; background: #F1F6F2; }
/* "开"只用一层很淡的绿提示，别抢选中的墨绿描边 */
.prompt-row.is-on { border-color: #CCE0D6; background: #F7FBF8; }
.prompt-row.is-selected.is-on { border-color: #205850; background: #EAF3EE; }
.world-entry-pick,
.prompt-pick { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.world-entry-pick strong,
.prompt-pick strong { overflow: hidden; color: #2F3A33; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.world-entry-pick small,
.prompt-pick small { color: #8B8577; font-size: 11px; }
.world-entry-row .pill-switch,
.prompt-row .pill-switch { flex: none; }
.chat-context-list { display: grid; gap: 7px; margin-bottom: 14px; }
.chat-context-list-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--ym-line); border-radius: 9px; background: var(--ym-paper); color: var(--text); text-align: left; cursor: pointer; }
.chat-context-list-item:hover, .chat-context-list-item:focus-visible { border-color: #638c82; background: #e4efea; outline: none; }
.chat-context-list-item.is-selected { border-color: var(--accent-2); background: #dcebe6; }
.chat-context-list-item.is-bound { box-shadow: inset 3px 0 0 var(--accent); }
.chat-context-list-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(8, 120, 109, .35); border-radius: 8px; background: #d3e7e0; color: #045e57; font-size: 12px; font-weight: 700; }
.chat-context-list-copy { display: grid; min-width: 0; gap: 3px; }
.chat-context-list-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-context-list-copy small, .chat-context-list-badge { color: var(--muted); font-size: 11px; }
.chat-context-list-badge { color: #8a5330; white-space: nowrap; }
.chat-context-empty { display: grid; gap: 5px; min-height: 74px; place-items: center; padding: 16px; border: 1px dashed var(--ym-muted); border-radius: 9px; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: center; }
.chat-context-empty.compact { min-height: 48px; }
.chat-context-editor-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--ym-line); border-radius: 11px; background: var(--ym-paper); }
.chat-context-editor-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 3px; }
.chat-context-editor-title > div { display: grid; gap: 4px; min-width: 0; }
.chat-context-editor-title strong { overflow-wrap: anywhere; font-size: 15px; }
.chat-context-editor-title small { color: var(--muted); font-size: 11px; line-height: 1.45; }
/* ── 聊天体验：胶囊开关（单手模式）────────────────────────────────
 * 一行说明 + 右侧胶囊；胶囊走品牌绿（面板内 --accent-2 = --ym-green）。 */
.chat-experience-card { gap: 10px; }
.chat-experience-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.chat-experience-copy { display: grid; gap: 5px; min-width: 0; }
.chat-experience-copy strong { font-size: 15px; }
.chat-experience-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.chat-experience-state { margin: 0; padding-top: 9px; border-top: 1px solid var(--ym-line); color: var(--muted); font-size: 11px; line-height: 1.5; }
/* ── 剧情安插（read me）面板：故事时间 / 人物意图与手段 / 世界条目 / 上轮回执 ── */
.plot-board { display: grid; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ym-line); }
.plot-board-time { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border: 1px solid var(--ym-line); border-radius: 9px; background: #fff; }
.plot-board-time span { color: var(--ym-muted); font-size: 11px; }
.plot-board-time strong { font-size: 14px; }
.plot-board-time small { margin-left: auto; color: var(--accent-2); font-size: 11px; }
/* 没写时间锚点：整行压低存在感，但仍要让人看见"缺什么" */
.plot-board-time.is-empty { border-style: dashed; background: var(--ym-paper-2); }
.plot-board-time.is-empty strong { color: var(--ym-muted); font-weight: 600; }
.plot-board-time.is-empty small { max-width: 62%; color: var(--ym-muted); text-align: right; line-height: 1.4; }
.plot-board-log { padding: 9px 11px; border: 1px solid var(--ym-line); border-left: 3px solid var(--accent-2); border-radius: 9px; background: var(--ym-paper-2); }
.plot-board-log strong { font-size: 12px; }
.plot-board-log ul { margin: 5px 0 0; padding-left: 16px; color: var(--ym-muted); font-size: 11px; line-height: 1.5; }
.plot-board-log .plot-board-anomaly { color: #a5342a; }
.plot-character { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid var(--ym-line); border-radius: 9px; background: #fff; }
.plot-character-head { display: grid; gap: 2px; }
.plot-character-head strong { font-size: 13px; }
.plot-character-head small { color: var(--ym-muted); font-size: 11px; }
.plot-mean { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 6px 0 0; border-top: 1px dashed var(--ym-line); }
.plot-mean-status { flex: none; padding: 1px 6px; border: 1px solid rgba(8, 120, 109, .35); border-radius: 999px; background: #e6f2ed; color: var(--ym-green-dark); font-size: 10px; line-height: 1.7; }
.plot-mean[data-status="overdue"] .plot-mean-status { border-color: rgba(201, 103, 80, .5); background: #fdeee9; color: #a5342a; }
.plot-mean[data-status="nowindow"] .plot-mean-status { border-color: rgba(150, 118, 40, .4); background: #fdf6e3; color: #8a6a12; }
/* 条件触发：是有效安排，只是"等条件"，颜色比"缺时点"温和 */
.plot-mean[data-status="conditional"] .plot-mean-status { border-color: rgba(70, 110, 170, .35); background: #eaf0fa; color: #3a5e8c; }
.plot-mean[data-status="done"] { opacity: .62; }
.plot-mean[data-status="done"] .plot-mean-status { border-color: var(--ym-line); background: var(--ym-paper-2); color: var(--ym-muted); }
.plot-mean[data-status="failed"] .plot-mean-status { border-color: rgba(201, 103, 80, .45); background: #fdeee9; color: #a5342a; }
.plot-mean-content { min-width: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.plot-mean small { grid-column: 2; color: var(--ym-muted); font-size: 10.5px; }
.plot-world { display: grid; gap: 6px; }
.plot-world-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border: 1px solid var(--ym-line); border-radius: 9px; background: var(--ym-paper-2); }
.plot-world-row span { flex: none; padding: 1px 6px; border: 1px solid var(--ym-line); border-radius: 999px; color: var(--ym-muted); font-size: 10px; }
.plot-world-row strong { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.plot-world-row small { flex: 0 0 auto; margin-left: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; color: var(--ym-muted); font-size: 10.5px; white-space: nowrap; }
/* 窄屏：窗口文字换到下一行，避免把正文挤成一列 */
@media (max-width: 560px) {
  .plot-world-row { flex-wrap: wrap; }
  .plot-world-row small { margin-left: 0; max-width: 100%; white-space: normal; }
}
.plot-board-empty { margin: 0; color: var(--ym-muted); font-size: 11.5px; line-height: 1.6; }
.pill-switch { position: relative; flex: none; width: 46px; height: 26px; margin-top: 1px; padding: 0; border: 1px solid var(--ym-line); border-radius: 999px; background: #d9e2df; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.pill-switch:hover { border-color: #9db3ad; }
.pill-switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pill-switch.is-on { border-color: var(--accent-2); background: var(--accent-2); }
.pill-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(24, 41, 51, .28); transition: transform .18s ease; }
.pill-switch.is-on .pill-switch-knob { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .pill-switch, .pill-switch-knob { transition: none; }
}
.context-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; }
.context-field > span { display: grid; gap: 3px; }
.context-field > span small { color: #7e8a8f; font-size: 10px; line-height: 1.4; }
.context-field input, .context-field textarea, .context-field select { width: 100%; min-width: 0; border: 1px solid var(--ym-line); border-radius: 7px; background: #ffffff; color: var(--text); padding: 8px 9px; outline: none; line-height: 1.5; }
.context-field textarea { min-height: 42px; resize: vertical; }
.context-field select { height: 36px; }
.context-field input:focus, .context-field textarea:focus, .context-field select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .11); }
.context-field input[readonly], .context-field textarea[readonly] { color: var(--ym-muted); background: var(--ym-paper-2); cursor: not-allowed; }
/* 字段下的解释行（世界设定：注入方式与"标题也会进提示词"） */
.context-field-note { margin: 0; color: #7e8a8f; font-size: 10px; line-height: 1.5; }
.context-field-note strong { color: var(--muted); font-weight: 600; }
.context-check, .context-check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.context-check input { accent-color: var(--accent-2); }
.context-check small { color: #7e8a8f; font-size: 10px; }
.context-check-row { flex-wrap: wrap; gap: 12px; }
.context-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.context-field-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.context-editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.context-editor-actions .button { padding: 8px 11px; font-size: 12px; }
.context-bound-label { color: #045e57; font-size: 11px; }
.chat-context-state { display: grid; gap: 8px; place-items: center; min-height: 160px; color: var(--muted); font-size: 12px; text-align: center; }
.chat-context-state-error { color: #a5342a; }
.chat-context-state-error strong { color: #7f2d1f; font-size: 14px; }
.chat-context-card-notice { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(127, 199, 181, .35); border-radius: 8px; background: rgba(8, 120, 109, .07); color: #045e57; font-size: 11px; line-height: 1.5; }
.chat-context-card-notice strong { font-size: 12px; }
.chat-context-card-notice.is-readonly { border-color: rgba(201, 103, 80, .36); background: rgba(201, 103, 80, .08); color: #8a4a34; }
.chat-context-private-prompt { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid rgba(201, 103, 80, .36); border-radius: 8px; background: rgba(201, 103, 80, .08); color: #8a4a34; font-size: 11px; line-height: 1.55; }
.chat-context-private-prompt strong { font-size: 12px; }
.context-card-field { gap: 5px; }
.chat-context-open .chat-context-trigger { border-color: var(--accent-2); color: var(--text); background: #dcebe6; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 20px; }
.modal { width: min(720px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: auto; background: var(--panel); border: 1px solid #3b4549; border-radius: 10px; box-shadow: var(--shadow); }
.modal-head { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(23, 26, 29, .97); z-index: 1; }
.modal-avatar { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.modal-avatar-placeholder { width: 64px; height: 64px; flex: none; display: grid; place-items: center; padding: 6px; border: 1px solid rgba(232, 163, 95, .45); border-radius: 8px; color: #e8d7bd; background: #2a2928; font-size: 10px; text-align: center; }
.modal-head-copy { flex: 1; min-width: 0; }
.modal-head h2 { font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; }
.modal-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
.modal-body { padding: 20px; display: grid; gap: 20px; }
.info-section { display: grid; gap: 8px; }
.info-section h3 { margin: 0; font-size: 13px; color: var(--accent-2); }
.info-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #d7d8d3; line-height: 1.65; max-height: 180px; overflow: auto; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.content-gate { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(232, 163, 95, .42); border-radius: 8px; background: rgba(232, 163, 95, .08); }
.content-gate p, .modal-error, .notice-text { margin: 0; line-height: 1.55; }
.content-gate strong { color: var(--accent); }
.visibility-controls { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.visibility-controls h3 { margin: 0; font-size: 13px; color: var(--accent-2); }
.visibility-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.visibility-fields label { display: grid; gap: 6px; min-width: 150px; color: var(--muted); font-size: 12px; }
.visibility-fields select { min-height: 38px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 0 9px; }
/* 分级只读展示（2026-10-25）：审核自动判定，作者不能选 */
/* 卡片标题与角色名分工（docs/124 §10）：标题为主，角色名作小字副标注 */
.card-subname, .ink-card-subname { display: block; margin-top: 2px; color: var(--ym-muted); font-size: 11.5px; font-weight: 500; }
.modal-subtitle { margin: 2px 0 0; color: var(--ym-muted); font-size: 12.5px; }
.visibility-fields .cc-rating-readonly { display: grid; gap: 6px; min-width: 150px; margin: 0; color: var(--muted); font-size: 12px; }
.visibility-fields .cc-rating-readonly strong { display: flex; align-items: center; min-height: 38px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; }
.cc-rating-note { margin: 0; font-size: 12px; color: var(--ym-muted); }
.visibility-locked { color: #e8d7bd; }
.modal-error { color: #ffd1d1; padding: 10px 12px; border: 1px solid rgba(229, 128, 128, .45); border-radius: 7px; background: rgba(229, 128, 128, .08); }
.conversation-list { display: grid; gap: 8px; }
/* 「只开了头、没有对话」的会话：折叠区，默认收起，别和真实聊天混在一起 */
.conversation-drafts { margin-top: 10px; }
.conversation-drafts > summary { display: inline-block; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 12px; }
.conversation-drafts > summary:hover { border-color: var(--accent-2); color: var(--text); }
.conversation-drafts[open] > summary { margin-bottom: 8px; }
.conversation-drafts .conversation-link { opacity: .82; }
.conversation-link { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; text-align: left; }
.conversation-link:hover { border-color: var(--accent-2); }
/* ── 角色详情弹窗：恒定浅色 ───────────────────────────────────────────
 * #modal-root 挂在 .app-shell **之外**，只吃得到 html[data-workspace] 那层变量；
 * 而弹窗自带的规则里写了一批深色主题的硬编码颜色（.modal-head 的 rgba(23,26,29,.97)、
 * .info-text/.tag/.status-chip 的浅灰字…）。工作区变量一变成浅色，变量与硬编码就打架：
 *   · 弹窗头：深底 + 深字 → 对比度 1.17（"黑底黑字"）
 *   · 简介/标签/状态条：浅底 + 浅灰字 → 1.29~1.43（"白底白字"）
 * 这里显式把弹窗按浅色画（不依赖工作区变量有没有漏进来），并逐个换掉硬编码色。
 * 卡片详情只从浅色工作区（大厅 / 我的角色 / 收藏）打开，所以恒定浅色是对的。 */
#modal-root {
  color-scheme: light;
  --bg: var(--ym-canvas);
  --panel: var(--ym-paper);
  --panel-2: var(--ym-paper-2);
  --line: var(--ym-line);
  --text: var(--ym-ink);
  --muted: var(--ym-muted);
  --accent: var(--ym-green);
  --accent-2: var(--ym-green);
  --danger: var(--ym-coral);
  color: var(--ym-ink);
}
#modal-root .modal { background: var(--ym-paper); border-color: var(--ym-line); }
#modal-root .modal-head { background: rgba(248, 251, 248, .97); border-bottom-color: var(--ym-line); }
#modal-root .modal-head h2 { color: var(--ym-ink); }
#modal-root .modal-close { color: var(--ym-ink); }
#modal-root .card-meta { color: var(--ym-muted); }
#modal-root .tag { color: var(--ym-green-dark); background: rgba(8, 120, 109, .08); border-color: rgba(8, 120, 109, .22); }
#modal-root .status-chip { color: var(--ym-ink); background: var(--ym-paper-2); border-color: var(--ym-line); }
#modal-root .status-chip[data-visibility="public"] { color: #8a4a35; border-color: rgba(201, 103, 80, .45); }
#modal-root .status-chip[data-machine="passed"] { color: var(--ym-green-dark); border-color: rgba(8, 120, 109, .45); }
#modal-root .status-chip[data-machine="blocked"] { color: #a5342a; border-color: rgba(165, 52, 42, .45); }
#modal-root .info-text { color: var(--ym-ink); }
#modal-root .info-section h3, #modal-root .visibility-controls h3 { color: var(--ym-green-dark); }
#modal-root .conversation-link { color: var(--ym-ink); }
#modal-root .modal-avatar-placeholder { color: #8a5a1e; background: #fdf4e6; border-color: rgba(201, 103, 80, .38); }
#modal-root .visibility-locked { color: #8a5a1e; }
#modal-root .modal-error { color: #a5342a; background: rgba(165, 52, 42, .08); border-color: rgba(165, 52, 42, .35); }
#modal-root .notice-text, #modal-root .subtle { color: var(--ym-muted); }
#modal-root .machine-line { color: var(--ym-ink); }
#modal-root .edit-controls, #modal-root .visibility-controls { border-top-color: var(--ym-line); }
#modal-root .button.primary { color: #f8fbf8; }
#modal-root .button.primary:disabled, #modal-root .button.primary[disabled] { color: #7d8c92; }
/* 导入弹窗的 PNG 选择框：默认文字色是 --muted，在 --paper-2 底上只有 4.37（差一点点） */
#modal-root input[type="file"] { color: var(--ym-ink); }
.empty { padding: 60px 20px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.workspace-view { display: grid; gap: 20px; min-width: 0; }
.my-workspace { gap: 22px; }
.my-page-header { display: grid; gap: 8px; }
.my-page-header h1 { margin-top: 0; }
.my-account-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid #3a454d; border-radius: 14px; background: #1a2228; box-shadow: 0 16px 34px rgba(0, 0, 0, .22); }
.my-avatar { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid rgba(232, 163, 95, .56); border-radius: 50%; background: #2c343a; color: #f3d2a8; font-size: 24px; font-weight: 800; }
.my-account-copy { min-width: 0; display: grid; gap: 5px; }
.my-account-copy h2 { margin: 0; font-size: 23px; overflow-wrap: anywhere; }
.my-account-actions { display: flex; justify-content: flex-end; }
.my-hub { display: grid; }
.my-hub-entry { position: relative; display: grid; gap: 7px; width: 100%; padding: 20px 54px 20px 20px; border: 1px solid #3b4e58; border-radius: 12px; background: #17232a; color: var(--text); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.my-hub-entry:hover, .my-hub-entry:focus-visible { border-color: var(--accent-2); background: #1d2b32; outline: none; transform: translateY(-1px); }
.my-hub-entry strong { font-size: 18px; }
.my-hub-entry > span:not(.my-hub-kicker):not(.my-hub-arrow) { color: var(--muted); line-height: 1.55; }
.my-hub-kicker { color: var(--accent-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.my-hub-arrow { position: absolute; top: 50%; right: 20px; color: var(--accent); font-size: 24px; transform: translateY(-50%); }
.my-workspace-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.my-favorites-workspace { display: grid; gap: 18px; padding: 20px; border: 1px solid #3b4e58; border-radius: 14px; background: #17232a; }
.my-favorites-workspace[hidden] { display: none; }
.my-favorites-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.my-favorites-header h2 { margin: 6px 0 4px; font-size: 24px; }
.my-favorites-empty { min-height: 180px; display: grid; place-content: center; gap: 6px; }
.my-favorites-grid { margin-top: 2px; }
.my-common-phrases-workspace { display: grid; gap: 18px; padding: 20px; border: 1px solid #3b4e58; border-radius: 14px; background: #17232a; }
.my-common-phrases-workspace[hidden] { display: none; }
.common-phrases-editor-grid { display: grid; gap: 14px; }
.common-phrases-editor-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.common-phrases-editor-toolbar .edit-field { flex: 1 1 240px; }
.common-phrases-editor-toolbar select, #common-phrases-editor-name { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 0 10px; }
.common-phrase-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.common-phrase-editor-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.common-phrase-editor-field textarea { width: 100%; min-width: 0; min-height: 76px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 9px 10px; line-height: 1.5; outline: none; }
.common-phrase-editor-field textarea:focus, .common-phrases-editor-toolbar select:focus, #common-phrases-editor-name:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); outline: none; }
.workspace-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.workspace-search { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.workspace-search .search { width: 100%; }
.workspace-loading { padding: 34px 20px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.recent-list { display: grid; gap: 8px; }
.recent-item { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.recent-item:hover, .recent-item:focus-visible { border-color: var(--accent-2); background: var(--panel-2); outline: none; }
.recent-avatar { width: 46px; height: 46px; flex: none; border-radius: 9px; object-fit: cover; background: #2a2928; }
.recent-avatar-gated { display: grid; place-items: center; border: 1px solid rgba(232, 163, 95, .45); color: #e8d7bd; font-size: 13px; }
.recent-item-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }
.recent-item-copy strong, .recent-item-copy span, .recent-item-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item-copy strong { font-size: 14px; }
.recent-item-copy span { color: var(--text); font-size: 13px; }
.recent-item-copy small { color: var(--muted); font-size: 11px; }
.recent-item-arrow { flex: none; color: var(--muted); font-size: 22px; }
.hall-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.hall-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.hall-controls select { min-width: 140px; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); }
.hall-controls .button { margin-left: auto; }
.account-card { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.account-avatar { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 16px; background: rgba(232, 163, 95, .16); border: 1px solid rgba(232, 163, 95, .42); color: var(--accent); font-size: 21px; font-weight: 800; }
.account-copy { min-width: 0; flex: 1; }
.account-copy h2 { margin: 0 0 5px; font-size: 21px; overflow-wrap: anywhere; }
.account-metrics { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 12px; }
.account-metrics strong { color: var(--text); font-size: 18px; margin-right: 4px; }
.workspace-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workspace-link { display: grid; gap: 8px; min-height: 100px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.workspace-link:hover, .workspace-link:focus-visible { border-color: var(--accent-2); outline: none; }
.workspace-link span { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ---------------- 阶段 7R-1：设置与渠道工作区 ---------------- */
/* ── 设置 / 渠道状态（对齐旧云梦）：浅色 + header 底边框 + 青绿 kicker + 32px 标题 + 入口卡 2 列 ── */
.settings-workspace, .channel-status-workspace { gap: 26px; color-scheme: light; --bg: var(--ym-canvas); --panel: var(--ym-paper); --panel-2: var(--ym-paper-2); --line: var(--ym-line); --text: var(--ym-ink); --muted: var(--ym-muted); --accent: var(--ym-green); --accent-2: var(--ym-green); --danger: var(--ym-coral); color: var(--ym-ink); }
.settings-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-width: 0; padding: 0 0 24px; border-bottom: 1px solid var(--ym-line); }
.settings-page-header .eyebrow { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings-page-header h1 { margin: 7px 0 0; color: var(--ym-ink); font-size: 32px; line-height: 1.15; }
.settings-page-header p { max-width: 620px; margin: 8px 0 0; color: var(--ym-muted); font-size: 14px; line-height: 1.65; }
.settings-branch-header { align-items: flex-end; }
.settings-branch-header > div { min-width: 0; display: grid; gap: 7px; }
.settings-branch-header .button { justify-self: start; min-height: 38px; padding: 0 14px; border: 1px solid var(--ym-line); border-radius: 4px; background: #fff; color: var(--ym-ink); }
.settings-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(820px, 100%); }
.settings-entry-card { position: relative; display: grid; align-content: start; min-height: 168px; padding: 22px; border: 1px solid var(--ym-line); border-radius: 6px; background: rgba(255, 255, 255, .78); color: var(--ym-ink); text-align: left; cursor: pointer; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.settings-entry-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; border-radius: 6px 6px 0 0; background: #d8ebe3; }
.settings-entry-card:hover, .settings-entry-card:focus-visible { border-color: #8ec6b9; background: #fff; box-shadow: 0 10px 24px rgba(25, 81, 70, .09); transform: translateY(-2px); outline: none; }
.settings-entry-kicker { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings-entry-card strong { margin-top: 10px; color: var(--ym-ink); font-size: 20px; line-height: 1.18; }
.settings-entry-card > span:not(.settings-entry-kicker):not(.settings-entry-arrow) { margin-top: 8px; color: var(--ym-muted); font-size: 13px; line-height: 1.65; }
.settings-entry-arrow { display: none; }
.settings-principles { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--ym-line); border-radius: 6px; background: var(--ym-paper-2); }
.settings-principles-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(8, 120, 109, .12); color: var(--ym-green); font-size: 18px; }
.settings-principles strong { display: block; margin-bottom: 4px; color: var(--ym-ink); }
.settings-principles p { margin: 0; color: var(--ym-muted); line-height: 1.55; }
@media (max-width: 760px) { .settings-entry-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-branch-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 16px; align-items: start; }
.settings-panel { min-width: 0; padding: 20px; border: 1px solid #35464d; border-radius: 14px; background: #17232a; box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }
.settings-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.settings-panel-heading h2 { margin: 5px 0 0; font-size: 21px; }
.settings-persona-list, .settings-channel-list { display: grid; gap: 10px; }
.settings-persona-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #1b282e; }
.settings-persona-avatar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(127, 199, 181, .45); border-radius: 50%; background: #24353c; color: var(--accent-2); font-weight: 800; }
.settings-persona-copy { min-width: 0; }
.settings-persona-copy strong, .settings-persona-copy p { display: block; overflow-wrap: anywhere; }
.settings-persona-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-persona-badges { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.settings-badge { padding: 3px 7px; border: 1px solid rgba(127, 199, 181, .45); border-radius: 999px; color: var(--accent-2); font-size: 11px; }
.settings-persona-editor { position: sticky; top: 84px; }
.settings-persona-editor form { display: grid; gap: 14px; }
.settings-check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.settings-check input { accent-color: var(--accent-2); }
.settings-phrases-panel { min-height: 260px; }
.settings-channel-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.settings-channel-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settings-channel-card-head > div { min-width: 0; display: grid; gap: 4px; }
.settings-channel-card-head small { color: var(--muted); }
.settings-status { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 11px; }
.settings-status-normal { color: #045e57; background: rgba(82, 190, 127, .16); border: 1px solid rgba(82, 190, 127, .42); }
.settings-status-degraded { color: #8a5a1e; background: rgba(232, 163, 95, .18); border: 1px solid rgba(232, 163, 95, .45); }
.settings-status-unavailable { color: #a5342a; background: rgba(229, 128, 128, .16); border: 1px solid rgba(229, 128, 128, .42); }
.settings-status-unknown { color: var(--muted); background: rgba(165, 170, 169, .12); border: 1px solid rgba(165, 170, 169, .28); }
.settings-channel-card-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.settings-channel-card-meta strong { margin-left: 3px; color: var(--text); }
.settings-empty { padding: 30px 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; line-height: 1.6; }
.settings-inline-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-inline-error .button { flex: none; }

/* ---------------- 阶段 2-D：导入 / 机器检测 / 内容编辑（前端入口） ----------------
 * 全部沿用现有配色与圆角；容器一律 min-width: 0 + 字数换行，保证桌面与手机都不横向溢出。 */
/* 2026-10-26：导入横幅原本吃的是**深色主题**的 --panel/--line/--text，
   放进现在的浅色工作区（创建页 / 我的角色）就变成"深底浅字"的异类。
   这里直接改用 ink 浅色令牌，跟周围卡片一致。 */
.import-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--ym-line); border-radius: 8px;
  background: var(--ym-paper-2); color: var(--ym-ink);
}
.import-copy { min-width: 0; flex: 1 1 240px; display: grid; gap: 6px; }
.import-copy strong { font-size: 14px; color: var(--ym-ink); }
.import-copy p, .import-copy .subtle { margin: 0; color: var(--ym-muted); }
.import-panel .button { flex: none; }
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: #d7d8d3; font-size: 12px; overflow-wrap: anywhere; }
.status-chip[data-visibility="public"] { border-color: rgba(232, 163, 95, .5); color: #f0d6b4; }
.status-chip[data-machine="passed"] { border-color: rgba(127, 199, 181, .5); color: #cdeee4; }
.status-chip[data-machine="blocked"] { border-color: rgba(229, 128, 128, .5); color: #ffd1d1; }
.machine-panel { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.machine-panel[data-status="passed"] { border-color: rgba(127, 199, 181, .45); }
.machine-panel[data-status="blocked"] { border-color: rgba(229, 128, 128, .45); }
/* 平台审核面板（docs/121） */
.review-panel { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.review-panel h3 { margin: 0; font-size: 14px; }
.review-panel[data-status="approved"] { border-color: rgba(127, 199, 181, .45); }
.review-panel[data-status="rejected"] { border-color: rgba(229, 128, 128, .45); }
.review-panel[data-status="pending"], .review-panel[data-status="reviewing"] { border-color: rgba(214, 183, 122, .45); }
.status-chip[data-review="approved"] { color: #2f7d63; }
.status-chip[data-review="rejected"] { color: #b8482f; }
.status-chip[data-review="pending"], .status-chip[data-review="reviewing"] { color: #8a6d1f; }
.machine-panel h3 { margin: 0; font-size: 13px; color: var(--accent-2); }
.machine-line { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.machine-panel .machine-line:first-child { font-weight: 700; }
.machine-message { overflow-wrap: anywhere; }
.machine-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(232, 163, 95, .45); border-radius: 999px; color: #e8d7bd; font-size: 11px; }
.machine-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.machine-actions .button[data-busy="true"] { opacity: .7; }
.machine-gate-hint { color: #e8d7bd; }
.machine-review-box { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.machine-review-box[data-status="passed"] { border-color: rgba(127, 199, 181, .45); }
.machine-review-box[data-status="blocked"] { border-color: rgba(229, 128, 128, .45); }
.machine-review-box .machine-line { overflow-wrap: anywhere; }
.edit-controls { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.edit-controls h3 { margin: 0; font-size: 13px; color: var(--accent-2); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.edit-controls form:not([hidden]) { display: grid; gap: 12px; }
.edit-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.edit-field input, .edit-field textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 9px 10px; line-height: 1.55; resize: vertical; outline: none; }
.edit-field input:focus, .edit-field textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); }
.edit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.import-modal { width: min(620px, 100%); }
.file-field { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 12px; min-width: 0; }
.file-field input[type="file"] { width: 100%; min-width: 0; color: var(--text); font-size: 13px; }
.file-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); cursor: pointer; }
.import-result { display: grid; gap: 14px; }
.import-card { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); min-width: 0; }
.import-card-art { width: 68px; height: 68px; flex: none; border-radius: 8px; object-fit: cover; background: #262b2e; }
.import-card-art-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; }
.import-card-copy { min-width: 0; display: grid; gap: 6px; }
.import-card-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 680px) {
  .topbar { height: 56px; padding: 0 16px; }
  .view { padding: 22px 16px 30px; }
  .page-heading { display: grid; align-items: start; gap: 14px; }
  .toolbar, .search { width: 100%; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-copy { padding: 10px; }
  .card-name { font-size: 13px; min-height: 38px; }
  .chat-view { padding: 0; }
  .chat-stage { inset: 0; }
  .chat-scene-art-image { left: 0; width: 100%; transform: none; opacity: var(--scene-image-opacity, 1); -webkit-mask-image: none; mask-image: none; }
  .chat-scene-art-placeholder { left: 0; width: 100%; transform: none; -webkit-mask-image: none; mask-image: none; }
  .chat-head { min-height: 56px; gap: 7px; padding: 4px 10px; }
  .chat-head-identity { gap: 7px; }
  .chat-head-actions { gap: 5px; }
  .chat-head-actions > .button,
  .chat-head-actions .chat-actions > .button { width: 34px; height: 34px; padding: 0; font-size: 0; }
  .chat-head-actions > .button::before,
  .chat-head-actions .chat-actions > .button::before { display: block; font-size: 16px; line-height: 1; }
  .chat-favorite-trigger::before { content: "☆"; }
  .chat-favorite-trigger.is-active::before { content: "★"; }
  .chat-head-actions #chat-context-button::before { content: "☷"; font-size: 18px; }
  .chat-title h1 { max-width: 20vw; font-size: 15px; }
  .chat-title .subtle { display: none; }
  .chat-avatar { width: 38px; height: 38px; }
  .chat-context-workspace { width: 100%; border-left: 0; box-shadow: none; }
  .chat-context-header { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 14px 12px; }
  .chat-context-heading h2 { font-size: 20px; }
  .chat-context-heading p { font-size: 11px; }
  .chat-context-tabs { padding: 8px 10px 0; }
  .chat-context-tabs button { min-height: 34px; padding: 0 9px; }
  .chat-context-content { padding: 14px 14px 28px; }
  .chat-context-section-head { gap: 8px; }
  .chat-context-section-head p { font-size: 11px; }
  .context-field-grid, .context-field-grid-compact { grid-template-columns: 1fr 1fr; }
  .context-field-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-context-editor-card { padding: 12px; }
  .model-switcher-button { width: 100%; }
  .model-switcher-panel { right: 0; width: auto; max-height: min(520px, calc(100dvh - 148px)); }
  .model-workspace-page { place-items: stretch; padding: 0; }
  .model-workspace { width: 100%; height: 100dvh; min-height: 0; max-height: none; border: 0; border-radius: 0; }
  .model-workspace-header { padding: 14px 16px 15px; }
  .model-workspace-header h2 { font-size: 20px; }
  .model-workspace-header p { font-size: 12px; }
  /* 顶部精简：kicker / 副标题 / "当前选择" 三条都去掉——手机上一屏要留给模型列表 */
  .model-workspace-header { gap: 10px; padding: 10px 12px 8px; align-items: center; }
  .model-workspace-kicker { display: none; }
  .model-workspace-header h2 { margin: 1px 0 0; font-size: 17px; }
  .model-workspace-header p { display: none; }
  .model-workspace-back { margin-bottom: 0; }
  .model-workspace-actions .icon-button { width: 32px; height: 32px; font-size: 18px; }
  .model-workspace-admin { padding: 6px 9px; font-size: 11px; }
  .model-workspace-current { display: none; }
  .model-workspace-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .model-provider-pane { border-right: 0; border-bottom: 1px solid #2c3940; overflow: hidden; }
  .model-provider-pane .model-pane-heading { display: none; }
  /* 厂商改成一行小胶囊（横向滑动），比原来的 190px 大卡省一半高度 */
  .model-provider-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
  .model-provider-list::-webkit-scrollbar { display: none; }
  .model-provider-item { flex: 0 0 auto; grid-template-columns: 22px auto auto; gap: 7px; padding: 6px 10px; border-color: #2c3940; border-radius: 999px; }
  .model-provider-mark { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
  .model-provider-copy { min-width: 0; }
  .model-provider-copy strong { font-size: 12px; white-space: nowrap; }
  .model-provider-copy small { display: none; }
  .model-pane-count { min-width: 22px; height: 22px; font-size: 11px; }
  .model-catalog-pane { overflow: auto; }
  .model-catalog-heading { padding: 10px 14px 4px; }
  .model-catalog-heading strong { font-size: 14px; }
  .model-catalog-list { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px 14px; }
  .model-workspace-footer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .model-channel-bar { padding: 10px 12px; }
  .model-channel-sheet { width: 100%; max-height: 78dvh; }
  .message-list { padding: 12px 12px calc(var(--composer-height, 94px) + 4px + var(--keyboard-offset, 0px)); gap: 11px; }
  .message-actions-trigger { width: 32px; height: 32px; }
  .chat-actions-panel { right: -4px; }
  .composer-toolbar { align-items: stretch; flex-wrap: wrap; }
  .composer-model-slot { flex-basis: 100%; }
  .common-phrases-control { margin-left: auto; }
  .common-phrases-panel { left: 0; right: auto; width: calc(100vw - 24px); max-height: min(460px, calc(100dvh - 132px)); }
  .modal-backdrop { padding: 10px; place-items: end center; }
  .modal { max-height: calc(100dvh - 20px); border-radius: 10px 10px 0 0; }
  .modal-body { padding: 16px; }
  .visibility-fields { display: grid; grid-template-columns: 1fr 1fr; }
  .visibility-fields label { min-width: 0; }
  .import-panel { align-items: stretch; flex-direction: column; }
  .import-panel .button { width: 100%; }
  .status-strip { gap: 6px; }
  .status-chip { font-size: 11px; padding: 4px 8px; }
  .machine-tag { margin-left: 0; margin-top: 4px; }
  .import-card { align-items: flex-start; }
  .import-card-art { width: 56px; height: 56px; }
  .edit-actions .button, .machine-actions .button { flex: 1 1 auto; }
  .settings-page-header { align-items: stretch; flex-direction: column; }
  .settings-page-header .button { width: 100%; }
  .settings-entry-grid { grid-template-columns: 1fr; }
  .settings-entry-card { min-height: 146px; padding: 18px 50px 18px 18px; }
  .settings-entry-card strong { font-size: 20px; }
  .settings-branch-layout { grid-template-columns: 1fr; }
  .settings-persona-editor { position: static; }
  .settings-persona-row { grid-template-columns: auto minmax(0, 1fr); }
  .settings-persona-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .settings-panel { padding: 16px; }
  .settings-inline-error { align-items: stretch; flex-direction: column; }
  .settings-inline-error .button { width: 100%; }
  .settings-channel-card-head { align-items: stretch; flex-direction: column; }
  .my-workspace-entry-grid, .common-phrase-editor-fields { grid-template-columns: 1fr; }
  .my-common-phrases-workspace, .my-favorites-workspace { padding: 16px; }
  .common-phrases-editor-toolbar { align-items: stretch; }
  .common-phrases-editor-toolbar .button { width: 100%; }
}

/* ---------------- 运营监控页（阶段 4A，仅管理员） ----------------
 * 只渲染安全元数据；窄屏改为卡片式，避免横向溢出。
 */
.ops-view { display: grid; gap: 16px; padding: 16px; max-width: 1180px; margin: 0 auto; overflow-x: hidden; }
.ops-card { background: #16181c; border: 1px solid #26292f; border-radius: 12px; overflow: hidden; }
.ops-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid #26292f; }
.ops-card-head h2 { margin: 0; font-size: 15px; }
.ops-hint, .ops-dim { color: #8b919a; font-size: 12px; }
.ops-card-body { padding: 12px 14px; }
.ops-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #b6bcc6; font-size: 13px; }
.ops-state-loading::after { content: ""; width: 12px; height: 12px; border: 2px solid #3a3f47; border-top-color: #6f7681; border-radius: 50%; animation: ops-spin 0.9s linear infinite; }
@keyframes ops-spin { to { transform: rotate(360deg); } }
.ops-state-error { color: #ffb4a8; }
.ops-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ops-metric { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: #1b1e23; border: 1px solid #26292f; border-radius: 10px; min-width: 0; }
.ops-metric strong { font-size: 18px; overflow-wrap: anywhere; }
.ops-metric-label { font-size: 12px; color: #8b919a; }
.ops-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.ops-resource { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px 10px; border: 1px solid #26292f; border-radius: 8px; background: #14171b; }
.ops-resource strong { overflow-wrap: anywhere; font-size: 14px; }
.ops-warn { color: #ffd28a; }
.ops-dep-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; }
.ops-dep-list li { display: inline-flex; align-items: center; gap: 8px; }
.ops-key { color: #c8cdd6; }
.ops-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.ops-chip-normal, .ops-chip-succeeded, .ops-chip-completed { background: #14351f; color: #86e0a4; border-color: #1f4d2e; }
.ops-chip-degraded, .ops-chip-running, .ops-chip-queued { background: #3a2f12; color: #ffd28a; border-color: #57451a; }
.ops-chip-unavailable, .ops-chip-failed, .ops-chip-dead, .ops-chip-stopped { background: #3a1a1a; color: #ffb4a8; border-color: #5a2a2a; }
.ops-chip-unknown { background: #24272d; color: #b6bcc6; border-color: #33373f; }
.ops-table-wrap { width: 100%; overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-table th, .ops-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #23262c; vertical-align: top; }
.ops-table th { color: #8b919a; font-weight: 500; white-space: nowrap; }
.ops-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ops-id { font-size: 12px; color: #9aa1ab; }
.ops-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ops-filter { background: #1b1e23; color: #c8cdd6; border: 1px solid #2c3037; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.ops-filter.is-active { background: #2a2f37; border-color: #3c424b; color: #fff; }
.ops-loading { padding: 24px; color: #8b919a; }
.ops-traffic-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px; border: 1px solid #30353d; border-radius: 10px; background: #1b1e23; }
.ops-traffic-copy { min-width: 0; display: grid; gap: 7px; }
.ops-traffic-copy p { margin: 0; color: #c8cdd6; line-height: 1.55; }
.ops-traffic-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ops-traffic-actions { display: grid; gap: 10px; justify-items: end; flex: none; }
.ops-traffic-panel .button { flex: none; }
.ops-rollout-control { display: flex; align-items: center; gap: 6px; color: #c8cdd6; font-size: 13px; }
.ops-rollout-control input { width: 64px; padding: 6px 7px; border: 1px solid #3a4049; border-radius: 6px; color: #f0f2f5; background: #101216; font: inherit; text-align: right; }
.ops-rollout-control input:focus { outline: 2px solid #e8a35f; outline-offset: 1px; }
@media (max-width: 560px) {
  .ops-traffic-panel { align-items: stretch; flex-direction: column; gap: 12px; }
  .ops-traffic-actions { justify-items: stretch; }
  .ops-rollout-control { flex-wrap: wrap; }
  .ops-rollout-control input { flex: 1 1 64px; min-width: 0; }
.ops-rollout-control .button, .ops-traffic-panel .button { width: 100%; }
}

.channel-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.channel-admin-list { display: grid; gap: 10px; }
.channel-admin-card { display: grid; gap: 12px; padding: 14px; border: 1px solid #2c323a; border-radius: 10px; background: #171a1f; }
.channel-admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.channel-admin-card-head strong { font-size: 15px; }
.channel-admin-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.channel-admin-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #9da4ae; font-size: 12px; }
.channel-admin-meta strong { color: #e8eaee; font-size: 13px; }
.channel-admin-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.channel-admin-actions .button { padding: 6px 10px; font-size: 12px; }
.channel-admin-editor { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid #3c5159; border-radius: 10px; background: #162126; }
.channel-admin-editor[hidden] { display: none; }
.channel-admin-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.channel-admin-editor-head strong { font-size: 15px; }
.channel-admin-editor-head p { margin: 5px 0 0; }
.channel-admin-field { display: grid; gap: 5px; min-width: 0; color: #aeb5bf; font-size: 12px; }
.channel-admin-field input { width: 100%; min-width: 0; height: 38px; border: 1px solid #3a464f; border-radius: 7px; padding: 0 10px; background: #10151a; color: #f0f2f5; outline: none; }
.channel-admin-field input:focus { border-color: #80c7b5; box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); }
.channel-admin-editor-row { display: grid; grid-template-columns: minmax(140px, 220px) auto auto; align-items: end; gap: 16px; }
.channel-admin-check { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; color: #c8cdd6; font-size: 12px; }
.channel-admin-check input { accent-color: #80c7b5; }
.channel-admin-editor-actions { display: flex; justify-content: flex-end; }

.card-completion-scrim { position: fixed; z-index: 76; inset: 0; background: rgba(3, 7, 9, .72); }
.card-completion-scrim[hidden], .card-completion-workspace[hidden] { display: none !important; }
.card-completion-workspace { position: fixed; z-index: 80; inset: 3vh 3vw; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #465b63; border-radius: 14px; background: var(--ym-canvas); color: var(--text); box-shadow: 0 28px 80px rgba(24, 41, 51, .12); }
.card-completion-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; flex: none; padding: 20px 22px 17px; border-bottom: 1px solid var(--ym-line); background: var(--ym-paper-2); }
.card-completion-header h2 { margin: 4px 0 4px; font-size: 22px; line-height: 1.2; }
.card-completion-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.card-completion-back { align-self: start; border: 0; padding: 4px 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.card-completion-back:hover, .card-completion-back:focus-visible { color: var(--text); outline: none; }
.card-completion-kicker { color: var(--accent-2); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.card-completion-body { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr); gap: 16px; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; background: var(--ym-canvas); }
.card-completion-panel { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--ym-line); border-radius: 11px; background: var(--ym-paper); }
.card-completion-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-completion-panel-head > div { display: grid; gap: 5px; min-width: 0; }
.card-completion-panel-head strong { font-size: 15px; }
.card-completion-panel-head small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.card-completion-selection { display: flex; flex-wrap: wrap; gap: 6px; }
.card-completion-selection .button { padding: 6px 9px; font-size: 11px; }
.card-completion-model { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--ym-line); border-radius: 9px; background: var(--ym-paper-2); }
.card-completion-model span, .card-completion-model small { color: var(--muted); font-size: 11px; }
.card-completion-model strong { font-size: 13px; }
/* 模型入口：复用聊天里那个模型选择器（点开同一个"模型工作区"），但本面板是浅色，
   深色玻璃底会让文字读不出来（实测 strong 是深色字、底是 rgba(40,40,40,.56)），所以按浅色重画。 */
.card-completion-model-button { width: 100%; height: auto; min-height: 40px; margin-top: 2px; padding: 7px 10px; border-color: var(--ym-line); background: #fff; color: var(--ym-ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card-completion-model-button:hover, .card-completion-model-button:focus-visible { border-color: var(--accent-2); background: var(--ym-paper-2); }
.card-completion-model-button .model-switcher-button-copy { flex-wrap: wrap; gap: 6px; }
.card-completion-model-button .model-switcher-button-copy strong { color: var(--ym-ink); }
.card-completion-model-button .model-switcher-channel { flex: 1 1 100%; color: var(--ym-muted); }
.card-completion-model-button .model-switcher-chevron { color: var(--accent-2); }
.card-completion-model-button .model-switcher-badge { border-color: rgba(201, 103, 80, .45); color: #8a4a35; }
.card-completion-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.card-completion-module { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--ym-line); border-radius: 8px; background: var(--ym-paper-2); cursor: pointer; }
.card-completion-module:hover, .card-completion-module:has(input:focus-visible), .card-completion-module.is-selected { border-color: var(--accent-2); background: #dcebe6; }
.card-completion-module input { margin-top: 2px; accent-color: var(--accent-2); }
.card-completion-module span { display: grid; gap: 4px; min-width: 0; }
.card-completion-module strong { overflow-wrap: anywhere; font-size: 12px; }
.card-completion-module small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.card-completion-hint { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.card-completion-hint textarea, .card-completion-result textarea { width: 100%; min-width: 0; resize: vertical; border: 1px solid var(--ym-line); border-radius: 8px; padding: 9px 10px; background: #ffffff; color: var(--text); line-height: 1.55; outline: none; }
.card-completion-hint textarea:focus, .card-completion-result textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); }
.card-completion-preview { min-height: 0; overflow: auto; }
.card-completion-count { flex: none; color: var(--muted); font-size: 11px; }
.card-completion-empty { display: grid; min-height: 180px; place-items: center; padding: 20px; border: 1px dashed var(--ym-muted); border-radius: 9px; color: var(--muted); font-size: 12px; text-align: center; }
.card-completion-live { display: grid; gap: 7px; min-height: 180px; padding: 12px; border: 1px solid var(--ym-line); border-radius: 9px; background: #f1f7f4; }
.card-completion-live span { color: var(--accent-2); font-size: 11px; font-weight: 700; }
.card-completion-live pre { max-height: 360px; overflow: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #182933; font: inherit; font-size: 12px; line-height: 1.6; }
.card-completion-results { display: grid; gap: 10px; }
.card-completion-results-head { display: grid; gap: 4px; padding-bottom: 2px; }
.card-completion-results-head small { color: var(--muted); font-size: 11px; }
.card-completion-result { display: grid; gap: 7px; padding: 11px; border: 1px solid var(--ym-line); border-radius: 9px; background: #ffffff; }
.card-completion-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-completion-result-head strong { overflow-wrap: anywhere; font-size: 13px; }
.card-completion-result-head .button { flex: none; padding: 5px 8px; font-size: 11px; }
/* 结果卡右上角：逐段「应用这一段」+「重新生成」并排（docs/110 追加：两种应用方式共存） */
.card-completion-result-actions { display: flex; align-items: center; gap: 6px; flex: none; }
@media (max-width: 520px) { .card-completion-result-head { flex-wrap: wrap; } .card-completion-result-actions { width: 100%; justify-content: flex-end; } }
/* ── 卡设补全：对齐旧云梦的补全工作区（模块级重生成 / 历史 / 人设参考）── */
.card-completion-header-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.card-completion-history-toggle { flex: none; padding: 7px 11px; font-size: 12px; }
.card-completion-body-single { grid-template-columns: minmax(0, 1fr); }
.card-completion-pick { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.card-completion-pick input { flex: none; margin: 0; accent-color: var(--accent-2); }
.card-completion-pick strong { overflow-wrap: anywhere; font-size: 13px; }
.card-completion-module-hint { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.card-completion-module-hint textarea { width: 100%; min-width: 0; resize: vertical; border: 1px solid var(--ym-line); border-radius: 8px; padding: 8px 9px; background: #ffffff; color: var(--text); font-size: 12px; line-height: 1.5; outline: none; }
.card-completion-module-hint textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(127, 199, 181, .12); }
.card-completion-results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.card-completion-persona { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 12px; border: 1px solid var(--ym-line); border-radius: 9px; background: var(--ym-paper-2); cursor: pointer; }
.card-completion-persona.is-on { border-color: var(--accent-2); background: #dcebe6; }
.card-completion-persona.is-disabled { cursor: not-allowed; opacity: .7; }
.card-completion-persona input { margin-top: 2px; accent-color: var(--accent-2); }
.card-completion-persona span { display: grid; gap: 4px; min-width: 0; }
.card-completion-persona strong { font-size: 12px; }
.card-completion-persona small { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.card-completion-history { display: grid; gap: 10px; }
.card-completion-history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--ym-line); border-radius: 9px; background: #ffffff; }
.card-completion-history-copy { display: grid; gap: 3px; min-width: 0; }
.card-completion-history-copy strong { font-size: 13px; overflow-wrap: anywhere; }
.card-completion-history-copy small { color: var(--muted); font-size: 11px; }
.card-completion-history-actions { display: flex; flex: none; gap: 6px; }
.card-completion-history-actions .button { padding: 6px 10px; font-size: 11.5px; }
.card-completion-error { padding: 10px 12px; border: 1px solid rgba(229, 128, 128, .45); border-radius: 8px; background: rgba(201, 103, 80, .08); color: #a5342a; font-size: 12px; line-height: 1.5; }
.card-completion-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; padding: 12px 18px; border-top: 1px solid var(--ym-line); background: var(--ym-paper-2); }
.card-completion-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.card-completion-status { color: var(--muted); font-size: 12px; }
/* 手机端一次只显示一栏（选模块 / 看结果），桌面端两栏并排时这个 tab 条不出现 */
.card-completion-mobile-tabs { display: none; }
.card-completion-back .label-short { display: none; }

@media (max-width: 820px) {
  .card-completion-workspace { inset: 0; border: 0; border-radius: 0; }
  /* 头部：第 1 行「返回 + 历史/关闭」，第 2 行整行放标题——否则 390px 下标题被挤成 4 行、总高 168px */
  .card-completion-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px; padding: 12px 12px 10px; }
  .card-completion-back { grid-area: 1 / 1 / 2 / 2; align-self: center; }
  .card-completion-back .label-full { display: none; }
  .card-completion-back .label-short { display: inline; }
  .card-completion-header-actions { grid-area: 1 / 2 / 2 / 3; align-self: center; }
  .card-completion-title { grid-area: 2 / 1 / 3 / 3; min-width: 0; }
  .card-completion-header h2 { margin: 2px 0 2px; font-size: 18px; }
  .card-completion-header p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.4; }
  .card-completion-kicker { font-size: 9px; letter-spacing: .12em; }
  .card-completion-body { grid-template-columns: 1fr; gap: 10px; padding: 10px; align-content: start; }
  .card-completion-mobile-tabs { display: flex; grid-column: 1 / -1; gap: 4px; align-items: center; padding: 4px; border: 1px solid var(--ym-line); border-radius: 999px; background: var(--ym-paper-2); }
  .card-completion-mobile-tab { flex: 1 1 0; min-height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
  .card-completion-mobile-tab.is-active { background: #fff; color: var(--ym-green-dark); font-weight: 700; box-shadow: 0 1px 3px rgba(24, 41, 51, .12); }
  /* 单栏切换：手机上选模块与看结果不同时出现，避免"生成完了还要往下滚一屏才看得到结果" */
  .card-completion-body[data-pane="setup"] .card-completion-preview { display: none; }
  .card-completion-body[data-pane="results"] .card-completion-setup { display: none; }
  .card-completion-module-grid { grid-template-columns: 1fr; gap: 6px; }
  .card-completion-module { padding: 8px 10px; }
  .card-completion-module small { font-size: 10px; line-height: 1.35; }
  .card-completion-panel { padding: 12px; gap: 11px; }
  .card-completion-results-toolbar { gap: 8px; }
  .card-completion-results-toolbar .card-completion-selection { width: 100%; }
  .card-completion-results-toolbar .card-completion-selection .button { flex: 1 1 0; }
  .card-completion-history-item { flex-wrap: wrap; align-items: flex-start; }
  .card-completion-history-actions { width: 100%; }
  .card-completion-history-actions .button { flex: 1 1 0; }
  .card-completion-footer { align-items: stretch; flex-direction: column; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .card-completion-footer > div { justify-content: stretch; }
  .card-completion-footer .button { flex: 1 1 0; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  /* 高度跟着**可视视口**走：键盘弹出时（--visual-viewport-height 由 JS 实时更新）导航整体缩短，
     「账号」靠 margin-top:auto 始终贴着可见区底边，不再被键盘顶上去；列表内部滚动。 */
  .app-nav { position: fixed; inset: 0 auto auto 0; bottom: auto; width: min(286px, 82vw); height: var(--visual-viewport-height, 100dvh); min-height: 0; max-height: var(--visual-viewport-height, 100dvh); overflow: hidden; transform: translateX(-104%); transition: transform .18s ease; box-shadow: 18px 0 40px rgba(0, 0, 0, .36); }
  .app-nav.is-open { transform: translateX(0); }
  /* 键盘把高度压到很矮时，优先保住搜索框与「账号」：列表让位并滚动 */
  .nav-recent { margin-top: 12px; }
  .nav-recent-search { flex: none; }
  .nav-recent-list { min-height: 0; }
  /* 键盘占位（html[data-keyboard] 由 app.js 的 updateMobileViewportMetrics 维护）：
     品牌与工作区菜单让位，把高度留给搜索框 + 结果列表 +「账号」 */
  html[data-keyboard="on"] .app-nav .nav-brand,
  html[data-keyboard="on"] .app-nav .nav-list { display: none; }
  html[data-keyboard="on"] .app-nav { padding-top: 12px; }
  html[data-keyboard="on"] .nav-recent { margin-top: 0; }
  .nav-scrim { position: fixed; inset: 0; display: block; background: rgba(0, 0, 0, .64); z-index: 19; }
  .topbar { width: 100%; height: 58px; padding: 0 12px; }
  .mobile-nav-toggle { display: inline-grid; place-items: center; flex: none; }
  .topbar .brand { margin-left: 8px; margin-right: auto; }
  .topbar-meta { gap: 5px; min-width: 0; }
  .topbar-meta .status-dot, .topbar-meta #session-notice { display: none; }
  .topbar-meta #account-label { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view { width: 100%; padding: 22px 14px 34px; }
  body.nav-open { overflow: hidden; }
  .page-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .toolbar, .toolbar .search { width: 100%; }
  .search { min-width: 0; }
  .workspace-actions { width: 100%; }
  .workspace-actions .button { flex: 1 1 0; }
  .hall-controls { align-items: stretch; }
  .hall-controls label, .hall-controls select { width: 100%; }
  .hall-controls .button { width: 100%; margin-left: 0; }
  .account-card { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .account-card .button { width: 100%; }
  .my-account-panel { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 18px; }
  .my-account-actions { grid-column: 1 / -1; justify-content: stretch; }
  .my-account-actions .button { width: 100%; }
  .my-favorites-header { align-items: stretch; flex-direction: column; }
  .my-favorites-header .button { width: 100%; }
  .workspace-link-grid { grid-template-columns: 1fr; }
  .recent-item { align-items: flex-start; }
  .recent-item-arrow { margin-left: auto; }
  .app-shell.chat-mode .topbar { display: none; }
  .app-shell.chat-mode .view { padding: 0; }
  .ops-view { padding: 10px; }
  .ops-card-head { padding: 10px; }
  .ops-card-body { padding: 10px; }
  .channel-admin-toolbar { align-items: stretch; flex-direction: column; }
  .channel-admin-toolbar .button { width: 100%; }
  .channel-admin-card-head { flex-direction: column; }
  .channel-admin-badges { justify-content: flex-start; }
  .channel-admin-actions .button { flex: 1 1 auto; }
  .channel-admin-editor-row { grid-template-columns: 1fr; gap: 8px; }
  .channel-admin-editor-actions .button { width: 100%; }
  /* 窄屏：表格改为“标签 + 值”的卡片，彻底避免横向滚动 */
  .ops-table-wrap { overflow-x: visible; }
  .ops-table thead { display: none; }
  .ops-table, .ops-table tbody, .ops-table tr, .ops-table td { display: block; width: 100%; }
  .ops-table tr { border: 1px solid #23262c; border-radius: 10px; margin-bottom: 8px; padding: 6px 8px; background: #1b1e23; }
  .ops-table td { border: none; padding: 4px 0; display: flex; gap: 10px; justify-content: space-between; }
  .ops-table td::before { content: attr(data-label); color: #8b919a; font-size: 12px; flex: 0 0 auto; }
  .ops-table td > * {
    min-width: 0;
    max-width: 100%;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ops-metric strong { font-size: 16px; }
}

/* ══ 增强角色图片系统（Enhanced Character Image System）══════════════════════════════════
 * 名字由用户 2026-10-13 命名并冻结；此前散落在 docs/80 §26-§27 的"角色图展示带 / 顶部蒙版 / 渐隐"
 * 即本系统。三件套（缺一不可）：
 *   ① 上半全展示：消息列表上方预留展示带 `clamp(132px, 24svh, 236px)`，角色图**上段无遮挡**完整露出；
 *   ② 蒙版      ：列表顶沿 22px 渐隐（mask-image），让文字从图里"浮"出来而不是硬切；
 *   ③ 渐暗      ：展示带下沿＝暗化边界，边界以下由 `.message-list` 自身渐变 + `.chat-message-mask`
 *                 渐暗，保证文字可读；边界以上**零暗化**（旧云梦没有全宽暗化条）。
 * 权威来源（旧云梦源码，非推演）：
 *   public/css/mobile-styles.css:2406-2410  → `#st-chat-page-messages { margin-top: clamp(132px, 24svh, 236px) }`
 *   public/css/mobile-styles.css:2455-2472  → `#st-chat-page-message-list { mask-image: linear-gradient(...) }`
 *   public/scripts/RossAscends-mods.js:10752-10764 → 输入中把展示带 margin-top 置 0（键盘留文字空间）
 * 本系统原先只在竖屏手机生效（桌面端是"居中 760px 中列 + 左右遮罩"的另一套）。
 * 2026-10-13：桌面端做**照搬式移植**——同一套数值、同一套层，桌面与竖屏手机共用。
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* ①②：展示带 + 22px 蒙版（竖屏手机，2026-09 落地，数值不动） */
@media (max-width: 1000px) and (orientation: portrait) {
  .message-list { margin-top: clamp(132px, 24vh, 236px); }
  @supports (height: 1svh) {
    .message-list { margin-top: clamp(132px, 24svh, 236px); }
  }
  .message-list {
    -webkit-mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%);
  }
  /* 渐隐已由 mask 承担，去掉重复的叠加渐变 */
  .message-list::before { display: none; }
}

/* ①②：桌面端照搬——同一套数值原样搬过来（上下两条规则除媒体条件外逐字相同） */
@media (min-width: 1001px) {
  .message-list { margin-top: clamp(132px, 24vh, 236px); }
  @supports (height: 1svh) {
    .message-list { margin-top: clamp(132px, 24svh, 236px); }
  }
  .message-list {
    -webkit-mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%);
  }
  .message-list::before { display: none; }
}

/* ── 桌面端 vs 手机端的**唯一**差异点：输入中是否让位 ──────────────────────────────
 * 手机：抬起键盘必须让位 —— 释放展示带（margin-top:0）、去掉 22px 蒙版，并在上方补一层可读性暗化
 *       （对应旧云梦 body.st-chat-input-active 的移除；脚本出处 RossAscends-mods.js:10752-10764）。
 * 桌面：**输入不产生任何其他变化** —— 展示带、蒙版、渐暗全部恒定，一个像素都不动
 *       （桌面输入框常驻可编辑，若也让位就是"点一下输入框整屏跳 200px"）。
 * 所以 `.composing` 的全部规则都收在 ≤1000px 里：桌面端即使带着这个 class 也零效果。 */
@media (max-width: 1000px) {
  .chat-view.composing .message-list {
    margin-top: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* 展示带释放后，上方也要有可读性暗化（无气泡设计） */
  .chat-view.composing .chat-message-mask {
    background: linear-gradient(180deg, rgba(11, 11, 11, .34) 0%, rgba(11, 11, 11, .50) 34%, rgba(11, 11, 11, .72) 100%);
  }
}

/* ── 聊天设定工作区：旧云梦浅色干净主题 ─────────────────────────────
   作用域仅限工作区本身与其内部元素；聊天消息区、输入区、顶栏保持原深色主题。 */
/* 工作区浅色：全局按钮是"深底设计"，这里覆写主按钮与禁用态 */
.chat-context-workspace .button.primary,
.chat-context-mobile-page .button.primary,
#card-completion-workspace .button.primary { color: #f8fbf8; }
.chat-context-workspace .button.primary:disabled,
.chat-context-workspace .button.primary[disabled],
.chat-context-mobile-page .button.primary:disabled,
.chat-context-mobile-page .button.primary[disabled],
#card-completion-workspace .button.primary:disabled,
#card-completion-workspace .button.primary[disabled] {
  background: #d9e4e0;
  border-color: #c6d5d0;
  color: #7d8c92;
}

.chat-context-workspace,
.chat-context-mobile-page,
#card-completion-workspace {
  color-scheme: light;
  --bg: var(--ym-canvas);
  --panel: var(--ym-paper);
  --panel-2: var(--ym-paper-2);
  --line: var(--ym-line);
  --text: var(--ym-ink);
  --muted: var(--ym-muted);
  --accent: var(--ym-green);
  --accent-2: var(--ym-green);
  --danger: var(--ym-coral);
  --shadow: 0 18px 50px rgba(24, 41, 51, .10);
  background: var(--ym-canvas);
  color: var(--ym-ink);
}

/* ── 首页＝角色卡大厅（对齐旧云梦：浅色 / 右对齐标题 / 全宽按钮 / 筛选面板 / 图片主导卡片）── */
.hall-view {
  color-scheme: light;
  --bg: var(--ym-canvas); --panel: var(--ym-paper); --panel-2: var(--ym-paper-2);
  --line: var(--ym-line); --text: var(--ym-ink); --muted: var(--ym-muted);
  --accent: var(--ym-green); --accent-2: var(--ym-green); --danger: var(--ym-coral);
  background: var(--ym-canvas); color: var(--ym-ink);
}
.hall-view .hall-head { display: flex; justify-content: flex-end; margin: 4px 0 16px; }
.hall-head-copy { text-align: right; }
.hall-view .hall-head .eyebrow { color: var(--ym-ink); font-size: 11px; letter-spacing: .16em; }
.hall-view .hall-head h1 { margin: 4px 0 0; font-size: 32px; line-height: 1.12; }
.hall-actions { display: grid; gap: 10px; margin-bottom: 18px; }
.hall-actions .button { width: 100%; height: 46px; border-radius: 4px; font-size: 15px; }
.hall-actions .button.primary { color: #fff; }
.hall-actions .button.ghost { background: var(--ym-paper); border: 1px solid var(--ym-line); color: var(--ym-ink); }
.hall-filter { display: grid; gap: 10px; padding: 12px; margin-bottom: 14px; border: 1px solid var(--ym-line); border-radius: 8px; background: var(--ym-paper); }
.hall-filter-row { display: flex; gap: 10px; }
.hall-filter .search { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font-size: 14px; }
.hall-sort { display: flex; align-items: center; gap: 6px; flex: none; }
.hall-sort > span { color: var(--ym-muted); font-size: 12px; }
.hall-sort select { height: 40px; padding: 0 8px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font-size: 13px; }
.hall-chips { display: flex; flex-wrap: wrap; gap: 8px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.hall-chip { padding: 7px 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font-size: 13px; cursor: pointer; }
.hall-chip.is-active { background: #dcebe6; border-color: var(--ym-green); color: var(--ym-green-dark); font-weight: 700; }
.hall-count { margin: 0 0 10px; color: var(--ym-muted); font-size: 13px; }
.hall-count strong { color: var(--ym-ink); }
.hall-continue { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; margin-bottom: 14px; border: 1px solid var(--ym-line); border-radius: 8px; background: var(--ym-paper-2); }
.hall-continue-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hall-continue-avatar { flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.hall-continue-avatar-fallback { display: grid; place-items: center; background: #d3e7e0; color: var(--ym-green-dark); font-weight: 700; }
.hall-continue-copy { display: grid; gap: 2px; min-width: 0; }
.hall-continue-kicker { color: var(--ym-muted); font-size: 11px; }
.hall-continue-copy strong { color: var(--ym-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-continue-copy small { color: var(--ym-muted); font-size: 11px; }
/* 大厅/我的角色：解除全局 `.view { width: min(1240px,100%) }` 的阅读宽度上限。
   1912×914 实测（用户真实窗口）：上限把内容压成 1240 居中 → 卡片网格只有 1184、卡宽 224px，
   左侧空 196px、右侧空 224px（合计浪费 420px）——"空间利用率不足"的根因就在这里，
   而不是卡片自身尺寸。卡片页是图片主导，应当吃满可用宽度。 */
.view:has(.hall-view) { width: 100%; max-width: none; }
.hall-view .hall-continue .button { flex: none; }
/* 大厅卡片（对齐旧云梦）：图片区 aspect 1/1.16 顶部对齐 + 文字区（标题 clamp3 / 简介 clamp4 / 标签 + 时间）
   + 右上角 ☆收藏 与 🗑删除（两者同时存在时收藏左移 36px）+ 按分级着色的描边与内发光 */
.hall-view .card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* 中等宽度回退到 4/3 列，避免卡片过窄 */
@media (max-width: 1280px) { .hall-view .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .hall-view .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 750px) {
  .hall-view .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}
.character-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.character-card:hover { transform: translateY(-2px); border-color: #8ec9bc; box-shadow: 0 10px 24px rgba(21, 62, 54, .10); }
.card-media { position: relative; width: 100%; aspect-ratio: 1 / 1.16; overflow: hidden; border-radius: 4px 4px 0 0; background: #d9ebe5; }
.card-media .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card-media .card-art-placeholder { display: grid; place-items: center; background: #dfe8e4; color: var(--ym-muted); font-size: 13px; }
.card-body { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 12px; }
.card-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ym-ink); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.card-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--ym-muted); font-size: 11px; line-height: 1.42; overflow-wrap: anywhere; }
.card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.card-tags { display: flex; min-width: 0; gap: 4px; overflow: hidden; }
.card-tags span { max-width: 68px; padding: 3px 5px; border-radius: 4px; background: #edf6f2; color: var(--ym-green-dark); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tags .card-gate-chip { background: #fdeee9; color: #a5342a; }
.card-updated { flex: 0 0 auto; color: var(--ym-muted); font-size: 10px; white-space: nowrap; }
.character-card .card-favorite,
.character-card .card-delete { position: absolute; top: 8px; right: 8px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border-radius: 4px; font-size: 14px; cursor: pointer; }
.character-card .card-favorite { border: 1px solid rgba(225, 184, 90, .48); background: rgba(110, 87, 32, .82); color: #e6c973; }
.character-card .card-favorite:hover,
.character-card .card-favorite.is-active { border-color: #e1b85a; background: #6e5720; color: #fff0b3; }
.character-card .card-delete { border: 1px solid rgba(241, 123, 120, .5); background: rgba(61, 23, 23, .82); color: #ffb8b5; font-size: 12px; }
.character-card .card-delete:hover { background: #8d2e2a; color: #fff; }
.character-card.card-has-delete .card-favorite { right: 44px; }
/* 分级：SF 绿 / SF16 金 / R 橙棕 / R+ 绛红 */
.character-card[data-rating="SF"] { border-color: rgba(74, 156, 117, .64); box-shadow: inset 0 0 0 1.2px rgba(74, 156, 117, .14), 0 0 13px rgba(74, 156, 117, .10); }
.character-card[data-rating="SF16"] { border-color: rgba(194, 157, 57, .69); box-shadow: inset 0 0 0 1.2px rgba(194, 157, 57, .15), 0 0 13px rgba(194, 157, 57, .10); }
.character-card[data-rating="R"] { border-color: rgba(184, 92, 65, .69); box-shadow: inset 0 0 0 1.2px rgba(184, 92, 65, .14), 0 0 13px rgba(184, 92, 65, .10); }
.character-card[data-rating="R+"] { border-color: rgba(173, 61, 93, .72); box-shadow: inset 0 0 0 1.2px rgba(173, 61, 93, .16), 0 0 14px rgba(173, 61, 93, .11); }

/* 大厅页：顶栏与禁用主按钮随浅色主题（其余页面仍为深色） */
.app-shell[data-workspace="home"] .topbar,
.app-shell[data-workspace="my-characters"] .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="home"] .topbar .brand-name,
.app-shell[data-workspace="my-characters"] .topbar .brand-name,
.app-shell[data-workspace="home"] .topbar .account-label,
.app-shell[data-workspace="my-characters"] .topbar .account-label { color: var(--ym-ink); }
.app-shell[data-workspace="home"] .topbar .button.ghost,
.app-shell[data-workspace="my-characters"] .topbar .button.ghost { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="home"] .mobile-nav-toggle,
.app-shell[data-workspace="my-characters"] .mobile-nav-toggle { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.hall-view .button.primary:disabled,
.hall-view .button.primary[disabled] { background: #d9e4e0; border-color: #c6d5d0; color: #7d8c92; }

/* 大厅页整页浅色：shell 与页面底色（否则四周露出深色），品牌块与运营入口改青绿 */
.app-shell[data-workspace="home"],
.app-shell[data-workspace="my-characters"] { background: var(--ym-canvas); }
body:has(.app-shell[data-workspace="home"]),
body:has(.app-shell[data-workspace="my-characters"]) { background: var(--ym-canvas); color: var(--ym-ink); }
.app-shell[data-workspace="home"] .brand-mark,
.app-shell[data-workspace="my-characters"] .brand-mark { background: var(--ym-green); color: #fff; }
.app-shell[data-workspace="home"] #ops-entry,
.app-shell[data-workspace="my-characters"] #ops-entry { color: var(--ym-green); }

/* 桌面：品牌已由左导航承载，顶栏不再重复（对齐旧云梦）；移动端仍保留顶栏品牌 */
@media (min-width: 561px) {
  .app-shell:not(.chat-mode) .topbar .brand { display: none; }
  /* 桌面侧栏固定高度：最近聊天列表内部滚动（横向仍裁掉），"账号"始终停在底部 */
  .app-nav { height: 100dvh; overflow: hidden; }
}

/* 触屏（平板 / 横屏手机）：键盘弹出时侧栏也跟**可视视口**缩，避免"账号"被顶上去。
   桌面（hover: hover）保持 100dvh，不受 JS 报的 visualViewport 高度影响。 */
@media (min-width: 561px) and (hover: none) {
  .app-nav { height: var(--visual-viewport-height, 100dvh); min-height: 0; max-height: var(--visual-viewport-height, 100dvh); }
}

/* 设置 / 渠道状态 / 我的角色 等浅色工作区：shell 与页面底色一并转浅 */
.app-shell[data-workspace="settings"],
.app-shell[data-workspace="channel-status"],
.app-shell[data-workspace="my-characters"] { background: var(--ym-canvas); }
body:has(.app-shell[data-workspace="settings"]),
body:has(.app-shell[data-workspace="channel-status"]),
body:has(.app-shell[data-workspace="my-characters"]) { background: var(--ym-canvas); color: var(--ym-ink); }

/* 设置 / 渠道状态 / 我的角色：顶栏同样转浅（品牌块与运营入口改青绿） */
.app-shell[data-workspace="settings"] .topbar,
.app-shell[data-workspace="channel-status"] .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="settings"] .topbar .brand-name,
.app-shell[data-workspace="settings"] .topbar .account-label,
.app-shell[data-workspace="channel-status"] .topbar .brand-name,
.app-shell[data-workspace="channel-status"] .topbar .account-label { color: var(--ym-ink); }
.app-shell[data-workspace="settings"] .topbar .button.ghost,
.app-shell[data-workspace="channel-status"] .topbar .button.ghost { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="settings"] .mobile-nav-toggle,
.app-shell[data-workspace="channel-status"] .mobile-nav-toggle { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="settings"] .brand-mark,
.app-shell[data-workspace="channel-status"] .brand-mark { background: var(--ym-green); color: #fff; }
.app-shell[data-workspace="settings"] #ops-entry,
.app-shell[data-workspace="channel-status"] #ops-entry { color: var(--ym-green); }

/* 设置分支（人设/常用语/渠道/我的角色）组件转浅色：白卡 + 圆角 6 + 青绿强调 */
.settings-branch-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.settings-panel { min-width: 0; padding: 22px; border: 1px solid var(--ym-line); border-radius: 6px; background: rgba(255, 255, 255, .78); box-shadow: none; }
.settings-panel-heading h2 { margin: 2px 0 0; color: var(--ym-ink); font-size: 19px; }
.settings-panel-heading .subtle { color: var(--ym-muted); }
.settings-persona-list, .settings-channel-list { display: grid; gap: 10px; }
.settings-persona-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; }
.settings-persona-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid rgba(8, 120, 109, .28); border-radius: 8px; background: #dcebe6; color: var(--ym-green-dark); font-size: 14px; font-weight: 700; }
.settings-persona-copy strong { display: block; color: var(--ym-ink); font-size: 15px; }
.settings-persona-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; color: var(--ym-muted); font-size: 12px; line-height: 1.5; }
.settings-persona-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.settings-badge { padding: 3px 8px; border: 1px solid rgba(8, 120, 109, .32); border-radius: 999px; background: #e6f2ed; color: var(--ym-green-dark); font-size: 11px; }
.settings-empty { padding: 30px 16px; border: 1px dashed var(--ym-line); border-radius: 6px; color: var(--ym-muted); text-align: center; line-height: 1.6; }
.settings-persona-editor .edit-field, .settings-panel .edit-field { color: var(--ym-muted); }
.settings-panel .edit-field input,
.settings-panel .edit-field textarea,
.settings-panel .edit-field select { padding: 9px 11px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font-size: 14px; }
.settings-panel .button.ghost { border-color: var(--ym-line); background: #fff; color: var(--ym-ink); }
.settings-panel .button.ghost.danger { border-color: rgba(201, 103, 80, .45); color: #a5342a; background: #fff; }
.settings-panel .button.primary { color: #f8fbf8; }

/* ── 账号页（已合并原「我的」）：整页浅色 + 组件对齐旧云梦卡片语言 ── */
.app-shell[data-workspace="account"], .app-shell[data-workspace="favorites"] { background: var(--ym-canvas); }
body:has(.app-shell[data-workspace="account"]), body:has(.app-shell[data-workspace="favorites"]) { background: var(--ym-canvas); color: var(--ym-ink); }
.app-shell[data-workspace="account"] .topbar, .app-shell[data-workspace="favorites"] .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="account"] .topbar .brand-name, .app-shell[data-workspace="favorites"] .topbar .brand-name,
.app-shell[data-workspace="account"] .topbar .account-label, .app-shell[data-workspace="favorites"] .topbar .account-label { color: var(--ym-ink); }
.app-shell[data-workspace="account"] .topbar .button.ghost, .app-shell[data-workspace="favorites"] .topbar .button.ghost { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="account"] .mobile-nav-toggle, .app-shell[data-workspace="favorites"] .mobile-nav-toggle { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="account"] .brand-mark, .app-shell[data-workspace="favorites"] .brand-mark { background: var(--ym-green); color: #fff; }
.app-shell[data-workspace="account"] #ops-entry, .app-shell[data-workspace="favorites"] #ops-entry { color: var(--ym-green); }
.my-workspace { gap: 26px; color-scheme: light; --line: var(--ym-line); --text: var(--ym-ink); --muted: var(--ym-muted); --accent: var(--ym-green); --accent-2: var(--ym-green); color: var(--ym-ink); }
.my-page-header { gap: 7px; padding: 0 0 24px; border-bottom: 1px solid var(--ym-line); }
.my-page-header .eyebrow { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.my-page-header h1 { margin: 0; color: var(--ym-ink); font-size: 32px; line-height: 1.15; }
.my-page-header .subtle { color: var(--ym-muted); font-size: 14px; line-height: 1.65; }
.my-account-panel { padding: 22px; border: 1px solid var(--ym-line); border-radius: 6px; background: rgba(255, 255, 255, .78); box-shadow: none; }
.my-avatar { width: 76px; height: 76px; border: 1px solid rgba(8, 120, 109, .28); border-radius: 10px; background: #dcebe6; color: var(--ym-green-dark); font-weight: 700; }
.my-account-copy .eyebrow { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.my-account-copy h2 { color: var(--ym-ink); font-size: 23px; }
.my-account-copy .subtle { color: var(--ym-muted); }
.account-metrics strong { color: var(--ym-ink); }
.my-workspace-entry-grid { gap: 16px; }
.my-hub-entry { padding: 22px; border: 1px solid var(--ym-line); border-radius: 6px; background: rgba(255, 255, 255, .78); color: var(--ym-ink); min-height: 168px; align-content: start; }
.my-hub-entry:hover, .my-hub-entry:focus-visible { border-color: #8ec6b9; background: #fff; box-shadow: 0 10px 24px rgba(25, 81, 70, .09); transform: translateY(-2px); }
.my-hub-kicker { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.my-hub-entry strong { color: var(--ym-ink); font-size: 20px; line-height: 1.18; margin-top: 10px; }
.my-hub-entry > span:not(.my-hub-kicker):not(.my-hub-arrow) { color: var(--ym-muted); font-size: 13px; line-height: 1.65; }
.my-hub-arrow { color: var(--ym-green); }
.my-favorites-workspace, .my-common-phrases-workspace { padding: 22px; border: 1px solid var(--ym-line); border-radius: 6px; background: rgba(255, 255, 255, .78); }
.my-favorites-header h2 { color: var(--ym-ink); font-size: 19px; }
.my-favorites-header .eyebrow { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.my-favorites-header .subtle, .my-favorites-empty { color: var(--ym-muted); }
.my-favorites-workspace .button.ghost, .my-common-phrases-workspace .button.ghost { border-color: var(--ym-line); background: #fff; color: var(--ym-ink); }
.my-workspace .button.primary { color: #f8fbf8; }

/* 「最近聊天」右侧的「详细」按钮：与搜索框同一套语言（白底 + 描边）+ 青绿字，明确可点 */
.nav-recent-more { padding: 3px 9px; border: 1px solid #cadbd5; border-radius: 4px; background: #fff; color: var(--ym-green); font-size: 11px; font-weight: 700; line-height: 1.5; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; }
.nav-recent-more:hover, .nav-recent-more:focus-visible { border-color: #8ec6b9; background: #e6f2ed; color: var(--ym-green-dark); outline: none; }

/* ── 最近聊天页（#recent）：整页浅色 + 白卡列表；修复原深色主题遗留的"空头像方块" ── */
.app-shell[data-workspace="recent"] { background: var(--ym-canvas); }
body:has(.app-shell[data-workspace="recent"]) { background: var(--ym-canvas); color: var(--ym-ink); }
.app-shell[data-workspace="recent"] .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="recent"] .topbar .brand-name,
.app-shell[data-workspace="recent"] .topbar .account-label { color: var(--ym-ink); }
.app-shell[data-workspace="recent"] .topbar .button.ghost { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="recent"] .mobile-nav-toggle { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="recent"] .brand-mark { background: var(--ym-green); color: #fff; }
.app-shell[data-workspace="recent"] #ops-entry { color: var(--ym-green); }

/* ── 聊天页（chat-mode）永远是深色主题 ──────────────────────────────────────────────
 * 上面那一串浅色工作区规则是按 `data-workspace` 生效的，而**进入会话后 data-workspace 不会变**
 * （实测仍是 "home" / "my-characters" / "recent"…）。于是 `body:has(...) { color: var(--ym-ink) }`
 * 会把深墨色（rgb(24,41,51)）继承进聊天页 → 深色玻璃顶栏上就是"黑底黑字"：
 *   实测 .chat-head 背景 rgba(22,22,22,.58)，而标题/收藏/设定/返回键全是 rgb(24,41,51)。
 * 这里用同特异性但更靠后的规则把聊天页拉回深色（body 与 shell 各一条），
 * 比在 7 处工作区选择器上加 :not(.chat-mode) 更集中、更好审。 */
body:has(.app-shell.chat-mode) { background: #171717; color: var(--text); }
.app-shell.chat-mode { background: #171717; color: var(--text); }
#recent-workspace { color-scheme: light; --line: var(--ym-line); --text: var(--ym-ink); --muted: var(--ym-muted); --accent: var(--ym-green); --accent-2: var(--ym-green); color: var(--ym-ink); }
#recent-workspace .page-heading { padding: 0 0 24px; border-bottom: 1px solid var(--ym-line); }
#recent-workspace .page-heading .eyebrow { color: var(--ym-green); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#recent-workspace .page-heading h1 { margin-top: 7px; color: var(--ym-ink); font-size: 32px; line-height: 1.15; }
#recent-workspace .page-heading .subtle { color: var(--ym-muted); font-size: 14px; line-height: 1.65; }
#recent-workspace .button.ghost { border-color: var(--ym-line); background: #fff; color: var(--ym-ink); }
#recent-workspace .button.primary { color: #f8fbf8; }
.workspace-search { color: var(--ym-muted); }
.workspace-search .search { height: 40px; padding: 0 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font-size: 14px; }
.recent-list { gap: 10px; }
.recent-item { padding: 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); }
.recent-item:hover, .recent-item:focus-visible { border-color: #8ec6b9; background: #fff; box-shadow: 0 8px 20px rgba(25, 81, 70, .08); outline: none; }
.recent-avatar { width: 46px; height: 46px; border: 1px solid var(--ym-line); border-radius: 8px; background: #dce9e4; object-fit: cover; }
.recent-avatar-gated { display: grid; place-items: center; border: 1px solid rgba(8, 120, 109, .28); background: #dcebe6; color: var(--ym-green-dark); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.recent-item-copy strong { color: var(--ym-ink); font-size: 14px; }
.recent-item-copy span { color: var(--ym-muted); font-size: 13px; }
.recent-item-copy small { color: var(--ym-muted); font-size: 11px; }
.recent-item-arrow { color: #8ba3a0; }

/* ── 指令管理页（P5）：平台基线条目列表 + 裸模式 + 组装预览 ── */
.prompt-admin-bare { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--ym-line); border-radius: 6px; background: var(--ym-paper-2); }
.prompt-admin-bare label { display: flex; align-items: center; gap: 8px; color: var(--ym-ink); font-size: 13px; }
.prompt-admin-list { display: grid; gap: 10px; }
.prompt-admin-row { padding: 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; }
.prompt-admin-row.is-editing { border-color: #8ec6b9; box-shadow: 0 8px 20px rgba(25, 81, 70, .08); }
.prompt-admin-row-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prompt-admin-index { flex: none; width: 26px; color: var(--ym-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.prompt-admin-copy { min-width: 0; flex: 1 1 auto; }
.prompt-admin-copy strong { display: block; color: var(--ym-ink); font-size: 14px; }
.prompt-admin-copy small { display: block; margin-top: 3px; color: var(--ym-muted); font-size: 11px; overflow-wrap: anywhere; }
.prompt-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.prompt-admin-actions .button { min-height: 32px; padding: 0 10px; font-size: 12px; }
.prompt-admin-editor { display: grid; gap: 8px; margin-top: 12px; }
.prompt-admin-editor textarea { width: 100%; min-height: 140px; padding: 10px 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.prompt-admin-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-admin-editor-actions .button.danger { border-color: rgba(201, 103, 80, .45); color: #a5342a; }
.prompt-preview { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--ym-line); border-radius: 6px; background: var(--ym-paper-2); }
.prompt-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.prompt-preview-head strong { color: var(--ym-ink); font-size: 15px; }
.prompt-preview-head small { color: var(--ym-muted); font-size: 12px; }
.prompt-preview-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prompt-preview-list li { display: grid; gap: 4px; }
.prompt-preview-role { color: var(--ym-green-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.prompt-preview-list pre { max-height: 180px; margin: 0; overflow: auto; padding: 10px 12px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── 卡设补全：个人配置提示（docs/85：只存覆盖，不复制卡片） ── */
.card-completion-override { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 18px 10px; padding: 9px 12px; border: 1px solid #bcd9d0; border-radius: 6px; background: #eef7f3; color: var(--ym-green-dark); font-size: 12px; }
.card-completion-override .cc-link { border: 0; background: transparent; color: var(--ym-green-dark); font-size: 12px; text-decoration: underline; cursor: pointer; }


/* P2：账户私有覆盖层（个人补全）标记 */
.card-override-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: 6px; background: rgba(120, 90, 220, .16); color: #6b4fd8;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; }

/* 大厅计数：前缀由 data-prefix 渲染（搜索时显示「搜索结果」） */
.hall-count::before { content: attr(data-prefix) " "; }

/* 卡片详情：卡设补全框 + 默认收起的世界设定 */
.info-completion { border-left: 3px solid rgba(120, 90, 220, .5); padding-left: 12px; }
.completion-block { margin: 10px 0; }
.completion-label { font-size: 12px; font-weight: 700; color: #6b4fd8; margin-bottom: 4px; }
.info-world { border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 10px 12px; }
.info-world > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.info-world > summary::-webkit-details-marker { display: none; }
.info-world > summary::before { content: '▸'; transition: transform .15s ease; }
.info-world[open] > summary::before { transform: rotate(90deg); }
.world-field { margin: 10px 0 0; }
.world-label { font-size: 12px; font-weight: 700; color: var(--ym-ink, #333); margin-bottom: 4px; }

/* 聊天工作区：卡设补全框 + 世界设定收起 */
.chat-context-completion { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(120, 90, 220, .35);
  border-left: 3px solid rgba(120, 90, 220, .6); border-radius: 10px; background: rgba(120, 90, 220, .04); }
.chat-context-completion-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.chat-context-completion-head strong { color: #6b4fd8; }
.chat-context-completion-head small { color: var(--ym-lilac, #999); font-size: 12px; }
.chat-context-world { margin: 14px 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; padding: 10px 14px; }
.chat-context-world > summary { cursor: pointer; font-weight: 700; display: flex; align-items: baseline; gap: 8px; list-style: none; }
.chat-context-world > summary::-webkit-details-marker { display: none; }
.chat-context-world > summary::before { content: '▸'; transition: transform .15s ease; }
.chat-context-world[open] > summary::before { transform: rotate(90deg); }
.chat-context-world > summary small { font-weight: 400; color: var(--ym-lilac, #999); font-size: 12px; }

/* 聊天消息区滚动条 + 卡设补全框文字色（产品反馈：灰边框/滑动框、白底白字） */
/* ① 消息区：去掉横向滚动条槽（底部那条灰圆角），纵向滚动条改细、不抢视线 */
.chat-surface > #message-list, .message-list { overflow-x: hidden; }
.message-list::-webkit-scrollbar { width: 6px; height: 0; }
.message-list::-webkit-scrollbar-track, .message-list::-webkit-scrollbar-corner { background: transparent; }
.message-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .14); }
.message-list:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); }
@supports not selector(::-webkit-scrollbar) {
  .message-list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
}
/* ② 卡设补全框：.info-text 默认是给深色底用的浅灰，浅底上会变成"白底白字" */
.chat-context-completion .info-text, .info-completion .info-text { color: var(--ym-ink, #2b2b32); }
.chat-context-completion .info-text { max-height: none; overflow: visible; }

/* 桌面端：消息列暗化层保持原背景（不随滚动），左右各 24px 过渡（抄角色图 90deg 遮罩） */
@media (min-width: 1001px) {
  /* 暗化层仍在元素自身背景上：滚动容器自身的背景不随内容滚动（原实现如此） */
  .message-list {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%),
      linear-gradient(90deg, transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, .82) 11px, #000 22px, #000 100%),
      linear-gradient(90deg, transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* 世界设定：卡设补全入口（工具条式：白底 + 左侧紫竖条，显眼但不抢戏） */
.chat-context-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 10px 14px 10px 12px; border-radius: 10px;
  background: rgba(120, 90, 220, .05); border-left: 3px solid rgba(120, 90, 220, .55); }
.chat-context-entry-copy { display: grid; gap: 2px; min-width: 0; }
.chat-context-entry-copy strong { color: var(--text); font-size: 13.5px; font-weight: 650; letter-spacing: .01em; }
.chat-context-entry-copy p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.chat-context-entry-button { flex: none; min-height: 32px; padding: 6px 13px; font-size: 12.5px; font-weight: 650;
  color: #6b4fd8; background: #fff; border: 1px solid rgba(120, 90, 220, .42); }
.chat-context-entry-button:hover, .chat-context-entry-button:focus-visible { background: rgba(120, 90, 220, .10); border-color: rgba(120, 90, 220, .62); }

/* 聊天存档面板（旧云梦 Checkpoint 第二界面）：沿用补全工作区的浮层模式 */
.chat-archive-scrim { position: fixed; z-index: 76; inset: 0; background: rgba(3, 7, 9, .72); }
.chat-archive-scrim[hidden], .chat-archive-workspace[hidden] { display: none !important; }
.chat-archive-workspace { position: fixed; z-index: 80; inset: 5vh 8vw; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #465b63; border-radius: 14px;
  background: var(--ym-canvas); color: var(--text); box-shadow: 0 28px 80px rgba(24, 41, 51, .14); }
.chat-archive-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px;
  flex: none; padding: 18px 22px 15px; border-bottom: 1px solid var(--ym-line); background: var(--ym-paper-2); }
.chat-archive-header h2 { margin: 4px 0 4px; font-size: 20px; line-height: 1.2; }
.chat-archive-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-archive-back { align-self: start; border: 0; padding: 4px 0; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.chat-archive-back:hover { color: var(--text); }
.chat-archive-kicker { color: var(--accent-2); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.chat-archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none;
  padding: 12px 18px; border-bottom: 1px solid var(--ym-line); background: var(--ym-paper-2); }
.chat-archive-name { flex: 1 1 240px; min-width: 0; }
.chat-archive-name input { width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--ym-line); border-radius: 9px; background: #fff; color: var(--text); font-size: 13px; }
.chat-archive-toolbar .button { min-height: 36px; padding: 8px 13px; font-size: 12.5px; }
.chat-archive-error { margin: 0; padding: 10px 18px; color: #a5342a; background: rgba(201, 103, 80, .08); font-size: 12.5px; }
.chat-archive-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 18px calc(20px + env(safe-area-inset-bottom)); }
.chat-archive-list { display: grid; gap: 8px; align-content: start; }
/* 「其他会话的存档」：存档按会话保存，但别让人以为存档丢了 */
.chat-archive-others { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--ym-line); }
.chat-archive-elsewhere { margin: 14px 0 0; padding: 9px 11px; border: 1px dashed var(--ym-line); border-radius: 9px; background: var(--ym-paper-2); color: var(--ym-muted); font-size: 11.5px; line-height: 1.6; }
.chat-archive-others header { display: grid; gap: 3px; }
.chat-archive-others h3 { margin: 0; font-size: 13px; }
.chat-archive-others p { margin: 0; color: var(--ym-muted); font-size: 11px; line-height: 1.5; }
.chat-archive-group { display: grid; gap: 8px; padding: 10px 0 2px; }
.chat-archive-group h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; }
.chat-archive-group-tag { padding: 1px 6px; border: 1px solid rgba(8, 120, 109, .35); border-radius: 999px; background: #e6f2ed; color: var(--ym-green-dark); font-size: 10px; font-weight: 600; }
.chat-archive-group-count { margin-left: auto; color: var(--ym-muted); font-size: 11px; font-weight: 500; }
.chat-archive-card.is-other { opacity: .92; }
.chat-archive-empty { margin: 0; padding: 22px 4px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.chat-archive-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--ym-line);
  border-radius: 11px; background: #fff; }
.chat-archive-card.is-selected { border-color: rgba(120, 90, 220, .55); background: rgba(120, 90, 220, .05); }
.chat-archive-check { flex: none; display: grid; place-items: center; }
.chat-archive-card-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chat-archive-card-main strong { font-size: 13.5px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-archive-card-main small { color: var(--muted); font-size: 11.5px; }
.chat-archive-card-actions { display: flex; gap: 6px; flex: none; }
.chat-archive-card-actions .button { min-height: 32px; padding: 6px 11px; font-size: 12px; }
.chat-archive-danger { color: #a5342a !important; border-color: rgba(165, 52, 42, .35) !important; }
.chat-archive-danger:hover { background: rgba(201, 103, 80, .10) !important; }
.chat-archive-viewer { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; background: var(--ym-canvas); }
.chat-archive-viewer > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 16px 20px 13px; border-bottom: 1px solid var(--ym-line); background: var(--ym-paper-2); }
.chat-archive-viewer > header h3 { margin: 4px 0 0; font-size: 17px; }
.chat-archive-viewer-body { display: grid; gap: 10px; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 20px; }
.chat-archive-msg { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--ym-paper-2); }
.chat-archive-msg.is-user { background: rgba(120, 90, 220, .06); }
.chat-archive-msg-role { color: var(--muted); font-size: 11px; font-weight: 700; }
.chat-archive-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.chat-archive-viewer > footer { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 12px 18px; border-top: 1px solid var(--ym-line); background: var(--ym-paper-2); }
@media (max-width: 820px) {
  .chat-archive-workspace { inset: 0; border: 0; border-radius: 0; }
  .chat-archive-header { padding: 14px 14px 12px; }
  .chat-archive-header h2 { font-size: 18px; }
  .chat-archive-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
  .chat-archive-name { grid-column: 1 / -1; }
  .chat-archive-toolbar .button { width: 100%; min-height: 42px; justify-content: center; font-size: 13px; }
  .chat-archive-card { flex-wrap: wrap; align-items: flex-start; }
  .chat-archive-card-main { flex: 1 1 100%; }
  .chat-archive-card-actions { width: 100%; }
  .chat-archive-card-actions .button { flex: 1 1 0; min-height: 38px; }
  .chat-archive-list { padding: 12px 12px 18px; }
}

/* 存档面板：桌面描边按钮可读性 + 手机端工具栏三行网格 */
/* 桌面：工具栏的次级按钮在浅底上太淡，给足边框与文字对比 */
.chat-archive-toolbar .button.ghost { color: var(--text); background: #fff; border: 1px solid var(--ym-line); }
.chat-archive-toolbar .button.ghost:hover, .chat-archive-toolbar .button.ghost:focus-visible { background: var(--ym-paper-2); border-color: #9fb3ad; }
.chat-archive-card-actions .button.ghost { color: var(--text); background: #fff; border: 1px solid var(--ym-line); }
.chat-archive-card-actions .button.ghost:hover { background: var(--ym-paper-2); border-color: #9fb3ad; }
@media (max-width: 820px) {
  /* 三行网格：输入框整行 → 主操作整行 → 两个次级操作各半行（避免奇数按钮独占一行） */
  .chat-archive-toolbar { grid-template-columns: 1fr 1fr; }
  .chat-archive-name { grid-column: 1 / -1; }
  .chat-archive-toolbar .button[data-chat-archive-action="create"],
  .chat-archive-toolbar .button[data-chat-archive-action="bulk-delete"] { grid-column: 1 / -1; }
  .chat-archive-card-actions .button { font-size: 12.5px; }
}

/* 存档面板：局部切换到浅色主题变量（面板是浅底，全局 --text 是深色主题的近白色） */
.chat-archive-workspace, .chat-archive-scrim + .chat-archive-workspace {
  --bg: var(--ym-canvas);
  --panel: var(--ym-paper);
  --panel-2: var(--ym-paper-2);
  --line: var(--ym-line);
  --text: var(--ym-ink);
  --muted: var(--ym-muted);
  --accent: var(--ym-green);
  --accent-2: var(--ym-green);
  --danger: var(--ym-coral);
}

/* 存档面板：桌面高度随内容自适应（避免列表下方大片空白）+ 手机端副标题精简 */
@media (min-width: 821px) {
  .chat-archive-workspace { inset: auto; top: 5vh; left: 50%; transform: translateX(-50%);
    width: min(880px, 92vw); height: auto; max-height: 84vh; }
  .chat-archive-list { flex: 0 1 auto; max-height: 56vh; }
}
@media (max-width: 820px) {
  .chat-archive-sub-name { display: none; }
}

/* 卡设补全底部：统一一行紧凑布局（同一图层、等高、等距、文本居中） */
.card-completion-footer .button { min-height: 36px; padding: 8px 14px; font-size: 13px; justify-content: center; }
.card-completion-footer .button.ghost { background: #fff; border: 1px solid var(--ym-line); color: var(--text); }
.card-completion-footer .button.ghost:hover, .card-completion-footer .button.ghost:focus-visible { background: var(--ym-paper-2); border-color: #9fb3ad; }
.card-completion-footer .button.is-soft { color: #6b4fd8; background: rgba(120, 90, 220, .10); border: 1px solid rgba(120, 90, 220, .35); }
.card-completion-footer .button.is-soft:hover { background: rgba(120, 90, 220, .18); }
@media (max-width: 820px) {
  .card-completion-footer { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); }
  .card-completion-status { text-align: center; font-size: 11.5px; line-height: 1.3; }
  /* 一行放下：按钮等分整行，最多 3 颗/行，出现第 4 颗才换行 */
  .card-completion-footer > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: stretch; }
  .card-completion-footer .button { flex: 1 1 30%; min-width: 0; min-height: 40px; padding: 8px; font-size: 12.5px; white-space: nowrap; }
}

/* 通用：hidden 的按钮必须真正不占位（.button 的 display 会覆盖 UA 的 [hidden]） */
button[hidden], .button[hidden] { display: none !important; }

/* 响应式标签：宽屏用全称、窄屏用简称（让 4 颗按钮在手机上一行放得下） */
.label-short { display: none; }
@media (max-width: 820px) {
  .card-completion-footer .label-full { display: none; }
  .card-completion-footer .label-short { display: inline; }
  .card-completion-footer .button { flex: 1 1 0; white-space: nowrap; }
}

/* 卡片简介统一行数截断（原规则只写 .hall-view，收藏页等网格里简介不截断 → 单卡高达 1626px） */
.card-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 收藏网格与大厅保持同一套卡片简介样式（原规则只写给 .hall-view） */
.my-favorites-grid .card-description { color: var(--ym-muted); margin: 0; font-size: 12px; line-height: 1.55; }

/* 收藏页：总数独立成徽章（原先混排在说明文字里，弱化了信息） */
.favorites-count-row { margin-top: 8px; }
.favorites-count-pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  background: rgba(120, 90, 220, .10); color: #6b4fd8; font-size: 12px; font-weight: 650; }
.favorites-count-pill:empty { display: none; }

/* 浅色 shell 统一重映射主题变量（此前只设 background，--text/--muted 等仍是深色主题值 → 顶栏与渠道卡片出现低对比） */
:is(.app-shell[data-workspace="home"], .app-shell[data-workspace="my-characters"],
    .app-shell[data-workspace="recent"], .app-shell[data-workspace="account"],
    .app-shell[data-workspace="favorites"], .app-shell[data-workspace="settings"],
    .app-shell[data-workspace="channel-status"],
    .app-shell[data-workspace="ops"]):not(.chat-mode) {
  --bg: var(--ym-canvas);
  --panel: var(--ym-paper);
  --panel-2: var(--ym-paper-2);
  --line: var(--ym-line);
  --text: var(--ym-ink);
  --muted: var(--ym-muted);
  --accent: var(--ym-green);
  --accent-2: var(--ym-green);
  --danger: var(--ym-coral);
}

/* 运营页（独立页 admin.html）：与其它浅色 workspace 同一套壳层与顶栏样式 */
.app-shell[data-workspace="ops"] { background: var(--ym-canvas); }
body:has(.app-shell[data-workspace="ops"]) { background: var(--ym-canvas); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .topbar .brand-name { color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .topbar .button.ghost,
.app-shell[data-workspace="ops"] .topbar-logout,
.app-shell[data-workspace="ops"] .topbar-login { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .mobile-nav-toggle { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .brand-mark { background: var(--ym-green); color: #fff; }

/* 运营页浅色覆盖：.ops-* 组件整套是硬编码深色（为深色主题写的），此处统一改为浅色 */
.app-shell[data-workspace="ops"] #view { color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-card,
.app-shell[data-workspace="ops"] .ops-traffic-panel { background: var(--ym-paper); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-card-body,
.app-shell[data-workspace="ops"] .ops-card-head { color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-metric,
.app-shell[data-workspace="ops"] .ops-filter { background: var(--ym-paper-2); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-resource { background: var(--ym-canvas); border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-filter.is-active { background: var(--ym-green); border-color: var(--ym-green); color: #fff; }
.app-shell[data-workspace="ops"] .ops-chip-normal,
.app-shell[data-workspace="ops"] .ops-chip-succeeded,
.app-shell[data-workspace="ops"] .ops-chip-completed { background: rgba(82, 190, 127, .16); color: #045e57; border-color: rgba(82, 190, 127, .42); }
.app-shell[data-workspace="ops"] .ops-chip-degraded,
.app-shell[data-workspace="ops"] .ops-chip-running,
.app-shell[data-workspace="ops"] .ops-chip-queued { background: rgba(232, 163, 95, .18); color: #8a5a1e; border-color: rgba(232, 163, 95, .45); }
.app-shell[data-workspace="ops"] .ops-chip-unavailable,
.app-shell[data-workspace="ops"] .ops-chip-failed,
.app-shell[data-workspace="ops"] .ops-chip-dead,
.app-shell[data-workspace="ops"] .ops-chip-stopped { background: rgba(229, 128, 128, .16); color: #a5342a; border-color: rgba(229, 128, 128, .42); }
.app-shell[data-workspace="ops"] .ops-chip-unknown { background: rgba(165, 170, 169, .16); color: var(--ym-muted); border-color: var(--ym-line); }
.app-shell[data-workspace="ops"] .ops-rollout-control input,
.app-shell[data-workspace="ops"] .ops-card input,
.app-shell[data-workspace="ops"] .ops-card select,
.app-shell[data-workspace="ops"] .ops-card textarea { background: #fff; color: var(--ym-ink); border-color: var(--ym-line); }

/* 运营页浅色覆盖：文字色（.ops-* 里大量为深色主题写的浅色文字） */
.app-shell[data-workspace="ops"] .brand,
.app-shell[data-workspace="ops"] .brand span { color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-hint,
.app-shell[data-workspace="ops"] .ops-dim,
.app-shell[data-workspace="ops"] .ops-metric-label,
.app-shell[data-workspace="ops"] .ops-table th,
.app-shell[data-workspace="ops"] .ops-id,
.app-shell[data-workspace="ops"] .ops-loading,
.app-shell[data-workspace="ops"] .ops-key,
.app-shell[data-workspace="ops"] .ops-filter,
.app-shell[data-workspace="ops"] .ops-traffic-copy p,
.app-shell[data-workspace="ops"] .ops-rollout-control,
.app-shell[data-workspace="ops"] .ops-state { color: var(--ym-muted); }
.app-shell[data-workspace="ops"] .ops-warn { color: #8a5a1e; }
.app-shell[data-workspace="ops"] .ops-state-error { color: #a5342a; }
.app-shell[data-workspace="ops"] .ops-card h2,
.app-shell[data-workspace="ops"] .ops-card strong,
.app-shell[data-workspace="ops"] .ops-card td,
.app-shell[data-workspace="ops"] .ops-metric strong { color: var(--ym-ink); }

/* 运营页浅色覆盖：数据表格（桌面行/移动端卡片式行都是深色底） */
.app-shell[data-workspace="ops"] .ops-table,
.app-shell[data-workspace="ops"] .ops-table tr,
.app-shell[data-workspace="ops"] .ops-table td,
.app-shell[data-workspace="ops"] .ops-table th { background: transparent; border-color: var(--ym-line); color: var(--ym-ink); }
.app-shell[data-workspace="ops"] .ops-table th { color: var(--ym-muted); }

/* 首屏主题（防刷新闪烁）：<head> 内联脚本先给 <html> 打 data-workspace，这里与 .app-shell 规则同源 */
:is(html[data-workspace="home"], html[data-workspace="my-characters"], html[data-workspace="recent"],
    html[data-workspace="account"], html[data-workspace="favorites"], html[data-workspace="settings"],
    html[data-workspace="channel-status"], html[data-workspace="ops"]) {
  --bg: var(--ym-canvas);
  --panel: var(--ym-paper);
  --panel-2: var(--ym-paper-2);
  --line: var(--ym-line);
  --text: var(--ym-ink);
  --muted: var(--ym-muted);
  --accent: var(--ym-green);
  --accent-2: var(--ym-green);
  --danger: var(--ym-coral);
}
:is(html[data-workspace="home"], html[data-workspace="my-characters"], html[data-workspace="recent"],
    html[data-workspace="account"], html[data-workspace="favorites"], html[data-workspace="settings"],
    html[data-workspace="channel-status"], html[data-workspace="ops"]) body { background: var(--ym-canvas); color: var(--ym-ink); }
:is(html[data-workspace="home"], html[data-workspace="my-characters"], html[data-workspace="recent"],
    html[data-workspace="account"], html[data-workspace="favorites"], html[data-workspace="settings"],
    html[data-workspace="channel-status"], html[data-workspace="ops"]) .app-shell { background: var(--ym-canvas); }
:is(html[data-workspace="home"], html[data-workspace="my-characters"], html[data-workspace="recent"],
    html[data-workspace="account"], html[data-workspace="favorites"], html[data-workspace="settings"],
    html[data-workspace="channel-status"], html[data-workspace="ops"]) .app-shell:not(.chat-mode) .topbar { background: var(--ym-canvas); border-bottom-color: var(--ym-line); color: var(--ym-ink); }

/* ── 剧情安插面板：世界安排 / NPC（2026-10-16）──────────────────────────── */
.plot-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
  font-weight: 600;
  font-size: 0.92em;
}
.plot-section-title small {
  font-weight: 400;
  opacity: 0.62;
  font-size: 0.86em;
}
.plot-npc-section .plot-npc {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.plot-character-head small {
  margin-left: 8px;
  opacity: 0.6;
  font-weight: 400;
}
.plot-mean[data-status="inner"] .plot-mean-status {
  opacity: 0.72;
  font-style: italic;
}

/* 剧情安插：头部只留总开关；三个分项设置独立成区（2026-10-16） */
.chat-experience-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.plot-settings {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ym-line);
  border-radius: 10px;
  background: var(--ym-paper-2, #fafbfa);
}
.plot-setting-row {
  display: grid;
  grid-template-columns: 68px 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.plot-setting-row + .plot-setting-row { border-top: 1px dashed var(--ym-line); }
.plot-setting-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.plot-setting-control { display: flex; align-items: center; }
.plot-setting-hint { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted, #6b7280); }
.plot-setting-hint strong { color: var(--ym-ink, #1c1f23); }
.plot-luck { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.plot-luck select {
  min-width: 0;
  max-width: 190px;
  padding: 3px 6px;
  font-size: 11.5px;
  border: 1px solid var(--ym-line);
  border-radius: 7px;
  background: #fff;
  color: var(--ym-ink, #1c1f23);
}
/* 窄屏：名称+控件一行，解释换到下一行整行显示 */
@media (max-width: 820px) {
  .plot-setting-row { grid-template-columns: 68px minmax(0, auto); row-gap: 4px; }
  .plot-setting-hint { grid-column: 1 / -1; }
  .plot-luck select { max-width: 46vw; }
}
/* 剧情安插：世界 / NPC 分块开关（2026-10-16） */
.plot-block-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ym-muted, #6b7280);
  white-space: nowrap;
}
.plot-block-switch.is-off { opacity: 0.66; }
.pill-switch.pill-switch-sm { transform: scale(0.82); transform-origin: right center; }

/* 剧情安插：总开关关着时，分项设置从属且不可用（包含关系要看得见） */
.plot-settings.is-inactive { opacity: 0.6; }
.plot-settings.is-inactive .plot-setting-hint { opacity: 0.9; }
.plot-setting-note {
  margin: 2px 0 6px;
  font-size: 11.5px;
  color: var(--ym-muted, #6b7280);
}
.plot-settings.is-inactive .pill-switch,
.plot-settings.is-inactive select { cursor: not-allowed; }

/* 面板：已完成/已过去/已做 默认折叠（否则旧条目看着像还没处理） */
.plot-done-fold { margin-top: 6px; }
.plot-done-fold > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--ym-muted, #6b7280);
  padding: 4px 0;
  list-style: none;
}
.plot-done-fold > summary::before { content: "▸ "; }
.plot-done-fold[open] > summary::before { content: "▾ "; }
.plot-done-fold .plot-mean,
.plot-done-fold .plot-world-row { opacity: .6; }

/* ── 站内确认弹窗 & 浮层提示（2026-10-17：替代浏览器原生 confirm / 正文内的提示条） ── */
.ym-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; }
.ym-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 18, 22, .46); backdrop-filter: blur(2px); }
.ym-modal-panel {
  position: relative; width: min(420px, 92vw); padding: 18px 18px 14px; border-radius: 14px;
  /* 强制浅底深字：聊天页是深色主题，若继承 color 会变成"白底白字"（产品截图实测） */
  background: #fff; color: #1c1f23;
  box-shadow: 0 18px 48px rgba(10, 18, 22, .28); border: 1px solid var(--ym-line, #dfe5e8);
}
.ym-modal-head { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: #1c1f23; }
.ym-modal-body { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: #4b5563; }
.ym-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* 弹窗内的按钮：不继承主题里可能变白的配色，一律给足对比度 */
.ym-modal .button.ghost { background: #fff; border: 1px solid #d6dce0; color: #1c1f23; }
.ym-modal .button.ghost:hover { background: #f3f6f5; }
.ym-modal .button.ym-modal-confirm { background: var(--accent-2, #7fc7b5); border: 1px solid #6fb9a7; color: #10322c; font-weight: 600; }
.ym-modal .button.ym-modal-confirm:hover { background: #6fb9a7; }
.ym-modal .button.ym-modal-confirm:focus-visible { outline: 2px solid #2f6f63; outline-offset: 2px; }
.button.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.button.danger:hover { background: #9c1f18; }
.ym-toast {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 9100; max-width: min(560px, 92vw); padding: 9px 16px; border-radius: 999px;
  background: rgba(22, 32, 36, .94); color: #fff; font-weight: 500; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 10px 26px rgba(10, 18, 22, .28); transition: opacity .35s ease, transform .35s ease;
}
.ym-toast.is-hiding { opacity: 0; transform: translate(-50%, -8px); }

/* 世界设定：「写设定 / 指令」两个子块（2026-10-17 并块，彼此靠近） */
.chat-context-subsection { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ym-line, #e6eaec); }
.chat-context-subsection:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.chat-context-subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.chat-context-subhead strong { display: block; font-size: 13px; }
.chat-context-subhead small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--ym-muted, #6b7280); }
@media (max-width: 560px) { .chat-context-subhead { flex-wrap: wrap; } }
.ym-toast { display: inline-flex; align-items: center; gap: 10px; }
.ym-toast-action {
  pointer-events: auto; border: 0; border-radius: 999px; padding: 2px 10px; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px;
}
.ym-toast-action:hover { background: rgba(255, 255, 255, .28); }


/* 单手模式选项：右侧 1/3 极淡底色 + 左缘斜切（分界是斜的，但整体只做"一层很轻的底"，无描边无条纹） */
.choice-option { position: relative; padding-right: 34%; }
.choice-option::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%;
  border-radius: 0 14px 14px 0; pointer-events: none;
  background: rgba(96, 165, 250, .08);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);   /* 斜角更缓，视觉上像"被斜切掉一角" */
}
.choice-option-fill-hint {
  position: absolute; right: 0; width: 34%; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 11px; letter-spacing: .12em;
  color: rgba(219, 234, 254, .38); pointer-events: none;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .choice-option:hover .choice-option-fill-hint { color: rgba(219, 234, 254, .62); }
}
.choice-option:active { transform: scale(0.995); }
.choice-option { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.choice-option.is-disabled .choice-option-fill-hint { opacity: .25; }

/* 人设表单：姓 / 名 / 组 三个输入并排（窄屏折行） */
.context-name-row { display: flex; gap: 8px; }
.context-name-row input { flex: 1 1 0; min-width: 0; }
.context-name-row input:first-child { flex: 0 0 24%; }
.context-field-hint { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--ym-muted, #6b7280); }
@media (max-width: 560px) { .context-name-row { flex-wrap: wrap; } .context-name-row input { flex: 1 1 100%; } }
.settings-persona-group { font-weight: 500; color: var(--ym-muted, #6b7280); font-size: 12px; }
.chat-archive-sibling {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; margin-top: 6px; border: 1px solid var(--ym-line, #e6eaec); border-radius: 10px;
  background: #fff; text-align: left; cursor: pointer;
}
.chat-archive-sibling:hover { background: #f7faf9; }
.chat-archive-sibling strong { font-size: 13px; font-weight: 600; }
.chat-archive-sibling small { font-size: 11px; color: var(--ym-muted, #6b7280); }
.chat-archive-return { margin-left: 8px; white-space: nowrap; }
.chat-archive-card.is-current { border-color: var(--accent-2, #7fc7b5); background: rgba(127, 199, 181, .08); }
.ym-modal-check { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; color: #1c1f23; }

/* ── 意见反馈弹窗（2026-10-31）────────────────────────────────────────
   入口：电脑端首页顶栏（通知左侧）/ 手机端「我的」。复用 .ym-modal 外壳，
   只补三块内容样式：类型 chips / 两个字段 / 行内错误。 */
.ym-feedback-hint { font-weight: 400; font-size: 11.5px; color: #6b7280; margin-left: 8px; }
.ym-feedback-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ym-feedback-cat {
  border: 1px solid #d6dce0; background: #fff; color: #3f4a45; cursor: pointer;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; line-height: 1;
}
.ym-feedback-cat:hover { border-color: #9fc4b8; }
.ym-feedback-cat.is-on { background: #205850; border-color: #205850; color: #fff; font-weight: 600; }
.ym-feedback-label { display: grid; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: #3f4a45; }
.ym-feedback-label > span { font-weight: 600; color: #1c1f23; }
.ym-feedback-label textarea,
.ym-feedback-label input {
  width: 100%; box-sizing: border-box; border: 1px solid #d6dce0; border-radius: 10px;
  padding: 9px 11px; font-size: 13px; font-family: inherit; color: #1c1f23; background: #fff; resize: vertical;
}
.ym-feedback-label textarea:focus,
.ym-feedback-label input:focus { outline: none; border-color: #7bb79a; box-shadow: 0 0 0 3px rgba(60, 112, 90, .14); }
.ym-feedback-error { margin: 0 0 12px; font-size: 12.5px; color: #a2544a; }
@media (max-width: 860px) {
  /* 手机上弹窗贴着键盘：面板限高 + 自身可滚，避免键盘把"提交"顶出去 */
  .ym-feedback-panel { max-height: calc(var(--visual-viewport-height, 100dvh) - 32px); overflow: auto; }
  .ym-feedback-label textarea { min-height: 108px; max-height: 34vh; }
}
.ym-modal-check input { width: 16px; height: 16px; accent-color: #7fc7b5; }
.plot-memory { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--ym-line, #e6eaec); border-radius: 10px; background: #fbfdfc; }
.plot-memory-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.plot-memory-head strong { font-size: 13px; }
.plot-memory-head small { font-size: 11px; color: var(--ym-muted, #6b7280); }
.plot-memory-row { display: flex; gap: 8px; padding: 3px 0; font-size: 12px; line-height: 1.5; }
.plot-memory-row > span { flex: 0 0 auto; color: var(--ym-muted, #6b7280); }
.plot-memory-row > p { margin: 0; flex: 1 1 auto; min-width: 0; }
.plot-memory-row.is-short > p { color: var(--ym-muted, #4b5563); }
.plot-memory-list { max-height: 52vh; overflow-y: auto; }
.plot-memory-count { margin-left: 8px; font-weight: 400; font-size: 11px; color: var(--ym-muted, #6b7280); }

/* 连续对话半价徽标 */
.discount-badge {
  margin: 4px auto 0; width: fit-content; max-width: calc(100% - 32px);
  padding: 3px 12px; border-radius: 999px; font-size: 11.5px; letter-spacing: .02em;
  /* 聊天页是深色底（模糊角色图），浅底深字会看不见 → 直接用深底浅字 */
  background: rgba(9, 32, 28, .55); color: #b7f0e0; border: 1px solid rgba(127, 199, 181, .5);
  font-variant-numeric: tabular-nums; backdrop-filter: blur(6px);
}
.discount-chip { border: 1px solid #3a4048; background: #20242a; color: #c9cfd8; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; }
.discount-chip.is-on { border-color: #7fc7b5; background: rgba(127, 199, 181, .22); color: #d7fff6; font-weight: 600; }
.discount-chip:hover { border-color: #7fc7b5; }

.channel-admin-models { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
.channel-admin-models .discount-chip + .discount-chip { margin-left: 0; }

/* 管理后台浅色化（2026-10-20）：后台样式表原本是深色写死 ✗，与全站浅色外壳混搭 → 黑底黑字。
   这里把"渠道管理"的深色表面统一改浅；用 !important 压过历史上的写死深色。 */
.channel-admin-card,
.channel-admin-editor {
  background: #fff !important;
  color: #1c1f23 !important;
  border-color: #e3e8ea !important;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04);
}
.channel-admin-card-head strong,
.channel-admin-meta strong { color: #14181c !important; }
.channel-admin-card .ops-dim,
.channel-admin-meta,
.channel-admin-models { color: #5b636b !important; }
.channel-admin-field { color: #4b5563 !important; }
.channel-admin-field input,
.channel-admin-field select,
.channel-admin-field textarea {
  background: #fff !important; color: #1c1f23 !important; border-color: #d7dde2 !important;
}
.channel-admin-field input::placeholder { color: #8b919a !important; }
.channel-admin-field option { background: #fff; color: #1c1f23; }
.channel-admin-check { color: #1c1f23 !important; }
/* 状态标签改浅色语义 */
.ops-chip { border-width: 1px; }
.ops-chip-normal, .ops-chip-succeeded, .ops-chip-completed { background: #e8f6ee !important; color: #1c7a45 !important; border-color: #bfe4cf !important; }
.ops-chip-degraded, .ops-chip-running, .ops-chip-queued { background: #fdf3e2 !important; color: #8a5a12 !important; border-color: #f0d9b0 !important; }
.ops-chip-unavailable, .ops-chip-failed, .ops-chip-dead, .ops-chip-stopped { background: #fdecea !important; color: #9c2b22 !important; border-color: #f3c6c1 !important; }
.ops-chip-unknown { background: #eef1f4 !important; color: #4b5563 !important; border-color: #dde2e8 !important; }
/* 优惠模型 chips 也跟着浅色化 */
.discount-chip { background: #fff !important; color: #4b5563 !important; border-color: #d7dde2 !important; }
.discount-chip.is-on { background: #e6f7f1 !important; color: #0f5e50 !important; border-color: #7fc7b5 !important; font-weight: 600; }

/* 双引号内的对话：黄 → 复合渐变（#ffbedd → #e9b8f5 → #d3b6ff）2026-10-20 */
.message-content q,
.message-content blockquote {
  background-image: linear-gradient(90deg, #ffbedd 0%, #e9b8f5 50%, #d3b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border-left-color: #e9b8f5;
}
/* 消息里的引用块：收紧行距（此前 margin-bottom 10px + padding 让行数看起来翻倍 ✗） */
.message-content blockquote { margin: 2px 0; padding-left: 8px; line-height: 1.6; }
.message-content blockquote + blockquote { margin-top: 0; }
/* 引用块内不应再有额外行高（一行字要占一行） */
.message-content blockquote br + br { display: none; }
.message-content blockquote { line-height: 1.55; }
/* markdown 引用行：一行就是一行的行高，不额外撑高 */
.message-content .md-quote-line {
  display: inline;
  padding-left: 8px;
  margin-left: 2px;
  border-left: 2px solid #e9b8f5;
  background-image: linear-gradient(90deg, #ffbedd 0%, #e9b8f5 50%, #d3b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 「连续对话 · 半价」在模型选择处的可见性（docs/97）：
   用户此前完全不知道哪些模型参与，导致"半价没生效"的误判。 */
.model-switcher-discount { border-color: rgba(127, 199, 181, .6); color: #7fc7b5; }
.model-discount-tag { margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(127, 199, 181, .55); border-radius: 999px; color: #7fc7b5; font-size: 10px; line-height: 1.3; vertical-align: 1px; }
.model-catalog-list .model-discount-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* 剧情安排面板的展示量（2026-10-20）：明细/依据/解析提示一律折叠，计数行保持一行 */
.plot-board-log .plot-log-detail { margin: 6px 0 0; }
.plot-board-log .plot-log-detail > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; list-style: none; }
.plot-board-log .plot-log-detail > summary::-webkit-details-marker { display: none; }
.plot-board-log .plot-log-detail > summary::before { content: "▸ "; }
.plot-board-log .plot-log-detail[open] > summary::before { content: "▾ "; }
.plot-board-log .plot-log-detail ul { margin: 6px 0 0 14px; padding: 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.plot-board-log .plot-log-anomaly > summary { color: #8a6a2f; }
.plot-world-row .plot-dup { margin-left: 6px; padding: 0 5px; border-radius: 999px; background: rgba(127, 199, 181, .18); color: #7fc7b5; font-size: 10.5px; font-style: normal; }
.plot-npc-empty { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.6; }

/* 记忆设置卡（模型工作区 + 记忆弹窗共用）：开关 + 记忆长度选择（2026-10-20） */
.model-memory-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 12px 0 0; padding: 12px 14px; border: 1px solid #2f4149; border-radius: 10px; background: #182329;
}
.model-memory-copy { display: grid; gap: 4px; min-width: 220px; flex: 1 1 260px; }
.model-memory-copy strong { font-size: 13px; color: var(--text); }
.model-memory-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.model-memory-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.model-memory-length { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.model-memory-length select {
  padding: 4px 8px; border: 1px solid #33474f; border-radius: 8px; background: #101a1f; color: var(--text);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
/* 弹窗是浅底：把这张卡也切成浅色（与后台浅色化同一套取值） */
.ym-modal-panel .model-memory-card { border-color: #dfe4e8; background: #f7f9fa; }
.ym-modal-panel .model-memory-copy strong { color: #1c1f23; }
.ym-modal-panel .model-memory-copy small { color: #5b636d; }
.ym-modal-panel .model-memory-length select { border-color: #d7dde2; background: #fff; color: #1c1f23; }

/* ── 模型选择窗口：桌面端改成**居中弹窗**（对齐 Rubii「聊天设置」的三栏结构）──────────
 * 之前整页铺满（height:100dvh），桌面上像换了个页面；现在浮在聊天之上、背景虚化。 */
.model-workspace-page {
  display: grid; place-items: center; padding: 28px;
  background: rgba(6, 11, 14, .58); backdrop-filter: blur(10px) saturate(120%);
}
.model-workspace-backdrop { position: absolute; inset: 0; cursor: pointer; }
.model-workspace {
  position: relative; width: min(1080px, 100%); height: min(740px, calc(100dvh - 56px));
  max-height: none; border: 1px solid #2c3940; border-radius: 18px; background: #10191e;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .04) inset;
}
.model-workspace-header { align-items: center; padding: 16px 22px; }
.model-workspace-header h2 { margin: 0 0 4px; font-size: 18px; }
.model-workspace-header p { font-size: 12px; }
.model-workspace-current { padding: 10px 22px; }
.model-workspace-layout { grid-template-columns: 248px minmax(0, 1fr) 296px; }

/* 左栏：记忆设置贴在顶部（Rubii 也是把「记忆」和「模型」放同一个窗口） */
.model-provider-pane .model-memory-card {
  display: grid; gap: 8px; margin: 12px 12px 14px; padding: 12px; border-radius: 12px;
}
.model-provider-pane .model-memory-copy { min-width: 0; }
.model-provider-pane .model-memory-copy small { font-size: 11px; }
.model-provider-pane .model-memory-actions { justify-content: space-between; }

/* 右栏：选中模型的详情 + 渠道单选 */
.model-detail-pane { min-width: 0; overflow: auto; padding: 16px 16px 20px; border-left: 1px solid #2c3940; background: #121c21; }
.model-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.model-detail-head strong { font-size: 15px; color: var(--text); }
.model-detail-tag { padding: 1px 7px; border: 1px solid #3d4f57; border-radius: 999px; color: var(--muted); font-size: 10.5px; }
.model-detail-tag.is-discount { border-color: rgba(127, 199, 181, .55); color: #7fc7b5; }
.model-detail-desc { margin: 8px 0 14px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.model-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.model-detail-meta div { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid #2c3940; border-radius: 10px; background: #16222a; }
.model-detail-meta span { color: var(--muted); font-size: 10.5px; }
.model-detail-meta strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.model-detail-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.model-detail-section-head small { color: var(--muted); font-size: 10.5px; }
.model-detail-channels { display: grid; gap: 6px; }
.model-detail-channel { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #2f4149; border-radius: 10px; background: #182329; color: var(--text); text-align: left; cursor: pointer; }
.model-detail-channel:hover { border-color: var(--accent-2); }
.model-detail-channel.is-active { border-color: #80c7b5; box-shadow: inset 3px 0 0 #80c7b5; }
.model-detail-channel-name { min-width: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.model-detail-channel-state { color: var(--muted); font-size: 10.5px; }
.model-detail-channel-state[data-state="normal"] { color: #7fc7b5; }
.model-detail-channel-state[data-state="unavailable"] { color: #e08b7f; }
.model-detail-channel-check { color: #80c7b5; font-size: 12px; }
.model-detail-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.model-detail-empty { display: grid; gap: 6px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.model-detail-empty strong { color: var(--text); font-size: 13px; }

@media (max-width: 980px) {
  .model-workspace-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .model-detail-pane { display: none; }
}
@media (max-width: 860px) {
  .model-workspace-page { padding: 0; }
  .model-workspace { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  /* 手机上回到"单列 + 厂商横向胶囊"：这里必须显式覆盖上面的三栏/两栏，否则左栏被挤成 170px 文字全被截断 */
  .model-workspace-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .model-detail-pane { display: none; }
  .model-provider-pane { border-right: 0; border-bottom: 1px solid #2c3940; }
  .model-provider-pane .model-memory-card { margin: 8px 10px 10px; }
  .model-provider-pane .model-provider-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
  .model-provider-pane .model-provider-list::-webkit-scrollbar { display: none; }
  .model-workspace-layout .model-catalog-list { padding: 10px 12px 18px; }
}

/* 模型列表对齐 Rubii：单列行式（名字不被挤成省略号），右侧显示上下文额度 */
.model-workspace-layout .model-catalog-list { grid-template-columns: 1fr; gap: 7px; padding: 14px 18px 20px; }
.model-workspace-layout .model-catalog-item { min-height: 62px; }
.model-catalog-side { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.model-catalog-limit { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* 右栏「使用渠道」标题不折行 */
.model-detail-section-head { flex-wrap: wrap; }
.model-detail-section-head small { min-width: 0; }

/* 记忆卡更紧凑：标题行内放开关，说明降一级 */
.model-provider-pane .model-memory-card { gap: 6px; }
.model-provider-pane .model-memory-copy { display: grid; gap: 3px; }
.model-provider-pane .model-memory-copy strong { font-size: 12.5px; }

/* 桌面端右栏已经列出渠道 → 底部那条「渠道」栏在宽屏重复，收起；手机上它才是主入口 */
@media (min-width: 981px) {
  .model-workspace-footer { display: none; }
}

/* ══ 模型选择弹窗：仿 Rubii「聊天设置」的视觉语言（2026-10-20 第二轮）════════════════
 * 参照实测：面板 #0C0D0F / 圆角 16 / 无边框；卡片 #111214 + 1px rgba(255,255,255,.075)、圆角 12、高 66、
 * 间距 8；标题 18/400、字距 -0.45；名字 15/600；说明 12px rgba(255,255,255,.46)；
 * 记忆行是更亮的一条 #2B2D33（高 56、圆角 12），开关 44×24、白钮 20。
 * 所以这里把整个弹窗换成**中性近黑**，只用品牌薄荷绿做一处强调（选中条 / 勾）。 */
.model-workspace-page {
  --rw-bg: #0c0d0f;
  --rw-surface: #111214;
  --rw-surface-hover: #17181b;
  --rw-surface-active: #191a1e;
  --rw-line: rgba(255, 255, 255, .075);
  --rw-line-strong: rgba(255, 255, 255, .14);
  --rw-text: #fff;
  --rw-dim: rgba(255, 255, 255, .62);
  --rw-muted: rgba(255, 255, 255, .46);
  --rw-accent: #7fc7b5;
  padding: 24px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px) saturate(110%);
}
.model-workspace {
  width: min(1152px, 100%);
  height: min(760px, calc(100dvh - 48px));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  background: var(--rw-bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
/* 标题居中（Rubii 同款），操作按钮靠右 */
.model-workspace-header {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 64px; padding: 0 24px; border-bottom: 0; background: transparent;
}
.model-workspace-header h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 18px; font-weight: 400; letter-spacing: -.45px; color: var(--rw-text);
}
.model-workspace-header p { display: none; }
.model-workspace-actions { display: flex; align-items: center; gap: 4px; }
.model-workspace-actions .icon-button {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: var(--rw-muted); font-size: 17px;
}
.model-workspace-actions .icon-button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.model-workspace-admin { padding: 5px 9px; border: 0; border-radius: 8px; color: var(--rw-muted); font-size: 12px; }
.model-workspace-admin:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.model-workspace-layout {
  display: grid; grid-template-columns: 184px minmax(0, 1fr) 460px; gap: 28px;
  height: calc(100% - 64px); min-height: 0; padding: 0 24px 20px;
}
.model-provider-pane { padding: 0; border-right: 0; background: transparent; overflow: auto; }
.rw-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 10px 8px; color: var(--rw-text); font-size: 14px;
}
.rw-rail-head span { color: var(--rw-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-provider-list { display: grid; gap: 2px; }
.model-provider-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--rw-dim);
}
.model-provider-item:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.model-provider-item.is-active { background: rgba(255, 255, 255, .07); color: #fff; }
.model-provider-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 9px; letter-spacing: 0;
}
.model-provider-copy { display: grid; gap: 1px; min-width: 0; }
.model-provider-copy strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.model-provider-copy small { overflow: hidden; color: var(--rw-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.model-provider-count { color: var(--rw-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.model-catalog-pane { padding: 0; background: transparent; overflow: auto; }
/* 记忆条（Rubii 那条更亮的高亮行） */
.rw-memory {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  height: 56px; margin: 10px 0 18px; padding: 0 14px; border-radius: 12px; background: #2b2d33;
}
.rw-memory-icon { color: var(--rw-dim); font-size: 13px; }
.rw-memory-copy { display: grid; gap: 2px; min-width: 0; }
.rw-memory-copy strong { color: var(--rw-text); font-size: 14px; font-weight: 500; }
.rw-memory-copy small { overflow: hidden; color: var(--rw-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rw-memory-length { display: inline-flex; align-items: center; gap: 6px; color: var(--rw-muted); font-size: 11.5px; white-space: nowrap; }
.rw-memory-length select {
  padding: 3px 6px; border: 1px solid var(--rw-line-strong); border-radius: 8px;
  background: rgba(0, 0, 0, .25); color: var(--rw-text); font-size: 12px; font-variant-numeric: tabular-nums;
}
.rw-switch { position: relative; width: 44px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); cursor: pointer; transition: background .18s ease; }
.rw-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.rw-switch.is-on { background: var(--rw-accent); }
.rw-switch.is-on .rw-switch-knob { transform: translateX(20px); }

.rw-catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 10px; }
.rw-catalog-head strong { color: var(--rw-text); font-size: 14px; font-weight: 500; }
.rw-catalog-head span { color: var(--rw-muted); font-size: 12px; white-space: nowrap; }
.model-workspace-layout .model-catalog-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 0 10px; }
.model-workspace-layout .model-catalog-item {
  min-height: 66px; padding: 10px 14px; border: 1px solid var(--rw-line); border-radius: 12px;
  background: var(--rw-surface); color: var(--rw-text);
}
.model-workspace-layout .model-catalog-item:hover,
.model-workspace-layout .model-catalog-item:focus-visible { border-color: var(--rw-line-strong); background: var(--rw-surface-hover); outline: none; }
.model-workspace-layout .model-catalog-item.is-active {
  border-color: rgba(127, 199, 181, .5); background: var(--rw-surface-active); box-shadow: inset 2px 0 0 var(--rw-accent);
}
.model-workspace-layout .model-catalog-icon { color: var(--rw-dim); }
.model-workspace-layout .model-catalog-copy { gap: 3px; }
.model-workspace-layout .model-catalog-copy strong { color: var(--rw-text); font-size: 15px; font-weight: 600; }
.model-workspace-layout .model-catalog-copy small { color: var(--rw-muted); font-size: 12px; }
.model-workspace-layout .model-catalog-limit { color: var(--rw-muted); font-size: 12px; }
.model-catalog-check { color: var(--rw-accent); font-size: 12px; }
.model-discount-tag { margin-left: 7px; padding: 0; border: 0; background: transparent; color: var(--rw-accent); font-size: 11px; }

/* 右栏：详情 + 渠道单选（Rubii 的套餐行同样式） */
.model-detail-pane { padding: 10px 0 10px 22px; border-left: 1px solid var(--rw-line); background: transparent; overflow: auto; }
.model-detail-head { gap: 8px; }
.model-detail-head strong { color: var(--rw-text); font-size: 15px; font-weight: 600; }
.model-detail-tag { padding: 0; border: 0; color: var(--rw-muted); font-size: 11.5px; }
.model-detail-tag.is-discount { color: var(--rw-accent); }
.model-detail-desc { margin: 6px 0 16px; color: var(--rw-muted); font-size: 12px; line-height: 18px; }
.model-detail-meta { gap: 8px; margin-bottom: 18px; }
.model-detail-meta div { padding: 10px 12px; border: 1px solid var(--rw-line); border-radius: 12px; background: var(--rw-surface); }
.model-detail-meta span { color: var(--rw-muted); font-size: 11px; }
.model-detail-meta strong { color: var(--rw-text); font-size: 13px; font-weight: 600; }
.model-detail-section-head { color: var(--rw-text); font-size: 13px; font-weight: 500; }
.model-detail-section-head small { color: var(--rw-muted); font-size: 11px; font-weight: 400; }
.model-detail-channel {
  min-height: 46px; padding: 0 12px; border: 1px solid var(--rw-line); border-radius: 12px; background: var(--rw-surface);
}
.model-detail-channel:hover { border-color: var(--rw-line-strong); background: var(--rw-surface-hover); }
.model-detail-channel.is-active { border-color: rgba(127, 199, 181, .5); background: var(--rw-surface-active); box-shadow: none; }
.model-detail-channel-name { color: var(--rw-text); font-size: 13px; }
.model-detail-channel-state { color: var(--rw-muted); font-size: 11px; }
.model-detail-channel-check { color: var(--rw-accent); }
.model-detail-note { color: var(--rw-muted); font-size: 11.5px; }
.model-detail-empty strong { color: var(--rw-text); font-size: 13px; }
.model-detail-empty { color: var(--rw-muted); font-size: 12px; }

/* 细滚动条：Rubii 那种几乎看不见的 */
.model-workspace-page ::-webkit-scrollbar { width: 6px; height: 6px; }
.model-workspace-page ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 999px; }
.model-workspace-page ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1080px) {
  .model-workspace-layout { grid-template-columns: 176px minmax(0, 1fr); gap: 20px; }
  .model-detail-pane { display: none; }
}
@media (max-width: 860px) {
  .model-workspace-page { padding: 0; }
  .model-workspace { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .model-workspace-header { height: 56px; padding: 0 14px; }
  .model-workspace-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; padding: 0 12px 14px; height: calc(100% - 56px); }
  .model-provider-pane { border-bottom: 1px solid var(--rw-line); padding-bottom: 6px; }
  .rw-rail-head { display: none; }
  .model-provider-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
  .model-provider-list::-webkit-scrollbar { display: none; }
  .model-provider-item { flex: 0 0 auto; grid-template-columns: 20px auto; gap: 7px; padding: 6px 10px; border: 1px solid var(--rw-line); border-radius: 999px; }
  .model-provider-item .model-provider-count { display: none; }
  .model-provider-item .model-provider-copy small { display: none; }
  .rw-memory { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; height: 52px; padding: 0 12px; margin: 10px 0 14px; }
  .rw-memory-icon, .rw-memory-copy small { display: none; }
  .rw-memory-length span { display: none; }
  .model-workspace-layout .model-catalog-item { min-height: 60px; }
}

/* ── 仿 Rubii 第二轮细化：单行导航 / 无图标卡片 / 套餐式渠道行 ── */
.model-provider-item { padding: 8px 10px; }
.model-provider-copy small { display: none; }
.model-provider-copy strong { font-size: 13px; letter-spacing: -.1px; }
.model-provider-mark { overflow: hidden; font-size: 9px; line-height: 1; white-space: nowrap; }
.model-provider-item.is-active .model-provider-mark { background: rgba(127, 199, 181, .18); color: var(--rw-accent); }

.model-workspace-layout .model-catalog-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.model-workspace-layout .model-catalog-copy strong { letter-spacing: -.2px; }

.model-detail-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; color: var(--rw-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-detail-facts span + span::before { content: "·"; margin-right: 12px; color: rgba(255, 255, 255, .22); }
.model-detail-channels { overflow: hidden; border: 1px solid var(--rw-line); border-radius: 16px; background: var(--rw-surface); }
.model-detail-channel { grid-template-columns: minmax(0, 1fr) auto 18px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; }
.model-detail-channel + .model-detail-channel { border-top: 1px solid var(--rw-line); }
.model-detail-channel:hover { background: rgba(255, 255, 255, .03); }
.model-detail-channel.is-active { background: rgba(127, 199, 181, .07); box-shadow: none; }
.model-detail-channel.is-active .model-detail-channel-name { color: #fff; font-weight: 500; }
.model-detail-channel-check { width: 18px; height: 18px; border-radius: 50%; background: var(--rw-accent); color: #08110f; font-size: 11px; line-height: 18px; text-align: center; }
.model-detail-channel.is-static { grid-template-columns: minmax(0, 1fr); color: var(--rw-muted); }
.model-detail-section-head { margin-bottom: 10px; }

/* 再贴近一点 Rubii 的左栏：桌面端去掉彩色缩写块 → 纯净的文字导航（手机上仍保留胶囊） */
@media (min-width: 861px) {
  .model-provider-item { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
  .model-provider-mark { display: none; }
  .model-provider-copy strong { font-size: 13.5px; color: inherit; }
  .model-provider-item.is-active .model-provider-copy strong { color: #fff; }
  .rw-rail-head { padding: 12px 10px 6px; }
}
.model-catalog-pane { padding-right: 4px; }
.model-workspace-layout .model-catalog-item { cursor: pointer; }
/* 渠道行的单选圈（Rubii 套餐行同款：未选空心，选中实心品牌色） */
.model-detail-radio {
  display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%; color: transparent; font-size: 11px; line-height: 1;
}
.model-detail-radio.is-on { border-color: var(--rw-accent); background: var(--rw-accent); color: #08110f; }
.model-detail-channel.is-active .model-detail-radio { border-color: var(--rw-accent); }

/* 记忆长度：仿 Rubii 的拉进度条（档位 + 锁）
 * 锁定规则：超出**当前模型上下文**的档位不可拖过去（例如 200K 渠道锁住 300K/500K）。 */
.rw-memory { grid-template-columns: 18px minmax(0, 1fr) minmax(96px, 148px) auto 44px; }
.rw-slider { position: relative; display: flex; align-items: center; height: 22px; min-width: 96px; cursor: pointer; touch-action: none; }
.rw-slider:focus-visible { outline: 2px solid rgba(127, 199, 181, .55); outline-offset: 4px; border-radius: 6px; }
.rw-slider-track { position: relative; width: 100%; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.rw-slider-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--rw-accent); }
.rw-slider-tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
.rw-slider-tick.is-on { background: rgba(8, 17, 15, .55); }
.rw-slider-tick.is-locked { background: #e08b7f; box-shadow: 0 0 0 2px rgba(224, 139, 127, .18); }
.rw-slider-knob {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 0 rgba(127, 199, 181, .35);
  transition: box-shadow .15s ease;
}
.rw-slider:hover .rw-slider-knob { box-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 4px rgba(127, 199, 181, .18); }
.rw-slider-value { color: var(--rw-text); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-slider-note { margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: rgba(224, 139, 127, .14); color: #e08b7f; font-size: 10px; }
.model-memory-length, .rw-memory-length { display: none; }
@media (max-width: 860px) {
  .rw-memory { grid-template-columns: minmax(0, 1fr) minmax(80px, 120px) auto 44px; }
  .rw-slider-value { min-width: 40px; text-align: right; }
}

/* 记忆条吸顶：模型列表很长（「全部」119 条），滚动时记忆增强/记忆长度要一直在手边 */
.rw-memory { position: sticky; top: 0; z-index: 3; box-shadow: 0 10px 18px rgba(6, 8, 10, .55); }
@media (max-width: 860px) {
  /* 手机上也要吸顶：模型列表滚到很下面时，记忆开关要一直在手边 */
  .rw-memory { position: sticky; top: 0; box-shadow: 0 8px 14px rgba(6, 8, 10, .5); }
}

/* 记忆条改两行：上面标题+开关，下面「记忆长度」+ 更宽的进度条（滑块要够长才好拖） */
.rw-memory { display: block; height: auto; padding: 12px 14px 13px; }
.rw-memory-row { display: flex; align-items: center; gap: 10px; }
.rw-memory-row + .rw-memory-row { margin-top: 10px; }
.rw-memory-row .rw-memory-icon { flex: none; }
.rw-memory-row .rw-memory-copy { flex: 1 1 auto; }
.rw-memory-row .rw-switch { margin-left: auto; flex: none; }
.rw-memory-length-label { flex: none; color: var(--rw-muted); font-size: 12px; }
.rw-memory-length-row .rw-slider { flex: 1 1 auto; min-width: 120px; }
.rw-memory-length-row .rw-slider-value { flex: none; min-width: 56px; text-align: right; }
@media (max-width: 860px) {
  .rw-memory { padding: 10px 12px 11px; }
  .rw-memory-row + .rw-memory-row { margin-top: 8px; }
}

/* 记忆条**真正固定**在模型选择框里：移出滚动容器，只有模型列表滚动
 * （sticky 在部分场景（列表滚动到顶/容器 padding）会跟着走，产品反馈"没有固定"→ 改成结构上分离） */
.model-catalog-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rw-memory { position: static; flex: none; margin: 10px 0 12px; box-shadow: none; }
.rw-catalog-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; }
@media (max-width: 860px) {
  .model-catalog-pane { overflow: hidden; }
  .rw-catalog-scroll { overflow: auto; }
}

/* 记忆弹窗是浅底：把深色记忆条切一份浅色版（同一个组件，两套皮肤） */
.ym-modal-panel .rw-memory { background: #eef1f4; }
.ym-modal-panel .rw-memory-icon { color: #6b737d; }
.ym-modal-panel .rw-memory-copy strong { color: #1c1f23; }
.ym-modal-panel .rw-memory-copy small { color: #5b636d; }
.ym-modal-panel .rw-memory-length-label { color: #5b636d; }
.ym-modal-panel .rw-slider-track { background: rgba(28, 31, 35, .16); }
.ym-modal-panel .rw-slider-tick { background: rgba(28, 31, 35, .35); }
.ym-modal-panel .rw-slider-tick.is-on { background: rgba(255, 255, 255, .9); }
.ym-modal-panel .rw-slider-value { color: #1c1f23; }
.ym-modal-panel .rw-switch { background: rgba(28, 31, 35, .22); }
.ym-modal-panel .rw-switch.is-on { background: #2fae9a; }
.ym-modal-panel .rw-slider-knob { box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* 记忆弹窗（浅底）里的品牌色变量：滑块/开关要能取到 --rw-accent，否则填充色是透明 */
.ym-modal-panel { --rw-accent: #2fae9a; --rw-text: #1c1f23; --rw-muted: #5b636d; --rw-dim: #4b5259; --rw-line: rgba(28, 31, 35, .1); }
.ym-modal-panel .rw-memory { background: #eef1f4; }
.ym-modal-panel .rw-slider-fill { background: #2fae9a; }
.ym-modal-panel .rw-switch.is-on { background: #2fae9a; }
.ym-modal-panel .rw-slider-tick.is-on { background: rgba(255, 255, 255, .92); }

/* ════════════ 首页改版：仿参考稿的水墨青绿风格（2026-10-20）════════════
 * 参考稿要点：米白底 + 深青绿主色 + 宋体大标题 + 圆角大卡片 + 右栏信息密度低。
 * 全部作用域在 body.ink-mode 下（其它页面不受影响，后续再逐页迁移）。 */
body.ink-mode {
  --ink-bg: #f6f8f1;
  --ink-panel: #ffffff;
  --ink-soft: #e9f0e2;
  --ink-soft-2: #dfe9d8;
  --ink-line: #e4ebdd;
  --ink-text: #1f2b24;
  --ink-muted: #6f7f72;
  --ink-green: #2f5d4a;
  --ink-green-2: #3c705a;
  --ink-gold: #c8a45c;
  --ink-shadow: 0 12px 32px rgba(47, 93, 74, .07);
  --ink-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  background: var(--ink-bg);
}
body.ink-mode .app-shell {
  grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: var(--ink-bg);
}
/* 旧壳子里 #view 被固定在第二行（上面那行是 topbar）；新版首页没有 topbar，要把它提回第一行 */
body.ink-mode .app-shell > .app-nav { grid-column: 1; grid-row: 1; }
body.ink-mode .app-shell > .view { grid-column: 2; grid-row: 1; }
body.ink-mode .topbar { display: none; }
body.ink-mode .view { padding: 0; max-width: none; }

/* 左栏：品牌 + 药丸导航 + 底部寄语 */
body.ink-mode .app-nav {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 18px 20px;
  background: transparent; border-right: 0;
}
body.ink-mode .app-nav .nav-brand { display: flex; align-items: center; gap: 12px; padding: 6px 6px 26px; }
body.ink-mode .brand-mark-image { width: 46px; height: 46px; border-radius: 14px; }
body.ink-mode .nav-brand-copy strong { font-family: var(--ink-serif); font-size: 22px; letter-spacing: .06em; color: var(--ink-text); }
body.ink-mode .nav-brand-copy small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 11px; letter-spacing: .06em; }
body.ink-mode .app-nav .nav-list { display: grid; gap: 6px; }
body.ink-mode .app-nav .nav-item {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent;
  color: #4b5a50; font-size: 14.5px; font-weight: 500;
}
body.ink-mode .app-nav .nav-item svg { width: 18px; height: 18px; color: currentColor; opacity: .75; }
body.ink-mode .app-nav .nav-item::before { display: none; }
body.ink-mode .app-nav .nav-item:hover { background: rgba(47, 93, 74, .07); color: var(--ink-green); }
body.ink-mode .app-nav .nav-item.is-active { background: var(--ink-soft-2); color: var(--ink-green); font-weight: 600; }
body.ink-mode .app-nav .nav-item.is-active svg { opacity: 1; }
body.ink-mode .app-nav .nav-recent { display: none; }   /* 参考稿左栏没有"最近聊天"列表，内容挪到首页主区 */
body.ink-mode .app-nav .nav-footer { margin-top: auto; padding-top: 18px; border-top: 0; }
body.ink-mode .app-nav .nav-footer::before {
  content: "与喜欢的角色\A 开启一段新的故事";
  display: block; white-space: pre; margin: 0 6px 16px; color: var(--ink-muted);
  font-family: var(--ink-serif); font-size: 13px; line-height: 1.9; letter-spacing: .08em;
}

/* 首页骨架 */
.ink-home {
  display: grid; grid-template-columns: minmax(0, 1fr) 292px; grid-template-areas: "head head" "body right";
  column-gap: 26px; row-gap: 18px; padding: 20px 30px 40px 26px; background: var(--ink-bg);
}
.ink-head { grid-area: head; display: flex; align-items: center; gap: 18px; }
.ink-crumbs { flex: none; color: var(--ink-muted); font-size: 13px; letter-spacing: .06em; }
.ink-search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; max-width: 460px;
  padding: 0 18px; height: 46px; border-radius: 999px; background: #fff; border: 1px solid var(--ink-line);
  box-shadow: 0 6px 18px rgba(47, 93, 74, .05);
}
.ink-search svg { width: 18px; height: 18px; color: #9aa89c; flex: none; }
.ink-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink-text); font-size: 14px; outline: none; }
.ink-search input::placeholder { color: #a8b3a7; }
.ink-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ink-icon-btn {
  display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ink-line);
  border-radius: 50%; background: #fff; color: #6d7c70; cursor: pointer; box-shadow: 0 4px 14px rgba(47, 93, 74, .05);
}
.ink-icon-btn svg { width: 19px; height: 19px; }
.ink-icon-btn:hover { color: var(--ink-green); border-color: var(--ink-soft-2); }

.ink-body { grid-area: body; display: grid; gap: 22px; min-width: 0; }
.ink-right { grid-area: right; display: grid; gap: 18px; align-content: start; min-width: 0; }

/* Hero */
.ink-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  aspect-ratio: 2.4 / 1; min-height: 260px; padding: 30px 320px 30px 38px; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(115deg, #e7f0dd 0%, #dcebd8 42%, #eef4e6 100%);
}
.ink-hero::after {
  content: ""; position: absolute; inset: auto -40px -70px auto; width: 340px; height: 240px; opacity: .5;
  background: radial-gradient(closest-side, rgba(60, 112, 90, .22), rgba(60, 112, 90, 0));
}
.ink-hero-copy { position: relative; z-index: 1; }
.ink-hero-copy h1 {
  margin: 0 0 10px; font-family: var(--ink-serif); font-size: 40px; line-height: 1.24;
  letter-spacing: .04em; color: #24463a;
}
.ink-hero-copy p { margin: 0 0 22px; color: #52695c; font-size: 14px; letter-spacing: .08em; }
.ink-cta {
  height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink-green);
  color: #fff; font-size: 14px; letter-spacing: .06em; cursor: pointer;
  box-shadow: 0 10px 22px rgba(47, 93, 74, .22);
}
.ink-cta:hover { background: #264c3c; }
.ink-hero-art { position: relative; align-self: stretch; display: grid; place-items: center; }
.ink-hero-art img {
  position: relative; z-index: 1; width: 190px; height: 190px; border-radius: 24px; object-fit: cover;
  box-shadow: 0 18px 40px rgba(38, 76, 60, .18);
}
.ink-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(28px); }

/* 标签条 */
.ink-chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.ink-chips::-webkit-scrollbar { display: none; }
.ink-chips .hall-chip {
  flex: none; padding: 8px 18px; border: 1px solid var(--ink-line); border-radius: 999px;
  background: #fff; color: #55655a; font-size: 13.5px; cursor: pointer;
}
.ink-chips .hall-chip:hover { border-color: var(--ink-soft-2); color: var(--ink-green); }
.ink-chips .hall-chip.is-active { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }

/* 区块 */
.ink-section { display: grid; gap: 14px; }
.ink-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ink-section-head h2 { margin: 0; font-family: var(--ink-serif); font-size: 19px; letter-spacing: .04em; color: var(--ink-text); }
.ink-fire { font-size: 15px; margin-right: 4px; }
.ink-link { border: 0; background: transparent; color: var(--ink-muted); font-size: 12.5px; cursor: pointer; }
.ink-link:hover { color: var(--ink-green); }
.ink-all-tools { display: flex; align-items: center; gap: 12px; }
.ink-count { color: var(--ink-muted); font-size: 12.5px; }
.ink-count strong { color: var(--ink-text); }
.ink-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12.5px; }
.ink-sort select {
  padding: 5px 8px; border: 1px solid var(--ink-line); border-radius: 10px; background: #fff; color: var(--ink-text); font-size: 12.5px;
}
.ink-zones { display: flex; gap: 8px; flex-wrap: wrap; }
.ink-zones .hall-chip {
  padding: 5px 12px; border: 1px solid var(--ink-line); border-radius: 999px; background: #fff;
  color: #6a7a6d; font-size: 12px; cursor: pointer;
}
.ink-zones .hall-chip.is-active { background: var(--ink-soft); border-color: var(--ink-soft-2); color: var(--ink-green); }

/* 热门推荐卡 */
.ink-popular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ink-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: var(--ink-panel);
  border: 1px solid var(--ink-line); box-shadow: var(--ink-shadow); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.ink-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(47, 93, 74, .12); }
.ink-card-media { position: relative; aspect-ratio: 1 / 1.06; overflow: hidden; }
.ink-card-media img { object-position: 50% 22%; }
.ink-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ink-card-tag {
  position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(28, 43, 36, .55); color: #fff; font-size: 11px; backdrop-filter: blur(6px);
}
.ink-card-star {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(28, 43, 36, .45); color: #f3e2b4; cursor: pointer;
}
.ink-card-star svg { width: 16px; height: 16px; }
.ink-card-star.is-active { background: var(--ink-gold); color: #fff; }
.ink-card-star.is-active svg { fill: currentColor; }
.ink-card-body { display: grid; gap: 8px; padding: 12px 14px 14px; }
.ink-card-name { font-size: 14.5px; color: var(--ink-text); }
.ink-card-desc { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ink-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ink-card-heat { display: inline-flex; align-items: center; gap: 4px; color: #93a094; font-size: 11.5px; }
.ink-card-heat svg { width: 13px; height: 13px; }
.ink-mini-cta { padding: 6px 14px; border: 0; border-radius: 999px; background: var(--ink-green); color: #fff; font-size: 12px; cursor: pointer; }
.ink-mini-cta:hover { background: #264c3c; }
.ink-card-skeleton { height: 300px; border-radius: 18px; background: linear-gradient(100deg, #eef3e8 30%, #f6f8f1 50%, #eef3e8 70%); background-size: 220% 100%; animation: ink-sheen 1.4s infinite linear; }
@keyframes ink-sheen { to { background-position: -120% 0; } }

/* 最近聊天 */
.ink-recent { display: grid; gap: 8px; }
.ink-recent-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--ink-line); border-radius: 16px; background: #fff;
  text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(47, 93, 74, .04);
}
.ink-recent-row:hover { border-color: var(--ink-soft-2); }
.ink-recent-avatar { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.ink-recent-copy { display: grid; gap: 4px; min-width: 0; }
.ink-recent-copy strong { color: var(--ink-text); font-size: 13.5px; }
.ink-recent-copy small { overflow: hidden; color: var(--ink-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ink-recent-time { color: #93a094; font-size: 11.5px; white-space: nowrap; }
.ink-recent-skeleton { height: 72px; border-radius: 16px; background: linear-gradient(100deg, #eef3e8 30%, #f6f8f1 50%, #eef3e8 70%); background-size: 220% 100%; animation: ink-sheen 1.4s infinite linear; }
.ink-empty { padding: 18px; border: 1px dashed var(--ink-line); border-radius: 16px; color: var(--ink-muted); font-size: 13px; text-align: center; }

/* 全部角色网格（沿用 .character-card，换成本次画风） */
.ink-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ink-grid .character-card {
  border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow);
  overflow: hidden;
}
.ink-grid .character-card:hover { box-shadow: 0 18px 40px rgba(47, 93, 74, .12); }
.ink-grid .card-media { aspect-ratio: 1 / 1.05; }
.ink-grid .card-art { width: 100%; height: 100%; object-fit: cover; }
.ink-grid .card-body { padding: 12px 14px 14px; gap: 8px; }
.ink-grid .card-name { font-size: 14.5px; color: var(--ink-text); }
.ink-grid .card-description { color: var(--ink-muted); font-size: 12px; line-height: 1.6; -webkit-line-clamp: 2; }
.ink-grid .card-updated { color: #93a094; }
.ink-grid .card-tags span { background: var(--ink-soft); color: var(--ink-green); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; }
.ink-grid .card-favorite { background: rgba(28, 43, 36, .45); color: #f3e2b4; border: 0; }

/* 右栏 */
.ink-panel { padding: 18px; border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow); }
.ink-panel h3 { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-family: var(--ink-serif); font-size: 16px; letter-spacing: .04em; color: var(--ink-text); }
.ink-crown { color: var(--ink-gold); }
.ink-crown svg { width: 16px; height: 16px; vertical-align: -2px; }
.ink-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ink-quick-item {
  display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--ink-line);
  border-radius: 14px; background: #fbfcf8; color: #4e5f52; font-size: 12.5px; cursor: pointer;
}
.ink-quick-item:hover { border-color: var(--ink-soft-2); color: var(--ink-green); }
.ink-quick-item:disabled { opacity: .55; cursor: not-allowed; }
.ink-quick-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-soft); color: var(--ink-green); }
.ink-quick-ico svg { width: 19px; height: 19px; }
.ink-quick-ico.is-green { background: var(--ink-green); color: #fff; }
.ink-rank { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ink-rank-item { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.ink-rank-no { color: #b6c2b6; font-size: 13px; font-style: italic; text-align: center; }
.ink-rank-no.is-1 { color: var(--ink-gold); font-weight: 700; }
.ink-rank-no.is-2 { color: #9fb3a3; font-weight: 700; }
.ink-rank-no.is-3 { color: #c9a98a; font-weight: 700; }
.ink-rank-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.ink-rank-copy { display: grid; gap: 2px; min-width: 0; }
.ink-rank-copy strong { overflow: hidden; color: var(--ink-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ink-rank-copy small { color: var(--ink-muted); font-size: 11.5px; }
.ink-rank-item.is-empty { grid-template-columns: 1fr; color: var(--ink-muted); font-size: 12.5px; }
.ink-quote {
  margin: 0; padding: 26px 22px; border-radius: 18px; border: 1px solid var(--ink-line);
  background: linear-gradient(160deg, #f2f6ec, #e8f0e0); color: #4b5b4f;
  font-family: var(--ink-serif); font-size: 15px; line-height: 1.9; letter-spacing: .1em; text-align: center;
}

@media (max-width: 1240px) {
  .ink-home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "right"; }
  .ink-right { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ink-popular, .ink-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.ink-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
  .ink-home { padding: 14px 16px 28px; row-gap: 14px; }
  .ink-hero { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; min-height: 250px; padding: 22px 20px; background-size: auto 100%; background-position: right center; }
  .ink-hero-art { display: none; }
  .ink-hero-copy h1 { font-size: 28px; }
  .ink-popular, .ink-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ink-right { grid-template-columns: minmax(0, 1fr); }
  /* 移动端右栏只留装饰性引言：快速开始与底部导航重复，热门榜单与首页「热门推荐」内容高度重合，
     两屏都占掉半屏高度、还容易让人以为页面到底了 → 手机上不展示（桌面端不受影响）。 */
  .ink-aside-hide-mobile { display: none; }
  .ink-search { max-width: none; }
  .ink-crumbs { display: none; }
}

/* Hero 立绘：贴右侧出血 + 左侧渐隐（参考稿的人物插画处理，而不是一张圆角小卡） */
.ink-hero-art { display: none; }


/* 全部角色网格的收尾修正：标签/时间不再挤成三点省略号 */
.ink-grid .character-card { display: grid; grid-template-rows: auto 1fr; }
.ink-grid .card-media { aspect-ratio: 3 / 3.7; }
.ink-grid .card-art { object-position: 50% 22%; }
.ink-grid .card-body { gap: 6px; }
.ink-grid .card-footer { flex-direction: column; align-items: flex-start; gap: 5px; }
.ink-grid .card-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.ink-grid .card-tags span { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ink-grid .card-updated { color: #9aa89c; font-size: 11px; }

/* 手机端：首页没有 topbar，导航入口要单独给一个（否则汉堡菜单被一起隐藏了） */
.ink-menu-btn { display: none; }
@media (max-width: 860px) {
  .ink-menu-btn { display: grid; place-items: center; flex: none; }
  .ink-head { gap: 10px; }
}

/* ════════════ 第二轮：把「墨绿」纠成参考稿的「水墨蓝青」，并补水墨装饰 ════════════
 * 参考稿实测：主按钮 #205850、当前导航底 #C0D0C8、页面底 #F8F8F8~#F0F8F0（偏冷的白）。 */
body.ink-mode {
  --ink-bg: #f4f7f5;
  --ink-soft: #e4eeea;
  --ink-soft-2: #c9d8d2;
  --ink-line: #dfe8e4;
  --ink-text: #1c2a28;
  --ink-muted: #66797a;
  --ink-green: #205850;
  --ink-green-2: #2b6b62;
  --ink-gold: #c2a05c;
  --ink-shadow: 0 12px 32px rgba(32, 88, 80, .08);
}
body.ink-mode .ink-cta,
body.ink-mode .ink-mini-cta { background: var(--ink-green); }
body.ink-mode .ink-cta:hover,
body.ink-mode .ink-mini-cta:hover { background: #1a4a44; }
body.ink-mode .ink-hero {
  /* 注意：原来写的是 `100% 100%`（强制拉伸），海报会随容器比例被压扁 —— 必须用 cover */
  background: #edf4f0 url("/img/yunmeng-hero-poster.webp?v=20261101") right center / cover no-repeat;
}
body.ink-mode .ink-hero-copy h1 { color: #1d4a45; }
body.ink-mode .ink-hero-copy p { color: #52706c; }
body.ink-mode .ink-search { box-shadow: 0 6px 18px rgba(32, 88, 80, .05); }
body.ink-mode .ink-card,
body.ink-mode .ink-panel,
body.ink-mode .ink-recent-row { border-color: var(--ink-line); }

/* 左栏底部的水墨山峦（纯 CSS/SVG，先用占位，等产品给透明背景原图可直接替换） */
body.ink-mode .app-nav { position: relative; overflow: hidden; }
body.ink-mode .app-nav::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: 54px; height: 220px; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><g fill='none' stroke='%23205850' stroke-linecap='round'><path d='M-10 150c30-46 44-58 62-58s26 14 44 40 30 34 48 34 30-10 46-28' stroke-width='1.4' opacity='.30'/><path d='M-10 176c34-40 50-50 70-50s30 12 48 34 28 28 46 28 32-12 50-30' stroke-width='1' opacity='.22'/><path d='M40 132c10-16 18-22 28-22s16 6 24 16' stroke-width='1' opacity='.20'/></g><g fill='%23205850' opacity='.05'><path d='M0 220c40-60 60-76 78-76s26 16 44 40 30 26 44 26 34-14 54-34v44z'/></g></svg>");
  background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto;
  opacity: .9;
}
body.ink-mode .app-nav .nav-footer::before { color: #58706c; }

/* 引言卡：水墨远山底纹（参考稿右下角那块） */
body.ink-mode .ink-quote {
  position: relative; overflow: hidden; border-color: var(--ink-line);
  background: linear-gradient(160deg, #f2f7f4, #e7f0ea); color: #42595a;
}
body.ink-mode .ink-quote::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120'><g fill='%23205850' opacity='.10'><path d='M0 120c28-46 44-62 62-62s24 12 40 34 28 24 44 24 30-10 48-30 26-16 38-16 20 6 28 16v34z'/></g><g stroke='%23205850' stroke-width='1' fill='none' opacity='.22'><path d='M0 96c26-34 40-46 56-46s22 10 36 28 26 20 40 20 28-8 44-26'/></g></svg>");
  background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto;
}
body.ink-mode .ink-quote { padding-bottom: 74px; }

/* 角色详情弹窗：跟着首页换成浅色水墨卡 */
body.ink-mode .modal-backdrop { background: rgba(18, 34, 32, .42); backdrop-filter: blur(6px); }
body.ink-mode .modal {
  border: 1px solid var(--ink-line); border-radius: 22px; background: #fff;
  box-shadow: 0 30px 80px rgba(18, 50, 46, .22); color: var(--ink-text);
}
body.ink-mode .modal-head { border-bottom: 1px solid var(--ink-line); background: linear-gradient(180deg, #f7faf8, #fff); }
body.ink-mode .modal-head h2 { font-family: var(--ink-serif); font-size: 22px; letter-spacing: .04em; color: #1d3f3a; }
body.ink-mode .modal-head .card-meta { color: var(--ink-muted); }
body.ink-mode .modal-avatar { border-radius: 16px; }
body.ink-mode .modal-close { border-radius: 10px; color: var(--ink-muted); }
body.ink-mode .modal-close:hover { background: var(--ink-soft); color: var(--ink-green); }
body.ink-mode .modal-body { color: var(--ink-text); }
body.ink-mode .tag-row .tag,
body.ink-mode .modal .tag {
  padding: 3px 10px; border: 1px solid var(--ink-line); border-radius: 999px; background: var(--ink-soft);
  color: #35605a; font-size: 11.5px;
}
body.ink-mode .modal .button { border-radius: 999px; }
body.ink-mode .modal .button.primary { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
body.ink-mode .modal .button.primary:hover { background: #1a4a44; }
body.ink-mode .modal .button.ghost { border-color: var(--ink-line); color: #3f5a55; background: #fff; }
body.ink-mode .modal .button.ghost:hover { border-color: var(--ink-soft-2); background: #f5f9f6; }
body.ink-mode .modal-actions { border-top: 1px solid var(--ink-line); }
body.ink-mode .modal .notice-text { color: var(--ink-muted); }
body.ink-mode #character-modal .modal { max-width: 720px; }

/* ════════════ 其它工作区（聊天记录 / 我的收藏 / 设置）沿用同一套水墨皮肤 ════════════ */
body.ink-mode .workspace-view { padding: 26px 32px 44px; }
body.ink-mode .workspace-view h1,
body.ink-mode .page-heading h1,
body.ink-mode .settings-page-header h1,
body.ink-mode .settings-branch-header h1 {
  font-family: var(--ink-serif); color: #1d423d; letter-spacing: .04em;
}
body.ink-mode .page-heading,
body.ink-mode .settings-page-header { margin-bottom: 6px; }
body.ink-mode .eyebrow { color: #7d918c; letter-spacing: .18em; }
body.ink-mode .subtle { color: var(--ink-muted); }
body.ink-mode .account-card,
body.ink-mode .workspace-loading,
body.ink-mode .empty,
body.ink-mode .hall-filter,
body.ink-mode .settings-card,
body.ink-mode .settings-page-card {
  border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .button { border-radius: 999px; }
body.ink-mode .button.primary { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
body.ink-mode .button.primary:hover { background: #1a4a44; border-color: #1a4a44; }
body.ink-mode .button.ghost { border-color: var(--ink-line); background: #fff; color: #3f5a55; }
body.ink-mode .button.ghost:hover { border-color: var(--ink-soft-2); background: #f6faf7; }
body.ink-mode .search,
body.ink-mode input.search {
  height: 44px; padding: 0 18px; border: 1px solid var(--ink-line); border-radius: 999px;
  background: #fff; color: var(--ink-text); box-shadow: 0 6px 18px rgba(32, 88, 80, .05);
}
body.ink-mode .hall-chips .hall-chip {
  padding: 7px 16px; border: 1px solid var(--ink-line); border-radius: 999px; background: #fff; color: #556a66; font-size: 13px;
}
body.ink-mode .hall-chips .hall-chip.is-active { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
body.ink-mode .hall-count, body.ink-mode .hall-count strong { color: var(--ink-muted); }
body.ink-mode .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.ink-mode .card-grid .character-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--ink-line);
  border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .card-grid .card-media { aspect-ratio: 3 / 3.7; }
body.ink-mode .card-grid .card-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
body.ink-mode .card-grid .card-body { padding: 12px 14px 14px; gap: 6px; }
body.ink-mode .card-grid .card-name { font-size: 14.5px; color: var(--ink-text); }
body.ink-mode .card-grid .card-description { color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
body.ink-mode .card-grid .card-footer { flex-direction: column; align-items: flex-start; gap: 5px; }
body.ink-mode .card-grid .card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
body.ink-mode .card-grid .card-tags span { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--ink-soft); color: #35605a; font-size: 10.5px; }
body.ink-mode .card-grid .card-updated { color: #93a49f; font-size: 11px; }
/* 聊天记录列表 */
body.ink-mode .recent-workspace-list .recent-row,
body.ink-mode .recent-list .recent-row,
body.ink-mode .recent-item {
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(32, 88, 80, .04);
}


/* ════════════ 收口（2026-10-20 晚）：左栏固定 + 换上真实水墨素材 ════════════ */
@media (min-width: 861px) {
  /* 左栏固定：页面滚动时导航不跟着走 */
  body.ink-mode .app-shell > .app-nav {
    position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; overflow-x: hidden;
    border-right: 1px solid var(--ink-line);
  }
}
/* 左栏底部：山崖楼阁（产品提供的透明水墨素材，白底已转 alpha） */
body.ink-mode .app-nav::after {
  background-image: url("/img/ink/side-cliff.webp");
  background-size: 100% auto; background-position: bottom center; background-repeat: no-repeat;
  bottom: 0; left: 0; right: 0; height: 200px; opacity: .85;
}
/* 引言卡：远山小舟（横构图素材） */
body.ink-mode .ink-quote::after {
  background-image: url("/img/ink/quote-boat.webp");
  background-size: 118% auto; background-position: bottom center; background-repeat: no-repeat;
  height: 132px; opacity: .9;
}
body.ink-mode .ink-quote { padding-bottom: 96px; }
/* 快速开始面板角落放一幅瀑布，层次更像参考稿（不吃点击） */
body.ink-mode .ink-panel { position: relative; overflow: hidden; }
body.ink-mode .ink-panel::after {
  content: ""; position: absolute; right: -18px; bottom: -22px; width: 150px; height: 190px; pointer-events: none;
  background-image: url("/img/ink/waterfall.webp"); background-size: contain; background-repeat: no-repeat;
  background-position: bottom right; opacity: .18;
}
body.ink-mode .ink-rank { position: relative; z-index: 1; }

/* 水墨素材位置微调：不压文字、不被裁掉 */
body.ink-mode .app-nav::after {
  bottom: 88px; height: 168px; opacity: .75; background-size: 92% auto;
}
body.ink-mode .app-nav .nav-footer { position: relative; z-index: 2; }
body.ink-mode .app-nav .nav-footer::before { position: relative; z-index: 2; }
body.ink-mode .ink-quote::after { height: 104px; opacity: .85; }
body.ink-mode .ink-quote { padding-bottom: 86px; }

/* ════════════ 尺寸治理（2026-10-20 第四轮）═════════════════════════════════
 * 问题：卡片用 1fr 铺满，2K/4K 屏（27 寸 2560 宽）上角色卡会被放大到 300px+，比例失衡。
 * 方案：内容区设最大宽度并居中（参考稿本身就是固定画布式设计），卡片尺寸随之恒定；
 *      右栏改成 sticky，滚动时不消失。 */
.ink-home {
  max-width: 1240px; margin: 0 auto; width: 100%;
  padding-left: clamp(16px, 2.2vw, 30px); padding-right: clamp(16px, 2.2vw, 30px);
}
.ink-body { max-width: 840px; }
.ink-popular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ink-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 卡片上限：再宽的屏幕也不把卡撑大（内容区已限宽，这里再兜一道） */
.ink-card, .ink-grid .character-card { max-width: 260px; }

/* 右栏固定：快速开始 / 热门榜单 / 引言卡跟着滚动停住 */
.ink-right {
  position: sticky; top: 18px; align-self: start;
  max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain;
}
.ink-right::-webkit-scrollbar { width: 6px; }
.ink-right::-webkit-scrollbar-thumb { background: rgba(32, 88, 80, .16); border-radius: 999px; }

@media (max-width: 1240px) {
  .ink-home { max-width: none; }
  .ink-body { max-width: none; }
  /* 窄屏时右栏不再 sticky（会变成一行三块，sticky 反而挡内容） */
  .ink-right { position: static; max-height: none; overflow: visible; }
}
@media (min-width: 1600px) {
  /* 27 寸及以上：**不再放宽内容列**——卡片大小必须和 1080p 一致，否则比例失衡 */
  .ink-home { max-width: 1240px; }
  .ink-body { max-width: 840px; }
}

/* 与参考稿对齐：左栏只保留 6 项（渠道状态属于运营页，设置里已有入口） */
body.ink-mode .app-nav .nav-item[data-nav="channel-status"] { display: none; }
/* 收口：完整保留两个透明水墨单元，素材退到背景层，文案保持清晰。 */
body.ink-mode .app-nav::after {
  left: -4px;
  right: -4px;
  bottom: 84px;
  height: 220px;
  background-image: url("/img/ink/side-pavilion-complete.webp");
  background-size: 100% auto;
  background-position: center bottom;
  opacity: .62;
  filter: saturate(.78) contrast(.94);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
body.ink-mode .app-nav .nav-footer {
  position: relative;
  z-index: 2;
}
body.ink-mode .app-nav .nav-footer::before {
  position: relative;
  z-index: 2;
}
body.ink-mode .ink-quote {
  height: 190px;
  min-height: 190px;
  box-sizing: border-box;
  padding: 26px 22px 90px;
  isolation: isolate;
}
body.ink-mode .ink-quote-copy {
  position: relative;
  z-index: 2;
  display: block;
}
body.ink-mode .ink-quote::after {
  z-index: 0;
  height: 100%;
  right: 0;
  left: auto;
  bottom: 0;
  width: 100%;
  background-image: url("/img/ink/quote-boat.webp");
  background-size: 118% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: .84;
  filter: saturate(.80) contrast(.95);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
}


/* ════════════ v4 落地：通用组件 + 设置页 ══════════════════════════════════ */
/* 通用：双胶囊（题材=实心墨青 / 状态=描边） */
.ink-tag-solid { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--ink-green); color: #fff; font-size: 11.5px; }
.ink-tag-line { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--ink-line); border-radius: 999px; background: #fff; color: #4e625e; font-size: 11.5px; }
.ink-tag-line::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-green); opacity: .75; }
/* 通用：墨圈图标 */
.ink-ico-circle { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--ink-soft); color: var(--ink-green); }
.ink-ico-circle svg { width: 20px; height: 20px; }
/* 通用：朱砂小印 */
.ink-seal { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 2px; background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .9; }

/* 设置页：三入口卡横排 + 圆钮箭头 + 卡内淡远山 */
body.ink-mode .settings-workspace { max-width: 1060px; }
body.ink-mode .settings-entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; }
body.ink-mode .settings-entry-card {
  position: relative; min-height: 178px; padding: 22px 22px 24px; overflow: hidden;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: var(--ink-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.ink-mode .settings-entry-card::before { display: none; }
body.ink-mode .settings-entry-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92px; pointer-events: none;
  background: url("/img/ink/mountains.webp") bottom center / 132% auto no-repeat; opacity: .1;
}
body.ink-mode .settings-entry-card:hover { transform: translateY(-2px); border-color: var(--ink-soft-2); box-shadow: 0 18px 40px rgba(32, 88, 80, .12); }
body.ink-mode .settings-entry-kicker { color: var(--ink-green); font-size: 10.5px; letter-spacing: .14em; }
body.ink-mode .settings-entry-card strong { margin-top: 14px; font-family: var(--ink-serif); font-size: 21px; letter-spacing: .02em; color: #1d423d; }
body.ink-mode .settings-entry-card > span:not(.settings-entry-kicker):not(.settings-entry-arrow) { margin-top: 10px; color: var(--ink-muted); font-size: 12.5px; line-height: 1.7; max-width: 92%; }
body.ink-mode .settings-entry-arrow {
  display: grid; place-items: center; position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border: 1px solid var(--ink-line); border-radius: 50%;
  background: #fff; color: var(--ink-green); font-size: 14px; transition: all .16s ease;
}
body.ink-mode .settings-entry-card:hover .settings-entry-arrow { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
/* 提示条：盾牌图标 + 右侧淡远山 */
body.ink-mode .settings-principles {
  position: relative; overflow: hidden; align-items: center; padding: 20px 24px;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .settings-principles::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 300px; pointer-events: none;
  background: url("/img/ink/mountains.webp") center right / contain no-repeat; opacity: .13;
}
body.ink-mode .settings-principles-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--ink-soft); color: var(--ink-green); font-size: 16px; }
body.ink-mode .settings-principles strong { font-size: 13.5px; }
body.ink-mode .settings-principles p { font-size: 12.5px; }
@media (max-width: 1080px) {
  body.ink-mode .settings-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body.ink-mode .settings-entry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════ 常用语：v3 排版（单列编号） + v4 水墨克制 ═════════════════ */
body.ink-mode .settings-phrases-panel { border: 0; background: transparent; box-shadow: none; padding: 0; }
body.ink-mode .common-phrases-editor-grid {
  display: grid; gap: 16px; padding: 22px 24px 24px;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .common-phrases-editor-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
body.ink-mode .common-phrases-editor-toolbar .edit-field { flex: 1 1 260px; }
body.ink-mode .common-phrase-editor-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.ink-mode .common-phrase-editor-field {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px;
}
body.ink-mode .common-phrase-editor-field > span:not(.cpf-index) { display: none; }
body.ink-mode .cpf-index {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 8px;
  border-radius: 50%; background: var(--ink-soft); color: var(--ink-green);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
body.ink-mode .common-phrase-editor-field textarea {
  min-height: 44px; height: auto; padding: 11px 14px; resize: vertical;
  border: 1px solid var(--ink-line); border-radius: 12px; background: #fdfefc;
  color: var(--ink-text); font-size: 13px; line-height: 1.5;
}
body.ink-mode .common-phrase-editor-field textarea:focus {
  outline: none; border-color: var(--ink-green); background: #fff;
  box-shadow: 0 0 0 3px rgba(32, 88, 80, .1);
}
body.ink-mode .common-phrase-editor-field textarea::placeholder { color: #a8b3a7; }
body.ink-mode .common-phrases-editor-grid .edit-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  border-top: 1px solid var(--ink-line); padding-top: 16px;
}

/* ════════════ 聊天记录（recent） ══════════════════════════════════════ */
body.ink-mode .recent-list { display: grid; gap: 10px; }
body.ink-mode .recent-item {
  padding: 14px 16px; border: 1px solid var(--ink-line); border-radius: 16px; background: #fff;
  box-shadow: 0 4px 14px rgba(32, 88, 80, .04); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.ink-mode .recent-item:hover, body.ink-mode .recent-item:focus-visible {
  transform: translateY(-1px); border-color: var(--ink-soft-2); background: #fbfdfb;
  box-shadow: 0 12px 28px rgba(32, 88, 80, .1); outline: none;
}
body.ink-mode .recent-avatar { width: 44px; height: 44px; border-radius: 12px; }
body.ink-mode .recent-item-copy strong { font-size: 13.5px; color: var(--ink-text); }
body.ink-mode .recent-item-copy small { font-size: 12px; color: var(--ink-muted); }
body.ink-mode .recent-item-arrow { color: #9fb0aa; }

/* ════════════ 账号（my-workspace） ════════════════════════════════════ */
body.ink-mode .my-workspace { max-width: 1060px; }
body.ink-mode .my-account-panel {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .my-account-panel::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 300px; pointer-events: none;
  background: url("/img/ink/mountains.webp") center right / contain no-repeat; opacity: .12;
}
body.ink-mode .my-avatar {
  width: 64px; height: 64px; border-radius: 16px; background: var(--ink-soft); color: var(--ink-green);
  font-size: 20px; font-family: var(--ink-serif);
}
body.ink-mode .my-account-copy h2 { font-family: var(--ink-serif); font-size: 22px; letter-spacing: .02em; color: #1d423d; }
body.ink-mode .account-metrics { display: flex; gap: 16px; margin-top: 6px; color: var(--ink-muted); font-size: 12.5px; }
body.ink-mode .account-metrics strong { color: var(--ink-text); font-size: 13.5px; }
body.ink-mode .my-account-actions { margin-left: auto; position: relative; z-index: 1; }
body.ink-mode .my-workspace-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
body.ink-mode .my-hub-entry {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 8px; min-height: 152px;
  padding: 20px 22px; border: 1px solid var(--ink-line); border-radius: 16px; background: #fff;
  box-shadow: var(--ink-shadow); text-align: left; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.ink-mode .my-hub-entry::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78px; pointer-events: none;
  background: url("/img/ink/mountains.webp") bottom center / 132% auto no-repeat; opacity: .09;
}
body.ink-mode .my-hub-entry:hover { transform: translateY(-2px); border-color: var(--ink-soft-2); box-shadow: 0 18px 40px rgba(32, 88, 80, .12); }
body.ink-mode .my-hub-kicker { color: var(--ink-green); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
body.ink-mode .my-hub-entry strong { font-family: var(--ink-serif); font-size: 19px; letter-spacing: .02em; color: #1d423d; }
body.ink-mode .my-hub-entry > span:not(.my-hub-kicker):not(.my-hub-arrow) { color: var(--ink-muted); font-size: 12.5px; line-height: 1.7; max-width: 92%; }
body.ink-mode .my-hub-arrow {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center;
  width: 32px; height: 32px; border: 1px solid var(--ink-line); border-radius: 50%;
  color: var(--ink-green); font-size: 13px; transition: all .16s ease;
}
body.ink-mode .my-hub-entry:hover .my-hub-arrow { background: var(--ink-green); border-color: var(--ink-green); color: #fff; }
@media (max-width: 900px) {
  body.ink-mode .my-workspace-entry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════ 我的收藏（账号内） ═══════════════════════════════════════ */
body.ink-mode #my-favorites-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 220px)); gap: 18px; }
body.ink-mode #my-favorites-list .character-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode #my-favorites-list .card-media { aspect-ratio: 3 / 3.7; }
body.ink-mode #my-favorites-list .card-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
body.ink-mode #my-favorites-list .card-body { padding: 12px 14px 14px; gap: 6px; }
body.ink-mode #my-favorites-list .card-name { font-size: 14px; color: var(--ink-text); }
body.ink-mode #my-favorites-list .card-description { color: var(--ink-muted); font-size: 11.5px; line-height: 1.65; }
body.ink-mode .favorites-count-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--ink-line);
  border-radius: 999px; background: #fff; color: var(--ink-muted); font-size: 11.5px;
}
/* 收藏页右侧留白水墨 */
body.ink-mode .my-favorites-workspace { position: relative; }
body.ink-mode .my-favorites-workspace::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 420px; height: 220px; pointer-events: none;
  background: url("/img/ink/quote-boat.webp") bottom right / contain no-repeat; opacity: .16; z-index: 0;
}
body.ink-mode .my-favorites-workspace > * { position: relative; z-index: 1; }

/* ════════════ 指令管理（prompt admin） ═════════════════════════════════ */
body.ink-mode .prompt-admin-list { display: grid; gap: 8px; }
body.ink-mode .prompt-admin-row {
  border: 1px solid var(--ink-line); border-radius: 14px; background: #fff; padding: 12px 16px;
  transition: border-color .16s ease, background .16s ease;
}
body.ink-mode .prompt-admin-row:hover { border-color: var(--ink-soft-2); background: #fbfdfb; }
body.ink-mode .prompt-admin-index {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--ink-soft); color: var(--ink-green); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
body.ink-mode .prompt-admin-copy strong { font-size: 13.5px; color: var(--ink-text); }
body.ink-mode .prompt-admin-copy small { color: var(--ink-muted); font-size: 12px; }
body.ink-mode .prompt-admin-actions .button,
body.ink-mode .prompt-admin-row .button { border-radius: 999px; }
body.ink-mode .prompt-admin-bare {
  border: 1px solid var(--ink-line); border-radius: 14px; background: #fbfdfb; padding: 12px 16px; color: var(--ink-muted); font-size: 12.5px;
}
body.ink-mode .settings-panel { border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow); padding: 20px 22px; }

/* ════════════ 渠道状态（只读卡片） ═════════════════════════════════════ */
body.ink-mode .settings-channel-list { display: grid; gap: 10px; }
body.ink-mode .settings-channel-card {
  position: relative; overflow: hidden; padding: 16px 18px;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(32, 88, 80, .04);
}
body.ink-mode .settings-channel-card::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 220px; height: 90px; pointer-events: none;
  background: url("/img/ink/mountains.webp") bottom right / contain no-repeat; opacity: .1;
}
body.ink-mode .settings-channel-card-head strong { font-size: 14px; color: var(--ink-text); }
body.ink-mode .settings-channel-card-meta { color: var(--ink-muted); font-size: 12px; }
body.ink-mode .settings-channel-card-meta strong { color: var(--ink-text); }

/* 修正：收藏页的网格在 .my-favorites-grid（内层），不是 #my-favorites-list */
body.ink-mode #my-favorites-list { display: block; }
body.ink-mode .my-favorites-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 210px)); gap: 18px; justify-content: start;
}
body.ink-mode .my-favorites-grid .character-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-height: 0;
  border: 1px solid var(--ink-line); border-radius: 16px; background: #fff; box-shadow: var(--ink-shadow);
}
body.ink-mode .my-favorites-grid .card-media { aspect-ratio: 3 / 3.7; overflow: hidden; }
body.ink-mode .my-favorites-grid .card-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
body.ink-mode .my-favorites-grid .card-body { padding: 12px 14px 14px; gap: 6px; }
body.ink-mode .my-favorites-grid .card-name { font-size: 14px; color: var(--ink-text); }
body.ink-mode .my-favorites-grid .card-description { color: var(--ink-muted); font-size: 11.5px; line-height: 1.65; }
body.ink-mode .my-favorites-grid .card-tags span { background: var(--ink-soft); color: #35605a; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; }

/* 角色详情弹窗：对齐 v4 稿（宋体标题 + 朱砂印 + 双胶囊 + 角落淡竹/远山） */
body.ink-mode #character-modal .modal { max-width: 720px; }
body.ink-mode #character-modal .modal-head { position: relative; padding: 22px 24px 18px; }
body.ink-mode #character-modal .modal-head h2 {
  font-family: var(--ink-serif); font-size: 22px; letter-spacing: .02em; color: #1d423d;
  display: inline-block; margin-right: 4px;
}
body.ink-mode #character-modal .modal-head-copy h2::after {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: 2px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .9;
}
body.ink-mode #character-modal .modal-head::after {
  content: ""; position: absolute; right: 16px; top: 16px; width: 90px; height: 90px; pointer-events: none;
  background: url("/img/ink/bamboo.webp") top right / contain no-repeat; opacity: .22;
}
/* 题材标签：实心墨青；状态胶囊：描边 */
body.ink-mode #character-modal .tag-row { gap: 8px; }
body.ink-mode #character-modal .tag-row .tag {
  border: 0; border-radius: 999px; background: var(--ink-green); color: #fff; font-size: 11.5px; padding: 4px 11px;
}
body.ink-mode #character-modal .status-strip,
body.ink-mode #character-modal .status-pill,
body.ink-mode #character-modal .card-status-row span {
  border-color: var(--ink-line); border-radius: 999px; background: #fff; color: #4e625e; font-size: 11.5px;
}
body.ink-mode #character-modal .modal-body { padding-top: 4px; }
body.ink-mode #character-modal .modal-actions { position: relative; padding: 16px 24px 20px; }
body.ink-mode #character-modal .modal-actions::after {
  content: ""; position: absolute; right: 18px; bottom: 10px; width: 150px; height: 70px; pointer-events: none;
  background: url("/img/ink/mountains.webp") bottom right / contain no-repeat; opacity: .12;
}

/* 手机端修正：ink 皮肤的 grid 覆盖会把 #view 挤到第 2 列（宽度 0 → 整页空白）。
 * ≤860px 单列布局下必须把 view 拉回第 1 列，nav 保持左侧抽屉。 */
@media (max-width: 860px) {
  body.ink-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
  body.ink-mode .app-shell > .view { grid-column: 1; grid-row: 1; width: 100%; }
  body.ink-mode .app-shell > .app-nav { grid-column: 1; grid-row: 1; position: fixed; height: var(--visual-viewport-height, 100dvh); }
}

/* 手机端：热门推荐/网格回到 2 列（后面新加的 4 列规则会覆盖之前的移动端断点） */
@media (max-width: 860px) {
  .ink-popular, .ink-grid, body.ink-mode .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ink-card, body.ink-mode .ink-grid .character-card { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   手机端「为你推荐」= 横向滑动卡片（2026-11-01 产品口径）
   原先手机上也是两列竖排：看完 8 张要一路滑到下面，想"换一批"还得再滑回顶部按按钮。
   现在改成**一排 8 张横向滑**（依旧一次 8 张）：左右滑看全，顶部「换一批」随手可点。
   实现要点：
     · grid-auto-flow: column + grid-auto-columns：一张占约 3/4 屏宽，露出下一张的边，暗示可滑；
     · scroll-snap：停在整张卡上，不会停在"半张"；
     · 隐藏滚动条（移动浏览器上滚动条本来也只在滑动时闪一下，藏掉更干净）。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .ink-grid#feed-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    /* 2026-11-01 产品反馈「图片太大了、失衡」：卡宽从 74%/260 收到 56%/210，
       一屏露出约 1.8 张（看得出这是"一横排"，又不至于让一张大图独占视线）。 */
    grid-auto-columns: min(56%, 210px);
    gap: 10px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ink-grid#feed-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .ink-grid#feed-grid > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .ink-grid#feed-grid .ink-card,
  .ink-grid#feed-grid .ink-card-skeleton { width: 100%; min-width: 0; max-width: none; }
  /* 封面从 1:1.06 收成 1:1：手机上一张卡里「图 : 字」从 58 : 42 变成 52 : 48，不再头重脚轻 */
  .ink-grid#feed-grid .ink-card-media { aspect-ratio: 1 / 1; }
  /* 提示文案：手机显示"左右滑"，桌面显示"换一批"（两段文案用 CSS 切换，不改 JS） */
  .ink-feed-hint.is-mobile { display: none; }
}
@media (min-width: 861px) {
  .ink-feed-hint.is-mobile { display: none; }
}
@media (max-width: 860px) {
  .ink-feed-hint.is-desktop { display: none; }
  .ink-feed-hint.is-mobile { display: inline; font-size: 11.5px; }
  /* 手机端标题行：给「左右滑动」提示 + 换一批按钮留出呼吸，必要时整行换行而不是把标题挤成两行 */
  #ink-for-you .ink-section-head { flex-wrap: wrap; gap: 8px; }
  #ink-for-you .ink-all-tools { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  #ink-for-you .ink-link { white-space: nowrap; }
}

/* ════════════ 手机端底部 Tab 栏（App 观感的关键差异）═══════════════════════ */
.mobile-tabbar { display: none; }
@media (max-width: 860px) {
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; /* 2026-10-26：底部栏加入「创建」→ 五个格子 */
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--ink-line, #e4ebdd);
    background: rgba(247, 250, 246, .92);
    backdrop-filter: blur(14px) saturate(120%);
  }
  /* 聊天页不显示 Tab 栏（输入区要占满底部） */
  .app-shell.chat-mode ~ .mobile-tabbar,
  body.chat-mode .mobile-tabbar { display: none; }
  .mobile-tab {
    display: grid; justify-items: center; gap: 3px; height: 100%;
    border: 0; background: transparent; color: #8a9a92; font-size: 11px; cursor: pointer;
  }
  .mobile-tab svg { width: 22px; height: 22px; }
  .mobile-tab.is-active { color: var(--ink-green, #205850); font-weight: 600; }
  .mobile-tab.is-active svg { transform: translateY(-1px); }
  /* 内容区给 Tab 栏留出空间，避免最后一屏被遮住 */
  body.ink-mode .view { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* 手机端左侧抽屉触发键仍保留在页头 */
}

/* Hero 海报：用 clamp 控制宽度，避免窄屏被压扁；≤1020 直接隐藏（手机只留文案区） */
.ink-hero { padding-right: clamp(240px, 26vw, 330px); }
.ink-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(220px, 24vw, 320px); display: block; }
.ink-hero-art img {
  width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 22%; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
@media (max-width: 1020px) {
  .ink-hero { padding-right: 24px; }
  .ink-hero-art { display: none; }
}


/* ════════════ Hero 海报：**同一张 1536×640 海报做尺寸适配**（不换图、不拉伸）═══════
 * 桌面：海报本身就是"左留白 + 右人物"的横幅，直接当背景 cover（比例 2.4:1 与容器接近，几乎不裁）；
 * 手机：容器比例变成 1.5:1，硬塞 cover 会裁掉人物 → 改为**竖排**：海报按原比例铺一条（1536/640），文案落到下方。
 */
body.ink-mode .ink-hero {
  background: #eef4ef url("/img/yunmeng-hero-poster.webp") right center / cover no-repeat;
  padding: 30px 38px;
  min-height: 300px;
}
/* 桌面不再叠加一张 img（海报里已经有林翩翩） */
body.ink-mode .ink-hero-art { display: none; }
body.ink-mode .ink-hero-copy { max-width: 46%; }

@media (max-width: 1020px) {
  body.ink-mode .ink-hero {
    display: grid; gap: 14px; padding: 0 0 20px; min-height: 0;
    background: none; border-radius: 18px; overflow: hidden;
    background-color: #f4f8f4;
  }
  /* 海报按原生比例铺满一条，不裁不变形 */
  body.ink-mode .ink-hero-art {
    display: block; position: static; width: 100%; padding: 0;
  }
  body.ink-mode .ink-hero-art img {
    width: 100%; height: auto; aspect-ratio: 1536 / 640; object-fit: cover;
    border-radius: 0; box-shadow: none; -webkit-mask-image: none; mask-image: none;
  }
  body.ink-mode .ink-hero-copy { max-width: none; padding: 2px 20px 0; }
  body.ink-mode .ink-hero-copy h1 { font-size: 26px; line-height: 1.28; }
  body.ink-mode .ink-hero-copy p { margin-bottom: 14px; font-size: 12.5px; }
  body.ink-mode .ink-cta { height: 40px; padding: 0 18px; font-size: 13px; }
}

/* ════════════ Hero 海报·手机竖版（image2.5 由同一张横版海报改编而来）═══════════
 * 不再"图 + 文字"两段拼接：竖版海报本身就是"左上空白 + 右侧人物"，
 * 直接把文案压在海报左上方，海报铺满整个 hero（cover，不变形）。
 */
@media (max-width: 1020px) {
  body.ink-mode .ink-hero {
    display: block;
    min-height: clamp(380px, 62vh, 560px);
    padding: 26px 20px 24px;
    border-radius: 18px;
    background: #eef4ef url("/img/yunmeng-hero-poster-mobile.webp") right bottom / cover no-repeat;
  }
  body.ink-mode .ink-hero-art { display: none; }
  body.ink-mode .ink-hero-copy {
    max-width: 62%;
    padding: 0;
    /* 左侧留白处压一层极淡的米白渐隐，保证深色文字在任何机型上都读得清 */
    position: relative; z-index: 1;
  }
  body.ink-mode .ink-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
    background: linear-gradient(100deg, rgba(246, 248, 241, .82) 0%, rgba(246, 248, 241, .45) 42%, rgba(246, 248, 241, 0) 68%);
  }
  body.ink-mode .ink-hero { position: relative; }
  body.ink-mode .ink-hero-copy h1 { font-size: 28px; line-height: 1.3; }
  body.ink-mode .ink-hero-copy p { margin-bottom: 16px; font-size: 12.5px; }
  body.ink-mode .ink-cta { height: 42px; padding: 0 20px; font-size: 13px; }
}
@media (max-width: 420px) {
  body.ink-mode .ink-hero { min-height: clamp(340px, 58vh, 480px); padding: 22px 16px; }
  body.ink-mode .ink-hero-copy h1 { font-size: 25px; }
}

/* 手机海报微调：留白再多一点，副标题不挤成两行 */
@media (max-width: 1020px) {
  body.ink-mode .ink-hero { min-height: clamp(420px, 66vh, 580px); }
  body.ink-mode .ink-hero-copy { max-width: 64%; }
  body.ink-mode .ink-hero-copy p { font-size: 12px; line-height: 1.75; letter-spacing: .02em; }
}

/* 手机 Hero：海报改 3:2 横幅（只保留胸像），hero 用同比例，高度不再占掉半屏 */
@media (max-width: 1020px) {
  body.ink-mode .ink-hero {
    aspect-ratio: 1536 / 1024;
    min-height: 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: #eef4ef url("/img/yunmeng-hero-poster-mobile.webp") right center / cover no-repeat;
  }
  body.ink-mode .ink-hero-copy { max-width: 58%; }
  body.ink-mode .ink-hero-copy h1 { font-size: 23px; line-height: 1.24; margin: 0 0 6px; }
  body.ink-mode .ink-hero-copy p { margin-bottom: 12px; font-size: 11px; line-height: 1.6; }
  body.ink-mode .ink-cta { height: 34px; padding: 0 14px; font-size: 12px; }
  body.ink-mode .ink-hero::before {
    background: linear-gradient(100deg, rgba(246, 248, 241, .88) 0%, rgba(246, 248, 241, .5) 46%, rgba(246, 248, 241, 0) 74%);
  }
}
@media (max-width: 420px) {
  body.ink-mode .ink-hero { padding: 14px 15px; }
  body.ink-mode .ink-hero-copy h1 { font-size: 21px; }
}

/* ════════════ 手机端顶栏重排（有底部 Tab 后不再需要抽屉导航）═══════════════ */
@media (max-width: 860px) {
  /* 汉堡键去掉：底部 Tab 已覆盖一级导航；设置入口保留在右侧齿轮 */
  body.ink-mode .ink-menu-btn,
  body.ink-mode #ink-menu { display: none; }
  /* 抽屉导航在手机上不再展示，避免误触/闪出 */
  body.ink-mode .app-shell > .app-nav { display: none; }

  body.ink-mode .ink-head {
    gap: 8px;
    padding: 10px 14px 8px;
    align-items: center;
  }
  body.ink-mode .ink-head .ink-crumbs { display: none; }
  body.ink-mode .ink-search {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px;
    border-radius: 999px; gap: 8px;
  }
  body.ink-mode .ink-search input { font-size: 13px; }
  body.ink-mode .ink-head-actions { flex: none; gap: 6px; margin-left: 0; }
  body.ink-mode .ink-icon-btn { width: 36px; height: 36px; flex: none; }
  body.ink-mode .ink-icon-btn svg { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
  /* 超窄屏：搜索框再让一点，保证两个图标不被裁 */
  body.ink-mode .ink-head { padding: 8px 10px 6px; gap: 6px; }
  body.ink-mode .ink-icon-btn { width: 34px; height: 34px; }
}

/* 手机端内容边距收紧：workspace-view 的 32px 侧边距在手机上太宽，顶栏和卡片都被挤窄 */
@media (max-width: 860px) {
  body.ink-mode .ink-home { padding: 6px 14px 18px; }
  body.ink-mode .workspace-view { padding: 14px 14px 28px; }
  body.ink-mode .ink-head { padding: 6px 0 8px; }
}

/* 使用教程弹窗 */
.ym-tutorial-panel { max-width: 560px; }
.ym-tutorial-body { display: grid; gap: 14px; padding: 4px 2px 8px; max-height: min(60vh, 460px); overflow-y: auto; }
.ym-tutorial-item h4 { margin: 0 0 4px; font-size: 13.5px; color: #1d423d; font-family: var(--ink-serif); letter-spacing: .02em; }
.ym-tutorial-item p { margin: 0; font-size: 12.5px; line-height: 1.75; color: #5c6d69; }
body.ink-mode .ym-tutorial-panel { background: #fff; border-radius: 20px; border: 1px solid var(--ink-line); }

/* ════════════ 手机端「我的」：改成 App 式分组列表（账号卡 + 列表入口）═══════════ */
@media (max-width: 860px) {
  /* 入口：两列卡片 → 单列列表行（图标 + 名称 + 箭头 + 细分隔线） */
  body.ink-mode .my-workspace-entry-grid {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    border: 1px solid var(--ink-line); border-radius: 16px; background: #fff;
    box-shadow: var(--ink-shadow); overflow: hidden;
  }
  body.ink-mode .my-hub-entry {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
    min-height: 0; padding: 16px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  body.ink-mode .my-hub-entry + .my-hub-entry { border-top: 1px solid var(--ink-line); }
  body.ink-mode .my-hub-entry::after { display: none; }
  /* 墨圈图标用 kicker 伪元素画不划算，直接给每行一个左侧墨点 */
  body.ink-mode .my-hub-entry::before {
    content: ""; width: 38px; height: 38px; border-radius: 50%;
    background: var(--ink-soft) url("/img/ink/seal-round.webp") center / 22px no-repeat;
    grid-row: 1 / span 3; grid-column: 1;
  }
  body.ink-mode .my-hub-entry .my-hub-kicker { display: none; }
  body.ink-mode .my-hub-entry strong { grid-column: 2; font-family: var(--ink-serif); font-size: 15px; color: #1d423d; }
  body.ink-mode .my-hub-entry > span:not(.my-hub-kicker):not(.my-hub-arrow) { grid-column: 2; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); }
  body.ink-mode .my-hub-arrow { position: static; grid-column: 3; grid-row: 1 / span 3; border: 0; width: auto; height: auto; color: #a9b8b2; }
  body.ink-mode .my-hub-entry:hover { transform: none; background: #f8fbf8; }

  /* 账号卡：头像放大 + 昵称/签名两行 + 统计一行 */
  body.ink-mode .my-account-panel { align-items: flex-start; gap: 14px; padding: 18px 16px; }
  body.ink-mode .my-avatar { width: 72px; height: 72px; border-radius: 18px; font-size: 22px; }
  body.ink-mode .my-account-copy h2 { font-size: 19px; }
  body.ink-mode .my-account-actions { margin-left: 0; }
  body.ink-mode .my-account-actions .button { height: 34px; padding: 0 14px; font-size: 12px; }
  body.ink-mode .account-metrics { gap: 18px; }
}

/* 手机端列表行只留标题（描述在 App 式列表里是噪音），行高收到 60px 左右 */
@media (max-width: 860px) {
  body.ink-mode .my-hub-desc { display: none; }
  body.ink-mode .my-hub-entry { padding: 13px 16px; grid-template-columns: 38px minmax(0, 1fr) 18px; }
  body.ink-mode .my-hub-entry strong { font-size: 14.5px; }
}

/* 列表行改 flex（grid 的三行跨度会撑高） */
@media (max-width: 860px) {
  body.ink-mode .my-hub-entry { display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
  body.ink-mode .my-hub-entry::before { content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-soft) url("/img/ink/seal-round.webp") center / 20px no-repeat; }
  body.ink-mode .my-hub-entry strong { flex: 1 1 auto; margin: 0; }
  body.ink-mode .my-hub-arrow { margin-left: auto; flex: none; }
}

/* 手机端「我的」收口：退出登录不被挤成竖排；列表行去掉红印章圆点，改干净的浅墨圆 */
@media (max-width: 860px) {
  body.ink-mode .my-account-panel { flex-wrap: wrap; }
  body.ink-mode .my-account-copy { flex: 1 1 auto; min-width: 0; }
  body.ink-mode .my-account-actions { flex: none; }
  body.ink-mode .my-account-actions .button { white-space: nowrap; }
  body.ink-mode .my-hub-entry::before {
    background: var(--ink-soft); position: relative;
  }
  body.ink-mode .my-hub-entry::before { box-shadow: inset 0 0 0 1px rgba(32, 88, 80, .08); }
}

/* 账号卡：个性签名 + 编辑资料 */
.my-account-signature {
  margin: 2px 0 8px; color: #63756f; font-size: 12.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.ink-mode .my-account-actions { display: flex; gap: 8px; }
.ym-profile-panel { max-width: 460px; }
.ym-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ym-field > span { display: flex; justify-content: space-between; font-size: 12px; color: #5c6d69; }
.ym-field > span em { color: #94a5a0; font-style: normal; }
.ym-field input, .ym-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink-line, #dfe8e4); border-radius: 12px;
  background: #fdfefc; color: #1c2a28; font-size: 13px; line-height: 1.6;
}
.ym-field textarea { resize: vertical; }
.ym-field input:focus, .ym-field textarea:focus { outline: none; border-color: var(--ink-green, #205850); box-shadow: 0 0 0 3px rgba(32,88,80,.1); }

/* ════════════ 我的（账号）· 按 image2.5 稿重排：账号卡 + 分组列表 ═══════════ */
body.ink-mode .my-workspace { max-width: 760px; }
body.ink-mode .my-account-panel {
  display: grid; gap: 16px; padding: 20px 22px 18px;
  border: 1px solid var(--ink-line); border-radius: 20px; background: #fff; box-shadow: var(--ink-shadow);
  position: relative; overflow: hidden;
}
body.ink-mode .my-account-panel::after {
  content: ""; position: absolute; right: -6px; top: -4px; width: 210px; height: 120px; pointer-events: none;
  background: url("/img/ink/mountains.webp") top right / contain no-repeat; opacity: .18;
}
body.ink-mode .my-account-head { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
body.ink-mode .my-avatar-wrap { position: relative; flex: none; }
body.ink-mode .my-avatar {
  width: 84px; height: 84px; border-radius: 22px; background: var(--ink-soft); color: var(--ink-green);
  display: grid; place-items: center; font-family: var(--ink-serif); font-size: 26px; letter-spacing: .04em;
}
body.ink-mode .my-avatar-cam {
  position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid #fff; background: var(--ink-green); color: #fff; cursor: pointer;
}
body.ink-mode .my-avatar-cam svg { width: 13px; height: 13px; }
body.ink-mode .my-account-copy { min-width: 0; }
body.ink-mode .my-account-copy h2 { margin: 0 0 4px; font-family: var(--ink-serif); font-size: 23px; letter-spacing: .02em; color: #1d423d; }
body.ink-mode .my-account-signature { margin: 0; color: #63756f; font-size: 12.5px; line-height: 1.6; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
body.ink-mode .my-account-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
body.ink-mode .account-metrics { display: flex; align-items: center; gap: 0; }
body.ink-mode .account-metrics > span { display: grid; justify-items: center; gap: 2px; padding: 0 16px; border-left: 1px solid var(--ink-line); }
body.ink-mode .account-metrics > span:first-child { padding-left: 0; border-left: 0; }
body.ink-mode .account-metrics strong { font-size: 16px; color: #1d423d; font-variant-numeric: tabular-nums; }
body.ink-mode .account-metrics em { font-style: normal; font-size: 11px; color: #8b9a95; }
body.ink-mode .my-account-actions .button { height: 34px; padding: 0 16px; font-size: 12.5px; }

/* 分组列表 */
body.ink-mode .my-hub { display: grid; gap: 14px; }
body.ink-mode .my-hub-group {
  border: 1px solid var(--ink-line); border-radius: 18px; background: #fff; box-shadow: var(--ink-shadow); overflow: hidden;
}
body.ink-mode .my-hub-entry {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px;
  border: 0; background: transparent; text-align: left; cursor: pointer; transition: background .14s ease;
}
body.ink-mode .my-hub-entry + .my-hub-entry { border-top: 1px solid var(--ink-line); }
body.ink-mode .my-hub-entry:hover { background: #f8fbf8; }
body.ink-mode .my-hub-ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-soft); color: var(--ink-green);
}
body.ink-mode .my-hub-ico svg { width: 18px; height: 18px; }
body.ink-mode .my-hub-entry strong { flex: 1 1 auto; font-size: 14.5px; font-family: var(--ink-serif); color: #1d423d; font-weight: 600; }
body.ink-mode .my-hub-desc { flex: 2 1 auto; font-size: 12px; color: var(--ink-muted); }
body.ink-mode .my-hub-arrow { flex: none; color: #b3c0bb; font-size: 16px; }
body.ink-mode .my-logout-row {
  margin-top: 4px; padding: 14px; border: 1px solid var(--ink-line); border-radius: 16px; background: #fff;
  color: #a2544a; font-size: 13px; cursor: pointer; box-shadow: var(--ink-shadow);
}
body.ink-mode .my-logout-row:hover { background: #fdf6f4; }

@media (max-width: 860px) {
  body.ink-mode .my-hub-desc { display: none; }
  body.ink-mode .my-account-panel { padding: 18px 16px 16px; gap: 14px; }
  body.ink-mode .my-avatar { width: 72px; height: 72px; border-radius: 18px; font-size: 22px; }
  body.ink-mode .my-account-copy h2 { font-size: 20px; }
  body.ink-mode .my-account-foot { flex-wrap: wrap; gap: 10px; }
  body.ink-mode .account-metrics > span { padding: 0 12px; }
}

/* 修正：① 手机端"隐藏描述"的规则误伤了图标容器；② 账号卡底部一行不要换行挤压 */
@media (max-width: 860px) {
  body.ink-mode .my-hub-desc { display: none; }
}
body.ink-mode .my-account-foot { flex-wrap: nowrap; }
body.ink-mode .account-metrics { flex: 1 1 auto; min-width: 0; }
body.ink-mode .my-account-actions { flex: none; }
body.ink-mode .account-metrics > span { min-width: 0; }
body.ink-mode .account-metrics em { white-space: nowrap; }

/* 图标容器：高权重确保不被"隐藏描述"的规则误伤 */
body.ink-mode .my-hub-entry > span.my-hub-ico { display: grid; width: 38px; height: 38px; flex: none; }

/* 账号卡是单列（两行：头像+资料 / 统计+按钮），覆盖基类可能存在的多列栅格 */
body.ink-mode .my-account-panel { grid-template-columns: minmax(0, 1fr); display: grid; }
body.ink-mode .my-account-foot { width: 100%; }

/* 现在有真实图标了，去掉早前用伪元素画的圆形占位，避免"两个圆" */
body.ink-mode .my-hub-entry::before { display: none; }
body.ink-mode .my-hub-entry::after { display: none; }

/* 桌面端也要用新的列表行（早前 2×2 卡片的定位规则会残留：min-height 152 / 箭头绝对定位） */
body.ink-mode .my-workspace .my-hub-entry {
  display: flex; align-items: center; gap: 14px;
  min-height: 0; padding: 15px 18px; position: relative;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left;
}
body.ink-mode .my-workspace .my-hub-entry:hover { transform: none; background: #f8fbf8; }
body.ink-mode .my-workspace .my-hub-arrow {
  position: static; top: auto; right: auto; width: auto; height: auto;
  border: 0; background: none; margin-left: auto; color: #b3c0bb;
}
body.ink-mode .my-workspace .my-hub-entry::after { content: none; }
body.ink-mode .my-workspace .my-hub-entry strong { font-family: var(--ink-serif); font-size: 14.5px; }
body.ink-mode .my-workspace .my-hub-desc { flex: 2 1 auto; color: var(--ink-muted); font-size: 12px; }

/* ════════════ 渠道管理（管理员版）· 水墨青绿皮肤（admin.html 共享 styles.css）═══════════ */
.channel-admin-list { display: grid; gap: 12px; }
.channel-admin-card {
  position: relative; overflow: hidden;
  padding: 16px 18px !important; border-radius: 16px !important;
  background: #fff !important; border: 1px solid #dfe8e4 !important;
  box-shadow: 0 10px 28px rgba(32, 88, 80, .07) !important;
}
.channel-admin-card::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 200px; height: 84px; pointer-events: none;
  background: url("/img/ink/mountains.webp") bottom right / contain no-repeat; opacity: .1;
}
.channel-admin-card-head strong { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 15.5px; color: #1d423d !important; letter-spacing: .02em; }
.channel-admin-card-head .ops-dim { color: #7b8b86 !important; font-size: 11.5px; margin-top: 2px; }
.ops-chip { border-radius: 999px !important; padding: 3px 11px !important; font-size: 11.5px !important; border: 1px solid #dfe8e4 !important; background: #fff !important; color: #4e625e !important; }
.ops-chip-normal { background: #eaf5ef !important; color: #1f6b52 !important; border-color: #cbe6d8 !important; }
.ops-chip-normal::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #2f9e6e; margin-right: 6px; vertical-align: 1px; }
.channel-admin-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 12px; color: #6b7b78 !important; }
.channel-admin-meta strong { color: #1d423d !important; font-variant-numeric: tabular-nums; }
.channel-admin-models { margin-top: 12px; gap: 7px; }
.channel-admin-models .ops-dim { font-size: 11.5px; color: #8a9a95 !important; }
.discount-chip {
  border: 1px solid #e2eae6 !important; background: #fff !important; color: #5b6c68 !important;
  border-radius: 999px !important; padding: 3px 11px !important; font-size: 11px !important;
}
.discount-chip:hover { border-color: #c9d8d2 !important; }
.discount-chip.is-on { background: #205850 !important; border-color: #205850 !important; color: #fff !important; font-weight: 500 !important; }
.channel-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.channel-admin-actions .button {
  height: 32px; padding: 0 14px !important; border-radius: 999px !important; font-size: 12px !important;
  border: 1px solid #dfe8e4 !important; background: #fff !important; color: #3f5a55 !important;
}
.channel-admin-actions .button:hover { border-color: #c9d8d2 !important; background: #f6faf7 !important; }
.channel-admin-actions .button.danger { border-color: #e7c8c1 !important; color: #a2544a !important; }
.channel-admin-actions .button.danger:hover { background: #fdf6f4 !important; }

/* 渠道卡左上加一个墨圈图标（对齐参考稿的"图标 + 名称"） */
.channel-admin-card-head > div:first-child {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
}
.channel-admin-card-head > div:first-child::before {
  content: ""; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%;
  background: #e4eeea url("/img/ink/waterfall.webp") center / 17px auto no-repeat;
}
.channel-admin-card-head > div:first-child > strong { grid-column: 2; }
.channel-admin-card-head > div:first-child > .ops-dim { grid-column: 2; }

/* 我的收藏：卡片少时居中（参考稿是单卡居中 + 右侧留白） */
body.ink-mode .my-favorites-grid { justify-content: center; }
body.ink-mode .my-favorites-workspace { min-height: 60vh; }

/* 头像图 */
body.ink-mode .my-avatar { overflow: hidden; }
body.ink-mode .my-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════ 手机端二级页面特化（2026-10-21）══════════════════════════════ */
@media (max-width: 860px) {
  /* ① 角色详情弹窗：手机上贴边大圆角、内容自滚动、底部操作固定 */
  #character-modal .modal {
    width: calc(100vw - 16px) !important; max-width: none; max-height: 92vh;
    border-radius: 20px; display: flex; flex-direction: column; overflow: hidden;
  }
  #character-modal .modal-head { padding: 16px 16px 12px !important; }
  #character-modal .modal-head h2 { font-size: 19px !important; }
  #character-modal .modal-body { overflow-y: auto; padding: 0 16px 8px !important; }
  #character-modal .modal-actions {
    position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff; border-top: 1px solid var(--ink-line); display: flex; gap: 10px;
  }
  #character-modal .modal-actions .button { flex: 1 1 0; height: 44px; justify-content: center; }
  #character-modal .modal-head::after { width: 60px; height: 60px; opacity: .16; }

  /* ② 人设：两栏 → 单栏（列表在上、编辑器在下） */
  body.ink-mode .settings-branch-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.ink-mode .settings-persona-editor { order: 2; }
  body.ink-mode .settings-branch-header { display: grid; gap: 12px; }
  body.ink-mode .settings-branch-actions { display: flex; gap: 8px; }
  body.ink-mode .settings-branch-actions .button { flex: 1 1 0; height: 40px; justify-content: center; }
  body.ink-mode .settings-panel { padding: 16px 14px; border-radius: 16px; }

  /* ③ 我的角色 / 收藏：两列卡片，卡片矮一点 */
  body.ink-mode .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  body.ink-mode .card-grid .card-media { aspect-ratio: 3 / 3.4; }
  body.ink-mode .card-grid .card-body { padding: 10px 11px 12px; }
  body.ink-mode .card-grid .card-name { font-size: 13px; }
  body.ink-mode .card-grid .card-description { font-size: 11px; -webkit-line-clamp: 2; }

  /* ④ 指令管理：右侧上下移/编辑按钮换行，不再挤成一排 */
  body.ink-mode .prompt-admin-row { padding: 11px 12px; }
  body.ink-mode .prompt-admin-actions { flex-wrap: wrap; gap: 6px; }
  body.ink-mode .prompt-admin-actions .button { height: 30px; padding: 0 10px; font-size: 11.5px; }
}

/* 手机端操作区固定：要压过早前 body.ink-mode 的 position:relative */
@media (max-width: 860px) {
  body.ink-mode #character-modal .modal-actions {
    position: sticky; bottom: 0; z-index: 2;
    background: #fff; border-top: 1px solid var(--ink-line);
  }
  body.ink-mode #character-modal .modal-actions .button { flex: 1 1 0; height: 44px; }
}

/* ════════════ 我的角色：空态 + 手机端头部 ═════════════════════════════════ */
.my-characters-empty {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px;
  padding: 44px 20px; border: 1px dashed var(--ink-line, #dfe8e4); border-radius: 18px; background: #fff;
}
.my-characters-empty-ico {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink-soft, #e4eeea); color: var(--ink-green, #205850);
}
.my-characters-empty-ico svg { width: 26px; height: 26px; }
.my-characters-empty strong { font-family: var(--ink-serif, serif); font-size: 16px; color: #1d423d; }
.my-characters-empty p { margin: 0; font-size: 12.5px; max-width: 30em; text-align: center; }

@media (max-width: 860px) {
  body.ink-mode .my-characters-view .settings-branch-header { display: grid; gap: 10px; }
  body.ink-mode .my-characters-view .hall-actions { display: grid; gap: 8px; }
  body.ink-mode .my-characters-view .hall-actions .button { width: 100%; height: 42px; }
  body.ink-mode .my-characters-view .hall-filter { padding: 12px; border-radius: 16px; }
  body.ink-mode .my-characters-view .hall-count { margin: 10px 0 8px; }
}

/* ════════════ 后台管理（admin.html）移动端适配（2026-10-21）═══════════════ */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .topbar {
    height: auto; min-height: 56px; padding: 10px 12px; flex-wrap: wrap; gap: 8px;
    position: sticky; top: 0; align-items: center;
  }
  .topbar .brand { font-size: 15px; gap: 8px; }
  .topbar .brand-mark { width: 26px; height: 26px; }
  .topbar-meta { flex-wrap: wrap; gap: 6px 10px; font-size: 12px; }
  .topbar-meta .topbar-login,
  .topbar-meta .topbar-logout { font-size: 12px; padding: 4px 10px; border-radius: 999px; }

  .view.ops-view { padding: 12px 12px 28px; }

  /* 表格：横向滚动 + 表头不动 */
  .ops-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
  .ops-table { min-width: 640px; }
  .ops-table thead th { position: sticky; top: 0; z-index: 1; }

  /* 卡片/网格单列 */
  .ops-resource-grid,
  .ops-dep-list,
  .ops-metrics { grid-template-columns: minmax(0, 1fr) !important; }
  .ops-card { padding: 14px !important; border-radius: 14px; }
  .ops-filters { flex-wrap: wrap; gap: 8px; }
  .ops-rollout-control { flex-wrap: wrap; }

  /* 渠道卡：按钮换行、模型胶囊区可滚动，避免一屏被撑爆 */
  .channel-admin-card { padding: 13px 14px !important; }
  .channel-admin-card-head { gap: 10px; }
  .channel-admin-meta { gap: 10px 14px; font-size: 11.5px; }
  .channel-admin-models { max-height: 128px; overflow-y: auto; padding-right: 2px; }
  .channel-admin-actions { gap: 6px; }
  .channel-admin-actions .button { flex: 1 1 46%; height: 34px; padding: 0 10px !important; font-size: 12px !important; }
  .channel-admin-editor { padding: 14px !important; border-radius: 14px; }
  .channel-admin-editor-row { flex-direction: column; align-items: stretch; }
}

/* ════════════ ① 角色详情弹窗：内容被裁（展示不全）═══════════════════════════
 * 之前 .modal 是 flex column + overflow:hidden，但 .modal-body 没有 flex 收缩，
 * 内容一长就顶出 max-height 被父级裁掉 → 必须让 body 成为唯一滚动区。
 */
#character-modal .modal { display: flex; flex-direction: column; }
#character-modal .modal-head { flex: 0 0 auto; }
#character-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#character-modal .modal-actions { flex: 0 0 auto; }
@media (max-width: 860px) {
  #character-modal .modal { max-height: 92vh; }
  #character-modal .modal-body { padding-bottom: 4px !important; }
}

/* ════════════ ② 页面级"稿图质感"：宋体大标题 + 朱砂印 + 角落淡景 ═════════════
 * 目标页：聊天记录（recent）· 我的收藏（favorites）· 常用语（common-phrases）
 */
body.ink-mode .recent-workspace,
body.ink-mode .my-favorites-workspace,
body.ink-mode .my-common-phrases-workspace,
body.ink-mode .channel-status-workspace {
  position: relative;
}
/* 顶部右侧淡山 + 左下淡竹（不遮内容、不吃点击） */
body.ink-mode .recent-workspace::before,
body.ink-mode .my-favorites-workspace::before,
body.ink-mode .my-common-phrases-workspace::before {
  content: ""; position: absolute; right: -30px; top: -30px; width: 300px; height: 170px;
  pointer-events: none; z-index: 0; opacity: .22;
  background: url("/img/ink/mountains.webp") top right / contain no-repeat;
}
body.ink-mode .recent-workspace::after,
body.ink-mode .my-favorites-workspace::after,
body.ink-mode .my-common-phrases-workspace::after {
  content: ""; position: absolute; left: -20px; bottom: 0; width: 180px; height: 220px;
  pointer-events: none; z-index: 0; opacity: .16;
  background: url("/img/ink/bamboo.webp") bottom left / contain no-repeat;
}
body.ink-mode .recent-workspace > *,
body.ink-mode .my-favorites-workspace > *,
body.ink-mode .my-common-phrases-workspace > * { position: relative; z-index: 1; }

/* 标题：宋体 + 朱砂小印 */
body.ink-mode .recent-workspace h1,
body.ink-mode .my-favorites-workspace h2,
body.ink-mode .my-common-phrases-workspace h2,
body.ink-mode .channel-status-workspace h1,
body.ink-mode #view h1 {
  font-family: var(--ink-serif); letter-spacing: .04em; color: #1d423d;
}
body.ink-mode .recent-workspace h1::after,
body.ink-mode .my-favorites-workspace h2::after,
body.ink-mode .my-common-phrases-workspace h2::after,
body.ink-mode .channel-status-workspace h1::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
/* 说明文字与 eyebrow 更接近稿：灰、字距松一点 */
body.ink-mode .recent-workspace .subtle,
body.ink-mode .my-favorites-workspace .subtle,
body.ink-mode .my-common-phrases-workspace .subtle { font-size: 12.5px; line-height: 1.75; color: #6d7e79; }

/* ── 聊天记录：更大标题、行距、头像 48 ── */
body.ink-mode .recent-workspace h1 { font-size: clamp(24px, 4.6vw, 34px); margin: 2px 0 6px; }
body.ink-mode .recent-workspace .eyebrow { color: #82938d; letter-spacing: .2em; font-size: 10.5px; }
body.ink-mode .recent-item { padding: 14px 16px; border-radius: 16px; gap: 14px; }
body.ink-mode .recent-avatar { width: 48px; height: 48px; border-radius: 14px; }
body.ink-mode .recent-item-copy strong { font-size: 14.5px; font-family: var(--ink-serif); letter-spacing: .01em; }
body.ink-mode .recent-item-copy small { font-size: 12.5px; color: #7b8b86; }
body.ink-mode .recent-item-arrow { color: #b9c6c1; }

/* ── 我的收藏：标题字号 + 卡片质感（金标、胶囊标签、日期） ── */
body.ink-mode .my-favorites-header h2 { font-size: clamp(22px, 4.4vw, 30px); margin: 2px 0 6px; }
body.ink-mode .my-favorites-grid { gap: 14px; }
body.ink-mode .my-favorites-grid .character-card { border-radius: 18px; }
body.ink-mode .my-favorites-grid .card-art { object-position: 50% 18%; }
body.ink-mode .my-favorites-grid .card-tags span { background: #edf4ef; color: #35605a; font-size: 10.5px; }
body.ink-mode .my-favorites-grid .card-updated { color: #93a49f; font-size: 11px; }

/* ── 常用语：卡面更接近稿（内边距、输入行、右下保存） ── */
body.ink-mode .my-common-phrases-workspace h2 { font-size: clamp(22px, 4.4vw, 30px); margin: 2px 0 6px; }
body.ink-mode .common-phrases-editor-grid { padding: 20px 20px 22px; border-radius: 18px; }
body.ink-mode .common-phrase-editor-field textarea { min-height: 46px; font-size: 13px; }
body.ink-mode .cpf-index { background: #e9f1ec; color: #35605a; }
body.ink-mode .common-phrases-editor-grid .edit-actions { justify-content: flex-end; }
@media (max-width: 860px) {
  body.ink-mode .common-phrases-editor-grid .edit-actions .button { flex: 0 0 auto; min-width: 120px; height: 44px; }
}

/* 修正选择器：最近聊天是 #recent-workspace（.page-heading），常用语有两个入口 */
body.ink-mode #recent-workspace { position: relative; }
body.ink-mode #recent-workspace::before {
  content: ""; position: absolute; right: -30px; top: -30px; width: 300px; height: 170px;
  pointer-events: none; z-index: 0; opacity: .22;
  background: url("/img/ink/mountains.webp") top right / contain no-repeat;
}
body.ink-mode #recent-workspace::after {
  content: ""; position: absolute; left: -20px; bottom: 0; width: 180px; height: 220px;
  pointer-events: none; z-index: 0; opacity: .14;
  background: url("/img/ink/bamboo.webp") bottom left / contain no-repeat;
}
body.ink-mode #recent-workspace > * { position: relative; z-index: 1; }
body.ink-mode #recent-workspace h1 {
  font-family: var(--ink-serif); letter-spacing: .04em; color: #1d423d;
  font-size: clamp(24px, 4.6vw, 34px); margin: 2px 0 6px;
}
body.ink-mode #recent-workspace h1::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
body.ink-mode #recent-workspace .eyebrow { color: #82938d; letter-spacing: .2em; font-size: 10.5px; }
body.ink-mode #recent-workspace .workspace-search span { font-size: 12px; color: #7b8b86; }
body.ink-mode #recent-workspace .recent-item { padding: 14px 16px; border-radius: 16px; gap: 14px; }
body.ink-mode #recent-workspace .recent-avatar { width: 48px; height: 48px; border-radius: 14px; }
body.ink-mode #recent-workspace .recent-item-copy strong { font-size: 14.5px; font-family: var(--ink-serif); }
body.ink-mode #recent-workspace .recent-item-copy small { font-size: 12.5px; color: #7b8b86; }
body.ink-mode #recent-workspace .recent-item-arrow { color: #b9c6c1; }

/* 常用语（设置分支）：标题宋体 + 印章 + 角落景 */
body.ink-mode #settings-workspace:has(.settings-phrases-panel) { position: relative; }
body.ink-mode #settings-workspace:has(.settings-phrases-panel)::before {
  content: ""; position: absolute; right: -24px; top: -26px; width: 280px; height: 160px;
  pointer-events: none; z-index: 0; opacity: .2;
  background: url("/img/ink/mountains.webp") top right / contain no-repeat;
}
body.ink-mode #settings-workspace:has(.settings-phrases-panel) > * { position: relative; z-index: 1; }
body.ink-mode #settings-workspace:has(.settings-phrases-panel) h1 {
  font-family: var(--ink-serif); font-size: clamp(24px, 4.4vw, 32px); color: #1d423d;
}
body.ink-mode #settings-workspace:has(.settings-phrases-panel) h1::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}

/* 我的收藏 / 账号常用语：标题印章 */
body.ink-mode #my-favorites-workspace h2::after,
body.ink-mode #my-common-phrases-workspace h2::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
body.ink-mode #my-favorites-workspace,
body.ink-mode #my-common-phrases-workspace { position: relative; }
body.ink-mode #my-favorites-workspace::before,
body.ink-mode #my-common-phrases-workspace::before {
  content: ""; position: absolute; right: -28px; top: -26px; width: 300px; height: 170px;
  pointer-events: none; z-index: 0; opacity: .22;
  background: url("/img/ink/mountains.webp") top right / contain no-repeat;
}
body.ink-mode #my-favorites-workspace > *,
body.ink-mode #my-common-phrases-workspace > * { position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* 最近聊天：右上「浏览角色」保持小胶囊，不要拉通栏 */
  body.ink-mode #recent-workspace .page-heading { display: block; }
  body.ink-mode #recent-workspace .workspace-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
  body.ink-mode #recent-workspace .workspace-actions .button {
    width: auto; flex: 0 0 auto; height: 34px; padding: 0 16px; font-size: 12.5px; border-radius: 999px;
  }
  /* 收藏/常用语头部按钮同样收成小胶囊 */
  body.ink-mode #my-favorites-workspace .my-favorites-header,
  body.ink-mode #my-common-phrases-workspace .my-favorites-header { display: block; }
  body.ink-mode #my-favorites-workspace .my-favorites-header > .button,
  body.ink-mode #my-common-phrases-workspace .my-favorites-header > .button {
    margin-top: 8px; height: 34px; padding: 0 16px; border-radius: 999px;
  }
}

/* 收口：① 头部按钮不再被拉伸 ② 角落装饰改用 section 背景图（更稳，不被内部白卡遮挡） */
@media (max-width: 860px) {
  body.ink-mode #recent-workspace .workspace-actions .button,
  body.ink-mode #my-favorites-workspace .my-favorites-header .button,
  body.ink-mode #my-common-phrases-workspace .my-favorites-header .button {
    width: auto !important; flex: 0 0 auto !important; align-self: flex-end;
    height: 34px; padding: 0 16px; border-radius: 999px;
  }
}
body.ink-mode #my-favorites-workspace,
body.ink-mode #my-common-phrases-workspace,
body.ink-mode #recent-workspace {
  background-image: url("/img/ink/mountains.webp");
  background-repeat: no-repeat;
  background-position: right -24px top -18px;
  background-size: 300px auto;
}
body.ink-mode #my-favorites-workspace::before,
body.ink-mode #my-common-phrases-workspace::before,
body.ink-mode #recent-workspace::before { content: none; }

/* 独立收藏页（#favorites，与账号内嵌版并存）同样处理 */
body.ink-mode #favorites-workspace {
  position: relative;
  background-image: url("/img/ink/mountains.webp");
  background-repeat: no-repeat;
  background-position: right -24px top -18px;
  background-size: 300px auto;
}
body.ink-mode #favorites-workspace h1 {
  font-family: var(--ink-serif); font-size: clamp(24px, 4.6vw, 32px); color: #1d423d; letter-spacing: .04em;
}
body.ink-mode #favorites-workspace h1::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
@media (max-width: 860px) {
  body.ink-mode #favorites-workspace .page-heading { display: block; }
  body.ink-mode #favorites-workspace .page-heading .button {
    width: auto !important; margin-top: 8px; height: 34px; padding: 0 16px; border-radius: 999px;
  }
}

/* 角落淡景再压一档，保证标题/说明文字不被画面干扰 */
body.ink-mode #my-favorites-workspace,
body.ink-mode #favorites-workspace,
body.ink-mode #my-common-phrases-workspace,
body.ink-mode #recent-workspace {
  background-image:
    linear-gradient(200deg, rgba(244, 247, 245, .55) 0%, rgba(244, 247, 245, .96) 46%, rgba(244, 247, 245, 1) 62%),
    url("/img/ink/mountains.webp");
  background-size: 100% 100%, 280px auto;
  background-position: center, right -16px top -10px;
  background-repeat: no-repeat, no-repeat;
}

/* ════════════ 人设页：手机特化（2026-10-21）════════════════════════════════ */
body.ink-mode #settings-workspace:has(#settings-persona-workspace) {
  position: relative;
  background-image:
    linear-gradient(200deg, rgba(244, 247, 245, .55) 0%, rgba(244, 247, 245, .96) 48%, rgba(244, 247, 245, 1) 64%),
    url("/img/ink/mountains.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 280px auto;
  background-position: center, right -16px top -10px;
}
body.ink-mode #settings-persona-workspace {
  font-family: var(--ink-serif); color: #1d423d; letter-spacing: .04em;
}
body.ink-mode #settings-persona-workspace::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
/* 头部按钮：不再挤成两行 */
body.ink-mode .settings-branch-header .settings-branch-actions { gap: 8px; }
body.ink-mode .settings-branch-header .settings-branch-actions .button { white-space: nowrap; }

@media (max-width: 860px) {
  body.ink-mode .settings-branch-header { display: grid; gap: 10px; }
  body.ink-mode .settings-branch-header .settings-branch-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  body.ink-mode .settings-branch-header .settings-branch-actions .button {
    width: 100%; height: 42px; border-radius: 999px; padding: 0 10px; font-size: 13px;
  }
  /* 人设行：头像 + 文案，操作按钮落到下一行右侧 */
  body.ink-mode .settings-persona-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px;
    padding: 14px; border: 1px solid var(--ink-line); border-radius: 14px; background: #fff;
  }
  body.ink-mode .settings-persona-row + .settings-persona-row { margin-top: 10px; }
  body.ink-mode .settings-persona-avatar {
    width: 44px; height: 44px; border-radius: 12px; font-size: 14px;
    background: var(--ink-soft); color: var(--ink-green);
  }
  body.ink-mode .settings-persona-copy strong { font-size: 14px; }
  body.ink-mode .settings-persona-copy p {
    font-size: 12px; line-height: 1.6; color: var(--ink-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.ink-mode .settings-persona-badges {
    grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  }
  body.ink-mode .settings-persona-badges .button { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
  /* 编辑器：输入更大、按钮整宽 */
  body.ink-mode .settings-persona-editor textarea { min-height: 150px; font-size: 13px; line-height: 1.7; }
  body.ink-mode .settings-persona-editor input { height: 44px; border-radius: 12px; }
  body.ink-mode .settings-persona-editor .edit-actions { display: grid; gap: 8px; }
  body.ink-mode .settings-persona-editor .edit-actions .button { width: 100%; height: 44px; border-radius: 999px; }
  body.ink-mode .settings-panel { border-radius: 16px; }
}

/* 人设表单：姓 / 名 两列并排，组在最前 */
.persona-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.persona-name-row .edit-field { margin: 0; }
body.ink-mode .settings-persona-group {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  background: var(--ink-soft, #e4eeea); color: #35605a; font-size: 11px; font-weight: 500;
}
@media (max-width: 860px) {
  .persona-name-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ════════════ 我的角色：手机端收口（2026-10-21）════════════════════════════ */
body.ink-mode .my-characters-view {
  position: relative;
  background-image:
    linear-gradient(200deg, rgba(244, 247, 245, .55) 0%, rgba(244, 247, 245, .96) 48%, rgba(244, 247, 245, 1) 64%),
    url("/img/ink/mountains.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 280px auto;
  background-position: center, right -16px top -10px;
}
body.ink-mode .my-characters-view h1 {
  font-family: var(--ink-serif); color: #1d423d; letter-spacing: .04em;
  font-size: clamp(24px, 4.6vw, 32px);
}
body.ink-mode .my-characters-view h1::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
/* 筛选行去掉难看的滚动条 */
body.ink-mode .hall-chips,
body.ink-mode .hall-zone-row { scrollbar-width: none; -ms-overflow-style: none; }
body.ink-mode .hall-chips::-webkit-scrollbar,
body.ink-mode .hall-zone-row::-webkit-scrollbar { display: none; height: 0; }

@media (max-width: 860px) {
  body.ink-mode .my-characters-view .settings-branch-header { display: grid; gap: 10px; }
  body.ink-mode .my-characters-view .settings-branch-header .button {
    width: auto !important; justify-self: end; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 12.5px;
  }
  body.ink-mode .my-characters-view .hall-actions .button { height: 44px; border-radius: 999px; }
  body.ink-mode .my-characters-view .hall-filter { padding: 12px; }
  body.ink-mode .my-characters-empty { padding: 32px 16px; }
  body.ink-mode .my-characters-empty-ico { width: 48px; height: 48px; }
}

/* 登录页「找回密码」弹层（#shadow_popup）也套水墨皮肤 */
body.login #shadow_popup {
  border: 1px solid #dfe8e4; border-radius: 18px; background: #fff;
  box-shadow: 0 18px 44px rgba(32, 88, 80, .12);
}
body.login #shadow_popup h1,
body.login #shadow_popup h2,
body.login #shadow_popup h3 { font-family: "Songti SC", "Noto Serif SC", serif; color: #1d423d; }
body.login #shadow_popup .menu_button,
body.login #shadow_popup button {
  border-radius: 999px; border: 1px solid #dfe8e4; background: #fff; color: #3f5a55;
}
body.login #shadow_popup .menu_button:hover { border-color: #c9d8d2; background: #f6faf7; }

/* ══════════════════════════════════════════════════════════════════════════
   聊天页 UI 视窗（暖纸灰 C 配色，先不做背景装饰）
   中间聊天保持深色不动；左右两栏是暖白卡片。
   ══════════════════════════════════════════════════════════════════════════ */

.chat-rail {
  position: relative; z-index: 4; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px; overflow-y: auto; min-height: 0;
  background: #EBE6DB; color: #3B3A33;
}
.chat-rail-left { grid-column: 1; grid-row: 1; border-right: 1px solid #DED6C6; }
.chat-rail-right { grid-column: 3; grid-row: 1; border-left: 1px solid #DED6C6; }
.chat-rail-card {
  background: #FBF8F1; border: 1px solid #DED6C6; border-radius: 16px; padding: 12px;
  box-shadow: 0 6px 18px rgba(59, 58, 51, .06);
}
.chat-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chat-rail-head strong { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 14px; color: #2F3A33; letter-spacing: .02em; }
.chat-rail-more { font-size: 11px; color: #8B8577; cursor: pointer; }
.chat-rail-badge { font-size: 10px; color: #205850; background: #E4EFE9; border-radius: 999px; padding: 1px 7px; }
.chat-rail-skeleton { height: 44px; border-radius: 10px; background: linear-gradient(90deg, #F1EDE2, #F7F4EC); margin-bottom: 8px; }
.chat-rail-phrases { display: grid; gap: 6px; }
.chat-rail-chip {
  text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid #E4DCCB; background: #fff; color: #45443B; font-size: 12px;
}
.chat-rail-chip:hover { border-color: #C9BFA9; background: #FDFBF5; }
.chat-rail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid #EFE9DC;
}
.chat-rail-row:first-of-type { border-top: 0; }
.chat-rail-row.is-stack { display: grid; gap: 8px; }
.chat-rail-copy { display: grid; gap: 2px; min-width: 0; }
.chat-rail-copy span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #33322B; }
.chat-rail-copy span em { font-style: normal; margin-left: auto; color: #205850; font-size: 11.5px; }
.chat-rail-copy small { font-size: 10.5px; line-height: 1.5; color: #8B8577; }
.chat-rail-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid #DED6C6; background: #fff; color: #45443B; white-space: nowrap; }
.chat-rail-switch {
  flex: none; width: 34px; height: 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: #D8D2C4; position: relative; transition: background .16s ease;
}
.chat-rail-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
.chat-rail-switch.is-on { background: #205850; }
.chat-rail-switch.is-on i { transform: translateX(14px); }
.chat-rail-slider { width: 100%; accent-color: #205850; }
.chat-rail-actions { display: flex; gap: 6px; margin-top: 10px; }
.chat-rail-btn {
  flex: 1 1 0; height: 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid #DED6C6; background: #fff; color: #45443B; font-size: 11.5px;
}
.chat-rail-btn:hover { border-color: #C9BFA9; background: #FDFBF5; }
.chat-rail-arrow { color: #B3AA96; font-size: 15px; }
.chat-rail-foot { margin-top: 8px; font-size: 11px; color: #8B8577; text-align: right; cursor: pointer; }
@media (max-width: 1440px) {
    }
@media (max-width: 1100px) {
      }

/* 左栏会话行（接真实数据后） */
.chat-rail-session {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 9px; margin-bottom: 6px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: #3B3A33;
}
.chat-rail-session:hover { background: #F5F1E6; border-color: #E4DCCB; }
.chat-rail-session.is-active { background: #E9F1EC; border-color: #C9DCD1; }
.chat-rail-session-title { font-size: 12.5px; color: #2F3A33; }
.chat-rail-session-meta { display: flex; justify-content: space-between; gap: 8px; }
.chat-rail-session-meta span { font-size: 10.5px; color: #8B8577; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rail-session-meta em { font-style: normal; font-size: 10px; color: #A79F8D; flex: none; }
.chat-rail-empty { font-size: 11.5px; color: #8B8577; padding: 6px 2px; }

/* 左栏会话标题：统一单行省略 */
.chat-rail-session-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 左栏加宽（放世界设定 / 角色简介 / 人设），中间列收到约 1/3 */
@media (max-width: 1440px) {
    }
/* 左栏新增块 */
/* 2026-10-25：序章/简介是分段的（<p> 已转成换行），窄栏里必须保留换行，否则整段糊成一团 */
.chat-rail-desc { margin: 0; font-size: 11.5px; line-height: 1.6; color: #6F6A5D; white-space: pre-line; }
.chat-rail-persona-name { display: block; font-size: 12.5px; color: #2F3A33; margin-bottom: 2px; }
.chat-rail-persona { display: grid; gap: 2px; }
.chat-rail-worlds { display: grid; gap: 6px; }
.chat-rail-world { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #45443B; }
.chat-rail-world span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 中间列压到 1/3（左右各约 1/3） */

/* 中间列内容自适应（窄列时不溢出） */

/* 窄中间列：输入条内部不溢出（模型胶囊可截断） */

/* 输入条：强制约束在中间列宽度内（原布局给了固定宽度/负外边距） */

/* composer 原本是 fixed + left:50% + translateX，网格化后要拉回普通流 */

/* ══════════════════════════════════════════════════════════════════════════
   聊天页两栏 = **浮层**（绝不挤压中间聊天场景）
   聊天场景保持原来的全屏构图：角色大图铺满 + 正文居中列 660px 不变；
   左右两栏以半透明面板浮在场景上方，贴边、留白、可滚动。
   ══════════════════════════════════════════════════════════════════════════ */
body.chat-rail-on .chat-rail {
  position: fixed; top: 84px; bottom: 128px; width: 312px;
  z-index: 6; padding: 0; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, rgba(23, 40, 36, .82), rgba(18, 32, 29, .86));
  border: 1px solid rgba(127, 208, 196, .16); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38); backdrop-filter: blur(14px) saturate(120%);
  scrollbar-width: thin;
}
body.chat-rail-on .chat-rail-left { left: 16px; }
body.chat-rail-on .chat-rail-right { right: 16px; }
body.chat-rail-on .chat-rail::-webkit-scrollbar { width: 6px; }
body.chat-rail-on .chat-rail::-webkit-scrollbar-thumb { background: rgba(127, 208, 196, .22); border-radius: 999px; }

/* 浮层内的卡片：深色玻璃 + 宣纸白字，与中间场景同色系 */
body.chat-rail-on .chat-rail-card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(127, 208, 196, .12);
  border-radius: 14px; padding: 12px; box-shadow: none;
}
body.chat-rail-on .chat-rail-card + .chat-rail-card { margin-top: 10px; }
body.chat-rail-on .chat-rail-head strong { color: #E7EFEA; font-family: var(--ink-serif); }
body.chat-rail-on .chat-rail-more { color: #8FB3A9; }
body.chat-rail-on .chat-rail-copy span { color: #DCE7E1; }
body.chat-rail-on .chat-rail-copy small { color: #93A9A2; }
body.chat-rail-on .chat-rail-desc { color: #A9BDB6; }
body.chat-rail-on .chat-rail-persona-name { color: #E7EFEA; }
body.chat-rail-on .chat-rail-world { color: #DCE7E1; }
body.chat-rail-on .chat-rail-pill { background: rgba(255,255,255,.06); border-color: rgba(127,208,196,.2); color: #DCE7E1; }
body.chat-rail-on .chat-rail-btn { background: rgba(255,255,255,.06); border-color: rgba(127,208,196,.2); color: #DCE7E1; }
body.chat-rail-on .chat-rail-switch { background: rgba(255,255,255,.16); }
body.chat-rail-on .chat-rail-switch.is-on { background: #2E7A6B; }
body.chat-rail-on .chat-rail-foot { color: #8FB3A9; }
body.chat-rail-on .chat-rail-empty { color: #93A9A2; }
body.chat-rail-on .chat-rail-row { border-top-color: rgba(127, 208, 196, .12); }

/* 窄屏直接收起（不影响手机聊天） */
@media (max-width: 1360px) {
  body.chat-rail-on .chat-rail { width: 280px; top: 78px; bottom: 120px; }
  body.chat-rail-on .chat-rail-left { left: 12px; }
  body.chat-rail-on .chat-rail-right { right: 12px; }
}
@media (max-width: 1180px) {
  body.chat-rail-on .chat-rail { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   回归空间约定：中间 1/3 是聊天场景，两侧各 1/3 是信息栏。
   关键：聊天内部**按 1/3 宽度重新适配**（不是把桌面宽度硬塞进来）：
   场景图层与聊天层叠在同一个网格单元里，背景图按列宽裁切而非压缩；
   消息列、输入条宽度 100%，模型胶囊在窄列下换行，标题省略。
   ══════════════════════════════════════════════════════════════════════════ */
body.chat-rail-on .chat-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 33.33%) minmax(0, 1fr);
  grid-template-rows: 100%;
  background: #14211E;
}
/* 场景层与聊天层叠在中间列 */
body.chat-rail-on .chat-stage,
body.chat-rail-on .chat-surface {
  grid-column: 2; grid-row: 1; height: 100%; min-height: 0;
}
body.chat-rail-on .chat-stage { position: relative; inset: auto; z-index: 0; overflow: hidden; }
body.chat-rail-on .chat-surface { position: relative; z-index: 1; }

/* 背景图：按列宽 cover 裁切，不变形 */
body.chat-rail-on .chat-scene-art { position: absolute; inset: 0; }
body.chat-rail-on .chat-scene-art-image {
  width: 100% !important; max-width: none; left: 0 !important; right: auto; transform: none !important;
  object-fit: cover; object-position: 50% 16%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 22%, #000 100%);
}
body.chat-rail-on .chat-scene-art::before { inset: 0; background-position: 50% 16%; }

/* 消息列与输入条：100% 宽度，不溢出 */
body.chat-rail-on .message-list { width: 100% !important; max-width: none; padding-left: 16px; padding-right: 16px; }
body.chat-rail-on .message-bubble { font-size: 14.5px; line-height: 26px; }
body.chat-rail-on .composer { position: static !important; width: 100% !important; max-width: 100% !important; padding: 8px 12px 12px !important; }
body.chat-rail-on .composer-inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
body.chat-rail-on .composer-model-slot { min-width: 0; }
body.chat-rail-on .model-switcher-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chat-rail-on .chat-head { padding-left: 14px; padding-right: 14px; }
body.chat-rail-on .chat-title h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body.chat-rail-on .chat-title .subtle { display: none; }
body.chat-rail-on .chat-head-actions .button { height: 32px; padding: 0 10px; font-size: 12px; }

/* 网格模式下两栏就是普通列（回到 C 暖纸灰配色），不再浮层 */
body.chat-rail-on .chat-rail {
  position: static; width: auto; top: auto; bottom: auto; height: 100%;
  border-radius: 0; box-shadow: none; backdrop-filter: none;
  background: #EBE6DB; border: 0; border-right: 1px solid #DED6C6;
  padding: 14px 12px; overflow-y: auto;
}
body.chat-rail-on .chat-rail-right { border-right: 0; border-left: 1px solid #DED6C6; }
body.chat-rail-on .chat-rail-left { grid-column: 1; grid-row: 1; }
body.chat-rail-on .chat-rail-right { grid-column: 3; grid-row: 1; }
body.chat-rail-on .chat-rail-card {
  background: #FBF8F1; border: 1px solid #DED6C6; border-radius: 16px; padding: 12px;
  box-shadow: 0 6px 18px rgba(59, 58, 51, .06);
}
body.chat-rail-on .chat-rail-head strong { color: #2F3A33; }
body.chat-rail-on .chat-rail-more { color: #8B8577; }
body.chat-rail-on .chat-rail-copy span { color: #33322B; }
body.chat-rail-on .chat-rail-copy small { color: #8B8577; }
body.chat-rail-on .chat-rail-desc { color: #6F6A5D; }
body.chat-rail-on .chat-rail-persona-name { color: #2F3A33; }
body.chat-rail-on .chat-rail-world { color: #45443B; }
body.chat-rail-on .chat-rail-pill, body.chat-rail-on .chat-rail-btn {
  background: #fff; border-color: #DED6C6; color: #45443B;
}
body.chat-rail-on .chat-rail-switch { background: #D8D2C4; }
body.chat-rail-on .chat-rail-switch.is-on { background: #205850; }
body.chat-rail-on .chat-rail-row { border-top-color: #EFE9DC; }
body.chat-rail-on .chat-rail-foot, body.chat-rail-on .chat-rail-empty { color: #8B8577; }
@media (max-width: 1180px) {
  body.chat-rail-on .chat-view { grid-template-columns: minmax(0, 1fr); }
  body.chat-rail-on .chat-stage, body.chat-rail-on .chat-surface { grid-column: 1; }
  body.chat-rail-on .chat-rail { display: none; }
}

/* composer 在网格里必须清掉 left:50% + translateX(-50%)，否则整体左移出列 */
body.chat-rail-on .composer {
  left: auto !important; right: auto !important; transform: none !important;
  position: static !important; width: 100% !important; max-width: 100% !important;
}

/* 定边界：中间列 = clamp(420px, 33.33%, 640px)
 * 实测（1400 视口）：380–660px 区间输入条均不溢出、模型胶囊不截断；
 * 取 420 作为下限（约 24–26 字/行，可读），33.33% 作为常态（1400 时 = 466px）。 */
body.chat-rail-on .chat-view { grid-template-columns: minmax(0, 1fr) clamp(420px, 33.33%, 640px) minmax(0, 1fr); }

/* 以"原版实测"为底线：中间聊天列 = 660px（1400 视口下占 47%，与改版前完全一致）
 * 大屏再放宽到最多 760px；两侧分享剩余空间（1400 时各 370）。 */
body.chat-rail-on .chat-view { grid-template-columns: minmax(0, 1fr) clamp(660px, 33.33%, 760px) minmax(0, 1fr); }
body.chat-rail-on .message-list { width: 100% !important; max-width: 660px; }
body.chat-rail-on .chat-scene-art-image { width: 100% !important; }

/* 按产品截图实测定比例：中间 = 40%（1912 视口下 765px，与其红框 763px 一致） */
body.chat-rail-on .chat-view { grid-template-columns: minmax(0, 1fr) clamp(700px, 40%, 900px) minmax(0, 1fr); }
body.chat-rail-on .message-list { max-width: none; }

/* 修复两处回归（两栏模式下也必须保持原版观感）：
   ① composer 仍浮在列底部（absolute），不能进普通流 —— 否则遮罩消失、消息区多出空白；
   ② 消息列宽度/竖向灰渐变保持原版（min(660px,100%) + linear-gradient 180deg）。 */
body.chat-rail-on .chat-surface { position: relative; }
body.chat-rail-on .composer {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: var(--keyboard-offset, 0px) !important;
  transform: none !important; width: auto !important; max-width: none !important;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom)) !important;
}
body.chat-rail-on .composer-inner {
  width: min(660px, 100%) !important; max-width: 660px !important; margin: 0 auto !important;
}
body.chat-rail-on .message-list {
  width: min(660px, 100%) !important; max-width: 660px !important;
  background-image: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, .46) 9%, rgba(11, 11, 11, .64) 44%, rgba(11, 11, 11, .82) 100%) !important;
  background-repeat: no-repeat !important;
}
body.chat-rail-on .message-list::before { background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, .42)) !important; }

/* 修复：角色图两侧的「横向渐变遮罩」被我改成了竖向——这才是"另一层渐变遮罩"消失的原因。
 * 原版：mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
 * → 图左右边缘淡出。两栏模式下必须保留同一条（图片仍是 cover 裁切，不变形）。 */
body.chat-rail-on .chat-scene-art-image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
}

/* 让场景层铺满整屏（延伸到两栏底下），聊天内容仍限定在中间列。
   这样角色图的左右淡出 = 真正跨屏过渡，而不是在列边界处硬切。 */
body.chat-rail-on .chat-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(700px, 40%, 900px) minmax(0, 1fr);
  grid-template-rows: 100%;
  background: #171717;
}
body.chat-rail-on .chat-stage { grid-column: 1 / -1; grid-row: 1; position: relative; inset: auto; z-index: 0; }
body.chat-rail-on .chat-surface { grid-column: 2; grid-row: 1; z-index: 1; }
/* 角色图恢复原版尺寸与横向淡出（基于整屏宽度计算） */
body.chat-rail-on .chat-scene-art-image {
  width: min(760px, 100%) !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
}
body.chat-rail-on .chat-scene-art::before { inset: -26px; background-position: top center; }

/* 两栏：列背景透明（露出场景），卡片用深色玻璃，过渡不被切断 */
body.chat-rail-on .chat-rail {
  grid-row: 1; z-index: 2; background: transparent; border: 0; box-shadow: none;
  padding: 14px 12px; overflow-y: auto;
}
body.chat-rail-on .chat-rail-left { grid-column: 1; }
body.chat-rail-on .chat-rail-right { grid-column: 3; }
body.chat-rail-on .chat-rail-card {
  background: rgba(18, 32, 29, .78); border: 1px solid rgba(127, 208, 196, .16);
  border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(12px);
}
body.chat-rail-on .chat-rail-head strong { color: #E7EFEA; }
body.chat-rail-on .chat-rail-copy span { color: #DCE7E1; }
body.chat-rail-on .chat-rail-copy small, body.chat-rail-on .chat-rail-desc,
body.chat-rail-on .chat-rail-more, body.chat-rail-on .chat-rail-foot, body.chat-rail-on .chat-rail-empty { color: #9DB3AC; }
body.chat-rail-on .chat-rail-persona-name, body.chat-rail-on .chat-rail-world { color: #DCE7E1; }
body.chat-rail-on .chat-rail-pill, body.chat-rail-on .chat-rail-btn {
  background: rgba(255,255,255,.07); border-color: rgba(127,208,196,.22); color: #DCE7E1;
}
body.chat-rail-on .chat-rail-switch { background: rgba(255,255,255,.18); }
body.chat-rail-on .chat-rail-switch.is-on { background: #2E7A6B; }
body.chat-rail-on .chat-rail-row { border-top-color: rgba(127,208,196,.13); }

/* 两侧纸底背景恢复（C 暖纸灰），靠中间的内侧边用渐变融入场景（过渡仍在，但不再是硬边） */
body.chat-rail-on .chat-rail { position: relative; background: transparent; }
body.chat-rail-on .chat-rail::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: #EBE6DB; border: 0;
}
body.chat-rail-on .chat-rail-left::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
}
body.chat-rail-on .chat-rail-right::before {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
}
body.chat-rail-on .chat-rail > * { position: relative; z-index: 1; }
/* 卡片回到纸白（C 配色） */
body.chat-rail-on .chat-rail-card {
  background: #FBF8F1; border: 1px solid #DED6C6; box-shadow: 0 6px 18px rgba(59,58,51,.08); backdrop-filter: none;
}
body.chat-rail-on .chat-rail-head strong { color: #2F3A33; }
body.chat-rail-on .chat-rail-copy span { color: #33322B; }
body.chat-rail-on .chat-rail-copy small, body.chat-rail-on .chat-rail-desc,
body.chat-rail-on .chat-rail-more, body.chat-rail-on .chat-rail-foot,
body.chat-rail-on .chat-rail-empty { color: #8B8577; }
body.chat-rail-on .chat-rail-persona-name, body.chat-rail-on .chat-rail-world { color: #3B3A33; }
body.chat-rail-on .chat-rail-pill, body.chat-rail-on .chat-rail-btn {
  background: #fff; border-color: #DED6C6; color: #45443B;
}
body.chat-rail-on .chat-rail-switch { background: #D8D2C4; }
body.chat-rail-on .chat-rail-switch.is-on { background: #205850; }
body.chat-rail-on .chat-rail-row { border-top-color: #EFE9DC; }

/* 定稿 B：两侧纸底板实心覆盖 → 只在最靠中间的一小段做渐变融入（避免"像没有背景"） */
body.chat-rail-on .chat-rail-left::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,.5) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,.5) 96%, transparent 100%);
}
body.chat-rail-on .chat-rail-right::before {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 88%, rgba(0,0,0,.5) 96%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 88%, rgba(0,0,0,.5) 96%, transparent 100%);
}
/* 纸底上给一点暖色纵向渐变，避免一大块死白 */
body.chat-rail-on .chat-rail::before {
  background: linear-gradient(180deg, #F2EDE2 0%, #EBE6DB 42%, #E6E0D2 100%);
}

/* 改善 ①：卡片不要压到过渡带（内侧留 56px 空白，专门给渐变）
   改善 ②：过渡用多段缓动，跨度从 12% 拉到 26%，避免"一道直线" */
body.chat-rail-on .chat-rail { padding: 14px 14px; }
body.chat-rail-on .chat-rail-left { padding-right: 56px; }
body.chat-rail-on .chat-rail-right { padding-left: 56px; }
body.chat-rail-on .chat-rail-left::before {
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%, #000 72%, rgba(0,0,0,.94) 78%, rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.55) 89%, rgba(0,0,0,.3) 94%, rgba(0,0,0,.1) 97%, transparent 100%);
  mask-image: linear-gradient(90deg,
    #000 0%, #000 72%, rgba(0,0,0,.94) 78%, rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.55) 89%, rgba(0,0,0,.3) 94%, rgba(0,0,0,.1) 97%, transparent 100%);
}
body.chat-rail-on .chat-rail-right::before {
  -webkit-mask-image: linear-gradient(270deg,
    #000 0%, #000 72%, rgba(0,0,0,.94) 78%, rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.55) 89%, rgba(0,0,0,.3) 94%, rgba(0,0,0,.1) 97%, transparent 100%);
  mask-image: linear-gradient(270deg,
    #000 0%, #000 72%, rgba(0,0,0,.94) 78%, rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.55) 89%, rgba(0,0,0,.3) 94%, rgba(0,0,0,.1) 97%, transparent 100%);
}

/* 右/左栏卡片：改为"卡内展开"，不再放假跳转链接 */
.chat-rail-toggle {
  border: 1px solid #DED6C6; background: #fff; color: #6B6456; cursor: pointer;
  height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px;
}
.chat-rail-toggle:hover { border-color: #C9BFA9; background: #FDFBF5; }
.chat-rail-toggle[aria-expanded="true"] { background: #205850; border-color: #205850; color: #fff; }
.chat-rail-desc.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-rail-more-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-more-panel[hidden] { display: none; }

/* 展开面板里的条目详情 */
.chat-rail-world-detail + .chat-rail-world-detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-world-detail strong { display: block; font-size: 11.5px; color: #33322B; margin-bottom: 2px; }
.chat-rail-world-detail p { margin: 0; font-size: 11px; line-height: 1.6; color: #6F6A5D; }
#chat-rail-character-desc[hidden] { display: none; }

/* 世界设定卡：人物简介作为第一条 */
.chat-rail-world.is-first { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-world-name { font-size: 12px; color: #33322B; }
#chat-rail-worlds { margin-top: 8px; }
/* 人设：切换列表 + 修改表单 */
.chat-rail-head-actions { display: flex; gap: 6px; }
.chat-rail-persona-list { display: grid; gap: 6px; }
.chat-rail-persona-item {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: 10px; border: 1px solid #E4DCCB; background: #fff; color: #3B3A33; font-size: 12px;
}
.chat-rail-persona-item em { font-style: normal; font-size: 10.5px; color: #8B8577; }
.chat-rail-persona-item:hover { border-color: #C9BFA9; }
.chat-rail-persona-item.is-active { border-color: #205850; background: #EAF1ED; }
.chat-rail-persona-form { display: grid; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-persona-form label { display: grid; gap: 4px; font-size: 11px; color: #6F6A5D; }
.chat-rail-persona-form input,
.chat-rail-persona-form textarea {
  width: 100%; border: 1px solid #DED6C6; border-radius: 10px; padding: 7px 9px;
  background: #fff; color: #3B3A33; font-size: 12px; line-height: 1.55;
}
.chat-rail-persona-form textarea { resize: vertical; }
.chat-rail-btn.is-primary { background: #205850; border-color: #205850; color: #fff; }

/* 人设卡：组标签 + 名字 + 内容；切换列表按组分组；修改表单按需出现 */
.chat-rail-persona-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chat-rail-group {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: #EAF1ED; color: #205850; border: 1px solid #CCE0D6; flex: none;
}
.chat-rail-persona-name { font-size: 13px; color: #2F3A33; }
.chat-rail-persona-content { margin: 0; font-size: 11.5px; line-height: 1.65; color: #5C5850; }
.chat-rail-persona-content.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-rail-persona-meta { margin-top: 6px; font-size: 10.5px; color: #8B8577; }
.chat-rail-persona-group + .chat-rail-persona-group { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-persona-group-name { font-size: 10.5px; color: #8B8577; margin-bottom: 4px; }
.chat-rail-persona-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 6px 9px; margin-bottom: 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid #E4DCCB; background: #fff; color: #3B3A33; font-size: 12px; text-align: left;
}
.chat-rail-persona-item em { font-style: normal; font-size: 10px; color: #205850; }
.chat-rail-persona-item:hover { border-color: #C9BFA9; }
.chat-rail-persona-item.is-active { background: #EAF1ED; border-color: #205850; }
.chat-rail-persona-form { display: grid; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E4DCCB; }
.chat-rail-persona-form label { display: grid; gap: 4px; font-size: 11px; color: #6F6A5D; }
.chat-rail-persona-form input, .chat-rail-persona-form textarea {
  width: 100%; border: 1px solid #DED6C6; border-radius: 10px; padding: 7px 9px;
  background: #fff; color: #3B3A33; font-size: 12px; line-height: 1.55;
}
.chat-rail-btn.is-primary { background: #205850; border-color: #205850; color: #fff; }

/* hidden 必须真的隐藏（display:grid 会压过 [hidden]） */
.chat-rail-persona-form[hidden],
.chat-rail-more-panel[hidden],
#chat-rail-persona-content[hidden],
#chat-rail-persona-switch[hidden] { display: none !important; }

/* 左/右栏内所有滚动容器统一细滚动条（含人设内容、世界条目、表单 textarea），
   干掉浏览器原生带上下箭头的滚动条 */
body.chat-rail-on .chat-rail,
body.chat-rail-on .chat-rail * {
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: #C6BCA6 transparent;
}
body.chat-rail-on .chat-rail::-webkit-scrollbar,
body.chat-rail-on .chat-rail *::-webkit-scrollbar {
  width: 6px; height: 6px;
}
body.chat-rail-on .chat-rail::-webkit-scrollbar-track,
body.chat-rail-on .chat-rail *::-webkit-scrollbar-track {
  background: transparent; border: 0;
}
body.chat-rail-on .chat-rail::-webkit-scrollbar-thumb,
body.chat-rail-on .chat-rail *::-webkit-scrollbar-thumb {
  background: #C6BCA6; border-radius: 999px; border: 0;
}
body.chat-rail-on .chat-rail::-webkit-scrollbar-thumb:hover,
body.chat-rail-on .chat-rail *::-webkit-scrollbar-thumb:hover { background: #B3A78D; }
body.chat-rail-on .chat-rail::-webkit-scrollbar-button,
body.chat-rail-on .chat-rail *::-webkit-scrollbar-button {
  display: none; width: 0; height: 0;
}
/* 人设内容/表单区域自带上限，滚动条才不会撑满整块 */
body.chat-rail-on #chat-rail-persona-more .chat-rail-persona-content { max-height: 220px; overflow-y: auto; }
body.chat-rail-on .chat-rail-persona-form textarea { max-height: 200px; }

/* 聊天体验：模型胶囊可点、滑杆占满一行 */
.chat-rail-pill.is-clickable { cursor: pointer; }
.chat-rail-pill.is-clickable:hover { border-color: #C9BFA9; background: #FDFBF5; }
.chat-rail-row.is-stack .chat-rail-slider { width: 100%; display: block; margin: 2px 0 0; }
.chat-rail-row.is-stack { grid-template-columns: minmax(0, 1fr); }

/* 记忆长度滑杆：把右栏内边距收紧一点，让滑杆更长（过渡带 56→40，卡片内边距 12→10） */
body.chat-rail-on .chat-rail-right { padding-left: 40px; }
body.chat-rail-on .chat-rail-right .chat-rail-card { padding: 10px 10px 11px; }
body.chat-rail-on .chat-rail-row.is-stack .chat-rail-slider { min-width: 0; width: 100%; height: 20px; }
body.chat-rail-on .chat-rail-row.is-stack .chat-rail-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; }

/* 存档面板：存快照按钮 */
.chat-archive-snapshot { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; }

/* 记忆长度滑杆：小圆点与轨道垂直居中 */
body.chat-rail-on .chat-rail-row.is-stack .chat-rail-slider { -webkit-appearance: none; appearance: none; background: transparent; }
body.chat-rail-on .chat-rail-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: #E7E0D1;
}
body.chat-rail-on .chat-rail-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: #205850; border: 2px solid #FBF8F1;
  margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body.chat-rail-on .chat-rail-slider::-moz-range-track { height: 4px; border-radius: 999px; background: #E7E0D1; }
body.chat-rail-on .chat-rail-slider::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #FBF8F1; border-radius: 50%; background: #205850; }

/* 剧情安插：故事时间 + 折叠块 */
.chat-rail-plot-time { display: flex; align-items: baseline; gap: 6px; padding: 2px 0 8px; border-bottom: 1px dashed #E4DCCB; margin-bottom: 8px; }
.chat-rail-plot-time span { font-size: 10.5px; color: #8B8577; }
.chat-rail-plot-time strong { font-size: 12px; color: #2F3A33; font-weight: 600; }
.chat-rail-fold + .chat-rail-fold { margin-top: 6px; }
.chat-rail-fold-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; cursor: pointer;
  border: 1px solid #E9E2D3; border-radius: 10px; background: #fff; text-align: left;
}
.chat-rail-fold-head:hover { border-color: #C9BFA9; }
.chat-rail-fold-title { font-size: 12px; color: #33322B; }
.chat-rail-fold-sub { margin-left: auto; font-size: 10.5px; color: #8B8577; }
.chat-rail-fold-caret { width: 6px; height: 6px; border-right: 1.5px solid #9C9483; border-bottom: 1.5px solid #9C9483; transform: rotate(45deg); transition: transform .16s ease; }
.chat-rail-fold.is-open .chat-rail-fold-caret { transform: rotate(-135deg); }
.chat-rail-fold-body { padding: 8px 8px 2px; }
.chat-rail-plot-row strong { display: block; font-size: 11.5px; color: #2F3A33; margin-bottom: 3px; }
.chat-rail-plot-row p { margin: 0 0 5px; font-size: 11px; line-height: 1.6; color: #6F6A5D; }
.chat-rail-plot-row ul, .chat-rail-plot-list { margin: 0; padding-left: 14px; }
.chat-rail-plot-row li, .chat-rail-plot-list li { font-size: 11px; line-height: 1.65; color: #5C5850; }

/* 滑杆：已填充段恢复墨青（按 --slider-fill 计算） */
body.chat-rail-on .chat-rail-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #205850 0 var(--slider-fill, 50%), #E7E0D1 var(--slider-fill, 50%) 100%);
}
body.chat-rail-on .chat-rail-slider::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #205850 0 var(--slider-fill, 50%), #E7E0D1 var(--slider-fill, 50%) 100%);
}

/* 滑杆：不再依赖 ::-webkit-slider-runnable-track（部分浏览器不渲染），
   直接把 input 自身画成 4px 轨道 + 渐变填充，thumb 叠在上面 */
body.chat-rail-on .chat-rail-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 10px 0 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, #205850 0 var(--slider-fill, 50%), #E2DACA var(--slider-fill, 50%) 100%);
}
body.chat-rail-on .chat-rail-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: transparent;
}
body.chat-rail-on .chat-rail-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #205850; border: 2px solid #FBF8F1; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body.chat-rail-on .chat-rail-slider::-moz-range-track { height: 4px; background: transparent; }
body.chat-rail-on .chat-rail-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: #205850; }
body.chat-rail-on .chat-rail-slider::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid #FBF8F1; border-radius: 50%; background: #205850;
}

/* 覆盖此前 `.chat-rail-row.is-stack .chat-rail-slider{background:transparent}` 的更高优先级规则 */
body.chat-rail-on .chat-rail-row.is-stack .chat-rail-slider {
  height: 4px; margin: 10px 0 8px; background: linear-gradient(to right, #205850 0 var(--slider-fill, 50%), #E2DACA var(--slider-fill, 50%) 100%) !important;
}

/* ══════════ 存档面板改为「居中浮层 + 遮罩」（按设计稿，解决被聊天层压住）══════════ */
.chat-archive-workspace {
  position: fixed !important; inset: 0 !important; z-index: 70 !important;
  display: grid !important; place-items: center;
  padding: 24px; overflow: auto;
  background: rgba(10, 18, 16, .55);
  backdrop-filter: blur(4px);
}
.chat-archive-workspace[hidden] { display: none !important; }
.chat-archive-workspace > * {
  width: min(960px, 100%); max-height: min(86vh, 760px); overflow: auto;
  background: #FBF8F1; border: 1px solid #DED6C6; border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
  padding: 22px 24px;
}

/* 修正：存档面板本身做成"居中白卡"。
 * 压暗与"点空白处关闭"由 **#chat-archive-scrim**（z-index 76）负责，所以白卡必须压在遮罩**之上**。
 * 早前这里是 z-index 70（低于遮罩 76），结果是遮罩盖住白卡：面板看起来发暗，
 * 点卡片也会被遮罩吃掉（等于点了"空白处"）。同时去掉原先那个 100vmax 的超大 spread 阴影，
 * 否则遮罩 + 阴影两套叠成一片死黑。 */
.chat-archive-workspace {
  position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  inset: auto !important; z-index: 80 !important;
  width: min(960px, calc(100vw - 48px)) !important; max-height: 86vh; overflow: auto;
  display: block !important; padding: 22px 24px !important;
  background: #FBF8F1 !important; border: 1px solid #DED6C6 !important; border-radius: 20px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38) !important;
  backdrop-filter: none !important;
}
.chat-archive-workspace > * { width: auto !important; max-height: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }

/* 居中修正：fixed + inset:0 + margin:auto（用 transform 会被后续 inset 覆盖） */
.chat-archive-workspace {
  inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important;
  margin: auto !important; height: fit-content !important;
}

/* ══════════ 存档面板：按设计稿对齐文案与样式 ══════════ */
.chat-archive-workspace { font-family: inherit; color: #1C2A28; }

/* 「查看存档」浮层：面板已经改成"居中白卡 + 独立遮罩"，原来 `position:absolute; inset:0`
 * 的查看层会被 `.chat-archive-workspace > *` 的透明化规则剥掉背景，
 * 内容直接叠在存档列表上（实测截图就是这样，读不清）。
 * 这里改成与面板同级的居中浮层：fixed 居中 + 自带压暗（超大 spread 阴影）+ 白卡。 */
.chat-archive-viewer {
  position: fixed !important; inset: 0 !important; margin: auto !important;
  z-index: 85 !important; height: fit-content !important; max-height: 86vh;
  width: min(760px, calc(100vw - 48px)) !important;
  display: flex !important; flex-direction: column;
  background: #FBF8F1 !important; border: 1px solid #DED6C6 !important; border-radius: 20px !important;
  box-shadow: 0 0 0 100vmax rgba(10, 18, 16, .45), 0 28px 70px rgba(0, 0, 0, .38) !important;
  overflow: hidden !important; color: #1C2A28;
}
.chat-archive-viewer > header { background: #F1ECE1 !important; border-bottom: 1px solid #E4DCCB !important; }
.chat-archive-viewer > footer { background: #F1ECE1 !important; border-top: 1px solid #E4DCCB !important; }
.chat-archive-viewer-body { background: #FBF8F1 !important; }
.chat-archive-msg { background: #fff !important; border: 1px solid #E9E2D3 !important; border-radius: 10px; padding: 10px 12px; }
.chat-archive-header { position: relative; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed #E4DCCB; }
.chat-archive-header h2 {
  font-family: var(--ink-serif); font-size: 24px; letter-spacing: .04em; color: #1d423d;
  display: inline-block; margin: 0 0 4px;
}
.chat-archive-header h2::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  background: url("/img/ink/seal.webp") center / contain no-repeat; opacity: .92;
}
.chat-archive-kicker { color: #82938d; letter-spacing: .2em; font-size: 10.5px; text-transform: uppercase; }
.chat-archive-header p { margin: 2px 0 0; font-size: 12.5px; color: #6d7e79; }
.chat-archive-back, .chat-archive-return {
  border: 1px solid #DED6C6; background: #fff; color: #3f5a55; border-radius: 999px;
  height: 30px; padding: 0 12px; font-size: 12px; cursor: pointer;
}
.chat-archive-back:hover, .chat-archive-return:hover { border-color: #C9BFA9; background: #FDFBF5; }

/* 工具行：输入 + 主按钮 + 次按钮 */
.chat-archive-toolbar, .chat-archive-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chat-archive-workspace input[type="text"], .chat-archive-workspace input:not([type]) {
  flex: 1 1 260px; height: 40px; padding: 0 14px; border: 1px solid #DED6C6; border-radius: 12px;
  background: #fff; font-size: 13px; color: #1C2A28;
}
.chat-archive-workspace .button.primary { background: #205850; border-color: #205850; color: #fff; border-radius: 999px; height: 40px; padding: 0 18px; }
.chat-archive-workspace .button.ghost { border-radius: 999px; height: 40px; padding: 0 16px; border-color: #DED6C6; background: #fff; color: #3f5a55; }
.chat-archive-workspace .chat-archive-danger { border-color: #E7C8C1 !important; color: #A2544A !important; background: #fff !important; border-radius: 999px; height: 40px; padding: 0 16px; }

/* 列表：行卡片 + 悬停 */
.chat-archive-card, .chat-archive-sibling {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid #E4DCCB; border-radius: 14px; background: #fff;
}
.chat-archive-card:hover, .chat-archive-sibling:hover { border-color: #C9BFA9; }
.chat-archive-card-main strong { display: block; font-size: 13.5px; color: #2F3A33; }
.chat-archive-card-main small { font-size: 11.5px; color: #8B8577; }
.chat-archive-card-actions { margin-left: auto; display: flex; gap: 6px; }
.chat-archive-card-actions .button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; }
.chat-archive-others { margin-top: 10px; font-size: 11.5px; color: #8B8577; }
.chat-archive-workspace h3 { font-family: var(--ink-serif); font-size: 14px; color: #2F3A33; margin: 16px 0 8px; }

/* 聊天页没有 ink-mode，--ink-serif 未定义 → 存档面板里用字面宋体栈 */
.chat-archive-header h2, .chat-archive-workspace h3 {
  font-family: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif !important;
}

/* 存档面板头部：标题独占一行，操作按钮排到下一行（避免文字挤在一起） */
.chat-archive-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chat-archive-header > div { order: -1; flex: 1 1 100%; }
.chat-archive-header > .chat-archive-back { order: 0; }
.chat-archive-header > .icon-button { margin-left: auto; }

/* 「当前」胶囊 + 工具行不换行优化 */
.chat-archive-chip {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: #EAF1ED; color: #205850; border: 1px solid #CCE0D6; font-size: 10.5px; vertical-align: 1px;
}
.chat-archive-card.is-current { border-color: #205850; background: #F3F8F5; box-shadow: inset 3px 0 0 #205850; }
.chat-archive-toolbar { flex-wrap: nowrap; overflow-x: auto; }
.chat-archive-toolbar .chat-archive-name { flex: 1 1 240px; min-width: 180px; }
.chat-archive-toolbar .button { flex: none; white-space: nowrap; }

/* 按稿收紧：窗口 900px、行更紧凑、按钮更小、分组带头像 */
.chat-archive-workspace {
  width: min(900px, calc(100vw - 40px)) !important;
  padding: 18px 20px 20px !important; border-radius: 18px !important;
}
.chat-archive-header { padding-bottom: 10px; margin-bottom: 10px; }
.chat-archive-header h2 { font-size: 26px !important; margin-bottom: 2px; }
.chat-archive-header p { font-size: 12px; }
.chat-archive-header .chat-archive-kicker { font-size: 9.5px; }
.chat-archive-header .button.ghost, .chat-archive-header .chat-archive-back { height: 30px; padding: 0 12px; font-size: 11.5px; }
.chat-archive-toolbar { gap: 10px; margin-bottom: 12px; }
.chat-archive-toolbar input { height: 36px !important; font-size: 12.5px; }
.chat-archive-toolbar .button { height: 36px !important; padding: 0 14px !important; font-size: 12.5px !important; }
.chat-archive-others h3 { display: flex; align-items: center; gap: 8px; font-size: 13px !important; margin: 14px 0 8px !important; }
.chat-archive-others h3 em { font-style: normal; font-size: 11.5px; color: #8B8577; }
.chat-archive-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #EAF1ED; color: #205850; font-size: 12px; font-family: "Songti SC", serif;
}
.chat-archive-others p { margin: 0 0 8px; font-size: 11.5px; color: #8B8577; }
.chat-archive-card, .chat-archive-sibling { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; box-shadow: none; gap: 10px; }
.chat-archive-card-main strong { font-size: 13px; }
.chat-archive-card-main small { font-size: 11px; }
.chat-archive-card-actions .button { height: 28px; padding: 0 10px; font-size: 11px; }
.chat-archive-others.is-current-block header:empty { display: none; }

/* 按稿实测收敛：标题 30 / 工具行 38 / 分组头像 40 / 行高 56 / 行内按钮 30×66·96·66 */
.chat-archive-workspace { width: min(890px, calc(100vw - 40px)) !important; padding: 22px 26px !important; }
.chat-archive-header h2 { font-size: 30px !important; }
.chat-archive-header p { font-size: 13px; }
.chat-archive-toolbar { gap: 12px; }
.chat-archive-toolbar input { height: 38px !important; font-size: 13px; border-radius: 10px; }
.chat-archive-toolbar .button { height: 38px !important; font-size: 13px !important; border-radius: 10px !important; padding: 0 16px !important; }
.chat-archive-avatar { width: 40px !important; height: 40px !important; font-size: 15px !important; }
.chat-archive-others h3 { font-size: 14px !important; gap: 10px !important; margin: 18px 0 10px !important; }
.chat-archive-card, .chat-archive-sibling { min-height: 56px; padding: 9px 14px !important; border-radius: 8px !important; border-color: #E9E2D3 !important; }
.chat-archive-card-main strong { font-size: 14px !important; }
.chat-archive-card-main small { font-size: 12px !important; }
.chat-archive-card-actions .button { height: 30px !important; min-width: 66px; font-size: 12px !important; border-radius: 10px !important; padding: 0 12px !important; }
.chat-archive-card-actions .button[data-chat-archive-action="branch"],
.chat-archive-card-actions .button[data-chat-archive-action="open-conversation"] { min-width: 96px; }

/* 排版收口：清掉旧 toolbar 的内边距/底色/边框，统一左基准线 */
.chat-archive-toolbar {
  padding: 0 !important; margin: 0 0 14px !important;
  border: 0 !important; background: transparent !important;
  display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 12px;
}
.chat-archive-name { flex: 1 1 auto !important; }
.chat-archive-header {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 0 0 12px !important; margin: 0 0 12px !important;
  border-bottom: 1px dashed #E4DCCB !important; background: transparent !important;
}
.chat-archive-header > div {
  flex: 1 1 100% !important; display: flex !important; flex-direction: column; gap: 3px;
  align-items: flex-start; text-align: left;
}
.chat-archive-header .chat-archive-kicker {
  display: block !important; margin: 0 !important; font-size: 9.5px !important;
  letter-spacing: .2em; color: #82938d !important; font-weight: 700;
}
.chat-archive-header h2 { display: block !important; margin: 0 !important; line-height: 1.08; }
.chat-archive-header p { display: block !important; margin: 2px 0 0 !important; }
.chat-archive-header .icon-button { position: absolute !important; top: 0; right: 0; margin: 0 !important; }
.chat-archive-header > .chat-archive-back,
.chat-archive-header > .chat-archive-snapshot,
.chat-archive-header > .chat-archive-return { flex: none; }

/* 根因修复：面板子块被居中（宽度不一致、左边线参差）→ 强制全宽、左对齐 */
.chat-archive-workspace { display: block !important; }
.chat-archive-workspace > * {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  box-sizing: border-box;
}

/* 右栏：分区小标题 + 运势行 + 反馈按钮 + 反馈弹窗 */
.chat-rail-section { display: grid; gap: 3px; margin: 12px 0 8px; padding-top: 10px; border-top: 1px dashed #EFE9DC; }
.chat-rail-section-title { font-size: 11.5px; color: #33322B; }
.chat-rail-section-desc { font-size: 10.5px; line-height: 1.6; color: #8B8577; }
.chat-rail-row.is-plot-luck { margin-top: 4px; }
.chat-rail-feedback {
  margin-top: 8px; width: 100%; height: 28px; cursor: pointer;
  border: 1px dashed #DED6C6; border-radius: 8px; background: transparent;
  color: #8B8577; font-size: 10.5px;
}
.chat-rail-feedback:hover { border-color: #C9BFA9; color: #205850; background: #FDFBF5; }
.ym-feedback-panel { max-width: 460px; }
.ym-feedback-reasons { display: grid; gap: 6px; margin: 6px 0 12px; }
.ym-feedback-option { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #3B3A33; cursor: pointer; }
.ym-feedback-option input { accent-color: #205850; }
.ym-feedback-note {
  width: 100%; border: 1px solid #DED6C6; border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.6; resize: vertical; background: #fff; color: #1C2A28;
}

/* ══════════ 手机/窄屏：桌面三栏规则一律失效（两栏本就 ≤1180 隐藏）══════════ */
@media (max-width: 1180px) {
  body.chat-rail-on .chat-view {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    background: transparent !important;
  }
  body.chat-rail-on .chat-stage {
    position: absolute !important; inset: 0 !important; grid-column: auto !important; grid-row: auto !important;
  }
  body.chat-rail-on .chat-surface {
    position: relative !important; display: flex !important; flex-direction: column;
    grid-column: auto !important; grid-row: auto !important;
  }
  body.chat-rail-on .chat-scene-art-image {
    width: 100% !important; left: 0 !important; transform: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  body.chat-rail-on .message-list { width: 100% !important; max-width: 100% !important; }
  body.chat-rail-on .composer {
    position: absolute !important; left: 0 !important; right: 0 !important; width: auto !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
  }
  body.chat-rail-on .composer-inner { width: 100% !important; max-width: none !important; }
  body.chat-rail-on .chat-rail { display: none !important; }
}

/* 逐条反馈：条目行 + 右侧小按钮；弹窗引用原文 */
.chat-rail-plot-list li.chat-rail-entry { display: flex; align-items: flex-start; gap: 6px; }
.chat-rail-entry > span { flex: 1 1 auto; min-width: 0; }
.chat-rail-fb {
  flex: none; opacity: 0; border: 1px solid #E4DCCB; background: #fff; color: #8B8577;
  border-radius: 999px; font-size: 9.5px; height: 17px; padding: 0 6px; cursor: pointer; line-height: 1;
}
.chat-rail-entry:hover .chat-rail-fb { opacity: 1; }
.chat-rail-fb:hover { border-color: #C9BFA9; color: #205850; }
.ym-feedback-quote {
  margin: 8px 0 2px; padding: 8px 10px; border-left: 3px solid #205850; border-radius: 6px;
  background: #F3F8F5; color: #3B3A33; font-size: 12px; line-height: 1.6;
}

/* 反馈按钮常显（低对比），避免"看不见就不知道能反馈" */
.chat-rail-fb { opacity: .55; }

/* 记忆区卡片 */
.chat-rail-memory-card .chat-rail-badge { font-size: 10px; color: #6d7e79; }
.chat-rail-memory-body { display: grid; gap: 8px; margin-top: 6px; }
.chat-rail-memory-body .chat-rail-plot-row + .chat-rail-plot-row { margin-top: 0; }
.chat-rail-memory-foot { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #EFE9DC; font-size: 10.5px; color: #8B8577; }

/* ══════════════════════════════════════════════════════════════════════
   模型选择窗 —— 浅色纸感（v4 稿 05-模型-桌面-v4-首页画风.png）
   ① 配色统一走 --rw-* 变量：改一处，整个窗口（含手机端）整体变浅，
      不再逐个 `!important` 打补丁 —— 之前那套零散覆盖会把手机端的胶囊/单列布局一起压坏。
   ② 三栏 240 / 1fr / 340 只在桌面（≥1181px）生效；
      手机端沿用基线的「厂商胶囊横滑 + 单列模型卡」布局。
   ══════════════════════════════════════════════════════════════════════ */
.model-workspace-page {
  --rw-bg: #FBF8F1;
  --rw-surface: #FFFFFF;
  --rw-surface-hover: #F4F9F6;
  --rw-surface-active: #EFF6F2;
  --rw-line: #E9E2D3;
  --rw-line-strong: #DED6C6;
  --rw-text: #1C2A28;
  --rw-dim: #47574F;
  --rw-muted: #8B8577;
  --rw-accent: #205850;
  background: #F4EFE4;
  backdrop-filter: none;
}
.model-workspace {
  background: var(--rw-bg) !important; color: var(--rw-text) !important;
  border: 1px solid #DED6C6 !important; box-shadow: 0 24px 70px rgba(31, 45, 41, .18);
}
.model-workspace-header { background: var(--rw-bg) !important; border-bottom: 1px dashed #E4DCCB !important; }
.model-workspace-header h2 {
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif !important;
  color: #1D423D !important; font-size: 20px !important;
}
.model-workspace-actions .icon-button:hover,
.model-workspace-admin:hover { background: #EFEAE0 !important; color: #1C2A28 !important; }
.model-provider-pane, .model-catalog-pane, .model-detail-pane { background: transparent !important; border-color: #E9E2D3 !important; }
.model-detail-head strong { color: var(--rw-text) !important; }
.model-detail-tag { border-color: #DFE8E4 !important; color: #5E6F6A !important; }
.model-detail-tag.is-discount { border-color: #E7C8C1 !important; color: #A2544A !important; }

/* 基线里写死的深色块（记忆行、开关、滑杆、底栏渠道条、滚动条）→ 浅色 */
.model-workspace .rw-memory { background: #F1F6F2 !important; border: 1px solid #E2ECE6 !important; }
.model-workspace .rw-switch { background: #D8D2C4 !important; }
.model-workspace .rw-switch.is-on { background: #205850 !important; }
.model-workspace .rw-memory-length select { background: #FFFFFF !important; border-color: #DED6C6 !important; color: #1C2A28 !important; }
.model-workspace .rw-slider-track { background: #E3DED2 !important; }
.model-workspace-footer { background: var(--rw-bg) !important; border-top: 1px solid #E4DCCB !important; }
.model-workspace .model-channel-bar { background: #FFFFFF !important; border: 1px solid #E9E2D3 !important; color: #1C2A28 !important; }
.model-workspace .model-channel-bar:hover, .model-workspace .model-channel-bar:focus-visible { background: #F4F9F6 !important; border-color: #205850 !important; }
.model-workspace .model-channel-bar-channel, .model-workspace .model-channel-bar-count { color: #8B8577 !important; }
.model-workspace .model-channel-bar-arrow { color: #205850 !important; }
.model-workspace-page ::-webkit-scrollbar-thumb { background: rgba(31, 45, 41, .18); }

/* 使用渠道条目 / 各行卡片（浅色） */
.model-workspace .model-detail-channels { background: transparent !important; border-color: #E9E2D3 !important; }
body .model-workspace .model-detail-channels .model-detail-channel {
  background: #FFFFFF !important; border: 1px solid #E9E2D3 !important; border-radius: 10px !important;
}
body .model-workspace .model-detail-channels .model-detail-channel .model-detail-channel-name,
body .model-workspace .model-detail-channels .model-detail-channel .model-detail-channel-state { color: #1C2A28 !important; }
body .model-workspace .model-detail-channels .model-detail-channel .model-detail-radio { border-color: #C9BFA9 !important; }
body .model-workspace .model-detail-channels .model-detail-channel[aria-pressed="true"] {
  border-color: #205850 !important; background: #F3F8F5 !important;
}
.model-workspace .model-channel-option, .model-workspace .model-variant-item {
  background: #fff !important; border: 1px solid #E9E2D3 !important; border-radius: 10px !important;
}
.model-workspace .model-channel-option.is-active { border-color: #205850 !important; background: #F3F8F5 !important; }

/* 桌面：三栏 240 / 1fr / 340 + 卡片式厂商与模型 */
@media (min-width: 1181px) {
  .model-workspace-layout { grid-template-columns: 240px minmax(0, 1fr) 340px !important; }
  .model-provider-item, .model-catalog-item {
    background: #fff !important; border: 1px solid #E9E2D3 !important;
    border-radius: 10px !important; color: #1C2A28 !important;
  }
  /* 基线给 hover / 选中态写的是 color:#fff（深色主题），浅色下必须改回深墨，否则白字白底看不见 */
  .model-provider-item:hover, .model-provider-item:focus-visible { background: #F4F9F6 !important; border-color: #C9BFA9 !important; color: #1C2A28 !important; }
  .model-catalog-item:hover, .model-catalog-item:focus-visible { background: #F4F9F6 !important; border-color: #C9BFA9 !important; }
  .model-provider-item.is-active, .model-provider-item[aria-selected="true"] {
    background: #F3F8F5 !important; border-color: #205850 !important; color: #17453C !important;
  }
  .model-catalog-item.is-active, .model-catalog-item[aria-selected="true"] {
    background: #F3F8F5 !important; border-color: #205850 !important;
  }
  .model-provider-item.is-active .model-provider-copy strong { color: #17453C !important; }
  .model-provider-item:hover .model-provider-copy strong { color: #1C2A28 !important; }
  .model-provider-mark { background: #EDF2EE !important; color: #205850 !important; }
  .model-provider-item.is-active .model-provider-mark { background: #DCEBE3 !important; color: #17453C !important; }
  .model-provider-copy small, .model-catalog-copy small, .model-detail-desc { color: #7C8A85 !important; }
  .model-provider-count { color: #6F7F7A !important; }
  .model-catalog-item.is-active { box-shadow: inset 3px 0 0 #205850 !important; }
}
/* 收尾③：模型等级徽标（高级=实心墨青 / 快速=青绿描边） */
.model-tier-tag {
  display: inline-flex; align-items: center; height: 15px; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; font-size: 9.5px; line-height: 1; vertical-align: 1px;
}
.model-tier-tag.is-advanced { background: #205850; color: #FFFFFF !important; border: 1px solid #205850; }
.model-tier-tag.is-fast { background: #FFFFFF; color: #2E7A6B !important; border: 1px solid #7FBFAE; }
.model-discount-tag { margin-left: 6px; }

/* ══════════ Gemini「易截断」提示（2026-10-28）══════════
 * Gemini 系列自带上游内容审查，流式下容易在生成中途被掐断；
 * 列表里挂一个小徽标，详情里挂一条说明，指路「聊天体验 → 非流式」。 */
.model-truncate-tag {
  display: inline-flex; align-items: center; height: 15px; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; border: 1px dashed rgba(196, 122, 74, .75);
  color: #B4622F !important; background: rgba(196, 122, 74, .08);
  font-size: 9.5px; line-height: 1; vertical-align: 1px; white-space: nowrap;
}
.model-detail-warn {
  margin: 0 0 14px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(196, 122, 74, .35); background: rgba(196, 122, 74, .07);
  color: #7A451F; font-size: 11.5px; line-height: 1.65;
}
.model-detail-warn strong {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px;
  background: rgba(196, 122, 74, .9); color: #FFFFFF; font-size: 10px; font-weight: 600; line-height: 16px;
}
body[data-theme="dark"] .model-detail-warn { color: #E7C9AF; border-color: rgba(196, 122, 74, .45); }
body[data-theme="dark"] .model-truncate-tag { color: #E7A97A !important; }

/* ══════════ 手机顶栏：墨纸条（设计稿 12-手机-整屏-林翩翩.png）══════════ */
@media (max-width: 860px) {
  .chat-head {
    background: rgba(28, 38, 36, .88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 8px 12px;
  }
  .chat-head .back-button,
  .chat-head-actions .button.ghost,
  .chat-head-actions .chat-favorite-trigger {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 12px !important;
    color: #9FB3AC !important;
    box-shadow: none !important;
  }
  .chat-head .back-button { width: 34px; height: 34px; border-radius: 12px !important; }
  .chat-head-actions { gap: 6px; }
  .chat-head-actions .button.ghost,
  .chat-head-actions .chat-favorite-trigger { height: 34px; min-width: 34px; padding: 0 8px; font-size: 11px; }
  .chat-title h1 {
    font-family: "Songti SC", "Noto Serif SC", "STSong", serif !important;
    font-size: 16px !important; color: #EAF1ED !important; letter-spacing: .02em;
  }
  .chat-title .subtle, .chat-title [data-chat-title] { color: #8FA09A !important; font-size: 11px !important; }
}

@media (max-width: 860px) {
  /* 顶栏右侧两枚按钮只留图标（文字会挤压），统一 34×34 圆形 */
  .chat-head-actions { gap: 8px !important; }
  .chat-head-actions .button.ghost,
  .chat-head-actions .chat-favorite-trigger {
    width: 34px !important; min-width: 34px !important; height: 34px !important;
    padding: 0 !important; border-radius: 999px !important;
    font-size: 0 !important; letter-spacing: 0 !important;
    display: grid !important; place-items: center;
  }
  /* 只隐藏文字标签；图标 span（.head-icon）要留着，否则图标一起没了 */
  .chat-head-actions .button.ghost .head-label,
  .chat-head-actions .chat-favorite-trigger .head-label { display: none !important; }
  .chat-head-actions .button.ghost svg,
  .chat-head-actions .chat-favorite-trigger svg { width: 17px !important; height: 17px !important; }
  .chat-head .back-button { border-radius: 999px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   手机输入条（≤860px）—— 外观 = 基线，一格不改
   .composer-inner 保持基线：rgba(24,25,28,.34) 底 + rgba(104,178,238,.42) 1px 描边
                            + 14px 圆角 + 30×30 图标按钮；桌面端同样不动。
   本段只做两件事：
     ① 「＋」搬到**纸飞机的位置**（右侧发送位）：空文本＝＋、有文本＝✈、面板展开＝×；
     ② 工具面板在输入条**下方**展开，输入条整体上移让位（保留既有交互）。
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   输入条「＋」聊天工具面板 —— **桌面端与手机端同一套**（产品 2026-10-27）
   之前：桌面端是输入框右上角的上箭头 ⌃，手机端是发送位的 ＋，两套并存。
   现在统一为手机设计：
     ① 「＋」占**纸飞机那一格**：空文本＝＋、有文本＝✈、面板展开＝×；
     ② 面板在输入条**下方**展开，输入条整体上移让位；
     ③ 面板里没有「重命名」—— 会话标题不可重命名。
   ══════════════════════════════════════════════════════════════════════ */
#composer-plus { display: none; }

/* ① 发送位：空文本时换成 ＋，有文本时还原 ✈ */
#message-input:placeholder-shown ~ .composer-send { display: none !important; }
#message-input:placeholder-shown ~ #composer-plus,
#composer-plus.is-open { display: grid !important; }
#stop:not([hidden]) ~ #composer-plus { display: none !important; }

/* ＋ 与纸飞机同色同发光，占的就是发送按钮那一格（尺寸沿用 .composer-icon-button 的 36/30） */
#composer-plus { color: var(--ice-white); filter: drop-shadow(0 0 6px var(--ice-glow)); }
#composer-plus svg { width: 18px; height: 18px; stroke-width: 2; }
#composer-plus.is-open svg { width: 16px; height: 16px; }

/* ② 工具面板：输入条下方展开（三列图标网格，与手机一致） */
#chat-quick-actions-menu {
  position: absolute !important; left: 0 !important; right: 0 !important;
  top: calc(100% + 8px) !important; bottom: auto !important;
  width: auto !important; min-width: 0 !important;
  padding: 12px 10px 10px !important;
  display: none !important;
  /* 面板里现在是 4 项（存档/记忆/新对话/删除会话，重命名已下线）→ 桌面一排 4 个、窄屏 2×2 */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 6px !important;
  border-radius: 14px !important;
  background: rgba(27, 37, 35, .94) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
}
#chat-quick-actions-menu.is-open { display: grid !important; animation: quickSheetIn .2s cubic-bezier(.32, .72, 0, 1); }
#chat-quick-actions-menu [data-chat-action] {
  display: grid; justify-items: center; gap: 6px;
  padding: 6px 2px; border: 0; border-radius: 12px; background: transparent;
  color: #D3DEDA !important; font-size: 11px;
}
#chat-quick-actions-menu [data-chat-action]:hover { background: rgba(255, 255, 255, .07); }
#chat-quick-actions-menu [data-chat-action]:active { background: rgba(255, 255, 255, .12); }
#chat-quick-actions-menu [data-chat-action] .chat-quick-action-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .07); color: #7FD0C4;
}
#chat-quick-actions-menu [data-chat-action] .chat-quick-action-icon svg { width: 17px; height: 17px; stroke: currentColor; }

@media (max-width: 640px) {
  #chat-quick-actions-menu { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ③ 面板展开时输入条整体上移让位（"加号顶起输入框"）
   聊天页的 .composer 由 body.chat-rail-on 统一成 absolute + left/right:0 + transform:none，
   所以这里只做纵向位移，不会破坏水平居中。 */
.composer { transition: transform .24s cubic-bezier(.32, .72, 0, 1); }
body.quick-sheet-open .composer {
  transform: translateY(calc(-1 * var(--quick-sheet-h, 176px))) !important;
}

@keyframes quickSheetIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   模型选择窗 · 手机端（≤860px）
   基线本来就有「厂商胶囊横滑 + 单列模型卡」的排版，之前被桌面的三栏/白卡
   `!important` 覆盖压坏（列宽被算成 240/0/340，模型列表宽度 0 → 整片空白）。
   现在三栏只在 ≥1181px 生效，这里只补手机端的浅色细节。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .model-workspace-page { padding: 0; background: var(--rw-bg); }
  .model-workspace-header { height: 54px; padding: 0 12px; border-bottom: 1px solid #EFE9DC !important; }
  .model-workspace-header h2 { font-size: 17px !important; }
  .model-workspace-actions .icon-button { width: 30px; height: 30px; font-size: 16px; }

  /* 厂商：一行胶囊横滑 */
  .model-provider-pane { border-bottom: 1px solid #EFE9DC; }
  .model-provider-list { gap: 6px; padding: 8px 0; }
  .model-provider-item {
    grid-template-columns: 20px auto auto !important; gap: 7px !important; padding: 6px 10px !important;
    background: #FFFFFF !important; border: 1px solid #E9E2D3 !important;
    border-radius: 999px !important; color: #47574F !important;
  }
  .model-provider-mark { background: #EDF2EE !important; color: #205850 !important; }
  .model-provider-count { color: #8B8577 !important; }
  .model-provider-item.is-active { background: #205850 !important; border-color: #205850 !important; color: #FFFFFF !important; }
  .model-provider-item.is-active .model-provider-mark { background: rgba(255, 255, 255, .20) !important; color: #FFFFFF !important; }
  .model-provider-item.is-active .model-provider-count { color: rgba(255, 255, 255, .78) !important; }

  /* 记忆条 + 模型卡 */
  .rw-memory { height: 50px; margin: 8px 0 10px; border-radius: 10px; }
  .rw-memory-copy strong { font-size: 13px; }
  .model-catalog-list { gap: 7px; }
  .model-workspace-layout .model-catalog-item {
    background: #FFFFFF !important; border: 1px solid #EDE7DA !important; border-radius: 10px !important;
  }
  .model-workspace-layout .model-catalog-item.is-active {
    background: #F3F8F5 !important; border-color: #205850 !important;
    box-shadow: inset 3px 0 0 #205850 !important;
  }
  .model-catalog-copy strong { color: #1C2A28 !important; font-size: 14px; }
  .model-catalog-copy small { color: #7C8A85 !important; }

  .model-workspace-footer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .model-channel-bar { border-radius: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   模型窗底部「渠道坞」（产品 2026-10-23）
   原来底部只有一个「N 个渠道 ⌃」按钮 → 必须上拉弹层才能选；现在渠道胶囊
   直接铺在窗口下沿，点一下即切换（data-model-variant 走的是同一套选中逻辑）。
   ══════════════════════════════════════════════════════════════════════ */
.model-channel-dock { display: grid; gap: 7px; width: 100%; min-width: 0; }
.model-channel-dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.model-channel-dock-head strong {
  min-width: 0; overflow: hidden; color: #1C2A28; font-size: 13px; font-weight: 600;
  text-overflow: ellipsis; white-space: nowrap;
}
.model-channel-dock-head small { flex: none; color: #8B8577; font-size: 11px; white-space: nowrap; }
.model-channel-dock-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.model-channel-dock-list > :only-child { grid-column: 1 / -1; }
.model-channel-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px;
  min-height: 42px; padding: 0 11px;
  border: 1px solid #E9E2D3; border-radius: 10px; background: #FFFFFF;
  color: #1C2A28; text-align: left; font-size: 12.5px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.model-channel-chip:hover, .model-channel-chip:focus-visible { border-color: #C9BFA9; background: #F8FBF9; outline: none; }
.model-channel-chip.is-active { border-color: #205850; background: #F3F8F5; box-shadow: inset 2px 0 0 #205850; }
.model-channel-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-channel-chip small { color: #8B8577; font-size: 11px; white-space: nowrap; }
.model-channel-chip.is-active small { color: #205850; font-weight: 600; }
.model-channel-chip-check { color: #205850; font-size: 12px; }

@media (max-width: 980px) {
  /* 窗口是 flex 列：底栏加高后，列表区必须自己收缩，否则内容被挤出可视区 */
  .model-workspace-layout { height: auto !important; flex: 1 1 auto; min-height: 0; }
  .model-workspace-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
  .model-channel-chip { min-height: 44px; }
}
@media (max-width: 379px) {
  /* 极窄屏（<380）才单列，否则两列更省竖向空间 */
  .model-channel-dock-list { grid-template-columns: 1fr; }
}

/* 渠道坞细节：状态色（可用=灰、不可用=珊瑚、待检查=琥珀），滚动区上沿柔化 */
.model-channel-chip small { color: #8B8577; }
.model-channel-chip[data-state="unavailable"] { border-color: #EBD9D4; }
.model-channel-chip[data-state="unavailable"] small { color: #A2544A; }
.model-channel-chip[data-state="unknown"] small { color: #B08A3E; }
@media (max-width: 980px) {
  .rw-catalog-scroll {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px);
    mask-image: linear-gradient(180deg, transparent 0, #000 10px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   新字段的展示基底（2026-10-23 产品定义）
   ① 渠道通畅（绿）/ 拥挤（黄）/ 拥堵（红）—— `.ym-congestion` + 档位 class
   ② 模型平均首字 —— `.model-latency`
   只备样式，等 UI 定稿再挂到具体位置（口径/色值统一走这里与 CONGESTION_META）。
   ══════════════════════════════════════════════════════════════════════ */
.ym-congestion {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 1; white-space: nowrap;
}
.ym-congestion::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
}
.ym-congestion.is-smooth { color: #2E7A6B; }
.ym-congestion.is-crowded { color: #B08A3E; }
.ym-congestion.is-slow { color: #7A8B3E; }
.ym-congestion.is-congested { color: #A2544A; }
.ym-congestion.is-unknown { color: #8B8577; }
.ym-congestion.is-congested::before { animation: congestionPulse 1.6s ease-in-out infinite; }
@keyframes congestionPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ym-congestion.is-congested::before { animation: none; } }

.model-latency {
  display: inline-flex; align-items: baseline; gap: 3px;
  color: #8B8577; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.model-latency strong { color: #47574F; font-size: 11px; font-weight: 600; }

/* 通畅度就地展示（产品 2026-10-23：放在渠道旁边）：
   ① 手机渠道坞胶囊右侧；② 右栏「使用渠道」行；③ 模型卡副信息里的渠道名后面。 */
.model-channel-chip .ym-congestion,
.model-detail-channel .ym-congestion,
.model-catalog-copy small .ym-congestion { font-size: 10.5px; gap: 4px; }
.model-channel-chip .ym-congestion::before,
.model-detail-channel .ym-congestion::before,
.model-catalog-copy small .ym-congestion::before { width: 5px; height: 5px; }
.model-catalog-copy small .ym-congestion { vertical-align: 0; }
.model-channel-chip.is-active .ym-congestion { font-weight: 600; }

/* 通畅度徽标里的秒级首字：`● 通畅 5.2s` */
.ym-congestion-time {
  font-style: normal; font-variant-numeric: tabular-nums;
  margin-left: 4px; opacity: .8; letter-spacing: .01em;
}

/* 「平均首字 5.2s」—— 说明白这是平均值，不是最近一次 */
.ym-congestion-time { font-style: normal; font-variant-numeric: tabular-nums; margin-left: 5px; opacity: .78; }
.model-channel-chip .ym-congestion-time,
.model-detail-channel .ym-congestion-time { margin-left: 4px; }

/* 渠道坞胶囊：带上「平均首字 5.2s」后一行放不下 → 改成两行（名字+勾 / 通畅度+首字），
   这样 2 列布局还能保住，不用被迫退成单列。 */
.model-channel-dock-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model-channel-chip {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name check" "badge badge";
  align-content: center; gap: 3px 6px;
  min-height: 54px; padding: 8px 11px;
}
.model-channel-chip-name { grid-area: name; }
.model-channel-chip .ym-congestion { grid-area: badge; justify-self: start; }
.model-channel-chip-check { grid-area: check; align-self: start; }
@media (max-width: 379px) {
  .model-channel-dock-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   人设列表行：内容结构对齐聊天页左栏「当前人设」卡（组徽标 + 名字 + 描述摘要）
   —— 桌面端 设定 面板也一起受益，手机上另行覆写为纸卡排版（见下一段）
   ══════════════════════════════════════════════════════════════════════ */
.chat-context-list-item { align-items: start; }
.chat-context-list-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-context-list-top strong { min-width: 0; overflow: hidden; font-size: 13px; color: #2F3A33; text-overflow: ellipsis; white-space: nowrap; }
.chat-context-list-top .chat-rail-group { flex: none; }
.chat-context-list-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11.5px; line-height: 1.6; color: #5C5850;
}

/* ══════════════════════════════════════════════════════════════════════
   聊天设定面板 —— 全面纸卡化（产品 2026-10-23：桌面与手机同一套画风，
   信息密度不变，只换视觉：纸底 / 宋体标题 / 青绿组徽标 / 药丸按钮 / 药丸 tab）
   ══════════════════════════════════════════════════════════════════════ */
.chat-context-workspace { background: #F4EFE4; }
.chat-context-header { background: #FBF8F1; border-bottom: 1px dashed #E4DCCB; }
.chat-context-heading h2 {
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif !important;
  color: #2F3A33 !important; letter-spacing: .02em;
}
.chat-context-kicker { color: #8B8577 !important; letter-spacing: .18em; }
.chat-context-back { color: #6B6456 !important; }

/* 顶部 tab → 药丸（对齐左栏 展开/切换/修改 的手感） */
.chat-context-tabs { padding: 10px 12px; gap: 6px; border-bottom: 1px solid #EFE9DC; background: #FBF8F1; }
.chat-context-tabs button {
  min-height: 30px; padding: 0 12px; border: 1px solid #DED6C6; border-radius: 999px;
  background: #fff; color: #6B6456; font-size: 12px;
}
.chat-context-tabs button.is-active {
  border-color: #205850; background: #205850; color: #fff; font-weight: 600;
}

.chat-context-content { padding: 14px 12px 26px; }
.chat-context-section-title { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 15px; color: #2F3A33; }
.chat-context-section-status { color: #8B8577; }
.chat-context-section-head .button {
  border: 1px solid #DED6C6; border-radius: 999px; background: #fff; color: #6B6456;
  min-height: 30px; padding: 0 12px; font-size: 12px;
}
.chat-context-section-head .button:hover { border-color: #C9BFA9; background: #FDFBF5; }

/* 人设行 = 纸卡：组徽标 + 名字 + 2 行描述 */
.chat-context-list { gap: 8px; }
.chat-context-list-item {
  display: block; padding: 11px 12px;
  border: 1px solid #DED6C6; border-radius: 12px; background: #FBF8F1;
  box-shadow: 0 6px 18px rgba(59, 58, 51, .06);
}
.chat-context-list-item:hover, .chat-context-list-item:focus-visible { border-color: #C9BFA9; background: #FDFBF5; }
/* 与左栏一致：不要方形头像块 */
.chat-context-list-mark { display: none; }
.chat-context-list-copy { gap: 5px; }
.chat-context-list-item.is-selected { border-color: #205850; background: #F3F8F5; box-shadow: 0 6px 18px rgba(32, 88, 80, .12); }
.chat-context-list-item.is-bound { box-shadow: inset 3px 0 0 #205850; }
.chat-context-list-item.is-selected.is-bound { box-shadow: inset 3px 0 0 #205850, 0 6px 18px rgba(32, 88, 80, .12); }
.chat-context-list-top strong { font-size: 13.5px; }
.chat-context-list-desc { font-size: 11.5px; line-height: 1.65; color: #5C5850; }
.chat-context-list-copy small { font-size: 10.5px; color: #8B8577; }

/* 编辑卡：同一张纸 */
.chat-context-editor-card {
  border: 1px solid #DED6C6; border-radius: 12px; background: #FBF8F1;
  box-shadow: 0 6px 18px rgba(59, 58, 51, .06);
}
.chat-context-editor-title strong { font-family: "Songti SC", "Noto Serif SC", serif; color: #2F3A33; font-size: 14px; }
.chat-context-editor-title small { color: #8B8577; }
.context-field > span { color: #6B6456; font-size: 11.5px; }
.context-field input, .context-field textarea {
  border: 1px solid #DED6C6; border-radius: 10px; background: #fff; color: #2F3A33;
}
.context-field input:focus, .context-field textarea:focus { border-color: #205850; box-shadow: 0 0 0 3px rgba(32, 88, 80, .10); }
.context-field-hint { color: #8B8577; }
.context-editor-actions .button.primary,
.context-editor-actions .button {
  border-radius: 999px;
}
.context-editor-actions .button.primary { background: #205850; border-color: #205850; color: #fff; }
.context-bound-label { color: #205850; }

/* 人设编辑卡：姓 / 名 两列（「组」输入已按产品要求移出聊天页） */
.context-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.context-name-row input { flex: none; width: 100%; }
.context-name-row input:first-child { flex: none; }


/* ══════════════════════════════════════════════════════════════════════
   人设区：与桌面左栏同逻辑 —— 默认只展示「当前人设」卡（展开/切换/修改 三个药丸），
   点「切换」才列名单、点「修改」才出编辑框；手机因为竖向空间多，描述默认展开 10 行（桌面 3 行）。
   ══════════════════════════════════════════════════════════════════════ */
.chat-persona-card {
  border: 1px solid #DED6C6; border-radius: 12px; background: #FBF8F1;
  padding: 11px 12px; box-shadow: 0 6px 18px rgba(59, 58, 51, .06);
}
.chat-persona-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-persona-card-name { min-width: 0; overflow: hidden; font-size: 13.5px; color: #2F3A33; text-overflow: ellipsis; white-space: nowrap; }
.chat-persona-card-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }
.chat-persona-card-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.65; color: #5C5850;
}
.chat-persona-card-desc.is-expanded { display: block; overflow: visible; }
.chat-persona-card-meta { margin-top: 6px; font-size: 10.5px; color: #8B8577; }
.chat-persona-switch { margin-top: 10px; }
.chat-persona-switch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.chat-persona-switch-head strong { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 12.5px; color: #2F3A33; }
.chat-persona-switch-head span { font-size: 10.5px; color: #8B8577; }
.chat-rail-form-hint { display: block; margin-top: 6px; font-size: 10.5px; color: #8B8577; }

@media (max-width: 860px) {
  /* 手机上竖向空间够：默认展示 10 行，收起时才需要点「收起」 */
  .chat-persona-card-desc { -webkit-line-clamp: 10; }
  .chat-persona-card { padding: 12px; }
  /* 一行放得下：组徽标 + 名字 + 三个药丸（与桌面左栏一致） */
  .chat-persona-card-actions .chat-rail-toggle { height: 26px; padding: 0 11px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   聊天设定面板 · 收尾纸卡化（2026-10-23）：把剩余还带旧冷色 / 紫色强调的块
   统一成同一套纸色（暖底 #FBF8F1 / 线 #E9E2D3 / 墨 #33322B / 青绿 #205850）
   ══════════════════════════════════════════════════════════════════════ */
.chat-context-workspace { color: #33322B; }
.chat-experience-copy strong { font-family: "Songti SC", "Noto Serif SC", serif; color: #2F3A33; font-size: 15px; }
.chat-experience-copy small { color: #6F6A5D; }
.chat-experience-state { border-top-color: #EFE9DC; color: #8B8577; }
.chat-experience-actions .button {
  border: 1px solid #DED6C6; border-radius: 999px; background: #fff; color: #6B6456;
  min-height: 30px; padding: 0 12px; font-size: 12px;
}
.chat-experience-actions .button:hover { border-color: #C9BFA9; background: #FDFBF5; }

/* 剧情分项设置块：冷白底 → 暖纸底；未开启不再整块降透明（会看不清），改成灰字 */
.plot-settings {
  border: 1px solid #E9E2D3; border-radius: 12px; background: #F7F3EA;
}
.plot-settings.is-inactive { opacity: 1; }
.plot-settings.is-inactive .plot-setting-name { color: #8B8577; }
.plot-settings.is-inactive .plot-setting-hint { color: #A39C8D; opacity: 1; }
.plot-setting-note {
  margin: 0 0 6px; padding: 7px 9px; border-radius: 8px;
  background: #F1EBDF; color: #8B8577; font-size: 11px;
}
.plot-setting-row + .plot-setting-row { border-top-color: #EFE9DC; }
.plot-setting-name { color: #33322B; }
.plot-setting-hint { color: #6F6A5D; }
.plot-setting-hint strong { color: #33322B; }
/* 世界运气：原来控件列写死 52px，下拉框被挤成竖排「运气」两个字 */
.plot-setting-row { grid-template-columns: 68px auto minmax(0, 1fr); }
.plot-luck { gap: 5px; color: #8B8577; font-size: 11px; }
.plot-luck select {
  min-width: 84px; max-width: 190px; padding: 4px 10px;
  border: 1px solid #DED6C6; border-radius: 999px; background: #fff; color: #33322B;
}

/* 卡设补全入口：原来的紫色强调 → 青绿强调（与全站一致） */
.chat-context-entry {
  border-left: 3px solid #205850; border-radius: 12px;
  background: #F1F6F2; border-top: 1px solid #E2ECE6; border-right: 1px solid #E2ECE6; border-bottom: 1px solid #E2ECE6;
}
.chat-context-entry-copy strong { color: #2F3A33; font-family: "Songti SC", "Noto Serif SC", serif; }
.chat-context-entry-copy p { color: #6F6A5D; }
.chat-context-entry-button {
  border: 1px solid #CCE0D6; border-radius: 999px; background: #fff; color: #205850;
  min-height: 30px; padding: 0 12px; font-size: 12px;
}
.chat-context-entry-button:hover, .chat-context-entry-button:focus-visible { border-color: #205850; background: #EAF3EE; }

/* 世界设定：子块标题 / 空态 / 条目行统一纸色 */
.chat-context-subhead strong { color: #2F3A33; }
.chat-context-subhead small { color: #8B8577; }
.chat-context-empty { border-color: #DED6C6; color: #8B8577; background: #FDFBF5; }

/* 世界设定 ·「指令」列表上方的口径说明（2026-11-01）：只解释"当前聊天在用哪条"，
   避免把账号级"标记为启用"误读成"本卡生效"。 */
.chat-context-note {
  margin: 0 0 8px; padding: 0 2px; font-size: 11.5px; line-height: 1.6; color: #8B8577;
}
.chat-context-section-kicker, .chat-context-subsection + .chat-context-subsection { border-top-color: #EFE9DC; }

/* ══════════════════════════════════════════════════════════════════════
   聊天页顶栏：控件在圆形底里严格居中（2026-10-23 产品反馈「偏移了一点」）
   原因：★ / ☷ / ← 是**字形**，字面框上下不对称 —— 实测星标偏上 2.4px、☷ 偏上 4px、← 偏右下 3px。
   做法：字形只在桌面/弹窗显示（.head-label），手机显示 SVG（.head-icon），几何中心即视觉中心。
   ══════════════════════════════════════════════════════════════════════ */
.head-icon { display: none; }
.head-icon svg { display: block; width: 17px; height: 17px; }

@media (max-width: 860px) {
  /* 旧的字形图标作废（原本用 ::before 塞 ☆ / ☷） */
  .chat-head .back-button::before,
  .chat-head-actions > .button::before,
  .chat-head-actions .chat-actions > .button::before { content: none !important; }

  .chat-head .back-button .head-label,
  .chat-head-actions .head-label { display: none !important; }
  .chat-head-actions .head-icon,
  .chat-head .back-button .head-icon { display: grid; place-items: center; }

  /* 三个圆底按钮：统一 34×34、内部只有一枚 17px 的 SVG → 四周等距 */
  .chat-head .back-button,
  .chat-head-actions .button.ghost,
  .chat-head-actions .chat-favorite-trigger {
    width: 34px !important; min-width: 34px !important; height: 34px !important;
    padding: 0 !important; border-radius: 999px !important;
    display: grid !important; place-items: center !important;
    font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important;
  }
  .chat-head .back-button .head-icon svg { width: 18px; height: 18px; }
  .chat-head-actions .head-icon svg { width: 17px; height: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════
   手机端「角色介绍」弹窗修正（2026-10-23）
   ① 底部操作条被 App 底部 Tab 栏（fixed, 58px, z-index 60）压住 → 整个弹窗抬到 Tab 栏之上；
   ② 标签 / 状态药丸在纸底上用的是深色字，改成纸色药丸（与聊天设定面板同一套）；
   ③ 关闭按钮压在装饰插画上且没有底 → 圆形白底 + 提到插画之上；
   ④ 正文滚动区底部留白，避免最后一段被固定操作条盖住。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #character-modal.modal-backdrop,
  .modal-backdrop {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  #character-modal .modal {
    max-height: calc(92dvh - 66px - env(safe-area-inset-bottom, 0px)) !important;
  }
  #character-modal .modal-body { padding-bottom: 14px !important; }
  #character-modal .modal-actions {
    padding-bottom: 12px !important;                 /* 已经不在屏幕最底部，不必再叠安全区 */
    background: #FBF8F1 !important;
    border-top: 1px solid #EFE9DC !important;
  }

  /* 标签：深色填充 → 纸色药丸 */
  #character-modal .tag {
    background: #EAF1ED !important; border: 1px solid #CCE0D6 !important;
    color: #205850 !important; font-size: 11.5px; padding: 3px 9px;
  }
  /* 状态药丸：统一自纸卡；语义色只改文字 */
  #character-modal .status-chip {
    background: #fff !important; border: 1px solid #E9E2D3 !important;
    color: #5E6F6A !important; font-size: 11.5px; padding: 4px 10px;
  }
  #character-modal .status-chip[data-visibility="public"] { color: #8A4A35 !important; border-color: #E7C8C1 !important; }
  #character-modal .status-chip[data-machine="passed"] { color: #205850 !important; border-color: #CCE0D6 !important; }
  #character-modal .status-chip[data-machine="blocked"] { color: #A2544A !important; border-color: #EBD9D4 !important; }

  /* 关闭按钮：圆形白底，浮在装饰插画之上 */
  #character-modal .modal-close {
    width: 30px !important; height: 30px !important;
    border-radius: 999px !important; border: 1px solid #E9E2D3 !important;
    background: #fff !important; color: #6B6456 !important;
    display: grid !important; place-items: center;
    font-size: 16px; line-height: 0; z-index: 3; position: relative;
  }
  #character-modal .modal-head { position: relative; z-index: 2; }
  #character-modal .modal-head::after { z-index: 0 !important; opacity: .12 !important; pointer-events: none; }
  /* 标题两行时别把关闭按钮挤下去 */
  #character-modal .modal-head { align-items: flex-start !important; }
  #character-modal .modal-head h2 { line-height: 1.3 !important; }
  #character-modal .card-meta { margin-top: 6px !important; }
}

@media (max-width: 860px) {
  /* 「分级：SF16（长解释）」这类会长成两行 → 999px 胶囊很难看，统一收到 12px 圆角 */
  #character-modal .status-chip { border-radius: 12px !important; line-height: 1.55; }
  #character-modal .tag { border-radius: 999px !important; }
}

@media (max-width: 860px) {
  /* ① 弹窗必须盖过底部悬浮件（App Tab 栏 z=60、货币浮条 z=60）：
        之前 .modal-backdrop 只有 z-index:20，货币浮条会飘在「开始聊天」按钮上面。 */
  #character-modal.modal-backdrop { z-index: 80 !important; }
}

/* ============================ 创建角色卡（docs/110） ============================
 * 工作区走水墨浅色皮肤（与「我的角色」一致），只新增 cc- 前缀的类，不改既有组件。
 * 移动端一次只显示一栏：填写 / 卡设补全（data-pane 互斥），与卡设补全工作区同一套做法。
 */
.cc-workspace { gap: 18px; padding-bottom: 96px; }
.cc-head { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.cc-head > .button { justify-self: start; width: auto; align-self: flex-end; }
.cc-banner { padding: 10px 14px; border-radius: 6px; font-size: 13px; line-height: 1.6; }
.cc-banner.is-error { border: 1px solid #e3b7ad; background: #fdf1ee; color: #a8402a; }
.cc-banner.is-ok { border: 1px solid #a9d3c4; background: #f0f9f5; color: #14614f; }

.cc-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; min-width: 0; }
.cc-pane { display: grid; gap: 14px; min-width: 0; }
.cc-mobile-tabs { display: none; }
.cc-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-mode-tab { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--ym-line); border-radius: 6px; background: #fff; color: var(--ym-ink); text-align: left; font-size: 14px; font-weight: 600; cursor: pointer; }
.cc-mode-tab small { color: var(--ym-muted); font-size: 11.5px; font-weight: 400; }
.cc-mode-tab.is-active { border-color: #8ec6b9; background: #f2faf6; box-shadow: inset 3px 0 0 var(--ym-green); }
.cc-mode-note { margin: 0; color: var(--ym-muted); font-size: 12.5px; line-height: 1.65; }

.cc-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ym-line); border-radius: 8px; background: #fff; min-width: 0; }
.cc-avatar-row { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cc-avatar { flex: none; width: 96px; height: 120px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #c9d8d2; border-radius: 8px; background: var(--ym-paper-2); color: var(--ym-muted); }
.cc-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.cc-avatar-placeholder svg { width: 34px; height: 34px; opacity: .5; }
.cc-avatar-copy { display: grid; gap: 8px; min-width: 0; }
.cc-avatar-copy strong { font-size: 13px; color: var(--ym-ink); }
.cc-avatar-copy small { color: var(--ym-muted); font-size: 12px; line-height: 1.6; }
.cc-upload { justify-self: start; position: relative; overflow: hidden; }

.cc-field { display: grid; gap: 6px; min-width: 0; }
.cc-field > span { color: var(--ym-ink); font-size: 13px; font-weight: 600; }
.cc-field > small { color: var(--ym-muted); font-size: 11.5px; line-height: 1.55; }
.cc-field input, .cc-field textarea, .cc-field select { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid #cfdcd6; border-radius: 5px; background: #fff; color: var(--ym-ink); font-size: 13.5px; line-height: 1.6; }
.cc-field textarea { resize: vertical; }
.cc-field input:focus, .cc-field textarea:focus, .cc-field select:focus { border-color: #7fbcac; outline: 2px solid rgba(8, 120, 109, .16); }
.cc-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.cc-advanced { display: grid; gap: 14px; padding-top: 6px; border-top: 1px dashed #dbe6e0; }
.cc-advanced h3 { margin: 4px 0 0; color: var(--ym-green); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cc-npc-editor { display: grid; gap: 8px; }
.cc-npc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-npc-head strong { font-size: 13px; color: var(--ym-ink); }
.cc-npc-editor > small { color: var(--ym-muted); font-size: 11.5px; line-height: 1.55; }
.cc-npc-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr auto; gap: 8px; align-items: center; }
.cc-npc-row input { min-width: 0; padding: 8px 10px; border: 1px solid #cfdcd6; border-radius: 5px; background: #fff; color: var(--ym-ink); font-size: 13px; }
.cc-workspace ::placeholder { color: #8fa39b; opacity: 1; }
.cc-empty { margin: 0; padding: 10px 12px; border: 1px dashed #d7e3dd; border-radius: 6px; color: var(--ym-muted); font-size: 12.5px; line-height: 1.6; }

.cc-completion-card { position: sticky; top: 12px; gap: 12px; background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 60%); }
.cc-completion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cc-completion-head h2 { margin: 4px 0 0; font-size: 20px; color: var(--ym-ink); }
.cc-count { padding: 3px 9px; border-radius: 999px; background: #e9f4ef; color: var(--ym-green-dark); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cc-completion-copy { margin: 0; color: var(--ym-muted); font-size: 12.5px; line-height: 1.7; }
.cc-completion-copy strong { color: var(--ym-ink); }
.cc-completion-points { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--ym-muted); font-size: 12.5px; line-height: 1.6; }
.cc-completion-actions { display: grid; gap: 8px; }
.cc-completion-actions .button { justify-self: start; }
.cc-hint { color: var(--ym-muted); font-size: 11.5px; }
.cc-completion-status { display: grid; gap: 2px; padding-top: 8px; border-top: 1px dashed #dbe6e0; font-size: 12px; color: var(--ym-green-dark); }
.cc-completion-status small { color: var(--ym-muted); font-size: 11.5px; }

.cc-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ym-line); border-radius: 8px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.cc-status { color: var(--ym-muted); font-size: 12.5px; }
.cc-footer-buttons { display: flex; gap: 8px; }

@media (max-width: 1080px) {
  .cc-body { grid-template-columns: minmax(0, 1fr); }
  .cc-completion-card { position: static; }
}

@media (max-width: 760px) {
  .cc-mobile-tabs { display: flex; gap: 6px; }
  .cc-mobile-tab { flex: 1; padding: 9px 10px; border: 1px solid var(--ym-line); border-radius: 999px; background: #fff; color: var(--ym-muted); font-size: 12.5px; }
  .cc-mobile-tab.is-active { border-color: #8ec6b9; background: #f2faf6; color: var(--ym-green-dark); font-weight: 600; }
  .cc-body[data-pane="form"] .cc-completion-pane { display: none; }
  .cc-body[data-pane="completion"] .cc-form-pane { display: none; }
  .cc-npc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-npc-row .button { grid-column: 1 / -1; justify-self: start; }
  .cc-row-2 { grid-template-columns: minmax(0, 1fr); }
  .cc-workspace { padding-bottom: 132px; }
  .cc-head > .button { width: auto; }
  .cc-footer { flex-direction: column; align-items: stretch; }
  .cc-footer-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-avatar { width: 76px; height: 96px; }
}

/* 草稿角标（docs/110）：与"已个人补全"区分开——前者是创建流程状态，后者是覆盖层状态 */
.card-draft-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px dashed #c8b273; background: #fdf8ea; color: #8a6d24; font-size: 11px; line-height: 1.6; white-space: nowrap; }

/* ============================ 开场白「序章」（docs/110 2026-10-24） ============================
 * 角色对外简介作为富文本块渲染在**第一条 AI 消息上方**：只做展示、不进提示词。
 * 内部沿用 .message-html-segment 的既有美化规则（标题/列表/引用/表格样式全部生效），
 * 这里只负责"一块卡片 + 长文折叠"这层壳。
 */
.card-prologue { margin: 0 0 14px; padding: 14px 16px 16px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; background: linear-gradient(180deg, rgba(38, 42, 46, .72), rgba(26, 29, 32, .62)); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.card-prologue-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 255, 255, .10); }
.card-prologue-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.card-prologue-toggle { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 12px; cursor: pointer; }
.card-prologue-toggle:hover { background: rgba(255, 255, 255, .12); }
.card-prologue-body { position: relative; }
.card-prologue-body.is-clamped { max-height: 320px; overflow: hidden; }
.card-prologue-body.is-clamped::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 72px; background: linear-gradient(rgba(26, 29, 32, 0), rgba(26, 29, 32, .96)); pointer-events: none; }
.card-prologue-body > :first-child { margin-top: 0; }
.card-prologue-body > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .card-prologue { padding: 12px 13px 14px; border-radius: 10px; }
  .card-prologue-body.is-clamped { max-height: 240px; }
}

/* ============================ 卡类型与补全双模式（docs/113） ============================
 * 创建页：单人卡 / 世界卡 切换（浅色水墨皮肤）
 * 补全面板：单人卡 / 世界卡 切换 + 世界模块的五层分组（浅色面板）
 */
/* 卡类型：高级模式里的**从属**选择（比上面的模式切换轻一档，2026-10-24 产品要求） */
.cc-kind-picker { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #e6ece7; border-radius: 6px; background: #fbfdfb; }
.cc-kind-picker-head { display: flex; align-items: baseline; gap: 8px; }
.cc-kind-picker-head strong { color: var(--ym-ink); font-size: 12.5px; }
.cc-kind-picker-head small { color: var(--ym-muted); font-size: 11px; }
.cc-kind-options { display: grid; gap: 6px; }
.cc-kind-option { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.cc-kind-option:hover { background: #f2f8f4; }
.cc-kind-option.is-selected { border-color: #cfe6dc; background: #f0f8f4; }
.cc-kind-option input { margin: 2px 0 0; accent-color: var(--ym-green); }
.cc-kind-option > span { display: grid; gap: 2px; min-width: 0; }
.cc-kind-option strong { color: var(--ym-ink); font-size: 12.5px; font-weight: 600; }
.cc-kind-option small { color: var(--ym-muted); font-size: 11px; line-height: 1.5; }

.card-completion-kind { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #e2ece7; border-radius: 8px; background: #f7fbf9; }
.card-completion-kind-label { display: grid; gap: 2px; color: var(--ym-ink); font-size: 12.5px; font-weight: 700; }
.card-completion-kind-label small { color: var(--ym-muted); font-size: 11px; font-weight: 400; }
.card-completion-kind-tabs { display: flex; gap: 4px; flex: none; }
.card-completion-kind-tab { padding: 5px 12px; border: 1px solid #cfdeda; border-radius: 999px; background: #fff; color: var(--ym-muted); font-size: 12px; cursor: pointer; }
.card-completion-kind-tab.is-active { border-color: #8ec6b9; background: #eef8f3; color: var(--ym-green-dark); font-weight: 600; }
.card-completion-kind-tab:disabled { opacity: .5; cursor: not-allowed; }

.card-completion-layers { display: grid; gap: 12px; min-width: 0; }
.card-completion-layer { display: grid; gap: 6px; min-width: 0; }
.card-completion-layer-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 4px; border-bottom: 1px dashed #e2ece7; }
.card-completion-layer-head strong { color: var(--ym-green-dark); font-size: 12px; letter-spacing: .06em; }
.card-completion-layer-head small { color: var(--ym-muted); font-size: 11px; }

@media (max-width: 760px) {
  .card-completion-kind { flex-direction: column; align-items: stretch; }
  .card-completion-kind-tabs { justify-content: flex-end; }
}

/* W3：补全前快照条（应用过才有）。只做"回到那一刻"，不是版本管理 */
.card-completion-snapshot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 4px; padding: 8px 12px; border: 1px solid #e2ece7; border-radius: 8px; background: #f7fbf9; color: var(--ym-muted); font-size: 12px; }
.card-completion-snapshot .button { flex: none; }
@media (max-width: 760px) { .card-completion-snapshot { flex-direction: column; align-items: stretch; margin: 0 10px 4px; } }

/* ============================ 作者页（docs/119） ============================ */
.author-view { gap: 22px; }
.author-head { display: flex; align-items: flex-start; gap: 20px; padding: 20px; border: 1px solid var(--ink-line); border-radius: 12px; background: #fff; box-shadow: var(--ink-shadow); }
.author-avatar { flex: none; display: grid; place-items: center; object-fit: cover; background: var(--ink-soft); color: var(--ink-green); font-weight: 800; border-radius: 50%; }
.author-avatar.is-large { width: 92px; height: 92px; font-size: 34px; }
.author-avatar.is-small { width: 44px; height: 44px; font-size: 18px; }
.author-head-copy { display: grid; gap: 6px; min-width: 0; flex: 1; }
.author-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.author-name-row h1 { margin: 0; color: var(--ink-text); font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.author-official { padding: 1px 8px; border-radius: 999px; background: #fbf3e2; color: #8a6d24; font-size: 11px; border: 1px solid #e8d6ac; }
.author-self { padding: 1px 8px; border-radius: 999px; background: var(--ink-soft); color: var(--ink-green); font-size: 11px; }
.author-handle { margin: 0; color: var(--ink-muted); font-size: 12.5px; }
.author-signature { margin: 2px 0 0; color: var(--ink-text); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.author-stats { display: flex; gap: 18px; margin-top: 6px; }
.author-stats span { display: grid; gap: 1px; }
.author-stats strong { color: var(--ink-text); font-size: 17px; }
.author-stats em { color: var(--ink-muted); font-size: 11px; font-style: normal; }
.author-head-actions { flex: none; }
.author-works { display: grid; gap: 12px; }
.author-works-head { display: flex; align-items: baseline; gap: 10px; }
.author-works-head h2 { margin: 0; color: var(--ink-text); font-size: 18px; }
.author-works-head small { color: var(--ink-muted); font-size: 12px; }
.author-empty { padding: 28px; }
.card-author-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted; cursor: pointer; }
.card-author-link:hover { color: var(--ym-green); }

.following-list { display: grid; gap: 10px; }
.following-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ink-line); border-radius: 10px; background: #fff; }
.following-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.following-copy { display: grid; gap: 2px; min-width: 0; }
.following-copy strong { color: var(--ink-text); font-size: 14px; overflow-wrap: anywhere; }
.following-copy small { color: var(--ink-muted); font-size: 12px; overflow-wrap: anywhere; }
.following-stats { margin-left: auto; color: var(--ink-muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 760px) {
  .author-head { flex-wrap: wrap; padding: 16px; }
  .author-head-actions { width: 100%; }
  .author-head-actions .button { width: 100%; }
  .author-avatar.is-large { width: 68px; height: 68px; font-size: 26px; }
  .following-row { flex-wrap: wrap; }
  .following-stats { width: 100%; margin-left: 0; }
}

/* 无头像的卡：渐变占位（新建卡常见），别再显示成一块黑 */
.card-art.is-missing { background: linear-gradient(135deg, #2b3a3f 0%, #46595c 55%, #2f4348 100%); }

/* 卡设字数预算（docs/120）：超过 2 万字时变红，且「完成创建」会被禁用 */
.cc-budget { margin-left: 4px; color: var(--ym-muted); font-size: 11.5px; }
.cc-budget.is-over { color: #b8482f; font-weight: 600; }

/* 性别（2026-10-25）：创建页单选 + 详情标签行里的一枚中性胶囊 */
.cc-field-inline select { max-width: 200px; }
.tag-gender { background: #eef2f6; color: #3f5262; border-color: #dbe4ec; }

/* ── 作者标识（2026-10-25）：卡片不点开也能看出作者 ── */
.author-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; max-width: 100%; color: var(--ym-muted); font-size: 11.5px; cursor: pointer; }
.author-chip:hover .author-chip-name { color: var(--ym-ink); text-decoration: underline; }
.author-chip-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.author-chip-avatar.is-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ym-ink); }
.author-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-author { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.modal-author-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.modal-author-avatar.is-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ym-ink); }
.modal-author-name { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ym-ink); cursor: pointer; }
.modal-author-name:hover { text-decoration: underline; }

/* ── 审核：禁止维度与修改建议 ── */
.review-blocked { color: #b8482f; }
.review-suggestion { color: #8a6d1f; }

/* ── 消息中心（铃铛） ── */
.ink-head-actions { position: relative; }
.ink-notify-btn { position: relative; }
.ink-notify-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c2452f; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.notify-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 30, 25, .14); z-index: 60; padding: 10px 4px 6px; }
.notify-head { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; border-bottom: 1px solid var(--line); }
.notify-head strong { font-size: 13.5px; }
.notify-count { margin-left: auto; color: var(--ym-muted); font-size: 11.5px; }
.notify-readall { border: 0; background: none; color: var(--ym-ink); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-item { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.04); cursor: pointer; }
.notify-item:last-child { border-bottom: 0; }
.notify-item:hover { background: var(--panel-2); }
.notify-item.is-unread .notify-title::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c2452f; margin-right: 6px; vertical-align: middle; }
.notify-title { font-size: 13px; font-weight: 600; color: var(--ym-ink); }
.notify-body { margin: 4px 0 2px; font-size: 12px; line-height: 1.5; color: var(--ym-muted); }
.notify-time { color: var(--ym-muted); font-size: 11px; }
.notify-empty { padding: 18px 12px; color: var(--ym-muted); font-size: 12.5px; text-align: center; }

/* 消息类型标签（审核 / 关注 / 收藏 / 公告） */
.notify-kind { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--ym-muted); font-size: 10.5px; font-weight: 600; }
.notify-kind-announcement .notify-kind { background: #e8f0e9; color: #2f6b46; }
.notify-kind-review .notify-kind { background: #f3ece0; color: #8a6d1f; }
.notify-kind-follow .notify-kind, .notify-kind-favorite .notify-kind { background: #eaf0f6; color: #35618c; }
.notify-item.is-unread .notify-title::before { content: none; }
.notify-item.is-unread { background: rgba(215, 233, 222, .35); }

/* ── 富文本块的段落间距（2026-10-25）─────────────────────────────
   上面第 152 行有全局 `h1, h2, p { margin: 0 }` 重置，聊天消息靠
   `.message-content p { margin: 0 0 10px }` 单独救回来了，但**序章 / 简介**
   这些块没有对应规则 → 3 个 <p> 贴在一起，肉眼看就是"没有换行"。
   这里给所有富文本容器统一恢复段落节奏。 */
.info-text p,
.prologue-render p,
.message-html-segment p,
.card-prologue-body p,
.chat-context-section p { margin: 0 0 1.15em; }
.info-text p:last-child,
.prologue-render p:last-child,
.message-html-segment p:last-child,
.card-prologue-body p:last-child { margin-bottom: 0; }
.info-text h1, .info-text h2, .info-text h3, .info-text h4,
.prologue-render h1, .prologue-render h2, .prologue-render h3, .prologue-render h4,
.message-html-segment h1, .message-html-segment h2, .message-html-segment h3, .message-html-segment h4,
.card-prologue-body h1, .card-prologue-body h2, .card-prologue-body h3, .card-prologue-body h4 {
  margin: .1em 0 .5em;
  line-height: 1.45;
}
.info-text ul, .info-text ol,
.prologue-render ul, .prologue-render ol,
.message-html-segment ul, .message-html-segment ol { margin: .4em 0 .6em; padding-left: 1.25em; }
.info-text li, .prologue-render li, .message-html-segment li { margin: 0 0 .28em; }
.info-text br, .prologue-render br, .message-html-segment br { line-height: 2; }

/* 2026-10-25：序章是给玩家读的正文，不要塞进 180px 的小滚动框里；
   段落间距也按"一个空行"来给（1.15em + 1.75 行高），否则 3 段仍像一整块。 */
#modal-root .info-text#character-description,
#modal-root #character-prologue .info-text { max-height: none; overflow: visible; line-height: 1.8; }
#modal-root #character-prologue p { margin: 0 0 1.15em; }

/* ══════════ 存档面板：手机端（≤820px）整屏抽屉（2026-10-27）══════════
   为什么需要这一段：上面「按设计稿」那一整套规则是**桌面居中标卡**——
   width:min(890px, 100vw-40px) !important / display:block !important /
   height:fit-content !important / 工具行 flex nowrap !important，
   把早先那条 @media(max-width:820px) 全压掉了。于是手机上是：卡在屏幕中间留一圈边、
   工具行横向溢出（「保存当前进度」被切掉一半）、底部内容被裁、分组标题被挤成竖排。
   这里在文件末尾统一收口（同权重下后出现的 !important 才赢），把手机端拉回整屏抽屉。 */
@media (max-width: 820px) {
  .chat-archive-workspace {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #FBF8F1 !important;
    z-index: 80 !important;
  }
  /* 头部：标题独占一行、按钮排一行；顶部留出状态栏/刘海 */
  .chat-archive-header {
    flex: none;
    gap: 8px !important;
    padding: calc(12px + env(safe-area-inset-top)) 14px 10px !important;
    margin: 0 !important;
    border-bottom: 1px dashed #E4DCCB !important;
  }
  .chat-archive-header h2 { font-size: 22px !important; }
  .chat-archive-header p { margin: 2px 0 0 !important; font-size: 12px !important; line-height: 1.5; }
  .chat-archive-header .chat-archive-kicker { font-size: 9px !important; }
  .chat-archive-header > .chat-archive-back,
  .chat-archive-header > .chat-archive-return,
  .chat-archive-header > .chat-archive-snapshot {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
  /* 工具行：输入框整行 → 主操作整行 → 两个次操作各半行（不再横向溢出） */
  .chat-archive-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex: none;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow: visible !important;
  }
  .chat-archive-toolbar .chat-archive-name { grid-column: 1 / -1; flex: none !important; min-width: 0 !important; }
  .chat-archive-toolbar .chat-archive-name input,
  .chat-archive-toolbar input { width: 100% !important; height: 42px !important; font-size: 14px !important; }
  .chat-archive-toolbar .button {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    justify-content: center;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  .chat-archive-toolbar .button[data-chat-archive-action="create"],
  .chat-archive-toolbar .button[data-chat-archive-action="bulk-delete"] { grid-column: 1 / -1; }
  /* 列表区：自己滚（不跟着整块面板滚），底部留安全区 */
  .chat-archive-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .chat-archive-list { padding: 0 !important; }
  .chat-archive-error { margin: 0 14px 8px !important; }
  /* 存档行：标题整行 + 操作整行，按钮等分 */
  .chat-archive-card,
  .chat-archive-sibling {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  .chat-archive-card-main { flex: 1 1 100%; }
  .chat-archive-card-actions { margin-left: 0 !important; width: 100%; gap: 8px; flex-wrap: wrap; }
  .chat-archive-card-actions .button {
    flex: 1 1 30%;
    min-width: 0 !important;
    height: 38px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }
  /* 长卡名给两行（桌面那条 nowrap+ellipsis 在手机上只剩半句） */
  .chat-archive-card-main strong,
  .chat-archive-sibling strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
  }
  /* 分组头：头像在左、卡名在右自动折行、「· N 条存档」落到卡名下面（不再被挤成竖排单字） */
  .chat-archive-others h3 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px !important; align-items: center; font-size: 14px !important;
  }
  .chat-archive-others h3 > .chat-archive-avatar { grid-row: 1 / span 2; }
  .chat-archive-others h3 em { grid-column: 2; flex: 0 0 auto; }
  .chat-archive-avatar { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  /* 「存档内容」浮层：整屏内嵌，头/尾按钮等分 */
  .chat-archive-viewer > header { padding: 14px 14px 12px !important; }
  .chat-archive-viewer-body { padding: 12px 14px !important; }
  .chat-archive-viewer > footer { flex-wrap: wrap; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important; }
  .chat-archive-viewer > footer .button { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* 模型工作区底部确认条（2026-10-28）：选模型只预览，点「使用该模型」才生效。
 * 配色全部走工作区自己的 --rw-* 变量（青绿 accent / 半透明白线），否则和聊天页主题对不上。 */
.model-workspace-confirm {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 28px;
  border-top: 1px solid var(--rw-line-strong, rgba(255, 255, 255, .14));
  background: var(--rw-bg, #0c0d0f);
}
.model-workspace-confirm .model-confirm-copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.model-workspace-confirm .model-confirm-copy small { color: var(--rw-muted, rgba(255, 255, 255, .46)); font-size: 11px; }
.model-workspace-confirm .model-confirm-copy strong {
  overflow: hidden; color: var(--rw-text, #fff); font-size: 13px; font-weight: 500;
  text-overflow: ellipsis; white-space: nowrap;
}
.model-workspace-confirm .model-confirm-cancel,
.model-workspace-confirm .model-confirm-apply {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 10px;
  font-size: 13px; line-height: 1.2; cursor: pointer; transition: background .15s ease, filter .15s ease;
}
.model-workspace-confirm .model-confirm-cancel {
  border: 1px solid var(--rw-line-strong, rgba(255, 255, 255, .14));
  background: transparent; color: var(--rw-text, #fff);
}
.model-workspace-confirm .model-confirm-cancel:hover { background: rgba(255, 255, 255, .06); }
.model-workspace-confirm .model-confirm-apply {
  border: 1px solid transparent; background: var(--rw-accent, #7fc7b5); color: #0c0d0f; font-weight: 600;
}
.model-workspace-confirm .model-confirm-apply:hover { filter: brightness(1.06); }
.model-workspace-confirm .model-confirm-apply:disabled {
  background: rgba(255, 255, 255, .08); color: var(--rw-muted, rgba(255, 255, 255, .46));
  cursor: default; filter: none;
}
@media (max-width: 820px) {
  .model-workspace-confirm { position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .model-workspace-confirm .model-confirm-cancel,
  .model-workspace-confirm .model-confirm-apply { padding: 8px 14px; }
}

/* 2026-10-31 分层：AI 侧信息最底部的切层控件（居右，仅有第二层时出现） */
.message-layers {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /* 与操作按钮同一行：靠左边距自动推到最右（2026-10-31） */
  margin: 0 2px 0 auto;
  color: var(--text-muted, #8a8f98);
  font-size: 12px;
  user-select: none;
}
.message-layer-step {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.message-layer-step:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.message-layer-step:disabled,
.message-layer-step[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.message-layer-count { font-variant-numeric: tabular-nums; }

/* 对外简介「美化渲染」预览（2026-11-01）：作者点一下就能看到发布后的样子 */
.cc-beautify { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -2px; }
.cc-beautify > small { color: var(--ym-muted); font-size: 11.5px; line-height: 1.5; }
.cc-beautify-button { padding: 6px 12px; font-size: 12.5px; }
.cc-beautify-preview {
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px dashed #cfdcd6;
  border-radius: 8px;
  background: #fff;
}
.cc-beautify-preview::before {
  content: "美化展示效果（仅你可见，未保存）";
  display: block;
  margin-bottom: 8px;
  color: var(--ym-muted);
  font-size: 11.5px;
}
.cc-beautify-preview .info-text { max-height: 420px; white-space: normal; color: var(--ym-ink); }
.cc-beautify-preview .prologue-render p { margin: 1.15em 0; line-height: 1.8; }
.cc-beautify-preview .prologue-render h1,
.cc-beautify-preview .prologue-render h2,
.cc-beautify-preview .prologue-render h3 { margin: 0.9em 0 0.5em; }

/* 必填 / 选填 徽标（2026-11-01）：口径与后端 creationCompleteness 完全一致 */
.cc-req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #d5e3dc;
  background: #f4f8f6;
  color: var(--ym-muted);
  font-size: 10.5px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;
  vertical-align: 1px;
}
.cc-req.is-required { border-color: #e5b7a8; background: #fdf1ec; color: #a4553c; }
.cc-legend { margin: 2px 0 10px; color: var(--ym-muted); font-size: 12px; line-height: 1.7; }
.cc-npc-head strong, .cc-avatar-copy strong { display: inline-flex; align-items: center; }

/* 卡级世界书编辑器（2026-11-01） */
.cc-wb-editor { display: grid; gap: 10px; margin: 8px 0 4px; }
.cc-wb-actions { display: flex; justify-content: flex-start; }
.cc-wb-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid #d5e3dc; border-radius: 8px; background: #fbfdfb; }
.cc-wb-head { display: flex; gap: 8px; align-items: center; }
.cc-wb-head input { flex: 1; }
.cc-wb-remove { padding: 4px 10px; font-size: 12px; }
.cc-wb-row input, .cc-wb-row textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfdcd6; border-radius: 5px; background: #fff; color: var(--ym-ink); font-size: 13px; line-height: 1.6; }
.cc-wb-row textarea { resize: vertical; }

/* 世界书填写引导（示例 + 能写/别写，2026-11-01） */
.cc-wb-guide { display: grid; gap: 8px; margin: 8px 0 10px; padding: 12px 14px; border: 1px solid #e3ece7; border-radius: 8px; background: #f8fbf9; }
.cc-wb-guide-example { display: grid; gap: 4px; }
.cc-wb-guide-tag { display: inline-block; width: fit-content; padding: 1px 7px; border-radius: 999px; background: #e8f3ec; color: #2f5d4e; font-size: 11px; font-weight: 600; }
.cc-wb-guide-example dl { margin: 0; display: grid; gap: 2px; }
.cc-wb-guide-example dl > div { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.7; }
.cc-wb-guide-example dt { flex: 0 0 52px; color: var(--ym-muted); }
.cc-wb-guide-example dd { margin: 0; color: var(--ym-ink); }
.cc-wb-guide-example small { color: var(--ym-muted); font-size: 11.5px; }
.cc-wb-guide-list { margin: 2px 0 0; padding-left: 18px; color: var(--ym-ink); font-size: 12.5px; line-height: 1.75; }
.cc-wb-guide-list strong { color: #2f5d4e; }
.cc-wb-actions { display: flex; gap: 8px; }

/* 世界书独立字数计数（不占卡设额度） */
.cc-wb-count { margin-left: 6px; color: var(--ym-muted); font-size: 11.5px; }
.cc-wb-count.is-over { color: #a4553c; font-weight: 600; }

/* 卡设预算预警（2026-11-01）：70% 提醒 / 超限标红 */
.cc-warn { display: block; margin-top: 4px; color: #8a6d3b; font-size: 11.5px; line-height: 1.6; }
.cc-warn.is-over { color: #a4553c; font-weight: 600; }

/* 「把世界观拆进世界书」按钮与提案面板（2026-11-02） */
.cc-distill-button { margin-left: 8px; padding: 3px 10px; border: 1px solid #7bb79a; border-radius: 999px; background: #e8f3ec; color: #1f4a3a; font-size: 11.5px; cursor: pointer; }
.cc-distill-panel { margin: 8px 0; padding: 12px 14px; border: 1px solid #cfe3d7; border-radius: 10px; background: #f7fbf9; font-size: 12.5px; color: var(--ym-ink); }
.cc-distill-panel.is-busy { color: var(--ym-muted); }
.cc-distill-head { font-weight: 600; margin-bottom: 6px; }
.cc-distill-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.cc-distill-keys { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 6px; }
.cc-distill-keys em { font-style: normal; padding: 0 6px; border-radius: 999px; background: #e8f3ec; color: #2f5d4e; font-size: 11px; }
.cc-distill-keys em.is-empty { background: #f2f4f3; color: var(--ym-muted); }
.cc-distill-list small { display: block; color: var(--ym-muted); }
.cc-distill-trim { margin: 8px 0; color: var(--ym-muted); }
.cc-distill-trim em { font-style: normal; color: var(--ym-ink); }
.cc-distill-actions { display: flex; gap: 8px; }