/* ══════════════════════════════════════════════════════════════════════
   lightbox.css —— 点图片看大图（2026-10-01 · 站外壳线）

   【层级】`z-index:70` —— **必须**高于现有全部覆盖层：
     `#scrim` 40 · `.dtl` 41/42 · `#appcloak` 59 · `.demo` 60。
   看大图是"盖住一切"的语义（此刻屏幕上再没有比它更该在前面的东西）。
   ⚠ 这个数**只在这里出现一次**；`css/shell.css` 里那几个层级各自有注释说明，
     改层级时两边要一起想（本文件是最上面的那一层）。

   【色值】只用 `css/tokens.css` 的变量（本仓：色值唯一点）。
     遮罩底色 `--lbx-scrim` 是本次新加的：`--scrim` 只到 .34–.52，
     看图要压得更暗（否则浅色主题下图片与背景糊在一起）。
     ⚠ 四个主题块**各有一份** `--lbx-scrim`（`html` / `themeB` / `themeC` / `themeD`）
       —— 少一份的话那个主题下会**整条声明失效**（`var()` 无兜底值），
         而失效的表现是"背景透明"，不是报错。`_lightbox.mjs` ④ 逐个主题断言它有值。

   【指针形态】`img[data-mx]{cursor:zoom-in}` 写在本文件而不是 `chatlog.css`：
     "能点开大图"是**本组件引入**的语义 ⇒ 由本文件负责表示它，
     不让 `chatlog.css` 去了解 lightbox 的存在（依赖单向）。
     ★ 选择器用 `img[data-mx]` 而**不是**类名：那个属性就是
       "可点开大图"的**定义**（`media.js::tag()` 是全仓唯一产出点）
       ⇒ 日后新增取图点**自动**拿到指针形态，不必再来改这里。
   ══════════════════════════════════════════════════════════════════════ */

/* 缩略图：能点开大图 ⇒ 指针必须看得出来（本仓：不许"hover 一下才知道能点"）。
   `title` 由 `media.js::tag()` 给（"点击查看大图"）。 */
img[data-mx]{cursor:zoom-in}

.lbx{position:fixed;inset:0;z-index:70;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s5);background:var(--lbx-scrim)}
.lbx.on{display:flex}

.lbx-im{max-width:min(94vw,1800px);max-height:84vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-sm);background:var(--e2);
  box-shadow:0 24px 70px -20px var(--sh-2);cursor:default}

/* 「正在取图…」与「图片取不回来（HTTP 401）」共用这一个容器。
   ⚠ 两条文案**必须不同**（`R78`：降级不许与正常同形）—— 那是 `lightbox.js`
     写文本时保证的，这里只保证它们**看得见**（居中、不贴边、对比度够）。 */
.lbx-tip{font-size:var(--fs-small);color:var(--t2);line-height:1.6;
  text-align:center;max-width:min(80vw,560px)}

/* 关闭键：`<span role="button" tabindex="0">`（由 `lightbox.js` 懒建）。
   `:focus-visible` 必须有 —— 它要能被 Tab 到，键盘用户得看得见焦点在哪。 */
.lbx-x{position:absolute;top:var(--s4);right:var(--s5);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--veil);color:var(--t1);font-size:15px;line-height:1;
  cursor:pointer;-webkit-user-select:none;user-select:none}
.lbx-x:hover{background:var(--face-hover)}
.lbx-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── 动作条（★ 2026-10-01 傍晚新增 · 「选图即可保存到体态三视图」的大图入口）──────
   位置：大图下方，同一个覆盖层内。默认 `display:none`（由 `lightbox.js` 按"有没有注册
     动作"开关）⇒ 没动作时一个像素都不占（**不留空条**）。
   ⚠ 用**不透明面板**（`--panel`）而不是半透明：条上有可点的按钮，背景若是图片本身，
     按钮在浅色照片上会糊掉 —— "看得见"必须与图片内容无关。
   ⚠ 色值一律走 `css/tokens.css`（本仓：色值唯一点）。这里**不必**像 `--lbx-scrim` 那样
     在四个主题块各写一份 —— 那些变量本来就有四份值，本文件只是引用它们。 */
.lbx-bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  max-width:min(94vw,900px);padding:var(--s2) var(--s3);
  border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--panel);box-shadow:0 12px 32px -14px var(--sh-2)}

/* provider 返回节点的一层包裹（`chat.js::lbBar`）。它自己也是一行 flex：
   左边一组按钮、右边一行说明。`.lbx-bar` 已有 `gap` ⇒ 这里只补"组内"的间距。 */
.lbx-acts{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.lbx-row{display:inline-flex;align-items:center;gap:var(--s1);flex-wrap:wrap}

/* 动作条里的按钮。**必须**与全站按钮同族观感 —— 否则一个覆盖层里会长出第二套按钮语言。 */
.lbx-act{font:inherit;font-size:var(--fs-small);padding:5px 12px;
  border:1px solid var(--line2);border-radius:var(--r-xs);
  background:var(--e2);color:var(--t1);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s1)}
.lbx-act:hover{background:var(--face-hover)}
.lbx-act:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lbx-act[disabled]{opacity:.55;cursor:default}

/* 一组互斥选项（正/侧/背）—— 用它们自身的"选中"态表达当前选择，不另加一层说明文字。 */
.lbx-act.on{border-color:var(--accent-line);background:var(--accent);color:var(--on-accent)}

/* 条上的说明行：日期/结果/失败三类**必须不同形**（`R78`：降级不许与正常同形）。
   ⚠ `.lbx-bad` 是**provider 自己挂了**那一档，与"存图失败"是两件事，文案也不同。 */
.lbx-note{font-size:var(--fs-micro);color:var(--t2);line-height:1.5}
.lbx-note.ok{color:var(--accent-text)}
.lbx-note.bad{color:var(--danger-text)}
.lbx-bad{font-size:var(--fs-small);color:var(--danger-text)}

/* 窄窗：把图放到尽量大（本来就没有第二栏可让）。 */
@media (max-width:949px){
  .lbx{padding:var(--s3)}
  .lbx-im{max-width:96vw;max-height:80vh}
  .lbx-x{top:var(--s3);right:var(--s3)}
  .lbx-bar{max-width:96vw}
}