/**
 * formula-speech.css — 公式朗读按钮 / 选中朗读按钮 / 提示条
 *
 * 只给 formula-speech.js 用。类名一律 fs- 前缀，不动 mf- / sf- 现有样式。
 * 配色跟公式面板走（用面板已有的 CSS 变量），深色模式单独覆盖一遍。
 */

/* ── 详情页大按钮：跟着 .mf-btn / .sf-btn 的排版走，只加"播放中"的状态 ── */
.mf-speak-btn,
.sf-speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 11px;
  background: var(--bg, #fff);
  color: var(--brand, #4d6bfe);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.mf-speak-btn[aria-pressed="true"],
.sf-speak-btn[aria-pressed="true"] {
  border-color: var(--brand, #4d6bfe);
  background: var(--brand, #4d6bfe);
  color: #fff;
}
.mf-speak-btn:active,
.sf-speak-btn:active { transform: scale(.97); }

/* ── 列表卡片上的小喇叭：只放一个图标，别把卡片挤乱 ── */
.mf-speak-mini,
.sf-speak-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  padding: 2px 6px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--muted, #8b93a7);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.mf-speak-mini[aria-pressed="true"],
.sf-speak-mini[aria-pressed="true"] {
  border-color: var(--brand, #4d6bfe);
  background: var(--brand, #4d6bfe);
  color: #fff;
}

/* 播放中：按钮上有一个很轻的呼吸感，让人知道"正在读" */
.mf-speak-btn.is-on,
.sf-speak-btn.is-on,
.mf-speak-mini.is-on,
.sf-speak-mini.is-on { animation: fs-pulse 1.6s ease-in-out infinite; }
@keyframes fs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-speak-btn.is-on, .sf-speak-btn.is-on,
  .mf-speak-mini.is-on, .sf-speak-mini.is-on { animation: none; }
}

/* ── 选中文字后浮出的「🔊 从这读」 ──
   z-index 比对话页的"发给 AI"小菜单（2147483647）低一档：
   两个功能都要能出现，但 AI 菜单是用户熟悉的主菜单，让它压在上面。
   ⚠️ 位置由 JS 算（选区下方，放不下就翻到上方），这里只管长得像按钮。 */
.fs-sel-btn {
  position: fixed;
  z-index: 2147483500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(24, 28, 40, .94);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.fs-sel-btn[hidden] { display: none !important; }
.fs-sel-btn:active { transform: scale(.96); }

/* ── 提示条（"登录后才能听朗读"之类） ── */
.fs-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translate(-50%, 12px);
  z-index: 2147483400;
  max-width: min(86vw, 420px);
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(24, 28, 40, .94);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 深色模式 ── */
html[data-theme="dark"] .mf-speak-btn,
html[data-theme="dark"] .sf-speak-btn,
html[data-theme="dark"] .mf-speak-mini,
html[data-theme="dark"] .sf-speak-mini {
  background: #171b26;
  border-color: #2b3242;
  color: #9db4ff;
}
html[data-theme="dark"] .mf-speak-btn[aria-pressed="true"],
html[data-theme="dark"] .sf-speak-btn[aria-pressed="true"],
html[data-theme="dark"] .mf-speak-mini[aria-pressed="true"],
html[data-theme="dark"] .sf-speak-mini[aria-pressed="true"] {
  background: #4d6bfe;
  border-color: #4d6bfe;
  color: #fff;
}
html[data-theme="dark"] .fs-sel-btn { background: rgba(240, 243, 250, .95); color: #11151f; }
html[data-theme="dark"] .fs-toast { background: rgba(240, 243, 250, .95); color: #11151f; }

/* 375 宽：详情页按钮整行都不挤（标题会先换行） */
@media (max-width: 420px) {
  .mf-speak-btn, .sf-speak-btn { min-height: 38px; font-size: 12.5px; padding: 7px 12px; }
  .mf-speak-mini, .sf-speak-mini { min-width: 32px; min-height: 28px; }
}