/* ==================================================================
   內文詞彙互動：可點擊詞彙、詞彙提示卡、發音按鈕與發音設定
   ------------------------------------------------------------------
   由 word-tip.js 與 speech.js 共用，故凡是有「點擊詞彙看字義」或
   發音按鈕的頁面（文章內頁、影片會話練習、我的詞彙庫、我的慣用句、
   單字介紹頁）皆需載入本檔。原本寫在 article.css，因影片會話練習
   未載入 article.css 而抽出，兩邊才不會各自維護一份。
================================================================== */

/* ------------------------------------------------------------------
   色彩變數：與 article.css 的宣告同名同值，故兩份一起載入時不衝突；
   未載入 article.css 的頁面（影片會話練習）則以這裡的值為準。
   調整顏色時兩處都要改（慣例同 video.css 的等級色）。
------------------------------------------------------------------ */
:root {
  --article-primary: #002a80;
  --article-primary-dark: #001f61;
  --article-ink: #1f2937;
  --article-muted: #6b7280;
  --article-surface: #fff;
  --article-card-border: #e5eaf3;
  /* 慣用句在內文中的橘色字：與學習狀態的警示橘（--article-warm #f59e0b）同源，
     取較深的一階當作字色，白底上才有足夠對比；夜間版面由 article.css 覆寫為較亮的橘 */
  --article-tip-ink: #d97706;
}

/* 可點擊詞彙 */
.tap-word {
  cursor: pointer;
  border-radius: 0;
  padding: 0 1px;
  transition: background-color 0.15s, color 0.15s;
}

.tap-word:hover {
  background-color: rgba(50, 202, 219, 0.22);
  color: var(--article-primary-dark);
}

/* 重點詞彙在內文中的標示 */
.tap-word.is-key-word {
  color: var(--article-primary);
  font-weight: 700;
  border-bottom: 2px solid rgba(0, 42, 128, 0.45);
}

/* 慣用句在內文中的標示（橘色字）：由 WordTip.markTips() 比對片語後逐字加上；
   同一個字同時是重點詞彙時，慣用句的橘色字優先（片語比單字更值得注意），
   詞彙原本的底線則保留，仍看得出它也是重點詞彙 */
.tap-word.is-key-tip,
.tap-word.is-key-word.is-key-tip {
  color: var(--article-tip-ink);
  font-weight: 700;
}

/* ---------------------------------------------
   詞彙發音按鈕（Web Speech API）
   詞彙卡、點擊詞彙視窗、我的詞彙庫共用同一組樣式；
   朗讀中以脈衝光暈提示目前正在播放的詞彙。
   --------------------------------------------- */
.article-speak {
  flex-shrink: 0;
  align-self: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--article-card-border);
  background: var(--article-surface);
  color: var(--article-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.article-speak:hover {
  background: var(--article-primary);
  border-color: var(--article-primary);
  color: #fff;
}

.article-speak.is-speaking {
  background: var(--article-primary);
  border-color: var(--article-primary);
  color: #fff;
  animation: article-speak-pulse 1.1s ease-in-out infinite;
}

@keyframes article-speak-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 42, 128, 0.45);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(0, 42, 128, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 42, 128, 0);
  }
}

/* 發音設定：語音與語速選單 */
.speech-setting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--article-surface);
  border: 1px solid var(--article-card-border);
  border-radius: 0;
  padding: 5px 8px 5px 14px;
}

.speech-setting .speech-setting-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--article-muted);
  font-size: 17.5px;
  white-space: nowrap;
}

.speech-setting select {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--article-ink);
  font-size: 17.5px;
  max-width: 190px;
  cursor: pointer;
}

.speech-setting .speech-rate-select {
  max-width: 80px;
}

/* 真人音檔來源與授權標示 */
.speech-credit-note {
  margin: 14px 0 0;
  color: #9aa5b5;
  font-size: 16.5px;
  line-height: 1.7;
}

.speech-credit-note i {
  margin-right: 5px;
}

/* 隱藏發音設定選單（speech.js 會以 .show() 寫入行內樣式，故需 !important） */
.speech-setting.speech-setting-hidden {
  display: none !important;
}

