/* 作答输入的两个帮手：用手机拍的二维码（t-20261027-2fqo / 4a2t）与话筒按钮（t-20261027-x17u） */

/* 二维码嵌在点开它的那道题里，和题里的答案、解析同一种分隔：上面一道细线，左边二维码、右边说明；
   地方窄了说明落到二维码下面。点开它的按钮保持按下的样子，再点一次收起 */
.phone-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  animation: phone-handoff-in var(--motion-land) var(--ease-out) both;
}
@keyframes phone-handoff-in { from { opacity: 0; transform: translateY(-4px); } }
/* 二维码永远黑白：深色主题下也放在白纸上，手机才扫得出 */
.phone-handoff-code {
  display: grid;
  flex: none;
  place-items: center;
  width: 132px;
  height: 132px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: var(--figure-paper);
  box-shadow: inset 0 0 0 1px var(--border);
}
.phone-handoff-qr { display: block; width: 100%; height: 100%; }
.phone-handoff-code.is-stale .phone-handoff-qr { opacity: 0.15; }
.phone-handoff-body { display: flex; flex: 1 1 220px; flex-direction: column; gap: 6px; min-width: 0; }
.phone-handoff-title { margin: 0; color: var(--ink); font: var(--fw-strong) var(--fs-ui)/var(--lh-ui) var(--font-sans); }
.phone-handoff-intro { margin: 0; color: var(--muted); font: var(--fs-caption)/1.6 var(--font-sans); }
.phone-handoff-status {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 1.5em;
  margin: 2px 0 0;
  color: var(--ink);
  font: var(--fs-caption)/var(--lh-ui) var(--font-sans);
}
.phone-handoff-status:empty { visibility: hidden; }
.phone-handoff-status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  transform: translateY(-1px);
}
.phone-handoff-status[data-state="waiting"]::before { background: var(--accent); animation: phone-handoff-wait 1.6s ease-in-out infinite; }
.phone-handoff-status[data-state="received"] { color: var(--success); }
.phone-handoff-status[data-state="received"]::before { background: var(--success); }
.phone-handoff-status[data-state="expired"] { color: var(--muted); }
@keyframes phone-handoff-wait { 50% { opacity: 0.25; } }
.phone-handoff-actions { display: flex; gap: 14px; }
.phone-handoff-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font: var(--fw-strong) var(--fs-caption)/var(--lh-ui) var(--font-sans);
  cursor: pointer;
}
.phone-handoff-link:hover { text-decoration: underline; }
.phone-handoff-link:focus-visible { border-radius: var(--r-xs); outline: 2px solid var(--accent); outline-offset: 2px; }
/* 整卷用手机拍：二维码从底栏长出来，靠右对着「用手机拍整卷」，左右留白和底栏一样 */
.quiz-paper-window > .phone-handoff {
  justify-content: flex-end;
  margin: 0;
  padding: 12px clamp(16px, 4vw, 48px);
}
.quiz-paper-window > .phone-handoff .phone-handoff-body { flex: 0 1 420px; }
@media (max-width: 700px) {
  .quiz-paper-window > .phone-handoff { justify-content: flex-start; }
  .quiz-paper-window > .phone-handoff .phone-handoff-body { flex: 1 1 220px; }
}
.btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
/* 写作题一行有语音、附图片、用手机拍、提交、跳过五个按钮：窄屏上折成两行，不从左边挤出去 */
.api-question-section .api-question-actions { flex-wrap: wrap; }
.quiz-paper-tool[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-strong); }
/* 手机宽度：二维码缩一圈，和说明仍并排，少占一屏的高度 */
@media (max-width: 480px) {
  .phone-handoff { gap: 12px 14px; }
  .phone-handoff-code { width: 112px; height: 112px; padding: 5px; }
  .phone-handoff-body,
  .quiz-paper-window > .phone-handoff .phone-handoff-body { flex: 1 1 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-handoff { animation: none; }
  .phone-handoff-status[data-state="waiting"]::before { animation: none; }
}

/* 话筒：录音时变红并走秒，识别时变灰 */
.speech-input.is-recording {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.speech-input.is-recording::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: speech-input-pulse 1s ease-in-out infinite;
}
.btn.speech-input.is-recording { display: inline-flex; align-items: center; }
.speech-input.is-working { opacity: 0.7; cursor: progress; }
@keyframes speech-input-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .speech-input.is-recording::before { animation: none; } }

/* 答题纸那一行的话筒：录音时同样变红走秒；附图片满两张时附图片收起，话筒和用手机拍各管各的 */
.quiz-paper-voice.is-recording { background: var(--danger-soft); color: var(--danger); }
.quiz-paper-tool:disabled { opacity: 0.6; cursor: default; }
.quiz-paper-phone:disabled { display: none; }