/* 对话制作页的增量样式。
   simple.css 一个字不改：气泡、卡片、日志沿用线上已有的 .message / .turn-card /
   .task-log，这里只补两样东西——右侧资产栏，以及把内核那套工作记录（工具调用、
   输出、待办、思考）套进我们的配色。 */

/* --------------------------------------------------- 侧栏那一组新建按钮

   四颗（贴图 / 建模 / 模型市场 / 我的资产）的样式不在这里，在 simple.css 里，搜
   「侧栏那一组新建按钮」。

   挪走的理由：这四颗按钮同时长在简洁模式（simple.html）和这一页（hx/chat.html）
   上，而 simple.css 是两边都引的唯一一张样式表——simple.html 不引 hx.css。写在
   这里就只能管到工作台，简洁模式那边只好再抄一份（当时抄在 simple.html 的行内
   <style> 里），两份一漂移就出现"同一排按钮两个页面不一样"。而且原来两份都被
   simple.css 里的 #newTexture 按 id 压住了「贴图」那一颗，谁也没真的生效。
   现在只留 simple.css 那一份，两个页面共用。 */

/* ------------------------------------------------------- 还没说话的那一屏

   一句话都没发的时候，这一列只有品牌和输入框，居中摆着（跟老站首页一个样）。
   发出第一句的瞬间：品牌区收起并淡出，对话区淡入，输入框顺势滑到底部。全程靠
   max-height / opacity 的补间，不是直接切换显示，所以看着是一次移动而不是跳变。 */

.hx-hero {
  flex: none;
  overflow: hidden;
  max-height: 0;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1),
              opacity .26s ease, transform .42s cubic-bezier(.4, 0, .2, 1),
              padding .42s cubic-bezier(.4, 0, .2, 1);
}

.chat-column.blank { justify-content: center }

.chat-column.blank .hx-hero {
  max-height: 320px;
  padding: 24px 24px 20px;
  opacity: 1;
  transform: none;
}

/* 空白屏时对话区不占空间，输入框才能待在中间 */
.chat-column .conversation { transition: opacity .3s ease }
.chat-column.blank .conversation { flex: none; height: 0; padding: 0; opacity: 0 }

/* 空白屏上的输入框：圆角大一点、虚线边。档位得留着——第一句话就要花钱，用户
   得能在发之前就挑好用哪一档。智商、上下文、发送键等发过第一句再出现。 */
.chat-column.blank .dock { padding-inline: max(18px, calc((100% - 780px) / 2)) }
.chat-column.blank .dock::before { opacity: 0 }
.chat-column .dock::before { transition: opacity .3s ease }

.chat-column.blank .dock .composer {
  border-radius: 20px;
  border-style: dashed;
  padding: 16px 18px 10px;
}

.chat-column.blank .dock .composer textarea { min-height: 56px; font-size: 15px }

.chat-column.blank #effortSwitch,
.chat-column.blank .hx-ctx { display: none }

/* AI 构建开着时档位归弹窗管，这里灰掉但留在原位——直接藏了会让人以为按钮没了 */
.composer-model-switch.locked { opacity: .42 }
.composer-model-switch.locked .model-switch-trigger { cursor: not-allowed }

/* 空手时连发送键都不摆；一开始打字它才淡进来 */
.chat-column.blank .send { display: none }
.chat-column.blank .composer.writing .send { display: grid; animation: hx-pop .22s ease }

/* 发完第一句，这一排控件淡进来 */
.chat-column:not(.blank) .composer-model-switch,
.chat-column:not(.blank) .hx-ctx { animation: hx-pop .38s ease }

@keyframes hx-pop {
  from { opacity: 0; transform: translateY(4px) }
  to { opacity: 1; transform: none }
}

/* ------------------------------------------------------------ 输入栏

   默认就一行高，写长了自己长（JS 按内容改高度）。不做卡片：去掉投影、收薄边框
   和内边距，看起来只是一条线上的输入框。

   输入栏浮在对话上面，消息从它底下滚过去——所以上方压一层从透明到底色的渐变，
   靠近的那几行是柔化淡出，而不是被一条硬边界切掉。 */

/* 渐变要压在对话内容上面，所以输入栏留在流内、只做定位参照：绝对定位试过，
   窄屏那套布局给列定了最小高度，输入栏会飘到内容中间去。 */
.chat-column .dock {
  position: relative;
  border-top: 0;
  background: transparent;
}

.chat-column .dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--bg) 82%);
  pointer-events: none;
}

.chat-column .dock .composer {
  border-radius: 13px;
  padding: 8px 10px 6px;
  box-shadow: none;
  background: var(--panel);
}

/* 起步给三行的地儿。一行起步太局促了——这里写的是一整段需求，不是一句聊天，
   写到第二行就开始跳高，人一边想一边看着框在动。 */
.chat-column .dock .composer textarea {
  min-height: 76px;
  font-size: 15px;
  line-height: 1.5;
}

/* 拖文件进来时给个明确落点 */
.composer.dragging {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

/* 底下那排按钮跟着收窄，别让一行输入配一大片留白 */
.chat-column .composer-bottom { margin-top: 4px; gap: 6px }
.chat-column .composer-bottom .hx-attach,
.chat-column .composer-bottom .send { width: 30px; height: 30px }
.chat-column .composer-bottom .model-switch-trigger { padding: 5px 8px }

/* ------------------------------------------------------- AI 构建 · 想法池

   样式照搬老站，只是从右侧栏挪进了弹窗。 */

/* 输入栏里的「AI 构建」开关，样式跟老站那颗一致 */
.ai-build-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  cursor: pointer;
  user-select: none;
}

.ai-build-toggle > input { position: absolute; opacity: 0; pointer-events: none }

.ai-build-switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--muted) 75%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, var(--panel));
  transition: .16s;
}

.ai-build-switch i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  transition: .16s;
}

