/* BODHI Dashboard · css/ai-generate.css · AI 生图 modal + 内置提示词快捷条
   ⚠ 层叠顺序 = index.html 里 <link> 的先后，别随手调换。*/

/* AI 生图 modal（z-index 70：低于选图 picker 80 / 改图 editor 120，好让它们叠在其上）*/
.aigen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.55);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.aigen-panel {
  background: white;
  border-radius: 10px;
  width: min(1120px, 94vw);
  max-width: 94vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}
.aigen-overlay { padding: 1.2rem; }
/* 提示词框撑满剩余高度，长 prompt 一眼看全（下方通道行/note 钉底） */
.aigen-panel .editor-ai-input { flex: 1 1 auto; min-height: 12rem; }
.dark .aigen-panel { background: rgb(28 25 23); }
/* 配音版本工作台（audio-gen）复用本 panel，但内容比生图短得多：
   高度贴内容，否则固定 90vh 会留半屏空白；提示词框也不该抢高。*/
.aigen-panel-auto { height: auto; max-height: 90vh; width: min(860px, 94vw); }
.aigen-panel-auto .editor-ai-input { flex: 0 0 auto; min-height: 7rem; }
.aigen-mode-btn {
  font-size: 13px;
  padding: 6px 16px;
  background: rgb(245 245 244);
  color: rgb(87 83 78);
  border: none;
  border-right: 1px solid rgb(214 211 209);
  cursor: pointer;
  white-space: nowrap;
}
.aigen-mode-btn:last-child { border-right: none; }
.aigen-mode-btn:hover { background: rgb(231 229 228); }
.aigen-mode-active, .aigen-mode-active:hover { background: #7c3aed; color: #fff; }
.dark .aigen-mode-btn { background: rgb(41 37 36); color: rgb(214 211 209); border-right-color: rgb(68 64 60); }
.dark .aigen-mode-btn:hover { background: rgb(68 64 60); }
.dark .aigen-mode-active, .dark .aigen-mode-active:hover { background: #7c3aed; color: #fff; }

/* AI 生图 · 内置提示词快捷条（提示词 textarea 正上方，勿藏） */
.aigen-presets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 auto;
  margin: 0 0 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(245 243 255), rgb(250 250 249));
  border: 1px solid rgb(196 181 253);
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.08);
}
.dark .aigen-presets {
  background: linear-gradient(180deg, rgb(46 16 101 / 0.35), rgb(41 37 36));
  border-color: rgb(109 40 217);
}
.aigen-presets-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6d28d9;
  letter-spacing: 0.02em;
}
.dark .aigen-presets-title { color: #c4b5fd; }
.aigen-presets-title-sub {
  font-size: 10px;
  font-weight: 400;
  color: rgb(168 162 158);
}
.aigen-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.aigen-preset-group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(124 58 237);
  min-width: 2.5rem;
  margin-right: 2px;
}
.dark .aigen-preset-group { color: #a78bfa; }
.aigen-preset-chip {
  font-size: 11px;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgb(167 139 250);
  background: white;
  color: rgb(55 48 163);
  cursor: pointer;
  white-space: nowrap;
}
.aigen-preset-chip:hover {
  border-color: #7c3aed;
  color: #fff;
  background: #7c3aed;
}
.aigen-preset-chip-ref {
  border-style: dashed;
  border-color: rgb(167 139 250);
  background: rgb(245 243 255);
}
.dark .aigen-preset-chip {
  background: rgb(28 25 23);
  border-color: rgb(139 92 246);
  color: rgb(221 214 254);
}
.dark .aigen-preset-chip:hover {
  border-color: #a78bfa;
  color: #fff;
  background: #7c3aed;
}
.dark .aigen-preset-chip-ref {
  border-color: rgb(167 139 250);
  background: rgb(46 16 101 / 0.4);
}
.aigen-preset-hint {
  font-size: 10px;
  color: rgb(168 162 158);
  margin: 0 0 6px 2px;
  line-height: 1.35;
  flex: 0 0 auto;
}