/* ══════════════════════════════════════════════════════════════════
 * 🍮 T38 模型抽屉 —— 逐项对齐 image2pro.top 的 #modelSheet
 *
 * 所有数值来自双站对照实测（1152×700 视口）：
 *
 * sheet      rect 1152×177  radius 24px 24px 0 0
 *            padding 2px 16px 20px   border 1px rgba(255,255,255,.62)
 *            bg 多层 radial-gradient（液态玻璃）  文字 rgb(26,26,26)
 * handle     36×4  radius 4  bg rgba(120,100,160,.18)
 * toolbar    高 30  padding 0 4px  gap 12  display flex
 * title      11px / 700 / color rgba(26,26,26,.46)   文案「生图模型」
 * filter     164×30  radius 999  液态玻璃底 + thumb 滑块
 * filterBtn  高 30
 * row        高 57  padding 20  font 13
 * bottomRow  高 46  gap 8  display flex
 * refresh    46×46  radius 15  玻璃底
 * cancel     1064×46（占满剩余宽）radius 15  font 13.5/700
 *            color rgba(26,26,26,.68)  玻璃底 + 描边
 *
 * ⚠ 关键修正：上一版把「取消」做成居中 180px 胶囊是错的，
 *   对标站是「刷新按钮 46px + 取消占满剩余」的横向通栏布局。
 * ══════════════════════════════════════════════════════════════════ */