.ai-build-toggle > input:checked + .ai-build-switch { border-color: #2d6d20; background: var(--green) }
.ai-build-toggle > input:checked + .ai-build-switch i { left: 17px; background: #fff }
.ai-build-toggle > input:focus-visible + .ai-build-switch {
  outline: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
  outline-offset: 2px;
}

.ai-build-copy { display: grid; line-height: 1.25 }
.ai-build-copy b { font-size: 12px }
.ai-build-copy small { color: var(--muted); font-size: 9px; white-space: nowrap }
.ai-build-toggle > input:checked ~ .ai-build-copy b { color: var(--green) }

@media (max-width: 900px) { .ai-build-copy small { display: none } }

.plan-dialog section { max-width: 980px; width: min(96vw, 980px) }
.plan-ask { display: flex; gap: 10px; align-items: flex-end; padding: 4px 0 2px }
.plan-ask textarea {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  resize: vertical;
  background: var(--panel);
  color: var(--text);
  font: 14px/1.6 inherit;
}
.plan-ask textarea:focus { border-color: var(--green) }

.plan-loading {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--panel);
}
.plan-loading i {
  width: 35px; height: 35px;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: hx-spin .8s linear infinite;
}
.plan-loading b { margin-top: 13px }
.plan-loading small { color: var(--muted) }
@keyframes hx-spin { to { transform: rotate(360deg) } }

#planContent { max-height: 60vh; overflow: auto }

.plan-summary-edit {
  display: block;
  padding: 10px 14px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.plan-summary-edit > span {
  display: flex; align-items: center; gap: 8px;
  color: var(--green); font-size: 11px; font-weight: 700;
}
.plan-summary-edit > span small { color: var(--muted); font-weight: 400 }
.plan-summary-edit textarea {
  display: block; width: 100%; min-height: 52px; margin-top: 4px;
  border: 0; outline: 0; resize: vertical;
  background: transparent; color: var(--text); font: 14px/1.6 inherit;
}
.plan-summary-edit:focus-within { border-color: var(--green); box-shadow: inset 3px 0 var(--green) }

.idea-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 5px 1px 10px }
.idea-library-head h3 { margin: 0; font-size: 17px }
.idea-library-head small { color: var(--green) }
.idea-library-head > span { color: var(--muted); font-size: 12px }

.idea-group { margin-bottom: 13px; border: 1px solid var(--line); background: var(--panel); padding: 12px }
.idea-group > header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px }
.idea-group > header > span {
  width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 50%; background: var(--soft); color: var(--green); font-weight: 700;
}
.idea-group h3, .idea-group p { margin: 0 }
.idea-group h3 { font-size: 14px }
.idea-group p { color: var(--muted); font-size: 11px }

.idea-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px }
.idea-card, .custom-idea {
  min-width: 0; min-height: 112px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 8px;
  text-align: left;
}
.idea-card { position: relative; display: flex; flex-direction: column; cursor: pointer }
.idea-card:hover { border-color: var(--green); transform: translateY(-2px) }
.idea-card.in-pool { border-color: var(--green); background: var(--soft) }
.idea-card em, .custom-idea em { color: var(--green); font-size: 10px; font-style: normal }
.idea-card b { font-size: 12px; line-height: 1.4; margin: 3px 0 }
.idea-card small { color: var(--muted); font-size: 10px; line-height: 1.35 }
.idea-card i { margin-top: auto; color: var(--green); font-size: 9px; font-style: normal }
.idea-card-remove {
  position: absolute; top: 5px; right: 6px;
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: var(--on-accent);
  font: 700 13px/1 sans-serif; cursor: pointer;
}

.custom-idea { display: flex; flex-direction: column; background: linear-gradient(145deg, var(--panel), var(--soft)) }
.custom-idea textarea {
  flex: 1; min-height: 48px; margin: 4px 0; padding: 5px;
  border: 0; border-bottom: 1px solid var(--line); outline: 0; resize: none;
  background: transparent; color: var(--text); font: 11px/1.4 inherit;
}
.custom-idea button { border: 0; background: transparent; color: var(--green); padding: 3px; text-align: right; cursor: pointer; font-size: 10px }

.idea-pool {
  margin: 14px 0 4px;
  border: 2px dashed color-mix(in srgb, var(--green) 55%, var(--line));
  background: linear-gradient(135deg, var(--soft), var(--panel));
  padding: 14px;
}
.idea-pool > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 11px }
.idea-pool h3 { margin: 0; font-size: 17px }
.idea-pool header small { color: var(--green) }
.idea-pool header > span { color: var(--muted); font-size: 12px }
.pool-dropzone {
  min-height: 120px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start; gap: 9px; padding: 10px;
  background: color-mix(in srgb, var(--panel) 75%, transparent);
}
.pool-empty { grid-column: 1/-1; align-self: center; text-align: center; color: var(--muted); padding: 25px }
.pool-idea {
  position: relative; min-width: 0;
  padding: 10px 32px 10px 11px;
  background: var(--panel); border: 1px solid var(--line);
  /* 原来写死 rgba(30,60,25,.07)：一抹带绿的近黑压在 7% 上，深色主题下等于没有阴影。
     --shadow-card 自己就分了深浅两套。 */
  box-shadow: var(--shadow-card);
}
.pool-idea > span, .pool-idea > b, .pool-idea > small { display: block }
.pool-idea > span { color: var(--green); font-size: 10px }
.pool-idea > b { font-size: 13px }
.pool-idea > small { color: var(--muted); font-size: 11px; margin-top: 2px }
.pool-idea > button {
  position: absolute; right: 7px; top: 7px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 17px;
}

@media (max-width: 1100px) { .idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .pool-dropzone { grid-template-columns: 1fr } }

