/* ══════════════════════════════════════════════════════════════════════
   梦境空间设计工作室 · 界面外观层 V0.5.5
   ──────────────────────────────────────────────────────────────────────
   这个文件只做两件事，都不碰 app.js 的业务逻辑：

   一、把画布面积抢回来
       原来：左侧工具栏 320px + 画布上方标题栏 89px + 下方提示栏 52px
             → 画布只剩 706px 高、1112px 宽
       现在：左侧 268px，标题栏和提示栏改成**浮在画布上的玻璃胶囊**，
             不再各占一整行 → 画布 847px 高、1164px 宽

   二、五套配色（深色 / 浅色 / 暖砂 / 墨绿 / 靛蓝）
       全部走 --ui-* 变量，由 theme.js 切 data-theme。
       style.css 里那些硬编码的 #1d2022 / #24282b 之类在这里统一改写，
       否则浅色主题下会一块块黑斑。

   加载顺序：必须排在 layout.css 之后（index.html 里已放在最后）。
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 一、紧凑布局：把面积还给画布 ═══════════════ */

/* 左侧工具栏：320 → 268（宽屏） / 248（中屏）。
   rail 的 52px 是 01–06 导航点，保留。 */
@media(min-width:1400px){
  body.dock-open .workspace{grid-template-columns:52px 268px minmax(0,1fr) 196px}
}
@media(min-width:1121px) and (max-width:1399px){
  body.dock-open .workspace{grid-template-columns:52px 248px minmax(0,1fr) 180px}
}

/* 画布内部：标题栏 / 提示栏的行高归零，它们改成绝对定位浮层。
   注意：absolute 元素会脱离 grid 流，后面的子元素会往前挤 ——
   所以 #stage 和 agent-panel 必须显式指定行号，否则 stage 会落到高度 0 的第一行。 */
body .canvas-shell{
  grid-template-rows:minmax(0,1fr) auto;
}
body .canvas-shell>#stage{grid-row:1}
body .canvas-shell>.agent-panel{grid-row:2}
body .canvas-shell>.history-tray{grid-row:3}

