/* 00 什么是 Agent:玻璃拟态外壳。只在 3d/index.html 引入,选择器全部以 body.glass 开头,
   不改 shared/ui.css(04 到 09 共用)。颜色见 3d/PROJECT.md 2.1;这些颜色是本项目的示意约定,书里没有规定。 */
body.glass {
  --bg: #e8f0ff;
  --panel: rgba(255, 255, 255, .72);
  --panel-2: rgba(255, 255, 255, .55);
  --line: rgba(120, 150, 210, .45);
  --text: #1b2a52;
  --muted: #3d4f7c;
  --accent: #3563e9;
  --warm: #3563e9;
  --glass-fill: rgba(255, 255, 255, .72);
  --glass-solid: rgba(255, 255, 255, .94);
  --glass-edge: rgba(255, 255, 255, .9);
  --glass-shadow: 0 6px 24px rgba(53, 99, 233, .18);
  color-scheme: light;
  background: linear-gradient(180deg, #dfeaff 0%, #f4f8ff 100%);
}

/* 磨砂白卡:不支持 backdrop-filter 时回退为更不透明的白底,仍然可读 */
body.glass .chapters-btn, body.glass .home-title, body.glass .hcard, body.glass .chapters, body.glass .drawer, body.glass .tip {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.glass .chapters-btn, body.glass .home-title { background: var(--glass-fill); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  body.glass .hcard, body.glass .tip { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  body.glass .chapters, body.glass .drawer { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
}
body.glass .chapters-btn { border-radius: 10px; }
body.glass .chapters-btn:hover, body.glass .chapters-btn[aria-expanded="true"] { border-color: var(--accent); }
body.glass .home-title { border-radius: 14px; }
body.glass .hcard { border-left: 3px solid var(--accent); border-radius: 12px; }
body.glass .hcard .tagx { border-color: var(--accent); color: var(--accent); }
body.glass .hcard em { color: var(--accent); }
body.glass .srcbtn { color: var(--accent); border-color: var(--accent); background: rgba(255, 255, 255, .6); border-radius: 6px; }
body.glass .drawer { border-left: 1px solid var(--glass-edge); }
body.glass .chapters h2, body.glass .chapters b { color: var(--text); }
body.glass .ch-card { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 12px; }
body.glass .ch-card.todo { opacity: .6; }
body.glass .ch-top { background: rgba(53, 99, 233, .08); border-color: var(--accent); }
body.glass .ch-tag { border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, .6); }
body.glass .ch-tag.ready { color: #fff; background: var(--accent); border-color: var(--accent); }
body.glass .chapters code { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
body.glass .hint, body.glass .note { color: var(--muted); }

/* 舞台里的 3D 文字标签:深蓝字加白色光晕,取代深色主题的白字黑描边 */
body.glass .lbl { color: var(--text); text-shadow: 0 0 4px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .85); }
body.glass .lbl.dim { color: var(--muted); }
body.glass .lbl.ok { color: #0e6b4b; }
body.glass .lbl.warn { color: #c0262f; }

/* 舞台里的气泡卡(.card3d):磨砂白底,边色沿用语义 */
body.glass .card3d { background: var(--glass-solid); border: 1px solid var(--line); color: var(--text); box-shadow: 0 3px 12px rgba(53, 99, 233, .14); }
body.glass .card3d.ok { border-color: #0e6b4b; } body.glass .card3d.bad { border-color: #d6303a; color: #b3202a; }
body.glass .card3d.warm { border-color: #c98a00; } body.glass .card3d.cyan { border-color: var(--accent); }
body.glass .card3d.dim { color: var(--muted); }

/* 焦点环在浅底上要看得见 */
body.glass .chapters-btn:focus-visible, body.glass a.ch-card:focus-visible, body.glass .srcbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 舞台里的 DOM 文字(glass.js 的 gtext):字号随相机距离变化(main.js 写 --ppu),深蓝字加白色光晕 ---------- */
body.glass .lbl.gt { font-weight: 500; line-height: 1.3; white-space: pre-line; text-align: left; width: max-content; }   /* 绝对定位的块元素默认撑满父容器,translate(-50%) 会按整行宽度算,所以必须收缩到内容宽度 */
body.glass .lbl.gt.title { font-weight: 700; }
body.glass .lbl.gt.mute { color: var(--muted); }
body.glass .lbl.gt.ok { color: #0e6b4b; font-weight: 700; }
body.glass .lbl.gt.gseg { color: var(--text); }
/* 胶囊:层间箭头的文字、Agent 牌子 */
body.glass .lbl.gt.gpill { background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .95); border-radius: 999px; padding: .18em .85em; text-align: center;
  box-shadow: 0 2px 10px rgba(53, 99, 233, .16); text-shadow: none; }
/* 状态标注:红气泡 / 蓝草稿纸 / 琥珀安全阀 */
body.glass .lbl.gt.gnote { background: rgba(255, 255, 255, .95); border-radius: 10px; padding: .25em .7em; text-shadow: none; text-align: center; box-shadow: 0 3px 12px rgba(53, 99, 233, .16); }
body.glass .lbl.gt.gnote.bad { border: 2px solid #ff6b81; color: #b3202a; }
body.glass .lbl.gt.gnote.draft { border: 2px solid #4a78f0; color: var(--text); }
body.glass .lbl.gt.gnote.valve { border: 2px solid #ffb84a; color: #5a3a00; }
/* 圆形序号 ①②③ */
body.glass .lbl.gt.gbadge { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; text-shadow: none; }
/* 窄屏:细项隐藏(ui.css 已有 .aux 规则);箭头标签保留 */
@media (max-width: 860px) {
  body.glass .lbl.gt.ctitle { display: none; }
}

/* 次要小字(.mute):深一档的字色加白色光晕,压在板面或渐变上也读得清 */
body.glass .lbl.gt.mute { text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 7px rgba(255, 255, 255, .9); }
/* 底座上的副标题(GPT 等 / Claude 等…)压在半透明白底座上,字更小,再深一档 */
body.glass .lbl.gt.mute.aux { color: #33446f; }

/* 开场期间的提示:挪到右上角,不再和舞台底部的 3D 标签叠在一起;窄屏本来隐藏,开场里仍要显示 */
body.glass.intro-on .hint { display: block; left: auto; right: 16px; bottom: auto; top: 20px; padding: 4px 14px; border-radius: 999px; color: var(--text);
  background: rgba(255, 255, 255, .9); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); font-size: 12.5px; }
@media (max-width: 860px) { body.glass.intro-on .hint { top: 60px; } }

/* 开场导览:镜头还没到的那一层,它的文字标签先不显示(main.js 写 --fade-agent / --fade-model;不在开场时变量不存在,等于 1) */
body.glass #stage .lbl[data-layer="ui"] { opacity: var(--fade-ui, 1); }
body.glass #stage .lbl[data-layer="agent"] { opacity: var(--fade-agent, 1); }
body.glass #stage .lbl[data-layer="model"] { opacity: var(--fade-model, 1); }

/* DOM 文字块(界面层三张卡):标题加正文在一个元素里,行距用 CSS 排,不随俯角压缩 */
body.glass .lbl.gt.gblock { line-height: 1.28; }
body.glass .gb-row { white-space: pre-line; }
body.glass .gb-row.title { font-weight: 700; margin-bottom: .12em; }
body.glass .gb-row.ok { color: #0e6b4b; font-weight: 700; }
@media (max-width: 860px) { body.glass .gb-row.ctitle, body.glass .gb-row.aux-i { display: none; } }

/* 完成门的标签:平时淡显,球快到时(runway.js 加 .on)变实 */
body.glass .lbl.gt.gnote.ok.exit { opacity: .55; }
body.glass .lbl.gt.gnote.ok.exit.on { opacity: 1; }

/* ---------- 去隔板版新增 ---------- */
/* 聊天窗口里的文字:压在不受光的平涂色块上,不要白色光晕(白字更不要) */
body.glass .lbl.gt.gwin { text-shadow: none; font-weight: 600; color: var(--text); }
body.glass .lbl.gt.gwin.on-blue { color: #fff; }
body.glass .lbl.gt.gwin.ok-i { color: #0b5a3e; }
body.glass .lbl.gt.gwin.mute { color: #4a5a85; font-weight: 500; }
/* 卫星节点名:压在不透明的粉彩方块上,深蓝字,不要光晕(光晕在色块上会发灰) */
body.glass .lbl.gt.sat-t { text-shadow: none; font-weight: 700; color: var(--text); }
/* 模型底座正面的「可选模型」标签:压在淡紫底座上 */
body.glass .lbl.gt.stand-t { text-shadow: none; color: #2a2f6b; }
body.glass .lbl.gt.stand-v { text-shadow: none; font-weight: 600; color: var(--text); }

/* 窄屏(≤ 860px):3D 里字号有 9px 的下限,窗口和节点只有二三十像素宽,文字会比色块还大、互相挤出去。
   次要文字窄屏隐藏,沿用旧版的做法(.aux / .ctitle):聊天窗口里除标题外的字、七个节点名、两个组标签。点开热点卡里仍有名字。 */
@media (max-width: 860px) {
  body.glass .lbl.gt.gwin:not(.title), body.glass .lbl.gt.sat-t, body.glass .lbl.gt.gpill.grp { display: none !important; }
}