/* ============================================================================
   WBUI · 案例库公共浮层样式（轻提示 / 确认框）
   引入：<link rel="stylesheet" href="/ui/ui.css">
   颜色全部走变量：优先继承宿主页面的 --accent / --card / --line / --ink，
   取不到就用兜底值，所以任何案例引进来都不会花。
   宿主可覆盖 --wbui-* 做微调，例如 body{--wbui-radius:14px}
   ========================================================================== */

/* 宿主主题变量不统一（--accent / --brand 都见过），逐级回退，最后才是兜底值 */
#toastWrap,
.wbui-mask{
  --wbui-accent: var(--accent, var(--brand, #4f46e5));
  --wbui-bg: var(--card, #fff);
  --wbui-line: var(--line, #e4e8f0);
  --wbui-ink: var(--ink, var(--txt, #1b2130));
  --wbui-ink2: var(--ink2, var(--txt2, #5b6474));
  --wbui-radius: 16px;
  font-family: inherit;
}

/* ---------------- 轻提示 ---------------- */
#toastWrap{
  position:fixed; left:0; right:0; bottom:26px; z-index:2000;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 14px; pointer-events:none;
}
.wbui-tst{
  pointer-events:auto; display:flex; align-items:flex-start; gap:9px;
  max-width:min(520px,92vw);
  background:var(--wbui-bg); border:1px solid var(--wbui-line); border-radius:12px;
  padding:10px 14px 10px 12px;
  box-shadow:0 12px 32px -10px rgba(21,26,38,.28), 0 2px 6px rgba(21,26,38,.05);
  font-size:13px; color:var(--wbui-ink); line-height:1.5;
  cursor:pointer; word-break:break-word;
  animation:wbuiTstIn .26s cubic-bezier(.2,.9,.3,1.15);
}
.wbui-tst.out{animation:wbuiTstOut .22s ease forwards}
.wbui-tst .ti{
  flex:0 0 18px; height:18px; margin-top:1px; border-radius:99px;
  display:grid; place-items:center;
  font-size:11px; font-style:normal; font-weight:700; color:#fff;
}
.wbui-tst.ok   .ti{background:#16a34a}
.wbui-tst.warn .ti{background:#d97706}
.wbui-tst.err  .ti{background:#dc2626}
.wbui-tst.info .ti{background:var(--wbui-accent)}
.wbui-tst .tx{flex:1; min-width:0}
@keyframes wbuiTstIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wbuiTstOut{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* ---------------- 确认框 / 提示框 ---------------- */
.wbui-mask{
  position:fixed; inset:0; z-index:3000;
  background:rgba(17,22,34,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px;
  animation:wbuiMaskIn .18s ease;
}
.wbui-mask.out{animation:wbuiMaskOut .16s ease forwards}
@keyframes wbuiMaskIn{from{opacity:0}to{opacity:1}}
@keyframes wbuiMaskOut{to{opacity:0}}

.wbui-dlg{
  width:min(440px,100%);
  max-height:calc(100vh - 40px); overflow:auto;
  background:var(--wbui-bg); color:var(--wbui-ink);
  border-radius:var(--wbui-radius); padding:22px 22px 18px;
  box-shadow:0 24px 60px -18px rgba(17,22,34,.45);
  animation:wbuiDlgIn .24s cubic-bezier(.2,.9,.3,1.12);
}
.wbui-mask.out .wbui-dlg{animation:wbuiDlgOut .16s ease forwards}
@keyframes wbuiDlgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wbuiDlgOut{to{opacity:0;transform:scale(.97)}}

.wbui-dlg h4{
  margin:0 0 9px; font-size:16px; font-weight:600; letter-spacing:.2px;
  display:flex; align-items:center; gap:9px; color:var(--wbui-ink);
}
.wbui-dlg h4 .ic{
  flex:0 0 24px; height:24px; border-radius:99px;
  display:grid; place-items:center; font-size:13px; font-style:normal;
  background:#fef2f2; color:#dc2626;
}
.wbui-dlg h4 .ic.info{background:#eef2ff; color:var(--wbui-accent)}
.wbui-dlg h4 .ic.warn{background:#fffbeb; color:#d97706}
.wbui-dlg h4 .ic.ok{background:#f0fdf4; color:#16a34a}

.wbui-dlg p{
  margin:0 0 18px; color:var(--wbui-ink2);
  font-size:13.5px; line-height:1.65; white-space:pre-wrap; word-break:break-word;
}
.wbui-dlg p:empty{display:none}
.wbui-dlg .extra{margin:-8px 0 16px}
.wbui-dlg .extra:empty{display:none}

.wbui-dlg .acts{display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap}
.wbui-dlg .acts button{
  height:34px; padding:0 16px; border-radius:10px; font:inherit; font-size:13px;
  cursor:pointer; color:var(--wbui-ink2);
  border:1px solid var(--wbui-line); background:var(--wbui-bg);
  transition:background .15s, border-color .15s, filter .15s;
}
.wbui-dlg .acts button:hover{background:#f7f8fc; border-color:#cfd6e4}
.wbui-dlg .acts button:focus-visible{outline:2px solid var(--wbui-accent); outline-offset:2px}
.wbui-dlg .acts button.pri{background:var(--wbui-accent); border-color:var(--wbui-accent); color:#fff}
.wbui-dlg .acts button.pri:hover{filter:brightness(1.07); background:var(--wbui-accent)}
.wbui-dlg .acts button.danger{background:#dc2626; border-color:#dc2626; color:#fff}
.wbui-dlg .acts button.danger:hover{filter:brightness(1.07); background:#dc2626}

/* 手机上从底部滑上来，拇指够得到 */
@media (max-width:520px){
  .wbui-mask{align-items:flex-end; padding:14px}
  .wbui-dlg{
    width:100%; padding:20px 18px 16px;
    border-radius:18px; animation:wbuiDlgUp .26s cubic-bezier(.2,.9,.3,1.05);
  }
  .wbui-dlg .acts{flex-direction:column-reverse}
  .wbui-dlg .acts button{width:100%; height:40px}
  @keyframes wbuiDlgUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  #toastWrap{bottom:18px}
}

/* 用户关掉动画就别动 */
@media (prefers-reduced-motion:reduce){
  #toastWrap *, .wbui-mask, .wbui-dlg{animation-duration:.01ms !important}
}