/* ══════════════════════════════════════════════════════════════════
 * 🎨 T36 三个新组件 —— 参数取自 image2pro.top 实测
 *
 * ① 灵感胶囊行（.inspo-row / .inspo-chip）
 *    row:    max-width 720, gap 7px, overflow-x auto, 隐藏滚动条, cursor:grab
 *    chip:   height 30, padding 0 13, radius 999, font 12,
 *            max-width 260 + ellipsis, transform-origin:left center
 *            border 1px rgba(140,120,180,.20), bg rgba(255,255,255,.55)
 *            hover: translateY(-1px), bg rgba(255,255,255,.78)
 *            active: scale(.96), .12s ease
 *            过渡: background .15s, transform .4s cubic-bezier(.24,1.6,.35,1)
 *
 * ② 提示词生成按钮（.text-auto-image-test-btn）
 *    position: fixed, right 18, bottom footer+16
 *    min-width 92, height 40, padding 0 14, gap 6
 *    border 1px rgba(205,111,71,.72)
 *    hover: translateY(-2px) + 七层阴影
 *    active: scale(.97), cursor:grabbing
 *    busy: opacity .52, cursor:wait
 *
 * ③ 模型抽屉（对标 modelSheet：底部弹出，比下拉更适合手机）
 *    圆角 24px 24px 0 0
 * ══════════════════════════════════════════════════════════════════ */

/* ---------- ① 灵感胶囊行 ---------- */
.st-inspo-row{
  display:flex; gap:7px;
  max-width:100%;
  overflow-x:auto;
  padding:2px 2px 6px;
  margin-bottom:2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.st-inspo-row::-webkit-scrollbar{display:none}
.st-inspo-row:active{cursor:grabbing}
.st-inspo-row:empty{display:none}

.st-inspo{
  flex:none;
  height:30px; padding:0 13px;
  border-radius:999px;
  cursor:pointer; white-space:nowrap;
  max-width:260px; overflow:hidden; text-overflow:ellipsis;
  font:inherit; font-size:12px; line-height:30px;
  transform-origin:left center;
  border:1px solid rgba(140,120,180,.20);
  background:rgba(255,255,255,.55);
  color:var(--s-muted-2);
  transition:background .15s, transform .4s var(--s-ease), color .15s, border-color .15s;
}
.st-inspo:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.78);
  color:var(--s-ink);
  border-color:rgba(205,111,71,.32);
}
.st-inspo:active{
  transform:scale(.96);
  transition:transform .12s ease;
}

/* ---------- ② 提示词生成按钮 ---------- */
.st-gen{
  position:absolute;
  right:22px;
  bottom:150px;   /* 与「换个灵感」(bottom:230) 错开，避免重叠 */
  z-index:41;
  display:inline-flex; align-items:center; gap:6px;
  min-width:92px; height:40px; padding:0 14px;
  box-sizing:border-box;
  border-radius:999px;
  border:1px solid rgba(205,111,71,.72);
  background:linear-gradient(150deg,rgba(255,252,248,.95),rgba(255,246,238,.88));
  color:#b76f1f;
  font:inherit; font-size:12.5px; font-weight:700; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.96),
    inset 0 1px 5px rgba(255,255,255,.18),
    2px 6px 18px rgba(60,45,110,.13),
    1px 2px 6px rgba(60,45,110,.08);
  transition:transform .45s var(--s-ease), box-shadow .3s, opacity .2s;
}
.st-gen:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.96),
    inset 0 1px 5px rgba(255,255,255,.18),
    5px 12px 28px rgba(60,45,110,.21),
    1px 3px 9px rgba(60,45,110,.13);
}
.st-gen:active{cursor:grabbing; transform:scale(.97)}
.st-gen[aria-busy="true"]{
  opacity:.52; cursor:wait; transform:none;
  box-shadow:0 3px 10px rgba(70,44,30,.10);
}
.st-gen .st-gen-ic{
  font-size:15px; line-height:1; color:#c56f4f;
}
/* 生成中：图标旋转 */
.st-gen[aria-busy="true"] .st-gen-ic{
  animation:stGenSpin 1s linear infinite;
  display:inline-block;
}
@keyframes stGenSpin{to{transform:rotate(360deg)}}

