/* --- [Vesper] 视觉核心层 (Visual Core) --- */
/* 1. 默认主题 (Default - 白雾) */
:root {
--bg: #EFF2F2;
--bg-rgb: 239, 242, 242;
--card-bg: #FFFFFF;
--text: #22303E;
--accent: #5D6973;
--accent-rgb: 93, 105, 115;
--highlight: #B7BEBD;
--completed: #5D6973;
--daily: #78909C;
--deadline: #D32F2F;
--gold: #FFB74D;
--shadow: 0 4px 15px rgba(34, 48, 62, 0.05);
--mystery-1: #CFD8DC;
--mystery-2: #B0BEC5;
}
/* 3. 白雾 (Fog) - 工业冷淡风 */
[data-theme="fog"] {
--bg: #EFF2F2;
--bg-rgb: 239, 242, 242;
--card-bg: #FFFFFF;
--text: #22303E;
--accent: #5D6973;
--accent-rgb: 93, 105, 115;
--highlight: #B7BEBD;
--completed: #5D6973;
--daily: #78909C;
--deadline: #D32F2F;
--gold: #FFB74D;
--shadow: 0 4px 15px rgba(34, 48, 62, 0.05);
--mystery-1: #CFD8DC;
--mystery-2: #B0BEC5;
}
/* 4. 蓝白 (Dream) - 柔软的云端 */
[data-theme="dream"] {
--bg: #DFF2FC;
--bg-rgb: 223, 242, 252;
--card-bg: #FCF8E7;
--text: #546E7A;
--accent: #95C2E2;
--accent-rgb: 149, 194, 226;
--highlight: #A6D0F1;
--completed: #81D4FA;
--daily: #B39DDB;
--deadline: #F48FB1;
--gold: #FFE082;
--shadow: 0 4px 15px rgba(149, 194, 226, 0.15);
--mystery-1: #E1F5FE;
--mystery-2: #B3E5FC;
}
[data-theme="dream"] body {
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
}
/* 5. 青柠 (Lime) - 治愈的植物系 */
[data-theme="lime"] {
--bg: #E3F0E5;
--bg-rgb: 227, 240, 229;
--card-bg: #FFFFFF;
--text: #33691E;
--accent: #81C784;
--accent-rgb: 129, 199, 132;
--highlight: #C8E6CA;
--completed: #66BB6A;
--daily: #4DB6AC;
--deadline: #FF7043;
--gold: #DCE775;
--shadow: 0 4px 15px rgba(129, 199, 132, 0.1);
--mystery-1: #DCEDC8;
--mystery-2: #C5E1A5;
}
/* 6. 锈湖·根源 (Rusty Roots) - 证物档案
v1 重做 (2026-07-19): token 与全部视觉迁至 themes/roots.css (正典=RustPhone.dc.html 1a 档案纸)。
旧 div{font-family !important} 地毯已删 (d4o-b 同源雷), 字体由 roots.css 排版段接管。 */
/* 7. 墟构蓝坞 (Construct) - 未来考古学、解构线条、冷峻灰蓝 */
[data-theme="construct"] {
--bg: #f5f7fa;
--bg-rgb: 245, 247, 250;
--card-bg: #ffffff;
/* 不使用卡片底色，而是用线条勾勒 */
--text: #1a1b26;
/* 极深的蓝灰，近乎黑色的主色 */
--accent: #0a22f5;
/* 醒目的克莱因蓝/亮蓝，用于准星和交互点 */
--accent-rgb: 10, 34, 245;
--highlight: #b0c4de;
--completed: #1a1b26;
/* 完成态即回归本体黑色 */
--daily: #708090;
--deadline: #ff3333;
--gold: #0a22f5;
--shadow: 0 0 0 rgba(0, 0, 0, 0);
/* 抹除柔和阴影，全部用硬边线条替代 */
--mystery-1: #e2e8f0;
--mystery-2: #cbd5e1;
/* 独有变量：几何切割度 */
--cut-size: 10px;
}
[data-theme="construct"] body,
[data-theme="construct"] .sheet,
[data-theme="construct"] .mini-card,
[data-theme="construct"] .cell,
[data-theme="construct"] h1,
[data-theme="construct"] h2,
[data-theme="construct"] h3,
[data-theme="construct"] h4,
[data-theme="construct"] p,
[data-theme="construct"] span,
[data-theme="construct"] div,
[data-theme="construct"] label {
/* 与七日谈／昨日诗稿同系的细长衬线排版 */
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
letter-spacing: 0.02em;
}
[data-theme="construct"] .app-name,
[data-theme="construct"] .sys-clock,
[data-theme="construct"] .balance-pill,
[data-theme="construct"] .book-card-title,
[data-theme="construct"] .history-cost,
[data-theme="construct"] .shop-cost {
/* 保持部分核心数据的工业机械感 */
font-family: 'JetBrains Mono', 'Space Grotesk', monospace !important;
letter-spacing: 0;
}
/* 8. 七日谈 (Qīrìtán) - 黑底墨骨、金与朱砂、构成主义暴力轴 */
[data-theme="qirituan"] {
--bg: #0d0d0f;
--bg-rgb: 13, 13, 15;
--card-bg: #15161a;
--text: #e8e2d5;
--accent: #c9a961;
/* 古金 */
--accent-rgb: 201, 169, 97;
--highlight: #8a8577;
/* 银灰幽魂 */
--completed: #6e6a5a;
--daily: #a39b82;
--deadline: #c5432b;
/* 朱砂 */
--gold: #c9a961;
--shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
--mystery-1: #1f1b15;
--mystery-2: #2b241c;
/* 独有变量 */
--ink-red: #c5432b;
--cinnabar: #b23a24;
--silver-ghost: rgba(232, 226, 213, 0.08);
--ink-black: #080809;
}
[data-theme="qirituan"] body,
[data-theme="qirituan"] .sheet,
[data-theme="qirituan"] .mini-card,
[data-theme="qirituan"] .cell,
[data-theme="qirituan"] h1,
[data-theme="qirituan"] h2,
[data-theme="qirituan"] h3,
[data-theme="qirituan"] h4,
[data-theme="qirituan"] p,
[data-theme="qirituan"] span,
[data-theme="qirituan"] div,
[data-theme="qirituan"] label {
font-family: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'SimSun', serif !important;
letter-spacing: 0.01em;
}
[data-theme="qirituan"] .app-name,
[data-theme="qirituan"] .sys-clock,
[data-theme="qirituan"] .balance-pill,
[data-theme="qirituan"] .history-cost,
[data-theme="qirituan"] .shop-cost {
font-family: 'JetBrains Mono', 'IM Fell English', monospace !important;
letter-spacing: 0.04em;
}
/* 9. 昨日诗稿 (Yesterday) - 月白宣纸·磨砂手稿 */
[data-theme="yesterday"] {
--bg: #F4F1EB;
--bg-rgb: 244, 241, 235;
--card-bg: #FCFAF4;
--text: #2A2D33;
--accent: #4A6B7A;
--accent-rgb: 74, 107, 122;
--highlight: #C9D5DA;
--completed: #4A6B7A;
--daily: #B8956A;
--deadline: #A04A3D;
--gold: #B8956A;
--shadow: 0 6px 24px rgba(74, 107, 122, 0.10);
--mystery-1: #E8E4D6;
--mystery-2: #D5CFC0;
}
[data-theme="yesterday"] body,
[data-theme="yesterday"] .sheet,
[data-theme="yesterday"] .mini-card,
[data-theme="yesterday"] .cell,
[data-theme="yesterday"] h1,
[data-theme="yesterday"] h2,
[data-theme="yesterday"] h3,
[data-theme="yesterday"] h4,
[data-theme="yesterday"] p,
[data-theme="yesterday"] span,
[data-theme="yesterday"] div,
[data-theme="yesterday"] label {
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
}
[data-theme="yesterday"] .app-name,
[data-theme="yesterday"] .sys-clock,
[data-theme="yesterday"] .balance-pill {
font-family: 'Noto Serif SC', 'Songti SC', serif !important;
letter-spacing: 0.18em;
}
/* 昨日诗稿: body 全局背景 = 矢车菊水墨图 + 月白浅雾 mask */
[data-theme="yesterday"] body {
background-image:
linear-gradient(rgba(244, 241, 235, 0.50), rgba(244, 241, 235, 0.50)),
url('UI设计/参考/yesterday-bg.png') !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* 昨日诗稿: 卡片玻璃化 (奶白磨砂浮在水墨上) */
[data-theme="yesterday"] .mini-card,
[data-theme="yesterday"] .sheet,
[data-theme="yesterday"] .ai-report-card,
[data-theme="yesterday"] .modal-content,
[data-theme="yesterday"] .preview-card {
background: rgba(252, 250, 244, 0.55) !important;
backdrop-filter: blur(22px) saturate(140%) !important;
-webkit-backdrop-filter: blur(22px) saturate(140%) !important;
border: 1px solid rgba(74, 107, 122, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 10px 32px rgba(74, 107, 122, 0.10) !important;
}
/* 昨日诗稿: 顶/底 bar 玻璃化 */
[data-theme="yesterday"] .status-bar,
[data-theme="yesterday"] .nav-bar {
background: rgba(252, 250, 244, 0.55) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
border-color: rgba(74, 107, 122, 0.10) !important;
}
/* 昨日诗稿: 全局卡片玻璃化 — 抓所有用 var(--card-bg) 的 inline-style 卡片 + structured-card + 各种 item */
[data-theme="yesterday"] [style*="background:var(--card-bg)"],
[data-theme="yesterday"] [style*="background: var(--card-bg)"],
[data-theme="yesterday"] .structured-card,
[data-theme="yesterday"] .shop-item,
[data-theme="yesterday"] .mystery-box,
[data-theme="yesterday"] .wishlist-item,
[data-theme="yesterday"] .history-item,
[data-theme="yesterday"] .archive-item,
[data-theme="yesterday"] .focus-card,
[data-theme="yesterday"] .stat-card,
[data-theme="yesterday"] .info-card {
background: rgba(252, 250, 244, 0.55) !important;
backdrop-filter: blur(20px) saturate(140%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
border: 1px solid rgba(74, 107, 122, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 8px 26px rgba(74, 107, 122, 0.10) !important;
}
/* 10. 夜读残篇 (Midnight) - 深墨夜·封存海底磨砂玻璃 (yesterday 暗色双生) */
[data-theme="midnight"] {
--bg: #0E1218;
--bg-rgb: 14, 18, 24;
--card-bg: #1a2230;
--text: #D8DEE5;
--accent: #6E97AC;
--accent-rgb: 110, 151, 172;
--highlight: #92b4c4;
--completed: #6E97AC;
--daily: #92b4c4;
--deadline: #A04A3D;
--gold: #A88858;
--shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
--mystery-1: #1f2935;
--mystery-2: #2a3645;
}
[data-theme="midnight"] body,
[data-theme="midnight"] .sheet,
[data-theme="midnight"] .mini-card,
[data-theme="midnight"] .cell,
[data-theme="midnight"] h1,
[data-theme="midnight"] h2,
[data-theme="midnight"] h3,
[data-theme="midnight"] h4,
[data-theme="midnight"] p,
[data-theme="midnight"] span,
[data-theme="midnight"] div,
[data-theme="midnight"] label {
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
}
[data-theme="midnight"] .app-name,
[data-theme="midnight"] .sys-clock,
[data-theme="midnight"] .balance-pill {
font-family: 'Noto Serif SC', 'Songti SC', serif !important;
letter-spacing: 0.18em;
}
/* 夜读残篇: body 主界面背景 = 雪夜森林孤行三联画 + 深蓝雾 mask */
[data-theme="midnight"] body {
background-image:
linear-gradient(rgba(8, 12, 18, 0.65), rgba(8, 12, 18, 0.65)),
url('UI设计/参考/midnight-main-bg.jpg') !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* 夜读残篇: 卡片玻璃化 (深海封存玻璃浮在夜空上) */
[data-theme="midnight"] .mini-card,
[data-theme="midnight"] .sheet,
[data-theme="midnight"] .ai-report-card,
[data-theme="midnight"] .modal-content,
[data-theme="midnight"] .preview-card {
background: rgba(22, 30, 42, 0.42) !important;
backdrop-filter: blur(22px) saturate(120%) !important;
-webkit-backdrop-filter: blur(22px) saturate(120%) !important;
border: 1px solid rgba(140, 165, 195, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(140, 165, 195, 0.06),
0 12px 36px rgba(0, 0, 0, 0.5) !important;
}
/* 夜读残篇: 顶/底 bar 玻璃化 */
[data-theme="midnight"] .status-bar,
[data-theme="midnight"] .nav-bar {
background: rgba(18, 24, 34, 0.45) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
border-color: rgba(140, 165, 195, 0.08) !important;
}
/* 夜读残篇: 全局卡片玻璃化 — 抓所有用 var(--card-bg) 的 inline-style 卡片 + structured-card + 各种 item */
[data-theme="midnight"] [style*="background:var(--card-bg)"],
[data-theme="midnight"] [style*="background: var(--card-bg)"],
[data-theme="midnight"] .structured-card,
[data-theme="midnight"] .shop-item,
[data-theme="midnight"] .mystery-box,
[data-theme="midnight"] .wishlist-item,
[data-theme="midnight"] .history-item,
[data-theme="midnight"] .archive-item,
[data-theme="midnight"] .focus-card,
[data-theme="midnight"] .stat-card,
[data-theme="midnight"] .info-card {
background: rgba(22, 30, 42, 0.42) !important;
backdrop-filter: blur(20px) saturate(120%) !important;
-webkit-backdrop-filter: blur(20px) saturate(120%) !important;
border: 1px solid rgba(140, 165, 195, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(140, 165, 195, 0.06),
0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
/* ─────────── 主界面卡片动效 (yesterday + midnight) ─────────── */
/* 卡片基础 transition */
[data-theme="yesterday"] [style*="background:var(--card-bg)"],
[data-theme="yesterday"] [style*="background: var(--card-bg)"],
[data-theme="yesterday"] .structured-card,
[data-theme="yesterday"] .shop-item,
[data-theme="midnight"] [style*="background:var(--card-bg)"],
[data-theme="midnight"] [style*="background: var(--card-bg)"],
[data-theme="midnight"] .structured-card,
[data-theme="midnight"] .shop-item {
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
/* 卡片 hover 微浮起 (yesterday) */
[data-theme="yesterday"] [style*="background:var(--card-bg)"]:hover,
[data-theme="yesterday"] [style*="background: var(--card-bg)"]:hover,
[data-theme="yesterday"] .structured-card:hover,
[data-theme="yesterday"] .shop-item:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
0 14px 36px rgba(74, 107, 122, 0.18),
0 0 0 1px rgba(184, 149, 106, 0.20) !important;
}
/* 卡片 hover 微浮起 (midnight 冷月青 glow) */
[data-theme="midnight"] [style*="background:var(--card-bg)"]:hover,
[data-theme="midnight"] [style*="background: var(--card-bg)"]:hover,
[data-theme="midnight"] .structured-card:hover,
[data-theme="midnight"] .shop-item:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(140, 165, 195, 0.12),
0 16px 40px rgba(0, 0, 0, 0.6),
0 0 22px rgba(110, 151, 172, 0.22) !important;
}
/* 主题 swatch hover 旋转 + scale */
[data-theme="yesterday"] [onclick*="setTheme"],
[data-theme="midnight"] [onclick*="setTheme"] {
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
[data-theme="yesterday"] [onclick*="setTheme"]:hover,
[data-theme="midnight"] [onclick*="setTheme"]:hover {
transform: scale(1.15) rotate(8deg) !important;
}
/* nav-bar item hover 微抬 */
[data-theme="yesterday"] .nav-item,
[data-theme="midnight"] .nav-item {
transition: transform 0.25s ease, color 0.25s ease !important;
}
[data-theme="yesterday"] .nav-item:hover,
[data-theme="midnight"] .nav-item:hover {
transform: translateY(-2px);
}
/* 全局 .btn hover 浮起 + active 缩 */
[data-theme="yesterday"] .btn,
[data-theme="midnight"] .btn {
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
[data-theme="yesterday"] .btn:hover {
transform: translateY(-1.5px);
box-shadow: 0 8px 22px rgba(74, 107, 122, 0.22) !important;
}
[data-theme="midnight"] .btn:hover {
transform: translateY(-1.5px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 14px rgba(110, 151, 172, 0.22) !important;
}
[data-theme="yesterday"] .btn:active,
[data-theme="midnight"] .btn:active {
transform: scale(0.97) translateY(0) !important;
transition: transform 0.08s !important;
}
/* 七日谈噪点纸纹（亮墨点，screen 模式——在黑底上显颗粒） */
[data-theme="qirituan"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.55;
mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,");
background-size: 320px 320px;
}
/* 七日谈噪点——大泼墨晕团（multiply，墨汁阴影） */
[data-theme="qirituan"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.45;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 720px 720px;
}
/* 七日谈：清掉白雾主题遗留的 radial-gradient 点阵 */
[data-theme="qirituan"] body {
background-image: none !important;
background-color: var(--bg) !important;
}
/* 七日谈：符号装饰层（月相 + 黑洞 + 吸积盘残光）
用 html::before 挂在最底层，screen 模式让银灰墨痕浮在黑底上 */
[data-theme="qirituan"]::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.28;
mix-blend-mode: screen;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: 92% 8%, -14% 62%, 108% 88%;
background-size: 260px 260px, 620px 620px, 420px 420px;
background-repeat: no-repeat, no-repeat, no-repeat;
}
/* 七日谈：卡片/sheet 换为墨骨硬边+自带噪点颗粒 */
[data-theme="qirituan"] .sheet,
[data-theme="qirituan"] .mini-card,
[data-theme="qirituan"] .cell,
[data-theme="qirituan"] .shop-item {
background-color: var(--card-bg);
background-image: url("data:image/svg+xml;utf8,");
background-size: 320px 320px;
background-blend-mode: screen;
border: 1px solid rgba(201, 169, 97, 0.22);
box-shadow: 0 1px 0 rgba(232, 226, 213, 0.04) inset, 0 8px 30px rgba(0, 0, 0, 0.45);
}
/* 七日谈：status-bar / nav-bar 完全融合到底层，取消浮岛感 */
[data-theme="qirituan"] .status-bar,
[data-theme="qirituan"] .nav-bar {
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* 给 status-bar 底边留一条古金细线，暗示分隔不靠背景 */
[data-theme="qirituan"] .status-bar {
border-bottom: 1px solid rgba(201, 169, 97, 0.14) !important;
}
[data-theme="qirituan"] .nav-bar {
border-top: 1px solid rgba(201, 169, 97, 0.14) !important;
}
/* 七日谈：#root / viewport 层级，内容在符号层之上 */
[data-theme="qirituan"] .status-bar,
[data-theme="qirituan"] .nav-bar,
[data-theme="qirituan"] .view {
position: relative;
z-index: 1;
}
[data-theme="qirituan"] .status-bar {
position: fixed;
}
[data-theme="qirituan"] .nav-bar {
position: fixed;
}
/* 七日谈：强调色链接/准星 */
[data-theme="qirituan"] a,
[data-theme="qirituan"] .btn.primary,
[data-theme="qirituan"] .accent {
color: var(--accent);
}
/* 七日谈：朱砂角标/截止标签 */
[data-theme="qirituan"] .deadline-tag,
[data-theme="qirituan"] .tag-deadline {
color: var(--ink-red);
border-color: var(--ink-red);
}
/* ===== 七日谈·按键 UI 交互（墨沁式 hover + 活息呼吸）===== */
[data-theme="qirituan"] .btn,
[data-theme="qirituan"] .btn-sec {
position: relative;
overflow: hidden;
background: transparent !important;
background-image: none !important;
color: var(--text);
border: 1px solid rgba(201, 169, 97, 0.4);
letter-spacing: 0.08em;
transition: color 0.22s ease, border-color 0.22s ease,
box-shadow 0.25s ease, transform 0.15s ease;
z-index: 0;
animation: qirituanBtnBreath 4.2s ease-in-out infinite;
}
/* 闲时：金边明暗呼吸 + 极淡朱砂印 */
@keyframes qirituanBtnBreath {
0%,
100% {
border-color: rgba(201, 169, 97, 0.32);
box-shadow: inset 0 0 0 rgba(197, 67, 43, 0);
}
50% {
border-color: rgba(201, 169, 97, 0.55);
box-shadow: inset 0 0 10px rgba(197, 67, 43, 0.06);
}
}
/* 墨沁：金色渍晕从左扫过（hover 时触发） */
[data-theme="qirituan"] .btn::before,
[data-theme="qirituan"] .btn-sec::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(201, 169, 97, 0.00) 0%,
rgba(201, 169, 97, 0.18) 45%,
rgba(197, 67, 43, 0.12) 100%);
transform: translateX(-102%);
transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
z-index: -1;
pointer-events: none;
}
/* 活息：右上角月相符号呼吸 */
[data-theme="qirituan"] .btn::after,
[data-theme="qirituan"] .btn-sec::after {
content: '☽';
position: absolute;
top: 2px;
right: 7px;
font-size: 10px;
line-height: 1;
color: rgba(197, 67, 43, 0.55);
text-shadow: 0 0 4px rgba(197, 67, 43, 0.3);
opacity: 0.55;
transform: rotate(-15deg);
animation: qirituanBtnMoon 3.4s ease-in-out infinite;
transition: color 0.28s ease, text-shadow 0.28s ease,
transform 0.3s ease, font-size 0.28s ease;
pointer-events: none;
z-index: 2;
}
@keyframes qirituanBtnMoon {
0%,
100% {
opacity: 0.35;
transform: rotate(-15deg) scale(0.95);
}
50% {
opacity: 0.85;
transform: rotate(-15deg) scale(1.1);
}
}
/* hover：月相圆满 + 金色发光 */
[data-theme="qirituan"] .btn:hover::after,
[data-theme="qirituan"] .btn-sec:hover::after {
content: '●';
color: var(--ink-red);
text-shadow: 0 0 8px rgba(197, 67, 43, 0.85),
0 0 2px rgba(201, 169, 97, 0.8);
opacity: 1;
transform: rotate(0) scale(1.25);
animation: none;
font-size: 11px;
}
/* active：锁定为黑洞印 */
[data-theme="qirituan"] .btn:active::after,
[data-theme="qirituan"] .btn-sec:active::after {
content: '◉';
color: var(--ink-red);
text-shadow: 0 0 12px rgba(197, 67, 43, 1),
0 0 4px rgba(201, 169, 97, 1);
font-size: 12px;
transform: rotate(0) scale(1.35);
}
/* primary 按键换金色星盘 */
[data-theme="qirituan"] .btn.primary::after {
content: '✺';
color: rgba(197, 67, 43, 0.7);
font-size: 11px;
}
[data-theme="qirituan"] .btn.primary:hover::after {
content: '✺';
color: var(--ink-red);
transform: rotate(180deg) scale(1.3);
transition: transform 0.6s cubic-bezier(.4, 0, .2, 1),
color 0.28s ease, text-shadow 0.28s ease;
}
/* 选中态按键：月相恒亮为红满月 */
[data-theme="qirituan"] .btn.active::after,
[data-theme="qirituan"] .btn-sec.active::after,
[data-theme="qirituan"] .cap-surface-btn.active::after,
[data-theme="qirituan"] .cap-console-tab.active::after,
[data-theme="qirituan"] .filter-chip.active::after {
content: '●';
color: var(--ink-red);
text-shadow: 0 0 6px rgba(197, 67, 43, 0.7);
opacity: 1;
transform: rotate(0) scale(1);
animation: none;
}
[data-theme="qirituan"] .btn>*,
[data-theme="qirituan"] .btn-sec>* {
position: relative;
z-index: 1;
}
[data-theme="qirituan"] .btn:hover,
[data-theme="qirituan"] .btn-sec:hover {
color: var(--accent);
border-color: var(--accent);
box-shadow: inset 0 0 18px rgba(197, 67, 43, 0.18),
0 0 0 1px rgba(201, 169, 97, 0.35),
0 2px 14px rgba(197, 67, 43, 0.12);
transform: translateY(-1px);
}
[data-theme="qirituan"] .btn:hover::before,
[data-theme="qirituan"] .btn-sec:hover::before {
transform: translateX(0);
}
[data-theme="qirituan"] .btn:active,
[data-theme="qirituan"] .btn-sec:active {
color: var(--ink-red);
border-color: var(--ink-red);
transform: scale(0.97);
box-shadow: inset 0 0 22px rgba(197, 67, 43, 0.32),
0 0 0 1px rgba(197, 67, 43, 0.4);
}
/* 选中态：被点中时留一抹朱砂印 */
[data-theme="qirituan"] .btn.active,
[data-theme="qirituan"] .btn-sec.active,
[data-theme="qirituan"] .cap-surface-btn.active,
[data-theme="qirituan"] .cap-console-tab.active,
[data-theme="qirituan"] .filter-chip.active,
[data-theme="qirituan"] .cap-filter-btn.active {
background: linear-gradient(180deg,
rgba(201, 169, 97, 0.22),
rgba(201, 169, 97, 0.08)) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
box-shadow: inset 0 0 18px rgba(197, 67, 43, 0.18),
0 0 0 1px rgba(201, 169, 97, 0.3) !important;
}
[data-theme="qirituan"] .btn.primary {
background: linear-gradient(180deg, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0.08)) !important;
border-color: var(--accent);
color: var(--accent);
}
[data-theme="qirituan"] .btn.primary:hover {
color: var(--ink-red);
border-color: var(--ink-red);
box-shadow: inset 0 0 22px rgba(197, 67, 43, 0.22),
0 0 0 1px rgba(197, 67, 43, 0.35),
0 2px 16px rgba(197, 67, 43, 0.18);
}
/* nav-item 选中 & 悬停（金色活针） */
[data-theme="qirituan"] .nav-item {
position: relative;
opacity: 0.45;
transition: opacity 0.2s ease, color 0.2s ease;
}
[data-theme="qirituan"] .nav-item:hover {
opacity: 0.85;
color: var(--accent);
}
[data-theme="qirituan"] .nav-item.active {
opacity: 1;
color: var(--accent);
}
[data-theme="qirituan"] .nav-item.active::after {
content: "";
position: absolute;
left: 50%;
top: -8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--ink-red);
transform: translateX(-50%);
box-shadow: 0 0 6px rgba(197, 67, 43, 0.8);
}
/* 新建按钮 (+) 加朱砂内晕光 */
[data-theme="qirituan"] #nav-create-tab,
[data-theme="qirituan"] .nav-create {
filter: drop-shadow(0 0 8px rgba(197, 67, 43, 0.4));
}
/* balance-pill / 日历单元悬停古金描边 */
[data-theme="qirituan"] .balance-pill {
background: transparent !important;
color: var(--accent) !important;
border: 1px solid rgba(201, 169, 97, 0.5);
}
[data-theme="qirituan"] .cell {
transition: border-color 0.18s ease, color 0.18s ease;
}
[data-theme="qirituan"] .cell:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ===== 七日谈·滑键 (Toggle Switch) ===== */
[data-theme="qirituan"] input[type="checkbox"] {
background: transparent !important;
border: 1px solid rgba(201, 169, 97, 0.45) !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35),
inset 0 0 8px rgba(0, 0, 0, 0.6);
}
[data-theme="qirituan"] input[type="checkbox"]::before {
content: "";
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 1px;
background: rgba(197, 67, 43, 0.3);
transform: translateY(-50%);
pointer-events: none;
}
[data-theme="qirituan"] input[type="checkbox"]::after {
background: #8a8577 !important;
box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.55),
0 1px 4px rgba(0, 0, 0, 0.6);
transition: left 0.3s cubic-bezier(.4, .2, .2, 1.25),
background 0.25s ease,
box-shadow 0.3s ease;
}
[data-theme="qirituan"] input[type="checkbox"]:hover {
border-color: var(--accent) !important;
}
[data-theme="qirituan"] input[type="checkbox"]:hover::after {
box-shadow: 0 0 0 1px var(--accent),
0 0 6px rgba(201, 169, 97, 0.35);
}
[data-theme="qirituan"] input[type="checkbox"]:checked {
background: linear-gradient(180deg,
rgba(201, 169, 97, 0.28),
rgba(201, 169, 97, 0.08)) !important;
border-color: var(--accent) !important;
}
[data-theme="qirituan"] input[type="checkbox"]:checked::after {
background: var(--ink-red) !important;
box-shadow: 0 0 0 1px var(--accent),
0 0 10px rgba(197, 67, 43, 0.7);
}
/* ===== 七日谈·滑条 (Range Slider) — 拖曳时黑洞扩张 ===== */
[data-theme="qirituan"] input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 22px;
background: transparent;
outline: none;
cursor: pointer;
}
[data-theme="qirituan"] input[type="range"]::-webkit-slider-runnable-track {
height: 1px;
background: linear-gradient(90deg,
var(--accent) 0%,
rgba(201, 169, 97, 0.28) 70%,
rgba(201, 169, 97, 0.12) 100%);
border: none;
}
[data-theme="qirituan"] input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%,
#1a1a1e 0%, #080809 60%, #000 100%);
border: 1px solid var(--accent);
margin-top: -9px;
box-shadow: 0 0 6px rgba(201, 169, 97, 0.4),
inset 0 0 4px rgba(197, 67, 43, 0.35);
transition: transform 0.15s ease, box-shadow 0.22s ease;
cursor: grab;
}
[data-theme="qirituan"] input[type="range"]:hover::-webkit-slider-thumb {
transform: scale(1.18);
box-shadow: 0 0 12px rgba(201, 169, 97, 0.65),
inset 0 0 6px rgba(197, 67, 43, 0.55);
}
[data-theme="qirituan"] input[type="range"]:active::-webkit-slider-thumb,
[data-theme="qirituan"] input[type="range"]:focus::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(1.35);
box-shadow: 0 0 22px rgba(197, 67, 43, 0.75),
inset 0 0 12px rgba(197, 67, 43, 0.9);
}
/* Firefox */
[data-theme="qirituan"] input[type="range"]::-moz-range-track {
height: 1px;
background: linear-gradient(90deg,
var(--accent) 0%,
rgba(201, 169, 97, 0.28) 70%,
rgba(201, 169, 97, 0.12) 100%);
border: none;
}
[data-theme="qirituan"] input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%,
#1a1a1e 0%, #080809 60%, #000 100%);
border: 1px solid var(--accent);
box-shadow: 0 0 6px rgba(201, 169, 97, 0.4),
inset 0 0 4px rgba(197, 67, 43, 0.35);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.22s ease;
}
[data-theme="qirituan"] input[type="range"]:hover::-moz-range-thumb {
transform: scale(1.18);
box-shadow: 0 0 12px rgba(201, 169, 97, 0.65),
inset 0 0 6px rgba(197, 67, 43, 0.55);
}
[data-theme="qirituan"] input[type="range"]:active::-moz-range-thumb {
cursor: grabbing;
transform: scale(1.35);
box-shadow: 0 0 22px rgba(197, 67, 43, 0.75),
inset 0 0 12px rgba(197, 67, 43, 0.9);
}
/* ===== 七日谈·文本输入框（滑入光标） ===== */
[data-theme="qirituan"] input[type="text"],
[data-theme="qirituan"] input[type="number"],
[data-theme="qirituan"] input[type="password"],
[data-theme="qirituan"] textarea,
[data-theme="qirituan"] select {
background: rgba(0, 0, 0, 0.35) !important;
border: 1px solid rgba(201, 169, 97, 0.3) !important;
color: var(--text);
caret-color: var(--ink-red);
transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
[data-theme="qirituan"] input[type="text"]:focus,
[data-theme="qirituan"] input[type="number"]:focus,
[data-theme="qirituan"] input[type="password"]:focus,
[data-theme="qirituan"] textarea:focus,
[data-theme="qirituan"] select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 1px var(--accent),
0 0 12px rgba(197, 67, 43, 0.18);
outline: none;
}
/* ===== 七日谈·聊天界面（气泡 + 头像 + 宇宙背景） ===== */
/* 聊天容器：和主界面同款噪点纸纹——大泼墨晕 + 细银颗粒 */
[data-theme="qirituan"] #character-chat-messages,
[data-theme="qirituan"] #ai-chat-messages {
position: relative;
}
/* 聊天容器自己的噪点已移除：与 body::before/::after 的固定噪点重复，
且容器层会随滚动移动、body 层固定不动，叠加会在滚动时出现条带断裂。
现在统一靠 body 的固定噪点提供铺满的纸纹，聊天区滚动时背景始终连续。 */
/* 消息内容压在背景之上 */
[data-theme="qirituan"] #character-chat-messages>*,
[data-theme="qirituan"] #ai-chat-messages>* {
position: relative;
z-index: 1;
}
/* 头像：去掉 inline 淡灰 border（只在七日谈），让角色头像直接显示，不带"小框框" */
[data-theme="qirituan"] #character-chat-messages>div>img,
[data-theme="qirituan"] #ai-chat-messages>div>img {
border: none !important;
box-shadow: 0 0 0 0.5px rgba(201, 169, 97, 0.18) !important;
}
/* User 气泡：银白噪点 + 鎏金细边 */
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="user"] {
background-color: rgba(232, 226, 213, 0.94) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 280px 280px !important;
background-blend-mode: multiply !important;
color: #1a1a1e !important;
border: 1px solid var(--accent) !important;
box-shadow: 0 0 0 0.5px rgba(201, 169, 97, 0.45),
inset 0 0 0 1px rgba(232, 226, 213, 0.5),
0 2px 14px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="user"] .chat-message-time {
color: rgba(26, 26, 30, 0.55) !important;
}
/* AI 气泡：暗底 + 朱砂红超细边（0.5px 细线）
不透明度提到 0.96，挡住底层 body 噪点透过气泡显现，
保证 AI 气泡内是干净纯色，与噪点纸纹背景形成对比。 */
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="assistant"] {
background-color: rgba(18, 18, 22, 0.96) !important;
background-image: none !important;
color: var(--text) !important;
border: 0.5px solid var(--ink-red) !important;
box-shadow: 0 0 10px rgba(197, 67, 43, 0.14),
inset 0 0 0 0.5px rgba(197, 67, 43, 0.22) !important;
}
/* SVG 图标统一样式 */
.ico {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 全局平滑过渡 */
body,
.view,
.mini-card,
.btn,
.status-bar,
.nav-bar,
.cell,
input,
select,
textarea {
transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
body {
font-family: 'JetBrains Mono', 'Noto Serif SC', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
padding-bottom: 100px;
/* v6 刀 A4-1：与 .status-bar 的 height 联动 —— 顶栏是 fixed 脱离文档流，
正文靠这条 padding 让位。顶栏长高多少，这里就要跟多少，否则内容被顶栏吃掉。
web/桌面 env()=0 ⇒ 仍是 60px，逐字节无变化。 */
padding-top: calc(60px + var(--azoth-safe-top));
}
body.no-scroll {
overflow: hidden;
height: 100vh;
overscroll-behavior: none;
}
/* --- 侧边栏样式 --- */
.menu-btn {
font-size: 1.5rem;
cursor: pointer;
padding: 5px 10px;
margin-right: 8px;
transition: transform 0.2s;
}
.menu-btn:active {
transform: scale(0.95);
}
#sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1999;
opacity: 0;
transition: opacity 0.3s ease;
}
#sidebar-overlay.active {
display: block;
opacity: 1;
}
/* 10-05 App 手感批 1：关着的抽屉不能被任何横移 / 缩放露出来 ⇒ 滑出结束后 visibility:hidden
（visibility 的 0.3s 延迟 = 等滑出动画走完再藏；打开时立即可见）。
位移改用 transform，不再动 left（left 每帧都要重排）。 */
#sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: var(--card-bg);
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
z-index: 2000;
transform: translate3d(-100%, 0, 0);
visibility: hidden;
transition: transform 0.3s ease, visibility 0s linear 0.3s;
display: flex;
flex-direction: column;
}
#sidebar.active {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform 0.3s ease, visibility 0s;
}
.sidebar-header {
padding: 20px;
background: var(--accent);
color: var(--bg);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sidebar-header h2 {
font-size: 1.1rem;
font-weight: bold;
}
.sidebar-close {
font-size: 2rem;
cursor: pointer;
line-height: 1;
font-weight: 300;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 10px 0;
min-height: 0;
}
.sidebar-menu-item {
padding: 15px 20px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: background 0.2s;
border-left: 3px solid transparent;
}
.sidebar-menu-item:hover {
background: rgba(0, 0, 0, 0.05);
}
.sidebar-menu-item:active {
background: rgba(0, 0, 0, 0.1);
border-left-color: var(--accent);
}
.menu-icon {
font-size: 1.3rem;
width: 30px;
text-align: center;
}
.sidebar-account-footer {
flex-shrink: 0;
padding: 10px 12px 14px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: color-mix(in srgb, var(--card-bg) 92%, var(--bg) 8%);
}
.sidebar-account-button {
width: 100%;
min-height: 58px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--bg);
color: var(--text);
display: grid;
grid-template-columns: 38px 1fr 24px;
align-items: center;
gap: 10px;
padding: 9px 10px;
cursor: pointer;
box-shadow: var(--shadow);
text-align: left;
}
.sidebar-account-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
background: rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.sidebar-account-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
#sidebar-account-name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sidebar-account-status {
font-size: 0.72rem;
opacity: 0.58;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-account-cog {
color: var(--accent);
opacity: 0.85;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-account-cog .icon {
width: 20px;
height: 20px;
}
.cloud-auth-page {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--bg);
color: var(--text);
align-items: stretch;
justify-content: center;
}
.cloud-auth-shell {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 34%),
var(--bg);
}
.cloud-auth-topbar {
height: 64px;
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
padding: 0 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: var(--card-bg);
box-shadow: var(--shadow);
font-weight: 700;
color: var(--accent);
}
.cloud-auth-topbar .icon-btn {
width: 38px;
height: 38px;
border: none;
background: transparent;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cloud-auth-topbar .icon {
width: 24px;
height: 24px;
}
.cloud-auth-card {
width: min(440px, calc(100% - 34px));
margin: 52px auto 24px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--card-bg);
box-shadow: var(--shadow);
padding: 28px 24px 24px;
}
.cloud-auth-brand {
display: inline-block;
padding: 4px 10px;
border: 1px solid var(--accent);
color: var(--accent);
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 18px;
letter-spacing: 0;
}
.cloud-auth-card h1 {
margin: 0 0 10px;
font-size: 1.45rem;
line-height: 1.25;
color: var(--text);
}
.cloud-auth-card p {
margin: 0 0 22px;
color: var(--text);
opacity: 0.62;
font-size: 0.9rem;
line-height: 1.6;
}
.cloud-auth-form {
display: flex;
flex-direction: column;
gap: 13px;
}
.cloud-auth-form label {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 0.85rem;
color: var(--text);
}
.cloud-auth-form input,
.account-name-field input {
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--bg);
color: var(--text);
padding: 11px 12px;
outline: none;
font-size: 0.95rem;
}
.cloud-auth-error {
color: #c62828;
font-size: 0.82rem;
text-align: left;
}
.cloud-auth-primary,
.cloud-auth-secondary,
.cloud-auth-danger,
.cloud-auth-local {
width: 100%;
min-height: 42px;
border: 1px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
font-size: 0.95rem;
}
.cloud-auth-primary {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 700;
}
.cloud-auth-secondary {
background: var(--bg);
color: var(--text);
}
.cloud-auth-danger {
background: #c62828;
color: #fff;
border-color: #c62828;
margin-bottom: 10px;
}
.cloud-auth-local {
margin-top: 16px;
background: transparent;
color: var(--text);
opacity: 0.62;
border: none;
}
#panel-account-center.sidebar-panel.active {
align-items: flex-start;
background: var(--bg);
overflow: hidden;
}
#panel-account-center.sidebar-panel.active .account-center-sheet {
width: min(620px, 100vw);
height: 100vh;
min-height: 0;
max-height: none;
margin: 0 auto;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 0;
box-sizing: border-box;
}
.account-center-sheet {
display: flex;
flex-direction: column;
gap: 16px;
}
.account-center-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.account-center-header h3 {
margin: 0;
color: var(--accent);
}
.account-profile-block,
.account-section,
.account-settings-list {
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--bg);
padding: 14px;
flex-shrink: 0;
}
.account-profile-block {
display: grid;
gap: 12px;
}
.account-avatar-edit {
width: 100%;
border: none;
background: transparent;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
padding: 0;
cursor: pointer;
text-align: left;
font-weight: 700;
}
.account-avatar-edit img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(0, 0, 0, 0.08);
}
.account-name-field {
display: grid;
gap: 7px;
font-size: 0.85rem;
}
.account-personalization-entry {
width: 100%;
min-height: 48px;
display: grid;
grid-template-columns: 1fr 18px;
align-items: center;
gap: 10px;
padding: 0 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.32);
color: var(--text);
text-align: left;
font-size: 0.95rem;
font-weight: 400;
cursor: pointer;
}
.account-personalization-entry span:first-child {
opacity: 0.72;
}
.account-personalization-entry span:last-child {
text-align: right;
font-size: 1rem;
opacity: 0.78;
}
.account-personalization-field {
display: grid;
gap: 7px;
font-size: 0.85rem;
}
.account-personalization-field textarea {
width: 100%;
min-height: 210px;
max-height: 44vh;
padding: 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
background: rgba(255, 255, 255, 0.55);
color: var(--text);
font: 0.82rem/1.65 'Noto Serif SC', 'JetBrains Mono', sans-serif;
resize: vertical;
user-select: text;
}
.account-personalization-status {
min-height: 18px;
margin: -2px 0 0;
font-size: 0.76rem;
line-height: 1.5;
opacity: 0.62;
}
.account-personalization-status.is-error {
color: #c62828;
opacity: 1;
}
.account-personalization-status.is-success {
color: var(--accent);
opacity: 0.85;
}
.character-tts-player {
margin: 8px 14px 0;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(18, 31, 255, 0.18);
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
z-index: 2;
}
.character-tts-player.is-loading {
opacity: 0.72;
}
.character-tts-player-btn,
.character-tts-close,
.chat-tts-play-btn,
.chat-translate-btn {
border: none;
background: transparent;
color: var(--accent);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.character-tts-player-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent);
color: var(--bg);
font-size: 0.95rem;
flex-shrink: 0;
}
.character-tts-time {
min-width: 42px;
font-size: 0.88rem;
color: var(--text);
opacity: 0.78;
font-variant-numeric: tabular-nums;
}
.character-tts-progress {
flex: 1;
min-width: 60px;
accent-color: var(--accent);
}
.character-tts-close {
width: 32px;
height: 32px;
color: var(--text);
font-size: 1.7rem;
line-height: 1;
flex-shrink: 0;
}
.chat-tts-play-btn {
width: 18px;
height: 18px;
margin-right: 4px;
padding: 0;
opacity: 0.9;
line-height: 1;
vertical-align: -0.16em;
}
.chat-tts-play-icon {
width: 14px;
height: 14px;
display: block;
fill: currentColor;
flex: 0 0 14px;
}
.chat-tts-play-btn.is-active {
color: var(--accent);
opacity: 1;
}
.chat-message-bubble-shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-sizing: border-box !important;
}
.chat-message-bubble-shell>.chat-message-bubble {
box-sizing: border-box !important;
flex: 0 1 auto;
}
.chat-message-bubble-shell>.chat-message-meta-outside {
flex: 0 0 auto;
white-space: nowrap;
margin-top: 0 !important;
margin-bottom: 0.18em;
}
.thinking-bubble-wrap>.chat-message-bubble-shell {
max-width: 100% !important;
}
.tts-sample-status {
margin-top: 6px;
font-size: 0.72rem;
color: var(--text);
opacity: 0.62;
line-height: 1.4;
word-break: break-all;
}
.tts-sample-status.is-ready {
color: var(--accent);
opacity: 0.9;
}
.tts-sample-status.is-error {
color: #c62828;
opacity: 1;
}
.chat-translate-btn {
width: 18px;
height: 18px;
margin-right: 4px;
padding: 0;
opacity: 0.9;
line-height: 1;
vertical-align: -0.16em;
}
.chat-translate-icon {
width: 14px;
height: 14px;
display: block;
fill: currentColor;
flex: 0 0 14px;
}
.chat-translation-block {
margin-top: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.18);
border-radius: 12px;
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
backdrop-filter: blur(6px);
}
.chat-translation-header {
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--accent);
cursor: pointer;
font-size: 0.78rem;
user-select: none;
}
.chat-translation-body {
max-height: 0;
overflow: hidden;
padding: 0 12px;
color: var(--text);
opacity: 0.82;
font-size: 0.92em;
line-height: 1.65;
transition: max-height 0.25s ease, padding 0.25s ease;
}
.chat-translation-block.expanded .chat-translation-body {
max-height: 420px;
overflow-y: auto;
padding: 0 12px 12px;
}
.chat-translation-toggle {
transition: transform 0.2s ease;
font-size: 0.68rem;
}
.chat-translation-block.expanded .chat-translation-toggle {
transform: rotate(90deg);
}
.translation-language-overlay {
position: fixed;
inset: 0;
z-index: 99998;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.42);
opacity: 0;
transition: opacity 0.18s ease;
}
.translation-language-overlay.active {
opacity: 1;
}
.translation-language-sheet {
width: min(100%, 640px);
max-height: 78vh;
overflow-y: auto;
padding: 12px 0 24px;
border-radius: 24px 24px 0 0;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.16);
}
.translation-sheet-handle {
width: 52px;
height: 5px;
margin: 0 auto 14px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.16);
}
.translation-language-list {
display: flex;
flex-direction: column;
}
.translation-language-option {
min-height: 62px;
padding: 0 32px;
border: none;
background: transparent;
color: var(--text);
display: flex;
align-items: center;
gap: 22px;
text-align: left;
font: 1rem/1.2 'Noto Serif SC', serif;
cursor: pointer;
}
.translation-language-option:active {
background: rgba(var(--accent-rgb), 0.06);
}
.translation-language-option span:first-child {
width: 34px;
text-align: center;
font-size: 1.25rem;
}
.translation-language-option.is-danger {
color: #c62828;
margin-top: 10px;
}
.account-personalization-sheet .account-profile-block {
gap: 10px;
}
.account-visual-modulation {
gap: 14px;
}
.account-theme-grid {
display: grid;
grid-template-columns: repeat(8, minmax(28px, 1fr));
align-items: center;
justify-items: center;
gap: 8px;
}
.account-theme-swatch {
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.2);
background: transparent;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.account-theme-swatch:active {
transform: scale(0.94);
}
.account-theme-swatch.is-active {
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
border-color: var(--accent);
}
.account-theme-swatch.theme-fog {
background: #EFF2F2;
border-color: #5D6973;
}
.account-theme-swatch.theme-dream {
background: #DFF2FC;
border-color: #95C2E2;
}
.account-theme-swatch.theme-lime {
background: #E3F0E5;
border-color: #81C784;
}
.account-theme-swatch.theme-roots {
background: #e3dccb;
border-color: #5c6b50;
}
.account-theme-swatch.theme-construct {
border-radius: 0;
background: #f5f7fa;
border-color: #0a22f5;
clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}
.account-theme-swatch.theme-qirituan {
background: radial-gradient(circle at 60% 40%, #1a1a1e 0%, #0d0d0f 70%);
border-color: #c9a961;
box-shadow: inset 0 0 6px rgba(197, 67, 43, 0.45);
}
.account-theme-swatch.theme-yesterday {
background: linear-gradient(135deg, #F4F1EB 40%, #4A6B7A);
border-color: #B8956A;
}
.account-theme-swatch.theme-midnight {
background: linear-gradient(135deg, #0E1218 30%, #6E97AC);
border-color: #A88858;
box-shadow: 0 0 6px rgba(110, 151, 172, 0.4);
}
.account-theme-swatch.is-active {
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
border-color: var(--accent);
}
.account-section {
display: grid;
gap: 12px;
}
.account-section h4 {
margin: 0 0 4px;
color: var(--accent);
}
.account-section p {
margin: 0;
font-size: 0.82rem;
opacity: 0.65;
}
.account-action-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.account-action-row.is-single {
grid-template-columns: 1fr;
}
.account-action-row .btn {
margin: 0;
}
[data-theme="qirituan"] .account-profile-block>.btn,
[data-theme="qirituan"] .account-action-row .btn {
background: linear-gradient(180deg, rgba(31, 27, 21, 0.96), rgba(8, 8, 9, 0.96)) !important;
color: #f3ead5 !important;
border-color: rgba(201, 169, 97, 0.72) !important;
isolation: isolate;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
box-shadow: inset 0 0 14px rgba(201, 169, 97, 0.08),
0 0 0 1px rgba(201, 169, 97, 0.16);
}
[data-theme="qirituan"] .account-profile-block>.btn::before,
[data-theme="qirituan"] .account-action-row .btn::before {
z-index: 0;
}
[data-theme="qirituan"] .account-profile-block>.btn::after,
[data-theme="qirituan"] .account-action-row .btn::after {
z-index: 1;
}
[data-theme="qirituan"] .account-profile-block>.btn:hover,
[data-theme="qirituan"] .account-action-row .btn:hover {
color: #fff5df !important;
border-color: var(--accent) !important;
box-shadow: inset 0 0 20px rgba(197, 67, 43, 0.2),
0 0 0 1px rgba(201, 169, 97, 0.34),
0 2px 14px rgba(197, 67, 43, 0.14) !important;
}
.account-settings-list {
padding: 0;
overflow: hidden;
}
.account-settings-list button {
width: 100%;
min-height: 54px;
display: grid;
grid-template-columns: 34px 1fr 18px;
align-items: center;
gap: 10px;
padding: 0 14px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: transparent;
color: var(--text);
text-align: left;
font-size: 0.95rem;
cursor: pointer;
}
.account-settings-list button:last-child {
border-bottom: none;
}
.account-row-icon {
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.account-row-icon .icon {
width: 21px;
height: 21px;
}
/* --- 顶部与导航 --- */
/* v6 刀 A4-1：顶栏避让系统状态栏。
Android 15+ 强制 edge-to-edge，WebView 铺满整屏，顶栏原本被时间/信号/电量压住。
🔴 height 与 padding-top 必须**一起**加 inset：box-sizing 是 border-box，
只加 padding 会把 35px 的内容区挤成 -4px。
🔴 body 的 padding-top 也要同步加（见 body 规则）——.status-bar 是 fixed 脱离文档流，
底下内容靠 body padding 让位，只改一边会露馅。
web/桌面：env() 解析为 0 ⇒ calc 结果与改前逐字节相同，无视觉变化。 */
.status-bar {
background: var(--bg);
padding: 10px 15px;
padding-top: calc(10px + var(--azoth-safe-top));
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid rgba(139, 90, 43, 0.1);
height: calc(55px + var(--azoth-safe-top));
opacity: 0.98;
}
.status-left {
display: flex;
flex-direction: column;
}
.app-name {
font-weight: bold;
font-size: 0.75rem;
color: var(--accent);
white-space: nowrap;
}
.sys-clock {
font-size: 0.7rem;
color: var(--text);
opacity: 0.7;
font-family: 'JetBrains Mono';
}
.balance-pill {
background: var(--text);
color: var(--gold);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.nav-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--card-bg);
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
z-index: 1000;
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.65rem;
color: var(--text);
opacity: 0.4;
gap: 4px;
transition: all 0.2s;
cursor: pointer;
}
.nav-item.active {
opacity: 1;
transform: translateY(-2px);
font-weight: bold;
color: var(--accent);
}
.nav-icon {
font-size: 1.3rem;
}
.add-icon-circle {
width: 45px;
height: 45px;
background: var(--accent);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--bg);
font-size: 1.8rem;
font-weight: 300;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-15px);
margin-bottom: -20px;
}
/* --- 布局类 --- */
.container {
width: 92%;
max-width: 500px;
margin: 0 auto;
padding-top: 10px;
}
.view {
display: none;
animation: fadeIn 0.3s ease;
}
.view.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- UI 组件 --- */
.btn {
width: 100%;
padding: 12px;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 10px;
font-weight: bold;
margin-top: 10px;
cursor: pointer;
font-size: 0.9rem;
transition: transform 0.1s;
}
.btn:active {
transform: scale(0.98);
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.7;
}
.btn-sec {
background: transparent;
border: 1px solid var(--text);
color: var(--text);
}
.btn-sec.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
.btn-danger {
background: rgba(198, 40, 40, 0.1);
color: #c62828;
border: 1px solid #c62828;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
color: var(--text);
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 5px;
display: block;
opacity: 0.8;
}
.input-group input,
.input-group textarea,
.input-group select {
width: 100%;
padding: 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
background: var(--card-bg);
color: var(--text);
font-family: inherit;
font-size: 0.9rem;
}
/* --- 核心业务样式 --- */
.cal-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--card-bg);
padding: 10px 15px;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: var(--shadow);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 20px;
}
.weekday {
text-align: center;
font-size: 0.7rem;
color: var(--text);
opacity: 0.6;
margin-bottom: 5px;
}
.cal-day {
aspect-ratio: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
position: relative;
cursor: pointer;
transition: background 0.2s;
color: var(--text);
}
.cal-day.today {
border: 2px solid var(--accent);
background: var(--card-bg);
font-weight: bold;
}
.cal-day.has-data::after {
content: '';
width: 4px;
height: 4px;
background: var(--completed);
border-radius: 50%;
position: absolute;
bottom: 4px;
}
.cal-day:active {
opacity: 0.7;
}
.mini-card {
background: var(--card-bg);
padding: 15px;
border-radius: 12px;
margin-bottom: 10px;
border-left: 4px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow);
cursor: pointer;
}
.bingo-grid {
display: grid;
gap: 5px;
margin: 15px 0;
}
.cell {
aspect-ratio: 1;
background: var(--card-bg);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.75rem;
border: 2px solid transparent;
padding: 2px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: transform 0.1s;
word-break: break-all;
cursor: pointer;
color: var(--text);
}
.cell:active {
transform: scale(0.95);
}
.cell.completed {
background: rgba(107, 142, 35, 0.1);
border-color: var(--completed);
color: var(--completed);
text-decoration: line-through;
opacity: 0.9;
}
[data-theme="silent"] .cell.completed {
background: rgba(207, 255, 226, 0.1);
color: var(--completed);
}
.cell.editing {
border: 2px dashed var(--highlight);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
border-color: var(--highlight);
}
50% {
border-color: transparent;
}
100% {
border-color: var(--highlight);
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* --- 商店样式 --- */
.shop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.shop-item {
background: var(--card-bg);
border-radius: 12px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--shadow);
position: relative;
transition: transform 0.1s;
}
.shop-item:active {
transform: scale(0.98);
}
.shop-item.cooldown {
opacity: 0.5;
pointer-events: none;
filter: grayscale(1);
}
.shop-icon {
font-size: 2.2rem;
margin-bottom: 5px;
}
.shop-cost {
font-size: 0.8rem;
font-weight: bold;
color: var(--accent);
background: rgba(0, 0, 0, 0.05);
padding: 4px 10px;
border-radius: 10px;
margin-top: 5px;
}
.shop-desc {
font-size: 0.8rem;
color: var(--text);
opacity: 0.8;
margin: 8px 0;
height: 2.4em;
overflow: hidden;
line-height: 1.2;
}
.gacha-banner {
background: linear-gradient(135deg, var(--mystery-2), var(--text));
color: #F0EAD6;
padding: 20px;
border-radius: 16px;
margin-bottom: 20px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gacha-banner::after {
content: '?';
position: absolute;
right: -10px;
bottom: -20px;
font-size: 6rem;
opacity: 0.1;
transform: rotate(-20deg);
color: white;
}
.gacha-gear {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.2rem;
opacity: 0.7;
z-index: 5;
cursor: pointer;
}
/* --- 历史账单样式 --- */
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
font-size: 0.85rem;
}
.history-item:last-child {
border-bottom: none;
}
.history-meta {
font-size: 0.7rem;
color: var(--text);
opacity: 0.6;
margin-top: 2px;
}
.history-cost {
font-weight: bold;
color: var(--accent);
font-family: 'JetBrains Mono';
}
/* --- 难度选择器 --- */
.difficulty-selector {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.diff-btn {
padding: 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
font-size: 0.8rem;
cursor: pointer;
background: var(--card-bg);
transition: all 0.2s;
color: var(--text);
}
.diff-btn.active {
border-color: var(--accent);
background: var(--text);
color: var(--bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.diff-info {
font-size: 0.7rem;
opacity: 0.7;
margin-top: 3px;
}
/* --- 模态框 --- */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 6000;
justify-content: center;
align-items: flex-end;
}
.modal.active {
display: flex;
}
.sheet {
background: var(--card-bg);
width: 100%;
border-radius: 20px 20px 0 0;
padding: 30px 20px;
animation: slideUp 0.3s;
max-height: 85vh;
overflow-y: auto;
color: var(--text);
}
@keyframes slideUp {
from {
transform: translateY(100%)
}
to {
transform: translateY(0)
}
}
/* 统计相关 */
.vesper-comment {
background: var(--text);
color: var(--bg);
padding: 15px;
border-radius: 12px;
font-size: 0.85rem;
margin-bottom: 15px;
border-left: 4px solid var(--highlight);
font-family: 'JetBrains Mono';
line-height: 1.5;
transition: all 0.3s;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 3px;
margin-top: 10px;
}
.heat-cell {
aspect-ratio: 1;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
.heat-l1 {
background: var(--mystery-1);
opacity: 0.5;
}
.heat-l2 {
background: var(--mystery-1);
opacity: 0.8;
}
.heat-l3 {
background: var(--completed);
}
/* Focus Filters */
.filter-chip {
display: inline-block;
padding: 5px 12px;
background: var(--card-bg);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 15px;
font-size: 0.75rem;
color: var(--text);
opacity: 0.7;
cursor: pointer;
margin-right: 5px;
margin-bottom: 5px;
}
.filter-chip.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
opacity: 1;
}
.filter-bar {
overflow-x: auto;
white-space: nowrap;
padding-bottom: 5px;
}
/* Day Detail Stats */
.day-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 15px;
}
.day-stat-item div:first-child {
font-size: 1.4rem;
font-weight: bold;
color: var(--accent);
}
.day-stat-item div:last-child {
font-size: 0.7rem;
color: var(--text);
opacity: 0.6;
}
/* Animation */
.rotate-anim {
animation: spin 0.8s ease;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Pool Editor List */
.pool-list-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 0.9rem;
color: var(--text);
}
.pool-list-item:last-child {
border-bottom: none;
}
/* 侧边栏面板样式 */
.sidebar-panel {
display: none;
z-index: 3000 !important;
}
.sidebar-panel.active {
display: flex;
}
.sidebar-panel .sheet {
max-height: 90vh;
width: 100%;
max-width: 600px;
margin: auto;
}
.modal-on-top {
z-index: 15000 !important;
}
/* --- [Vesper] QQ风格聊天列表 --- */
.qq-chat-item {
display: flex;
align-items: center;
padding: 12px 15px;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.2s;
}
.qq-chat-item:hover {
background: rgba(0, 0, 0, 0.03);
}
.qq-chat-item:active {
background: rgba(0, 0, 0, 0.06);
}
.qq-chat-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}
.qq-chat-info {
flex: 1;
overflow: hidden;
}
.qq-chat-name {
font-weight: bold;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qq-chat-desc {
font-size: 0.8rem;
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 4px;
}
/* Markdown 内容样式 */
.markdown-content {
line-height: 1.6;
}
.markdown-content p {
margin: 0.2em 0;
}
.markdown-content p:first-child {
margin-top: 0;
}
.markdown-content p:last-child {
margin-bottom: 0;
}
.markdown-content code {
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.9em;
}
.markdown-content pre {
background: rgba(0, 0, 0, 0.05);
padding: 10px;
border-radius: 6px;
overflow-x: auto;
margin: 0.5em 0;
}
.markdown-content pre code {
background: none;
padding: 0;
}
.markdown-content ul,
.markdown-content ol {
margin: 0.5em 0;
padding-left: 1.5em;
}
.markdown-content li {
margin: 0.25em 0;
}
.markdown-content strong {
font-weight: bold;
}
.markdown-content em {
font-style: italic;
}
.markdown-content table {
border-collapse: collapse;
width: 100%;
margin: 0.5em 0;
}
.markdown-content th,
.markdown-content td {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 6px 10px;
text-align: left;
}
.markdown-content th {
background: rgba(0, 0, 0, 0.05);
font-weight: bold;
}
/* 长按菜单样式 */
.context-menu {
display: none;
position: fixed;
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 9999;
padding: 8px 0;
min-width: 160px;
}
.context-menu.active {
display: block;
}
.context-menu-item {
padding: 12px 20px;
cursor: pointer;
color: var(--text);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.2s;
}
.context-menu-item:hover {
background: rgba(0, 0, 0, 0.05);
}
.context-menu-item:active {
opacity: 0.7;
}
/* --- [Vesper] 多选模式样式 --- */
.multi-select-mode .chat-message-bubble {
cursor: pointer;
}
.chat-message-bubble.selected {
outline: 2px solid var(--accent);
outline-offset: 2px;
opacity: 0.9;
}
.multi-select-toolbar {
display: none;
position: fixed;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
background: var(--card-bg);
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 10px 20px;
z-index: 99999 !important;
gap: 15px;
align-items: center;
}
.multi-select-toolbar.active {
display: flex !important;
}
.multi-select-toolbar button {
background: none;
border: none;
padding: 8px 15px;
border-radius: 10px;
cursor: pointer;
font-size: 0.9rem;
color: var(--text);
transition: background 0.2s;
}
.multi-select-toolbar button:hover {
background: rgba(0, 0, 0, 0.1);
}
.multi-select-toolbar .delete-btn {
color: #c62828;
}
.multi-select-count {
font-weight: bold;
color: var(--accent);
}
/* --- [Vesper] 引用消息样式 - 嵌套气泡效果 --- */
.quote-block {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.18);
border-left: 3px solid var(--accent);
padding: 8px 10px;
margin-bottom: 10px;
border-radius: 8px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.2s;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
color: var(--text);
}
.quote-block:hover {
background: rgba(var(--accent-rgb), 0.13);
transform: translateX(2px);
}
.quote-block:active {
transform: scale(0.98);
}
.quote-block-header {
font-size: 0.7em;
opacity: 0.8;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 5px;
font-weight: bold;
color: var(--accent);
}
.quote-block-content {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
color: var(--text);
}
.quote-divider {
height: 1px;
background: linear-gradient(to right, var(--accent), transparent);
margin: 8px 0 6px 0;
opacity: 0.5;
}
/* 书籍摘录引用块 */
.excerpt-block {
background: rgba(var(--accent-rgb), 0.06);
border: 1px solid rgba(var(--accent-rgb), 0.15);
border-left: 3px solid var(--highlight, #D4A574);
padding: 10px 12px;
margin-bottom: 10px;
border-radius: 0 8px 8px 0;
font-size: 0.85em;
color: var(--text);
}
.excerpt-block-header {
font-size: 0.7em;
opacity: 0.7;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 5px;
font-weight: bold;
color: var(--accent);
}
.excerpt-block-content {
max-height: 120px;
overflow-y: auto;
line-height: 1.6;
font-style: italic;
opacity: 1;
padding-right: 5px;
white-space: pre-wrap;
word-break: break-word;
color: var(--text);
}
.excerpt-block-content::-webkit-scrollbar {
width: 3px;
}
.excerpt-block-content::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
opacity: 0.3;
}
/* 引用预览区域 */
.quote-preview {
display: none;
background: var(--card-bg);
border-left: 3px solid var(--accent);
padding: 8px 12px;
margin: 0 10px 10px 10px;
border-radius: 0 8px 8px 0;
position: relative;
}
.quote-preview.active {
display: block;
}
.quote-preview-close {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
opacity: 0.6;
font-size: 1.2rem;
}
.quote-preview-close:hover {
opacity: 1;
}
/* --- [Vesper] AI对话列表侧边栏样式：唯一定义在 chat.css（10-05 删掉这里的同码副本） --- */
.ai-conv-item {
background: var(--bg);
border-radius: 12px;
padding: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
display: flex;
align-items: center;
gap: 10px;
}
.ai-conv-item:hover {
background: rgba(var(--accent-rgb), 0.1);
transform: translateX(-2px);
}
.ai-conv-item.active {
border-color: var(--accent);
background: rgba(var(--accent-rgb), 0.15);
}
.ai-conv-new {
background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent)));
color: white;
justify-content: center;
text-align: center;
flex-direction: column;
gap: 5px;
}
.ai-conv-new:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.ai-conversation-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--bg-rgb, 0, 0, 0), 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 5000;
}
.ai-conversation-overlay.active {
display: block;
}
.ai-sidebar-section-title {
margin: 18px 2px 10px;
font-size: 0.82rem;
font-weight: 700;
color: var(--accent);
letter-spacing: 0;
}
.ai-sidebar-empty {
padding: 14px 10px;
border-radius: 10px;
background: rgba(var(--accent-rgb), 0.06);
color: var(--text);
opacity: 0.62;
font-size: 0.82rem;
line-height: 1.5;
}
.ai-project-row {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
min-height: 56px;
padding: 10px;
margin-bottom: 8px;
border-radius: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.08);
background: rgba(var(--accent-rgb), 0.05);
color: var(--text);
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ai-project-row:hover,
.ai-project-row:active {
transform: translateX(-2px);
background: rgba(var(--accent-rgb), 0.12);
border-color: rgba(var(--accent-rgb), 0.22);
}
.ai-project-new {
border-style: dashed;
background: transparent;
}
.ai-project-svg {
width: 28px;
height: 28px;
flex: 0 0 28px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--accent);
}
.ai-project-row-main,
.ai-source-row-main {
min-width: 0;
flex: 1;
}
.ai-project-row-title,
.ai-source-name {
font-weight: 700;
font-size: 0.94rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-project-row-sub,
.ai-source-meta {
margin-top: 3px;
font-size: 0.74rem;
opacity: 0.58;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-pin-mark {
display: inline-flex;
align-items: center;
margin-right: 6px;
padding: 1px 5px;
border-radius: 6px;
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent);
font-size: 0.68rem;
vertical-align: middle;
}
.ai-project-page-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.ai-icon-btn {
width: 38px;
height: 38px;
border: 1px solid rgba(var(--accent-rgb), 0.16);
border-radius: 999px;
background: var(--bg);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 38px;
}
.ai-icon-btn .ico {
width: 19px;
height: 19px;
}
.ai-project-page-title {
min-width: 0;
flex: 1;
}
.ai-project-page-title>div {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
color: var(--accent);
}
.ai-project-page-title small {
display: block;
margin-top: 2px;
font-size: 0.72rem;
opacity: 0.58;
}
.ai-project-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
.ai-project-card {
min-height: 94px;
padding: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
border-radius: 12px;
background: rgba(var(--accent-rgb), 0.06);
color: var(--text);
text-align: left;
cursor: pointer;
}
.ai-project-card-wide {
grid-column: 1 / -1;
min-height: 82px;
}
.ai-project-card-title {
font-weight: 800;
margin-bottom: 8px;
}
.ai-project-card-text {
font-size: 0.8rem;
line-height: 1.45;
opacity: 0.68;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ai-project-fab {
position: sticky;
bottom: 12px;
margin-left: auto;
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
background: var(--accent);
color: var(--bg);
box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.32);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ai-project-fab .ico {
width: 25px;
height: 25px;
}
.ai-project-modal-sheet {
width: min(92vw, 520px);
max-height: 88vh;
overflow-y: auto;
}
.ai-project-picker-list,
.ai-project-source-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-project-picker-row,
.ai-source-row {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 11px;
border-radius: 12px;
border: 1px solid rgba(var(--accent-rgb), 0.1);
background: var(--bg);
color: var(--text);
text-align: left;
}
.ai-project-picker-row {
cursor: pointer;
}
.ai-project-picker-row span {
font-weight: 700;
}
.ai-text-danger-btn {
border: none;
background: rgba(198, 40, 40, 0.08);
color: #c62828;
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
flex: 0 0 auto;
}
/* --- [Vesper] 番茄钟SVG圆环呼吸动画 --- */
@keyframes timer-breathing {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
@keyframes text-glow {
0%,
100% {
text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}
50% {
text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6);
}
}
#timer-progress-ring,
#fullscreen-progress-ring {
animation: timer-breathing 2s ease-in-out infinite;
}
#timer-display svg,
#fullscreen-timer svg {
filter: drop-shadow(0 0 15px rgba(var(--accent-rgb), 0.4));
}
#fullscreen-timer-text {
animation: text-glow 3s ease-in-out infinite;
}
/* 退出按钮悬停效果 */
#fullscreen-timer button:hover {
background: rgba(var(--accent-rgb), 0.2);
transform: translateX(-2px);
}
#fullscreen-timer button:active {
transform: translateX(-2px) scale(0.95);
}
/* 激励语淡入动画 */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 0.5;
transform: translateY(0);
}
}
#fullscreen-motivation {
animation: fade-in-up 1s ease-out;
}
/* --- [Vesper] 搜索结果面板样式 --- */
.search-results-panel {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
justify-content: center;
align-items: center;
}
.search-results-panel.active {
display: flex;
}
.search-results-content {
background: var(--card-bg);
border-radius: 16px;
max-width: 90%;
max-height: 80%;
width: 400px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.search-results-header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.search-results-header h3 {
margin: 0;
color: var(--accent);
}
.search-results-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
opacity: 0.6;
}
.search-results-close:hover {
opacity: 1;
}
.search-results-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.search-result-item {
padding: 12px;
border-radius: 10px;
margin-bottom: 8px;
cursor: pointer;
background: var(--bg);
transition: all 0.2s;
}
.search-result-item:hover {
background: rgba(0, 0, 0, 0.05);
transform: translateX(5px);
}
.search-result-role {
font-size: 0.75rem;
opacity: 0.7;
margin-bottom: 4px;
}
.search-result-preview {
font-size: 0.9rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.search-result-time {
font-size: 0.7rem;
opacity: 0.5;
margin-top: 6px;
}
.search-result-keyword {
background: rgba(var(--accent-rgb, 255, 165, 0), 0.3);
padding: 0 2px;
border-radius: 2px;
}
.chat-info-search-panel {
display: none;
position: fixed;
inset: 0;
z-index: 12000;
background: var(--bg);
color: var(--text);
}
.chat-info-search-panel.active {
display: block;
}
.chat-info-search-shell {
width: min(720px, 100%);
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
background: var(--bg);
}
.chat-info-search-topbar {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: calc(var(--azoth-safe-top) + 10px) 12px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: var(--card-bg);
flex-shrink: 0;
}
.chat-info-search-back,
.chat-info-search-cancel {
border: none;
background: transparent;
color: var(--text);
min-width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.chat-info-search-cancel {
color: var(--accent);
font-size: 0.9rem;
padding: 0 4px;
}
.chat-info-search-field {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid rgba(10, 34, 245, 0.18);
background: var(--card-bg);
overflow: hidden;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.chat-info-search-field:focus-within {
border-color: rgba(10, 34, 245, 0.42);
box-shadow: 0 0 0 3px rgba(10, 34, 245, 0.16);
}
.chat-info-search-field .ico {
width: 16px;
height: 16px;
opacity: 0.72;
flex-shrink: 0;
color: var(--text-secondary);
transition: color 0.18s ease, opacity 0.18s ease;
}
.chat-info-search-field:focus-within .ico {
color: var(--accent);
opacity: 1;
}
.chat-info-search-field input {
-webkit-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
color: var(--text);
width: 100%;
height: 100%;
padding: 0;
font-size: 0.95rem;
opacity: 0.88;
box-shadow: none !important;
border-radius: 0;
transition: opacity 0.18s ease;
}
.chat-info-search-field input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.chat-info-search-field:focus-within input {
opacity: 1;
}
.chat-info-search-meta {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 16px;
font-size: 0.75rem;
color: var(--text-secondary);
background: var(--bg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.chat-info-search-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.chat-info-search-categories {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: var(--card-bg);
}
.chat-info-search-category {
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: transparent;
color: var(--text);
min-height: 72px;
padding: 10px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
}
.chat-info-search-category:nth-child(2n) {
border-right: none;
}
.chat-info-search-category .ico {
width: 20px;
height: 20px;
color: var(--accent);
}
.chat-info-search-category span {
font-size: 0.86rem;
}
.chat-info-search-category small {
color: var(--text-secondary);
font-size: 0.68rem;
}
.chat-info-search-section-title {
margin: 16px 0 8px;
font-size: 0.78rem;
color: var(--text-secondary);
}
.chat-info-search-result {
width: 100%;
border: none;
text-align: left;
background: var(--card-bg);
color: var(--text);
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.chat-info-search-result:hover,
.chat-info-search-result:focus-visible {
box-shadow: 0 0 0 2px rgba(10, 34, 245, 0.18);
outline: none;
}
.chat-info-search-result-head {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.74rem;
color: var(--text-secondary);
margin-bottom: 6px;
}
.chat-info-search-result-title {
font-size: 0.92rem;
line-height: 1.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.chat-info-search-result-sub {
margin-top: 6px;
font-size: 0.74rem;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-info-search-mark {
background: rgba(var(--accent-rgb, 10, 34, 245), 0.18);
color: var(--accent);
padding: 0 2px;
border-radius: 2px;
}
.chat-info-search-empty {
text-align: center;
color: var(--text-secondary);
padding: 56px 20px;
font-size: 0.9rem;
}
.chat-info-date-month {
margin-bottom: 18px;
}
.chat-info-date-title {
font-size: 0.88rem;
color: var(--accent);
margin: 10px 0;
font-weight: 600;
}
.chat-info-date-week,
.chat-info-date-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.chat-info-date-week span {
text-align: center;
color: var(--text-secondary);
font-size: 0.72rem;
padding: 5px 0;
}
.chat-info-date-day {
position: relative;
border: none;
background: transparent;
color: var(--text-secondary);
min-height: 38px;
border-radius: 8px;
cursor: default;
}
.chat-info-date-day.has-records {
background: var(--card-bg);
color: var(--text);
cursor: pointer;
}
.chat-info-date-day.has-records::after {
content: attr(data-count);
position: absolute;
right: 4px;
bottom: 3px;
min-width: 14px;
height: 14px;
border-radius: 7px;
background: var(--accent);
color: var(--bg);
font-size: 0.56rem;
line-height: 14px;
}
@media (max-width: 520px) {
.chat-info-search-shell {
width: 100%;
}
.chat-info-search-body {
padding-left: 12px;
padding-right: 12px;
}
.chat-info-search-categories {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chat-info-search-category {
min-height: 68px;
}
}
/* --- [Vesper] 气泡形态学 (Bubble Morphology) --- */
/* 基础气泡构造（所有主题通用） */
.chat-message-bubble {
transition: all 0.3s ease;
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
}
/* 防止图片和长链接撑大聊天界面 */
.chat-message-bubble img {
max-width: 100%;
height: auto;
}
.chat-message-bubble a {
word-break: break-all;
}
.markdown-content {
overflow-x: hidden;
max-width: 100%;
}
.markdown-content pre {
overflow-x: auto;
max-width: 100%;
}
.markdown-content img {
max-width: 100%;
height: auto;
}
/* KaTeX 数学公式样式 */
.katex-block {
display: block;
text-align: center;
margin: 0.8em 0;
overflow-x: auto;
overflow-y: hidden;
padding: 0.5em 0;
}
.katex-inline {
display: inline;
}
.markdown-content .katex {
font-size: 1.1em;
}
.markdown-content .katex-display {
margin: 0.5em 0;
overflow-x: auto;
overflow-y: hidden;
}
/* ================== 主题特异性演化 ================== */
/* 4. Blue (蓝白): 秩序、文档、图纸 */
[data-theme="blue"] .chat-message-bubble {
border-radius: 6px !important;
}
[data-theme="blue"] .chat-message-bubble[data-msg-role="user"] {
background: var(--accent) !important;
color: white !important;
}
[data-theme="blue"] .chat-message-bubble[data-msg-role="assistant"] {
background: #f0f8ff !important;
color: var(--text) !important;
border-left: 1px solid var(--accent) !important;
}
/* 5. Lime (青柠): 躁动、波普、高对比 */
[data-theme="lime"] .chat-message-bubble {
box-shadow: 4px 4px 0px #000;
border: 2px solid #000;
border-radius: 0 !important;
font-weight: bold;
}
[data-theme="lime"] .chat-message-bubble[data-msg-role="user"] {
background: var(--accent) !important;
color: #000 !important;
}
[data-theme="lime"] .chat-message-bubble[data-msg-role="assistant"] {
background: #fff !important;
color: #000 !important;
}
/* --- [Vesper] AI 周报样式 --- */
.ai-report-card {
position: relative;
border-radius: 20px;
padding: 25px;
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.ai-report-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.15;
z-index: 0;
}
.ai-report-card>* {
position: relative;
z-index: 1;
}
.ai-report-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.ai-report-title {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.3;
max-width: 70%;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ai-report-score {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.ai-report-score-num {
font-size: 1.8rem;
font-weight: bold;
line-height: 1;
}
.ai-report-score-label {
font-size: 0.6rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
.ai-report-summary {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(5px);
}
.ai-report-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.ai-report-tag {
padding: 6px 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
backdrop-filter: blur(5px);
}
.ai-report-meta {
font-size: 0.75rem;
opacity: 0.7;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ai-report-generating {
text-align: center;
padding: 40px 20px;
}
.ai-report-generating .spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* 周报档案列表 */
.report-archive-item {
background: var(--card-bg);
border-radius: 16px;
padding: 15px;
margin-bottom: 12px;
box-shadow: var(--shadow);
cursor: pointer;
transition: all 0.2s;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 15px;
}
.report-archive-item:hover {
transform: translateX(5px);
}
.report-archive-item:active {
transform: scale(0.98);
}
.report-archive-color {
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
}
.report-archive-info {
flex: 1;
min-width: 0;
}
.report-archive-title {
font-weight: bold;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.report-archive-date {
font-size: 0.75rem;
opacity: 0.6;
}
.report-archive-score {
font-size: 1.2rem;
font-weight: bold;
color: var(--accent);
}
/* 修复滑动条过于粗的问题 */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
/* 移动端强制全屏样式 */
@media (max-width: 480px) {
.sidebar-panel.active .sheet {
width: 100vw !important;
height: 100vh !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
padding: 15px !important;
}
/* 针对 AI 助手聊天窗口的特殊优化 */
#panel-ai-assistant .sheet {
padding: 10px !important;
}
/* 聊天内容区域高度调整，确保输入框不被顶出 */
#ai-chat-container {
flex: 1 !important;
height: auto !important;
max-height: none !important;
margin-bottom: 10px !important;
}
/* 确保输入框区域可见 */
#panel-ai-assistant .input-group {
margin-bottom: 0 !important;
}
}
/* --- [Vesper] 修复移动端聊天输入框被键盘遮挡 --- */
#character-chat-screen>div:last-of-type {
position: fixed !important;
/* 使用 !important 覆盖内联样式 */
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
z-index: 5001;
}
#character-chat-messages {
padding-bottom: 130px !important;
/* 留出输入框的空间 (含工具栏) */
will-change: scroll-position;
}
/* [性能优化] GPU 加速提示 */
#nav-transition-overlay {
will-change: opacity;
}
.modal {
will-change: transform, opacity;
}
/* --- [Vesper] 战术工具栏样式 --- */
.tool-icon {
cursor: pointer;
opacity: 0.6;
transition: all 0.2s;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.tool-icon:hover {
opacity: 1;
transform: translateY(-2px);
color: var(--accent);
}
.tool-icon:active {
transform: scale(0.9);
}
.tool-icon.active {
opacity: 1;
color: var(--accent);
animation: breathing 2s ease-in-out infinite;
}
@keyframes breathing {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* --- [Vesper] 聊天 header 可折叠工具按钮 ---
旧的横向展开容器：保留 DOM 兼容（其他流程可能引用），UI 已切到 #chat-tools-popover 圆角小卡。 */
.chat-extra-tools {
display: none !important;
}
/* --- 聊天工具 popover 小卡 --- */
.chat-tools-popover-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: transparent;
}
/* 与 .context-menu（长按菜单卡）尺寸一致 */
.chat-tools-popover {
position: fixed;
top: 70px;
right: 14px;
background: var(--card-bg);
color: var(--text);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
min-width: 160px;
max-width: min(260px, calc(100vw - 28px));
padding: 8px 0;
z-index: 9100;
animation: chat-tools-popover-fadein 0.15s ease-out;
overflow: hidden;
}
@keyframes chat-tools-popover-fadein {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-tools-popover-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
cursor: pointer;
user-select: none;
font-size: 0.9rem;
color: var(--text);
background: transparent;
border: none;
width: 100%;
text-align: left;
line-height: 1.4;
transition: background 0.2s ease;
}
.chat-tools-popover-item:hover,
.chat-tools-popover-item:focus-visible {
background: rgba(0, 0, 0, 0.05);
outline: none;
}
.chat-tools-popover-item:active {
opacity: 0.7;
}
.chat-tools-popover-item .ico,
.chat-tools-popover-item svg {
flex-shrink: 0;
}
.chat-tools-popover-item.danger {
color: #c62828;
}
#chat-tools-toggle-btn {
transition: transform 0.3s ease, opacity 0.2s;
}
#chat-tools-toggle-btn.active {
transform: rotate(90deg);
opacity: 1;
color: var(--accent);
animation: none;
}
/* 离线模式样式：10-11 移到 ui/shell/network-status.js（独立小标签 #az-offline-pill）。
原来写在 body::before 上，和白雾 / 锈湖等主题自己的整屏 body::before 底纹叠成一整屏红色遮罩；
body 上的 filter 还会让所有 position:fixed 的顶栏 / 底栏 / 侧栏改成跟着 body 走 ⇒ 整页滑开。
下面的 @keyframes fadeIn 不是这块专用的（.view 入场也用它），保留。 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#network-indicator {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* ==================== LifeOS 图书馆样式 ==================== */
/* 图书馆导航项 */
.library-nav-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.65rem;
color: var(--text);
opacity: 0.4;
gap: 4px;
transition: all 0.2s;
cursor: pointer;
padding: 5px;
}
.library-nav-item.active {
opacity: 1;
transform: translateY(-2px);
font-weight: bold;
color: var(--accent);
}
.library-nav-item:hover {
opacity: 0.7;
}
/* 图书馆Tab内容 */
.library-tab-content {
animation: fadeIn 0.3s ease;
}
/* 书籍卡片 */
.book-card {
background: var(--card-bg);
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
box-shadow: var(--shadow);
cursor: pointer;
transition: all 0.2s;
border-left: 4px solid var(--accent);
display: flex;
gap: 15px;
align-items: center;
}
.book-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.book-card:active {
transform: scale(0.98);
}
.book-card-cover {
width: 60px;
height: 80px;
background: linear-gradient(135deg, var(--accent), var(--highlight));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.book-card-info {
flex: 1;
min-width: 0;
}
.book-card-title {
font-weight: bold;
font-size: 1rem;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.book-card-meta {
font-size: 0.75rem;
opacity: 0.6;
margin-bottom: 3px;
}
.book-card-progress {
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 8px;
}
.book-card-progress-bar {
height: 100%;
background: var(--accent);
border-radius: 2px;
transition: width 0.3s;
}
/* 阅读室卡片 */
.reading-room-card {
background: var(--card-bg);
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
box-shadow: var(--shadow);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 15px;
}
.reading-room-card:hover {
background: rgba(0, 0, 0, 0.03);
transform: translateX(5px);
}
.reading-room-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent);
}
.reading-room-info {
flex: 1;
min-width: 0;
}
.reading-room-name {
font-weight: bold;
font-size: 0.95rem;
margin-bottom: 4px;
}
.reading-room-desc {
font-size: 0.75rem;
opacity: 0.6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 笔记按书分组 - 手风琴 */
.note-book-group {
margin-bottom: 12px;
border-radius: 12px;
overflow: hidden;
background: var(--card-bg);
box-shadow: var(--shadow);
border: 1px solid rgba(var(--accent-rgb), 0.1);
}
.note-book-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 15px;
cursor: pointer;
transition: background 0.2s;
user-select: none;
}
.note-book-header:hover {
background: rgba(var(--accent-rgb), 0.05);
}
.note-book-header:active {
background: rgba(var(--accent-rgb), 0.1);
}
.note-book-header .arrow {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
opacity: 0.4;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.note-book-header.expanded .arrow {
transform: rotate(90deg);
}
.note-book-header .book-icon {
width: 20px;
height: 20px;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
flex-shrink: 0;
}
.note-book-header .book-title {
flex: 1;
font-weight: bold;
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.note-book-header .note-count {
font-size: 0.7rem;
opacity: 0.5;
flex-shrink: 0;
padding: 2px 8px;
background: rgba(var(--accent-rgb), 0.08);
border-radius: 10px;
}
.note-book-items {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.note-book-items.expanded {
max-height: 5000px;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.note-book-items .note-item {
padding: 12px 15px;
border-top: 1px solid rgba(128, 128, 128, 0.1);
cursor: pointer;
transition: background 0.2s;
}
.note-book-items .note-item:hover {
background: rgba(var(--accent-rgb), 0.03);
}
.note-book-items .note-item:active {
background: rgba(var(--accent-rgb), 0.08);
}
/* 阅读器工具栏 */
.reader-toolbar {
backdrop-filter: blur(10px);
}
/* 阅读器工具按钮 */
.reader-tool-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s;
}
.reader-tool-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.reader-tool-btn:active {
transform: scale(0.95);
}
/* 字体切换：#id.class * + !important，压过主题的 [data-theme] p/div/span !important 字体规则 */
#reader-content.reader-customfont,
#reader-content.reader-customfont * {
font-family: var(--reader-font) !important;
}
/* 下划线模式：正文每行加淡淡的虚线（单行本式，不要实线） */
.reader-underline p[data-paragraph],
.reader-underline .reader-md-block,
.reader-underline .reader-pdf-formula {
text-decoration: underline dashed;
text-decoration-color: rgba(var(--accent-rgb), 0.3);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
/* 夜间模式：淡黑底 + 浅灰字（!important 压过子元素自带的 color:var(--text)，如章节标题/md 块） */
#reader-screen.reader-night {
background: #1a1a1a !important;
}
#reader-content.reader-night,
#reader-content.reader-night p[data-paragraph],
#reader-content.reader-night .reader-chapter-heading,
#reader-content.reader-night .reader-md-block,
#reader-content.reader-night .reader-pdf-formula {
color: #cfcfcf !important;
}
/* 顶栏 ← / ⋮ 图标按键：鼠标互动 + 按动反馈 */
.reader-top-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
transition: background 0.15s, transform 0.1s;
}
.reader-top-icon:hover {
background: rgba(var(--accent-rgb), 0.1);
}
.reader-top-icon:active {
transform: scale(0.9);
background: rgba(var(--accent-rgb), 0.18);
}
/* 悬浮按钮按动反馈 */
#reader-float-btn {
transition: transform 0.12s, box-shadow 0.2s;
}
#reader-float-btn:hover {
transform: scale(1.06);
}
#reader-float-btn:active {
transform: scale(0.92);
}
/* 阅读器悬浮菜单项 */
.reader-float-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
font-size: 0.9rem;
}
.reader-float-menu-item:hover {
background: rgba(0, 0, 0, 0.05);
}
.reader-float-menu-item:active {
transform: scale(0.98);
}
/* 阅读内容文字选择样式 */
#reader-content,
#reader-content * {
-webkit-user-select: text !important;
user-select: text !important;
}
#reader-content::selection,
#reader-content *::selection {
background: rgba(var(--accent-rgb, 139, 90, 43), 0.3);
}
/* 阅读器章节标题样式 */
.reader-chapter-heading {
font-size: 1.6em;
font-weight: 800;
text-align: center;
margin: 2.5em 0 1.5em;
padding: 1.2em 0;
border-top: 1px solid rgba(128, 128, 128, 0.2);
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
letter-spacing: 0.05em;
line-height: 1.4;
color: var(--text);
}
.reader-chapter-heading:first-child {
margin-top: 0.5em;
}
/* 阅读器脚注链接样式 */
.reader-footnote-link {
color: var(--accent);
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed var(--accent);
font-size: 0.85em;
vertical-align: super;
padding: 0 1px;
}
.reader-footnote-link:hover {
opacity: 0.8;
}
/* 脚注跳转目标闪烁效果 */
.reader-link-target-flash {
animation: readerLinkFlash 2s ease-out;
}
@keyframes readerLinkFlash {
0%,
20% {
background-color: rgba(var(--accent-rgb, 139, 90, 43), 0.3);
}
100% {
background-color: transparent;
}
}
/* 阅读器翻页模式 */
#reader-content.reader-page-mode {
overflow-x: auto !important;
overflow-y: hidden !important;
column-fill: auto;
/* column-gap 由 JS 动态设置 = 左右 padding 之和 */
scroll-behavior: smooth;
/* 不设 scroll-snap-type，由 JS 手动 snap 避免冲突 */
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
box-sizing: border-box;
/* 隐藏水平滚动条，防止它占用空间导致列宽计算偏差 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE/Edge */
}
#reader-content.reader-page-mode::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
#reader-content.reader-page-mode p,
#reader-content.reader-page-mode .reader-chapter-heading {
break-inside: auto;
max-width: 100%;
}
#reader-content.reader-page-mode img,
#reader-content.reader-page-mode video,
#reader-content.reader-page-mode table {
max-width: 100%;
height: auto;
}
/* 文字选择工具栏 */
.text-selection-toolbar {
position: fixed;
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 8px;
display: none;
z-index: 8000;
gap: 5px;
}
.text-selection-toolbar.active {
display: flex;
}
.text-selection-btn {
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
white-space: nowrap;
}
.text-selection-btn:hover {
background: rgba(0, 0, 0, 0.1);
}
.text-selection-btn:active {
transform: scale(0.95);
}
/* 笔记高亮 - 多颜色支持 */
.reading-highlight {
background: rgba(255, 235, 59, 0.3);
cursor: pointer;
border-bottom: 2px solid rgba(255, 193, 7, 0.5);
border-radius: 2px;
transition: background 0.2s;
}
.reading-highlight:hover {
background: rgba(255, 235, 59, 0.5);
}
/* 黄色（默认） */
.reading-highlight[data-color="yellow"],
.reading-highlight:not([data-color]) {
background: rgba(255, 235, 59, 0.3);
border-bottom-color: rgba(255, 193, 7, 0.5);
}
.reading-highlight[data-color="yellow"]:hover,
.reading-highlight:not([data-color]):hover {
background: rgba(255, 235, 59, 0.5);
}
/* 粉色 */
.reading-highlight[data-color="pink"] {
background: rgba(255, 105, 135, 0.25);
border-bottom-color: rgba(233, 30, 99, 0.5);
}
.reading-highlight[data-color="pink"]:hover {
background: rgba(255, 105, 135, 0.4);
}
/* 蓝色 */
.reading-highlight[data-color="blue"] {
background: rgba(100, 181, 246, 0.25);
border-bottom-color: rgba(33, 150, 243, 0.5);
}
.reading-highlight[data-color="blue"]:hover {
background: rgba(100, 181, 246, 0.4);
}
/* 绿色 */
.reading-highlight[data-color="green"] {
background: rgba(129, 199, 132, 0.25);
border-bottom-color: rgba(76, 175, 80, 0.5);
}
.reading-highlight[data-color="green"]:hover {
background: rgba(129, 199, 132, 0.4);
}
/* 紫色 */
.reading-highlight[data-color="purple"] {
background: rgba(186, 104, 200, 0.25);
border-bottom-color: rgba(156, 39, 176, 0.5);
}
.reading-highlight[data-color="purple"]:hover {
background: rgba(186, 104, 200, 0.4);
}
/* 笔记标记（虚线下划线） */
.reading-note-mark {
border-bottom: 2px dashed rgba(255, 152, 0, 0.6);
cursor: pointer;
border-radius: 2px;
}
.reading-note-mark:hover {
background: rgba(255, 152, 0, 0.1);
}
/* 高亮颜色选择器 */
.highlight-color-picker {
display: none;
position: fixed;
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 9999;
padding: 10px;
gap: 8px;
}
.highlight-color-picker.active {
display: flex;
align-items: center;
}
.highlight-color-dot {
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.15s, border-color 0.15s;
}
.highlight-color-dot:hover {
transform: scale(1.2);
}
.highlight-color-dot.active {
border-color: var(--text);
}
.highlight-color-dot[data-color="yellow"] {
background: rgba(255, 235, 59, 0.7);
}
.highlight-color-dot[data-color="pink"] {
background: rgba(255, 105, 135, 0.7);
}
.highlight-color-dot[data-color="blue"] {
background: rgba(100, 181, 246, 0.7);
}
.highlight-color-dot[data-color="green"] {
background: rgba(129, 199, 132, 0.7);
}
.highlight-color-dot[data-color="purple"] {
background: rgba(186, 104, 200, 0.7);
}
.highlight-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
border: 2px solid rgba(198, 40, 40, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #c62828;
transition: transform 0.15s;
background: rgba(198, 40, 40, 0.1);
}
.highlight-remove-btn:hover {
transform: scale(1.2);
}
/* 响应式调整 */
@media (max-width: 480px) {
.book-card-cover {
width: 50px;
height: 70px;
font-size: 1.5rem;
}
.book-card-title {
font-size: 0.9rem;
}
}
/* =========================================
VESPER PATCH A: REFINED WARMTH
"Your colors, my structure."
========================================= */
/* 1. 字体优化：衬线体带来的文学感 */
body {
font-family: 'JetBrains Mono', 'Noto Serif SC', serif !important;
letter-spacing: 0.02em;
background-image: radial-gradient(var(--accent) 0.5px, transparent 0.5px);
background-size: 20px 20px;
}
/* 2. 容器优化：更细腻的卡片 */
.container,
.mini-card,
.sheet,
.modal .sheet {
border-radius: 12px !important;
box-shadow: 0 4px 6px -1px rgba(var(--accent-rgb), 0.1),
0 2px 4px -1px rgba(var(--accent-rgb), 0.06) !important;
border: 1px solid rgba(var(--accent-rgb), 0.15);
}
/* 3. 状态栏：毛玻璃效果 */
.status-bar {
background: rgba(var(--bg-rgb), 0.85) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
/* 4. Bingo 格子：像巧克力块一样 */
.bingo-grid {
gap: 8px;
padding: 5px;
}
.cell {
background: var(--card-bg);
border: 1px solid rgba(var(--accent-rgb), 0.2);
border-radius: 8px !important;
color: var(--text);
font-family: 'JetBrains Mono';
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 0 rgba(var(--accent-rgb), 0.1);
}
.cell:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 4px 0 rgba(var(--accent-rgb), 0.2);
}
.cell.completed {
background: var(--completed);
color: #fff;
border-color: transparent;
text-decoration: none;
opacity: 1;
}
.cell.completed::after {
content: '\2713';
display: block;
font-size: 0.6rem;
opacity: 0.8;
}
/* 5. 按钮：优雅的胶囊 */
.btn {
border-radius: 8px;
font-family: 'Noto Serif SC', serif;
font-weight: bold;
letter-spacing: 1px;
box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.2);
}
/* 6. 导航栏：激活状态 */
.nav-item.active {
color: var(--accent);
transform: translateY(-3px);
}
.nav-item.active .nav-icon {
background: rgba(var(--accent-rgb), 0.1);
border-radius: 8px;
padding: 2px 8px;
}
/* 7. 商店列表优化 */
.shop-item {
border: 1px solid rgba(0, 0, 0, 0.05);
}
.shop-icon {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
/* =========================================
VESPER ICON SYSTEM
"Glyphs, not stickers."
========================================= */
.icon {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
vertical-align: middle;
transition: all 0.3s ease;
}
.nav-icon .icon {
width: 24px;
height: 24px;
margin-bottom: 2px;
}
.menu-icon .icon {
width: 18px;
height: 18px;
opacity: 0.8;
}
.nav-item.active .icon {
stroke-width: 2.5;
filter: drop-shadow(0 0 2px var(--accent));
}
/* =========================================
VESPER HAPTICS: Z-AXIS & DEPTH
"Make it click."
========================================= */
/* 1. 输入框与下拉菜单：凹陷的数据槽 */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
border: 2px solid rgba(var(--accent-rgb), 0.15) !important;
background: rgba(0, 0, 0, 0.02) !important;
box-shadow: inset 0 2px 4px rgba(var(--accent-rgb), 0.08) !important;
border-radius: 6px !important;
transition: all 0.2s ease;
color: var(--text);
font-weight: 500;
}
input:focus,
textarea:focus,
select:focus {
background: var(--card-bg) !important;
border-color: var(--accent) !important;
box-shadow: inset 0 2px 4px rgba(var(--accent-rgb), 0.05),
0 0 0 3px rgba(var(--accent-rgb), 0.1) !important;
transform: translateY(-1px);
}
/* 搜索框双框根修（8-27，塔拉真机报全主题复现）。本 app 的搜索框全部是
「外层壳画边框/底色（.chat-info-search-field / .daily-feed-search / .iwb-search /
.music-search-form），内层 input 抹平」的两层结构 —— 但上面这条不带作用域的
input:focus 会给内层再画一圈 focus 环 + 换底色 + 位移，主题 CSS（fog/roots 等）
的 input 通铺规则又给内层补回边框 ⇒ 框里套框。
type="search" 在本 app 只作为搜索壳内层出现（无裸用），这里整类抹平，
由壳统一出唯一轮廓；新搜索壳仍按 fog.css 壳豁免名单惯例登记 text 型内层。 */
input[type="search"],
input[type="search"]:focus {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
transform: none;
}
/* 2. 按钮：机械按键物理学 */
.btn {
border: none !important;
background: var(--accent) !important;
color: var(--bg) !important;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2),
0 5px 10px rgba(0, 0, 0, 0.15) !important;
transform: translateY(0);
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 800;
letter-spacing: 0.5px;
border-radius: 8px !important;
padding: 12px 20px !important;
}
.btn:active {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
inset 0 2px 5px rgba(0, 0, 0, 0.1) !important;
transform: translateY(4px) !important;
}
.btn-sec {
background: var(--card-bg) !important;
border: 2px solid rgba(var(--accent-rgb), 0.2) !important;
box-shadow: 0 2px 0 rgba(var(--accent-rgb), 0.1) !important;
color: var(--text) !important;
transform: translateY(0);
}
.btn-sec.active {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
box-shadow: 0 2px 0 rgba(var(--accent-rgb), 0.25) !important;
}
.btn-sec:active {
box-shadow: none !important;
transform: translateY(2px) !important;
border-color: var(--accent) !important;
}
/* [已迁出] 仿ChatGPT 皮全部样式 → chatgpt-theme.css（chat.css+主题之后加载，哥哥 7-5 根因修）*/
/* 3. 卡片与模态框：悬浮层级 */
.mini-card,
.shop-item,
.sheet {
border: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 3px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 20px -10px rgba(var(--accent-rgb), 0.15),
0 4px 6px -2px rgba(var(--accent-rgb), 0.05) !important;
}
/* 4. Bingo 格子：麻将牌质感 */
.cell {
background: linear-gradient(145deg, var(--card-bg), rgba(var(--bg-rgb), 0.8));
box-shadow: 3px 3px 6px rgba(var(--accent-rgb), 0.1),
-3px -3px 6px rgba(255, 255, 255, 0.8) !important;
border: none !important;
}
.cell:active {
box-shadow: inset 2px 2px 5px rgba(var(--accent-rgb), 0.1),
inset -2px -2px 5px rgba(255, 255, 255, 0.8) !important;
transform: scale(0.98);
}
.cell.completed {
background: var(--completed) !important;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
transform: translateY(1px);
}
/* 5. 标签 (Chips)：圆润的鹅卵石 */
.filter-chip,
.diff-btn {
border: 1px solid rgba(var(--accent-rgb), 0.1) !important;
box-shadow: 0 2px 0 rgba(var(--accent-rgb), 0.1) !important;
transition: all 0.1s;
}
.filter-chip.active,
.diff-btn.active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
transform: translateY(2px);
border: none !important;
}
/* =========================================
VESPER MATERIALIZATION: LIBRARY & ARCHIVES
"Data made tangible."
========================================= */
/* --- 1. 图书馆：从"列表"变"书架" --- */
#bookshelf-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 14px;
padding: 10px 5px;
}
.book-card {
flex-direction: column !important;
align-items: flex-start !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.book-card:active {
transform: scale(0.95) translateY(5px);
}
.book-card-cover {
width: 100% !important;
aspect-ratio: 2 / 3;
height: auto !important;
border-radius: 4px 8px 8px 4px !important;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 100%),
var(--accent) !important;
box-shadow:
-2px 0 0 rgba(0, 0, 0, 0.2),
5px 5px 10px rgba(0, 0, 0, 0.15),
inset 1px 1px 0 rgba(255, 255, 255, 0.2);
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 6px;
border: none !important;
}
.book-card-info {
width: 100%;
text-align: center;
}
.book-card-title {
font-size: 0.74rem !important;
font-weight: bold;
color: var(--text);
line-height: 1.2;
margin-bottom: 2px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.book-card-meta {
font-size: 0.6rem !important;
opacity: 0.5;
}
.book-card-progress {
height: 3px !important;
background: rgba(0, 0, 0, 0.1) !important;
margin-top: 5px !important;
border-radius: 2px;
}
/* --- 2. 角色管理：机密档案袋风格 --- */
#character-list {
display: flex !important;
flex-direction: column;
gap: 6px;
padding: 8px;
min-width: 0;
overflow-x: hidden;
}
#character-list>div,
#worldbook-list>div {
background: var(--card-bg);
border: 1px solid rgba(var(--accent-rgb), 0.15);
border-left: 4px solid var(--accent);
padding: 10px 12px;
border-radius: 6px !important;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
#character-list>div::after {
content: '';
position: absolute;
right: -20px;
top: -20px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-rgb), 0.05) 50%);
pointer-events: none;
}
/* --- 3. 世界书：百科全书词条 --- */
#worldbook-list {
display: grid !important;
gap: 10px;
}
#worldbook-list>div {
border-left-color: var(--highlight);
font-family: 'Noto Serif SC', serif;
}
#worldbook-list h4,
#worldbook-list strong {
font-size: 1rem;
color: var(--text);
font-weight: bold;
}
.filter-chip {
border-radius: 4px !important;
border: 1px dashed rgba(var(--accent-rgb), 0.3) !important;
background: rgba(255, 255, 255, 0.5);
font-size: 0.7rem !important;
font-family: 'JetBrains Mono';
}
.filter-chip.active {
background: var(--text) !important;
color: var(--bg) !important;
border-style: solid !important;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
/* =========================================
VESPER SOUL-LINK: CHAT & DOSSIER
"Protocol: Intimacy & Archive."
========================================= */
/* --- 1. 角色聊天界面 (The Interrogation Room) --- */
#character-chat-screen {
background-color: var(--bg);
background-image:
linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.chat-message-bubble+.chat-message-bubble {
margin-top: 5px;
}
#chat-avatar {
border-radius: 50% !important;
width: 42px;
height: 42px;
border: 2px solid var(--accent);
}
/* P2-6: 有头像聊天皮肤的轻量在场感；无头像皮肤仍由各自主题保持隐藏。 */
#character-chat-screen #chat-avatar {
transform-origin: 50% 58%;
transition: transform 160ms ease-out;
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
@keyframes chat-avatar-presence-jelly {
0%, 100% { transform: scale(1); }
38% { transform: scale(1.05, 0.96) rotate(-0.8deg); }
68% { transform: scale(0.99, 1.015) rotate(0.4deg); }
}
@keyframes chat-avatar-presence-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.024); }
}
@keyframes chat-avatar-presence-glow {
0%, 100% { filter: none; }
42% { filter: brightness(1.035) drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.48)); }
}
#character-chat-screen #chat-avatar.avatar-presence-breathing {
animation: chat-avatar-presence-breathe 2.8s ease-in-out infinite;
}
#character-chat-screen #chat-avatar.avatar-presence-pulse {
animation: chat-avatar-presence-glow 680ms ease-out 1;
}
#character-chat-screen #chat-avatar.avatar-presence-breathing.avatar-presence-pulse {
animation:
chat-avatar-presence-breathe 2.8s ease-in-out infinite,
chat-avatar-presence-glow 680ms ease-out 1;
}
@media (hover: hover) and (pointer: fine) {
#character-chat-screen #chat-avatar:hover {
animation: chat-avatar-presence-jelly 420ms ease-out 1;
}
}
#character-chat-screen #chat-avatar:active {
animation: none;
transform: scale(1.055, 0.925);
}
@media (prefers-reduced-motion: reduce) {
#character-chat-screen #chat-avatar,
#character-chat-screen #chat-avatar:hover,
#character-chat-screen #chat-avatar:active {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* --- 2. 底部输入控制台 (Command Console) --- */
#character-chat-screen>div:last-child {
background: var(--card-bg);
border-top: 1px solid rgba(var(--accent-rgb), 0.2);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}
.chat-toolbar {
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px dashed rgba(var(--accent-rgb), 0.15);
padding: 8px 15px;
display: flex;
gap: 20px;
justify-content: flex-start;
}
#character-chat-input {
background: var(--bg) !important;
border: 2px solid rgba(var(--accent-rgb), 0.1) !important;
border-radius: 8px !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05) !important;
font-family: 'JetBrains Mono', sans-serif;
padding: 12px;
}
#character-chat-input:focus {
border-color: var(--accent) !important;
background: var(--card-bg) !important;
}
#character-send-btn {
border-radius: 8px !important;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2) !important;
transition: all 0.1s;
background: var(--accent);
color: var(--bg);
position: relative;
z-index: 3;
pointer-events: auto;
touch-action: manipulation;
}
#character-send-btn:active {
transform: translateY(4px);
box-shadow: none !important;
}
/* G phase: streaming 时按钮变灰红色"中断"态——跟正常发送态视觉对立，
同时保留 active 反馈。脉动动画提示"还在跑" */
#character-send-btn.is-streaming {
background: #b00020 !important;
animation: azoth-stop-pulse 1.4s ease-in-out infinite;
}
@keyframes azoth-stop-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* --- 3. 角色设置界面 (The Dossier) --- */
.settings-section {
background: var(--card-bg);
border: 1px solid rgba(var(--accent-rgb), 0.1);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
position: relative;
}
.settings-section::before {
content: '';
position: absolute;
top: 15px;
left: -5px;
width: 4px;
height: 20px;
background: var(--accent);
border-radius: 0 4px 4px 0;
}
.settings-header {
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
text-transform: uppercase;
color: var(--accent);
letter-spacing: 1px;
margin-bottom: 15px;
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
}
.settings-header::after {
content: '';
flex: 1;
height: 1px;
background: rgba(var(--accent-rgb), 0.1);
}
#character-detail-avatar,
#user-avatar-preview {
transition: transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#character-detail-avatar:hover,
#user-avatar-preview:hover {
transform: scale(1.05) rotate(2deg);
cursor: pointer;
}
/* 开关 Toggle 优化：复古拨杆 */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 20px;
background: rgba(0, 0, 0, 0.1);
border-radius: 20px;
position: relative;
cursor: pointer;
border: 1px solid rgba(var(--accent-rgb), 0.1);
transition: all 0.3s;
flex-shrink: 0;
}
input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
}
input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
left: 22px;
}
/* =========================================
VESPER FIX: QUOTE BLOCK VISIBILITY
"Words should never disappear."
========================================= */
/* 用户气泡（深色背景）内的引用块 - 需要反色处理 */
.chat-message-bubble[data-msg-role="user"] .quote-block {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
border-left-color: rgba(255, 255, 255, 0.6);
}
.chat-message-bubble[data-msg-role="user"] .quote-block-header {
color: rgba(255, 255, 255, 0.7);
}
.chat-message-bubble[data-msg-role="user"] .quote-block-content {
color: rgba(255, 255, 255, 0.9);
}
.chat-message-bubble[data-msg-role="user"] .quote-block:hover {
background: rgba(255, 255, 255, 0.22);
}
/* 用户气泡内的摘录引用 */
.chat-message-bubble[data-msg-role="user"] .excerpt-block {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
border-left-color: rgba(255, 255, 255, 0.6);
}
.chat-message-bubble[data-msg-role="user"] .excerpt-block-header {
color: rgba(255, 255, 255, 0.7);
}
.chat-message-bubble[data-msg-role="user"] .excerpt-block-content {
color: rgba(255, 255, 255, 0.9);
}
/* =========================================
6. Roots (锈湖·根源): 证物档案
"The lake remembers everything."
v1 重做 (2026-07-19): 气泡/cell/gacha/vesper-comment/body 全部
迁至 themes/roots.css (在本文件之后加载, 同权 !important 由顺序取胜)。
========================================= */
/* =========================================
VESPER BINGO CELEBRATION FX
"When you win, the world reacts."
========================================= */
/* Neon Flash / Pulse animation for bingo grid */
@keyframes neon-flash {
0% {
box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.3);
filter: brightness(1);
}
25% {
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6),
0 0 40px rgba(var(--accent-rgb), 0.3),
inset 0 0 15px rgba(var(--accent-rgb), 0.1);
filter: brightness(1.15);
}
50% {
box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.8),
0 0 60px rgba(var(--accent-rgb), 0.4),
inset 0 0 20px rgba(var(--accent-rgb), 0.15);
filter: brightness(1.25);
}
75% {
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6),
0 0 40px rgba(var(--accent-rgb), 0.3),
inset 0 0 15px rgba(var(--accent-rgb), 0.1);
filter: brightness(1.15);
}
100% {
box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.3);
filter: brightness(1);
}
}
/* Board clear: more intense, highlight-colored flash */
@keyframes neon-flash-intense {
0% {
box-shadow: 0 0 5px var(--highlight);
filter: brightness(1) saturate(1);
}
20% {
box-shadow: 0 0 30px var(--highlight),
0 0 60px rgba(var(--accent-rgb), 0.5);
filter: brightness(1.2) saturate(1.3);
}
50% {
box-shadow: 0 0 50px var(--highlight),
0 0 100px rgba(var(--accent-rgb), 0.6),
inset 0 0 30px rgba(var(--accent-rgb), 0.2);
filter: brightness(1.4) saturate(1.5);
}
80% {
box-shadow: 0 0 30px var(--highlight),
0 0 60px rgba(var(--accent-rgb), 0.5);
filter: brightness(1.2) saturate(1.3);
}
100% {
box-shadow: 0 0 5px var(--highlight);
filter: brightness(1) saturate(1);
}
}
/* Screen shake animation */
@keyframes screen-shake {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-3px, -2px);
}
20% {
transform: translate(4px, 1px);
}
30% {
transform: translate(-2px, 3px);
}
40% {
transform: translate(3px, -1px);
}
50% {
transform: translate(-4px, 2px);
}
60% {
transform: translate(2px, -3px);
}
70% {
transform: translate(-3px, 1px);
}
80% {
transform: translate(4px, -2px);
}
90% {
transform: translate(-2px, 3px);
}
}
/* Celebration classes applied via JS */
.bingo-grid.neon-flash-active {
animation: neon-flash 0.6s ease-in-out;
border-radius: 12px;
}
.bingo-grid.neon-flash-intense-active {
animation: neon-flash-intense 0.8s ease-in-out;
border-radius: 12px;
}
body.screen-shake-active {
animation: screen-shake 0.4s ease-in-out;
}
/* Celebration ripple on individual cells */
@keyframes cell-ripple {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
.cell.bingo-cell-celebrate {
animation: cell-ripple 0.3s ease-in-out;
}
/* 分组容器：覆盖 #character-list > div 的卡片样式 */
#character-list>div.char-group {
display: block;
padding: 0;
border-left: none;
border: none;
background: transparent;
box-shadow: none;
gap: 0;
overflow: visible;
min-width: 0;
max-width: 100%;
width: 100%;
}
#character-list>div.char-group::after {
display: none;
}
/* Character Sessions */
.character-entry {
border-radius: 10px;
overflow: hidden;
background: var(--card-bg);
border: 1px solid rgba(var(--accent-rgb), 0.1);
margin-bottom: 6px;
min-width: 0;
max-width: 100%;
width: 100%;
}
.character-entry-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
min-width: 0;
max-width: 100%;
width: 100%;
}
.character-sort-handle {
flex: 0 0 auto;
width: 26px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--accent);
opacity: 0.72;
cursor: grab;
font-size: 0.92rem;
line-height: 1;
touch-action: none;
user-select: none;
}
.character-sort-handle:active {
cursor: grabbing;
opacity: 1;
}
.character-group-header .character-sort-handle {
margin-left: auto;
height: 28px;
}
.character-session-item .character-sort-handle {
width: 20px;
height: 28px;
font-size: 0.78rem;
margin-left: -4px;
}
.character-sort-dragging {
opacity: 0.42;
outline: 1px dashed rgba(var(--accent-rgb), 0.55);
}
.character-entry-head .qq-chat-avatar {
flex-shrink: 0;
}
.character-entry-head .qq-chat-info {
min-width: 0;
flex: 1 1 auto;
}
.character-entry-head>div:last-child {
flex-shrink: 0;
min-width: 0;
max-width: 96px;
}
.character-entry-head>div:last-child span {
white-space: nowrap;
}
.character-session-sublist {
padding: 0 6px 6px 12px;
border-left: 2px dashed rgba(var(--accent-rgb), 0.18);
margin: 0 8px 6px;
min-width: 0;
max-width: calc(100% - 16px);
overflow: visible;
}
.character-session-item,
.character-session-sidebar-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid rgba(var(--accent-rgb), 0.14);
background: rgba(0, 0, 0, 0.02);
margin-top: 5px;
cursor: pointer;
min-width: 0;
max-width: 100%;
}
.character-session-action,
.character-entry-arrow {
flex: 0 0 auto;
}
.character-session-item:active,
.character-session-sidebar-item:active {
transform: scale(0.995);
}
.character-session-main {
min-width: 0;
flex: 1;
}
.character-session-name {
font-size: 0.8rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.character-session-desc {
font-size: 0.74rem;
opacity: 0.62;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.character-session-sidebar-item.active {
background: rgba(var(--accent-rgb), 0.1);
border-color: rgba(var(--accent-rgb), 0.5);
}
#character-session-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 5200;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
#character-session-overlay.active {
opacity: 1;
pointer-events: auto;
}
#character-session-sidebar {
position: fixed;
top: 0;
right: 0;
width: min(92%, 360px);
height: 100%;
background: var(--card-bg);
z-index: 5300;
/* 阴影只在开启态挂——关闭态侧栏滑到屏外(translateX 100%)，这道朝左的黑影会漏回可视区右缘
(塔拉 7-22: 聊天右边一条黑边)。全局修，非 roots 专属。 */
box-shadow: none;
display: flex;
flex-direction: column;
transform: translate3d(100%, 0, 0);
/* 10-05 App 手感批 1：塔拉两张截图里露出来的就是关着的它 ⇒ 滑出结束后 visibility:hidden。 */
visibility: hidden;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s;
will-change: transform;
}
#character-session-sidebar.active {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
}
.character-session-sidebar-header {
padding: 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#character-session-sidebar-title {
font-weight: 700;
color: var(--accent);
}
#character-session-sidebar-list {
flex: 1;
overflow-y: auto;
padding: 10px 12px;
}
.character-session-sidebar-section-title {
margin: 13px 2px 6px;
font-size: 0.7rem;
font-weight: 700;
color: var(--text);
opacity: 0.52;
letter-spacing: 0;
}
.character-session-sidebar-entry {
width: 100%;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: rgba(0, 0, 0, 0.018);
color: var(--text);
border-radius: 8px;
padding: 8px 10px;
margin-top: 6px;
display: flex;
align-items: center;
gap: 9px;
text-align: left;
cursor: pointer;
}
.character-session-sidebar-entry:active {
transform: scale(0.995);
}
.character-session-sidebar-entry .ico,
.character-session-sidebar-entry-icon .ico {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.character-session-sidebar-entry-main {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.character-session-sidebar-entry-label {
font-size: 0.82rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.character-session-sidebar-entry-sub,
.character-session-sidebar-empty {
font-size: 0.72rem;
opacity: 0.58;
}
.character-session-sidebar-entry-count {
flex: none;
min-width: 18px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent);
font-size: 0.7rem;
font-weight: 700;
text-align: center;
line-height: 1.5;
}
.character-session-sidebar-empty {
padding: 8px 3px 4px;
}
.character-session-sidebar-loading {
display: grid;
gap: 10px;
padding: 5px 0;
}
.character-session-sidebar-loading-row {
height: 52px;
border-radius: 9px;
background: linear-gradient(100deg,
rgba(var(--accent-rgb), 0.055) 20%,
rgba(var(--accent-rgb), 0.13) 38%,
rgba(var(--accent-rgb), 0.055) 56%);
background-size: 220% 100%;
animation: character-session-loading-shimmer 1.15s ease-in-out infinite;
}
@keyframes character-session-loading-shimmer {
to {
background-position-x: -220%;
}
}
@media (prefers-reduced-motion: reduce) {
#character-session-sidebar {
transition-duration: 0.01ms;
}
.character-session-sidebar-loading-row {
animation: none;
}
}
.character-session-sidebar-footer {
padding: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.character-manager-body {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
#panel-character-manager.sidebar-panel.active .sheet {
padding: 0 !important;
overflow-x: hidden;
}
.character-manager-tab-page {
display: none;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.character-manager-tab-page.active {
display: flex;
flex-direction: column;
}
.character-manager-tabs {
background: var(--card-bg);
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 8px 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
flex-shrink: 0;
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.character-manager-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--text);
opacity: 0.42;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.character-manager-tab.active {
opacity: 1;
color: var(--accent);
font-weight: 700;
transform: translateY(-2px);
}
.character-favorites-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 12px 8px;
flex-shrink: 0;
}
#character-favorites-list {
padding: 0 10px 14px;
min-width: 0;
}
.character-favorites-empty {
text-align: center;
padding: 56px 20px;
}
.character-fav-character {
margin-bottom: 14px;
}
.character-fav-character-title {
font-weight: 800;
color: var(--accent);
padding: 8px 4px;
font-size: 0.92rem;
}
.character-fav-session {
border: 1px solid rgba(var(--accent-rgb), 0.14);
background: var(--card-bg);
margin-bottom: 10px;
overflow: hidden;
}
.character-fav-session-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 0.78rem;
font-weight: 700;
}
.character-fav-card {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: background-color 0.16s ease;
}
.character-fav-card:last-child {
border-bottom: none;
}
.character-fav-card:hover,
.character-fav-card:focus-visible {
background: rgba(var(--accent-rgb), 0.055);
outline: none;
}
.character-fav-meta {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.68rem;
opacity: 0.55;
margin-bottom: 6px;
}
.character-fav-content {
font-size: 0.82rem;
line-height: 1.65;
max-height: 9.8em;
overflow: hidden;
color: var(--text);
}
.character-fav-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.character-fav-actions .btn-sec {
width: auto;
margin: 0;
padding: 4px 8px;
font-size: 0.72rem;
}
.character-fav-detail-modal {
align-items: stretch;
justify-content: stretch;
background: var(--bg);
backdrop-filter: none;
}
.character-fav-detail-modal.active {
display: flex;
}
.character-fav-detail-sheet {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
border-radius: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
overflow: hidden;
animation: none;
box-shadow: none !important;
}
.character-fav-detail-header {
height: 64px;
flex: 0 0 64px;
display: grid;
grid-template-columns: 52px 1fr auto;
align-items: center;
gap: 8px;
padding: 0 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: var(--card-bg);
}
.character-fav-detail-header h3 {
margin: 0;
text-align: center;
color: var(--accent);
font-size: 1rem;
}
.character-fav-detail-back {
width: 40px;
height: 40px;
border: none;
background: transparent;
color: var(--text);
font-size: 1.45rem;
cursor: pointer;
}
.character-fav-detail-copy {
width: auto;
margin: 0;
padding: 6px 10px;
font-size: 0.74rem;
}
.character-fav-detail-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 16px;
}
.character-fav-detail-meta {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--accent);
font-weight: 700;
font-size: 0.86rem;
margin-bottom: 8px;
}
.character-fav-detail-session {
font-size: 0.75rem;
opacity: 0.58;
margin-bottom: 14px;
overflow-wrap: anywhere;
}
.character-fav-detail-content {
font-size: 1rem;
line-height: 1.85;
white-space: normal;
overflow-wrap: anywhere;
color: var(--text);
}
.character-fav-detail-actions {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(0, 0, 0, 0.08);
background: var(--card-bg);
}
.character-fav-detail-actions .btn-sec {
width: 100%;
margin: 0;
min-height: 38px;
}
/* ==================== MCP Tool Management ==================== */
.mcp-server-card {
background: var(--card-bg);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
/* 第一批施工稿 §7.2：长 URL / Stdio command / 长 header 值不得撑宽页面 */
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.mcp-server-card .status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.mcp-server-card .server-badge,
.tool-selector-group .server-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.65rem;
font-weight: bold;
letter-spacing: 0.5px;
}
.server-badge.builtin {
background: var(--accent);
color: var(--bg);
}
.server-badge.external {
background: rgba(0, 0, 0, 0.08);
color: var(--text);
}
/* Tool Selector */
.tool-selector-group {
margin-bottom: 16px;
}
.tool-selector-group-header {
font-weight: bold;
font-size: 0.85rem;
color: var(--accent);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tool-selector-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 8px;
margin-bottom: 6px;
background: var(--bg);
transition: background 0.2s;
}
.tool-selector-item:hover {
background: rgba(0, 0, 0, 0.02);
}
.tool-selector-item label {
flex: 1;
cursor: pointer;
}
.tool-selector-item .tool-desc {
font-size: 0.7rem;
opacity: 0.5;
margin-top: 3px;
line-height: 1.3;
}
/* Tool Usage Indicator in Chat */
.tool-usage-indicator {
margin: 8px 0;
animation: fadeIn 0.3s;
width: min(100%, 520px);
}
.tool-usage-indicator--stream {
width: min(100%, 520px);
}
.tool-info-notice {
font-size: 0.75rem;
color: var(--text-secondary, #888);
padding: 4px 10px;
margin-bottom: 6px;
border-left: 2px solid var(--border-color, #555);
opacity: 0.8;
}
.tool-usage-header {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
padding: 10px 12px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.03));
border: 1px solid rgba(var(--accent-rgb), 0.18);
transition: opacity 0.2s, border-color 0.2s, background 0.2s;
}
.tool-usage-header:hover {
border-color: rgba(var(--accent-rgb), 0.28);
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.045));
}
.tool-usage-header-main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.tool-usage-header-icon {
font-size: 0.95rem;
line-height: 1;
}
.tool-usage-header-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.tool-usage-header-title {
font-size: 0.76rem;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
}
.tool-usage-header-subtitle {
font-size: 0.72rem;
color: var(--text);
opacity: 0.72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tool-usage-header-side {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.tool-usage-header-status {
font-size: 0.68rem;
opacity: 0.5;
white-space: nowrap;
}
.tool-usage-arrow {
font-size: 0.6rem;
transition: transform 0.2s;
}
.tool-usage-body {
display: none;
margin-top: 6px;
padding: 4px 0 2px;
}
.tool-usage-indicator.expanded .tool-usage-body {
display: block !important;
}
.tool-usage-indicator.expanded .tool-usage-arrow {
transform: rotate(90deg);
}
.tool-usage-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}
.tool-usage-item-main {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
width: 100%;
}
.tool-usage-item-icon {
font-size: 0.95rem;
line-height: 1.2;
margin-top: 1px;
}
.tool-usage-item-copy {
min-width: 0;
flex: 1;
}
.tool-usage-item-title {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: baseline;
}
.tool-usage-item-label {
font-size: 0.76rem;
font-weight: 600;
color: var(--text);
}
.tool-usage-item-detail {
font-size: 0.72rem;
color: var(--text-secondary);
opacity: 0.72;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 240px;
}
.tool-usage-item-meta {
margin-top: 3px;
font-size: 0.68rem;
color: var(--text-secondary);
opacity: 0.58;
}
.tool-usage-item.success {
border-color: rgba(76, 175, 80, 0.16);
}
.tool-usage-item.error {
border-color: rgba(244, 67, 54, 0.18);
}
.tool-usage-item.pending {
border-color: rgba(var(--accent-rgb), 0.16);
}
/* env9 retry warn — 同名工具失败 ≥ MAX_RETRIES_PER_TOOL_DEFAULT (3) 次时
叠在 .error 之上，琥珀色描边 + 浅黄底，让塔拉肉眼看见模型在反复撞墙。 */
.tool-usage-item.retry-warn {
border-color: rgba(245, 158, 11, 0.45);
background: rgba(255, 247, 224, 0.92);
box-shadow: 0 3px 10px rgba(245, 158, 11, 0.12);
}
/* v4-F+1 (A 轻档): web_search 详情区 — chip 展开后看到 query + 8 条富卡片
+ 跳转链接。复用 tool-usage-item 风格但加 padding 让结果列表透气。 */
/* hot-fix-3: 含搜索详情的 row 改 flex column 防左侧 main 区被挤成竖排字符
（父 .tool-usage-item 默认 flex row + space-between 会让两子项横排）。 */
.tool-usage-item--with-search {
flex-direction: column;
align-items: stretch;
}
.tool-search-detail {
margin-top: 8px;
padding: 10px 12px;
background: rgba(var(--accent-rgb), 0.04);
border-left: 3px solid rgba(var(--accent-rgb), 0.25);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
.tool-search-detail--empty {
background: rgba(245, 158, 11, 0.06);
border-left-color: rgba(245, 158, 11, 0.4);
}
.tool-search-query {
font-size: 0.85rem;
color: var(--text-secondary, #666);
display: flex;
align-items: center;
gap: 6px;
}
.tool-search-query span {
font-weight: 500;
color: var(--text, #1f2937);
}
.tool-search-results-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.tool-search-result {
display: block;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: background-color 120ms ease, border-color 120ms ease;
touch-action: manipulation;
cursor: pointer;
}
.tool-search-result:hover,
.tool-search-result:focus-visible {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.35);
}
.tool-search-result-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
font-size: 0.75rem;
color: var(--text-secondary, #888);
}
.tool-search-favicon {
width: 16px;
height: 16px;
border-radius: 3px;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.04);
}
.tool-search-favicon-fallback {
font-size: 12px;
line-height: 16px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.tool-search-host {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.tool-search-source-tag {
margin-left: auto;
padding: 1px 6px;
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent, #2563eb);
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
}
.tool-search-result-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--accent, #2563eb);
line-height: 1.3;
margin-bottom: 2px;
word-break: break-word;
}
.tool-search-result:hover .tool-search-result-title {
text-decoration: underline;
}
.tool-search-result-snippet {
font-size: 0.8rem;
color: var(--text-secondary, #555);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tool-search-sources,
.tool-search-hint {
font-size: 0.72rem;
color: var(--text-secondary, #888);
line-height: 1.4;
}
.tool-search-hint {
padding: 6px 8px;
background: rgba(245, 158, 11, 0.08);
border-radius: 4px;
color: #92580c;
}
/* v4-F+1 (轻档 link unfurl): 消息正文里"段落 = 单个 auto-link"模式
升级成 favicon+host+URL 路径卡片。视觉跟 .tool-search-result 同语
言但简化（不显示 title/snippet — 没去 fetch OG meta）。 */
.inline-link-card {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
padding: 10px 12px;
background: rgba(var(--accent-rgb), 0.04);
border: 1px solid rgba(var(--accent-rgb), 0.18);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background-color 120ms ease, border-color 120ms ease;
touch-action: manipulation;
cursor: pointer;
}
.inline-link-card:hover,
.inline-link-card:focus-visible {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.4);
}
.inline-link-card-favicon {
width: 20px;
height: 20px;
border-radius: 4px;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.04);
}
.inline-link-card-favicon-fallback {
font-size: 16px;
line-height: 20px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.inline-link-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* v4-F+1 round-2: named link [标题](url) 升级时显示 title 行 */
.inline-link-card-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--accent, #2563eb);
line-height: 1.3;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* host 在有 title 时降为副标题字号 */
.inline-link-card-title + .inline-link-card-host {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-secondary, #888);
}
.inline-link-card-host {
font-size: 0.78rem;
font-weight: 600;
color: var(--accent, #2563eb);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-link-card-url {
font-size: 0.72rem;
color: var(--text-secondary, #777);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* v4-F+1 中档 link unfurl: Discord 风 OG meta 大图卡片
容器（每条消息底部追加，最多 4 个）+ 单卡片大图样式 */
.rich-link-cards-container {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0 4px 0;
}
.rich-link-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.08);
border-left: 4px solid rgba(var(--accent-rgb), 0.45);
border-radius: 8px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
touch-action: manipulation;
cursor: pointer;
max-width: 540px;
}
.rich-link-card:hover,
.rich-link-card:focus-visible {
background: rgba(var(--accent-rgb), 0.04);
border-color: rgba(var(--accent-rgb), 0.3);
border-left-color: rgba(var(--accent-rgb), 0.7);
}
.rich-link-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.rich-link-card-site {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 0.72rem;
color: var(--text-secondary, #888);
}
.rich-link-card-favicon {
width: 14px;
height: 14px;
border-radius: 3px;
flex-shrink: 0;
}
.rich-link-card-site-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
font-weight: 500;
}
.rich-link-card-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--accent, #2563eb);
line-height: 1.35;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rich-link-card:hover .rich-link-card-title {
text-decoration: underline;
}
.rich-link-card-description {
font-size: 0.82rem;
color: var(--text-secondary, #555);
line-height: 1.5;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rich-link-card-image {
width: 100%;
max-height: 280px;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.rich-link-card-image img {
width: 100%;
height: auto;
max-height: 280px;
object-fit: cover;
display: block;
}
/* round-3 A: rich card 拿不到 OG meta 时降级渲染 minimal 版本
（favicon + host + path）。视觉收紧不占大宽度，跟 inline-link-card 接近。 */
.rich-link-card--minimal {
max-width: 360px;
border-left-width: 3px;
}
.rich-link-card--minimal .rich-link-card-body {
padding: 8px 12px;
gap: 2px;
}
.rich-link-card--minimal .rich-link-card-site {
margin-bottom: 0;
font-size: 0.8rem;
}
.rich-link-card--minimal .rich-link-card-site-name {
font-weight: 600;
color: var(--accent, #2563eb);
}
.rich-link-card-minimal-path {
font-size: 0.7rem;
color: var(--text-secondary, #888);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640px) {
.rich-link-card { max-width: 100%; }
.rich-link-card-image { max-height: 220px; }
.rich-link-card-image img { max-height: 220px; }
.rich-link-card-site-name { max-width: 200px; }
}
@media (max-width: 640px) {
.tool-usage-indicator,
.tool-usage-indicator--stream {
width: 100%;
}
.tool-usage-item-detail {
max-width: 150px;
}
.tool-search-host {
max-width: 140px;
}
.tool-search-result-title {
font-size: 0.88rem;
}
}
/* MCP Transport Toggle */
.mcp-transport-btn {
flex: 1 !important;
font-size: 0.8rem !important;
padding: 8px !important;
}
.mcp-transport-btn.active {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 聊天日期分隔线 (同 tool-usage-indicator 风格) */
.chat-date-separator,
.chat-timeline-event {
text-align: center;
margin: 6px 0;
user-select: none;
}
.chat-date-separator span,
.chat-timeline-event span {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
opacity: 0.5;
padding: 4px 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.03);
}
/* ==========================================================================
PATCH v2.0: WECHAT STYLE PANEL (微信风格面板)
========================================================================== */
/* 1. 输入区域容器 */
.input-container-wrapper {
background: var(--card-bg);
border-top: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
/* AI assistant 侧: fixed 定位 */
#ai-input-area.input-container-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1001;
}
/* 2. 输入行 */
.input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: var(--card-bg);
position: relative;
z-index: 2;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
.input-row textarea {
flex: 1;
min-width: 0;
/* 5/13 v3: 输入框换成"凹陷"风格（跟按钮的"凸起"对比，立体感强）
关键：背景比外层 input-row 更深 + 强内阴影 + 上深下浅边框 */
background: rgba(0, 0, 0, 0.04) !important;
border: 1px solid rgba(0, 0, 0, 0.18) !important;
border-top-color: rgba(0, 0, 0, 0.22) !important;
border-radius: 22px !important;
padding: 12px 16px;
max-height: 120px;
resize: none;
font-family: inherit;
font-size: 15px;
color: var(--text);
line-height: 1.5;
min-height: 44px;
height: 44px;
/* 强内阴影模拟"凹槽" + 底部一抹高光（凹陷边沿反光） */
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.10),
inset 0 1px 2px rgba(0, 0, 0, 0.06),
0 1px 0 rgba(255, 255, 255, 0.7);
transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.input-row textarea:hover {
background: rgba(0, 0, 0, 0.05) !important;
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.13),
inset 0 1px 2px rgba(0, 0, 0, 0.07),
0 1px 0 rgba(255, 255, 255, 0.7);
}
.input-row textarea:focus {
border-color: var(--accent) !important;
outline: none;
background: var(--bg) !important;
/* focus 时变"凸起" — 用户开始输入，给积极反馈 */
box-shadow:
0 0 0 3px rgba(var(--accent-rgb, 93, 105, 115), 0.20),
0 2px 8px rgba(var(--accent-rgb, 93, 105, 115), 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 输入行按钮统一尺寸 */
/* mobile UX 修复（塔拉 5/5 反馈：手机端发送按钮点不动）：
- touch-action: manipulation —— 关闭 300ms double-tap-to-zoom 延迟，
iOS Safari + Android Chrome 经典 mobile 按钮"点不动"根因
- cursor: pointer 显式声明 —— 部分 iOS Safari 需要才识别 tap event
- position: relative + z-index: 1 —— 确保按钮在自己的 stacking context
高于 .input-row 的隐性 z-index 0，防 textarea 边缘 / sibling 透明区域
遮罩触摸事件 */
.input-row button {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
touch-action: manipulation !important;
position: relative;
z-index: 1;
flex: 0 0 44px !important;
min-width: 44px !important;
flex-shrink: 0 !important;
padding: 0 !important;
/* 5/13 v2: 加深立体感（双层阴影 + 顶部一抹高光让按钮像浮起的圆胶囊）*/
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.14),
0 1px 3px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.input-row button:active {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(0, 0, 0, 0.12);
transform: translateY(1px);
}
/* 发送按钮 — 强调蓝色 + 彩色光晕（最立体）*/
.send-btn {
background: var(--accent);
color: var(--bg);
border: none;
transition: transform 0.1s, box-shadow 0.15s ease;
/* 5/13 v2: accent 色彩色阴影 + 顶部高光，按钮看起来"自己发光" */
box-shadow:
0 4px 12px rgba(var(--accent-rgb, 93, 105, 115), 0.5),
0 2px 4px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.send-btn:hover {
box-shadow:
0 6px 18px rgba(var(--accent-rgb, 93, 105, 115), 0.6),
0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
transform: translateY(-1.5px);
}
.send-btn:active {
transform: scale(0.94) translateY(0);
box-shadow:
0 2px 4px rgba(var(--accent-rgb, 93, 105, 115), 0.4),
inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}
/* (+) 按钮 — 浅卡片底 + 双层阴影浮起 */
.plus-btn {
border: 1.5px solid rgba(var(--text-rgb, 0, 0, 0), 0.18) !important;
color: var(--text);
background: var(--card-bg);
transition: all 0.3s ease, box-shadow 0.15s ease;
opacity: 0.95;
}
.plus-btn:hover {
opacity: 1;
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.16),
0 2px 4px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transform: translateY(-1.5px);
}
.plus-btn.active {
transform: rotate(45deg);
opacity: 1;
border-color: var(--accent) !important;
color: var(--accent);
box-shadow:
0 4px 12px rgba(var(--accent-rgb, 93, 105, 115), 0.35),
0 2px 4px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* AI回复按钮（chat-square 图标）— accent 色描边 + 强 tint 光晕 */
#ai-reply-btn,
#character-ai-reply-btn {
background: var(--card-bg) !important;
border: 1.5px solid rgba(var(--accent-rgb), 0.55) !important;
color: var(--accent) !important;
box-shadow:
0 4px 10px rgba(var(--accent-rgb, 93, 105, 115), 0.28),
0 1px 3px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
#ai-reply-btn .ai-reply-chat-icon,
#character-ai-reply-btn .ai-reply-chat-icon {
width: 22px;
height: 22px;
display: block;
color: currentColor;
overflow: visible;
fill: currentColor;
}
#ai-reply-btn .ai-reply-chat-base,
#character-ai-reply-btn .ai-reply-chat-base {
fill: currentColor;
opacity: 0.94;
}
#ai-reply-btn .ai-reply-chat-shine,
#character-ai-reply-btn .ai-reply-chat-shine {
fill: currentColor;
opacity: 0.42;
}
/* 「AI 回复」按钮眼睛图标（塔拉 8-27 拍板）：AZOTH 主题族（除锈湖）下，
用 UI设计/AI回复SVG.png 的眼睛替换原对话气泡 SVG。
mask 方案：透明底 PNG 的线条形状做遮罩 + background: currentColor，
线条自动吃各主题的 accent/文字色，浅色深色主题都不需要另调。
仿 Claude（.chat-ui-mode-claude，仅角色屏有）/ 仿 ChatGPT（.chat-ui-mode-chatgpt，同）
/ 锈湖（[data-theme="roots"]）三个场景回退原 SVG，不参与替换。 */
#ai-reply-btn .ai-reply-chat-eye,
#character-ai-reply-btn .ai-reply-chat-eye {
display: none;
width: 34px;
height: 34px;
background: currentColor;
-webkit-mask: url('ai-reply-eye.png?v=20260827-eye-v4') center / contain no-repeat;
mask: url('ai-reply-eye.png?v=20260827-eye-v4') center / contain no-repeat;
/* 闭眼=整眼纵向压扁成一条缝；AI 回复期间睁眼（script.js setAiReplyEyeOpen），
过冲回弹曲线让睁眼像「猛地睁开」。 */
transform: scaleY(.14);
transition: transform .5s cubic-bezier(.2, 1.7, .35, 1);
}
body.ai-eye-open #ai-reply-btn .ai-reply-chat-eye,
body.ai-eye-open #character-ai-reply-btn .ai-reply-chat-eye {
transform: scaleY(1);
}
/* AI 回复期间（睁眼）按钮整体反转：accent 底 + 反色图案——hover 那下反转的爽感
延伸到整个回复期（塔拉 8-28）。眼睛/原 SVG 都吃 currentColor 自动跟反转。
与眼睛显隐同场景限定：锈湖 / 仿 Claude / 仿 ChatGPT 不参与反转。 */
html:not([data-theme="roots"]) body.ai-eye-open #ai-reply-btn {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
}
/* 9-11 修：原写成 `#character-chat-screen … body.ai-eye-open #character-ai-reply-btn`——
body 是所有元素的祖先，不可能出现在 #character-chat-screen 里面，这条从写下那天起就匹配不到，
所以只有 AI 助手那条能反转。body 必须写在最外层。 */
html:not([data-theme="roots"]) body.ai-eye-open #character-chat-screen:not(.chat-ui-mode-claude):not(.chat-ui-mode-chatgpt) #character-ai-reply-btn {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
}
html:not([data-theme="roots"]) #ai-reply-btn .ai-reply-chat-eye {
display: block;
}
html:not([data-theme="roots"]) #ai-reply-btn .ai-reply-chat-icon {
display: none;
}
html:not([data-theme="roots"]) #character-chat-screen:not(.chat-ui-mode-claude):not(.chat-ui-mode-chatgpt) #character-ai-reply-btn .ai-reply-chat-eye {
display: block;
}
html:not([data-theme="roots"]) #character-chat-screen:not(.chat-ui-mode-claude):not(.chat-ui-mode-chatgpt) #character-ai-reply-btn .ai-reply-chat-icon {
display: none;
}
#ai-reply-btn:hover,
#character-ai-reply-btn:hover {
box-shadow:
0 6px 16px rgba(var(--accent-rgb, 93, 105, 115), 0.42),
0 2px 5px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transform: translateY(-1.5px);
border-color: var(--accent) !important;
}
/* 3. 战术面板 (抽屉) */
.tactical-panel {
height: 0;
overflow: hidden;
background: var(--bg);
transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.tactical-panel.active {
height: 240px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* 4. 图标网格布局 */
.tool-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px 10px;
padding: 25px 15px;
height: 100%;
overflow-y: hidden;
}
.tool-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: opacity 0.2s;
}
.tool-item:active {
opacity: 0.6;
}
.tool-icon-box {
width: 56px;
height: 56px;
background: var(--card-bg);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
color: var(--text);
transition: all 0.2s;
}
.tool-label {
font-size: 0.7rem;
color: var(--text);
opacity: 0.7;
}
.tool-item.active .tool-icon-box {
background: var(--accent);
color: var(--bg);
border-color: transparent;
}
/* 装备栏翻页容器（第二页：演绎图谱 / 演练沙箱占位） */
.tactical-pages {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
height: calc(100% - 14px);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tactical-pages::-webkit-scrollbar {
display: none;
}
.tactical-page {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
min-width: 100%;
height: 100%;
/* P2（真机）：分页是人工装箱的 4×2 静态槽位，溢出必须搬到下一页，
禁止悄悄退化成纵向滚动（第三行 + 滚动条）。每页容量由 smoke 锁 ≤8。 */
overflow-y: hidden;
}
.tactical-page .tool-grid {
padding: 25px 15px 10px;
}
.tactical-pager-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
height: 14px;
padding-bottom: 2px;
}
.pager-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text);
opacity: 0.2;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
}
.pager-dot.active {
opacity: 0.8;
transform: scale(1.35);
background: var(--accent);
}
/* 灰态按钮（演练沙箱占位用） */
.tool-item.disabled {
cursor: not-allowed;
}
.tool-item.disabled .tool-icon-box {
opacity: 0.3;
background: var(--card-bg);
}
.tool-item.disabled .tool-label {
opacity: 0.35;
}
.tool-item.disabled:active {
opacity: 1;
}
/* 第二页空槽位占位（保持网格对齐，视觉上不显眼） */
.tool-item.tool-slot-empty {
visibility: hidden;
pointer-events: none;
}
/* 在线状态栏的稳定长期模式 tag（独立于瞬时 status 文字） */
.chat-mode-tags {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
}
.chat-mode-tags:empty {
display: none;
}
.chat-mode-tag {
display: inline-block;
font-size: 0.65rem;
line-height: 1;
padding: 3px 7px;
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.15);
color: var(--accent);
border: 1px solid rgba(var(--accent-rgb), 0.35);
white-space: nowrap;
}
/* SVG 样式 */
.tool-svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --- Void Construct 主题覆盖 --- */
[data-theme="void_construct"] .input-container-wrapper {
border-top: 1px solid var(--accent);
background: #000;
}
[data-theme="void_construct"] .input-row {
background: #000;
}
[data-theme="void_construct"] .tactical-panel {
background: #0a0a0a;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="void_construct"] .input-row textarea {
background: #000 !important;
border: 1px solid var(--accent) !important;
color: var(--accent);
border-radius: 0 !important;
}
[data-theme="void_construct"] .plus-btn {
border-radius: 0;
border: 1px solid var(--accent);
}
[data-theme="void_construct"] .send-btn {
border-radius: 0;
background: var(--accent);
color: #000;
}
[data-theme="void_construct"] .tool-icon-box {
border-radius: 0;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--accent);
}
/* === 代码块复制按钮 === */
pre.code-block-wrapper {
position: relative;
}
.code-copy-btn {
position: absolute;
top: 6px;
right: 6px;
width: 32px;
height: 28px;
background: rgba(128, 128, 128, 0.25);
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
z-index: 2;
padding: 0;
}
pre.code-block-wrapper:hover .code-copy-btn {
opacity: 1;
}
.code-copy-btn:hover {
background: rgba(128, 128, 128, 0.45);
}
.code-copy-btn:active {
transform: scale(0.9);
}
/* =========================================
[Construct - 构筑] 主题全局覆盖
视觉基调: 未来考古, 解构主义, 几何线框
=========================================== */
/* 1. 全局背景 (无序/解构风格) */
[data-theme="construct"] body {
background-color: var(--bg);
/* 细微的纵横虚线辅助网格 */
background-image:
linear-gradient(rgba(10, 34, 245, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 34, 245, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
background-position: center;
}
/* 大型解构几何元素 (不对称、漂浮感) */
[data-theme="construct"] body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image:
/* 巨大的非对称蓝黑折线拼接 (右下) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M300 50 L380 150 L250 350 L200 300 Z' fill='none' stroke='rgba(10,34,245,0.04)' stroke-width='2'/%3E%3Cpath d='M100 200 L150 100 L350 200 L300 300 Z' fill='rgba(26,27,38,0.02)' stroke='rgba(26,27,38,0.03)' stroke-width='1'/%3E%3C/svg%3E"),
/* 巨型错位四芒星 (左侧) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 0 L102 98 L200 100 L102 102 L100 200 L98 102 L0 100 L98 98 Z' fill='rgba(10,34,245,0.05)'/%3E%3C/svg%3E"),
/* 斜向切割巨型条纹 */
linear-gradient(135deg, transparent 40%, rgba(10, 34, 245, 0.02) 40%, rgba(10, 34, 245, 0.02) 43%, transparent 43%, transparent 48%, rgba(26, 27, 38, 0.02) 48%, rgba(26, 27, 38, 0.02) 50%, transparent 50%);
background-position: calc(100% + 50px) calc(100% + 50px), -10vw 20vh, center;
background-size: 60vh 60vh, 50vw 50vw, 100% 100%;
background-repeat: no-repeat;
z-index: -2;
pointer-events: none;
}
/* 飞鸟、齿轮、碎片与线条印花信息 (未来考古版记) */
[data-theme="construct"] body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image:
/* 散落的飞鸟/三角几何群 (右上) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 50 L50 20 L80 50 L50 40 Z' fill='none' stroke='rgba(10,34,245,0.05)' stroke-width='1'/%3E%3Cpath d='M10 80 L30 60 L50 80 L30 75 Z' fill='rgba(26,27,38,0.03)'/%3E%3C/svg%3E"),
/* 齿轮轮廓线框 (左下) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='rgba(10,34,245,0.04)' stroke-dasharray='10 5' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='rgba(26,27,38,0.03)' stroke-width='1'/%3E%3Cpath d='M50 10 L50 90 M10 50 L90 50' stroke='rgba(10,34,245,0.02)' stroke-width='1'/%3E%3C/svg%3E"),
/* 局部细碎点阵破片 */
radial-gradient(1px 1px at 25% 30%, rgba(10, 34, 245, 0.4) 1px, transparent),
radial-gradient(1px 1px at 75% 65%, rgba(26, 27, 38, 0.4) 1px, transparent),
radial-gradient(1px 1px at 15% 85%, rgba(10, 34, 245, 0.3) 1px, transparent);
background-position: 85% 10%, 15% 85%, 0 0, 0 0, 0 0;
background-size: 120px 120px, 200px 200px, 100% 100%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
/* 2. 剥离圆角 & 卡片重构 */
[data-theme="construct"] .sheet,
[data-theme="construct"] .mini-card,
[data-theme="construct"] .cell,
[data-theme="construct"] .btn,
[data-theme="construct"] .btn-sec,
[data-theme="construct"] .input-group input,
[data-theme="construct"] .input-group textarea,
[data-theme="construct"] .input-group select,
[data-theme="construct"] .status-bar,
[data-theme="construct"] .nav-bar,
[data-theme="construct"] .card,
[data-theme="construct"] .shop-item,
[data-theme="construct"] .diff-btn,
[data-theme="construct"] .div-with-radius {
border-radius: 0 !important;
box-shadow: none !important;
}
/* 卡片基础线框化与角落锁定器 (机械准星) */
[data-theme="construct"] .sheet,
[data-theme="construct"] .mini-card,
[data-theme="construct"] .shop-item,
[data-theme="construct"] .gacha-banner,
[data-theme="construct"] .cell {
border: 1px solid var(--accent);
background: rgba(255, 255, 255, 0.85);
/* 半透明呈现底层网格 */
backdrop-filter: blur(4px);
position: relative;
}
/* 为卡片增加四边机械包边修饰 */
[data-theme="construct"] .mini-card::before,
[data-theme="construct"] .shop-item::before,
[data-theme="construct"] .sheet::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: 8px;
height: 8px;
border-top: 2px solid var(--text);
border-left: 2px solid var(--text);
pointer-events: none;
z-index: 5;
}
[data-theme="construct"] .mini-card::after,
[data-theme="construct"] .shop-item::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 8px;
height: 8px;
border-bottom: 2px solid var(--text);
border-right: 2px solid var(--text);
pointer-events: none;
}
[data-theme="construct"] .cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
background: linear-gradient(135deg, var(--accent) 50%, transparent 50%);
opacity: 0.5;
pointer-events: none;
}
/* 移除原有的多余装饰 + 档案卡片增强 */
[data-theme="construct"] .mini-card {
border-left: 1px solid var(--accent);
overflow: hidden;
/* 档案卡底纹：右侧分散的不规则几何碎片 */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Ccircle cx='130' cy='50' r='16' fill='none' stroke='rgba(10,34,245,0.18)' stroke-width='1' stroke-dasharray='5 3'/%3E%3Cpath d='M125 45 L127 48 L130 50 L127 52 L125 55 L123 52 L120 50 L123 48 Z' fill='rgba(10,34,245,0.12)'/%3E%3Cpath d='M70 15 L85 8 L88 18 L80 14 Z' fill='rgba(26,27,38,0.1)'/%3E%3Cpath d='M100 80 L115 72 L112 85 Z' fill='rgba(26,27,38,0.08)'/%3E%3Ccircle cx='145' cy='20' r='2.5' fill='rgba(26,27,38,0.2)'/%3E%3Ccircle cx='90' cy='90' r='1.5' fill='rgba(10,34,245,0.2)'/%3E%3Ccircle cx='150' cy='75' r='1.8' fill='rgba(10,34,245,0.15)'/%3E%3Cpath d='M140 10 L140 30 M130 20 L150 20' stroke='rgba(26,27,38,0.12)' stroke-width='0.8'/%3E%3Cpath d='M75 65 L75 75 M70 70 L80 70' stroke='rgba(10,34,245,0.1)' stroke-width='0.6'/%3E%3Crect x='95' y='25' width='10' height='3' fill='rgba(10,34,245,0.1)' transform='rotate(-20 100 26.5)'/%3E%3Crect x='110' y='88' width='7' height='2.5' fill='rgba(26,27,38,0.12)' transform='rotate(15 113.5 89.25)'/%3E%3Cpath d='M82 42 L92 38' stroke='rgba(10,34,245,0.1)' stroke-width='0.5'/%3E%3Cpath d='M135 60 L148 65' stroke='rgba(26,27,38,0.08)' stroke-width='0.5'/%3E%3C/svg%3E"),
/* 左侧细竖条纹（档案侧标） */
linear-gradient(90deg, rgba(10, 34, 245, 0.08) 2px, transparent 2px);
background-position: right center, left top;
background-size: 65% 100%, 4px 100%;
background-repeat: no-repeat, repeat-y;
}
/* mini-card 右下角底部装饰虚线 */
[data-theme="construct"] .mini-card .tag,
[data-theme="construct"] .mini-card .diff-badge {
border-radius: 0 !important;
border: 1px solid rgba(10, 34, 245, 0.3);
background: rgba(10, 34, 245, 0.05);
}
[data-theme="construct"] .gacha-banner {
border: 1px solid var(--accent);
background: rgba(255, 255, 255, 0.9);
color: var(--text);
}
[data-theme="construct"] .gacha-banner::after {
color: var(--accent);
opacity: 0.1;
}
/* 3. 特种交互准星（Crosshairs）动效 */
[data-theme="construct"] .mini-card:hover,
[data-theme="construct"] .shop-item:hover,
[data-theme="construct"] .btn:hover:not(:disabled) {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--accent) !important;
/* 硬边阴影 */
}
[data-theme="construct"] .btn {
position: relative;
overflow: hidden;
border: 1px solid var(--accent);
background: var(--bg);
color: var(--text);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-theme="construct"] .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(10, 34, 245, 0.1);
transition: left 0.3s ease;
z-index: 1;
}
[data-theme="construct"] .btn:hover::before {
left: 0;
}
/* 主按钮强化 */
[data-theme="construct"] .btn:not(.btn-sec):not(.btn-danger) {
background: var(--text);
color: var(--bg);
}
/* 导航栏解构 */
[data-theme="construct"] .nav-bar {
border-top: 2px solid var(--text);
background: var(--card-bg);
}
[data-theme="construct"] .nav-item.active {
color: var(--accent);
border-top: 2px solid var(--accent);
margin-top: -12px;
padding-top: 10px;
}
[data-theme="construct"] .add-icon-circle {
border-radius: 0;
background: #000;
transform: translateY(-20px) rotate(45deg);
}
[data-theme="construct"] .add-icon-circle svg {
transform: rotate(-45deg);
}
/* 顶部状态栏解构 */
[data-theme="construct"] .status-bar {
border-bottom: 2px solid var(--text);
}
[data-theme="construct"] .balance-pill {
border-radius: 0;
border: 1px solid var(--accent);
background: transparent;
color: var(--text);
box-shadow: none;
}
/* 弹窗与控制面板装饰 */
[data-theme="construct"] .modal .sheet::before {
content: '[SYS.OUT] // OVERRIDE_INIT';
position: absolute;
top: 10px;
left: 15px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
color: var(--accent);
opacity: 0.7;
}
/* 4. Chat Interface (聊天面板构建 — 技术图纸风) */
/* 聊天消息容器背景：技术制图底纹 */
[data-theme="construct"] #character-chat-messages {
position: relative;
background-color: rgba(245, 247, 250, 0.6);
background-image:
/* 极淡的辅助网格 */
linear-gradient(rgba(10, 34, 245, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 34, 245, 0.025) 1px, transparent 1px),
/* 技术图纸中心准星 (大型十字线 + 双圆) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='120' fill='none' stroke='rgba(10,34,245,0.04)' stroke-width='1' stroke-dasharray='8 4'/%3E%3Ccircle cx='200' cy='200' r='60' fill='none' stroke='rgba(26,27,38,0.03)' stroke-width='1'/%3E%3Cpath d='M200 40 L200 360 M40 200 L360 200' stroke='rgba(10,34,245,0.03)' stroke-width='1'/%3E%3Cpath d='M120 120 L280 280 M280 120 L120 280' stroke='rgba(26,27,38,0.02)' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='5' fill='rgba(10,34,245,0.06)'/%3E%3C/svg%3E"),
/* 右上角散落碎片群 */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 10 L62 58 L110 60 L62 62 L60 110 L58 62 L10 60 L58 58 Z' fill='none' stroke='rgba(10,34,245,0.04)' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='30' r='3' fill='rgba(26,27,38,0.06)'/%3E%3Ccircle cx='90' cy='90' r='2' fill='rgba(10,34,245,0.06)'/%3E%3Cpath d='M20 80 L40 60 L60 80 L40 75 Z' fill='rgba(26,27,38,0.02)'/%3E%3C/svg%3E");
background-size: 40px 40px, 40px 40px, 80% 80%, 100px 100px;
background-position: center, center, center 60%, 85% 15%;
background-repeat: repeat, repeat, no-repeat, no-repeat;
}
/* 聊天容器底部渐隐装饰线 */
[data-theme="construct"] #character-chat-messages::after {
content: '';
position: absolute;
bottom: 130px;
left: 10%;
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10, 34, 245, 0.15), transparent);
pointer-events: none;
}
/* 气泡基础：硬边框 + 偏移阴影 */
[data-theme="construct"] .chat-message-bubble {
border-radius: 0 !important;
border: 1px solid var(--accent);
box-shadow: 2px 2px 0 var(--accent);
position: relative;
}
/* 用户气泡：深色块面 + 切角 */
[data-theme="construct"] .chat-message-bubble[data-msg-role="user"] {
background: #1a1b26 !important;
color: #f0f0f0 !important;
border-color: #1a1b26;
box-shadow: 2px 2px 0 var(--accent);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* AI 气泡：蓝图白底 + 角落标记 + 微网格底纹 */
[data-theme="construct"] .chat-message-bubble[data-msg-role="assistant"] {
background: #fff !important;
color: #1a1b26 !important;
border: 1px solid var(--accent) !important;
box-shadow: 2px 2px 0 rgba(10, 34, 245, 0.15);
/* 气泡内微型网格底纹 */
background-image:
linear-gradient(rgba(10, 34, 245, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 34, 245, 0.015) 1px, transparent 1px) !important;
background-size: 16px 16px !important;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
/* AI 气泡四角的机械包边 [ ] 准星修饰 */
[data-theme="construct"] .chat-message-bubble[data-msg-role="assistant"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-top: 2px solid var(--accent);
border-left: 2px solid var(--accent);
pointer-events: none;
z-index: 2;
}
[data-theme="construct"] .chat-message-bubble[data-msg-role="assistant"]::after {
content: '✦';
position: absolute;
bottom: 4px;
right: 6px;
font-size: 7px;
color: var(--accent);
opacity: 0.35;
pointer-events: none;
}
/* 聊天输入框去圆角和边框线 */
[data-theme="construct"] #character-chat-input {
border-radius: 0 !important;
border: 1px solid var(--text) !important;
background: rgba(255, 255, 255, 0.8) !important;
}
[data-theme="construct"] #character-send-btn {
border-radius: 0 !important;
background: var(--accent) !important;
color: #fff !important;
}
[data-theme="construct"] .chat-toolbar {
border-top: 1px solid var(--text);
border-bottom: 1px solid var(--text);
background: var(--bg);
}
/* 5. Library (图书馆与归档系统) */
[data-theme="construct"] .book-card-cover {
border-radius: 0 !important;
border: 2px solid var(--text) !important;
background: repeating-linear-gradient(45deg,
var(--bg),
var(--bg) 10px,
rgba(10, 34, 245, 0.1) 10px,
rgba(10, 34, 245, 0.1) 20px) !important;
box-shadow: 4px 4px 0 var(--text) !important;
}
[data-theme="construct"] .book-card-title {
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
}
[data-theme="construct"] #bookshelf-list {
padding: 15px;
}
/* 6. Dynamic Animations & Transitions */
[data-theme="construct"] .view.active {
animation: constructGlitchIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes constructGlitchIn {
0% {
opacity: 0;
transform: translateY(20px) scale(0.98);
filter: blur(4px) contrast(150%);
}
50% {
opacity: 0.8;
transform: translateY(-2px) scale(1.01);
filter: blur(1px) contrast(120%);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0) contrast(100%);
}
}
/* Button Scanning Hover Effect */
[data-theme="construct"] .btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 20%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
[data-theme="construct"] .btn:hover::after {
animation: constructScan 0.6s ease-out;
}
@keyframes constructScan {
0% {
left: -50%;
}
100% {
left: 150%;
}
}
/* ---------------------------------
解构细节追加: 四芒星、飞鸟、齿轮、碎片
--------------------------------- */
/* 交互按钮追加碎片飞鸟线条 */
[data-theme="construct"] .btn {
/* 按钮右侧带有一条未来感亮线及背景暗纹缺口 */
background-image:
linear-gradient(90deg, transparent 95%, rgba(10, 34, 245, 0.6) 95%),
linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.02) 42%, transparent 45%);
background-size: 10px 100%, 200vw 200vw;
background-position: right top, center;
}
/* 状态栏：追加持续运转的齿轮与雷达准星 */
[data-theme="construct"] .status-bar::before {
content: '⚙';
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
font-size: 18px;
color: var(--accent);
opacity: 0.15;
animation: spin 10s linear infinite;
pointer-events: none;
}
[data-theme="construct"] .status-bar::after {
content: '✦ [SYS.ARCHAEOLOGY]';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--accent);
opacity: 0.4;
pointer-events: none;
}
/* 顶部时钟旁增加碎片感四芒星 */
[data-theme="construct"] .sys-clock::after {
content: ' ✦';
color: var(--accent);
opacity: 0.8;
font-size: 8px;
display: inline-block;
vertical-align: middle;
}
/* ==============================================================
7. 结构化卡片样式 (Structured Card Styles)
============================================================== */
/* 卡片容器基础 */
.structured-card {
border: 1px solid var(--accent);
background: var(--card-bg);
color: var(--text) !important;
padding: 0;
min-width: 220px;
max-width: 340px;
position: relative;
overflow: hidden;
font-family: 'Space Grotesk', 'JetBrains Mono', sans-serif;
}
[data-theme="construct"] .structured-card {
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
box-shadow: 3px 3px 0 rgba(10, 34, 245, 0.12);
}
/* 卡片内微网格底纹 */
[data-theme="construct"] .structured-card::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(10, 34, 245, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 34, 245, 0.02) 1px, transparent 1px);
background-size: 12px 12px;
pointer-events: none;
z-index: 0;
}
.structured-card>* {
position: relative;
z-index: 1;
}
/* 卡片头部 */
.sc-header {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid rgba(10, 34, 245, 0.15);
background: rgba(10, 34, 245, 0.03);
}
.sc-icon {
display: flex;
align-items: center;
color: var(--accent);
}
.sc-title {
flex: 1;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text);
}
.sc-badge {
font-size: 0.65rem;
font-weight: 700;
color: var(--accent);
border: 1px solid var(--accent);
padding: 1px 6px;
letter-spacing: 0.5px;
}
/* 卡片尾部 */
.sc-footer {
padding: 5px 12px;
font-size: 0.6rem;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: 0.4;
text-align: right;
border-top: 1px solid rgba(10, 34, 245, 0.1);
}
/* --- Bingo 卡片 --- */
.sc-progress-bar {
height: 3px;
background: rgba(10, 34, 245, 0.08);
overflow: hidden;
}
.sc-progress-fill {
height: 100%;
background: var(--accent);
transition: width 0.3s;
}
.sc-bingo-grid {
padding: 8px;
}
.sc-bingo-row {
display: flex;
gap: 3px;
margin-bottom: 3px;
}
.sc-bingo-cell {
flex: 1;
text-align: center;
padding: 4px 2px;
font-size: 0.6rem;
border: 1px solid rgba(10, 34, 245, 0.15);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
}
.sc-cell-done {
background: rgba(10, 34, 245, 0.1);
color: var(--accent);
font-weight: 700;
text-decoration: line-through;
opacity: 0.7;
}
.sc-cell-todo {
background: transparent;
color: var(--text);
}
.sc-journal {
padding: 6px 12px;
font-size: 0.65rem;
opacity: 0.6;
display: flex;
align-items: center;
gap: 4px;
border-top: 1px dashed rgba(10, 34, 245, 0.1);
}
/* --- Bio 状态卡片 --- */
.sc-bio-body {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 12px;
}
.sc-bio-ring {
text-align: center;
}
.sc-bio-label {
font-size: 0.6rem;
letter-spacing: 2px;
opacity: 0.5;
margin-top: 4px;
}
.sc-bio-mood {
text-align: center;
}
.sc-mood-icon {
display: flex;
justify-content: center;
}
.sc-mood-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 1px;
margin-top: 4px;
text-transform: uppercase;
}
/* --- 骰子卡片 --- */
.sc-dice-question {
padding: 8px 12px;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px dashed rgba(10, 34, 245, 0.1);
}
.sc-dice-result {
padding: 10px 12px;
text-align: center;
}
.sc-dice-value {
font-size: 2rem;
font-weight: 900;
color: var(--accent);
letter-spacing: -1px;
font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
}
.sc-dice-sublabel {
font-size: 0.7rem;
opacity: 0.4;
letter-spacing: 1px;
}
.sc-dice-options {
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-dice-opt {
padding: 5px 10px;
font-size: 0.72rem;
border: 1px solid rgba(10, 34, 245, 0.1);
transition: all 0.15s;
}
.sc-dice-selected {
background: rgba(10, 34, 245, 0.1);
border-color: var(--accent);
color: var(--accent);
font-weight: 700;
}
/* --- 文件卡片 --- */
.sc-file-info {
padding: 10px 12px;
}
.sc-file-name {
font-size: 0.85rem;
font-weight: 700;
word-break: break-all;
line-height: 1.3;
}
.sc-file-meta {
font-size: 0.65rem;
opacity: 0.5;
margin-top: 4px;
font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
letter-spacing: 0.5px;
}
.sc-file-preview {
padding: 6px 12px 10px;
font-size: 0.7rem;
line-height: 1.5;
opacity: 0.6;
max-height: 80px;
overflow: hidden;
border-top: 1px dashed rgba(10, 34, 245, 0.1);
white-space: pre-wrap;
word-break: break-word;
}
/* AI回复按钮主题适配 */
[data-theme="construct"] #character-ai-reply-btn {
border-radius: 50% !important;
border: 1px solid var(--accent) !important;
transition: all 0.2s;
}
[data-theme="construct"] #character-ai-reply-btn:hover {
background: var(--accent) !important;
color: #fff !important;
box-shadow: 2px 2px 0 rgba(10, 34, 245, 0.3);
}
/* ===== Task Center (Phase 5.6-C) ===== */
.task-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
margin-bottom: 10px;
}
.task-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.task-card-name {
font-weight: 600;
font-size: 0.85rem;
}
.task-card-meta {
font-size: 0.7rem;
opacity: 0.6;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.task-status-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 500;
}
.task-status-tag.created {
background: rgba(158, 158, 158, 0.2);
color: #9e9e9e;
}
.task-status-tag.scheduled {
background: rgba(33, 150, 243, 0.15);
color: #2196f3;
}
.task-status-tag.running {
background: rgba(255, 152, 0, 0.15);
color: #ff9800;
}
.task-status-tag.delivered {
background: rgba(76, 175, 80, 0.15);
color: #4caf50;
}
.task-status-tag.archived {
background: rgba(158, 158, 158, 0.15);
color: #9e9e9e;
}
.task-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.task-card-actions button {
padding: 4px 10px;
font-size: 0.7rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
cursor: pointer;
}
.task-card-actions button:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.task-card-actions button.danger:hover {
background: #c62828;
border-color: #c62828;
}
.task-card.disabled {
opacity: 0.5;
}
.task-filter-btn.active {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* ===== Link Preview Card ===== */
.sc-link {
transition: box-shadow 0.2s;
}
.sc-link:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.sc-link-img {
margin: 8px 0;
border-radius: 8px;
overflow: hidden;
max-height: 160px;
}
.sc-link-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-height: 160px;
}
.sc-link-body {
padding: 4px 0;
}
.sc-link-title {
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 4px;
}
.sc-link-desc {
font-size: 0.75rem;
opacity: 0.7;
line-height: 1.4;
}
.sc-link-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.sc-link-actions button {
padding: 4px 10px;
font-size: 0.7rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
cursor: pointer;
}
.sc-link-actions button:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ===== Location Card ===== */
.sc-loc-body {
padding: 6px 0;
}
.sc-loc-name {
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 4px;
}
.sc-loc-addr {
font-size: 0.75rem;
opacity: 0.6;
margin-bottom: 4px;
}
.sc-loc-weather {
font-size: 0.75rem;
opacity: 0.7;
padding: 4px 8px;
background: rgba(var(--accent-rgb), 0.08);
border-radius: 6px;
display: inline-block;
}
/* ===== Memory Index 全屏页面 ===== */
#page-memory-index {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3000;
background: var(--bg);
flex-direction: column;
}
#page-memory-index.active {
display: flex;
}
.mi-panel-wrapper {
width: 100%;
background: var(--card-bg);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
flex: 1;
}
/* 顶部装饰线 */
.mi-panel-wrapper::before {
content: '' !important;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--accent);
}
.mi-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 28px 20px;
border-bottom: var(--construct-border, 1px solid var(--text));
background: var(--card-bg);
position: relative;
}
.mi-header h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text);
display: flex;
align-items: center;
gap: 12px;
}
.mi-header h3::before {
content: '[ MEM_IDX ]';
font-size: 0.75rem;
color: var(--accent);
opacity: 0.8;
border: 1px solid var(--accent);
padding: 2px 6px;
border-radius: 2px;
background: rgba(var(--accent-rgb), 0.05);
}
.mi-back-btn {
background: transparent;
border: var(--construct-border, 1px solid var(--text));
color: var(--text);
cursor: pointer;
border-radius: 2px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.mi-back-btn:hover {
background: var(--text);
color: var(--card-bg);
}
.mi-body {
padding: 0 28px 24px;
background: var(--card-bg);
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
min-height: 0;
}
/* Stats Grid */
.mi-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 24px;
margin-bottom: 28px;
}
[data-theme="construct"] .alchemy-selector-sheet::before {
content: none;
display: none;
}
.mi-stat-card {
background: var(--bg);
border: var(--construct-border, 1px solid var(--text));
padding: 16px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.2s;
}
.mi-stat-card::after {
content: '';
position: absolute;
bottom: -4px;
right: -4px;
width: 100%;
height: 100%;
border: 1px solid var(--accent);
z-index: -1;
transition: all 0.2s;
}
.mi-stat-card:hover {
transform: translate(2px, 2px);
background: var(--card-bg);
}
.mi-stat-card:hover::after {
bottom: 0;
right: 0;
}
.mi-stat-label {
font-size: 0.7rem;
font-weight: bold;
color: var(--text);
opacity: 0.7;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 4px;
}
.mi-stat-label::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--accent);
}
.mi-stat-value {
font-size: 1.4rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
}
/* Controls Section */
.mi-sticky-controls {
position: sticky;
top: 0;
z-index: 8;
background: var(--card-bg);
padding: 8px 0 0;
margin: 0 0 16px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.04);
}
.mi-controls-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
align-items: stretch;
flex-wrap: wrap;
}
.mi-select,
.mi-input {
appearance: none;
background: var(--card-bg);
border: var(--construct-border, 1px solid var(--text));
border-radius: 0;
padding: 10px 16px;
font-size: 0.85rem;
color: var(--text);
font-family: inherit;
outline: none;
transition: all 0.2s ease;
}
.mi-select {
flex: 1;
min-width: 140px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.mi-select:focus,
.mi-input:focus {
border-color: var(--accent);
box-shadow: 2px 2px 0 var(--accent);
}
.mi-search-container {
position: relative;
flex: 2;
min-width: 200px;
display: flex;
}
.mi-search-container .mi-input {
width: 100%;
/* !important: 墟构等主题的全局 input[type="text"] 覆盖（specificity 0,2,1）会吃掉这条
功能性 padding，导致放大镜图标压住 placeholder（塔拉 6/12 真机反馈） */
padding-left: 44px !important;
box-sizing: border-box;
}
.mi-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text);
opacity: 0.8;
pointer-events: none;
}
/* Buttons */
.mi-btn {
background: var(--text);
color: var(--card-bg);
border: var(--construct-border, 1px solid var(--text));
border-radius: 0;
padding: 10px 20px;
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
position: relative;
}
.mi-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 rgba(10, 34, 245, 0.2);
}
.mi-btn:active {
transform: translate(0, 0);
box-shadow: none;
}
.mi-btn.secondary {
background: var(--bg);
color: var(--text);
}
.mi-btn.secondary:hover {
background: var(--mystery-1, #dbe0fa);
color: var(--accent);
border-color: var(--accent);
}
.mi-btn.danger {
background: var(--card-bg);
color: var(--deadline, #ff003c);
border-color: var(--deadline, #ff003c);
}
.mi-btn.danger:hover {
background: var(--deadline, #ff003c);
color: var(--card-bg);
box-shadow: 4px 4px 0 rgba(255, 0, 60, 0.15);
}
.mi-time-chip-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0 0 10px;
align-items: center;
}
.mi-scope-filter-trigger { display:inline-flex; align-items:center; gap:6px; }
.mi-scope-selected-count { min-width:28px; padding:1px 4px; border:1px solid currentColor; font-size:0.62rem; line-height:1.2; text-align:center; font-variant-numeric:tabular-nums; opacity:0.7; }
.mi-scope-filter-panel { width:min(420px, 100%); box-sizing:border-box; margin:0 0 10px; padding:10px; border:var(--construct-border,1px solid var(--text)); background:var(--card-bg); box-shadow:4px 4px 0 rgba(10,34,245,0.12); }
.mi-scope-filter-panel[hidden] { display:none; }
.mi-scope-filter-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.mi-scope-filter-head > span { font-size:0.75rem; font-weight:700; }
.mi-scope-filter-head > small { font-size:0.65rem; opacity:0.55; text-align:right; }
.mi-scope-chip-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0; }
.mi-scope-chip { appearance:none; min-width:0; border:var(--construct-border,1px solid var(--text)); background:transparent; color:var(--text); padding:7px 8px; font-size:0.72rem; cursor:pointer; opacity:0.65; white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:5px; }
.mi-scope-count { min-width:1.5em; font-size:0.66rem; line-height:1; text-align:right; font-variant-numeric:tabular-nums; opacity:0.65; }
.mi-scope-chip:hover { opacity:1; background:var(--card-bg); }
.mi-scope-chip.active { background:var(--text); color:var(--bg); opacity:1; }
.mi-time-chip {
appearance: none;
border: var(--construct-border, 1px solid var(--text));
background: transparent;
color: var(--text);
border-radius: 0;
padding: 4px 10px;
font-size: 0.75rem;
line-height: 1.4;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
opacity: 0.65;
}
.mi-time-chip:hover {
opacity: 1;
background: var(--card-bg);
}
.mi-time-chip.active {
background: var(--text);
color: var(--bg);
opacity: 1;
}
.mi-refresh-chip {
padding: 4px 7px;
min-height: 28px;
font-size: 0.75rem;
line-height: 1.4;
gap: 5px;
text-transform: none;
letter-spacing: 0;
}
.mi-refresh-chip:hover {
transform: none;
box-shadow: 2px 2px 0 rgba(10, 34, 245, 0.16);
}
@media (max-width: 640px) {
.mi-time-chip-row {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.mi-time-chip-row::-webkit-scrollbar { display: none; }
.mi-refresh-chip { flex: 0 0 30px; width: 30px; justify-content: center; }
}
.mi-custom-range {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.mi-date-input {
appearance: none;
background: var(--card-bg);
border: var(--construct-border, 1px solid var(--text));
border-radius: 0;
padding: 6px 10px;
font-size: 0.78rem;
color: var(--text);
font-family: inherit;
outline: none;
min-width: 130px;
}
.mi-date-input:focus {
border-color: var(--accent);
box-shadow: 2px 2px 0 var(--accent);
}
.mi-date-sep {
font-size: 0.75rem;
color: var(--text);
opacity: 0.5;
}
.mi-date-apply {
text-transform: none;
letter-spacing: 0;
font-size: 0.75rem;
padding: 6px 12px;
}
/* ── 角色日志管理页 filter chips ── */
.char-actlog-filter-btn {
appearance: none;
border: var(--construct-border, 1px solid var(--text));
background: transparent;
color: var(--text);
border-radius: 0;
padding: 3px 10px;
font-size: 0.73rem;
line-height: 1.4;
cursor: pointer;
transition: background 0.13s, color 0.13s;
white-space: nowrap;
opacity: 0.55;
}
.char-actlog-filter-btn:hover {
opacity: 1;
background: var(--card-bg);
}
.char-actlog-filter-btn.active {
background: var(--text);
color: var(--bg);
opacity: 1;
}
.char-actlog-time-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.char-actlog-time-chip {
appearance: none;
border: var(--construct-border, 1px solid var(--text));
background: transparent;
color: var(--text);
border-radius: 0;
padding: 4px 10px;
font-size: 0.75rem;
line-height: 1.4;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
opacity: 0.65;
}
.char-actlog-time-chip:hover {
opacity: 1;
background: var(--card-bg);
}
.char-actlog-time-chip.active {
background: var(--text);
color: var(--bg);
opacity: 1;
}
.char-actlog-custom-range {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.char-actlog-date-input {
appearance: none;
background: var(--card-bg);
border: var(--construct-border, 1px solid var(--text));
border-radius: 0;
padding: 6px 10px;
font-size: 0.78rem;
color: var(--text);
font-family: inherit;
outline: none;
min-width: 130px;
}
.char-actlog-date-input:focus {
border-color: var(--accent);
box-shadow: 2px 2px 0 var(--accent);
}
.char-actlog-date-sep {
font-size: 0.75rem;
color: var(--text);
opacity: 0.5;
}
.char-actlog-date-apply {
width: auto;
margin: 0;
padding: 6px 12px;
font-size: 0.75rem;
text-transform: none;
letter-spacing: 0;
}
.char-actlog-title .markdown-content,
.char-actlog-summary .markdown-content,
.char-actlog-markdown.markdown-content {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.char-actlog-markdown.compact p,
.char-actlog-markdown.compact ul,
.char-actlog-markdown.compact ol,
.char-actlog-markdown.compact pre,
.char-actlog-markdown.compact blockquote {
margin: 0.18em 0;
}
.char-actlog-title .markdown-content {
font-size: 0.82rem;
font-weight: 500;
line-height: 1.3;
word-break: break-word;
}
.char-actlog-summary {
margin-top: 2px;
opacity: 0.55;
line-height: 1.4;
font-size: 0.73rem;
}
.char-actlog-detail-row {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 6px;
}
.char-actlog-detail-key {
flex: 0 0 78px;
opacity: 0.6;
font-family: monospace;
}
.char-actlog-detail-value {
flex: 1;
min-width: 0;
opacity: 0.82;
word-break: break-word;
}
/* Tabs (Construct Style) */
.mi-tabs {
display: flex;
border-bottom: 2px solid var(--text);
margin-bottom: 0;
}
.mi-tab {
flex: 1;
padding: 12px 0;
text-align: center;
font-size: 0.85rem;
font-weight: bold;
color: var(--text);
opacity: 0.5;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
border: 2px solid transparent;
border-bottom: none;
margin-bottom: -2px;
}
.mi-tab:hover {
opacity: 1;
background: var(--bg);
}
.mi-tab.active {
opacity: 1;
color: var(--accent);
background: var(--card-bg);
border-color: var(--text);
}
/* Batch Bar */
.mi-batch-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
background: var(--card-bg);
border: var(--construct-border, 1px solid var(--text));
margin-bottom: 12px;
animation: slideDown 0.3s ease;
}
.mi-batch-info {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 0.78rem;
font-weight: 600;
}
.mi-batch-info label { cursor: pointer; white-space: nowrap; }
#mi-selected-count { color: var(--accent); white-space: nowrap; }
.mi-batch-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.mi-batch-actions .mi-btn {
min-height: 34px;
padding: 6px 10px;
gap: 6px;
white-space: nowrap;
transform: none;
box-shadow: none;
}
.mi-checkbox {
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--text);
cursor: pointer;
position: relative;
transition: all 0.1s;
}
.mi-checkbox:checked {
background-color: var(--text);
}
.mi-checkbox:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid var(--card-bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* List Area */
.mi-list-container {
flex: 0 0 auto;
min-height: 200px;
overflow-y: visible;
border: var(--construct-border, 1px solid var(--text));
background: var(--bg);
margin-bottom: 24px;
padding: 12px;
}
.mi-list-container::-webkit-scrollbar {
width: 8px;
}
.mi-list-container::-webkit-scrollbar-track {
background: var(--card-bg);
border-left: 1px solid var(--border);
}
.mi-list-container::-webkit-scrollbar-thumb {
background: var(--text);
}
/* Empty State */
.mi-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text);
text-align: center;
}
.mi-empty-state::before {
content: '404_DATA_NOT_FOUND';
font-size: 0.75rem;
letter-spacing: 0.1em;
opacity: 0.5;
margin-bottom: 16px;
}
.mi-empty-icon {
width: 48px;
height: 48px;
margin-bottom: 20px;
stroke: var(--accent);
stroke-width: 1.5;
}
/* Pagination */
.mi-pagination {
display: flex;
justify-content: space-between;
align-items: center;
border-top: var(--construct-border, 1px solid var(--text));
padding-top: 20px;
}
.mi-page-info {
font-size: 0.85rem;
font-weight: bold;
color: var(--text);
background: var(--bg);
padding: 6px 12px;
border: var(--construct-border, 1px solid var(--text));
letter-spacing: 0.1em;
}
.mi-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
background: var(--bg);
color: var(--text);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* UI中的微小装饰点，增加科技感 */
.tech-dot {
width: 4px;
height: 4px;
background: var(--accent);
display: inline-block;
margin-right: 8px;
}
.mi-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.7rem;
background: rgba(var(--accent-rgb, 79, 195, 247), 0.12);
color: var(--accent, #4fc3f7);
white-space: nowrap;
}
.mi-level-header:hover,
.mi-space-header:hover {
opacity: 0.85;
}
.mi-group-card:hover {
border-color: rgba(var(--accent-rgb, 79, 195, 247), 0.4);
}
@media (max-width: 640px) {
.mi-time-chip-row {
flex-wrap: wrap;
overflow: visible;
padding-bottom: 0;
}
.mi-scope-filter-panel { width:100%; padding:9px; }
.mi-scope-filter-head { align-items:flex-start; }
.mi-scope-chip { padding:8px 7px; }
.char-actlog-time-row {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
}
.mi-time-chip-row::-webkit-scrollbar {
display: none;
}
.char-actlog-time-row::-webkit-scrollbar {
display: none;
}
.mi-custom-range {
align-items: stretch;
}
.char-actlog-custom-range {
align-items: stretch;
}
.mi-date-input,
.mi-date-apply {
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
.char-actlog-date-input,
.char-actlog-date-apply {
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
.mi-date-sep {
width: 100%;
text-align: center;
}
.char-actlog-date-sep {
width: 100%;
text-align: center;
}
.daily-feed-header {
flex-direction: column;
align-items: stretch;
}
.daily-feed-header-line {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.daily-feed-title {
font-size: 1.08rem;
}
.daily-feed-detail-body {
padding: 16px 16px 24px;
}
.daily-feed-detail-hero h2 {
font-size: 1.38rem;
}
.daily-feed-detail-info-row {
flex-direction: column;
gap: 4px;
}
.daily-feed-detail-info-row strong {
text-align: left;
}
}
/* Daily feed diary view */
.daily-feed-shell {
position: relative;
--daily-feed-surface: var(--card-bg);
--daily-feed-shell-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.86) 0%, rgba(var(--bg-rgb), 0.94) 100%);
--daily-feed-header-bg: linear-gradient(180deg, var(--daily-feed-surface) 0%, rgba(var(--bg-rgb), 0.86) 100%);
--daily-feed-card-bg: linear-gradient(180deg, var(--daily-feed-surface) 0%, rgba(var(--bg-rgb), 0.72) 100%);
--daily-feed-chip-bg: rgba(var(--bg-rgb), 0.72);
background: var(--daily-feed-shell-bg);
}
.daily-feed-header {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px 18px 12px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
background: var(--daily-feed-header-bg);
flex-shrink: 0;
}
.daily-feed-header::before {
content: '';
position: absolute;
left: 18px;
top: 18px;
width: 3px;
height: 22px;
background: var(--accent);
opacity: 0.9;
border-radius: 999px;
}
.daily-feed-header-copy {
min-width: 0;
flex: 1;
padding-left: 12px;
}
.daily-feed-kicker {
display: inline-block;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
margin-bottom: 8px;
opacity: 0.8;
}
.daily-feed-header-line {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.daily-feed-title {
font-size: 1.38rem;
font-weight: 600;
color: var(--text);
line-height: 1.2;
}
.daily-feed-stats {
font-size: 0.72rem;
color: rgba(var(--accent-rgb), 0.54);
font-family: 'JetBrains Mono', monospace;
}
.daily-feed-subtitle {
margin: 8px 0 0;
font-size: 0.8rem;
line-height: 1.7;
color: rgba(var(--accent-rgb), 0.68);
}
.daily-feed-filter-row {
display: flex;
padding: 12px 18px 10px;
overflow: visible;
flex-shrink: 0;
}
.daily-feed-filter-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
min-width: 0;
width: 100%;
overflow: visible;
padding-bottom: 2px;
}
.daily-feed-filter-strip::-webkit-scrollbar {
display: none;
}
.daily-feed-toolbar {
position: relative;
display: grid;
gap: 10px;
padding: 0 18px 10px;
flex-shrink: 0;
}
.daily-feed-filter-spacer {
flex: 1 0 18px;
min-width: 10px;
}
.daily-feed-calendar-anchor {
position: relative;
display: flex;
flex-shrink: 0;
}
.daily-feed-calendar-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.14);
background: var(--daily-feed-chip-bg);
color: var(--text);
font-size: 0.76rem;
cursor: pointer;
white-space: nowrap;
}
.daily-feed-calendar-btn.active {
border-color: rgba(var(--accent-rgb), 0.28);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.daily-feed-calendar-icon {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.daily-feed-calendar-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 15;
width: min(320px, calc(100vw - 36px));
min-width: 280px;
}
.daily-feed-calendar-panel {
border: 1px solid rgba(var(--accent-rgb), 0.12);
border-radius: 16px;
background: linear-gradient(180deg, var(--daily-feed-surface) 0%, rgba(var(--bg-rgb), 0.88) 100%);
box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.1);
padding: 12px;
}
.daily-feed-calendar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.daily-feed-calendar-head strong {
font-size: 0.92rem;
color: var(--text);
font-weight: 600;
}
.daily-feed-calendar-nav {
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: var(--daily-feed-chip-bg);
color: var(--text);
cursor: pointer;
}
.daily-feed-calendar-actions {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.daily-feed-calendar-chip {
border: 1px solid rgba(var(--accent-rgb), 0.12);
border-radius: 999px;
min-height: 28px;
padding: 0 11px;
background: transparent;
color: rgba(var(--accent-rgb), 0.76);
font-size: 0.72rem;
cursor: pointer;
}
.daily-feed-calendar-chip.active {
background: rgba(var(--accent-rgb), 0.12);
color: var(--text);
}
.daily-feed-calendar-weekdays,
.daily-feed-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
.daily-feed-calendar-weekdays {
margin-bottom: 8px;
}
.daily-feed-calendar-weekdays span {
text-align: center;
font-size: 0.7rem;
color: rgba(var(--accent-rgb), 0.52);
font-family: 'JetBrains Mono', monospace;
}
.daily-feed-calendar-cell {
position: relative;
min-height: 42px;
border: 1px solid rgba(var(--accent-rgb), 0.08);
border-radius: 12px;
background: rgba(var(--bg-rgb), 0.48);
color: var(--text);
cursor: pointer;
}
.daily-feed-calendar-cell.empty {
border-color: transparent;
background: transparent;
pointer-events: none;
}
.daily-feed-calendar-cell.today {
border-color: rgba(var(--accent-rgb), 0.24);
}
.daily-feed-calendar-cell.selected {
border-color: rgba(var(--accent-rgb), 0.34);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.daily-feed-calendar-date {
display: block;
padding-top: 8px;
text-align: center;
font-size: 0.82rem;
}
.daily-feed-calendar-dot {
position: absolute;
left: 50%;
bottom: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
transform: translateX(-50%);
opacity: 0.9;
}
.daily-feed-calendar-dot.ghost {
opacity: 0;
}
.daily-feed-search {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 14px;
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: var(--daily-feed-surface);
box-shadow: none;
}
.daily-feed-search-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--text);
font-size: 0.78rem;
outline: none;
}
.daily-feed-search-input::placeholder {
color: rgba(var(--accent-rgb), 0.42);
}
.daily-feed-search-clear {
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: transparent;
color: rgba(var(--accent-rgb), 0.74);
font-size: 0.72rem;
border-radius: 8px;
min-height: 28px;
padding: 0 11px;
cursor: pointer;
}
.daily-feed-overview {
font-size: 0.76rem;
line-height: 1.7;
color: rgba(var(--accent-rgb), 0.62);
min-height: 20px;
}
.daily-feed-daynav {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 0 18px 10px;
flex-shrink: 0;
}
.daily-feed-daychip {
border: var(--construct-border, 1px solid rgba(var(--accent-rgb), 0.16));
border-radius: 10px;
min-height: 30px;
padding: 0 12px;
background: var(--daily-feed-chip-bg);
color: var(--text);
font-size: 0.72rem;
white-space: nowrap;
cursor: pointer;
opacity: 0.72;
}
.daily-feed-filter-btn {
border: var(--construct-border, 1px solid rgba(var(--accent-rgb), 0.16));
border-radius: 10px;
padding: 8px 14px;
background: var(--daily-feed-chip-bg);
color: var(--text);
font-size: 0.76rem;
cursor: pointer;
white-space: nowrap;
box-shadow: none;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
opacity: 0.72;
}
.daily-feed-filter-btn:hover,
.daily-feed-daychip:hover {
opacity: 1;
background: var(--card-bg);
}
.daily-feed-filter-btn.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
opacity: 1;
}
.daily-feed-list {
flex: 1;
overflow-y: auto;
padding: 8px 18px 22px;
}
.daily-feed-empty {
padding: 56px 18px;
text-align: center;
color: rgba(var(--accent-rgb), 0.6);
font-size: 0.8rem;
line-height: 1.9;
}
.daily-feed-group+.daily-feed-group {
margin-top: 26px;
}
.daily-feed-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.daily-feed-group-copy {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
flex-wrap: wrap;
}
.daily-feed-group-head h3 {
margin: 0;
font-size: 1.05rem;
color: var(--text);
}
.daily-feed-group-head span {
font-size: 0.72rem;
color: rgba(var(--accent-rgb), 0.54);
}
.daily-feed-group-head strong {
font-size: 0.72rem;
font-weight: 600;
color: rgba(var(--accent-rgb), 0.66);
}
.daily-feed-group-meta {
display: grid;
gap: 4px;
justify-items: end;
max-width: min(320px, 100%);
}
.daily-feed-group-digest {
margin: 0;
font-size: 0.74rem;
line-height: 1.7;
color: rgba(var(--accent-rgb), 0.64);
text-align: right;
}
.daily-feed-group-body {
position: relative;
padding-left: 16px;
}
.daily-feed-group-closure {
margin: 4px 0 0 16px;
padding: 10px 14px 0 16px;
font-size: 0.77rem;
line-height: 1.8;
color: rgba(var(--accent-rgb), 0.68);
}
.daily-feed-group-body::before {
content: '';
position: absolute;
left: 3px;
top: 6px;
bottom: 6px;
width: 1px;
background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.05));
}
.daily-feed-card {
position: relative;
margin-bottom: 14px;
padding: 14px 14px 14px 16px;
border-radius: 14px;
width: 100%;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: var(--daily-feed-card-bg);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
text-align: left;
}
.daily-feed-card::before {
content: '';
position: absolute;
left: -18px;
top: 22px;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(var(--accent-rgb), 0.52);
box-shadow: 0 0 0 5px rgba(var(--bg-rgb), 0.96);
}
.daily-feed-card:last-child {
margin-bottom: 0;
}
.daily-feed-card:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.14), var(--shadow);
}
.daily-feed-card:focus-visible,
.daily-feed-card.active {
outline: none;
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 0 0 4px rgba(var(--accent-rgb), 0.06);
}
.daily-feed-card-line {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.daily-feed-state {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.daily-feed-state-glyph {
font-size: 0.95rem;
color: rgba(var(--accent-rgb), 0.78);
}
.daily-feed-state-text {
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
}
.daily-feed-time {
font-size: 0.74rem;
color: rgba(var(--accent-rgb), 0.46);
white-space: nowrap;
}
.daily-feed-card-title {
margin: 0 0 6px;
font-size: 1rem;
line-height: 1.45;
color: var(--text);
word-break: break-word;
}
.daily-feed-card-bridge {
margin: -1px 0 8px;
font-size: 0.74rem;
line-height: 1.75;
color: rgba(var(--accent-rgb), 0.58);
word-break: break-word;
}
.daily-feed-card-summary {
margin: 0;
font-size: 0.82rem;
line-height: 1.8;
color: rgba(var(--accent-rgb), 0.72);
word-break: break-word;
}
.daily-feed-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.daily-feed-tag {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
border-radius: 10px;
background: rgba(var(--bg-rgb), 0.68);
color: rgba(var(--accent-rgb), 0.82);
font-size: 0.72rem;
cursor: pointer;
}
.daily-feed-loadmore-wrap {
padding: 8px 18px 16px;
text-align: center;
flex-shrink: 0;
}
.daily-feed-detail-layer {
position: absolute;
inset: 0;
background: rgba(var(--bg-rgb), 0.72);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transform: translateX(18px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.daily-feed-detail-layer.active {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.daily-feed-detail-panel {
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--daily-feed-surface) 0%, rgba(var(--bg-rgb), 0.7) 100%);
}
.daily-feed-detail-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 18px 12px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
flex-shrink: 0;
}
.daily-feed-back-btn {
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: var(--daily-feed-chip-bg);
color: rgba(var(--accent-rgb), 0.86);
font-size: 0.82rem;
cursor: pointer;
padding: 6px 12px;
border-radius: 10px;
}
.daily-feed-detail-topmeta {
flex: 1;
min-width: 0;
font-size: 0.74rem;
color: rgba(var(--accent-rgb), 0.58);
text-align: center;
}
.daily-feed-detail-topactions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.daily-feed-detail-navbtn {
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: var(--daily-feed-chip-bg);
color: rgba(var(--accent-rgb), 0.84);
font-size: 0.74rem;
min-height: 30px;
padding: 0 12px;
border-radius: 10px;
cursor: pointer;
}
.daily-feed-detail-navbtn:disabled {
opacity: 0.42;
cursor: default;
}
.daily-feed-detail-body {
flex: 1;
overflow-y: auto;
padding: 18px 18px 28px;
}
.daily-feed-detail-hero {
padding-bottom: 18px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.daily-feed-detail-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: 0.75rem;
color: rgba(var(--accent-rgb), 0.62);
}
.daily-feed-detail-state {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.12);
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
font-weight: 600;
}
.daily-feed-detail-hero h2 {
margin: 0 0 10px;
font-size: 1.55rem;
line-height: 1.35;
color: var(--text);
word-break: break-word;
}
.daily-feed-detail-hero p,
.daily-feed-detail-paragraph {
margin: 0;
font-size: 0.92rem;
line-height: 1.95;
color: rgba(var(--accent-rgb), 0.84);
white-space: pre-wrap;
word-break: break-word;
}
.daily-feed-detail-bridge {
margin-top: 12px;
padding-left: 12px;
border-left: 1px solid rgba(var(--accent-rgb), 0.18);
font-size: 0.8rem;
line-height: 1.8;
color: rgba(var(--accent-rgb), 0.66);
}
.daily-feed-detail-section {
padding: 18px 0 0;
}
.daily-feed-detail-section h3 {
margin: 0 0 10px;
font-size: 0.78rem;
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.daily-feed-detail-info {
display: grid;
gap: 10px;
}
.daily-feed-detail-action-btn {
appearance: none;
margin-top: 12px;
padding: 9px 14px;
border: 1px solid rgba(var(--accent-rgb), 0.14);
border-radius: 10px;
background: var(--daily-feed-surface);
color: var(--text);
font-size: 0.76rem;
cursor: pointer;
}
.daily-feed-detail-info-row {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.daily-feed-detail-info-row span {
font-size: 0.75rem;
color: rgba(var(--accent-rgb), 0.58);
white-space: nowrap;
}
.daily-feed-detail-info-row strong {
font-size: 0.83rem;
line-height: 1.75;
color: rgba(var(--accent-rgb), 0.86);
text-align: right;
word-break: break-word;
}
.daily-feed-detail-muted {
font-size: 0.82rem;
line-height: 1.8;
color: rgba(var(--accent-rgb), 0.64);
}
.daily-feed-continuity-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.daily-feed-continuity-item {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid rgba(var(--accent-rgb), 0.1);
border-radius: 12px;
background: rgba(var(--bg-rgb), 0.46);
}
.daily-feed-continuity-item span {
font-size: 0.72rem;
color: rgba(var(--accent-rgb), 0.56);
}
.daily-feed-continuity-item strong {
font-size: 0.83rem;
line-height: 1.8;
color: rgba(var(--accent-rgb), 0.84);
font-weight: 500;
}
.daily-feed-continuity-item strong em {
display: block;
margin-top: 4px;
color: var(--text-secondary);
font-style: normal;
font-size: 0.86em;
opacity: 0.78;
}
.daily-feed-debug {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid rgba(var(--accent-rgb), 0.1);
}
.daily-feed-debug summary {
cursor: pointer;
font-size: 0.76rem;
color: rgba(var(--accent-rgb), 0.58);
user-select: none;
margin-bottom: 10px;
}
[data-theme="construct"] .daily-feed-shell,
[data-theme="construct"] .daily-feed-header,
[data-theme="construct"] .daily-feed-search,
[data-theme="construct"] .daily-feed-search-clear,
[data-theme="construct"] .daily-feed-calendar-btn,
[data-theme="construct"] .daily-feed-calendar-panel,
[data-theme="construct"] .daily-feed-calendar-nav,
[data-theme="construct"] .daily-feed-calendar-chip,
[data-theme="construct"] .daily-feed-calendar-cell,
[data-theme="construct"] .daily-feed-daychip,
[data-theme="construct"] .daily-feed-filter-btn,
[data-theme="construct"] .daily-feed-card,
[data-theme="construct"] .daily-feed-tag,
[data-theme="construct"] .daily-feed-detail-panel,
[data-theme="construct"] .daily-feed-back-btn,
[data-theme="construct"] .daily-feed-detail-navbtn,
[data-theme="construct"] .daily-feed-detail-action-btn,
[data-theme="construct"] .daily-feed-detail-state {
border-radius: 0 !important;
box-shadow: none !important;
}
[data-theme="construct"] .daily-feed-header,
[data-theme="construct"] .daily-feed-search,
[data-theme="construct"] .daily-feed-calendar-btn,
[data-theme="construct"] .daily-feed-calendar-panel,
[data-theme="construct"] .daily-feed-calendar-nav,
[data-theme="construct"] .daily-feed-calendar-chip,
[data-theme="construct"] .daily-feed-calendar-cell,
[data-theme="construct"] .daily-feed-daychip,
[data-theme="construct"] .daily-feed-filter-btn,
[data-theme="construct"] .daily-feed-card,
[data-theme="construct"] .daily-feed-tag,
[data-theme="construct"] .daily-feed-back-btn,
[data-theme="construct"] .daily-feed-detail-navbtn,
[data-theme="construct"] .daily-feed-detail-action-btn,
[data-theme="construct"] .daily-feed-detail-state {
border: var(--construct-border, 1px solid var(--text));
}
[data-theme="construct"] .daily-feed-shell,
[data-theme="construct"] .daily-feed-detail-panel {
background: var(--card-bg);
}
[data-theme="construct"] .daily-feed-card::before {
border-radius: 0;
box-shadow: none;
background: var(--accent);
}
[data-theme="roots"] .daily-feed-shell {
--daily-feed-shell-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.94) 0%, rgba(18, 8, 9, 0.94) 100%);
--daily-feed-header-bg: linear-gradient(180deg, rgba(74, 40, 40, 0.9) 0%, rgba(var(--bg-rgb), 0.88) 100%);
--daily-feed-card-bg: linear-gradient(180deg, rgba(74, 40, 40, 0.9) 0%, rgba(var(--bg-rgb), 0.82) 100%);
--daily-feed-chip-bg: rgba(74, 40, 40, 0.82);
}
[data-theme="dream"] .daily-feed-shell {
--daily-feed-shell-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.88) 0%, rgba(252, 248, 231, 0.92) 100%);
--daily-feed-header-bg: linear-gradient(180deg, rgba(252, 248, 231, 0.96) 0%, rgba(var(--bg-rgb), 0.82) 100%);
--daily-feed-card-bg: linear-gradient(180deg, rgba(252, 248, 231, 0.96) 0%, rgba(var(--bg-rgb), 0.76) 100%);
--daily-feed-chip-bg: rgba(252, 248, 231, 0.88);
}
[data-theme="lime"] .daily-feed-shell {
--daily-feed-shell-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.9) 0%, rgba(255, 255, 255, 0.92) 100%);
--daily-feed-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(var(--bg-rgb), 0.82) 100%);
--daily-feed-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--bg-rgb), 0.78) 100%);
--daily-feed-chip-bg: rgba(255, 255, 255, 0.84);
}
.phase7-view-shell {
background: linear-gradient(180deg, #fffdf9 0%, #ffffff 18%, #faf8f3 100%);
}
.phase7-view-header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
padding: 20px 20px 12px;
border-bottom: 1px solid rgba(93, 105, 115, 0.08);
background: rgba(255, 255, 255, 0.88);
}
.phase7-view-copy {
display: grid;
gap: 8px;
}
.phase7-view-kicker {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(177, 120, 64, 0.78);
}
.phase7-view-title-row {
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
}
.phase7-view-title {
font-size: 1.28rem;
font-weight: 600;
color: rgba(29, 42, 54, 0.92);
}
.phase7-view-stats {
font-size: 0.75rem;
color: rgba(34, 48, 62, 0.42);
}
.phase7-view-subtitle {
margin: 0;
font-size: 0.84rem;
line-height: 1.8;
color: rgba(34, 48, 62, 0.54);
}
.phase7-chip-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 12px 20px 0;
}
.phase7-chip {
border: 1px solid rgba(186, 156, 121, 0.2);
background: rgba(255, 255, 255, 0.82);
color: rgba(74, 60, 47, 0.72);
border-radius: 999px;
padding: 7px 12px;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.18s ease;
}
.phase7-chip.active {
background: rgba(186, 156, 121, 0.14);
color: rgba(125, 85, 43, 0.92);
border-color: rgba(186, 156, 121, 0.34);
}
.phase7-view-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px 24px;
}
.phase7-view-empty {
padding: 56px 0;
text-align: center;
font-size: 0.82rem;
line-height: 1.9;
color: rgba(34, 48, 62, 0.42);
}
.phase7-view-empty-error {
color: var(--error, #d84d43);
}
.phase7-stack {
display: grid;
gap: 16px;
}
.phase7-card-section {
border-radius: 22px;
border: 1px solid rgba(186, 156, 121, 0.12);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 24px rgba(168, 149, 121, 0.08);
padding: 18px 18px 16px;
}
.phase7-card-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 14px;
}
.phase7-card-head h3 {
margin: 0;
font-size: 0.98rem;
color: rgba(29, 42, 54, 0.9);
}
.phase7-card-head p {
margin: 6px 0 0;
font-size: 0.78rem;
line-height: 1.7;
color: rgba(34, 48, 62, 0.5);
}
.phase7-panel-empty {
padding: 22px 4px 10px;
font-size: 0.8rem;
line-height: 1.85;
color: rgba(34, 48, 62, 0.42);
}
.phase7-focus-hero {
display: grid;
gap: 10px;
padding: 2px 0 12px;
}
.phase7-focus-kicker {
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(177, 120, 64, 0.7);
}
.phase7-focus-hero h4,
.phase7-list-titlepack h4 {
margin: 0;
font-size: 1rem;
color: rgba(29, 42, 54, 0.9);
}
.phase7-focus-hero p,
.phase7-list-card p,
.phase7-mini-card p,
.phase7-summary-copy p {
margin: 0;
font-size: 0.83rem;
line-height: 1.8;
color: rgba(34, 48, 62, 0.64);
}
.phase7-mini-grid,
.phase7-list {
display: grid;
gap: 12px;
}
.phase7-mini-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.phase7-mini-card,
.phase7-list-card,
.phase7-summary-banner {
border-radius: 18px;
border: 1px solid rgba(186, 156, 121, 0.11);
background: rgba(250, 247, 241, 0.74);
padding: 14px 15px;
}
.phase7-mini-top,
.phase7-list-top {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
margin-bottom: 8px;
}
.phase7-mini-top span,
.phase7-list-top time {
font-size: 0.74rem;
color: rgba(34, 48, 62, 0.42);
}
.phase7-list-titlepack {
display: grid;
gap: 4px;
}
.phase7-list-state {
display: inline-flex;
width: fit-content;
border-radius: 999px;
background: rgba(177, 120, 64, 0.1);
color: rgba(125, 85, 43, 0.9);
padding: 3px 9px;
font-size: 0.7rem;
}
.phase7-chip-pack,
.phase7-inline-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.phase7-soft-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(186, 156, 121, 0.16);
font-size: 0.73rem;
color: rgba(84, 66, 49, 0.72);
}
.phase7-inline-btn {
border: 1px solid rgba(186, 156, 121, 0.22);
background: rgba(255, 255, 255, 0.9);
color: rgba(84, 66, 49, 0.86);
border-radius: 999px;
padding: 7px 14px;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.18s ease;
}
.phase7-inline-btn:hover {
border-color: rgba(177, 120, 64, 0.34);
color: rgba(125, 85, 43, 0.96);
}
.phase7-info-grid {
margin-top: 10px;
}
.phase7-info-row {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid rgba(93, 105, 115, 0.08);
}
.phase7-info-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.phase7-info-row span {
font-size: 0.74rem;
color: rgba(34, 48, 62, 0.42);
}
.phase7-info-row strong {
font-size: 0.79rem;
line-height: 1.7;
color: rgba(34, 48, 62, 0.74);
text-align: right;
word-break: break-word;
}
.phase7-summary-banner {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
}
@media (max-width: 640px) {
.daily-feed-header {
padding: 16px 14px 10px;
}
.daily-feed-filter-row,
.daily-feed-toolbar,
.daily-feed-daynav,
.daily-feed-list,
.daily-feed-loadmore-wrap,
.daily-feed-detail-topbar,
.daily-feed-detail-body {
padding-left: 14px;
padding-right: 14px;
}
.phase7-view-header,
.phase7-chip-row,
.phase7-view-body {
padding-left: 14px;
padding-right: 14px;
}
.daily-feed-title {
font-size: 1.22rem;
}
.daily-feed-detail-topbar {
flex-wrap: wrap;
}
.daily-feed-detail-topmeta {
order: 3;
width: 100%;
text-align: left;
}
.daily-feed-group-meta {
justify-items: start;
}
.daily-feed-group-digest {
text-align: left;
}
.daily-feed-calendar-btn {
justify-content: center;
}
.daily-feed-calendar-popover {
width: min(320px, calc(100vw - 32px));
min-width: 0;
}
.daily-feed-card {
border-radius: 16px;
padding: 13px 13px 13px 15px;
}
.daily-feed-detail-hero h2 {
font-size: 1.3rem;
}
.phase7-view-title {
font-size: 1.16rem;
}
.phase7-card-section {
border-radius: 18px;
padding: 15px 14px 14px;
}
.phase7-summary-banner {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================
墟构蓝坞 · 滑键 (Construct Slide Keys)
未来考古/解构线条/准星蓝图——冷峻金属感
========================================= */
/* Toggle Switch: 白地蓝框 → 蓝地金属拨头 */
[data-theme="construct"] input[type="checkbox"] {
background: #ffffff !important;
border: 1px solid var(--accent) !important;
border-radius: 2px !important;
/* 切除圆角，硬边几何 */
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
0 0 0 1px rgba(10, 34, 245, 0.08);
overflow: hidden;
}
[data-theme="construct"] input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: rgba(10, 34, 245, 0.35);
pointer-events: none;
transform: translateX(-50%);
}
[data-theme="construct"] input[type="checkbox"]::after {
background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 55%, #cbd5e1 100%) !important;
border-radius: 1px !important;
box-shadow: 0 0 0 1px var(--accent),
inset 0 0 4px rgba(10, 34, 245, 0.35),
0 2px 6px rgba(10, 34, 245, 0.25) !important;
transition: left 0.25s cubic-bezier(.2, .8, .2, 1),
background 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease !important;
}
[data-theme="construct"] input[type="checkbox"]:hover::after {
transform: scale(1.1);
box-shadow: 0 0 0 1px var(--accent),
inset 0 0 6px rgba(10, 34, 245, 0.5),
0 2px 10px rgba(10, 34, 245, 0.45) !important;
}
[data-theme="construct"] input[type="checkbox"]:checked {
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35),
0 0 0 1px rgba(10, 34, 245, 0.25),
0 0 10px rgba(10, 34, 245, 0.35) !important;
}
[data-theme="construct"] input[type="checkbox"]:checked::after {
background: linear-gradient(180deg, #f5f7fa 0%, #cbd5e1 100%) !important;
box-shadow: 0 0 0 1px #ffffff,
inset 0 0 4px var(--accent),
0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="construct"] input[type="checkbox"]:checked::before {
background: rgba(255, 255, 255, 0.5);
}
/* Range Slider: 蓝图刻度轨 + 空心准星 thumb */
[data-theme="construct"] input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 22px;
background: transparent;
outline: none;
cursor: crosshair;
}
[data-theme="construct"] input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background-color: rgba(10, 34, 245, 0.15);
background-image:
linear-gradient(90deg, var(--accent), var(--accent)),
repeating-linear-gradient(90deg,
transparent 0,
transparent calc(10% - 1px),
rgba(10, 34, 245, 0.45) calc(10% - 1px),
rgba(10, 34, 245, 0.45) 10%);
background-size: 100% 100%, 100% 8px;
background-position: 0 0, 0 100%;
background-repeat: no-repeat, repeat-x;
border: none;
}
[data-theme="construct"] input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle,
var(--accent) 0%,
var(--accent) 22%,
transparent 26%,
transparent 64%,
var(--accent) 68%,
var(--accent) 100%);
border: none;
margin-top: -8px;
box-shadow: 0 0 6px rgba(10, 34, 245, 0.5);
transition: transform 0.15s ease, box-shadow 0.2s ease;
cursor: grab;
}
[data-theme="construct"] input[type="range"]:hover::-webkit-slider-thumb {
transform: scale(1.22);
box-shadow: 0 0 14px rgba(10, 34, 245, 0.8),
0 0 0 3px rgba(10, 34, 245, 0.1);
}
[data-theme="construct"] input[type="range"]:active::-webkit-slider-thumb,
[data-theme="construct"] input[type="range"]:focus::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(1.4);
box-shadow: 0 0 22px rgba(10, 34, 245, 0.95),
0 0 0 6px rgba(10, 34, 245, 0.15),
inset 0 0 8px rgba(10, 34, 245, 0.8);
}
/* Firefox */
[data-theme="construct"] input[type="range"]::-moz-range-track {
height: 2px;
background-color: rgba(10, 34, 245, 0.15);
background-image:
linear-gradient(90deg, var(--accent), var(--accent)),
repeating-linear-gradient(90deg,
transparent 0,
transparent calc(10% - 1px),
rgba(10, 34, 245, 0.45) calc(10% - 1px),
rgba(10, 34, 245, 0.45) 10%);
background-size: 100% 100%, 100% 8px;
background-position: 0 0, 0 100%;
background-repeat: no-repeat, repeat-x;
}
[data-theme="construct"] input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle,
var(--accent) 0%,
var(--accent) 22%,
transparent 26%,
transparent 64%,
var(--accent) 68%,
var(--accent) 100%);
border: none;
box-shadow: 0 0 6px rgba(10, 34, 245, 0.5);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
[data-theme="construct"] input[type="range"]:hover::-moz-range-thumb {
transform: scale(1.22);
box-shadow: 0 0 14px rgba(10, 34, 245, 0.8);
}
[data-theme="construct"] input[type="range"]:active::-moz-range-thumb {
cursor: grabbing;
transform: scale(1.4);
box-shadow: 0 0 22px rgba(10, 34, 245, 0.95);
}
/* 文本输入框：蓝图下划 → focus 时全框电离 */
[data-theme="construct"] input[type="text"],
[data-theme="construct"] input[type="number"],
[data-theme="construct"] input[type="password"],
[data-theme="construct"] textarea,
[data-theme="construct"] select {
background: #ffffff !important;
border: 1px solid transparent !important;
border-bottom: 2px solid var(--accent) !important;
border-radius: 0 !important;
color: var(--text);
caret-color: var(--accent);
padding: 8px 10px;
transition: border 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
[data-theme="construct"] input[type="text"]:focus,
[data-theme="construct"] input[type="number"]:focus,
[data-theme="construct"] input[type="password"]:focus,
[data-theme="construct"] textarea:focus,
[data-theme="construct"] select:focus {
border: 1px solid var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
box-shadow: 0 0 0 1px rgba(10, 34, 245, 0.25),
0 0 16px rgba(10, 34, 245, 0.2);
outline: none;
}
border-bottom: 2px solid var(--accent) !important;
border-radius: 0 !important;
color: var(--text);
caret-color: var(--accent);
padding: 8px 10px;
transition: border 0.2s ease,
box-shadow 0.25s ease,
background 0.2s ease;
}
[data-theme="construct"] input[type="text"]:focus,
[data-theme="construct"] input[type="number"]:focus,
[data-theme="construct"] input[type="password"]:focus,
[data-theme="construct"] textarea:focus,
[data-theme="construct"] select:focus {
border: 1px solid var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
box-shadow: 0 0 0 1px rgba(10, 34, 245, 0.25),
0 0 16px rgba(10, 34, 245, 0.2);
outline: none;
}
/* Final alchemy panel guard: some theme/mobile blocks repeat generic .sheet
dimensions later in the file, so the dedicated panel keeps its own frame. */
#panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet {
width: min(1060px, calc(100vw - 28px)) !important;
max-width: min(1060px, calc(100vw - 28px)) !important;
}
/* ==================== 炼金秘语 ==================== */
.alchemy-sheet {
--alchemy-text: #1b2130;
--alchemy-muted: #5c6678;
--alchemy-surface: rgba(255, 255, 255, 0.92);
--alchemy-surface-soft: rgba(246, 248, 253, 0.82);
--alchemy-line: rgba(0, 40, 255, 0.16);
--alchemy-accent: var(--accent);
width: min(1060px, calc(100vw - 28px));
max-width: min(1060px, calc(100vw - 28px));
height: min(86vh, 820px);
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid rgba(0, 40, 255, 0.16);
background: var(--alchemy-surface-soft);
color: var(--alchemy-text);
}
.sidebar-panel .alchemy-sheet {
width: min(1060px, calc(100vw - 28px));
max-width: min(1060px, calc(100vw - 28px));
}
[data-theme="roots"] .alchemy-sheet {
--alchemy-text: #f4ead2;
--alchemy-muted: #d3c5a8;
--alchemy-surface: rgba(61, 32, 34, 0.94);
--alchemy-surface-soft: rgba(42, 18, 21, 0.92);
--alchemy-line: rgba(196, 92, 92, 0.36);
--alchemy-accent: #d9896e;
}
[data-theme="midnight"] .alchemy-sheet {
--alchemy-text: #edf3f8;
--alchemy-muted: #b9cad6;
--alchemy-surface: rgba(25, 34, 48, 0.95);
--alchemy-surface-soft: rgba(12, 18, 27, 0.9);
--alchemy-line: rgba(146, 180, 196, 0.3);
--alchemy-accent: #9fc6d8;
}
#panel-alchemy-secrets.sidebar-panel.active {
align-items: center;
}
.alchemy-header {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
}
.alchemy-back {
width: 38px;
height: 38px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
display: grid;
place-items: center;
cursor: pointer;
}
.alchemy-back .icon {
width: 18px;
height: 18px;
}
.alchemy-kicker {
font-size: 0.72rem;
color: var(--alchemy-accent);
letter-spacing: 0;
font-weight: 700;
}
.alchemy-header h3,
.alchemy-editor-head h3 {
margin: 2px 0 0;
color: var(--alchemy-text);
font-size: 1.18rem;
}
.alchemy-main-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 20px;
background: var(--alchemy-surface);
border-bottom: 1px solid var(--alchemy-line);
}
.alchemy-main-tabs button {
height: 38px;
border: 1px solid var(--alchemy-line);
background: transparent;
color: var(--alchemy-muted);
cursor: pointer;
font-weight: 700;
}
.alchemy-main-tabs button.active {
color: #fff;
background: var(--alchemy-accent);
border-color: var(--alchemy-accent);
box-shadow: 0 8px 20px rgba(0, 40, 255, 0.12);
}
.alchemy-new-btn {
width: auto;
min-width: 82px;
padding: 9px 16px;
}
.alchemy-sheet .btn,
.alchemy-sheet .btn-sec,
.alchemy-sheet .alchemy-new-btn,
.alchemy-sheet .alchemy-small-btn,
.alchemy-sheet .alchemy-remove-entry {
width: auto !important;
min-width: 86px;
height: 40px;
padding: 0 16px !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
}
.alchemy-sheet .alchemy-new-btn {
min-width: 92px;
}
.alchemy-sheet .alchemy-editor-actions .btn {
min-width: 92px;
}
.alchemy-sheet .btn {
background: var(--alchemy-accent) !important;
border-color: var(--alchemy-accent) !important;
color: #fff !important;
}
.alchemy-sheet .btn-sec {
background: transparent !important;
border-color: var(--alchemy-line) !important;
color: var(--alchemy-text) !important;
}
.alchemy-sheet .btn-sec.danger,
.alchemy-sheet .alchemy-remove-entry {
color: #c62828 !important;
}
.alchemy-sheet .alchemy-remove-entry {
margin-top: 10px !important;
}
.alchemy-sheet #alchemy-entry-list + .btn {
width: 100% !important;
height: 42px;
margin-top: 4px !important;
}
.alchemy-layout {
height: calc(100% - 136px);
display: grid;
grid-template-columns: 320px 1fr;
background: var(--alchemy-surface-soft);
}
.alchemy-list-panel {
border-right: 1px solid var(--alchemy-line);
padding: 16px;
overflow-y: auto;
}
.alchemy-secret-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.alchemy-secret-card {
text-align: left;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
padding: 13px 14px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(12, 28, 90, 0.05);
}
.alchemy-secret-card.active {
border-color: var(--alchemy-accent);
box-shadow: 0 10px 26px rgba(0, 40, 255, 0.12);
}
.alchemy-secret-card-top,
.alchemy-entry-top,
.alchemy-editor-head,
.alchemy-toggle-row {
display: flex;
align-items: center;
gap: 10px;
}
.alchemy-secret-card-top {
justify-content: space-between;
}
.alchemy-card-desc,
.alchemy-card-meta {
display: block;
margin-top: 7px;
font-size: 0.78rem;
color: var(--alchemy-muted);
line-height: 1.4;
}
.alchemy-picker-card {
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
padding: 12px;
box-shadow: 0 10px 24px rgba(12, 28, 90, 0.05);
}
.alchemy-picker-compact {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.alchemy-picker-compact .alchemy-picker-field {
display: block;
margin: 0;
}
.alchemy-picker-compact .alchemy-picker-field > span {
display: none;
}
.alchemy-picker-compact .alchemy-picker-field select {
height: 38px;
}
.alchemy-picker-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
color: var(--alchemy-muted);
font-size: 0.78rem;
}
.alchemy-picker-card p {
margin: 10px 0 0;
color: var(--alchemy-muted);
font-size: 0.82rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.alchemy-picker-actions {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
.alchemy-icon-btn {
width: 38px;
height: 38px;
min-width: 38px;
padding: 0;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
display: inline-grid;
place-items: center;
cursor: pointer;
box-sizing: border-box;
}
.alchemy-icon-btn .icon {
width: 17px;
height: 17px;
}
.alchemy-icon-btn.active {
background: var(--alchemy-accent);
border-color: var(--alchemy-accent);
color: #fff;
}
.alchemy-icon-btn.danger {
color: #c62828;
}
.alchemy-icon-btn:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.alchemy-pill {
border: 1px solid var(--alchemy-line);
color: var(--alchemy-muted);
background: var(--alchemy-surface);
font-size: 0.68rem;
padding: 2px 8px;
}
.alchemy-pill.on {
color: var(--alchemy-accent);
border-color: var(--alchemy-accent);
background: rgba(0, 40, 255, 0.07);
}
.alchemy-detail-panel {
overflow-y: auto;
padding: 20px;
}
.alchemy-editor-head {
justify-content: space-between;
margin-bottom: 18px;
}
.alchemy-editor-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.alchemy-small-btn {
width: auto;
min-width: 68px;
padding: 8px 12px;
margin: 0;
}
.alchemy-small-btn.danger {
color: #c62828;
border-color: rgba(198, 40, 40, 0.28);
}
.alchemy-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px;
gap: 12px;
}
.alchemy-field {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 13px;
font-size: 0.86rem;
font-weight: 700;
color: var(--alchemy-text);
}
.alchemy-field input,
.alchemy-field select,
.alchemy-entry input[type="text"],
.alchemy-entry textarea {
width: 100%;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
padding: 10px 12px;
font: inherit;
outline: none;
box-sizing: border-box;
}
.alchemy-field input:focus,
.alchemy-field select:focus,
.alchemy-entry input[type="text"]:focus,
.alchemy-entry textarea:focus {
border-color: var(--alchemy-accent);
box-shadow: 0 0 0 3px rgba(0, 40, 255, 0.09);
}
.alchemy-toggle-row {
flex-wrap: wrap;
margin: 4px 0 16px;
padding: 12px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
}
.alchemy-toggle-row label,
.alchemy-entry-top label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--alchemy-text);
}
.alchemy-toggle-row input,
.alchemy-entry-top input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.alchemy-entry {
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
padding: 13px;
margin-bottom: 12px;
box-shadow: 0 8px 18px rgba(12, 28, 90, 0.04);
}
.alchemy-entry-top {
margin-bottom: 10px;
}
.alchemy-entry:not(.expanded) .alchemy-entry-body {
display: none;
}
.alchemy-entry-top .alchemy-entry-name {
flex: 1;
min-width: 0;
width: auto !important;
font-weight: 700;
}
.alchemy-entry-expand {
width: 54px;
height: 32px;
border: 1px solid var(--alchemy-line);
background: transparent;
color: var(--alchemy-accent);
cursor: pointer;
font-weight: 700;
flex: 0 0 auto;
}
.alchemy-mini-switch {
flex: 0 0 auto;
}
.alchemy-entry-title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
color: var(--alchemy-text);
margin: 4px 0 10px;
}
.alchemy-entry-title-row span {
color: var(--alchemy-muted);
font-size: 0.78rem;
}
.alchemy-entry textarea {
resize: vertical;
min-height: 150px;
line-height: 1.55;
font-family: "JetBrains Mono", "Noto Serif SC", monospace;
font-size: 0.82rem;
}
.alchemy-remove-entry {
width: auto;
margin-top: 10px;
padding: 7px 12px;
color: #c62828;
border-color: rgba(198, 40, 40, 0.22);
}
.alchemy-readonly-note,
.alchemy-empty {
color: var(--alchemy-muted);
font-size: 0.86rem;
}
.alchemy-empty {
padding: 30px 12px;
text-align: center;
}
.alchemy-regex-note {
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-muted);
font-size: 0.82rem;
line-height: 1.5;
}
.alchemy-regex-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.alchemy-regex-test {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: 10px;
margin-top: 4px;
}
.alchemy-regex-test textarea {
width: 100%;
min-height: 72px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
padding: 10px 12px;
font: inherit;
box-sizing: border-box;
}
.alchemy-selector-modal {
z-index: 12000;
align-items: flex-end;
}
.alchemy-selector-sheet {
--alchemy-text: #1b2130;
--alchemy-muted: #5c6678;
--alchemy-surface: rgba(255, 255, 255, 0.94);
--alchemy-surface-soft: rgba(246, 248, 253, 0.86);
--alchemy-line: rgba(0, 40, 255, 0.16);
--alchemy-accent: var(--accent);
width: min(560px, 100vw);
max-width: min(560px, 100vw);
max-height: 76vh;
padding: 0;
overflow: hidden;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface-soft);
color: var(--alchemy-text);
}
[data-theme="roots"] .alchemy-selector-sheet {
--alchemy-text: #f4ead2;
--alchemy-muted: #d3c5a8;
--alchemy-surface: rgba(61, 32, 34, 0.96);
--alchemy-surface-soft: rgba(42, 18, 21, 0.94);
--alchemy-line: rgba(196, 92, 92, 0.36);
--alchemy-accent: #d9896e;
}
[data-theme="midnight"] .alchemy-selector-sheet {
--alchemy-text: #edf3f8;
--alchemy-muted: #b9cad6;
--alchemy-surface: rgba(25, 34, 48, 0.96);
--alchemy-surface-soft: rgba(12, 18, 27, 0.92);
--alchemy-line: rgba(146, 180, 196, 0.3);
--alchemy-accent: #9fc6d8;
}
.alchemy-selector-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 18px 14px;
border-bottom: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
}
.alchemy-selector-title {
min-width: 0;
}
.alchemy-selector-head h3 {
margin: 0;
color: var(--alchemy-text);
font-size: 1.08rem;
line-height: 1.2;
}
.alchemy-selector-title span {
display: block;
margin-top: 5px;
color: var(--alchemy-muted);
font-size: 0.76rem;
line-height: 1.2;
}
.alchemy-selector-close {
width: 40px;
height: 40px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
display: grid;
place-items: center;
cursor: pointer;
}
.alchemy-selector-close .icon {
width: 18px;
height: 18px;
}
.alchemy-selector-kind-tabs,
.alchemy-selector-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: var(--alchemy-surface-soft);
}
.alchemy-selector-kind-tabs {
padding: 12px 12px 6px;
}
.alchemy-selector-tabs {
padding: 6px 12px 12px;
}
.alchemy-selector-kind-tabs button,
.alchemy-selector-tabs button {
height: 40px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
color: var(--alchemy-text);
font-weight: 700;
cursor: pointer;
}
.alchemy-selector-kind-tabs button.active,
.alchemy-selector-tabs button.active {
border-color: var(--alchemy-accent);
color: var(--alchemy-accent);
box-shadow: 0 0 0 3px rgba(0, 40, 255, 0.08);
}
.alchemy-selector-list {
padding: 12px;
overflow-y: auto;
max-height: calc(76vh - 178px);
background: var(--alchemy-surface-soft);
}
.alchemy-selector-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 13px 14px;
margin-bottom: 10px;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
box-shadow: 0 8px 18px rgba(12, 28, 90, 0.05);
}
.alchemy-selector-item > span {
min-width: 0;
}
.alchemy-selector-item strong {
display: block;
margin-bottom: 5px;
overflow-wrap: anywhere;
}
.alchemy-selector-item span {
display: block;
color: var(--alchemy-muted);
font-size: 0.78rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.alchemy-selector-switch {
width: 44px;
height: 24px;
appearance: none;
border: 1px solid var(--alchemy-line);
background: var(--alchemy-surface);
position: relative;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.alchemy-selector-switch::after {
content: '';
width: 18px;
height: 18px;
position: absolute;
left: 2px;
top: 2px;
background: var(--alchemy-muted);
transition: transform 0.16s ease, background 0.16s ease;
}
.alchemy-selector-switch:checked {
background: var(--alchemy-accent);
border-color: var(--alchemy-accent);
}
.alchemy-selector-switch:checked::after {
transform: translateX(20px);
background: #fff;
}
.alchemy-selector-empty {
padding: 34px 12px;
text-align: center;
color: var(--alchemy-muted);
}
@media (max-width: 760px) {
.alchemy-sheet {
width: 100vw;
max-width: 100vw;
height: 100dvh;
border-radius: 0;
}
#panel-alchemy-secrets.sidebar-panel.active {
align-items: flex-start;
}
.alchemy-header {
grid-template-columns: 40px 1fr auto;
padding: 14px 12px;
}
.alchemy-main-tabs {
padding: 8px 12px;
}
.alchemy-layout {
height: calc(100% - 123px);
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.alchemy-list-panel {
border-right: 0;
border-bottom: 1px solid var(--alchemy-line);
padding: 12px;
overflow: visible;
}
.alchemy-secret-list {
flex-direction: column;
min-width: 0;
}
.alchemy-picker-compact {
grid-template-columns: minmax(0, 1fr) auto;
}
.alchemy-picker-actions {
justify-content: flex-end;
}
.alchemy-detail-panel {
padding: 14px 12px 28px;
}
.alchemy-editor-head {
align-items: flex-start;
gap: 12px;
}
.alchemy-form-grid {
grid-template-columns: 1fr;
}
.alchemy-editor-head {
flex-direction: column;
}
.alchemy-editor-actions {
width: 100%;
justify-content: flex-start;
}
.alchemy-regex-grid,
.alchemy-regex-test {
grid-template-columns: 1fr;
}
.alchemy-entry-top .alchemy-entry-name {
min-width: 0;
}
.alchemy-selector-sheet {
width: 100vw;
max-width: 100vw;
max-height: 82vh;
}
.alchemy-selector-list {
max-height: calc(82vh - 178px);
}
#panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet {
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
[data-theme="roots"] #panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet,
[data-theme="midnight"] #panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet {
background: var(--alchemy-surface-soft) !important;
color: var(--alchemy-text) !important;
}
}
/* ============================================================
chart_render 卡片 (聊天内即时可视化 · MVP)
============================================================ */
.sc-chart {
max-width: 360px;
}
.sc-chart-canvas-wrap {
position: relative;
width: 100%;
height: 220px;
padding: 10px 12px 4px;
box-sizing: border-box;
}
.sc-chart-canvas-wrap canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
.sc-chart-note {
padding: 4px 12px 8px;
font-size: 0.72rem;
line-height: 1.4;
color: var(--text-secondary, rgba(0, 0, 0, 0.6));
opacity: 0.85;
border-top: 1px dashed rgba(10, 34, 245, 0.1);
}
.sc-chart-error {
padding: 14px 12px;
font-size: 0.78rem;
color: #c62828;
background: rgba(198, 40, 40, 0.05);
text-align: center;
}
.sc-chart-invalid {
border-color: #c62828;
}
.sc-chart .sc-link-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 12px 8px;
}
.sc-chart .sc-link-actions button {
flex: 1 1 auto;
min-width: 60px;
font-size: 0.72rem;
}
[data-theme="qirituan"] .sc-chart-note {
color: rgba(230, 216, 178, 0.78);
opacity: 1;
border-top-color: rgba(213, 177, 94, 0.2);
}
[data-theme="qirituan"] .sc-footer {
color: rgba(230, 216, 178, 0.52);
opacity: 1;
border-top-color: rgba(213, 177, 94, 0.16);
}
/* ============================================================
bingo_snapshot 卡片增强（动作栏 + 放大弹窗）
============================================================ */
.sc-bingo .sc-link-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 12px 8px;
}
.sc-bingo .sc-link-actions button {
flex: 1 1 auto;
min-width: 56px;
font-size: 0.7rem;
}
.sc-bingo-zoom-panel {
background: var(--card-bg, #fff);
border: 1px solid var(--accent, #0a22f5);
border-radius: 8px;
padding: 24px;
max-width: min(820px, 95vw);
max-height: 92vh;
width: 100%;
overflow-y: auto;
box-shadow: 6px 6px 0 rgba(10, 34, 245, 0.12);
color: var(--text);
font-family: 'Space Grotesk', 'JetBrains Mono', sans-serif;
}
.sc-bingo-zoom-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.sc-bingo-zoom-title {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text);
}
.sc-bingo-zoom-meta {
font-size: 0.78rem;
color: var(--text-secondary, rgba(0, 0, 0, 0.55));
margin-top: 4px;
}
.sc-bingo-zoom-close {
background: transparent;
border: 1px solid var(--accent, #0a22f5);
color: var(--text);
padding: 4px 14px;
font-size: 0.78rem;
cursor: pointer;
font-family: inherit;
flex-shrink: 0;
}
.sc-bingo-zoom-progress {
height: 8px;
background: rgba(10, 34, 245, 0.1);
margin-bottom: 18px;
overflow: hidden;
}
.sc-bingo-zoom-progress > div {
height: 100%;
background: var(--accent, #0a22f5);
transition: width 0.3s;
}
.sc-bingo-zoom-grid {
display: grid;
gap: 8px;
}
.sc-bingo-zoom-cell {
border: 1px solid rgba(10, 34, 245, 0.25);
padding: 12px 10px;
min-height: 80px;
font-size: 0.85rem;
line-height: 1.45;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
.sc-bingo-zoom-cell.sc-cell-done {
background: rgba(10, 34, 245, 0.12);
color: var(--accent, #0a22f5);
font-weight: 700;
text-decoration: line-through;
}
.sc-bingo-zoom-journal {
margin-top: 18px;
padding: 14px;
border-top: 1px dashed rgba(10, 34, 245, 0.2);
font-size: 0.85rem;
line-height: 1.6;
color: var(--text);
white-space: pre-wrap;
}
/* ========== 演绎图谱卡片（compare_table / concept_card / socratic_card） ========== */
.sc-ded {
background: var(--card-bg);
border-radius: 12px;
padding: 12px 14px;
margin: 8px 0;
box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.04));
border: 1px solid rgba(var(--accent-rgb), 0.15);
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/* 炼金秘语 · playhtml：主文档只承载壳和工具条，活内容在 opaque-origin iframe。 */
.sc-playhtml {
width: min(100%, 760px);
overflow: hidden;
padding: 0;
border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
border-radius: 14px;
background: var(--card-bg);
color: var(--text);
}
.sc-playhtml-head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 9px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.sc-playhtml-head > div {
display: flex;
min-width: 0;
align-items: baseline;
gap: 9px;
}
.sc-playhtml-head strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-playhtml-kicker {
flex: 0 0 auto;
color: var(--accent);
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.12em;
}
.sc-playhtml-frame {
display: block;
width: 100%;
height: 320px;
min-height: 220px;
border: 0;
background: #fff;
}
.sc-playhtml-actions-wrap {
border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.sc-playhtml-actions-hint {
display: none;
}
.sc-playhtml-actions {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 8px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.sc-playhtml-actions button {
flex: 0 0 auto;
min-height: 36px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.76rem;
cursor: pointer;
touch-action: manipulation;
}
.sc-playhtml-actions button:hover {
border-color: var(--accent);
color: var(--accent);
}
.sc-playhtml:fullscreen,
.sc-playhtml.sc-playhtml-fullscreen-fallback {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
max-width: none;
border-radius: 0;
background: var(--card-bg);
}
.sc-playhtml.sc-playhtml-fullscreen-fallback {
position: fixed;
inset: 0;
z-index: 10050;
height: 100dvh;
}
.sc-playhtml:fullscreen .sc-playhtml-frame,
.sc-playhtml.sc-playhtml-fullscreen-fallback .sc-playhtml-frame {
flex: 1 1 auto;
height: auto !important;
min-height: 0;
max-height: none;
}
.alchemy-selector-group {
display: contents;
}
.alchemy-selector-subitem {
margin-left: 18px;
border-left: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
}
@media (max-width: 540px) {
.sc-playhtml-head {
min-height: 44px;
padding-inline: 10px;
}
.sc-playhtml-actions button {
min-width: 44px;
min-height: 44px;
}
.sc-playhtml-actions-hint {
display: block;
padding: 7px 10px 0;
color: color-mix(in srgb, var(--text) 62%, transparent);
font-size: 0.72rem;
text-align: right;
}
}
.sc-ded .sc-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sc-ded .sc-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
color: var(--accent);
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.sc-ded .sc-title {
font-weight: 600;
}
.sc-ded-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.sc-ded-note {
margin-top: 10px;
font-size: 0.78rem;
color: var(--text);
opacity: 0.6;
font-style: italic;
line-height: 1.55;
}
.sc-ded-error .sc-body {
color: #c62828;
font-size: 0.85rem;
padding: 8px 0;
}
.sc-ded .sc-link-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(var(--accent-rgb), 0.15);
}
.sc-ded .sc-link-actions button {
font-size: 0.72rem;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(var(--accent-rgb), 0.3);
background: transparent;
color: var(--accent);
cursor: pointer;
}
.sc-ded .sc-link-actions button:hover {
background: rgba(var(--accent-rgb), 0.08);
}
/* compare_table */
.sc-ded-table-wrap {
overflow-x: auto;
border-radius: 8px;
border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.sc-ded-tbl {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
color: var(--text);
}
.sc-ded-tbl thead th {
background: rgba(var(--accent-rgb), 0.08);
color: var(--text);
font-weight: 600;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.sc-ded-tbl tbody td {
padding: 8px 10px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
vertical-align: top;
line-height: 1.5;
}
.sc-ded-tbl tbody tr:last-child td {
border-bottom: none;
}
.sc-ded-tbl tbody tr:nth-child(even) td {
background: rgba(var(--accent-rgb), 0.03);
}
.sc-ded-col-head {
font-weight: 600;
color: var(--accent);
}
/* concept_card · flow */
.sc-ded-flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 0;
}
.sc-ded-node {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.3);
color: var(--text);
padding: 8px 14px;
border-radius: 8px;
font-size: 0.82rem;
max-width: 80%;
text-align: center;
line-height: 1.4;
}
.sc-ded-arrow {
color: var(--accent);
font-size: 0.95rem;
line-height: 1;
opacity: 0.6;
}
.sc-ded-edges {
margin: 10px 0 0;
padding: 0 0 0 18px;
font-size: 0.72rem;
color: var(--text);
opacity: 0.7;
line-height: 1.6;
}
/* concept_card · axes */
.sc-ded-axes {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
gap: 4px;
padding: 10px 0 4px;
}
.sc-ded-axes-y {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.72rem;
color: var(--accent);
align-self: center;
padding-right: 4px;
}
.sc-ded-axes-plot {
position: relative;
height: 200px;
background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0.03) 20px, transparent 20px, transparent 40px);
border-left: 1.5px solid rgba(var(--accent-rgb), 0.5);
border-bottom: 1.5px solid rgba(var(--accent-rgb), 0.5);
}
.sc-ded-axes-dot {
position: absolute;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: var(--accent);
border-radius: 50%;
}
.sc-ded-axes-dot span {
position: absolute;
left: 14px;
top: -6px;
font-size: 0.68rem;
color: var(--text);
white-space: nowrap;
}
.sc-ded-axes-x {
grid-column: 2;
text-align: right;
font-size: 0.72rem;
color: var(--accent);
padding-top: 4px;
}
/* concept_card · compare */
.sc-ded-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: stretch;
}
.sc-ded-compare-side {
padding: 10px 12px;
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.05);
border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.sc-ded-compare-side:last-child {
background: rgba(var(--accent-rgb), 0.09);
}
.sc-ded-compare-head {
font-weight: 600;
color: var(--accent);
margin-bottom: 6px;
font-size: 0.85rem;
}
.sc-ded-compare-side ul {
margin: 0;
padding: 0 0 0 18px;
font-size: 0.78rem;
line-height: 1.6;
color: var(--text);
}
.sc-ded-compare-vs {
align-self: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
opacity: 0.6;
}
/* socratic_card */
.sc-ded-socratic-q {
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
padding: 10px 12px;
border-left: 3px solid var(--accent);
background: rgba(var(--accent-rgb), 0.05);
border-radius: 4px;
line-height: 1.6;
}
.sc-ded-hints {
margin: 10px 0 0;
padding: 0 0 0 18px;
font-size: 0.78rem;
color: var(--text);
opacity: 0.7;
line-height: 1.7;
}
.sc-ded-socratic-answer {
margin-top: 12px;
padding: 10px;
border: 1px dashed rgba(var(--accent-rgb), 0.4);
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.03);
}
.sc-ded-ans-input {
width: 100%;
box-sizing: border-box;
background: var(--bg);
border: 1px solid rgba(var(--accent-rgb), 0.2);
border-radius: 6px;
padding: 8px;
font-size: 0.82rem;
color: var(--text);
resize: vertical;
font-family: inherit;
}
.sc-ded-ans-actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.sc-ded-ans-actions button {
font-size: 0.78rem;
padding: 5px 14px;
border-radius: 6px;
background: var(--accent);
color: var(--bg);
border: none;
cursor: pointer;
}
.sc-ded-ans-done {
font-size: 0.8rem;
color: var(--accent);
font-style: italic;
padding: 4px 2px;
}
.sc-ded-socratic-answer-card {
max-width: min(100%, 560px);
}
.sc-ded-answer-label {
margin: 12px 0 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
color: var(--accent);
opacity: 0.82;
}
.sc-ded-answer-question {
font-size: 0.82rem;
opacity: 0.82;
}
.sc-ded-answer-body {
padding: 12px 14px;
border: 1px solid rgba(var(--accent-rgb), 0.25);
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.04);
color: var(--text);
font-size: 0.92rem;
line-height: 1.75;
white-space: normal;
overflow-wrap: anywhere;
}
/* 放大弹窗（演绎图谱专用，独立于 chart zoom） */
.sc-ded-zoom-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 4vh 4vw;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.sc-ded-zoom-inner {
position: relative;
width: 100%;
max-width: 960px;
background: var(--bg);
border-radius: 12px;
padding: 44px 16px 18px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}
.sc-ded-zoom-close {
position: absolute;
right: 8px;
top: 6px;
width: 36px;
height: 36px;
font-size: 1.3rem;
line-height: 1;
background: transparent;
color: var(--text);
border: none;
cursor: pointer;
z-index: 2;
}
.sc-ded-zoom-body {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sc-ded-zoom-body .sc-ded {
margin: 0;
max-width: 100%;
}
/* ========== 聊天输入框：自适应增高 + 右上角展开全屏按钮 ========== */
.chat-input-wrap {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: stretch;
}
.chat-input-wrap > textarea {
flex: 1;
width: 100%;
min-height: 40px;
max-height: 140px; /* 约 4-5 行，超出就框内滚动 */
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
resize: none;
line-height: 1.5;
padding-right: 32px !important; /* 给展开按钮留位（10-05 去掉了 ↵ 换行键，换行用长按发送键） */
box-sizing: border-box;
}
.chat-input-wrap > textarea::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.chat-input-wrap > textarea::-webkit-resizer {
display: none;
}
/* 用 .input-row 作为前缀提升特异度，硬压过 .input-row button { display:flex !important; }
这类通用按钮规则——根因见 codex review：单类 `.chat-input-expand-btn !important`
特异度 (0,1,0) 被 `.input-row button !important` 的 (0,1,1) 盖掉了。 */
.input-row .chat-input-expand-btn {
position: absolute !important;
top: 4px !important;
right: 8px !important;
width: 20px !important;
height: 20px !important;
min-width: 0 !important;
padding: 0 !important;
display: none !important; /* 平时隐藏；长文本时由 JS 切 .visible 浮出 */
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
border: none !important;
background: rgba(var(--bg-rgb, 239, 242, 242), 0.85) !important;
backdrop-filter: blur(4px);
color: var(--accent) !important;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.2s, background 0.2s;
z-index: 2;
box-shadow: none !important;
flex: 0 0 auto !important;
}
.input-row .chat-input-expand-btn.visible {
display: flex !important;
animation: chat-input-expand-fade-in 0.18s ease-out;
}
.input-row .chat-input-expand-btn:hover {
opacity: 1;
background: rgba(var(--accent-rgb), 0.12) !important;
}
@keyframes chat-input-expand-fade-in {
from { opacity: 0; }
to { opacity: 0.45; }
}
/* 全屏输入 modal */
.fullscreen-input-modal {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--bg);
display: flex;
flex-direction: column;
}
.fullscreen-input-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
background: var(--card-bg);
}
.fullscreen-input-title {
font-size: 0.9rem;
color: var(--text);
font-weight: 500;
opacity: 0.75;
}
.fullscreen-input-close {
width: 36px;
height: 36px;
font-size: 1.4rem;
line-height: 1;
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
opacity: 0.7;
}
.fullscreen-input-close:hover {
opacity: 1;
}
.fullscreen-input-done {
padding: 6px 16px;
border-radius: 18px;
border: none;
background: var(--accent);
color: var(--bg);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
}
.fullscreen-input-textarea {
flex: 1;
width: 100%;
box-sizing: border-box;
padding: 16px 18px;
border: none;
outline: none;
background: var(--bg);
color: var(--text);
font-size: 1rem;
line-height: 1.65;
font-family: inherit;
resize: none;
-webkit-overflow-scrolling: touch;
}
/* 放大视图下表格尽量铺开但允许横滚 */
.sc-ded-zoom-body .sc-ded-tbl {
min-width: 560px;
}
@media (max-width: 640px) {
.sc-ded-zoom-overlay {
padding: 0;
}
.sc-ded-zoom-inner {
min-height: 100vh;
border-radius: 0;
padding: 44px 10px 24px;
}
.sc-ded-zoom-body .sc-ded-tbl {
min-width: 0;
}
}
/* =========================================
书架封面图片层（必须放在所有 .book-card-cover
主题规则之后；用 body 选择器把特异性提到 0,2,1
以稳压 [data-theme="construct"] / VESPER 等
带 !important 的渐变背景）。
========================================= */
body .book-card-cover.has-cover {
background-image: var(--book-cover-image, none) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
}
/* ─────────── mobile 性能优化 (yesterday + midnight) ───────────
backdrop-filter blur 在 mobile Safari/Chrome 是性能黑洞,叠多层会卡。
≤768px 关掉所有 backdrop-filter + fixed bg,提高 alpha 补偿视觉。
--------------------------------------------------------- */
@media (max-width: 768px) {
/*
mobile body 高度跟内容走(日历+任务列表 ~3000px)。background 在 body
自身上 → cover 按 3000px 高度算 → 横版图被纵向放大几倍后裁中央 →
看起来变形。侧边栏打开 body 加 no-scroll → height:100vh → 图按
viewport 算才正常。
修法:背景挪到 body::after,position:fixed inset:0 让背景固定 viewport
尺寸,跟 body 实际高度无关。
*/
[data-theme="yesterday"] body,
[data-theme="midnight"] body {
background-image: none !important;
background-color: var(--bg) !important;
background-attachment: scroll !important;
}
[data-theme="yesterday"] body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(244, 241, 235, 0.50), rgba(244, 241, 235, 0.50)),
url('UI设计/参考/yesterday-mobile-bg.jpg');
background-size: cover;
background-position: center;
pointer-events: none;
}
[data-theme="midnight"] body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(8, 12, 18, 0.55), rgba(8, 12, 18, 0.55)),
url('UI设计/参考/midnight-main-bg.jpg');
background-size: cover;
background-position: center;
pointer-events: none;
}
[data-theme="yesterday"] .status-bar,
[data-theme="yesterday"] .nav-bar,
[data-theme="yesterday"] [style*="background:var(--card-bg)"],
[data-theme="yesterday"] [style*="background: var(--card-bg)"],
[data-theme="yesterday"] .structured-card,
[data-theme="yesterday"] .shop-item,
[data-theme="yesterday"] .mini-card,
[data-theme="yesterday"] .sheet,
[data-theme="yesterday"] .ai-report-card,
[data-theme="yesterday"] .modal-content,
[data-theme="yesterday"] .preview-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(252, 250, 244, 0.68) !important;
}
/* yesterday/midnight 工具调用展开项白底修复 */
[data-theme="yesterday"] .tool-usage-item {
background: rgba(252, 250, 244, 0.72) !important;
border-color: rgba(74, 107, 122, 0.12) !important;
}
[data-theme="midnight"] .tool-usage-item {
background: rgba(22, 30, 42, 0.62) !important;
border-color: rgba(140, 165, 195, 0.12) !important;
color: var(--text) !important;
}
[data-theme="midnight"] .tool-usage-item-label,
[data-theme="midnight"] .tool-usage-item-detail,
[data-theme="midnight"] .tool-usage-item-meta {
color: var(--text) !important;
}
[data-theme="midnight"] .status-bar,
[data-theme="midnight"] .nav-bar,
[data-theme="midnight"] [style*="background:var(--card-bg)"],
[data-theme="midnight"] [style*="background: var(--card-bg)"],
[data-theme="midnight"] .structured-card,
[data-theme="midnight"] .shop-item,
[data-theme="midnight"] .mini-card,
[data-theme="midnight"] .sheet,
[data-theme="midnight"] .ai-report-card,
[data-theme="midnight"] .modal-content,
[data-theme="midnight"] .preview-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(22, 30, 42, 0.62) !important;
}
/* mobile 关掉卡片 hover 动效(mobile 没 hover,反而 :hover 触发后留 stuck 状态) */
[data-theme="yesterday"] [style*="background:var(--card-bg)"]:hover,
[data-theme="yesterday"] .structured-card:hover,
[data-theme="midnight"] [style*="background:var(--card-bg)"]:hover,
[data-theme="midnight"] .structured-card:hover {
transform: none !important;
}
}
/* ===== 主题对比度修复：工具调用 + 引用块 ===== */
/* --- 七日谈 (qirituan): 深色主题, --text 是浅色 #e8e2d5 --- */
/* 工具展开项白底 + 浅色字 → 看不见。改：深底 + 保持浅色字 */
[data-theme="qirituan"] .tool-usage-item {
background: rgba(21, 22, 26, 0.85) !important;
border-color: rgba(201, 169, 97, 0.18) !important;
}
[data-theme="qirituan"] .tool-usage-item-label {
color: var(--text) !important;
}
[data-theme="qirituan"] .tool-usage-item-detail,
[data-theme="qirituan"] .tool-usage-item-meta {
color: var(--highlight) !important;
opacity: 0.85 !important;
}
/* 七日谈: AI 气泡内引用块 — accent-rgb 低透明度在深底上近乎不可见 */
[data-theme="qirituan"] .quote-block {
background: rgba(201, 169, 97, 0.12) !important;
border-color: rgba(201, 169, 97, 0.25) !important;
}
[data-theme="qirituan"] .quote-block-content {
color: var(--text) !important;
opacity: 0.92 !important;
}
/* 七日谈: 用户气泡内引用块 — 金色底用户气泡内引用需更鲜明对比 */
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="user"] .quote-block {
background: rgba(0, 0, 0, 0.2) !important;
border-color: rgba(0, 0, 0, 0.3) !important;
border-left-color: rgba(232, 226, 213, 0.5) !important;
}
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="user"] .quote-block-header {
color: rgba(232, 226, 213, 0.8) !important;
}
[data-theme="qirituan"] .chat-message-bubble[data-msg-role="user"] .quote-block-content {
color: rgba(232, 226, 213, 0.95) !important;
}
/* --- 昨日诗稿 (yesterday): 亮色主题, --text 是深色 #2A2D33 --- */
/* 工具展开项：背景已修但文字没显式设深色 → 强制深色 */
[data-theme="yesterday"] .tool-usage-item {
background: rgba(252, 250, 244, 0.82) !important;
border-color: rgba(74, 107, 122, 0.14) !important;
}
[data-theme="yesterday"] .tool-usage-item-label {
color: #2A2D33 !important;
}
[data-theme="yesterday"] .tool-usage-item-detail,
[data-theme="yesterday"] .tool-usage-item-meta {
color: #4A6B7A !important;
opacity: 0.78 !important;
}
/* 昨日诗稿: 用户气泡内引用块 / 书籍摘录 — 用户气泡是奶白磨砂 (chat.css §8), 引用字必须走深墨
(10-14 塔拉真机: 原来写成白字, 摘录整块融进奶白底看不见) */
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .quote-block,
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .excerpt-block {
background: rgba(74, 107, 122, 0.07) !important;
border-color: rgba(74, 107, 122, 0.16) !important;
border-left-color: rgba(74, 107, 122, 0.45) !important;
}
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .quote-block-header,
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .excerpt-block-header {
color: #4A6B7A !important;
}
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .quote-block-content,
[data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] .excerpt-block-content {
color: #2A2D33 !important;
}
/* --- 夜读残篇 (midnight): 深色主题, --text 是浅色 #D8DEE5 --- */
/* 工具展开项白底 + 浅色字 → 看不见。改：深底 + 保持浅色字 */
[data-theme="midnight"] .tool-usage-item {
background: rgba(22, 30, 42, 0.82) !important;
border-color: rgba(110, 151, 172, 0.16) !important;
}
[data-theme="midnight"] .tool-usage-item-label {
color: var(--text) !important;
}
[data-theme="midnight"] .tool-usage-item-detail,
[data-theme="midnight"] .tool-usage-item-meta {
color: var(--highlight) !important;
opacity: 0.82 !important;
}
/* 夜读残篇: 引用块对比度增强 */
[data-theme="midnight"] .quote-block {
background: rgba(110, 151, 172, 0.12) !important;
border-color: rgba(110, 151, 172, 0.22) !important;
}
[data-theme="midnight"] .quote-block-content {
color: var(--text) !important;
opacity: 0.92 !important;
}
[data-theme="midnight"] .chat-message-bubble[data-msg-role="user"] .quote-block {
background: rgba(0, 0, 0, 0.22) !important;
border-color: rgba(0, 0, 0, 0.3) !important;
border-left-color: rgba(216, 222, 229, 0.45) !important;
}
[data-theme="midnight"] .chat-message-bubble[data-msg-role="user"] .quote-block-header {
color: rgba(216, 222, 229, 0.8) !important;
}
[data-theme="midnight"] .chat-message-bubble[data-msg-role="user"] .quote-block-content {
color: rgba(216, 222, 229, 0.95) !important;
}
/* --- 昨日诗稿 / 夜读残篇: 对话气泡衬线体 --- */
[data-theme="yesterday"] .chat-message-bubble,
[data-theme="yesterday"] .chat-message-bubble .markdown-content,
[data-theme="yesterday"] .chat-message-bubble .markdown-content p,
[data-theme="yesterday"] .chat-message-bubble .markdown-content li,
[data-theme="yesterday"] .chat-message-bubble .quote-block-content {
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
}
[data-theme="midnight"] .chat-message-bubble,
[data-theme="midnight"] .chat-message-bubble .markdown-content,
[data-theme="midnight"] .chat-message-bubble .markdown-content p,
[data-theme="midnight"] .chat-message-bubble .markdown-content li,
[data-theme="midnight"] .chat-message-bubble .quote-block-content {
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif !important;
}
/* ─────────── 外观phase 6/14: PWA 纯色平接顶栏（状态栏→顶栏无缝，去分割线） ───────────
方向=塔拉拍板「纯色平接」: 所有主题 .status-bar 压成不透明同色(=var(--bg)=theme-color)，
去掉毛玻璃 blur 与 border-bottom 硬线，让 Android 系统状态栏与 AZOTH 顶栏融成一整块。
只动顶栏，不动卡片磨砂（yesterday/midnight 的 .mini-card/.sheet 等保留磨砂质感）。
单块收口而非散改 6 处旧规则——可一处回滚，且靠 !important+源序末位统吃 base/construct。 */
.status-bar {
background: var(--bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* 特异性更高的图背景主题(磨砂顶栏)需主题前缀才能盖过——只去顶栏磨砂，卡片不动 */
[data-theme="yesterday"] .status-bar,
[data-theme="midnight"] .status-bar {
background: var(--bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* 七日谈本就透明融合，仅取消那条故意的古金细线，保留其符号底层透明 */
[data-theme="qirituan"] .status-bar {
border-bottom: none !important;
}
/* 聊天页顶栏(.chat-top-header)统一纯色平接:
- 纯色主题(墟构/雾/青柠…)内联 --card-bg 即纯色白净，无需额外处理；
- yesterday/midnight 顶栏会被 [style*="background:var(--card-bg)"] 磨砂选择器抓去做毛玻璃(浮在水墨图上=塔拉嫌"不自然")，
这里按元素 de-frost 回纯色 --card-bg，让聊天顶栏=状态栏(theme-color 也取 --card-bg)白上白无缝；卡片仍保留磨砂。 */
/* 🔴 2026-08-12 塔拉真机：上面这条 de-frost 一直没生效 —— 聊天顶栏仍是磨砂玻璃，
与安卓系统分界色差别很严重。病因是**特异性打平**：
[data-theme="yesterday"] [style*="background:var(--card-bg)"] = (0,2,0)
[data-theme="yesterday"] .chat-top-header = (0,2,0)
平局只能靠源码顺序赢，而这类地毯式选择器散在多处（258/353/376…），
任何一处排在后面就把它盖回去。⇒ 提到 id 级特异性 (1,4,0)，压死不再靠运气。
目标：顶栏 = 「信息管理」那行的实色（两者同取 var(--card-bg)），
与安卓系统分界色一致。选择器形状与 themes/fog.css 那条保持一致。 */
[data-theme="yesterday"] #character-chat-screen .chat-top-header,
[data-theme="midnight"] #character-chat-screen .chat-top-header,
[data-theme="yesterday"] .chat-top-header,
[data-theme="midnight"] .chat-top-header {
background: var(--card-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
}
/* 外观phase 6/14: 顶栏尺寸收回接近原始（塔拉两次嫌大）——头像/名字/padding 用内联原值，
只把三个 SVG 按钮统一到 22px（原来 back=24、另两个=20 不齐），兼顾点按目标。
scoped 非 chatgpt 模式不误伤其紧凑尺寸。 */
#character-chat-screen:not(.chat-ui-mode-chatgpt) .chat-top-header #chat-back-btn .icon,
#character-chat-screen:not(.chat-ui-mode-chatgpt) .chat-top-header #chat-session-btn .icon,
#character-chat-screen:not(.chat-ui-mode-chatgpt) .chat-top-header #chat-tools-toggle-btn .icon {
width: 22px !important;
height: 22px !important;
}
/* 退出/返回键不是 .tool-icon，原本没有任何反馈——这里补齐成与另两个 SVG 一致:
静止 0.6 / hover 变亮+上浮+accent 色 / 按压缩放。纯 CSS 不走 JS 线程，长会话卡顿时点击也即时响应。 */
.chat-top-header #chat-back-btn {
cursor: pointer;
opacity: 0.88;
transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.chat-top-header #chat-back-btn:hover {
opacity: 1;
transform: translateY(-2px);
color: var(--accent);
}
.chat-top-header #chat-back-btn:active {
transform: scale(0.85);
opacity: 1;
}
/* 外观phase 6/14: 三个顶栏图标加深(塔拉要更黑)——静止透明度 0.6→0.88，
让接近黑的 --text 显得更深；hover 仍到 1。session/tools 覆盖 .tool-icon 的 0.6。 */
.chat-top-header #chat-session-btn,
.chat-top-header #chat-tools-toggle-btn {
opacity: 0.88;
}
.chat-top-header #chat-session-btn:hover,
.chat-top-header #chat-tools-toggle-btn:hover {
opacity: 1;
}
/* 刀3c polish（塔拉 6-30）：文件卡片「打开」按钮——之前裸按钮丑。对标 .sc-link-actions 同款卡片动作样式（theme 变量、圆角、accent hover）。 */
.sc-file-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.sc-file-actions button {
padding: 4px 12px;
font-size: 0.72rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sc-file-actions button:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* 文件卡片状态徽章（已入库可读 / 正在索引…）——小号、淡色、不抢眼 */
.sc-file-status {
margin-left: auto;
font-size: 0.66rem;
opacity: 0.7;
white-space: nowrap;
}
/* 自动总结面板「立即总结一次 / 重算计数」按钮——之前 .btn-secondary 全站无定义=浏览器裸按钮丑。
按 ID 精准美化这两个（不动全局 .btn-secondary，零 blast radius），同款 theme 变量风格。 */
#character-detail-manual-summary-btn,
#character-detail-reset-summary-counter-btn {
padding: 6px 14px;
font-size: 0.78rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#character-detail-manual-summary-btn:hover,
#character-detail-reset-summary-counter-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ==================== 刀5a-3：「我的人设」阅读/编辑双模式 ==================== */
/* 阅读视图四节渲染 + 📎出处徽章 + 行内抽屉；全部走 theme 变量，亮暗皮通用。 */
.persona-field-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.persona-mode-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.persona-mode-btn {
border: none;
background: transparent;
padding: 3px 12px;
font-size: 0.78rem;
cursor: pointer;
color: var(--text);
opacity: 0.6;
transition: background 0.15s ease, opacity 0.15s ease;
}
.persona-mode-btn-active {
background: var(--accent);
color: #fff;
opacity: 1;
font-weight: 600;
}
.persona-reading-view {
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px 16px;
max-height: 44vh;
overflow-y: auto;
font-size: 0.86rem;
line-height: 1.7;
color: var(--text);
background: var(--bg);
}
.persona-read-section + .persona-read-section {
margin-top: 14px;
}
.persona-read-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
margin-bottom: 4px;
flex-wrap: wrap;
}
.persona-prov-badge {
border: none;
background: color-mix(in srgb, var(--text) 8%, transparent);
border-radius: 10px;
padding: 1px 9px;
font-size: 0.72rem;
cursor: pointer;
color: var(--text);
}
.persona-prov-badge:hover {
background: color-mix(in srgb, var(--text) 15%, transparent);
}
.persona-prov-stale-tag {
font-size: 0.7rem;
opacity: 0.55;
font-weight: 400;
}
.persona-read-body p {
margin: 0 0 6px;
}
.persona-read-body ul {
margin: 0 0 6px;
padding-left: 18px;
}
.persona-read-body-empty {
opacity: 0.45;
}
.persona-prov-drawer {
margin: 4px 0 2px;
padding: 6px 8px;
border-left: 2px solid var(--border);
display: flex;
flex-direction: column;
gap: 3px;
}
.persona-prov-row {
border: none;
background: transparent;
text-align: left;
padding: 2px 5px;
font-size: 0.75rem;
cursor: pointer;
color: var(--text);
opacity: 0.75;
word-break: break-all;
border-radius: 4px;
}
.persona-prov-row:hover {
background: color-mix(in srgb, var(--text) 8%, transparent);
opacity: 1;
}
.persona-read-footer {
margin-top: 12px;
padding-top: 8px;
border-top: 1px dashed var(--border);
font-size: 0.72rem;
opacity: 0.55;
}
.persona-read-empty {
opacity: 0.5;
font-size: 0.82rem;
}
/* ==================== v6 刀 A4-b：原生端视觉密度 + safe-area 补偿 ====================
MainActivity 用 WebView.setInitialScale(density × 100 × 0.75) 把整页缩到 0.75，
对齐塔拉长期使用的 PWA 密度（9-04 实测：标题 645 物理像素 vs 她 PWA 的 644，差 1px）。
🔴 但 env(safe-area-inset-top) **不会跟着缩放重算**：缩放后 1 CSS 像素 = 2.461 物理像素
（原本 3.281），而 env() 依旧报 39 ⇒ 只让出 96 物理像素，系统栏实际占 128
⇒ 顶部又被压。所以必须除以同一个缩放因子：
39 ÷ 0.75 = 52 CSS px × 2.461 = 128 物理像素，恰好盖住系统栏。
🔴 --azoth-native-scale 必须与 MainActivity.java 的 DENSITY_FACTOR **逐字相等**。
两处同码是真实险情（改一处忘另一处 = 顶部静默跑偏，且没有任何报错），
所以 smoke-android-build-config.js 的 B7 会把两个数字各自读出来对。
Web 端：--azoth-native-scale 保持 1，于是 --azoth-safe-top 逐字等于 env()，行为不变。 */
:root {
--azoth-native-scale: 1;
--azoth-safe-top: calc(env(safe-area-inset-top, 0px) / var(--azoth-native-scale));
}
.azoth-native {
--azoth-native-scale: 0.75;
/* 10-05「纸板感」：根滚动层不回弹，滚到边缘不再把整页连同 fixed 顶栏一起拉伸。
与 MainActivity 的 setOverScrollMode(OVER_SCROLL_NEVER) 成对；只在原生壳，PWA 不变。 */
overscroll-behavior: none;
/* 10-05 App 手感批 1：根层横向锁死（塔拉截图「整页左移露出会话侧栏」）。
用 clip 不用 hidden：hidden 会让 body 变成滚动容器、破坏 sticky；clip 只裁不滚。 */
overflow-x: clip;
}
.azoth-native body {
overscroll-behavior: none;
overflow-x: clip;
}
/* ==================== v6 刀 A4-a：原生端系统状态栏避让（全屏浮层） ====================
Android 15+ 强制 edge-to-edge，WebView 铺满整屏，页面不自己让位就被时间/信号/电量压住。
首页顶栏已在 .status-bar 处理；本块处理**全屏浮层**（9-04 真机 census 出来的三类）。
🔴 原则：内边距加在「背景应该延伸到状态栏底下」的那个元素上，**不是它的容器**。
加在容器上会露出「容器背景 / 顶栏背景」的接缝 —— 真机上就是一条灰带（9-04 实测，
塔拉一眼看出来）。所以聊天页加在 .chat-top-header 而不是 #character-chat-screen。
🔴 只在原生生效。.azoth-native 由 Android dist 的注入段加（mobile/scripts/build-web.js），
门 B 的 B3h/B3i 断言它真被加上。不靠「env() 在 Web 上等于 0」自然退化，因为
Web 端 PWA 的状态栏由浏览器自己让位，重复处理会双吃。
🔴 特异性是这块能不能生效的关键：style.css:4128 那条
@media(max-width:480px){ .sidebar-panel.active .sheet { padding:15px !important } }
是「3 个类 + !important」。下面必须更高，否则**静默失效**——
我先后用 2 个类和 max-height 试过两次，都被它压掉且零报错。
*/
/* 🔴 A 类面板有**两种布局态**，必须分开处理 —— 这是 A4-b 开了密度之后才暴露的：
密度 0.75 把布局视口从 384 撑到 512，**越过了 480px 断点**，
于是整套「移动端强制全屏」样式（style.css:4128）失配，面板改走平板布局：
align-items 从 flex-end 变成 flex-start（贴顶了）、sheet 不再是 100vh、
padding 回到基础值 30px（×2.461 = 74 物理像素 < 系统栏 128）⇒ 顶部被压。
塔拉在真机上先看到「账户中心顶部有一点点压住」，扫描里同一条是 余量 -54。
⚠️ 这个断点漂移**不是 bug**：她的 PWA 在 75% 缩放下同样是 512 视口、同样走平板布局，
那正是她一直在用并且喜欢的那套。所以方向不改，只是避让要按新布局态写。 */
/* 宽视口态（密度开启后的常态）：sheet 不再被钉成 100vh，
垫**容器**最稳 —— 无论各面板 sheet 自己的 padding 是 30px 还是 0，都能保证不压。 */
@media (min-width: 481px) {
.azoth-native .sidebar-panel.active {
padding-top: var(--azoth-safe-top);
box-sizing: border-box;
}
}
/* 窄视口态（密度关闭 / 更窄的设备）：sheet 被 style.css:4128 钉成 height:100vh 且
flex-end 对齐，垫容器会被它整个吃掉（实测过），只能垫 sheet 自身。 */
@media (max-width: 480px) {
/* A 类 · 15 个全屏面板：世界书 / 信息管理 / 任务中心 / 账户中心 / API 配置 /
MCP 管理 / 数据管理 / 云备份 / 通知 / 提案收件箱 / 触发器中心 / 炼金秘语 /
AI 设置 / AI 助手 / 账户个性化。它们共用 .sidebar-panel.modal 这一套。 */
.azoth-native .sidebar-panel.active .sheet {
padding-top: calc(15px + var(--azoth-safe-top)) !important;
}
/* 🔴 三个例外：它们各有一条 **ID 级 + !important** 的 padding 规则，
类选择器再多也压不过 ID。9-04 扫描实测出来的（padTop 停在 0 / 0 / 10）。
各自按**原有的** padding 补 inset —— 不能一律写 15，那会给本来是 0 的面板凭空加 15。 */
.azoth-native #panel-character-manager.sidebar-panel.active .sheet {
padding-top: var(--azoth-safe-top) !important; /* 原 padding: 0 */
}
.azoth-native #panel-alchemy-secrets.sidebar-panel.active .sheet {
padding-top: var(--azoth-safe-top) !important; /* 原 padding: 0 */
}
.azoth-native #panel-ai-assistant.sidebar-panel.active .sheet {
padding-top: calc(10px + var(--azoth-safe-top)) !important; /* 原 padding: 10px */
}
}
/* D 类 · 卡片「放大」全屏壳 .sc-ded-zoom-*（9-24 塔拉真机：阅读卡 / 渲染卡放大后顶部被压、× 够不着）
演绎表、概念卡、共读卡 / 阅读报告的放大都走这一只壳。密度 0.75 下布局视口 512px，
命中下面 max-width:640px 那套：遮罩 padding:0、内层只留 44px ⇒ 整块钻进状态栏底下。
垫在**遮罩**上（它的暗色背景本来就该铺到状态栏底下），内层高度扣掉同一段，底部让出手势条。 */
.azoth-native .sc-ded-zoom-overlay {
padding-top: calc(4vh + var(--azoth-safe-top));
}
@media (max-width: 640px) {
.azoth-native .sc-ded-zoom-overlay {
padding-top: var(--azoth-safe-top);
padding-bottom: calc(env(safe-area-inset-bottom, 0px) / var(--azoth-native-scale));
}
.azoth-native .sc-ded-zoom-inner {
min-height: calc(100dvh - var(--azoth-safe-top));
}
}
/* C 类 · 聊天页顶栏（行内 background:var(--card-bg); padding:15px）
🔴 `.azoth-native` 故意写两遍。这不是笔误，是提特异性：
聊天页各 UI 模式的主题文件用的是**结构选择器**，grep `chat-top-header` 搜不到 ——
chatgpt-theme.css #character-chat-screen.chat-ui-mode-chatgpt > div:first-child
{ padding: 12px 6px 12px 8px !important } (0,1,2,1)
claude-theme.css #character-chat-screen.chat-ui-mode-claude > div.chat-top-header
`:first-child` 是**伪类，按 class 计权**，所以那条是 (0,1,2,1)；
单写一次 .azoth-native 只有 (0,1,2,0)，少一个类型选择器就输，而且**静默输**
（9-04 用 CDP 的 CSS.getMatchedStylesForNode 才查出来，grep 和肉眼都找不到）。
写两遍 → (0,1,3,0)，稳压任何 (0,1,2,x)，且不必逐个 UI 模式枚举。
🔴 同时必须 !important：它的 padding 还有一份**行内样式**。 */
.azoth-native.azoth-native #character-chat-screen .chat-top-header {
padding-top: calc(15px + var(--azoth-safe-top)) !important;
}
/* C 类 · 任务编辑器 #modal-task-editor（10-04 塔拉真机：新建任务顶部被状态栏压住）。
它是 .modal 不是 .sidebar-panel，上面 A 类不覆盖；≤640px 时 sheet 钉成 100dvh 顶格（ui/tasks/tasks.css），
带背景的是 sticky 的 .task-editor-top（原 padding-top 16px）。construct 主题的 [SYS.OUT] 角标
绝对定位在 sheet 的 top:10px，同步下移。 */
@media (max-width: 640px) {
.azoth-native #modal-task-editor .task-editor-top {
padding-top: calc(16px + var(--azoth-safe-top));
}
.azoth-native #modal-task-editor .task-editor-sheet::before {
top: calc(10px + var(--azoth-safe-top));
}
}
/* 任务中心 #panel-task-center（10-04 塔拉真机：「全部」tab 底部「+ 新建任务」只露一条边）。
宽视口态（≥481px）垫的是容器 .sidebar-panel.active，但 ui/tasks/tasks.css 在 ≤640px 把 sheet 钉成
height:100dvh ⇒ sheet 整体被推下一个安全区高，sticky bottom 的新建按钮落到屏幕外（列表短时它跟着内容走，看不出来）。
这里扣掉同一段；底部手势条按 --azoth-native-scale 换算（与 --azoth-safe-top 同口径）。 */
@media (min-width: 481px) and (max-width: 640px) {
.azoth-native #panel-task-center.sidebar-panel.active .sheet.task-center-shell {
height: calc(100dvh - var(--azoth-safe-top)) !important;
max-height: calc(100dvh - var(--azoth-safe-top)) !important;
}
}
.azoth-native #panel-task-center .task-create-dock {
padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) / var(--azoth-native-scale)));
}
/* C 类 · 侧栏抽屉的头部（CSS padding:20px; background:var(--accent)）。
加在 #sidebar 上会让 --card-bg 与 --accent 之间出现接缝，所以加在 header 上。 */
.azoth-native #sidebar .sidebar-header {
padding-top: calc(20px + var(--azoth-safe-top));
}
/* C 类 · 拓扑内室 #modal-character-detail：sheet 是行内 padding:0，
真正带背景的是里面的 .header（行内 background:var(--card-bg); padding:15px）。
样式表的 !important 压得过**没有** !important 的行内样式。 */
.azoth-native #modal-character-detail > .sheet > .header {
padding-top: calc(15px + var(--azoth-safe-top)) !important;
}
/* C 类 · 会话侧栏（右侧抽屉，关闭时收在屏幕外） */
.azoth-native #character-session-sidebar .character-session-sidebar-header {
padding-top: calc(15px + var(--azoth-safe-top));
}
/* ── D 类 · 第一次 census 整类漏掉的全屏面（塔拉报「记忆索引也被压住」才发现）──
🔴 漏因：我按 class 名 grep（`class="...modal|sidebar-panel..."`），
而这一类既不是 .modal 也不是 .sidebar-panel，有的甚至只有行内样式。
改用**无假设普查**才找全：遍历 body 的直接子元素，取 position:fixed/absolute 的，
逐个对照已覆盖清单 —— 一次查出 10 个漏网的。
**教训：census 不能按名字猜，要问 DOM 要全集。**
仍按同一原则：顶栏自带背景的就垫顶栏（无缝），否则垫容器（保证不压）。 */
/* 顶栏自带 --card-bg ⇒ 垫顶栏，让它的底色一直铺到屏幕最顶端 */
.azoth-native #page-memory-index .mi-header {
padding-top: calc(24px + var(--azoth-safe-top));
}
.azoth-native .cloud-auth-topbar {
padding-top: var(--azoth-safe-top);
/* 10-04：只垫 padding 会把 border-box 的 64px 挤成 64-安全区，返回键与标题被挤出顶栏（账户安全页 / 云端登录页） */
height: calc(64px + var(--azoth-safe-top));
}
/* ⚠️ 这里原本有一条「给 #library-screen / #music-screen / #reader-screen / #asset-center /
#asset-preview-overlay / #fullscreen-timer 垫容器」的规则，9-05 **刻意删掉了**。
原因：这些容器的背景是 --bg，而它们的顶栏是 --card-bg。垫容器会在屏幕顶端露出
一条 --bg —— 真机上就是**一条灰带**（塔拉先后在聊天页、图书馆书本详情两处看出来）。
正确做法是垫顶栏本身，让它的底色铺到屏幕最顶端。
但「哪个是顶栏」逐个手写既漏又容易和 shim 打架（书本详情 #bsf-detail-screen
就不在任何手写清单里，是 shim 兜住的）。所以这条判断整个下沉进
mobile/native/safe-area-shim.js 的 headerOrSelf()：
首个可见子元素若有不透明且与容器不同的背景、且是条状 ⇒ 垫它，否则垫容器。
单一裁决源，手写规则不再重复一遍。
⚠️ 9-05 补回：上面那段「全靠 shim」的想法**当场就退化了** —— 撤掉手写规则后
扫描里这 6 个面全变成「压住 -128」。所以手写规则加回来当**保底**，
shim 只负责它独有的、没人手写过的面（如书本详情 #bsf-detail-screen）。
两者不会双吃：shim 的 compensatedAlready() 看到容器已经垫够就跳过。 */
.azoth-native #library-screen,
.azoth-native #music-screen,
.azoth-native #reader-screen,
.azoth-native #asset-center,
.azoth-native #asset-preview-overlay,
.azoth-native #fullscreen-timer {
padding-top: var(--azoth-safe-top);
box-sizing: border-box;
}
/* ⚠️ #chat-info-search-panel 刻意不在上面：它的 .chat-info-search-topbar **本来就**
写了 `padding: calc(env(...) + 10px)`（已随本刀改走 --azoth-safe-top 变量）。
再垫容器就是双吃，顶部会多出一条 52px 的空白。 */
/* 刀 A4-a 运行时兜底：mobile/native/safe-area-shim.js 给「贴顶且占满整屏」的元素加这个 class。
为什么用 class 而不是行内样式：devtools 里一眼看得出谁是被 shim 管的、谁是被定点规则管的。
只在原生存在（shim 只进 Android dist）。*/
.azoth-safe-area-shim {
padding-top: var(--azoth-safe-top) !important;
box-sizing: border-box !important;
}
/* 刀 A4-a 补：阅读器顶栏。它是行内 `position:fixed; top:-60px`，整个脱离 #reader-screen，
所以容器 padding 管不到它（塔拉真机报「图书馆阅读器的顶部书名」被压）。
配套改动在 script.js 的 applyReaderToolbarVisibility()：隐藏偏移改用实测高度，
否则加了内边距后 -60px 藏不住、顶端会露一条残边。 */
.azoth-native #reader-top-bar {
padding-top: calc(15px + var(--azoth-safe-top)) !important;
}