/* ════════════════════════════════════════════════
   learning-title-gloss.css — 学习库列表标题的译文气泡

   ⚠ position: fixed 是本组件的**功能前提**，不是随手选的定位方式：
     1. 气泡不进卡片盒模型，展开译文时列表不会整体跳动（交互契约第 2 条）；
     2. `.list-scroll` 有 overflow-y:auto / overflow-x:hidden，absolute 气泡会被滚动
        容器裁掉——尤其是浮在卡片上方的那半截。
   代价是气泡不跟随滚动，故 JS 侧在 scroll/resize 时直接收起。
════════════════════════════════════════════════ */

.lt-gloss {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: none;
  max-width: 320px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.2px;
  /* 译文可能比标题长，允许折行；但一行标题译名通常不会触发 */
  white-space: normal;
  word-break: break-word;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.lt-gloss.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 箭头：水平位置由 JS 写入 --lt-arrow-x，跟随标题起始处，
   这样气泡被视口边界推开后仍指得准。 */
.lt-gloss::after {
  content: '';
  position: absolute;
  left: var(--lt-arrow-x, 24px);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

/* 默认浮在标题上方 → 箭头朝下，贴气泡底边 */
.lt-gloss::after {
  top: 100%;
  border-top: 7px solid rgba(28, 28, 30, 0.94);
}

/* 上方放不下时翻到下方（列表首张卡片必然走这条）→ 箭头朝上 */
.lt-gloss.is-below::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 7px solid rgba(28, 28, 30, 0.94);
}

/* 等待译文：文字整体呼吸，不用「…」跳点——气泡宽度会跟着抖 */
.lt-gloss.is-pending .lt-gloss-text {
  opacity: 0.72;
  animation: lt-gloss-breathe 1.1s ease-in-out infinite;
}

@keyframes lt-gloss-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-gloss { transition: none; }
  .lt-gloss.is-pending .lt-gloss-text { animation: none; }
}

/* 标题上的可点提示：只在学习库列表生效，不影响「我的」页复用 .media-list-title 的本地列表 */
.learning-video-list .media-list-title {
  cursor: pointer;
  /* base.css 里这里是 `flex: 1` —— 标题会撑满整行剩余宽度，热区和高亮块跟着占满一整行，
   * 于是「点标题查译文」把标题右边那大片空白也吃掉了，卡片反而只剩缩略图能点进播放页。
   * 改成按内容收缩：热区只包住文字本身，右侧空白归 .media-list-title-row（flex 容器），
   * 点在那里会正常冒泡到卡片的 onclick 进播放页。
   * ⚠ 保留 flex-shrink:1 —— 长标题仍要能被压缩，base.css 的 nowrap + 省略号才有效。 */
  flex: 0 1 auto;
  /* 点击区域比文字略宽，指头不必压得很准；负 margin 抵消掉，不改变原有排版 */
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.learning-video-list .media-list-title.is-glossing {
  background: var(--blue-light);
  color: var(--blue);
}

/* 暗色：气泡底色抬亮一档，纯黑玻璃在暗色卡片上糊成一片 */
body.dark .lt-gloss {
  background: rgba(72, 72, 74, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.dark .lt-gloss::after {
  border-top-color: rgba(72, 72, 74, 0.96);
}
body.dark .lt-gloss.is-below::after {
  border-top-color: transparent;
  border-bottom-color: rgba(72, 72, 74, 0.96);
}