/* ---------- ③ 模型抽屉（底部弹出）---------- */
.st-sheet-mask{
  position:fixed; inset:0; z-index:9800;
  background:rgba(30,26,22,.28);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.st-sheet-mask.is-open{opacity:1; pointer-events:auto}

.st-sheet{
  position:fixed; left:0; right:0; bottom:0;
  z-index:9810;
  max-height:70vh;
  display:flex; flex-direction:column;
  border-radius:24px 24px 0 0;
  background:linear-gradient(165deg,#fffdfa 0%,#fdfaf5 100%);
  border-top:1px solid rgba(255,255,255,.9);
  box-shadow:0 -12px 40px rgba(60,45,110,.18), 0 -2px 10px rgba(60,45,110,.08);
  transform:translateY(100%);
  transition:transform .42s var(--s-ease);
  will-change:transform;
}
.st-sheet.is-open{transform:translateY(0)}

/* 顶部抓手 */
.st-sheet-grip{
  flex:none; display:flex; justify-content:center;
  padding:9px 0 5px;
}
.st-sheet-grip i{
  display:block; width:38px; height:4px; border-radius:999px;
  background:rgba(140,120,95,.26);
}
.st-sheet-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 18px 12px;
  border-bottom:1px solid rgba(140,120,95,.10);
}
.st-sheet-title{
  font-size:15px; font-weight:700; color:var(--s-ink);
}
.st-sheet-close{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:0; background:rgba(140,120,95,.09);
  color:var(--s-muted-2); font-size:16px; line-height:1;
  transition:background .18s, transform .3s var(--s-ease);
}
.st-sheet-close:hover{background:rgba(140,120,95,.16); transform:scale(1.06)}
.st-sheet-close:active{transform:scale(.94)}

/* 筛选标签 */
.st-sheet-tabs{
  flex:none; display:flex; gap:7px;
  padding:10px 18px 8px; overflow-x:auto;
  scrollbar-width:none;
}
.st-sheet-tabs::-webkit-scrollbar{display:none}
.st-sheet-tab{
  flex:none; height:28px; padding:0 13px; border-radius:999px;
  cursor:pointer; white-space:nowrap;
  font:inherit; font-size:11.5px; font-weight:600; line-height:28px;
  border:1px solid rgba(140,120,95,.16);
  background:#fff; color:var(--s-muted-2);
  transition:all .2s ease;
}
.st-sheet-tab.is-on{
  background:linear-gradient(150deg,#f7a878,#e0673f);
  border-color:transparent; color:#fff;
  box-shadow:0 2px 8px rgba(224,103,63,.28);
}

/* 模型列表 */
.st-sheet-list{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:6px 12px 20px;
  scrollbar-width:thin;
}
.st-sheet-item{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:11px 12px; margin-bottom:5px;
  border-radius:14px; cursor:pointer; text-align:left;
  border:1px solid transparent;
  background:transparent; color:var(--s-ink);
  font:inherit; transition:background .16s, border-color .16s;
}
.st-sheet-item:hover{background:rgba(140,120,95,.055)}
.st-sheet-item.is-on{
  background:#fff;
  border-color:rgba(205,111,71,.32);
  box-shadow:0 1px 3px rgba(140,120,95,.09);
}
.st-sheet-item-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.st-sheet-item-name{
  display:block;
  font-size:13px; font-weight:600; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-sheet-item-tags{
  display:block;
  font-size:10.5px; color:var(--s-muted); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-sheet-item-check{
  flex:none; font-size:13px; font-weight:700; color:#e0673f;
  opacity:0; transform:scale(.5);
  transition:opacity .28s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.st-sheet-item.is-on .st-sheet-item-check{opacity:1; transform:scale(1)}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .st-gen{
    right:14px; bottom:126px;
    min-width:0; height:36px; padding:0 12px; font-size:12px;
  }
  .st-gen span:not(.st-gen-ic){display:none}   /* 窄屏只留图标 */
  .st-gen{min-width:36px; justify-content:center}
  .st-sheet{max-height:78vh}
  .st-inspo{height:28px; line-height:28px; font-size:11.5px; max-width:200px}
}

@media (prefers-reduced-motion:reduce){
  .st-inspo, .st-gen, .st-sheet, .st-sheet-mask{
    transition-duration:.01ms!important;
    animation:none!important;
  }
}