/* =====================================================================
 * 第七轮：快捷添加积木（工作区按鼠标中键）那段演示。
 * 零件沿用 styles.css（.ed / .pn / .fly / .ws / .cursor）和 styles-4.css
 * （.kbd-hint），这里只加中键那个弹窗、它边上跑的那道光、和落地时的一下亮。
 * 弹窗的样子照着 gandi-gui-3.0/src/quickadd/quickadd.css 来，只是缩小了一号
 * 以便塞进模拟编辑器里。
 * =================================================================== */

@property --qa-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.qa-ed { width: 100%; aspect-ratio: 16 / 8.2; min-height: 560px; --bs: 0.62; --qa-a: #2d8cff; --qa-b: #22d3ee; --qa-c: #7ee0ff; }
.qa-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 196px 1fr; gap: 5px; padding: 5px; }
.qa-ed .ws .bk-stack { position: absolute; }
.qa-fly { --bs: 0.5; }
.qa-fly .fly-list { gap: 7px; }

/* 中键按下那一下：一圈涟漪从指针散开。 */
.qa-mid { position: absolute; z-index: 4; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--acc); border-radius: 50%; opacity: 0; pointer-events: none; }
.qa-mid.hit { animation: qa-mid 0.65s var(--ease) 1; }
.qa-mid.at { opacity: 0.85; }
@keyframes qa-mid {
  0% { opacity: 1; scale: 0.35; }
  70% { opacity: 0.45; }
  100% { opacity: 0; scale: 2.8; }
}

/* 刚落到工作区那一串：亮一下，告诉你它在哪儿。产品里是 .qa-born。 */
.qa-land { animation: qa-land 950ms ease-out 1; }
@keyframes qa-land {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 10px rgb(45 140 255 / 90%)); }
}

/* ---- 中键弹窗 -------------------------------------------------------- */
.qa-pop { position: absolute; z-index: 7; width: 366px; --bs: 0.5; opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 0.2s var(--ease), transform 0.24s var(--ease); pointer-events: none; }
.qa-pop.show { opacity: 1; transform: none; }
.qa-p-card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: var(--paper); background: var(--e-panel); border-radius: 13px; box-shadow: 0 26px 64px rgb(0 0 0 / 58%); }