/* 顶上那条"还有更早的记录" */
.hx-older {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.hx-older:hover { border-color: var(--green); color: var(--green) }

/* 标题旁的对话编号，点一下复制 */
.hx-id {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.hx-id:hover { color: var(--text); border-color: var(--text) }
/* 「已复制」原来写死 #2f9e44：这个绿不在令牌里，也没跟着主题走——浅色下压在白面板
   上只有 3.45:1（正文要 4.5:1），提示语反而是最看不清的那一下。换成 --success，
   浅色 5.28:1 / 深色 7.58:1，两边都过。 */
.hx-id.copied { color: var(--success); border-color: var(--success); font-family: inherit }

/* ---------------------------------------------------------------- 文件树

   资产栏按目录摆全部文件，默认折叠，点一层开一层，每行右边能单独下载。 */

.tree-branch { margin: 0 }

.tree-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.tree-head:hover { background: var(--soft) }
.tree-head b { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tree-head em { color: var(--muted); font-size: 10px; font-style: normal }

/* 目录名旁边那句人话：blockstates 到底是什么，看这个 */
.tree-note {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-caret { width: 10px; color: var(--muted); font-style: normal; font-size: 9px }

/* 常驻三类（模型 / 贴图 / 模组本体）：永远在最上面，跟下面那棵完整目录树分开。 */
.pinned-set {
  display: grid;
  /* 网格项默认不肯比自己的内容还窄。不压住的话，说明文字长一点就把整块撑宽，
     右边的"回到这一版"会被顶到面板外面去。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
}
.pinned > .tree-head b { font-weight: 600 }
.pinned > .tree-head:hover { background: var(--panel) }
.pinned-empty { margin: 0 0 2px 22px; color: var(--muted); font-size: 10px }

/* 历史版本那几行：右边两个动作（下载那一版 / 回到那一版）。 */
.pinned-set > * { min-width: 0 }

.version-row { padding-left: 18px }
/* 说明只占一行：换行会把八九个版本撑成一整屏。 */
.version-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-back {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.version-back:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, var(--panel));
  color: var(--green);
}

.assets-split {
  margin: 8px 6px 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .04em;
}

.tree-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 7px;
}

.tree-file:hover { background: var(--soft) }
.tree-file > div { flex: 1; min-width: 0 }
.tree-file b {
  display: block;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-file small { color: var(--muted); font-size: 10px }

.tree-icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center }
.tree-icon svg { width: 16px; height: 16px }
.tree-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* 对话里模型给的文件链接，看得出是能点的 */
.md-file { text-decoration: underline dotted; text-underline-offset: 3px }

/* .bbmodel 当场渲出来的立体小图。贴图那份是 pixelated（放大要看清像素格），
   这份是有明暗过渡的渲染结果，按像素放大只会毛边，得改回平滑。 */
.tree-icon img.model-thumb { image-rendering: auto }

/* 悬停预览气泡。pointer-events 关掉是故意的：它只是给人看一眼，鼠标穿过去不该被
   它挡住，点它也不该有任何反应。位置由脚本钉在那一行旁边，不跟着鼠标跑。 */
.model-peek {
  position: fixed;
  z-index: 60;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
}

.model-peek.on { opacity: 1 }

.model-peek canvas,
.model-peek > i {
  display: block;
  width: 208px;
  height: 208px;
}

/* 载入中那一格：占住和画布一样大的地方，气泡就不会在渲出来的瞬间跳一下 */
.model-peek > i {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.model-peek b {
  display: block;
  max-width: 208px;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------- 项目行上的置顶/归档/删除

   这几条样式老站写在页面自己的 <style> 里，没进 simple.css，所以这边补一份。
   按钮平时不占位，鼠标移到那一行才出来。 */

.project-item { position: relative; display: flex; align-items: center; gap: 6px }
.project-main { min-width: 0; flex: 1 }

.project-actions { display: none; gap: 1px; flex: none }
.project-item:hover .project-actions,
.project-item:focus-within .project-actions { display: flex }

.project-actions button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.project-actions button:hover { background: var(--panel); color: var(--green) }
.project-actions button.danger:hover { color: var(--bad) }
.project-actions button:disabled { opacity: .4; cursor: default }

.pin-mark { margin-right: 4px; color: var(--green); font-size: 9px }

.archive-toggle {
  width: 100%;
  margin: 8px 0 5px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.archive-toggle:hover { color: var(--text) }
.archived-projects { opacity: .82 }

/* 档位卡上的预计消耗：数字是本站真实跑出来的区间，不是拍脑袋写的 */
.model-cost {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.model-choice.selected .model-cost { color: var(--green) }

/* 配置弹窗内容变长了（名称、自定义版本、消耗），撑高就自己滚 */
#setupContent { max-height: min(64vh, 560px); overflow: auto }

/* ------------------------------------------------------------ 进度条

   进度按它自己那份制作清单算：勾掉几条就是几成。清单还没列出来的时候没有真实
   进度可报，就让高光来回扫，表示"在动，但说不准还剩多少"——比随便编一个百分比
   诚实。 */

.hx-bar {
  position: relative;
  height: 26px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, var(--line));
  overflow: hidden;
}

.hx-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in srgb, var(--green) 32%, transparent);
  border-right: 2px solid var(--green);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.hx-bar > span {
  position: relative;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 说不准进度时：一条高光来回扫 */
.hx-bar.unknown > i {
  width: 34%;
  animation: hx-sweep 1.9s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes hx-sweep {
  0% { transform: translateX(-110%) }
  100% { transform: translateX(330%) }
}

.hx-bar.done > i { width: 100% }

/* ------------------------------------------------------------ 两侧收放

   收起来靠的是网格列宽从 316px 收到 0，宽度本身是可以做补间的，所以内容是被
   "推"出去而不是啪一下消失。列宽和面板的透明度用同一条时长，收到一半时面板已
   经淡得差不多，看不到里面的字被挤成一条。 */

.project-content.has-assets {
  position: relative;
  grid-template-columns: minmax(320px, 1fr) 316px;
  transition: grid-template-columns .26s cubic-bezier(.4, 0, .2, 1);
}

.project-content.assets-closed { grid-template-columns: minmax(320px, 1fr) 0px; }

.project-content.assets-closed .assets-panel {
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  opacity: 0;
  pointer-events: none;
}

.assets-panel { transition: opacity .2s ease, padding .26s cubic-bezier(.4, 0, .2, 1); }

.assets-fold, .sidebar > header .icon {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.assets-fold:hover, .sidebar > header .icon:hover { color: var(--green); border-color: var(--green) }

/* 收起后留一个贴边的小把手，别让人找不到怎么放回来 */
.assets-open {
  position: absolute;
  top: 14px;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 7px 9px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  animation: hx-slide-in .22s ease;
  transition: color .15s ease, border-color .15s ease;
}

.assets-open:hover { color: var(--green); border-color: var(--green) }
.assets-open i { font-style: normal }

@keyframes hx-slide-in {
  from { opacity: 0; transform: translateX(14px) }
  to { opacity: 1; transform: translateX(0) }
}

.sidebar { transition: margin-left .26s cubic-bezier(.4, 0, .2, 1) }
.sidebar.closed { margin-left: -276px }
.sidebar > header { display: flex; align-items: center; gap: 8px }
.sidebar > header b { flex: 1 }

/* ---------------------------------------------------------------- 资产栏 */

.assets-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px 22px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, var(--line));
}

.assets-panel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.assets-panel > header small { color: var(--green); font-size: 11px; font-weight: 700; }
.assets-panel > header h2 { margin: 2px 0 0; font-size: 19px; }
.assets-panel > header > span { color: var(--muted); font-size: 11px; white-space: nowrap; }

.asset-group { margin-bottom: 15px; }

.asset-group > h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.asset-group > h3 em { color: var(--muted); font-style: normal; font-weight: 400; }

.asset-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.asset-row:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.asset-row > div { min-width: 0; }
.asset-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.asset-row small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }

.asset-thumb {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--green);
  font-size: 15px;
  font-style: normal;
}

/* 贴图和模型缩略图必须保持像素，不能被浏览器抹平 */
.asset-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.asset-row .asset-get {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-size: 15px;
  padding: 4px 2px;
}

.asset-row .asset-get:hover { transform: translateY(1px); }

.asset-row.primary {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  background: var(--soft);
  box-shadow: inset 3px 0 var(--green);
}

.asset-row.primary b { font-size: 13px; }

.assets-empty {
  padding: 22px 14px;
  border: 1px dashed var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

/* --------------------------------------------------------------- 输入区 */

/* 输入栏跟对话一样宽：站里那条居中留白是给窄阅读区用的，这里不要；
   第二列（184px）本来是放费用估算的，我们没有，留着只会把输入框挤短。 */
.chat-column > .dock {
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 34px 20px;
}

/* 写得开一点：站里那条 .dock .composer textarea 压到 55px，一段需求写下来就得滚 */
.dock .composer textarea { min-height: 132px; max-height: 260px }

/* 主站那条提示写的是 @ 引用，这里没这功能，换成实话 */
.composer-input .pending-files:before { content: '这一轮会连同下面的话一起交给 AI' }

.hx-attach {
  width: 34px;
  height: 38px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.hx-attach:hover,
.hx-attach[aria-expanded="true"] { border-color: var(--green); color: var(--green) }
.hx-attach[aria-expanded="true"] { background: var(--soft) }

/* ------------------------------------------------- 输入框上的素材气泡

   浮层的外壳、行的排版、悬停底色全部来自 simple.css 的 .add-menu（简洁模式输入框
   那个加号菜单就是它），这里只补它没有的三样：搜索框、类型筛选、素材行的缩略图。
   窄屏那套（变成贴屏幕底边的操作面板、避开安全区）在 mobile.css 里已经写过，
   .add-menu 一沾就有，不必再写一遍。 */

.vault-menu { width: 330px }

.vault-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 6px 8px;
}

.vault-head b { font-size: 13px }
.vault-head small { color: var(--muted); font-size: 10px; margin-left: auto }

.vault-back {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}

.vault-back:hover { background: var(--soft); color: var(--green) }

.vault-find { padding: 0 4px 7px }

.vault-find input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}

.vault-find input:focus { border-color: var(--green) }

.vault-kinds { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px 8px }

.vault-kinds button {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.vault-kinds button:hover { border-color: var(--green); color: var(--green) }

.vault-kinds button.on {
  border-color: var(--green);
  background: var(--soft);
  color: var(--green);
  font-weight: 700;
}

/* 列表自己滚，别把整个气泡撑到屏幕外面去 */
.vault-list {
  max-height: 292px;
  overflow: auto;
  overscroll-behavior: contain;
}

.vault-note {
  margin: 6px 8px 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* 素材行要跟气泡里「本机上传」那两行长得一模一样。simple.css 里那条排版规则写的是
   `.add-menu>button`，只管直接儿子；素材行套在 .vault-list 里面，一条都选不中，于是
   退回浏览器自带的按钮外观：灰底带框、文字居中，而且 <i> 还是 inline——inline 元素
   的 width/height 不生效，缩略图就按原图尺寸铺开，一行能顶掉半个气泡。
   所以这里把那条两列网格照抄一遍。 */
.vault-list .vault-pick {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  text-shadow: none;
  cursor: pointer;
}

.vault-list .vault-pick + .vault-pick { margin-top: 2px }

.vault-list .vault-pick:hover,
.vault-list .vault-pick:focus-visible {
  outline: 0;
  background: var(--soft);
  color: var(--green);
}

/* 图标格换成缩略图：尺寸跟 .add-menu>button>i 对齐 */
.vault-pick > i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--slot);
  color: var(--muted);
  font: 700 13px/1 sans-serif;
  font-style: normal;
}

.vault-pick > i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 贴图是 16×16 的像素画，放大要保持硬边 */
  image-rendering: pixelated;
}

.vault-pick.working { opacity: .55; cursor: progress }
.vault-pick:disabled { cursor: progress }

.vault-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 6px 2px;
}

.vault-pager span { color: var(--muted); font-size: 10px }

.vault-pager button {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

.vault-pager button:hover:not(:disabled) { border-color: var(--green); color: var(--green) }
.vault-pager button:disabled { opacity: .4; cursor: default }

/* 产物栏里每个文件旁边那颗「存进我的仓库」。摆在下载键「↓」左边，箭头朝上——
   下是拿到自己电脑，上是收进自己的仓库。跟下载键一样一直看得见（藏在 hover 里
   等于没有这个功能：跨工程复用是这一版的重点，得让人看见才会用），只是平时淡
   一档，鼠标扫到这一行再亮起来。 */
.vault-save {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  transition: opacity .15s ease;
}

.tree-file:hover .vault-save,
.vault-save:focus-visible { opacity: 1 }
.vault-save:hover { background: var(--soft); color: var(--green) }
.vault-save:disabled { cursor: progress }

/* 旁边那颗下载键「↓」一直没人给它写样式：hx.css 里只有 `.asset-row .asset-get`
   （产物栏顶上那条"下载模组"用的），文件树里这颗选不中，于是退回浏览器自带的按钮
   外观——浅色下是个灰框，深色下是一块白方块，箭头几乎看不见。既然「↑」摆在它旁边，
   两颗就得是一对：同一副长相，只是方向相反。 */
.tree-file .asset-get {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  transition: opacity .15s ease;
}

.tree-file:hover .asset-get,
.tree-file .asset-get:focus-visible { opacity: 1 }
.tree-file .asset-get:hover { background: var(--soft); color: var(--green) }

/* 跑着的时候发送键变成停止方块，跟站里任务卡的停止一个意思 */
.send.stopping { background: var(--bad); font-size: 13px }
.send:disabled { opacity: .45; cursor: not-allowed }

/* 这一轮还没完就又发的话，贴在输入框上沿等着，能改能撤。
   注意别放到 .dock 里去：那是两列网格，多一个孩子就把输入框挤成一条。 */
.hx-pending {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px dashed var(--line);
}

.hx-pending:before {
  content: '排在后面 · 这一轮做完自动接着做';
  color: var(--muted);
  font-size: 9px;
}

.hx-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 9px;
  background: var(--soft);
  font-size: 12px;
}

.hx-wait i {
  width: 17px;
  height: 17px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, var(--panel));
  color: var(--green);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.hx-wait > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.hx-wait button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 5px;
}

.hx-wait button:hover { color: var(--green) }
.hx-wait button:disabled { opacity: .45; cursor: default }

/* 插话那颗按钮要比"改""撤"显眼一点：它是会立刻改变这一轮走向的动作 */
.hx-steer {
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line)) !important;
  border-radius: 7px;
  color: var(--green) !important;
  font-weight: 700;
  line-height: 1;
}
.hx-steer:hover { background: color-mix(in srgb, var(--green) 14%, transparent) }
.hx-pencil { font-size: 13px }

