/*! Aimyria · 聊天生图工作台样式层（aimyria-cc-studio.css）  v4  2026-09-24
 * ═══════════════════════════════════════════════════════════════════════
 * v4 变化：
 *   ① 输入框上方改成**三段式**：〔对话|生图〕〔模型〕〔接口〕
 *      —— 模式切换由我们自己重做（原生那两个按钮整块隐藏）
 *   ② 删掉 v3 的 body.ax-driving 隐身规则：v4 不再驱动原生控件，
 *      改为在请求出口改写负载，所以没有任何东西需要"藏"。
 *   ③ 原生控件继续隐藏（值不用了，但留在 DOM 里让 Vue 不报错）：
 *      .studio-mode-switch / .studio-key-control /
 *      .studio-inline-model-select / .studio-chat-model-select
 *
 * 命名空间：axst-（v3 教训：`ax-` 前缀被原生 CSS 占用过，撞了 .ax-modal）
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. 原生控件让位 ──────────────────────────────────────────────
   ⚠️ 四个都要写。少写哪一个，对应位置就会残留一个原生控件和我们的重复：
     · .studio-mode-switch        底栏的「对话 / 生图」胶囊（v4 起由自绘控件接管）
     · .studio-key-control        左栏的接口选择器
     · .studio-inline-model-select 生图模式的模型选择器
     · .studio-chat-model-select   对话模式的模型选择器（**没有** inline 类，最容易漏） */
.studio-mode-switch,
.studio-key-control,
.studio-inline-model-select,
.studio-chat-model-select {
  display: none !important;
}

/* ─── 1c. 原生视图 tab 整组隐藏（v5：自绘三合一顶替，见 .axst-tabs）───────
   ⚠️ 不是单个隐藏 —— 三个（对话/生图/图片库）都收进自绘控件。
   为什么放顶部：切到图片库时整个作曲器会被卸载，放输入框旁会消失。 */
.studio-tabs {
  display: none !important;
}

/* ─── 2. 三段式控制栏 ─────────────────────────────────────────────── */
.axst-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 2px 9px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(216, 206, 194, 0.14);
}
html:not(.dark) .axst-bar { border-bottom-color: rgba(60, 48, 38, 0.10); }

