:root{ --bg:#f4f6f8; --panel:#ffffff; --ink:#2b2f36; --muted:#7a828c; --line:#e3e7ec; --accent:#2f7fd6; --accent-d:#2668b8; --accent-soft:rgba(47,127,214,.14); --danger:#c0392b; --warn:#b07d12; --shadow-sm:0 1px 3px rgba(60,45,30,.07); --shadow-md:0 8px 24px rgba(60,45,30,.12); --topbar:linear-gradient(135deg,#ffffff,#eef2f6); --topbar-text:#2b2f36; --topbar-accent:#2f7fd6; } /* 派生变量必须声明在 body 上（而非 :root）：若写在 :root，其内部 var(--accent)/var(--panel) 会在根元素计算一次并固化继承，当 body.rt-* 覆盖主题色后，这些派生变量不会重新解析，导致左侧栏 / 中部输入框 / 设置弹窗等「不跟随颜色变化」。写在 body 上即可随 body 的主题变量实时重算，全页统一跟随。 */ body{ /* 危险/警告语义表面：保留语义色相，底色随主题面板自适应 */ --danger-soft:color-mix(in srgb, var(--danger) 12%, var(--panel)); --danger-line:color-mix(in srgb, var(--danger) 32%, var(--line)); --warn-soft:color-mix(in srgb, var(--warn) 12%, var(--panel)); --warn-line:color-mix(in srgb, var(--warn) 35%, var(--line)); /* 侧栏：底色随主题面板推导，浅色主题下为浅色轨道，深色主题下为深色轨道 */ --sidebar-1:color-mix(in srgb, var(--accent) 22%, var(--panel)); --sidebar-2:color-mix(in srgb, var(--accent) 12%, var(--panel)); --sidebar-text:var(--ink); --sidebar-muted:color-mix(in srgb, var(--ink) 60%, var(--muted)); --sidebar-scroll:color-mix(in srgb, var(--muted) 40%, transparent); --sidebar-scroll-strong:color-mix(in srgb, var(--muted) 60%, transparent); /* 派生表面/文字：基于核心变量自动适配任意主题（无需逐主题重写） */ --hover-bg:color-mix(in srgb, var(--accent) 9%, var(--panel)); --active-bg:color-mix(in srgb, var(--accent) 16%, var(--panel)); --surface-2:color-mix(in srgb, var(--accent) 10%, var(--panel)); --surface-3:color-mix(in srgb, var(--accent) 22%, var(--panel)); --tint:color-mix(in srgb, var(--accent) 12%, var(--panel)); --tint-2:color-mix(in srgb, var(--accent) 20%, var(--panel)); --line-accent:color-mix(in srgb, var(--accent) 30%, var(--line)); --ink-soft:color-mix(in srgb, var(--ink) 72%, var(--muted)); --ink-faint:color-mix(in srgb, var(--ink) 42%, var(--muted)); --rail-avatar-bg:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), color-mix(in srgb, var(--accent) 8%, var(--panel))); --scroll:color-mix(in srgb, var(--muted) 45%, var(--line)); --scroll-strong:color-mix(in srgb, var(--muted) 65%, var(--line)); --glow:color-mix(in srgb, var(--accent) 30%, transparent); --glow-strong:color-mix(in srgb, var(--accent) 40%, transparent); --header-grad:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), transparent); --tag-scene-bg:color-mix(in srgb, var(--accent) 8%, var(--panel)); --tag-char-bg:color-mix(in srgb, var(--accent) 14%, var(--panel)); --tag-era-bg:color-mix(in srgb, var(--accent) 20%, var(--panel)); --tag-era-fg:var(--accent); } /* 全局底色（绿/棕/黑/白）：覆盖本页核心变量，写作业面随主题变化。选择器同时命中 body 与 html：首屏早期主题脚本在内把 rt-* 挂到，自定义属性从继承到及所有子元素，从根本上消除白→配色闪跳（FOUC）。 */ body.rt-brown, html.rt-brown{ --bg:#efe2cb; --panel:#fbf4e6; --ink:#4a3826; --muted:#8a7355; --line:#e3d3b6; --accent:#b9893f; --accent-d:#9c6f33; --accent-soft:rgba(185,137,63,.16); --topbar:linear-gradient(135deg,#6b4f3a,#8a6a4a); --topbar-text:#f5ecdd; --topbar-accent:#f0c08a; } body.rt-green, html.rt-green{ --bg:#e3eddf; --panel:#f1f7ed; --ink:#2e4a2c; --muted:#5a7a55; --line:#cfe3c8; --accent:#4f9e5b; --accent-d:#3c8047; --accent-soft:rgba(79,158,91,.16); --topbar:linear-gradient(135deg,#3f7a4a,#5a9e6a); --topbar-text:#eef5ea; --topbar-accent:#d6f0c8; } body.rt-dark, html.rt-dark{ --bg:#16181d; --panel:#22252c; --ink:#d8d4cc; --muted:#9aa0ac; --line:#33384a; --accent:#7e6efc; --accent-d:#6a8ef0; --accent-soft:rgba(126,110,252,.18); --topbar:linear-gradient(135deg,#2a2d36,#3a3f4d); --topbar-text:#d8d4cc; --topbar-accent:#9aa0ff; } /* 白：干净通透，强调色用蓝 */ body.rt-white, html.rt-white{ --bg:#f4f6f8; --panel:#ffffff; --ink:#2b2f36; --muted:#7a828c; --line:#e3e7ec; --accent:#2f7fd6; --accent-d:#2668b8; --accent-soft:rgba(47,127,214,.14); --topbar:linear-gradient(135deg,#ffffff,#eef2f6); --topbar-text:#2b2f36; --topbar-accent:#2f7fd6; } * { margin:0; padding:0; box-sizing:border-box; } html,body{height:100%; font-family:'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;} .container{display:flex; flex-direction:column; height:100vh; background:var(--bg);} .topbar{height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:flex-start; padding:0 20px; background:var(--topbar); color:var(--topbar-text); box-shadow:0 2px 10px rgba(0,0,0,.18); z-index:6;} .topbar-title{font-size:17px; font-weight:700; letter-spacing:.4px;} .topbar-title span{color:var(--topbar-accent);} .topbar-nav{display:flex; gap:18px; align-items:center; margin-left:22px;} .topbar-nav a{color:var(--topbar-text); text-decoration:none; font-size:13px; opacity:.82; padding:4px 2px; transition:.15s; border-bottom:2px solid transparent;} .topbar-nav a:hover{opacity:1; color:var(--topbar-accent);} .topbar-nav a.active{opacity:1; color:var(--topbar-accent); border-bottom-color:var(--topbar-accent);} .topbar-actions{display:flex; gap:10px; align-items:center; margin-left:auto;} .topbar-actions button{background:color-mix(in srgb,var(--topbar-text) 12%,transparent); color:var(--topbar-text); border:1px solid color-mix(in srgb,var(--topbar-text) 20%,transparent); padding:7px 14px; border-radius:8px; cursor:pointer; font-size:13px; transition:.15s;} .topbar-actions button:hover{background:color-mix(in srgb,var(--topbar-text) 22%,transparent);} .topbar-actions .topbar-switch{background:color-mix(in srgb,var(--topbar-accent) 18%,transparent); border-color:color-mix(in srgb,var(--topbar-accent) 45%,transparent); color:var(--topbar-accent); font-weight:600;} .topbar-actions .topbar-switch:hover{background:color-mix(in srgb,var(--topbar-accent) 30%,transparent);} .topbar-actions .wb-user{font-size:13px; opacity:.9; margin-right:2px;} .topbar-icon{background:color-mix(in srgb,var(--topbar-text) 12%,transparent); color:var(--topbar-text); border:1px solid color-mix(in srgb,var(--topbar-text) 20%,transparent); width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition:.15s; margin-right:6px; flex:0 0 auto;} .topbar-icon:hover{background:color-mix(in srgb,var(--topbar-text) 22%,transparent);} .topbar-icon.active{background:color-mix(in srgb,var(--topbar-text) 30%,transparent); box-shadow:inset 0 0 0 1px var(--topbar-accent);} .workspace{display:flex; flex:1; min-height:0; overflow:hidden;} /* 栏宽拖拽条 */ .resizer{width:6px; flex:0 0 6px; cursor:col-resize; background:transparent; position:relative; z-index:5; transition:background .15s;} .resizer::after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:42px; background:var(--line); border-radius:3px; transition:.15s;} .resizer:hover, .resizer.dragging{background:var(--accent-soft);} .resizer:hover::after, .resizer.dragging::after{background:var(--accent); height:64px; width:3px;} /* 左侧栏 */ .sidebar{width:280px; min-width:200px; background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2)); color:var(--sidebar-text); display:flex; flex-direction:column; overflow:hidden; box-shadow:3px 0 18px rgba(0,0,0,.14); z-index:2; transition:width .25s ease, min-width .25s ease, flex-basis .25s ease;} .sidebar.collapsed{flex:0 0 0 !important; width:0 !important; min-width:0 !important; box-shadow:none;} /* 贴边小三角折叠把手：骑在左拖拽条上，垂直居中 */ .sb-toggle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:15px; height:48px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 1px 6px rgba(0,0,0,.16); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:8; transition:background .15s, box-shadow .15s, transform .15s;} .sb-toggle:hover{background:var(--accent-soft); box-shadow:0 2px 9px rgba(0,0,0,.22);} .sb-toggle::before{content:''; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:6px solid var(--text-soft);} .sb-toggle:hover::before{border-right-color:var(--accent);} /* 折叠态：拖拽条保留承载按钮，但禁用拖拽反馈；三角翻向右表示可展开 */ .workspace.left-collapsed #resizerLeft{cursor:default;} .workspace.left-collapsed #resizerLeft::after{display:none;} .workspace.left-collapsed #resizerLeft:hover{background:transparent;} .workspace.left-collapsed .sb-toggle{left:0; transform:translate(2px,-50%);} .workspace.left-collapsed .sb-toggle::before{border-right:none; border-left:6px solid var(--text-soft);} .workspace.left-collapsed .sb-toggle:hover::before{border-left-color:var(--accent);} .sidebar-header{padding:18px 18px 14px; border-bottom:2px solid var(--accent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,var(--panel)),color-mix(in srgb,var(--accent) 16%,var(--panel)));} .sidebar-header h1{font-size:18px; font-weight:700; color:var(--sidebar-text); letter-spacing:.4px;} .sidebar-header h1 span{color:var(--accent);} .sidebar-header p{font-size:11px; color:var(--sidebar-muted); margin-top:3px; letter-spacing:.5px;} .sidebar-content{flex:1; overflow-y:auto; padding:12px 10px; scrollbar-width:thin; scrollbar-color:var(--sidebar-scroll) transparent;} .sidebar-content::-webkit-scrollbar{width:6px;} .sidebar-content::-webkit-scrollbar-thumb{background:var(--sidebar-scroll); border-radius:3px;} .sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scroll-strong);} .world-item{margin-bottom:8px;} .world-header{display:flex; align-items:center; padding:8px 11px; border-radius:9px; cursor:pointer; transition:.18s; gap:7px; user-select:none;} .world-header:hover{background:var(--hover-bg);} .world-header.active{background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 6%,transparent)); box-shadow:inset 2px 0 0 var(--accent);} .world-header .w-icon{font-size:15px;} .world-header .w-name{flex:1; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .world-header .w-acts{display:flex; gap:2px; opacity:0; transition:.15s;} .world-header:hover .w-acts{opacity:1;} .world-header .w-acts button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:11px; padding:2px 5px; border-radius:4px; line-height:1; transition:.15s;} .world-header .w-acts button:hover{color:var(--accent); background:var(--hover-bg);} .world-body{margin-left:0; padding-left:0; border-left:none; display:none; margin-top:2px;} .world-body.open{display:block;} .sub-section{font-size:12px; font-weight:700; color:var(--sidebar-muted); padding:9px 11px 5px 10px; display:flex; align-items:center; justify-content:space-between; letter-spacing:.5px; border-top:1px solid var(--line); margin-top:4px;} .sub-section button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:12px; padding:1px 6px; border-radius:4px; transition:.15s;} .sub-section button:hover{color:var(--accent); background:var(--hover-bg);} .collapser{cursor:pointer; user-select:none; flex:1; transition:.15s;} .collapser:hover{color:var(--accent);} .collapser::before{content:'▾'; display:inline-block; margin-right:5px; transition:transform .15s; font-size:9px;} .collapser.is-collapsed::before{transform:rotate(-90deg);} .char-item{display:flex; align-items:center; padding:6px 11px 6px 16px; border-radius:7px; cursor:pointer; gap:7px; font-size:12px; transition:.15s;} .char-item:hover{background:var(--hover-bg);} .char-item.active{background:var(--accent-soft); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent);} .char-item .c-bullet{display:inline-block; width:12px; text-align:center; color:var(--accent); font-weight:700; font-size:15px; line-height:1; flex:0 0 auto;} .char-item .c-name{flex:1;} .char-item .c-acts{display:flex; gap:2px; opacity:0; transition:.15s;} .char-item:hover .c-acts{opacity:1;} .char-item .c-acts button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:10px; padding:1px 4px; border-radius:3px; line-height:1;} .char-item .c-acts button:hover{color:var(--accent);} .scene-item{display:flex; align-items:center; padding:6px 11px 6px 14px; border-radius:7px; cursor:pointer; gap:7px; font-size:12px; transition:.15s;} .scene-item:hover{background:var(--hover-bg);} .scene-item.active{background:var(--accent-soft); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent);} .scene-item .s-icon{font-size:13px;} .scene-item .s-name{flex:1;} .scene-item .s-acts{display:flex; gap:2px; opacity:0; transition:.15s;} .scene-item:hover .s-acts{opacity:1;} .scene-item .s-acts button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:10px; padding:1px 4px; border-radius:3px; line-height:1;} .scene-item .s-acts button:hover{color:var(--accent);} /* 时期层级（与场景/人物同级的视觉规范） */ .era-item{margin:2px 0;} .era-header{display:flex; align-items:center; padding:6px 11px 6px 16px; border-radius:7px; cursor:pointer; gap:7px; font-size:12px; transition:.15s;} .era-header:hover{background:var(--hover-bg);} .era-header.open{background:color-mix(in srgb,var(--accent) 10%,transparent);} .era-header .e-bullet{display:inline-block; width:12px; text-align:center; color:var(--accent); font-weight:700; font-size:15px; line-height:1; flex:0 0 auto;} .era-header .e-name{flex:1; font-weight:600;} .era-header .e-acts{display:flex; gap:2px; opacity:0; transition:.15s;} .era-header:hover .e-acts{opacity:1;} .era-header .e-acts button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:10px; padding:1px 4px; border-radius:3px; line-height:1;} .era-header .e-acts button:hover{color:var(--accent);} .era-add-row{display:flex; align-items:center; gap:7px; width:calc(100% - 10px); margin:3px 0 2px 5px; padding:6px 11px 6px 14px; background:none; border:none; color:var(--accent); border-radius:7px; cursor:pointer; font-size:12px; transition:.15s;} .era-add-row .add-ico{font-size:14px; line-height:1;} .era-add-row:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);} .era-body{margin-left:12px; padding-left:12px; border-left:2px solid var(--line);} /* 回收站（页脚内，导入上方） */ .trash-box{padding:8px 10px 4px; margin-bottom:6px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb, var(--ink) 6%, transparent);} .trash-head{font-size:11px; color:var(--sidebar-muted); margin-bottom:4px; display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;} .trash-count{background:color-mix(in srgb,var(--accent) 20%,transparent); color:var(--accent); border-radius:8px; padding:0 7px; font-size:10px;} .trash-empty{font-size:11px; color:var(--sidebar-muted); font-style:italic;} .trash-item{display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px;} .trash-item:hover{background:var(--hover-bg);} .trash-item .t-name{flex:1; font-size:12px; color:var(--sidebar-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .trash-item .t-acts{display:flex; gap:2px;} .trash-item .t-acts button{background:none; border:none; color:var(--sidebar-muted); cursor:pointer; font-size:11px; padding:1px 5px; border-radius:4px;} .trash-item .t-acts button:hover{color:var(--accent); background:var(--hover-bg);} .trash-caret{margin-left:auto; font-size:10px; opacity:.7; transition:transform .2s;} .trash-body{max-height:0; overflow:hidden; transition:max-height .2s ease;} .trash-body.open{max-height:200px; overflow-y:auto;} .empty-tip{color:var(--sidebar-muted); font-size:11px; padding:8px 10px; text-align:center; font-style:italic;} /* 底部按钮区 */ .sidebar-footer{padding:10px 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; background:color-mix(in srgb, var(--ink) 6%, transparent);} .footer-row{display:flex; gap:6px;} .footer-row button{flex:1; padding:7px 0; border:none; border-radius:8px; cursor:pointer; font-size:11px; transition:.2s; white-space:nowrap; font-weight:500;} .btn-primary{background:color-mix(in srgb,var(--sidebar-text) 10%,transparent); color:var(--accent);} .btn-primary:hover{background:color-mix(in srgb,var(--sidebar-text) 16%,transparent);} .btn-action{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);} .btn-action:hover{background:color-mix(in srgb,var(--accent) 26%,transparent); transform:translateY(-1px);} .btn-secondary{background:color-mix(in srgb,var(--sidebar-text) 10%,transparent); color:var(--sidebar-text);} .btn-secondary:hover{background:color-mix(in srgb,var(--sidebar-text) 16%,transparent);} .footer-hint{font-size:9px; color:var(--sidebar-muted); text-align:center; margin-top:2px;} /* 右侧对话主区域 */ .main{flex:1; display:flex; flex-direction:column; background:var(--panel); overflow:hidden; min-width:0;} .context-bar{padding:13px 22px; background:color-mix(in srgb,var(--panel) 82%,transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px;} .context-tag{display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:20px; font-size:12px; font-weight:500; box-shadow:var(--shadow-sm);} .context-tag.world-tag{background:color-mix(in srgb,var(--accent) 14%,var(--panel)); color:var(--accent);} .context-tag.scene-tag{background:var(--tag-scene-bg); color:var(--ink-soft);} .context-tag.char-tag{background:var(--tag-char-bg); color:var(--ink-soft); border:1px solid var(--line-accent);} .context-tag.era-tag{background:var(--tag-era-bg); color:var(--tag-era-fg); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);} .context-bar .placeholder{color:var(--ink-faint); font-size:12px;} .chat-area{flex:1; overflow-y:auto; padding:20px 24px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--scroll) transparent;} .chat-area::-webkit-scrollbar{width:7px;} .chat-area::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:4px;} .chat-area::-webkit-scrollbar-thumb:hover{background:var(--scroll-strong);} .msg{margin:6px 0 10px; max-width:88%; animation:fadeUp .25s ease;} @keyframes fadeUp{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}} .msg.user-msg{margin-right:auto;} .msg.ai-msg{margin-left:auto;} .msg .sender{font-size:11px; color:var(--ink-faint); margin-bottom:4px; display:flex; align-items:center; gap:6px;} .msg .sender .dot{width:6px; height:6px; border-radius:50%; display:inline-block;} .msg.user-msg .sender .dot{background:var(--accent);} .msg.ai-msg .sender .dot{background:var(--muted);} .msg .bubble{padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word; box-shadow:var(--shadow-sm);} .msg.user-msg .bubble{background:color-mix(in srgb,var(--accent) 8%,var(--panel)); color:var(--ink); border-bottom-left-radius:5px;} .msg.ai-msg .bubble{background:var(--panel); border:1px solid var(--line); border-bottom-right-radius:5px;} .msg.ai-msg .bubble .section-label{font-size:12px; font-weight:700; color:var(--muted); display:block; margin-top:8px;} .msg.ai-msg .bubble .section-label:first-child{margin-top:0;} .msg{position:relative;} .msg-actions{position:absolute; top:-6px; right:0; display:flex; gap:5px; background:color-mix(in srgb,var(--panel) 92%,transparent); padding:3px; border-radius:9px; box-shadow:var(--shadow-sm); opacity:0; transition:opacity .15s;} .msg:hover .msg-actions{opacity:1;} .msg-actions:hover{opacity:1;} .msg-btn{width:26px; height:26px; border:1px solid var(--line); background:var(--panel); border-radius:7px; cursor:pointer; font-size:12px; line-height:1; color:var(--ink-soft); transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.05);} .msg-btn:hover{background:var(--hover-bg); border-color:var(--accent); color:var(--accent-d); transform:translateY(-1px);} .msg-btn.del:hover{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger);} .del-confirm{font-size:11px; color:var(--danger); background:var(--danger-soft); border:1px solid var(--danger-line); border-radius:6px; padding:2px 8px; align-self:center; white-space:nowrap;} .del-confirm-row{display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 12px; background:var(--danger-soft); border:1px solid var(--danger-line); border-radius:10px; font-size:11px; color:var(--danger); line-height:1.4;} .edit-warn{font-size:11px; color:var(--warn); background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:8px; padding:7px 10px; margin-bottom:8px; line-height:1.5;} .edit-box{width:100%; min-height:64px; border:1px solid var(--accent); border-radius:10px; padding:9px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical; outline:none; box-sizing:border-box; transition:.2s;} .edit-box:focus{border-color:var(--accent-d); box-shadow:0 0 0 3px var(--accent-soft);} .edit-actions{display:flex; justify-content:flex-end; gap:6px; margin-top:6px;} .edit-actions button{padding:5px 16px; border-radius:8px; cursor:pointer; font-size:12px; border:none; transition:.15s; font-weight:500;} .edit-actions .btn-cancel{background:var(--surface-2); color:var(--ink-soft);} .edit-actions .btn-cancel:hover{background:var(--hover-bg);} .edit-actions .btn-confirm{background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:#fff;} .edit-actions .btn-confirm:hover{filter:brightness(1.05);} .welcome{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--ink-faint);} .welcome .big-icon{font-size:64px; margin-bottom:16px; filter:drop-shadow(0 6px 14px var(--glow));} .welcome h2{font-size:20px; color:var(--ink-soft); margin-bottom:8px; font-weight:700;} .welcome p{font-size:13px; color:var(--ink-faint); max-width:400px; text-align:center; line-height:1.7;} .input-area{padding:14px 22px 18px; background:color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter:blur(6px); border-top:1px solid var(--line);} .input-row{display:flex; gap:10px; align-items:flex-end;} .input-row textarea{flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:12px; resize:vertical; font-size:14px; font-family:inherit; line-height:1.5; min-height:44px; max-height:360px; outline:none; transition:.2s; background:var(--panel); box-shadow:inset 0 1px 2px rgba(0,0,0,.03);} .input-row textarea:focus{border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 3px var(--accent-soft);} .input-row textarea:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed; border-color:var(--line);} .input-row textarea.locked.clickable-lock{background:var(--tint); color:var(--ink-soft); cursor:pointer; border:1px dashed var(--accent);} .send-btn{padding:11px 22px; background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:#fff; border:none; border-radius:12px; cursor:pointer; font-size:13px; font-weight:600; transition:.2s; white-space:nowrap; box-shadow:0 4px 12px var(--glow);} .send-btn:hover{filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 6px 16px var(--glow-strong);} .send-btn:active{transform:translateY(0);} .send-btn:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed; box-shadow:none; transform:none; filter:none;} /* 左侧「改写生成」：与右侧发送按钮同形，但用描边次要样式区分 */ .rewrite-btn{background:var(--panel); color:var(--accent); border:1px solid var(--accent); box-shadow:none; padding:11px 18px;} .rewrite-btn:hover{filter:none; background:var(--accent-soft); transform:translateY(-1px); box-shadow:0 4px 12px var(--glow);} .rewrite-btn:disabled{background:var(--surface-2); color:var(--ink-faint); border-color:var(--line); cursor:not-allowed; box-shadow:none; transform:none;} /* 窄屏（手机）：输入框上浮独占第一行、两个按钮到第二行平分 */ @media (max-width: 520px){ .input-row{ flex-wrap: wrap; } .input-row textarea{ order: -1; flex: 1 0 100%; } /* 输入框上浮到第一行、占满整宽 */ .rewrite-btn, .send-btn{ flex: 1; } /* 两按钮到第二行、平分 */ .sidebar{ width:150px; min-width:108px; } /* 手机：最左栏可更窄，给中间让空间 */ .char-rail{ width:104px; min-width:84px; } /* 手机：右侧人物栏同收窄以适配窄屏 */ } .input-hint{font-size:11px; color:var(--ink-faint); margin-top:7px;} /* 最右侧人物快捷栏 */ .char-rail{width:180px; min-width:180px; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; box-shadow:-3px 0 18px rgba(0,0,0,.05); z-index:2;} .rail-header{padding:15px 14px 11px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 10%,var(--panel));} .rail-header h3{font-size:13px; color:var(--ink-soft); font-weight:700; display:flex; align-items:center; gap:6px;} .rail-header .rail-sub{font-size:11px; color:var(--ink-faint); margin-top:3px;} .rail-scroll{flex:1; overflow-y:auto; padding:11px 12px; display:flex; flex-direction:column; gap:9px; scrollbar-width:thin; scrollbar-color:var(--scroll) transparent;} .rail-scroll::-webkit-scrollbar{width:5px;} .rail-scroll::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:3px;} .rail-card{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; cursor:pointer; transition:.2s; border:1px solid var(--line); background:var(--panel); user-select:none; box-shadow:var(--shadow-sm);} .rail-card:hover{border-color:var(--accent); background:var(--hover-bg); transform:translateY(-1px); box-shadow:var(--shadow-md);} .rail-card.active{border-color:var(--accent); background:var(--active-bg); box-shadow:0 0 0 1px var(--accent), var(--shadow-sm);} .rail-card .r-avatar{width:32px; height:32px; border-radius:50%; background:var(--rail-avatar-bg); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);} .rail-card.active .r-avatar{background:linear-gradient(135deg,var(--accent),var(--accent-d)); box-shadow:none;} .rail-card .r-info{flex:1; min-width:0;} .rail-card .r-name{font-size:13px; font-weight:600; color:var(--ink);} .rail-card .r-tag{font-size:10px; color:var(--ink-faint); margin-top:1px;} .rail-card .r-go{font-size:16px; color:var(--accent); opacity:0; transition:.2s;} .rail-card:hover .r-go{opacity:1;} .rail-card.active .r-go{opacity:1;} .rail-empty{color:var(--ink-faint); font-size:12px; text-align:center; padding:22px 8px; font-style:italic;} /* 上方：上下文预览区（仅管理员可见，默认隐藏避免非管理员闪现 AI 上下文） */ .rail-prompt{display:none; flex-direction:column; flex:0 0 200px; min-height:0; overflow:hidden;} body.show-context-preview .rail-prompt{display:flex;} .prompt-header{padding:8px 11px; font-size:10px; color:var(--ink-soft); font-weight:700; background:color-mix(in srgb,var(--accent) 8%,var(--panel)); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; flex:0 0 auto; letter-spacing:.3px;} .prompt-body{flex:1; overflow-y:auto; padding:9px 11px; font-size:10px; line-height:1.6; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; font-family:'SFMono-Regular',Consolas,Monaco,monospace; background:var(--panel); scrollbar-width:thin; scrollbar-color:var(--scroll) transparent;} .prompt-body::-webkit-scrollbar{width:5px;} .prompt-body::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:3px;} .prompt-body .p-label{color:var(--muted); font-weight:700; display:block; margin-top:5px;} .prompt-body .p-label:first-child{margin-top:0;} .prompt-body .p-event{color:var(--accent-d); font-weight:700; display:block; margin-top:5px;} .prompt-body .p-mode{color:var(--accent); font-weight:800; display:block; margin-bottom:3px; padding-bottom:3px; border-bottom:1px dashed var(--line); letter-spacing:.2px;} /* 中间：作者人物干预设定 */ .rail-intervene{display:flex; flex-direction:column; background:var(--panel); padding:9px 11px; gap:6px; flex:0 0 150px; min-height:0; overflow:hidden;} .rail-intervene .intervene-header{font-size:11px; color:var(--ink-soft); font-weight:700; display:flex; align-items:center; gap:5px; flex:0 0 auto; margin:-9px -11px 6px; padding:8px 11px; background:color-mix(in srgb,var(--accent) 16%,var(--panel)); border-bottom:1px solid var(--line-accent);} #interveneInput{flex:1 1 auto; width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:12px; font-family:inherit; line-height:1.55; resize:none; background:var(--panel); outline:none; min-height:46px; overflow-y:auto; transition:.2s;} #interveneInput:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);} #interveneInput:disabled{background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed;} .intervene-hint{font-size:9px; color:var(--ink-faint); line-height:1.45; flex:0 0 auto;} /* 下方：场景人物列表 */ .rail-bottom{flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden;} /* 右侧栏上下栏拖拽条 */ .hresizer{height:6px; flex:0 0 6px; cursor:row-resize; background:transparent; position:relative; z-index:5; transition:background .15s;} .hresizer::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:2px; width:42px; background:var(--line); border-radius:3px; transition:.15s;} .hresizer:hover, .hresizer.dragging{background:var(--accent-soft);} .hresizer:hover::after, .hresizer.dragging::after{background:var(--accent); width:64px; height:3px;} /* 上下文预览隐藏时，其上方拖拽条一并隐藏，避免悬空分隔条 */ #hResizerTop{display:none;} body.show-context-preview #hResizerTop{display:block;} /* 右侧栏面板折叠 */ .prompt-header, .intervene-header, .rail-header{cursor:pointer; user-select:none;} .rail-caret{margin-left:auto; font-size:10px; line-height:1; color:var(--ink-faint); transition:transform .2s ease; transform:rotate(0deg);} .collapsed .rail-caret{transform:rotate(-90deg);} .rail-prompt.collapsed, .rail-intervene.collapsed, .rail-bottom.collapsed{flex:0 0 auto !important; height:auto !important;} .rail-prompt.collapsed .prompt-body, .rail-intervene.collapsed #interveneInput, .rail-intervene.collapsed .intervene-hint, .rail-bottom.collapsed .rail-scroll{display:none;} /* 弹窗 */ .modal-overlay{display:none; position:fixed; inset:0; background:rgba(40,30,20,.45); backdrop-filter:blur(3px); z-index:2147483647; align-items:center; justify-content:center; animation:fadeIn .2s ease;} @keyframes fadeIn{from{opacity:0;} to{opacity:1;}} .modal-overlay.open{display:flex;} .modal{background:var(--panel); border-radius:18px; width:540px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(30,20,10,.35); animation:popIn .22s cubic-bezier(.2,.8,.3,1); overflow:hidden;} @keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}} .modal-header{padding:18px 22px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:var(--header-grad);} .modal-header h2{font-size:18px; color:var(--ink); font-weight:700;} .modal-header .close-btn{background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-faint); padding:0 4px; line-height:1; transition:.15s; border-radius:6px; width:30px; height:30px;} .modal-header .close-btn:hover{color:var(--ink); background:var(--hover-bg);} .modal-body{padding:18px 22px; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:var(--scroll) transparent;} .modal-body::-webkit-scrollbar{width:6px;} .modal-body::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:3px;} .modal-footer{padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:var(--panel);} .modal-footer button{padding:8px 22px; border-radius:9px; cursor:pointer; font-size:13px; border:none; transition:.2s; font-weight:500;} .modal-footer .btn-cancel{background:var(--surface-2); color:var(--ink-soft);} .modal-footer .btn-cancel:hover{background:var(--surface-3);} .modal-footer .btn-confirm{background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:#fff; font-weight:600; box-shadow:0 4px 12px var(--glow-strong);} .modal-footer .btn-confirm:hover{filter:brightness(1.05); transform:translateY(-1px);} .modal-footer .btn-danger{background:var(--danger); color:#fff;} .modal-footer .btn-danger:hover{background:color-mix(in srgb,var(--danger) 82%,#000);} .confirm-msg{padding:6px 2px; line-height:1.7; color:var(--ink-soft); font-size:14px;} .form-group{margin-bottom:14px;} .form-group label{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:4px;} .char-count{font-weight:400; font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;} .char-count.warn{color:var(--warn);} .form-group input, .form-group textarea, .form-group select{width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-family:inherit; outline:none; transition:.2s; background:var(--panel);} .form-group input:focus, .form-group textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--panel);} .form-group textarea{min-height:64px; resize:vertical;} .form-group .desc{font-size:11px; color:var(--ink-faint); margin-top:3px; line-height:1.5;} /* AI 提示词「最终发送给 AI 的内容结构」折叠块 */ .prompt-detail{margin-top:6px; border:1px solid var(--line); border-radius:9px; background:var(--panel-2, rgba(127,127,127,.06)); overflow:hidden;} .prompt-detail > summary{cursor:pointer; padding:6px 11px; font-size:11px; font-weight:600; color:var(--accent); user-select:none; list-style:none;} .prompt-detail > summary::-webkit-details-marker{display:none;} .prompt-detail > summary::before{content:'▸ '; } .prompt-detail[open] > summary::before{content:'▾ ';} .prompt-structure{padding:4px 12px 10px 12px; font-size:11px; color:var(--ink-faint); line-height:1.6;} .prompt-structure > div{margin-bottom:4px;} .prompt-structure ul{margin:4px 0 6px 2px; padding-left:16px;} .prompt-structure li{margin:2px 0;} .prompt-structure code{background:var(--accent-soft); color:var(--accent); padding:1px 5px; border-radius:5px; font-size:10.5px;} .settings-section{margin-bottom:4px;} .settings-section h3{font-size:14px; color:var(--ink); margin:6px 0 10px; font-weight:700; display:flex; align-items:center; gap:6px;} .settings-divider{border:none; border-top:1px dashed var(--line); margin:16px 0;} .settings-toggle{cursor:pointer; user-select:none;} .settings-toggle .caret{font-size:10px; color:var(--ink-faint); transition:transform .15s; display:inline-block;} .settings-toggle.collapsed .caret{transform:rotate(-90deg);} .settings-body.collapsed{display:none;} .btn-mini{margin-top:6px; padding:4px 12px; font-size:11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--ink-soft); cursor:pointer; transition:.15s;} .btn-mini:hover{background:var(--hover-bg); color:var(--ink);} .checkbox-list{display:flex; flex-wrap:wrap; gap:7px;} .checkbox-list label{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:400; cursor:pointer; padding:5px 11px; background:var(--panel); border:1px solid transparent; border-radius:16px; transition:.15s;} .checkbox-list label:hover{border-color:var(--line);} .checkbox-list label.checked{background:var(--accent); color:#fff; border-color:var(--accent-d); box-shadow:0 2px 6px var(--glow-strong);} .checkbox-list input[type="checkbox"]{display:none;} .loading{display:flex; align-items:center; gap:7px; padding:7px 0; color:var(--ink-faint); font-size:12px;} .loading .spinner{width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} @media (max-width:900px){ .char-rail{width:130px; min-width:110px;} .sidebar{width:170px; min-width:130px;} }