/* 常驻的细边和跑着的那道光，是同一个 1.5px 的圈，用 mask 抠出来。 */
.qa-p-card::before, .qa-p-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.qa-p-card::before { background: color-mix(in srgb, var(--qa-a) 32%, var(--e-line-2)); }
.qa-p-card::after { background: conic-gradient(from var(--qa-angle), transparent 0deg, transparent 232deg, color-mix(in srgb, var(--qa-c) 60%, transparent) 286deg, var(--qa-a) 326deg, color-mix(in srgb, #fff 45%, var(--qa-b)) 352deg, transparent 360deg); animation: qa-run 4s linear infinite; }
/* 光拖出来的那条尾巴：同一个角度，糊得更开。 */
.qa-p-glow { position: absolute; inset: -4px; border-radius: 17px; background: conic-gradient(from var(--qa-angle), transparent 0deg, transparent 190deg, color-mix(in srgb, var(--qa-c) 70%, transparent) 268deg, var(--qa-a) 320deg, color-mix(in srgb, var(--qa-b) 80%, transparent) 348deg, transparent 360deg); filter: blur(13px); opacity: 0.5; animation: qa-run 4s linear infinite; pointer-events: none; }
@keyframes qa-run { to { --qa-angle: 360deg; } }

.qa-p-in { flex: none; display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--e-line); }
.qa-p-star { flex: none; width: 16px; font-size: 13px; line-height: 16px; text-align: center; background: linear-gradient(135deg, var(--qa-a), var(--qa-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qa-p-text { flex: 1; display: flex; align-items: center; min-width: 0; min-height: 18px; font-size: 13.5px; color: #fff; }
.qa-p-text em { min-width: 0; overflow: hidden; font-style: normal; white-space: nowrap; color: var(--e-dim); opacity: 0.7; }
.qa-p-text em[hidden] { display: none; }
.qa-p-caret { flex: none; width: 1px; height: 14px; margin-left: 1px; background: #fff; animation: caret 1s steps(1) infinite; }
.qa-p-n { flex: none; padding: 1px 7px; font-size: 10px; color: var(--e-dim); background: var(--e-input); border-radius: 999px; }
.qa-p-n[hidden] { display: none; }
.qa-p-body { display: flex; flex-direction: column; min-height: 0; }
.qa-p-body [hidden] { display: none !important; }

/* 拼好的整串积木：这一块是主角，也是拖走用的把手。 */
.qa-p-res { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; margin: 9px 9px 4px; padding: 10px; background: rgb(255 255 255 / 3%); border: 1px solid var(--e-line); border-radius: 10px; transition: border-color 0.18s, box-shadow 0.18s; }
.qa-p-res.hint { border-color: color-mix(in srgb, var(--qa-a) 45%, var(--e-line)); box-shadow: 0 3px 14px color-mix(in srgb, var(--qa-a) 18%, transparent); }
.qa-p-res .bk-stack { position: relative; }
/* 正在换的那块：托一层柔光，对上下面那排候选（描粗边太硬）。 */
.qa-p-res .bk.lit { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--qa-a) 90%, transparent)); }
.qa-p-grab { position: absolute; right: 7px; top: 7px; padding: 1px 6px; font-size: 9.5px; line-height: 14px; white-space: nowrap; color: var(--e-dim); background: var(--e-panel); border: 1px solid var(--e-line); border-radius: 999px; opacity: 0; transition: opacity 0.2s; }
.qa-p-res.hint .qa-p-grab { opacity: 1; }

.qa-p-pick { padding: 0 9px 4px; }
.qa-p-pk-h { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 5px; font-size: 10.5px; color: var(--e-dim); }
.qa-p-steps { display: inline-flex; gap: 4px; }
.qa-p-steps b { display: grid; place-items: center; width: 17px; height: 17px; font-weight: 400; font-size: 11px; border: 1px solid var(--e-line); border-radius: 5px; }
/* 候选是贴着积木的胶囊，不铺满整行 —— 铺满的选中态就是一条空蓝杠。 */
.qa-p-cands { --bs: 0.42; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.qa-p-cand { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 9px; border-radius: 11px; opacity: 0.62; transition: background 0.18s, opacity 0.18s, box-shadow 0.18s; }
.qa-p-cand.on { opacity: 1; background: color-mix(in srgb, var(--qa-a) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qa-a) 38%, transparent); }
.qa-p-num { flex: none; width: 13px; margin-right: 6px; font-size: 9.5px; line-height: 13px; text-align: center; color: var(--e-dim); }
.qa-p-cand.on .qa-p-num { color: var(--qa-a); }

.qa-p-foot { flex: none; display: flex; gap: 2px 10px; align-items: center; padding: 6px 12px 7px; font-size: 10px; color: var(--e-dim); border-top: 1px solid var(--e-line); }
.qa-p-foot kbd { padding: 0 4px; margin-right: 3px; font-size: 9.5px; }
.qa-p-foot-r { margin-left: auto; opacity: 0.75; }
.qa-p-foot [hidden] { display: none !important; }

/* 不动的话那道窄光只会停在一边，不如不画。 */
@media (prefers-reduced-motion: reduce) {
  .qa-p-glow, .qa-p-card::after { opacity: 0; }
  .qa-p-caret { animation: none; }
}

@media (max-width: 860px) {
  body:not(.fit-mode) .qa-ed { aspect-ratio: auto; height: 540px; }
  body:not(.fit-mode) .qa-ed .ed-body { grid-template-columns: 1fr; }
  body:not(.fit-mode) .qa-ed .ed-body .qa-fly { display: none; }
}