/* 用户气泡里带上来的文件 */
.hx-bubble-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px }
.hx-bubble-files span {
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 7px;
  font-size: 10px;
  color: var(--muted);
}

/* ------------------------------------------------------- 内核的工作记录 */

.hx-turn { margin: 0 0 18px }
.hx-work { margin: 0 }

.hx-work > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  list-style: none;
}

.hx-work > summary::-webkit-details-marker { display: none }
.hx-work > summary b { font-size: 12px; font-weight: 600; }
/* 想得深浅那三档换成附魔台的经验球（1/2/3 级）：站里的图标库自己的图，
   比"低中高"三个字更像 MC。底色留着，图直接压在原来那块方牌上。 */
/* 文件图标是内联图形：描边跟着主题色，咖啡杯自己带 Java 的蓝橙，不受影响 */
.asset-thumb svg { width: 21px; height: 21px }

.jar-card i svg { width: 22px; height: 22px }

.model-switch-menu > button > .switch-icon img {
  /* 原图是"经验球 + 数字"的横构图，按方牌的宽高铺满才看得清是几级 */
  width: 28px;
  height: 21px;
  object-fit: contain;
  /* 像素画放大要保持硬边，别让浏览器抹成糊的 */
  image-rendering: pixelated;
}

/* 后台停掉的档位：还看得见有这么一档，但按不动。
   这一条是兜底；真正生效的是文件末尾那组（整块压淡会把"为什么关了"那行也压淡）。 */