/* 模式切换：自绘分段控件 */
.axst-modes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(216, 206, 194, 0.18);
  background: rgba(255, 255, 255, 0.045);
}
.axst-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(154, 149, 140);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.axst-mode:hover { color: rgb(200, 195, 186); background: rgba(255, 255, 255, 0.05); }
.axst-mode.is-on {
  background: linear-gradient(180deg, #d97757, #c2603f);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.axst-mode.is-on:hover { background: linear-gradient(180deg, #dd8062, #c96543); }

/* 两个选择器 chip */
.axst-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(216, 206, 194, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: rgb(222, 220, 216);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.axst-chip:hover {
  border-color: rgba(204, 120, 92, 0.55);
  background: rgba(204, 120, 92, 0.08);
}
.axst-chip.is-open {
  border-color: rgba(204, 120, 92, 0.72);
  background: rgba(204, 120, 92, 0.13);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.10);
}
.axst-chip.is-empty {
  border-style: dashed;
  border-color: rgba(204, 120, 92, 0.45);
  color: rgb(204, 120, 92);
}
.axst-chip.is-empty:hover { background: rgba(204, 120, 92, 0.12); }
.axst-chip[disabled] { opacity: 0.55; cursor: not-allowed; }
.axst-chip[disabled]:hover { border-color: rgba(216, 206, 194, 0.18); background: rgba(255, 255, 255, 0.045); }

.axst-chip-ico { flex: 0 0 auto; opacity: 0.62; display: inline-flex; }
.axst-chip.is-open .axst-chip-ico { opacity: 0.95; }
.axst-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.axst-chip-label.is-muted { color: rgb(154, 149, 140); font-weight: 500; }
.axst-chip-mul {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(204, 120, 92, 0.15);
  color: #d97757;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.axst-chip-chev {
  flex: 0 0 auto;
  opacity: 0.5;
  transition: transform 0.2s;
  display: inline-flex;
}
.axst-chip.is-open .axst-chip-chev { transform: rotate(180deg); }

/* ─── 3. 自绘下拉面板 ─────────────────────────────────────────────── */
.axst-pop {
  position: fixed;
  z-index: 100000030;
  min-width: 316px;
  max-width: min(560px, calc(100vw - 24px));
  max-height: 342px;
  overflow: auto;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(216, 206, 194, 0.22);
  background: #1c1b19;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: axst-pop-in 0.14s ease-out;
}
@keyframes axst-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.axst-pop-search {
  display: block;
  width: 100%;
  height: 33px;
  margin: 1px 1px 5px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(216, 206, 194, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgb(232, 226, 216);
  font-size: 12.5px;
  outline: none;
}
.axst-pop-search::placeholder { color: rgba(154, 149, 140, 0.85); }
.axst-pop-search:focus { border-color: rgba(204, 120, 92, 0.6); }

.axst-pop-head {
  padding: 6px 10px 4px;
  color: rgba(154, 149, 140, 0.95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.axst-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s;
}
.axst-opt:hover { background: rgba(255, 255, 255, 0.06); }
.axst-opt.is-on { background: rgba(204, 120, 92, 0.14); }
.axst-opt.is-off { opacity: 0.42; cursor: not-allowed; }
.axst-opt.is-off:hover { background: transparent; }

.axst-opt-main { flex: 1 1 auto; min-width: 0; }
.axst-opt-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(232, 226, 216);
  font-size: 13px;
  font-weight: 600;
}
.axst-opt-sub {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(154, 149, 140, 0.95);
  font-size: 11px;
  font-weight: 500;
}
.axst-opt-tail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.axst-opt-tag {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(200, 195, 186, 0.9);
}
.axst-opt-tag.is-img { background: rgba(204, 120, 92, 0.16); color: #d97757; }
.axst-opt-tag.is-ok { background: rgba(63, 143, 90, 0.18); color: #5faf7c; }
.axst-opt-tag.is-no { background: rgba(180, 90, 70, 0.16); color: #d98a72; }
.axst-opt-check { flex: 0 0 auto; color: #d97757; display: inline-flex; }

/* 余额不足的分组选项（v7）：橙色警示文案替代"模型 N 个"，
   ⚠️ 用品牌橙而不是红色 —— 绿=通/红=断是状态色，这里不是"故障"是"待充值" */
.axst-opt-warn { color: #d97757; font-weight: 700; }
.axst-opt.is-warn .axst-opt-name { color: rgb(232, 226, 216); }
html:not(.dark) .axst-opt-warn { color: #b4552f; }

.axst-empty {
  padding: 16px 14px;
  text-align: center;
  color: rgba(154, 149, 140, 0.95);
  font-size: 12.5px;
  line-height: 1.7;
}
.axst-empty b { display: block; color: rgb(232, 226, 216); font-size: 13px; margin-bottom: 4px; }
.axst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-top: 10px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #cc785c;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.axst-btn:hover { background: #b8684f; }
.axst-btn:active { transform: translateY(1px); }
.axst-btn.is-ghost { background: transparent; border: 1px solid rgba(216, 206, 194, 0.22); color: rgb(200, 195, 186); }
.axst-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.06); }
.axst-btn[disabled] { opacity: 0.5; pointer-events: none; }
/* v7：空状态里可能出现"去充值"用 <a>（真跳转），去掉下划线并允许并排两个按钮 */
a.axst-btn { text-decoration: none; }
.axst-empty > div { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ─── 4. 就地创建密钥弹窗 ─────────────────────────────────────────── */
.axst-mask {
  position: fixed;
  inset: 0;
  z-index: 100000040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  animation: axst-fade 0.16s ease-out;
}
@keyframes axst-fade { from { opacity: 0; } to { opacity: 1; } }
.axst-modal {
  width: min(452px, 100%);
  max-height: min(640px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(216, 206, 194, 0.22);
  background: #1c1b19;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: axst-modal-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes axst-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.axst-modal h4 { margin: 0 0 4px; color: rgb(238, 233, 226); font-size: 15px; font-weight: 800; }
.axst-modal-desc { margin: 0 0 16px; color: rgba(154, 149, 140, 0.95); font-size: 12px; line-height: 1.7; }
.axst-field-label {
  display: block;
  margin: 14px 0 6px;
  color: rgba(180, 174, 164, 0.95);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.axst-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(216, 206, 194, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgb(232, 226, 216);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.axst-input:focus { border-color: rgba(204, 120, 92, 0.7); }

.axst-grp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  margin-bottom: 5px;
  border-radius: 10px;
  border: 1px solid rgba(216, 206, 194, 0.16);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.axst-grp:hover { border-color: rgba(204, 120, 92, 0.5); background: rgba(204, 120, 92, 0.07); }
.axst-grp.is-on { border-color: rgba(204, 120, 92, 0.8); background: rgba(204, 120, 92, 0.13); }
.axst-grp.is-off { opacity: 0.42; cursor: not-allowed; }
.axst-grp.is-off:hover { border-color: rgba(216, 206, 194, 0.16); background: rgba(255, 255, 255, 0.03); }
.axst-grp-radio {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(180, 174, 164, 0.6);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.axst-grp.is-on .axst-grp-radio { border-color: #d97757; box-shadow: inset 0 0 0 3px #1c1b19, inset 0 0 0 8px #d97757; }
.axst-grp-main { flex: 1 1 auto; min-width: 0; }
.axst-grp-name { display: block; color: rgb(232, 226, 216); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axst-grp-note { display: block; margin-top: 1px; color: rgba(154, 149, 140, 0.95); font-size: 11px; }

.axst-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.axst-modal-foot .axst-btn { margin-top: 0; }

/* ─── 5. 轻提示 ───────────────────────────────────────────────────── */
.axst-toast {
  position: fixed;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  z-index: 100000050;
  max-width: min(460px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: 11px;
  border: 1px solid rgba(204, 120, 92, 0.3);
  background: #241f1b;
  color: rgb(238, 233, 226);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: axst-toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.axst-toast.is-ok { border-color: rgba(63, 143, 90, 0.45); }
.axst-toast.is-err { border-color: rgba(190, 80, 66, 0.5); }
@keyframes axst-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─── 6. 底栏对齐统一（原来 35 / 35 / 30 三种高度混排）───────────── */
.studio-composer-toolbar { align-items: center !important; }
.studio-composer-toolbar .studio-tool-button,
.studio-composer-toolbar .studio-send-button,
.studio-composer-toolbar .studio-circle-action {
  height: 32px !important;
  border-radius: 10px !important;
}
.studio-submit-group { display: flex !important; align-items: center !important; gap: 7px !important; }
.studio-submit-group .studio-send-button,
.studio-submit-group .studio-circle-action { width: 32px !important; height: 32px !important; }

/* ─── 7. 参数面板：等宽、标签与控件对齐 ──────────────────────────── */
.studio-image-params-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}
.studio-image-params-popover .studio-control-field,
.studio-image-params-grid > * { min-width: 0 !important; }
.studio-image-params-popover .studio-control-label {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: rgba(180, 174, 164, 0.95) !important;
}
.studio-image-params-popover .select-trigger { height: 34px !important; border-radius: 9px !important; }
.studio-image-params-note { margin-top: 10px !important; opacity: 0.72 !important; font-size: 11.5px !important; }

/* ─── 8. 空态与消息气泡的呼吸感 ──────────────────────────────────── */
.studio-empty-art { line-height: 1.9 !important; letter-spacing: 0.01em !important; }
.studio-message { margin-bottom: 14px !important; }
.studio-message-content { line-height: 1.75 !important; }

@media (max-width: 720px) {
  .axst-bar { grid-template-columns: 1fr; }
  .axst-modes { justify-content: center; }
  .studio-image-params-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. 浅色主题 · 统一覆盖层（放文件最后 = 层叠顺序上必胜）
   ───────────────────────────────────────────────────────────────────────
   为什么集中放末尾并重复状态变体：之前浅色规则紧跟在对应深色规则后面，
   结果"展开态/悬停态"这些后写的状态规则（特异性 0,2,0）在浅色下盖不过
   前置的 html:not(.dark) .axst-chip（0,2,1），实测出现"浅色下展开的 chip
   背景还是深色值"。→ 做成**顺序无关**：浅色覆盖统一放末尾，每个状态都显式写。
   新增深色状态规则时，请在这里补一条对应的浅色规则。
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .axst-bar { border-bottom-color: rgba(60, 48, 38, 0.10); }
html:not(.dark) .axst-modes {
  border-color: rgba(60, 48, 38, 0.14);
  background: rgba(60, 48, 38, 0.035);
}
html:not(.dark) .axst-mode { color: rgb(130, 122, 112); }
html:not(.dark) .axst-mode:hover { color: rgb(80, 70, 62); background: rgba(60, 48, 38, 0.06); }
html:not(.dark) .axst-mode.is-on {
  background: linear-gradient(180deg, #d97757, #c2603f);
  color: #fff;
  box-shadow: 0 2px 6px rgba(204, 120, 92, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:not(.dark) .axst-chip {
  border-color: rgba(60, 48, 38, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgb(58, 50, 44);
}
html:not(.dark) .axst-chip:hover { border-color: rgba(204, 120, 92, 0.55); background: rgba(204, 120, 92, 0.09); }
html:not(.dark) .axst-chip.is-open {
  border-color: rgba(204, 120, 92, 0.72);
  background: rgba(204, 120, 92, 0.14);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.10);
}
html:not(.dark) .axst-chip.is-empty { border-style: dashed; border-color: rgba(204, 120, 92, 0.45); color: rgb(180, 85, 47); }
html:not(.dark) .axst-chip.is-empty:hover { background: rgba(204, 120, 92, 0.12); }
html:not(.dark) .axst-chip[disabled]:hover { border-color: rgba(60, 48, 38, 0.14); background: rgba(255, 255, 255, 0.72); }
html:not(.dark) .axst-chip-mul { background: rgba(204, 120, 92, 0.14); color: #b4552f; }
html:not(.dark) .axst-chip-label.is-muted { color: rgb(130, 122, 112); }

html:not(.dark) .axst-pop {
  border-color: rgba(60, 48, 38, 0.15);
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(60, 48, 38, 0.18), 0 2px 8px rgba(60, 48, 38, 0.08);
}
html:not(.dark) .axst-pop-search {
  border-color: rgba(60, 48, 38, 0.14);
  background: rgba(60, 48, 38, 0.03);
  color: rgb(50, 44, 38);
}
html:not(.dark) .axst-pop-head { color: rgba(120, 112, 102, 0.95); }
html:not(.dark) .axst-opt:hover { background: rgba(60, 48, 38, 0.05); }
html:not(.dark) .axst-opt.is-on { background: rgba(204, 120, 92, 0.14); }
html:not(.dark) .axst-opt-name { color: rgb(48, 42, 36); }
html:not(.dark) .axst-opt-sub { color: rgba(120, 112, 102, 0.95); }
html:not(.dark) .axst-opt-tag { background: rgba(60, 48, 38, 0.07); color: rgba(90, 80, 70, 0.92); }
html:not(.dark) .axst-opt-tag.is-img { background: rgba(204, 120, 92, 0.16); color: #b4552f; }
html:not(.dark) .axst-opt-tag.is-ok { background: rgba(63, 143, 90, 0.16); color: #2f7d4e; }
html:not(.dark) .axst-opt-tag.is-no { background: rgba(180, 90, 70, 0.14); color: #a85742; }
html:not(.dark) .axst-empty { color: rgba(120, 112, 102, 0.95); }
html:not(.dark) .axst-empty b { color: rgb(48, 42, 36); }
html:not(.dark) .axst-btn.is-ghost { border-color: rgba(60, 48, 38, 0.18); color: rgb(90, 80, 70); }
html:not(.dark) .axst-btn.is-ghost:hover { background: rgba(60, 48, 38, 0.06); }

html:not(.dark) .axst-modal { border-color: rgba(60, 48, 38, 0.15); background: #ffffff; box-shadow: 0 30px 80px rgba(60, 48, 38, 0.22); }
html:not(.dark) .axst-modal h4 { color: rgb(40, 35, 30); }
html:not(.dark) .axst-modal-desc { color: rgba(120, 112, 102, 0.95); }
html:not(.dark) .axst-field-label { color: rgba(110, 100, 90, 0.95); }
html:not(.dark) .axst-input { border-color: rgba(60, 48, 38, 0.15); background: #ffffff; color: rgb(48, 42, 36); }
html:not(.dark) .axst-grp { border-color: rgba(60, 48, 38, 0.12); background: rgba(60, 48, 38, 0.025); }
html:not(.dark) .axst-grp:hover { border-color: rgba(204, 120, 92, 0.5); background: rgba(204, 120, 92, 0.07); }
html:not(.dark) .axst-grp.is-on { border-color: rgba(204, 120, 92, 0.8); background: rgba(204, 120, 92, 0.13); }
html:not(.dark) .axst-grp.is-off:hover { border-color: rgba(60, 48, 38, 0.12); background: rgba(60, 48, 38, 0.025); }
html:not(.dark) .axst-grp-name { color: rgb(48, 42, 36); }
html:not(.dark) .axst-grp-note { color: rgba(120, 112, 102, 0.95); }
html:not(.dark) .axst-grp.is-on .axst-grp-radio { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #d97757; }

html:not(.dark) .axst-toast {
  border-color: rgba(204, 120, 92, 0.35);
  background: #ffffff;
  color: rgb(48, 42, 36);
  box-shadow: 0 18px 44px rgba(60, 48, 38, 0.2);
}

/* 下拉底部说明（生图模型可用性提示）*/
.axst-pop-foot {
  margin: 5px 3px 2px;
  padding: 8px 9px 6px;
  border-top: 1px solid rgba(216, 206, 194, 0.16);
  color: rgba(154, 149, 140, 0.92);
  font-size: 11px;
  line-height: 1.65;
}
html:not(.dark) .axst-pop-foot { border-top-color: rgba(60, 48, 38, 0.12); color: rgba(120, 112, 102, 0.95); }

/* ═══════════════════════════════════════════════════════════════════════
   10. 精致度对齐（参考原站 image.3zapi.com 的实测数值）
   ───────────────────────────────────────────────────────────────────────
   原站做得比我们好的三点，直接抄数值：
     ① 圆角分层清晰：外壳 24~30px > 面板 20px > 选项 8px。
        我们是 20 / 14 / 8 —— 层级方向对但落差太小，观感偏"平"。
        → 面板提到 18px，选项保持 8px，让层级看得出来。
     ② 全局过渡统一 150ms（原站 --default-transition-duration: .15s）。
        我们原来是 0.16s / 0.14s / 0.12s 混用。
     ③ 下拉面板设了 max-h-[45dvh]，矮屏不会顶出视口。我们原来没有高度上限。
   ═══════════════════════════════════════════════════════════════════════ */
.axst-pop {
  border-radius: 18px;
  max-height: min(342px, 45dvh);
}
.axst-chip,
.axst-mode,
.axst-opt,
.axst-grp,
.axst-btn {
  transition-duration: 0.15s;
}
.axst-chip-chev { transition-duration: 0.2s; }
/* 面板在输入框上方弹出时，贴边留一点余量，不和 composer 圆角打架 */
.axst-pop { scrollbar-width: thin; }

/* ═══════════════════════════════════════════════════════════════════════
   11. 视图切换（三合一）· 顶部栏
   ───────────────────────────────────────────────────────────────────────
   业主令：「对话生图还有那个图片库，他们应该放在同一个位置」
   实测：原生 .studio-tabs 本来就三合一，但它们会被作曲器卸载波及；
   放顶部栏 .studio-topbar（三个视图下都在）最稳。
   视觉沿用原生的胶囊底 + 选中实心，与 composer 里的 chip 同一套语言。
   ═══════════════════════════════════════════════════════════════════════ */
.axst-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid rgba(216, 206, 194, 0.16);
  background: rgba(255, 255, 255, 0.035);
}
.axst-tabs .axst-mode {
  height: 30px;
  padding: 0 13px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
}
.axst-tabs .axst-mode.is-on {
  background: linear-gradient(180deg, #d97757, #c2603f);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   12. 固定布局：输入框钉底、只有消息区滚动
   ───────────────────────────────────────────────────────────────────────
   业主令：「这个对话框，它不应该是越来越下的，应该是固定的，对话框界面是固定的」

   实测根因：document.scrollHeight 2120 > 视口 1304，整页在滚，
   .studio-composer 静态定位 → 跟着内容往下跑。
   修法：给中间层限高、让 .studio-messages 成为唯一滚动容器、作曲器不再被推走。
   ⚠️ 用 dvh 而不是 vh：移动端地址栏收起/展开时 vh 会跳。
   ⚠️ 顶上要留出品牌顶栏的高度，否则内容会被顶栏压住。
   ═══════════════════════════════════════════════════════════════════════ */
.chat-image-studio {
  /* ⚠️⚠️ 千万别把这里改成 display:flex！
     原生用的是 **grid 两列**：grid-template-columns: minmax(15rem,16.5rem) minmax(0,1fr)
     （左=会话列表侧栏，右=主区）。改成 flex 会让两个 grid 子项各占一整行，
     侧栏被拉成整行宽、主区被挤到下一行 → 视觉上就是工作台被切成上下两块。
     本工作台只需要约束高度，布局交给原生 grid。 */
  display: grid !important;
  /* 高度不能自己猜：
     · 减 98px → 双重扣减（原生 .console-content 的 top 已是 98，还自带内边距）
     · height:100% → 父链无确定高度，百分比失效
     正解：JS 量出真实起点写进 --axst-top，这里只做减法；量不到时 124px 兜底。 */
  height: calc(100dvh - var(--axst-top, 124px)) !important;
  max-height: calc(100dvh - var(--axst-top, 124px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* 两个 grid 子项也要能收缩，否则内部滚动条出不来 */
.chat-image-studio > .studio-rail,
.chat-image-studio > .studio-main { min-height: 0 !important; max-height: 100% !important; }
.console-main { min-height: 0 !important; }
.chat-image-studio .console-content,
.chat-image-studio > .studio-rail { min-height: 0 !important; }
.studio-main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.studio-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.studio-composer { flex: 0 0 auto !important; }

/* ═══════════════════════════════════════════════════════════════════════
   13. 「回到最新」浮层按钮
   ───────────────────────────────────────────────────────────────────────
   业主令：「如果有比较多的内容的话，应该会出现一个往下的一个按钮，
            直接恢复到最新状态 像类似于这样的箭头」
   出现条件：内容超一屏 **且** 离底超过一屏的 12%（由 JS 控制 .is-on）
   ═══════════════════════════════════════════════════════════════════════ */
.axst-jump {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 10px) scale(0.92);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(216, 206, 194, 0.22);
  border-radius: 9999px;
  background: rgba(36, 33, 30, 0.92);
  color: rgb(226, 220, 212);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.16s, border-color 0.16s;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-tap-highlight-color: transparent;
}
.axst-jump.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.axst-jump:hover {
  background: rgba(204, 120, 92, 0.9);
  border-color: rgba(204, 120, 92, 0.9);
  color: #fff;
}
.axst-jump:active { transform: translate(-50%, 1px) scale(0.96); }
html:not(.dark) .axst-jump {
  border-color: rgba(60, 48, 38, 0.16);
  background: rgba(255, 255, 255, 0.95);
  color: rgb(70, 62, 54);
  box-shadow: 0 10px 30px rgba(60, 48, 38, 0.18);
}
html:not(.dark) .axst-jump:hover { background: #cc785c; border-color: #cc785c; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   14. 图片预览：抬层（修「关不掉」）+ 关闭按钮增强
   ───────────────────────────────────────────────────────────────────────
   ⚠️ 实测根因：品牌顶栏 #aimyria-topbar 是 position:fixed; z-index:99960，
   而预览层只有 9999 → 顶栏盖住右上角关闭按钮，鼠标点不到（程序化 click 有效，
   所以之前测试没发现）。
   ═══════════════════════════════════════════════════════════════════════ */
.studio-preview-overlay {
  z-index: 999990 !important;   /* 高于品牌顶栏 99960，低于自身的 99999998 引导层 */
}
/* 预览层打开时给 body 加锁由原生管；这里只保证浮层不打架 */
.axst-preview-overlay { isolation: isolate; }

/* 关闭按钮：加大、实底、明显可点（原生 32x32 半透明，且被顶栏压住过）*/
.studio-preview-overlay .studio-preview-close {
  z-index: 5 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  transition: background 0.16s, transform 0.16s, border-color 0.16s;
}
.studio-preview-overlay .studio-preview-close:hover {
  background: rgba(204, 120, 92, 0.92) !important;
  border-color: rgba(204, 120, 92, 0.95) !important;
  transform: scale(1.06);
}
.studio-preview-overlay .studio-preview-toolbar { z-index: 4 !important; }

/* 提示：点空白处也能关（放一行很轻的说明，避免用户不知道）*/
.axst-preview-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 999991;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  backdrop-filter: blur(6px);
  animation: axst-fade 0.3s ease-out;
}

/* 压掉 .console-content 的上下内边距：它是给普通页面留白的，
   但在本工作台里会让整页还能滚 25px（回弹感）。工作台自己管高度。 */
.console-content:has(> .chat-image-studio) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. 消掉底栏残留的 6px 空壳（业主第 3 张图圈出的「突兀竖条」）
   ───────────────────────────────────────────────────────────────────────
   根因：我们把原生的「对话/生图」胶囊（.studio-mode-switch）整块 display:none 之后，
   它的父容器 .studio-mode-cluster 还在，而且因为内部两个子元素都不可见，
   它自己没有内容 → 只剩 border/padding 撑出约 6px 宽（实测 6x35 @底栏左侧）。
   视觉上就是输入框左下角竖着的一条窄边，很突兀。

   ⛔ v6 的写法**不生效**（实测 matches() 返回 false，6px 仍在）：
        .studio-mode-cluster:not(:has(button:not([style*="display: none"])))
      错在 `[style*=...]` **只认内联样式**，而我们对 .studio-mode-switch 的隐藏是
      写在**样式表**里的 display:none !important → 里面的 button 依然"不匹配内联隐藏"
      → :has() 为真 → :not() 为假 → 规则永远不命中。
      ⚠️ 通用教训：`:has()` 里判断"子元素是否可见"**不能用属性选择器**，
         CSS 没有"computed display"选择器，这类判据必须换成正向特征或交给 JS。

   v7 换成**正向**判据：这个容器里唯一会真正显示的东西，是生图模式下的工具按钮
   （Params / Prompt market，类名 .studio-tool-button）。
   没有它就说明容器是空壳 → 隐藏。
   ⚠️ 只隐藏显示，**保留 DOM**（.studio-mode-button 是我们 setMode 的驱动目标，
      且原生 Vue 需要这些节点存在）。
   ═══════════════════════════════════════════════════════════════════════ */
.studio-mode-cluster:not(:has(.studio-tool-button)) {
  display: none !important;
}
/* 兜底 1：内容被完全隐藏时不留空隙 */
.studio-composer-toolbar .studio-mode-cluster { min-width: 0 !important; }
.studio-mode-cluster:empty { display: none !important; }
/* 兜底 2（JS 几何判定）：.axst-shell-hidden 由脚本按实测宽度加上，
   用于将来原生结构变化、上面的 :has 判据失效时仍能兜住 */
.studio-mode-cluster.axst-shell-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   16. 会话重命名
   ═══════════════════════════════════════════════════════════════════════ */
.axst-rns-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(154, 149, 140);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s, background 0.14s, color 0.14s;
}
/* 悬停会话项或聚焦时才显出按钮，平时保持列表干净 */
.studio-session-item:hover .axst-rns-btn,
.axst-rns-btn:focus-visible { opacity: 1; }
.axst-rns-btn:hover { background: rgba(204, 120, 92, 0.16); color: #d97757; }
.axst-rns-btn:active { transform: translateY(1px); }
@media (hover: none) {
  /* 触屏没有 hover：常显，否则用户永远看不到入口 */
  .axst-rns-btn { opacity: 0.75; }
}

.axst-rns-input {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(204, 120, 92, 0.7);
  background: #232019;
  color: rgb(238, 233, 226);
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.14);
}
html:not(.dark) .axst-rns-input {
  border-color: rgba(204, 120, 92, 0.75);
  background: #ffffff;
  color: rgb(48, 42, 36);
}

/* ═══════════════════════════════════════════════════════════════════════
   17. 接口下拉：按分组显示后条目更长，确保宽度够用不被截断
   （业主第 1 张图圈出的正是这个下拉）
   ═══════════════════════════════════════════════════════════════════════ */
.axst-pop { min-width: 340px; }
.axst-opt-name { font-weight: 650; }
.axst-opt-sub { font-size: 10.5px; }
/* 被禁用的幽灵项（绑到已删分组的）压暗并去掉勾选感 */
.axst-opt.is-off { pointer-events: none; }