/* ============================================================
 * sel-dock.css — 三瓶选择 · 悬浮响应式操作坞
 * 解决：选满三瓶后「开始解析」藏在 108 瓶阵列末尾（.sel-bar 为
 *      sticky，必须滚到页尾才露出）的问题。
 * 本坞常驻视口底部（fixed），随选择状态即时响应：
 *      已选 ≥1  → 滑入；选满 3 → 升级为 ready 态并自动弹出强调。
 * 纯视觉 + 交互增强层，不改动任何业务逻辑与既有结构。
 * ============================================================ */
.sel-dock {
  --sd-tx: -50%;
  --sd-lift: 0px;
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--sd-lift) + env(safe-area-inset-bottom, 0px));
  z-index: 1600; /* #tab-bar=1500 之上；图鉴抽屉 1690 之下 */
  transform: translate(var(--sd-tx), 150%);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.16, .84, .3, 1), opacity .30s ease;
  will-change: transform, opacity;
}
.sel-dock.is-in {
  transform: translate(var(--sd-tx), 0);
  opacity: 1;
  pointer-events: auto;
}

.sd-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  background: color-mix(in srgb, var(--card, #111a20) 93%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .34), 0 16px 44px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---------- 三个槽位 ---------- */
.sd-slots { display: flex; gap: 8px; }
.sd-slot {
  position: relative;
  width: 46px; height: 56px;
  border-radius: 11px;
  border: 1.5px dashed var(--line, rgba(255, 255, 255, .18));
  background: var(--bg2, rgba(255, 255, 255, .03));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .28s, box-shadow .28s, transform .28s;
}
.sd-slot.filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--sc, #c9a96e) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc, #c9a96e) 26%, transparent) inset;
}
.sd-slot img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; cursor: pointer;
  -webkit-user-drag: none; user-select: none;
}
.sd-slot .idx {
  position: absolute; top: 1px; left: 5px;
  font-size: 10px; line-height: 1.4; color: var(--sub, #8b9a9f);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.sd-slot .plus { font-size: 17px; color: var(--line, rgba(255, 255, 255, .22)); }
.sd-slot .rm {
  position: absolute; top: 1px; right: 2px;
  width: 17px; height: 17px; border: none; border-radius: 50%;
  background: rgba(176, 58, 46, .88); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}

/* ---------- 文案 ---------- */
.sd-txt {
  font-size: 12.5px; color: var(--sub, #8b9a9f);
  white-space: nowrap; letter-spacing: .04em;
}
.sd-txt b {
  color: var(--accent, #c9a96e); font-size: 16px;
  font-family: var(--serif, Georgia, serif); margin-right: 1px;
}

/* ---------- 行动按钮 ---------- */
.sd-go {
  border: 1px solid color-mix(in srgb, var(--accent, #c9a96e) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #c9a96e) 22%, transparent),
    color-mix(in srgb, var(--accent, #c9a96e) 9%, transparent));
  color: var(--tx, #e8eef0);
  font-size: 14px; letter-spacing: .04em;
  padding: 9px 18px; border-radius: 13px; cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .28s, filter .28s;
}
.sd-go:active { transform: translateY(1px) scale(.985); }
.sd-go[disabled] {
  cursor: default; opacity: .5; filter: grayscale(.55);
  border-color: var(--line, rgba(255, 255, 255, .14));
  background: rgba(255, 255, 255, .04);
}

/* 选满三瓶：ready 态（金调 + 呼吸光晕） */
.sel-dock.is-ready .sd-inner {
  border-color: color-mix(in srgb, var(--accent, #c9a96e) 52%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .34), 0 18px 48px rgba(0, 0, 0, .46),
    0 0 0 1px color-mix(in srgb, var(--accent, #c9a96e) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}
.sel-dock.is-ready .sd-go {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #c9a96e) 40%, transparent),
    color-mix(in srgb, var(--accent, #c9a96e) 18%, transparent));
  border-color: color-mix(in srgb, var(--accent, #c9a96e) 70%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #c9a96e) 34%, transparent);
}
/* 自动弹出强调：仅在「刚刚选满」的那一刻播一次 */
.sel-dock.is-pop .sd-inner { animation: sd-pop .62s cubic-bezier(.2, .9, .3, 1) 1; }
.sel-dock.is-pop .sd-go { animation: sd-halo 1.5s ease-out 1; }
@keyframes sd-pop {
  0%   { transform: translateY(14px) scale(.94); }
  55%  { transform: translateY(-4px) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes sd-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c9a96e) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent, #c9a96e) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c9a96e) 0%, transparent); }
}

/* ---------- 响应式：窄屏全宽贴底，避开底部标签栏 ---------- */
@media (max-width: 720px) {
  .sel-dock {
    --sd-tx: 0;
    left: 10px; right: 10px;
    bottom: calc(10px + var(--sd-lift) + env(safe-area-inset-bottom, 0px));
  }
  .sd-inner { gap: 10px; padding: 8px 10px 8px 12px; border-radius: 18px; }
  .sd-slot { width: 40px; height: 48px; border-radius: 10px; }
  .sd-txt { font-size: 11.5px; }
  .sd-txt b { font-size: 14px; }
  .sd-go { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 380px) {
  .sd-txt { display: none; } /* 极窄屏让位给槽位与按钮 */
  .sd-go { flex: 1; text-align: center; }
}

/* 有坞时给页面留出底部安全距离，避免遮挡末尾内容 */
body.has-sel-dock { padding-bottom: 96px; }
@media (max-width: 720px) { body.has-sel-dock { padding-bottom: 84px; } }

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sel-dock { transition: opacity .16s linear; }
  .sel-dock.is-pop .sd-inner,
  .sel-dock.is-pop .sd-go { animation: none; }
}
@media print {
  .sel-dock { display: none !important; }
}