.model-switch-menu > button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.model-switch-menu .model-group-title {
  margin: 7px 10px 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.model-grid-category {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.hx-now {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.hx-now:not(:empty):before { content: '· ' }

/* 这一轮用的档位：贴在步数前面，翻旧对话时也说得清那轮花的是哪档的钱 */
.hx-run-model:not(:empty) {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.hx-work > summary small { color: var(--muted); font-size: 11px; }
.hx-work > summary .grow { flex: 1 }
.hx-work > summary:after { content: '›'; color: var(--muted); font-size: 18px; transition: transform .15s }
.hx-work[open] > summary:after { transform: rotate(90deg) }

/* 帮手名单：不点开工作记录也看得见有谁在一起做 */
.hx-crew {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
  padding: 9px 13px 11px;
}

.hx-crew-title { display: block; font-size: 11px; color: var(--muted); font-weight: 600 }

.hx-crew-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.hx-mate {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.hx-mate:hover { border-color: var(--green) }
.hx-mate-body { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.hx-mate-body b { font-size: 12px }
.hx-mate-body small,
.hx-mate-body em {
  font-size: 10px;
  color: var(--muted);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头像用正版皮肤切出来的脸，像素放大不要模糊 */
.hx-face {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

.hx-face img { width: 100%; height: 100%; image-rendering: pixelated; display: block }
.hx-mate.working .hx-face { box-shadow: 0 0 0 2px var(--green) }
.hx-mate.working em { color: var(--green) }
.hx-mate.done .hx-face { box-shadow: 0 0 0 2px var(--line) }

/* 跑动中的那枚点，和线上任务卡的呼吸灯一致 */
.hx-live { width: 7px; height: 7px; flex: none; background: var(--green); animation: hx-beat 1.1s infinite }
.hx-work.settled .hx-live { background: var(--muted); animation: none }
/* 半路断掉的那一轮：灯换个颜色，标题那句话本身已经说清楚了，不用再加图标 */
.hx-work.broke .hx-live { background: var(--warn) }
@keyframes hx-beat { 50% { opacity: .25 } }

.hx-steps {
  margin: 0;
  padding: 0 13px 8px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
  list-style: none;
}

.hx-steps > li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-size: 12px;
  line-height: 1.55;
}

.hx-steps > li:last-child { border-bottom: 0 }
.hx-steps time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px }
.hx-steps .hx-name { color: var(--green); font-weight: 600 }
.hx-steps .hx-brief { color: var(--muted); overflow-wrap: anywhere }
.hx-steps > li.bad .hx-name { color: var(--bad) }

.hx-steps details > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  list-style: none;
  margin-top: 3px;
}

.hx-steps details > summary::-webkit-details-marker { display: none }
.hx-steps details > summary:before { content: '查看输出'; }
.hx-steps details[open] > summary:before { content: '收起输出'; }

.hx-out {
  margin: 6px 0 2px;
  padding: 9px 10px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font: 11px/1.65 ui-monospace, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 待办清单：内核自己维护的，直接照搬显示 */
.hx-todos { margin: 0 0 18px; padding: 12px 13px; border: 1px solid var(--line); background: var(--panel) }
.hx-todos > b { display: block; margin-bottom: 8px; color: var(--green); font-size: 11px }
.hx-todos ul { margin: 0; padding: 0; list-style: none }
.hx-todos li { display: flex; gap: 8px; padding: 4px 0; font-size: 12px; line-height: 1.5 }
.hx-todos li i { flex: none; width: 13px; color: var(--muted); font-style: normal }
.hx-todos li.done { color: var(--muted) }
.hx-todos li.done i { color: var(--green) }
.hx-todos li.doing i { color: var(--green) }
.hx-todos li.doing { font-weight: 600 }

/* 思考：默认折起，想看的人才看 */
.hx-think { margin: 6px 0 0 }
.hx-think > summary { color: var(--muted); cursor: pointer; font-size: 11px; list-style: none }
.hx-think > summary::-webkit-details-marker { display: none }
.hx-think > summary:before { content: '思考过程' }
.hx-think[open] > summary:before { content: '收起思考' }
.hx-think p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; white-space: pre-wrap }

/* --------------------------------------------------------------- 零碎 */

.hx-flag {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.hx-flag.busy { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); color: var(--green) }
.hx-hint { color: var(--muted); font-size: 11px }
.hx-free { margin-right: 4px; color: var(--muted); font-size: 11px }

/* 回旧版的路留着，但不抢眼：默认已经是新版了 */
.hx-legacy {
  margin-right: 4px;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.hx-legacy:hover { color: var(--text); background: var(--soft) }

/* 模型答复里的 markdown */
.md-p { margin: 0 0 8px; line-height: 1.75 }
.md-p:last-child { margin-bottom: 0 }
.md-head { margin: 12px 0 6px; font-size: 13px }
.md-head:first-child { margin-top: 0 }
.md-list { margin: 0 0 8px; padding-left: 20px; line-height: 1.75 }
.md-list li { margin: 2px 0 }
.md-code { margin: 0 0 8px; padding: 9px 11px; overflow-x: auto;
  border: 1px solid var(--line); background: var(--soft);
  font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre }
.message code, .hx-report code { padding: 1px 4px; border: 1px solid var(--line);
  background: var(--soft); font: 12px ui-monospace, Menlo, Consolas, monospace }
.message a, .hx-report a { color: var(--green); word-break: break-all }
.md-table { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 12px }
.md-table th, .md-table td { padding: 5px 8px; border: 1px solid var(--line);
  text-align: left; vertical-align: top }
.md-table th { background: var(--soft); font-weight: 700 }

/* 助手卡：模型派出去的分身，嵌在工作记录里，各有各的步骤和回报 */
.hx-subhost { display: block !important; padding: 0 !important }
.hx-sub { margin: 4px 0 4px 6px; border-left: 2px solid
  color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green) 5%, transparent) }
.hx-sub > summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  cursor: pointer; list-style: none; font-size: 12px }
.hx-sub > summary::-webkit-details-marker { display: none }
.hx-sub > summary i { color: var(--green); font-style: normal }
.hx-sub > summary small { color: var(--muted); font-size: 10px }
.hx-sub > summary .hx-face { width: 20px; height: 20px; font-size: 10px }
.hx-ask { margin: 0 8px 4px; color: var(--muted); font-size: 11px; line-height: 1.5 }
.hx-report { margin: 4px 8px 8px; padding: 6px 8px; background: var(--panel);
  border: 1px solid var(--line); font-size: 11px; line-height: 1.6;
  white-space: pre-wrap }

/* jar 是用户真正要带走的东西，给它整块可点的区域 */
.jar-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  gap: 10px; margin-bottom: 12px; padding: 11px 12px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green) 9%, var(--panel)) }
.jar-card:hover { background: color-mix(in srgb, var(--green) 16%, var(--panel)) }
.jar-card i { display: grid; place-items: center; width: 34px; height: 34px;
  background: color-mix(in srgb, var(--green) 20%, var(--panel));
  color: var(--green); font-style: normal; font-size: 17px }
.jar-card b { display: block; color: var(--text); font-size: 13px }
.jar-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px }
.jar-card span { color: var(--green); font-size: 17px }
.bundle-get { padding: 3px 9px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 11px; cursor: pointer }
.bundle-get:hover { border-color: var(--green); color: var(--green) }
.hx-stop { padding: 3px 9px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 11px; cursor: pointer }
.hx-stop:hover { border-color: var(--bad); color: var(--bad) }

