/* 剪烛 (web/js/persona-page.js · candle): she asks, you answer — a conversation, never a form.
   Uses the persona page's own tokens (--pp-*), so both themes follow. */

.pc-wait-t { margin: 0 0 0 40px; font-size: 12px; letter-spacing: .2em; color: var(--pp-faint); }
.pc-zh { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .04em; color: var(--pp-faint); }
.pc-why { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 0 40px; font-size: 11.5px; letter-spacing: .08em; color: var(--pp-faint); }
.pc-why span { color: var(--pp-accent); font-size: 9px; }
.pc-quick { padding-left: 40px; }
.pc-free { margin-left: 40px; }
.pp-you-line.pc-left { opacity: .55; font-size: 12px; letter-spacing: .14em; }

/* the wicks: one per question; the answered ones burn steady, the one being asked flickers */
.pc-foot { display: flex; justify-content: space-between; align-items: center; margin-left: 40px; }
.pc-foot > span:last-child { display: inline-flex; gap: 14px; }
#persona-root .pc-skip { letter-spacing: .24em !important; }
.pc-wicks { display: inline-flex; align-items: flex-end; gap: 11px; height: 22px; }
.pc-wick { position: relative; display: block; width: 3px; height: 11px; border-radius: 1px; background: var(--pp-rule-strong); }
.pc-wick b { position: absolute; left: 50%; bottom: 100%; width: 6px; height: 9px; margin-left: -3px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #fffdf4 0 18%, var(--pp-glow) 46%, transparent 72%); opacity: 0; transform: scale(.4); transform-origin: 50% 100%;
  transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.pc-wick.done b { opacity: .65; transform: scale(.8); }
.pc-wick.on b { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 5px var(--pp-glow)); }

@keyframes pc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pc-flick { 0%, 100% { transform: scale(1.1) rotate(-1.5deg); } 50% { transform: scale(1.04, 1.16) rotate(1.5deg); } }
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="gentle"] .pc-quick .pp-chip { animation: pc-rise .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.35s + var(--i, 0) * .07s); }
  body[data-motion="gentle"] .pc-wick.on b { animation: pc-flick 1.6s ease-in-out infinite; }
}
@media (max-width: 640px) {
  .pc-why, .pc-quick, .pc-free, .pc-foot, .pc-wait-t { margin-left: 0; padding-left: 0; }
}