/*! @version 202610051722 */
/* ============================================================
   语音朗读按钮（错题解析 / 错题本）
   技术：浏览器原生 speechSynthesis，零密钥、离线可用
   ============================================================ */

/* 主按钮：朗读整段解析 */
.tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 11px;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tts-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.tts-btn:active { transform: scale(.96); }
.tts-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 朗读中状态 */
.tts-btn.on {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.tts-btn.on:hover { background: var(--primary-hover); color: #fff; }

.tts-ico { font-size: 12px; line-height: 1; }

/* 解析标题栏里的按钮组：主按钮在深蓝条上，需要反色 */
.qa-head { display: flex; align-items: center; gap: 10px; }
.qa-head .tts-group { margin-left: auto; }
.qa-head .tts-btn {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.qa-head .tts-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: rgba(255, 255, 255, .5); }
.qa-head .tts-btn.on { background: #fff; color: var(--primary); border-color: transparent; }

/* 小图标按钮：跟在文字段落后面 */
.tts-btn.tts-mini {
  padding: 3px 6px;
  font-size: 11px;
  vertical-align: middle;
  margin-left: 6px;
  opacity: .62;
}
.tts-btn.tts-mini:hover { opacity: 1; }
.tts-btn.tts-mini.on { opacity: 1; }

/* 段落内的迷你按钮跟着文字基线 */
.qa-text .tts-mini, .qa-right .tts-mini, .wi-exp .tts-mini { margin-left: 8px; }

/* 错题本：头部右侧对齐 */
.wi-head { display: flex; align-items: flex-start; gap: 10px; }
.wi-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.wi-exp-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* 语速设置 */
.tts-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
.tts-speed select {
  font-family: inherit;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
}

/* 手机端：按钮做大好点，孩子手指粗 */
@media (max-width: 640px) {
  .tts-btn { font-size: 13px; padding: 7px 13px; }
  .tts-btn.tts-mini { font-size: 12.5px; padding: 4px 8px; margin-left: 8px; }
  .tts-ico { font-size: 13px; }
  .qa-head { flex-wrap: wrap; }
}

/* 强制浅色主题下（覆盖层内） */
@media (prefers-color-scheme: dark) {
  .tts-btn { background: #ffffff; border-color: var(--border-strong); color: var(--text-2); }
  .tts-btn.on { background: var(--primary); color: #fff; }
  .qa-head .tts-btn {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
  }
  .tts-speed select { background: #fff; border-color: var(--border); color: var(--text-2); }
}