/* 上下文占用：数字加一条细进度，逼近上限时变色——超了就得开新会话 */
.hx-ctx { display: flex; flex-direction: column; gap: 4px; min-width: 138px }
.hx-ctx b { color: var(--muted); font-size: 11px; font-weight: 500 }
.hx-ctx i { display: block; height: 3px; background: var(--line) }
.hx-ctx em { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s }
.hx-ctx em.hot { background: var(--bad) }

@media (max-width: 1050px) {
  .project-content.has-assets { grid-template-columns: 1fr; }
  .assets-panel { border-left: 0; border-top: 1px solid var(--line); min-height: 420px; }
}

/* ------------------------------------- 档位卡片上的三样新东西（2026-08-29）

   倍率标签、关闭原因/会员门槛、smod5 的金色。三样都挂在 simple.css 那套
   「35px | 1fr | auto」三列网格上（.model-switch-menu > button），**不动列定义**
   ——那张表 simple.html 也在引，改列宽会连带把旧版简洁模式一起改了。

   第三行是靠网格自动排版隐式生成的：往第 2 列再塞一个元素，它自己会落到第 3 行。
   代价是 simple.css 里给图标和右栏写的 grid-row:1/3 只盖住前两行，所以这里把它们
   改成 1/-1，让它们跟着长到第三行，不然图标会吊在卡片上半部分。 */

.model-switch-menu > button > span,
.model-switch-menu > button > em { grid-row: 1 / -1 }

.model-switch-menu > button > u,
.model-switch-menu > button > small { grid-column: 2 }

/* 名字后面那枚单价倍率。**写的是单价之比，不是每轮花费之比**——smod5 单价 ×15
   但它写得少，一轮花的钱反而可能比 hmod5 少。所以标签上"单价"两个字不能省，
   省了这张卡片自己就前后矛盾（上面写 ×15、下面的区间却和 hmod5 一样）。 */
.model-switch-menu > button > b > .model-rate {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--muted) 32%, transparent);
  border-radius: 5px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 「消耗极高」。刻意不用 --warn：浅色主题下 --warn 和 --tier-gold 是同一个
   #8a6410，跟 smod5 的金色撞在一起就看不出这是一句提醒了。用 --danger。 */
.model-switch-menu > button > b > .model-warn {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 第三行：点不动的写原因，能点的写这一轮大概花多少。
   两者都是 <u>，只有类名不同——不加下划线，用 <u> 纯粹因为它是个还没被这套
   样式表占用的行内标签，不用再往按钮里塞一层 div 破坏网格。 */
.model-switch-menu > button > u {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.4;
  text-decoration: none;
}
/* 关闭是"出问题了"，用 --danger；会员门槛是"你还没买这一档"，用 --tier-gold。
   两者都涂红的话，一句正常的升级提示看着像故障。--tier-gold 浅色是 #8a6410、
   深色 #f0bd4d，两边都过 4.5:1（这就是它不是"亮金"的原因，见 tokens.css 那条注释）。 */
.model-switch-menu > button > .model-why { color: var(--danger) }
.model-switch-menu > button > .model-gate { color: var(--tier-gold); font-weight: 700 }
.model-switch-menu > button > .model-cost-hint { color: var(--muted) }

/* 灰掉的那一档。simple.css 里已经有 :disabled:not(.selected){opacity:.5}，
   hx.css 上面也有一条 opacity:.45——但整块变半透明会把原因那一行也一起压淡，
   而那一行恰恰是这时候最该读清的。所以这里改成：名字和副标题压淡，原因保持不淡。 */
.model-switch-menu > button:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: var(--surface-sunken);
}
.model-switch-menu > button:disabled > span,
.model-switch-menu > button:disabled > b,
.model-switch-menu > button:disabled > small { opacity: .45 }
/* 右栏那两个字（「已关闭」/「需会员」）跟第三行同色系，一眼能对上是哪种情况 */
.model-switch-menu > button:disabled > em { color: var(--muted); opacity: .85 }
.model-switch-menu > button[data-state="off"] > em { color: var(--danger) }
.model-switch-menu > button[data-state="locked"] > em { color: var(--tier-gold) }
/* 灰的那一档不该有 hover 反馈：给了就像还能点 */
.model-switch-menu > button:disabled:hover { background: var(--surface-sunken) }

/* smod5 的金色。用 --tier-gold 而不是 --gold——后者在 tokens.css 里是
   `--gold: var(--accent)`，是**绿色**，写错了根本看不出是金的。
   浅色下 --tier-gold 是 #8a6410（暗金，当文字色才够 4.5:1 对比度）；想要"亮金"
   观感只能当背景用，所以左边那块方牌走渐变，配色跟站里 .rank-ss 那枚等级徽章一致。 */
.model-switch-menu > button[data-tone="gold"] > b { color: var(--tier-gold) }
.model-switch-menu > button[data-tone="gold"] > b > .model-rate {
  border-color: color-mix(in srgb, var(--tier-gold) 45%, transparent);
  color: var(--tier-gold);
}
.model-switch-menu > button[data-tone="gold"]:not(:disabled) > span {
  color: #4d3400;
  background: linear-gradient(135deg, #ffe58a, #d89b22);
  box-shadow: inset 0 -2px 0 rgba(117, 76, 0, .28);
}
.model-switch-menu > button[data-tone="gold"].selected {
  background: color-mix(in srgb, var(--tier-gold) 11%, var(--panel));
}
.model-switch-menu > button[data-tone="gold"].selected > em { color: var(--tier-gold) }

/* 收起来的那颗按钮上也认一下金色：挂着 smod5 的时候，不展开也看得出在用哪一档 */
.composer-model-switch[data-tone="gold"] .model-switch-trigger > small {
  color: var(--tier-gold);
  font-weight: 700;
}

/* 选单底部那一段说明（2026-08-29）。目前只有上下文长度那个选单用它：
   「选长的会更贵，但没有固定倍数」这句话一行 note 放不下，而塞进条目里会把
   条目撑成三行、挤掉真正要读的门槛提示。 */
.model-switch-menu > .switch-foot {
  margin: 8px 3px 1px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

/* 上下文那颗按钮跟旁边的占用条挨着，中间不要再留一道缝 */
.composer-bottom #ctxSwitch { margin-right: 6px }

/* 上下文这颗按钮上只留一个数字：没有图标、没有「长度」二字。
   simple.css 给 .model-switch-trigger>small 写了「左边一道竖线 + 内边距」，那是
   用来跟前面的标签分隔的；这里没有标签可分隔，竖线要去掉，不然按钮左侧会挂一根
   孤零零的竖线。同理 @media(max-width:600px) 那条会把 small 整个藏掉——对模型和
   智商那两颗只是少显示个副标题，对这一颗等于整个按钮变空，所以要显式放开。 */
#ctxSwitch .model-switch-trigger > small {
  padding-left: 0;
  border-left: 0;
  display: inline !important;
  font-size: 12px;
  font-weight: 800;
}

/* 条目里不摆方牌之后，第一列那 35px 要收掉，否则左边空一大块 */
#ctxSwitch .model-switch-menu > button {
  grid-template-columns: minmax(0, 1fr) auto;
}
#ctxSwitch .model-switch-menu > button > b,
#ctxSwitch .model-switch-menu > button > small,
#ctxSwitch .model-switch-menu > button > u { grid-column: 1 }
#ctxSwitch .model-switch-menu > button > em { grid-column: 2 }

