/* 數學公式顯示增強（math.js） */
.math-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.math-ov { position: absolute; background: var(--screen, #000); color: #f2f2f2; white-space: nowrap; overflow: hidden; }
.math-ov.inline { display: flex; align-items: center; overflow: visible; }
.math-ov.block { display: flex; align-items: center; justify-content: center; }
.math-ov .katex { font-size: 1em; text-indent: 0; }
.math-ov .katex-display { margin: 0; }
.math-ov .katex-display > .katex { white-space: nowrap; }
.math-fit { transform-origin: center center; }
.math-measure { visibility: hidden; left: 0; top: 0; background: none; overflow: visible; }
.math-mark { position: absolute; height: 0; border-bottom: 2px dotted #6cf; padding-bottom: 1px; pointer-events: auto; cursor: help; }
.math-tip {
  position: fixed; z-index: 60; max-width: min(92vw, 720px); max-height: 60vh; overflow: auto;
  background: #111; color: #f2f2f2; border: 1px solid #6cf; border-radius: 8px;
  padding: 8px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.math-tip .katex { font-size: 1.3em; }
.math-tip .katex-display { margin: .2em 0; }

/* ===== 浮動的「數學模式」控制條 =====
   光暈與雷達漣漪沿用站對站轉錄頁的語言：奶茶橘、外圈往外擴散、深色半透明標籤 */
.mm-ctl {
  --mm-glow: rgba(217, 119, 6, 0.5);
  --mm-glow-far: rgba(217, 119, 6, 0.22);
  position: fixed; top: 16px; right: 22px; z-index: 40;   /* 實際位置由 math.js 算（預設在終端機畫面右上角，可拖到瀏覽器任何地方） */
  user-select: none; -webkit-user-select: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.mm-ctl.mm-in { opacity: 1; transform: none; }

.mm-pill {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.3rem 0.45rem 0.3rem 0.35rem; border-radius: 999px;
  background: rgba(24, 20, 14, 0.92); color: #fde68a;
  border: 1px solid rgba(217, 119, 6, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: box-shadow .35s ease, border-color .35s ease;
}
/* 開啟時：三層光暈（一圈實線、近的光、遠而淡的光），和「有鍵盤的那一邊」同一種發光 */
.mm-on .mm-pill {
  border-color: var(--tea, #d97706);
  box-shadow: 0 0 0 2px var(--tea, #d97706), 0 0 14px 2px var(--mm-glow), 0 0 36px 8px var(--mm-glow-far);
}

.mm-grip { display: flex; align-items: center; gap: 0.5rem; cursor: grab; touch-action: none; }
.mm-drag .mm-grip { cursor: grabbing; }
.mm-drag .mm-pill { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--tea, #d97706); }
.mm-title { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; }

/* 圓圈：關閉時是灰褐色，開啟時是橘色，外面有一圈慢慢往外擴散的漣漪 */
.mm-badge {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff;
  background: #57534e; box-shadow: 0 0 0 3px #fff;
  transition: background .3s ease;
}
.mm-on .mm-badge { background: var(--tea, #d97706); }
.mm-badge::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--tea, #d97706); opacity: 0; pointer-events: none;
}
.mm-on .mm-badge::before { animation: mm-ripple 2.4s ease-out infinite; }
@keyframes mm-ripple { from { transform: scale(1); opacity: .85; } to { transform: scale(2.4); opacity: 0; } }

/* 滑桿開關 */
.mm-switch {
  position: relative; flex: none; width: 46px; height: 26px; border: 0; border-radius: 999px;
  background: #4b4338; cursor: pointer; transition: background .25s ease;
}
.mm-on .mm-switch { background: var(--tea, #d97706); }
.mm-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e7e5e4; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), background .25s ease;
}
.mm-on .mm-knob { transform: translateX(20px); background: #fff; }
.mm-switch:focus-visible { outline: 3px solid rgba(253, 230, 138, 0.7); outline-offset: 2px; }
/* 切到「開」的那一刻：光環往外擴散，閃兩下就停（和貼上按鈕亮起同一種） */
.mm-switch::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 3px solid var(--tea, #d97706); opacity: 0; pointer-events: none;
}
.mm-switch.mm-burst::after { animation: mm-burst .9s ease-out 2; }
@keyframes mm-burst { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9, 2.4); opacity: 0; } }

/* ===== 右上角選單裡的開關（數學模式、顯示數學模式提示） =====
   選單是白底（style.css），所以「關」用淺灰褐、「開」用網站的奶茶橘；狀態只看 aria-checked */
.menu button.mt-item { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; }
.mt-label { white-space: nowrap; }
.mt-sw {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: #a8a29e; transition: background .2s ease;
}
.mt-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.mt-item[aria-checked="true"] .mt-sw { background: var(--tea, #d97706); }
.mt-item[aria-checked="true"] .mt-knob { transform: translateX(14px); }

@media (max-width: 600px) {
  .mm-ctl { top: 10px; right: 12px; }
  .mm-title { font-size: 0.82rem; }
  .mm-pill { gap: 0.5rem; }
}

/* 系統設定「減少動態效果」：漣漪與閃光都停掉，只留靜態的一圈 */
@media (prefers-reduced-motion: reduce) {
  .mm-ctl, .mm-pill, .mm-badge, .mm-switch, .mm-knob { transition: none; }
  .mm-on .mm-badge::before { animation: none; transform: scale(1.4); opacity: .55; }
  .mm-switch.mm-burst::after { animation: none; }
  .mt-sw, .mt-knob { transition: none; }
}