/* 云筑 AI — 交互层组件样式（提示条 / 确认框 / 引导 / 命令面板 / 设置 / 流程条）
   依赖 assets/tokens.css 与 assets/site.css */

/* ---------- 提示条 ---------- */
.yz-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:400;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:var(--fs-14);font-weight:600;
  box-shadow:var(--sh-2);opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-spring);
  pointer-events:auto;position:relative;overflow:hidden}
.toast.show{opacity:1;transform:none}
.toast .ic{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:0 0 auto}
.toast .bar{position:absolute;left:0;bottom:0;height:2px;background:currentColor;opacity:.35;width:100%;transform-origin:left;animation:toastBar linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast-ok .ic{color:var(--ok);background:var(--ok-soft)}
.toast-info .ic{color:var(--info);background:var(--info-soft)}
.toast-warn .ic{color:var(--warn);background:var(--warn-soft)}
.toast-err .ic{color:var(--danger);background:var(--danger-soft)}
.toast-act{border:none;background:none;color:var(--accent);font-weight:800;font-size:var(--fs-13);padding:2px 4px;flex:0 0 auto}
.toast-act:hover{text-decoration:underline}

/* 顶部进度条：页面级操作的「正在处理」信号 */
.yz-progress{position:fixed;top:0;left:0;height:2px;z-index:500;width:0;background:var(--accent);
  transition:width var(--t-fast) linear,opacity var(--t-base) var(--ease);opacity:0;box-shadow:0 0 8px var(--accent)}
.yz-progress.on{opacity:1}

/* ---------- 确认框 ---------- */
.confirm-body{display:flex;gap:14px;align-items:flex-start}
.confirm-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.confirm-ic.danger{color:var(--danger);background:var(--danger-soft)}
.confirm-ic.warn{color:var(--warn);background:var(--warn-soft)}
.confirm-ic.info{color:var(--info);background:var(--info-soft)}
.confirm-txt{font-size:var(--fs-14);color:var(--text-3);line-height:1.7}
.confirm-txt b{color:var(--text);font-weight:800}

/* ---------- 新手引导 ---------- */
.tour-mask{position:fixed;inset:0;z-index:390;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.tour-hole{position:fixed;z-index:391;border-radius:14px;box-shadow:0 0 0 4px var(--accent),0 0 0 9999px rgba(0,0,0,.62);
  transition:all var(--t-slow) var(--ease-out);pointer-events:none;border:1px solid var(--accent-line)}
.tour-pop{position:fixed;z-index:392;max-width:320px;background:var(--surface);border:1px solid var(--accent-line);
  border-radius:16px;padding:18px;box-shadow:var(--sh-modal);animation:modalIn var(--t-slow) var(--ease-spring)}
.tour-pop h4{font-size:var(--fs-15);font-weight:800;margin-bottom:6px}
.tour-pop p{font-size:var(--fs-13);color:var(--text-3);line-height:1.7}
.tour-pop .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.tour-dots{display:flex;gap:5px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background var(--t-fast) var(--ease),width var(--t-base) var(--ease)}
.tour-dots i.on{background:var(--accent);width:16px;border-radius:3px}
.tour-btns{display:flex;gap:8px;margin-left:auto}
.tour-btn{padding:7px 14px;border-radius:var(--pill);font-size:var(--fs-12);font-weight:700;transition:background var(--t-fast) var(--ease)}
.tour-btn.ghost{color:var(--text-3)}
.tour-btn.ghost:hover{background:var(--inset);color:var(--text)}
.tour-btn.main{background:var(--accent);color:var(--on-accent)}
.tour-btn.main:hover{filter:brightness(1.08)}

/* ---------- 命令面板 ---------- */
.palette-mask{position:fixed;inset:0;z-index:410;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.palette{width:100%;max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-modal);overflow:hidden;animation:modalIn var(--t-slow) var(--ease-spring);display:flex;flex-direction:column;max-height:70vh}
.palette-input{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.palette-input input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:var(--fs-15)}
.palette-input input::placeholder{color:var(--text-4)}
.palette-list{overflow-y:auto;padding:8px}
.palette-group{font-size:var(--fs-11);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);padding:10px 12px 6px}
.palette-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.palette-item .pi-ic{width:26px;height:26px;border-radius:8px;background:var(--inset);display:grid;place-items:center;color:var(--text-3);flex:0 0 auto}
.palette-item .pi-tx{flex:1;min-width:0}
.palette-item .pi-t{font-size:var(--fs-14);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-item .pi-s{font-size:var(--fs-11);color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-item.on{background:var(--accent-soft)}
.palette-item.on .pi-ic{background:var(--accent);color:var(--on-accent)}
.palette-foot{padding:8px 14px;border-top:1px solid var(--line);display:flex;gap:14px;font-size:var(--fs-11);color:var(--text-4)}
.palette-empty{padding:28px 16px;text-align:center;color:var(--text-4);font-size:var(--fs-13)}

/* ---------- 键盘按键 ---------- */
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;
  background:var(--inset);border:1px solid var(--line-strong);border-bottom-width:2px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--text-3);font-weight:700}

/* ---------- 设置面板 ---------- */
.set-panel{width:100%;max-width:520px}
.set-group{padding:6px 0}
.set-group + .set-group{border-top:1px solid var(--line)}
.set-group h5{font-size:var(--fs-11);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);padding:12px 22px 8px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 22px;transition:background var(--t-fast) var(--ease)}
.set-row:hover{background:var(--inset)}
.set-row .lbl{font-size:var(--fs-14);font-weight:600;color:var(--text)}
.set-row .sub{font-size:var(--fs-11);color:var(--text-4);margin-top:2px}
.seg{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:var(--pill);padding:3px;gap:2px;flex:0 0 auto}
.seg button{padding:6px 12px;border-radius:var(--pill);font-size:var(--fs-12);font-weight:700;color:var(--text-3);transition:all var(--t-fast) var(--ease)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.swatches{display:flex;gap:6px;flex:0 0 auto}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;transition:transform var(--t-base) var(--ease-spring),border-color var(--t-fast) var(--ease)}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:var(--text);transform:scale(1.1)}
/* 开关 */
.switch{position:relative;width:40px;height:22px;border-radius:11px;background:var(--line-strong);transition:background var(--t-base) var(--ease);flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t-base) var(--ease-spring)}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(18px)}