/* 思考深度那一行：并进模型选单之后，工具条上少一颗按钮。做成分段控件，
   三个选项摊开摆着，不用再点进去一层。 */
.model-switch-menu > .switch-effort {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 3px 1px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.model-switch-menu > .switch-effort > span {
  flex: 1;
  color: var(--muted);
  font-size: 10px;
}
.model-switch-menu > .switch-effort > button {
  appearance: none;
  min-width: 34px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.model-switch-menu > .switch-effort > button:hover {
  border-color: var(--green);
  color: var(--green);
}
.model-switch-menu > .switch-effort > button.on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, var(--panel));
  color: var(--green);
  font-weight: 800;
}

/* ---------------------------------------------- 老工程改 mod 标识
   资产栏里那一行入口只在"标识还是平台默认名"的工程上出现（服务端 renamable 说了
   算）。用户自己起过名的工程不给这个东西看：他没有要解决的冲突，改名只会白毁一次
   存档。 */
.modid-row{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.modid-row>div{flex:1;min-width:0}
.modid-row small{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.modid-row b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;word-break:break-all}
.modid-row button{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  padding:6px 12px;cursor:pointer;white-space:nowrap;font-size:12px}
.modid-row button:hover{border-color:var(--green);color:var(--green)}
.rename-dialog>section{width:min(580px,100%)}
.rename-field{display:block;margin:0 0 14px}
.rename-field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.rename-field input{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;background:var(--panel);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.rename-field small{display:block;color:var(--muted);font-size:11px;line-height:1.6;
  margin-top:6px}
.rename-warn{border:1px solid var(--line);border-left:3px solid #d9822b;
  border-radius:10px;padding:12px 14px;background:var(--soft);font-size:12px;
  line-height:1.7}
.rename-warn ul{margin:8px 0 8px;padding-left:18px}
.rename-warn li{margin:0 0 7px}
.rename-warn p{margin:8px 0 0;color:var(--muted)}
.rename-ack{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;font-size:12px;
  line-height:1.6;cursor:pointer}
.rename-ack input{margin-top:2px}
.rename-live{margin:14px 0 0;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--soft);font-size:12px;line-height:1.7;
  white-space:pre-wrap;max-height:220px;overflow:auto}
.rename-live b{display:block;margin-bottom:4px}


/* ------------------------------------------------ 集群滑块 / 单轮积分上限滑块
   两个都长在 .model-switch-menu 里面，沿用「思考深度」那一行的骨架（分隔线 +
   左边一个灰标题 + 右边控件），只把分段按钮换成滑块。控件本身不写说明文字：
   要回答的只有「几路、贵几倍」和「最多花多少」，数字自己答完了。 */
.model-switch-menu > .switch-slide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 3px 1px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.model-switch-menu > .switch-slide > span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.model-switch-menu > .switch-slide > input[type="range"] {
  flex: 1;
  min-width: 96px;
  accent-color: var(--green);
  cursor: pointer;
}
/* 右边那个读数：数字 + 倍率。等宽字体，拖滑块时不会左右跳。 */
.model-switch-menu > .switch-slide > b {
  min-width: 54px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.model-switch-menu > .switch-slide > b > i {
  margin-left: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
}
.model-switch-menu > .switch-slide > b.over { color: var(--warn, #d08700) }
.model-switch-menu > .switch-slide > b.over > i { color: inherit }

/* 够不着的档位：滑块还能拖过去，但下面写一行为什么——直接把滑块截短的话，
   用户根本不知道还有更高的档存在。 */
.model-switch-menu > .switch-note {
  margin: 4px 3px 1px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.model-switch-menu > .switch-note.gate { color: var(--gold, #b8860b) }

/* 集群那颗按钮跟 272k 那颗同样待遇：挨着邻居，中间不留多余的缝。 */
.composer-bottom #crewSwitch { margin-left: 6px }

/* ------------------------------------------- 模型 / 物品 / 配方（工作台）

   输入栏正上方那一排胶囊和它展开的面板。整块都是 .dock 的子节点、留在文档流里：
   展开时对话区变短，但一条消息都不会被盖住。绝对定位试过——盖住的正好是最新
   那几条，那是用户最想看的几条。

   .dock 自己是 grid 且带 gap，所以这里只放一个容器进去（空的时候 hidden，
   直接从网格里消失，不会白占一条 gap）。 */

.hx-bench[hidden] { display: none }
.hx-bench-panel-host:empty { display: none }
.hx-bench-chips { display: flex; align-items: center; gap: 6px; padding: 0 2px }

.hx-bench-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.hx-bench-chip b { font-weight: 600 }
.hx-bench-chip small { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums }
.hx-bench-chip:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)) }

.hx-bench-chip.on {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  color: var(--green);
}
.hx-bench-chip.on small { color: color-mix(in srgb, var(--green) 72%, var(--text-muted)) }

/* 这一格还没有东西时不消失、也不装作能点：位置钉住，产物一出现就自己亮起来 */
.hx-bench-chip[disabled] { opacity: .38; cursor: default }
.hx-bench-chip[disabled]:hover { border-color: var(--line) }

.hx-bench-panel {
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  overflow: hidden;
  animation: hx-bench-in .18s ease;
}

@keyframes hx-bench-in {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: none }
}

.hx-bench-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 13px;
  border-bottom: 1px solid var(--line);
}
.hx-bench-head > b { font-size: 13px; font-weight: 600 }
.hx-bench-head > small { color: var(--text-muted); font-size: 12px }
.hx-bench-head .grow { flex: 1 }
.hx-bench-tabs { display: flex; gap: 2px }

.hx-bench-tab {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.hx-bench-tab.on { border-color: var(--line); color: var(--text); background: var(--bg) }

.hx-bench-close {
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.hx-bench-close:hover { background: var(--bg); color: var(--text) }

.hx-bench-body { max-height: 292px; overflow: auto; padding: 11px 13px 13px }

.hx-bench-empty {
  margin: 0;
  padding: 30px 12px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.7;
}

/* --------------------------------------------------------------- 背包网格 */

.hx-inv {
  display: grid;
  grid-template-columns: repeat(auto-fill, 42px);
  gap: 4px;
  justify-content: start;
}

/* 原版背包那种内凹格子：靠 inset 阴影压出层次，深浅两套主题都跟着底色走 */
.hx-slot {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  cursor: default;
}
.hx-slot img { width: 32px; height: 32px; image-rendering: pixelated }
.hx-slot.has-recipe { cursor: pointer }
.hx-slot:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--line)) }

/* 这一条已经注册了，但工程里还没写出它的贴图（生物尤其常见）。原版那张紫黑棋盘
   在游戏里合适，一屏摆二十几个就只剩噪音，所以压成一层很淡的斜纹：看得出是
   "还没有图"，又不抢真有图的那些格子。 */
.hx-slot.blank::after,
.hx-craft-grid div.blank::after,
.hx-recipe-index button.blank::after {
  content: "";
  width: 66%;
  height: 66%;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--text) 13%, transparent) 0 3px,
    transparent 3px 6px);
}

