/* zq-stage2-progress — 「続きから」の案内 と 「クリア」表示 */

/* ★会話カードの「外（すぐ上）」に置く。中に入れるとアプリの描き直しで消えるため。 */
#zqs2p-resume {
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff9e8, #fff3d3);
  border: 2px solid #f0c565;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
#zqs2p-resume .zqs2p-ttl { font-weight: 800; color: #6b4a10; font-size: 15px; }
#zqs2p-resume .zqs2p-sub { margin-top: 4px; color: #7a6236; font-size: 12.5px; line-height: 1.6; }
#zqs2p-resume .zqs2p-btns { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#zqs2p-resume button {
  cursor: pointer; border: none; border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: 700;
}
#zqs2p-resume .zqs2p-yes { background: linear-gradient(180deg, #ffc85a, #ff9f22); color: #4a2f00; }
#zqs2p-resume .zqs2p-no { background: #ffffff; color: #6b6b6b; border: 1px solid #d8d8d8; }
#zqs2p-resume button:hover { filter: brightness(1.05); }

/* ---- クリア表示 ---- */
#zqs2p-clear {
  margin: 16px 0 4px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  text-align: center;
  color: #16305e;
  background: linear-gradient(180deg, #eaf4ff, #d9ecff);
  border: 2px solid #7db6f0;
  box-shadow: 0 6px 20px rgba(30, 90, 170, .14);
  animation: zqs2pIn .45s ease-out;
}
#zqs2p-clear.quiet { animation: none; }
#zqs2p-clear .zqs2p-c-ttl { font-size: 19px; font-weight: 900; letter-spacing: .04em; }
#zqs2p-clear .zqs2p-c-sub { margin-top: 6px; font-size: 13px; line-height: 1.7; color: #2b4b7d; }
#zqs2p-clear .zqs2p-c-sc { margin-top: 8px; font-size: 12px; color: #4a6ea0; font-weight: 700; }
@keyframes zqs2pIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- 合格したら「次へ進む」を目立たせる ---- */
.hmz-qs-go.zqs2p-ready {
  background: linear-gradient(180deg, #4fc3ff, #1f8fe0) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 255, .3), 0 6px 16px rgba(0, 0, 0, .22) !important;
  animation: zqs2pPulse 1.8s ease-in-out infinite;
}
@keyframes zqs2pPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79, 195, 255, .30), 0 6px 16px rgba(0, 0, 0, .22); }
  50%      { box-shadow: 0 0 0 8px rgba(79, 195, 255, .12), 0 6px 16px rgba(0, 0, 0, .22); }
}