/* 瀏覽器不支援語音合成時，隱藏所有發音元件 */
body.speech-unsupported .article-speak,
body.speech-unsupported .speech-setting {
  display: none !important;
}

/* ---------------------------------------------
   詞彙提示卡（點擊內文詞彙時顯示）
   由 word-tip.js 動態插入於 body，位置以 JS 計算。
   --------------------------------------------- */
.word-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1080;
  width: 310px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e4eaf5;
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(23, 43, 77, 0.16);
  padding: 14px 16px 12px;
  max-height: 70vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.word-tip.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 指向詞彙的小箭頭（預設在下緣，提示卡置於詞彙下方時翻至上緣） */
.word-tip-arrow {
  position: absolute;
  bottom: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-right: 1px solid #e4eaf5;
  border-bottom: 1px solid #e4eaf5;
  transform: rotate(45deg);
}

.word-tip.is-bottom .word-tip-arrow {
  top: -7px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid #e4eaf5;
  border-top: 1px solid #e4eaf5;
}

.word-tip-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.word-tip-word {
  font-size: 24px;
  font-weight: 800;
  color: var(--article-ink);
  letter-spacing: 0.02em;
}

.word-tip-phonetic {
  color: var(--article-muted);
  font-size: 17.5px;
}

.word-tip-pos {
  display: inline-block;
  background: #eef2fb;
  color: var(--article-primary);
  font-size: 16px;
  font-weight: 700;
  border-radius: 0;
  padding: 2px 8px;
  margin-right: 6px;
}

.word-tip-meaning {
  color: #374151;
  font-size: 18.5px;
  line-height: 1.7;
  margin-top: 10px;
}

/* 外部字典的英文釋義（次於中文釋義） */
.word-tip-definition {
  color: #6b7280;
  font-size: 17px;
  line-height: 1.65;
  margin-top: 8px;
}

/* 變化型詞彙的原形與其釋義（ran → run） */
.word-tip-base {
  background: #f6f8fc;
  border-radius: 0;
  color: var(--article-muted);
  font-size: 16.5px;
  line-height: 1.6;
  padding: 7px 10px;
  margin-top: 10px;
}

.word-tip-base b {
  color: var(--article-primary-dark);
  font-size: 17.5px;
}

.word-tip-base span {
  display: block;
  color: #4b5563;
  margin-top: 2px;
}

/* 考試標籤 */
.word-tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.word-tip-tag {
  background: #f3f6fc;
  border: 1px solid #cfdaf0;
  color: var(--article-primary);
  font-size: 15.5px;
  font-weight: 700;
  border-radius: 0;
  padding: 2px 7px;
}

.word-tip-example {
  border-left: 3px solid #e4eaf5;
  padding-left: 10px;
  margin-top: 10px;
}

.word-tip-example .en,
.word-tip-example .cn {
  display: block;
  font-size: 17px;
  line-height: 1.6;
}

.word-tip-example .en {
  color: #4b5563;
}

.word-tip-example .cn {
  color: var(--article-muted);
  margin-top: 2px;
}

.word-tip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e6ecf9;
  color: var(--article-primary-dark);
  font-size: 16px;
  font-weight: 700;
  border-radius: 0;
  padding: 3px 9px;
  margin-top: 10px;
}

.word-tip-loading,
.word-tip-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--article-muted);
  font-size: 17.5px;
  margin-top: 10px;
}

.word-tip-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #eef1f7;
  margin-top: 12px;
  padding-top: 10px;
}

.word-tip-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e6ecf9;
  border: 1px solid #d5e3ff;
  color: var(--article-primary-dark);
  font-size: 17px;
  font-weight: 700;
  border-radius: 0;
  padding: 6px 12px;
  transition: background-color 0.15s, color 0.15s;
}

.word-tip-add:hover {
  background: var(--article-primary);
  border-color: var(--article-primary);
  color: #fff;
}

/* 提示卡的「詳細介紹」連結（前往單字介紹頁） */
.word-tip-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #eef1f7;
  color: var(--article-muted);
  font-size: 17px;
  font-weight: 700;
  padding: 6px 12px;
  transition: border-color 0.15s, color 0.15s;
}

.word-tip-more:hover {
  border-color: var(--article-primary);
  color: var(--article-primary);
}