/* ------------------------------------------------------ 物品信息（游戏内那种） */

.hx-tip {
  position: fixed;
  z-index: 60;
  max-width: 268px;
  padding: 5px 7px;
  border: 2px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(#100010f2, #100010f2) padding-box,
    linear-gradient(#2b0b5e, #5028b4 50%, #2b0b5e) border-box;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.55;
  pointer-events: none;
}
.hx-tip b { display: block; font-weight: 400 }
.hx-tip .tip-id { color: #575757; font-size: 11.5px; word-break: break-all }
.hx-tip .tip-lore { color: #a8a8a8 }
.hx-tip .tip-meta { margin-top: 3px; color: #6a6aff; font-size: 11.5px }

/* -------------------------------------------------------------- 合成配方 */

.hx-recipe { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 12px }

.hx-recipe-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, 34px);
  gap: 3px;
  align-content: start;
  max-height: 244px;
  overflow: auto;
}
.hx-recipe-index button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
  cursor: pointer;
}
.hx-recipe-index button.on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, var(--bg));
}
.hx-recipe-index img { width: 26px; height: 26px; image-rendering: pixelated }

.hx-craft { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0 }
.hx-craft-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px }
.hx-craft-grid div {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
}
.hx-craft-grid div.empty { background: transparent; border-style: dashed; opacity: .45 }
.hx-craft-grid img { width: 30px; height: 30px; image-rendering: pixelated }
.hx-craft-tag { color: var(--text-muted); font-size: 15px }
.hx-craft-arrow { color: var(--text-muted); font-size: 17px }

.hx-craft-out {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--green) 8%, var(--bg));
}
.hx-craft-out img { width: 38px; height: 38px; image-rendering: pixelated }

.hx-craft-name { display: grid; gap: 2px; min-width: 0 }
.hx-craft-name b { font-size: 13px; font-weight: 600 }
.hx-craft-name small { color: var(--text-muted); font-size: 12px }
.hx-recipe-source { margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px }

/* ------------------------------------------------------------------ 窄屏

   mobile.css 里那颗 .m-assets 胶囊是 `position:absolute; bottom:100%`，量的是
   .dock 的上沿——多了这一块之后它跟着往上走，两者不会撞。剩下的就是别让面板
   把输入框顶出屏幕：高度按视口给，超了自己滚。 */

@media (max-width: 760px) {
  .hx-bench-chips { padding: 0; gap: 5px }
  .hx-bench-chip { padding: 4px 10px }
  .hx-bench-body { max-height: min(38vh, 240px); padding: 9px 10px 11px }
  .hx-recipe { grid-template-columns: minmax(0, 1fr); gap: 9px }
  .hx-recipe-index { max-height: 76px }
  .hx-craft { gap: 10px }
  .hx-tip { max-width: min(268px, calc(100vw - 24px)) }
}

/* ------------------------------------------- 第二批：九宫格看得出是九格 + 立体图标

   原来空位是虚线 + 半透明，浅色底下几乎看不见：五个材料浮在那儿，不像工作台，
   用户报的「合成有问题不是九格」就是这么来的。现在空位跟实位长一个样，只是里面
   没东西，外面再套一圈框——跟游戏里那张工作台界面对上。 */

.hx-craft-grid {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 3%, var(--panel));
}

.hx-craft-grid div.empty {
  border-style: solid;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
  opacity: 1;
}

/* 立体图标是渲出来导成的 PNG（72px 缩到 32px），按像素放大会糊成锯齿，
   这一类不要 pixelated；平面贴图那一类还是要，不然 16×16 会被抹平。 */
.hx-slot img.is-3d,
.hx-craft-grid img.is-3d,
.hx-recipe-index img.is-3d,
.hx-craft-out img.is-3d { image-rendering: auto }

.hx-slot img.is-3d { width: 36px; height: 36px }
.hx-craft-grid img.is-3d { width: 34px; height: 34px }
.hx-recipe-index img.is-3d { width: 30px; height: 30px }
.hx-craft-out img.is-3d { width: 42px; height: 42px }

/* ------------------------------------------ 配方：熔炉/锻造台那几种画法的槽位

   九宫格之外还有三种形态（烧炼、锻造、加工），它们是一排槽而不是一张网格。
   槽的长相跟九宫格里那些一样，只是底下多一行小字写它在游戏里叫什么位置。 */

.hx-craft-row { display: flex; align-items: flex-start; gap: 6px }
.hx-craft-in { display: grid; justify-items: center; gap: 3px }
.hx-craft-in small { color: var(--text-muted); font-size: 11px; line-height: 1.2 }

.hx-craft-row .hx-cell {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
}
.hx-craft-row .hx-cell img { width: 30px; height: 30px; image-rendering: pixelated }
.hx-craft-row .hx-cell img.is-3d { width: 34px; height: 34px; image-rendering: auto }
.hx-craft-row .hx-cell.empty { border-style: dashed; opacity: .45 }

.hx-craft-note { color: var(--text-muted); font-size: 12px; line-height: 1.45 }

/* 模组自己定义的配方类型，原样写出来 */
.hx-craft-type {
  margin-top: 2px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  justify-self: start;
  word-break: break-all;
}

/* ---------------------------------------------------------- 消息一键复制

   高度为 0：按钮落在两条消息之间那 18px 的空当里（.message 的 margin-bottom），
   不占布局、不挤正文。不悬停时 pointer-events 关着，框选整段文字不会被它截住。

   淡出留 200ms 再走，跟站里别处的悬停节奏一致；淡入不留延迟——一颗按钮等三分之一
   秒才出来，读起来是卡顿不是克制。 */

.hx-msg-tools {
  height: 0;
  position: relative;
  top: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity .14s ease .2s;
}

/* 用户那条是有底色的气泡，按钮往下让一点，落在气泡外面而不是压在它边上 */
.message.user .hx-msg-tools { justify-content: flex-end; top: 5px; margin: 0 -4px }
/* 助手那条是整幅的纯文本，按钮贴着正文起始的那一边 */
.message.assistant .hx-msg-tools { justify-content: flex-start }

.message:hover > .hx-msg-tools,
.message.tools-on > .hx-msg-tools {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.hx-msg-copy {
  width: 24px;
  /* 18 而不是 20：两条消息之间只有 18px 的空当，按钮再高一点，
     底边离下一条第一行的字就只剩 1px 了 */
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
}

.hx-msg-copy svg { width: 13px; height: 13px; display: block }
.hx-msg-copy:hover {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  color: var(--green);
}
.hx-msg-copy:active { transform: translateY(1px) }

/* 窄屏：没有 hover，按钮靠点一下气泡叫出来，手指点得到才行 */
@media (max-width: 760px) {
  .hx-msg-copy { width: 32px; height: 26px }
  .hx-msg-copy svg { width: 15px; height: 15px }
  .message.user .hx-msg-tools { top: 8px }
}