/* ── 标题栏 → 左上角玻璃胶囊 ── */
body .canvas-heading{
  position:absolute;
  top:10px; left:12px; right:12px;
  height:auto; margin:0; padding:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
  z-index:26;                 /* 高于 #focusWorkspace 的 20，图片编辑模式下按钮仍可点 */
  pointer-events:none;
}
body .canvas-heading>div:first-child{
  pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  /* layout.css 里是 flex:1，那会把胶囊拉满到 480px 上限；这里改回按内容宽度 */
  flex:0 1 auto;
  min-width:0; max-width:min(62%,480px);
  padding:6px 12px;
  background:var(--ui-glass);
  border:1px solid var(--ui-glassbd);
  border-radius:9px;
  box-shadow:var(--ui-shadow);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
/* 那行 CREATIVE WORKSPACE 小字在浮动胶囊里纯占地方，去掉 */
body .canvas-heading .eyebrow{display:none}
body .canvas-heading h1{
  font-size:13px; font-weight:500; line-height:1.3;
  margin:0; max-width:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body .canvas-heading .session-label{display:none}
body .canvas-heading #focusToggle{
  pointer-events:auto;
  align-self:flex-start;
  height:30px; padding:4px 11px;
  font-size:11.5px; border-radius:8px;
  background:var(--ui-glass);
  border:1px solid var(--ui-glassbd);
  box-shadow:var(--ui-shadow);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
/* 图片编辑模式：标题胶囊让位给编辑器，只留右上角「返回素材画布」 */
body.focus-edit .canvas-heading>div:first-child{display:none}
body.focus-edit .canvas-heading{justify-content:flex-end}

/* ── 底部提示栏 → 两个独立玻璃胶囊 ── */
body .canvas-bottom{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  height:auto; margin:0; padding:0;
  border:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px;
  z-index:26;
  pointer-events:none;
}
body .canvas-hint{
  pointer-events:auto;
  padding:5px 10px;
  font-size:10.5px; line-height:1.4;
  color:var(--ui-dim);
  background:var(--ui-glass);
  border:1px solid var(--ui-glassbd);
  border-radius:8px;
  box-shadow:var(--ui-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body .canvas-bottom .zoom-bar{
  pointer-events:auto;
  margin:0;
  background:var(--ui-glass);
  border:1px solid var(--ui-glassbd);
  border-radius:9px;
  box-shadow:var(--ui-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
/* Agent 对话栏展开时，底部胶囊自动抬到它上面，不被盖住 */
body:has(.canvas-shell>.agent-panel:not([hidden])) .canvas-bottom{
  bottom:calc(min(196px,24vh) + 10px);
}

/* 窄屏：胶囊再瘦一点 */
@media(max-width:1150px){
  body .canvas-hint{display:none}
  body .canvas-bottom{justify-content:flex-end}
  body .canvas-heading>div:first-child{max-width:70%}
}


/* ═══════════════ 二、五套配色 ═══════════════
   所有覆盖规则都写成 html[data-theme] xxx —— 权重 (0,1,1)+
   高于 style.css 里的单类选择器 (0,1,0)，也高于 #panelDock 这类 id 选择器
   被我们加成 (1,1,0) 后仍然压得住。 */

:root{
  --ui-bg:#17191b;
  --ui-panel:#1d2022;
  --ui-panel2:#202426;
  --ui-card:#24282b;
  --ui-input:#1a1e20;
  --ui-line:#363b3e;
  --ui-line2:#424b4f;
  --ui-text:#eeeae2;
  --ui-muted:#a4aaa9;
  --ui-dim:#747d7e;
  --ui-hover:#34393b;
  --ui-canvas:#171a1c;
  --ui-dot:#40474b;
  --ui-scroll:#4b5459;
  --ui-note:#2d2c27;
  --ui-note-bd:#73664e;
  --ui-glass:rgba(26,30,33,.84);
  --ui-glassbd:rgba(255,255,255,.09);
  --ui-shadow:0 6px 20px rgba(0,0,0,.34);
  --ui-accent:#dab783;
  --ui-accent-ink:#211c15;
  --ui-sel:#2f81f7;
}

/* ── 浅色 ── */
html[data-theme="light"]{
  color-scheme:light;
  --ui-bg:#f3f0e9;
  --ui-panel:#fbf9f4;
  --ui-panel2:#f6f3ec;
  --ui-card:#ffffff;
  --ui-input:#ffffff;
  --ui-line:#ddd6c8;
  --ui-line2:#c9c1b1;
  --ui-text:#2b2823;
  --ui-muted:#6b6459;
  --ui-dim:#928a7d;
  --ui-hover:#eae5da;
  --ui-canvas:#f8f5ef;
  --ui-dot:#d3ccbe;
  --ui-scroll:#c4bcae;
  --ui-note:#f7f1e2;
  --ui-note-bd:#c3a86e;
  --ui-glass:rgba(255,253,248,.88);
  --ui-glassbd:rgba(70,58,38,.14);
  --ui-shadow:0 6px 20px rgba(96,80,54,.13);
  --ui-accent:#a8792f;
  --ui-accent-ink:#fffdf8;
  --ui-sel:#2f81f7;
  /* 原有的 --bg/--line/--text 系列同步换掉，凡是用了 var() 的地方自动跟随 */
  --bg:#f3f0e9; --line:#ddd6c8; --text:#2b2823;
  --muted:#6b6459; --dim:#928a7d;
  --accent:#a8792f; --accent-dark:#f7f1e2;
  --success:#3f7a52; --error:#b3423a;
  --cn-chrome:#ffffff; --cn-chrome-bd:#c9c1b1; --cn-chrome-tx:#2b2823;
}

/* ── 暖砂（深） ── */
html[data-theme="sand"]{
  color-scheme:dark;
  --ui-bg:#241f19;
  --ui-panel:#2b251e;
  --ui-panel2:#312a22;
  --ui-card:#372f26;
  --ui-input:#2a241d;
  --ui-line:#463c2f;
  --ui-line2:#584a39;
  --ui-text:#f3ead9;
  --ui-muted:#b3a591;
  --ui-dim:#8b7e6b;
  --ui-hover:#3d3429;
  --ui-canvas:#221d18;
  --ui-dot:#4c4235;
  --ui-scroll:#5a4d3d;
  --ui-note:#332c22;
  --ui-note-bd:#8a7247;
  --ui-glass:rgba(38,32,25,.85);
  --ui-glassbd:rgba(255,236,205,.11);
  --ui-shadow:0 6px 20px rgba(0,0,0,.36);
  --ui-accent:#e0b070;
  --ui-accent-ink:#2a2116;
  --bg:#241f19; --line:#463c2f; --text:#f3ead9;
  --muted:#b3a591; --dim:#8b7e6b;
  --accent:#e0b070; --accent-dark:#332c22;
  --success:#a3bd8b; --error:#e8a08f;
  --cn-chrome:#312a22; --cn-chrome-bd:#584a39; --cn-chrome-tx:#f3ead9;
}

/* ── 墨绿（深） ── */
html[data-theme="ink"]{
  color-scheme:dark;
  --ui-bg:#121a17;
  --ui-panel:#17211d;
  --ui-panel2:#1b2621;
  --ui-card:#1f2c26;
  --ui-input:#16201c;
  --ui-line:#2b3a33;
  --ui-line2:#3a4d44;
  --ui-text:#e8f0ea;
  --ui-muted:#9db0a5;
  --ui-dim:#74887c;
  --ui-hover:#24332c;
  --ui-canvas:#111815;
  --ui-dot:#2e4038;
  --ui-scroll:#3d5148;
  --ui-note:#1e2a24;
  --ui-note-bd:#4e7a63;
  --ui-glass:rgba(20,29,25,.85);
  --ui-glassbd:rgba(210,255,235,.10);
  --ui-shadow:0 6px 20px rgba(0,0,0,.38);
  --ui-accent:#79c49b;
  --ui-accent-ink:#0e1a14;
  --bg:#121a17; --line:#2b3a33; --text:#e8f0ea;
  --muted:#9db0a5; --dim:#74887c;
  --accent:#79c49b; --accent-dark:#1e2a24;
  --success:#79c49b; --error:#e59a90;
  --cn-chrome:#1b2621; --cn-chrome-bd:#3a4d44; --cn-chrome-tx:#e8f0ea;
}

/* ── 靛蓝（深） ── */
html[data-theme="slate"]{
  color-scheme:dark;
  --ui-bg:#131722;
  --ui-panel:#181d2a;
  --ui-panel2:#1c2231;
  --ui-card:#202737;
  --ui-input:#171c28;
  --ui-line:#2c3446;
  --ui-line2:#3b465c;
  --ui-text:#e8ecf5;
  --ui-muted:#9aa5bb;
  --ui-dim:#6f7c95;
  --ui-hover:#242c3e;
  --ui-canvas:#12161f;
  --ui-dot:#2d3648;
  --ui-scroll:#3e4a62;
  --ui-note:#1e2433;
  --ui-note-bd:#5a6d9c;
  --ui-glass:rgba(20,25,36,.85);
  --ui-glassbd:rgba(200,220,255,.10);
  --ui-shadow:0 6px 20px rgba(0,0,0,.40);
  --ui-accent:#8fa9e8;
  --ui-accent-ink:#101624;
  --bg:#131722; --line:#2c3446; --text:#e8ecf5;
  --muted:#9aa5bb; --dim:#6f7c95;
  --accent:#8fa9e8; --accent-dark:#1e2433;
  --success:#8ac9a6; --error:#eaa0a0;
  --cn-chrome:#1c2231; --cn-chrome-bd:#3b465c; --cn-chrome-tx:#e8ecf5;
}

/* ── 硬编码颜色的统一改写 ── */
html[data-theme] body{background:var(--ui-bg);color:var(--ui-text)}
html[data-theme] .topbar{background:var(--ui-panel);border-bottom-color:var(--ui-line)}
html[data-theme] .rail{background:var(--ui-panel);border-right-color:var(--ui-line)}
html[data-theme] #panelDock{background:var(--ui-panel);border-right-color:var(--ui-line)}
html[data-theme] .dock-top{background:var(--ui-panel2);border-bottom-color:var(--ui-line)}
html[data-theme] .dock-title{color:var(--ui-text)}
html[data-theme] .history-tray{background:var(--ui-panel);border-left-color:var(--ui-line)}
html[data-theme] .history-title strong{color:var(--ui-text)}
html[data-theme] .history-tray .history-title button{border-color:var(--ui-line2)}
html[data-theme] .canvas-shell{background:var(--ui-canvas)}
html[data-theme] #stage{background-image:radial-gradient(var(--ui-dot) .65px,transparent .65px)}
html[data-theme] .statusbar{background:var(--ui-panel);border-top-color:var(--ui-line)}
html[data-theme] .zoom-bar{background:var(--ui-panel2);border-color:var(--ui-line)}
html[data-theme] .zoom-bar span{background:var(--ui-line)}

html[data-theme] .node{background:var(--ui-card);border-color:var(--ui-line2);box-shadow:var(--ui-shadow)}
html[data-theme] .node:before,html[data-theme] .node:after{background:var(--ui-card);border-color:var(--ui-dim)}
html[data-theme] .node-head{border-bottom-color:var(--ui-line)}
html[data-theme] .node-body{color:var(--ui-muted)}
html[data-theme] .node-state{border-color:var(--ui-line2)}

html[data-theme] button:hover{background:var(--ui-hover);border-color:var(--ui-line2)}
html[data-theme] input,html[data-theme] textarea,html[data-theme] select{
  background:var(--ui-input);border-color:var(--ui-line2);color:var(--ui-text);
}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--ui-dim)}
html[data-theme] label{color:var(--ui-muted)}

html[data-theme] .history-item{background:var(--ui-input);border-color:var(--ui-line2)}
html[data-theme] .history-item span{background:var(--ui-panel)}
html[data-theme] .dialog{background:var(--ui-card);border-color:var(--ui-line2);color:var(--ui-text)}
html[data-theme] .dialog::backdrop{background:rgba(8,10,14,.55)}
html[data-theme] .note{background:var(--ui-note);border-left-color:var(--ui-note-bd);color:var(--ui-muted)}
html[data-theme] .rail button.active{background:var(--ui-hover);border-color:var(--ui-accent)}
html[data-theme] .ratio-btn.active{background:var(--ui-hover)}
html[data-theme] .viewer-tabs button.active{background:var(--ui-hover)}
html[data-theme] #focusWorkspace{background:var(--ui-canvas)}
html[data-theme] #dockOpen{background:var(--ui-card);border-color:var(--ui-line2)}
html[data-theme] .agent-panel{background:var(--ui-card)}
html[data-theme] .agent-steps{background:var(--ui-panel2);border-color:var(--ui-line2)}
html[data-theme] .image-stage{background:var(--ui-canvas);border-color:var(--ui-line)}
html[data-theme] .ref-link-badge{background:var(--ui-hover);border-color:var(--ui-line2)}
html[data-theme] #panelDock .node.docked{border-bottom-color:var(--ui-line)}
html[data-theme] #panelDock .node.docked .node-head:hover{background:var(--ui-hover)}
html[data-theme] #panelDock .node.docked.sel{background:var(--ui-panel2)}
html[data-theme] .dock-body::-webkit-scrollbar-thumb,
html[data-theme] .history-tray #historyList::-webkit-scrollbar-thumb,
html[data-theme] ::-webkit-scrollbar-thumb{background:var(--ui-scroll)}
html[data-theme] .edge{stroke:var(--ui-line2)}

/* 画布上的图片节点底、底部「评论」按钮、右侧 Agent 胶囊 ——
   这三处是写死 #14181a / #222729 / #2b2721 的，浅色下会露出黑块。 */
html[data-theme] .cnode-body{background:var(--ui-card);box-shadow:0 4px 14px rgba(0,0,0,.10)}
html[data-theme] #commentToggle{background:var(--ui-panel2);border-color:var(--ui-line2)}
html[data-theme] #commentToggle.active{background:var(--ui-accent);color:var(--ui-accent-ink);border-color:var(--ui-accent)}
html[data-theme] #agentBtn.agent-fab{background:var(--ui-card);border-color:var(--ui-line2);color:var(--ui-accent)}
/* 「必须保留」那排 chip 原来写死 #202426，浅色下是一排黑豆 */
html[data-theme] .preserve-bar .chip{background:var(--ui-panel2);border-color:var(--ui-line2)}
html[data-theme] .preserve-bar .chip:hover{border-color:var(--ui-accent)}
html[data-theme] .preserve-bar .chip:has(input:checked){background:var(--ui-hover);color:var(--ui-accent);border-color:var(--ui-accent)}
/* 图片修改台的「高级设置」折叠条：summary 是 #1d2123、内容区是 #1b1f21，
   浅色下就是一条黑横条。 */
html[data-theme] .bench-config>summary{background:var(--ui-panel2);border-color:var(--ui-line2);color:var(--ui-muted)}
html[data-theme] .bench-config-body{background:var(--ui-panel2);border-color:var(--ui-line2)}
/* 修改台的 tab 选中态（指哪改哪 / 图钉评论 / 前后对比 / 图生图） */
html[data-theme] .bench-tabs button.active{background:var(--ui-hover);color:var(--ui-accent);border-color:var(--ui-accent)}


/* ═══════════════ 三、配色切换按钮 ═══════════════ */

.theme-toggle{
  display:inline-flex; align-items:center; gap:6px;
  flex:none; white-space:nowrap;
}
.theme-toggle .theme-dot{
  width:13px; height:13px; border-radius:50%;
  background:conic-gradient(from 210deg,
    #17191b 0 72deg, #f3f0e9 72deg 144deg,
    #2b251e 144deg 216deg, #17211d 216deg 288deg, #181d2a 288deg 360deg);
  border:1px solid var(--ui-line2);
  box-shadow:inset 0 0 0 2px var(--ui-panel);
}

.theme-pop{
  position:fixed; z-index:9600;
  width:196px; padding:10px;
  background:var(--ui-card);
  border:1px solid var(--ui-line2);
  border-radius:11px;
  box-shadow:0 14px 40px rgba(0,0,0,.42);
  color:var(--ui-text);
}
.theme-pop[hidden]{display:none}
.theme-pop-head{
  font-size:10px; letter-spacing:1.5px; color:var(--ui-dim);
  padding:2px 4px 8px;
}
.theme-grid{display:grid; gap:4px}
.theme-swatch{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:6px 8px;
  border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--ui-text);
  font-size:12px; text-align:left; cursor:pointer;
}
.theme-swatch:hover{background:var(--ui-hover)}
.theme-swatch.on{border-color:var(--ui-accent); background:var(--ui-hover)}
.theme-swatch i{
  flex:none; width:20px; height:20px; border-radius:5px;
  background:var(--sw); border:1px solid var(--ui-line2);
  box-shadow:inset 0 0 0 3px var(--sw-a);
}
.theme-swatch span{flex:1}
.theme-swatch em{
  font-style:normal; font-size:10px; color:var(--ui-dim);
}