: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; }
.chat-title-editor { display: grid; gap: 5px; min-width: 0; }
.chat-title-editor input { width: min(360px, 100%); min-width: 0; border: 1px solid var(--accent-2); border-radius: 6px; padding: 6px 8px; background: #11181d; color: var(--text); }
.chat-title-editor-actions { display: flex; gap: 6px; }
.chat-title-editor-actions .button { padding: 4px 9px; font-size: 12px; }
.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)）。 */
/* 存档附着贴片：absolute 贴输入框上沿右侧（旧云梦 #st-chat-quick-actions, right:0 bottom:calc(100%+6px)），与模型贴片同排 */
.chat-quick-actions { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 8; width: 28px; }
.chat-quick-actions-toggle { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--glass-bg-chip); color: rgba(248, 249, 251, .92); cursor: pointer; font-size: 11px; box-shadow: var(--glass-highlight); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); }
.chat-quick-actions-toggle svg { width: 13px; height: 13px; }
.chat-quick-actions-toggle:hover, .chat-quick-actions-toggle:focus-visible { background: rgba(64, 64, 64, .92); color: #fff; border-color: rgba(255, 255, 255, .38); }
/* 存档菜单向上弹（旧云梦 #st-chat-quick-actions-menu 在按钮上方），完整 UI 对齐 */
.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; }
.message-edit-input { display: block; width: min(560px, 100%); min-height: 96px; resize: vertical; border: 1px solid var(--accent-2); border-radius: 7px; padding: 9px 10px; background: #11181d; color: var(--text); line-height: 1.55; }
.message-edit-actions { display: flex; gap: 7px; margin-top: 8px; }
.message-edit-actions .button { padding: 5px 10px; font-size: 12px; }
.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; }

/* 世界设定（世界书）条目列表：一行 = 选择区 + 启用开关 */
.world-entry-list { display: grid; gap: 6px; margin-bottom: 12px; }
.world-entry-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.world-entry-row.is-selected { border-color: #5a887f; background: #20383b; }
.world-entry-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 { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.world-entry-pick small { color: var(--muted); font-size: 11px; }
.world-entry-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 { font-size: 12px; overflow-wrap: anywhere; }
.plot-world-row small { margin-left: auto; color: var(--ym-muted); font-size: 10.5px; white-space: nowrap; }
.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-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; }
.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 + 字数换行，保证桌面与手机都不横向溢出。 */
.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(--line); border-radius: 8px; background: var(--panel); }
.import-copy { min-width: 0; flex: 1 1 240px; display: grid; gap: 6px; }
.import-copy strong { font-size: 14px; }
.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); }
.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; }
  .chat-title-editor input { width: min(220px, 100%); }
  .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; }
/* ── 卡设补全：对齐旧云梦的补全工作区（模块级重生成 / 历史 / 人设参考）── */
.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); }