/* ---------- 遮罩 ---------- */
.st-sheet-mask{
  position:fixed; inset:0; z-index:9800;
  width:100%; height:100%;
  background:rgba(30,26,22,.26);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.st-sheet-mask.is-open{opacity:1; pointer-events:auto}

/* ---------- 抽屉本体 ---------- */
.st-sheet{
  /* 自带 token，不依赖 #exStudioRoot（抽屉挂在 body 上取不到变量） */
  --sh-ink:#1a1a1a;
  --sh-muted:rgba(26,26,26,.46);
  --sh-muted-2:rgba(26,26,26,.68);
  --sh-line:rgba(120,100,160,.16);
  --sh-accent:#e0673f;
  --sh-ease:cubic-bezier(.24,1.6,.35,1);
  --sh-glass:linear-gradient(150deg,rgba(255,255,255,.60),rgba(255,255,255,.34) 55%,rgba(255,255,255,.48));

  position:fixed; left:0; right:0; bottom:0;
  width:100%; box-sizing:border-box;
  z-index:9810;
  /* 高度贴合内容：对标实测 221/700≈32vh，最多 42vh，绝不撑满整屏 */
  max-height:42vh;
  min-height:0;
  display:flex; flex-direction:column;
  border-radius:24px 24px 0 0;
  padding:2px 16px 20px;
  border:1px solid rgba(255,255,255,.62);
  /* 液态玻璃多层渐变（抄自对标站） */
  background:
    linear-gradient(rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 30%),
    radial-gradient(110% 70% at 18% -10%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 42%),
    linear-gradient(150deg,#fdfbf8,#faf7f2 55%,#f7f3ec);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 1.5px 4px rgba(255,255,255,.16),
    inset 1.5px 1px 0 rgba(130,210,255,.22),
    inset -1.5px -1px 0 rgba(255,175,205,.20),
    0 -20px 50px rgba(60,45,110,.20),
    0 -5px 16px rgba(60,45,110,.12);
  transform:translateY(100%);
  transition:transform .42s var(--sh-ease);
  will-change:transform;
  color:var(--sh-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  overflow:hidden;
}
.st-sheet.is-open{transform:translateY(0)}
.st-sheet *{box-sizing:border-box}

/* 抓手 36×4 */
.st-sheet-grip{
  flex:none; display:flex; justify-content:center;
  padding:6px 0 4px;
}
.st-sheet-grip i{
  display:block; width:36px; height:4px; border-radius:4px;
  background:rgba(120,100,160,.18);
}

/* 工具条：标题 + 筛选（同一行，对标 .ms-toolbar） */
.st-sheet-toolbar{
  flex:none;
  display:flex; align-items:center; gap:12px;
  height:26px; padding:0 4px;
  margin-bottom:2px;
}
.st-sheet-title{
  flex:none;
  font-size:11px; font-weight:700; line-height:1;
  color:var(--sh-muted);            /* 对标站是 46% 半透明 */
  letter-spacing:.02em;
  white-space:nowrap;
}

/* 筛选：胶囊容器 + 滑块 thumb（对标 .ms-filter） */
.st-sheet-filter{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:flex-end;
  height:26px; padding:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background:linear-gradient(145deg,rgba(255,255,255,.27),rgba(255,255,255,.07) 48%,rgba(162,181,213,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.st-sheet-tab{
  height:22px; padding:0 11px; border-radius:999px;
  cursor:pointer; white-space:nowrap;
  font:inherit; font-size:11px; font-weight:600; line-height:22px;
  border:0; background:transparent;
  color:var(--sh-muted);
  transition:color .2s ease, background .2s ease;
}
.st-sheet-tab:hover{color:var(--sh-ink)}
.st-sheet-tab.is-on{
  background:#fff;
  color:var(--sh-ink);
  box-shadow:0 1px 3px rgba(120,100,160,.16), inset 0 1px 0 rgba(255,255,255,1);
}

/* 列表：行高 57 / padding 20（对标 .ms-row） */
.st-sheet-list{
  /* 固定可视区 ≈ 3 行，超出滚动（对标站 221 总高时列表区约 105px） */
  flex:0 0 auto;
  height:108px;
  min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:0;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.st-sheet-item{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:7px 8px; margin-bottom:2px;
  border-radius:12px; cursor:pointer; text-align:left;
  border:1px solid transparent;
  background:transparent;
  color:var(--sh-ink);
  font:inherit;
  transition:background .16s, border-color .16s;
}
.st-sheet-item:hover{background:rgba(120,100,160,.06)}
.st-sheet-item.is-on{
  background:rgba(255,255,255,.9);
  border-color:rgba(205,111,71,.30);
  box-shadow:0 1px 3px rgba(120,100,160,.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;
  color:var(--sh-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-sheet-item-tags{
  display:block;
  font-size:10.5px; line-height:1.3;
  color:var(--sh-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-sheet-item-check{
  flex:none; font-size:13px; font-weight:700;
  color:var(--sh-accent);
  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)}

.st-sheet-empty{
  padding:20px; text-align:center;
  font-size:13px; color:var(--sh-muted); opacity:.6;
}

/* 底部行：刷新 46×46 + 取消占满剩余（对标 .ms-bottom-row） */
.st-sheet-foot{
  flex:none;
  display:flex; align-items:center; gap:8px;
  height:46px; margin-top:6px;
}
.st-sheet-refresh{
  flex:none; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:15px; cursor:pointer;
  border:1px solid rgba(255,255,255,.68);
  background:var(--sh-glass);
  color:var(--sh-muted-2);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 1px .5px 0 rgba(130,205,255,.22),
    inset -1px -.5px 0 rgba(255,175,205,.20),
    0 2px 8px rgba(120,100,160,.10);
  transition:transform .3s var(--sh-ease), background .2s;
}
.st-sheet-refresh svg{width:17px; height:17px}
.st-sheet-refresh:hover{transform:translateY(-1px); background:#fff}
.st-sheet-refresh:active{transform:scale(.95)}
.st-sheet-refresh[aria-busy="true"] svg{animation:shSpin .9s linear infinite}
@keyframes shSpin{to{transform:rotate(360deg)}}

/* 取消：占满剩余宽度，radius 15，13.5px/700 */
.st-sheet-cancel{
  flex:1; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:15px; cursor:pointer;
  border:1px solid rgba(255,255,255,.68);
  background:var(--sh-glass);
  color:var(--sh-muted-2);
  font:inherit; font-size:13.5px; font-weight:700; line-height:46px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 1px .5px 0 rgba(130,205,255,.22),
    inset -1px -.5px 0 rgba(255,175,205,.20),
    0 2px 8px rgba(120,100,160,.10);
  transition:transform .3s var(--sh-ease), background .2s;
}
.st-sheet-cancel:hover{transform:translateY(-1px); background:#fff}
.st-sheet-cancel:active{transform:scale(.985)}

/* 关闭按钮：对标站没有 X，只有底部取消。这里保留但缩小弱化 */
.st-sheet-close{display:none}

/* 移动端 */
@media (max-width:760px){
  .st-sheet{max-height:78vh; padding:2px 12px 16px; border-radius:22px 22px 0 0}
  .st-sheet-toolbar{padding:0 2px; gap:8px}
  .st-sheet-tab{padding:0 11px; font-size:11px}
  .st-sheet-foot{height:44px}
  .st-sheet-refresh{width:44px; height:44px; border-radius:14px}
  .st-sheet-cancel{height:44px; border-radius:14px; font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .st-sheet, .st-sheet-mask{transition-duration:.01ms!important}
  .st-sheet-refresh[aria-busy="true"] svg{animation:none}
}