/* ---------- 流程步骤条 ---------- */
.steps{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.steps .st{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.steps .st-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-11);font-weight:800;
  background:var(--inset);color:var(--text-4);border:1px solid var(--line);transition:all var(--t-base) var(--ease)}
.steps .st-tx{font-size:var(--fs-12);font-weight:700;color:var(--text-4);white-space:nowrap}
.steps .st.done .st-num{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.steps .st.done .st-tx{color:var(--text-3)}
.steps .st.cur .st-num{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:0 0 0 4px var(--accent-soft)}
.steps .st.cur .st-tx{color:var(--text)}
.steps .st-line{width:22px;height:1px;background:var(--line-strong);margin:0 6px;flex:0 0 auto}
.steps .st-line.done{background:var(--ok)}

/* ---------- 上下文提示气泡 ---------- */
.tip{position:fixed;z-index:380;max-width:260px;background:var(--text);color:var(--bg);
  border-radius:10px;padding:9px 12px;font-size:var(--fs-12);font-weight:600;line-height:1.6;
  box-shadow:var(--sh-2);animation:modalIn var(--t-base) var(--ease-spring);pointer-events:none}
.tip::after{content:"";position:absolute;border:6px solid transparent}
.tip[data-side="bottom"]::after{top:-12px;left:18px;border-bottom-color:var(--text)}
.tip[data-side="top"]::after{bottom:-12px;left:18px;border-top-color:var(--text)}

/* ---------- 下一步建议条 ---------- */
.nextbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--r-md);padding:12px 16px;margin:14px 0}
.nextbar .nb-tx{font-size:var(--fs-13);color:var(--text-2);display:flex;align-items:center;gap:8px}
.nextbar .nb-btns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.nextbar .nb-btn{padding:7px 14px;border-radius:var(--pill);font-size:var(--fs-12);font-weight:700;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);transition:all var(--t-fast) var(--ease)}
.nextbar .nb-btn:hover{border-color:var(--accent);color:var(--accent)}
.nextbar .nb-x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-4);flex:0 0 auto}
.nextbar .nb-x:hover{background:var(--inset);color:var(--text)}

/* ---------- 快捷帮助 ---------- */
.help-mask{position:fixed;inset:0;z-index:410;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.help-card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-modal);overflow:hidden;animation:modalIn var(--t-slow) var(--ease-spring)}
.help-card .hh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.help-card .hh h4{font-size:var(--fs-16);font-weight:800}
.help-card .hb{padding:8px 22px 18px}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.help-row:last-child{border-bottom:none}
.help-row span{font-size:var(--fs-13);color:var(--text-2)}
.help-row .keys{display:flex;gap:4px;flex:0 0 auto}

@media (max-width:640px){
  .yz-toasts{bottom:16px}
  .palette-mask{padding-top:8vh}
  .set-row{flex-wrap:wrap}
}

/* ---------- 命令面板 / 设置入口 ---------- */
.yz-hide-mobile{display:inline-grid}
@media (max-width:520px){ .yz-hide-mobile{display:none!important} }
.mobile-menu .mob-action{color:var(--accent);font-weight:700;cursor:pointer}
.mobile-menu .mob-action:active{background:var(--inset)}