/* css/word-select-card.css — "ytt-card": thẻ pinyin+nghĩa nổi khi bôi đen chữ Hán (thay quick-lookup-bar cũ) */

#ytt-card {
  position: fixed;
  z-index: 99999;
  display: none;
  max-width: 340px;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(28,24,64,0.98), rgba(16,14,42,0.99));
  border: 1px solid rgba(212,165,80,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none; /* ẩn thật (opacity 0) không được chặn click nội dung phía dưới */
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#ytt-card.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ytt-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ytt-card-word {
  font-family: 'KaiTi', 'STKaiti', serif; font-weight: 700;
  font-size: 1.3rem; color: #ffd54f; letter-spacing: 0.03em;
}
.ytt-card-tts, .ytt-card-save {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 26px; height: 26px; line-height: 1;
  cursor: pointer; font-size: 0.85rem; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.ytt-card-tts:hover, .ytt-card-save:hover { background: rgba(255,255,255,0.16); }
/* [v20.50] Nút "Lưu vào Sổ Tay" — icon đổi tạm thời (⏳/✅/📚/❌) làm phản hồi ngay lúc lưu, xem
   saveToNotebook() trong word-select-card.js. */
.ytt-card-save:disabled { opacity: 0.6; cursor: default; }
.ytt-card-hsk {
  margin-left: auto; font-size: 0.68rem; font-weight: 700; padding: 2px 6px;
  border-radius: 6px; background: rgba(212,165,80,0.18); border: 1px solid rgba(212,165,80,0.35);
  color: #f0c060; white-space: nowrap;
}
.ytt-card-py { font-size: 0.86rem; color: rgba(255,213,79,0.75); margin-bottom: 4px; }
.ytt-card-hv { font-size: 0.76rem; color: rgba(255,255,255,0.4); margin-bottom: 3px; }
.ytt-card-def { font-size: 0.86rem; color: rgba(230,225,240,0.92); line-height: 1.45; }
/* [v20.49] explain (giải thích sâu — nguồn gốc/hình ảnh/ý nghĩa, kiểu "💡 Là một thành ngữ chỉ...")
   — đặt SAU .ytt-card-def, TRƯỚC .ytt-card-usage: đúng thứ tự đọc nghĩa ngắn → hiểu sâu → cách dùng. */
.ytt-card-explain {
  margin-top: 5px; font-size: 0.8rem; color: rgba(186,220,255,0.8); line-height: 1.45;
  font-style: italic; background: rgba(255,255,255,0.04); padding: 6px 8px; border-radius: 6px;
}
/* [v20.48] usage (cách dùng — khi nào dùng được/không dùng được) + ex (câu ví dụ bám chủ đề) —
   dùng trong showCustom(), tách rõ khỏi .ytt-card-def (nghĩa) để dễ phân biệt bằng mắt. */
.ytt-card-usage {
  margin-top: 5px; font-size: 0.8rem; color: rgba(255,213,79,0.7); line-height: 1.4;
}
.ytt-card-ex {
  margin-top: 5px; font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.4;
  font-family: 'KaiTi', 'STKaiti', serif; font-style: italic;
}
.ytt-card-ai-tag { margin-top: 6px; font-size: 0.68rem; color: rgba(186,104,200,0.85); }
.ytt-card-loading, .ytt-card-note {
  font-size: 0.84rem; color: rgba(230,225,240,0.75); display: flex; align-items: center; gap: 6px;
}

/* Light theme */
html[data-theme="light"] #ytt-card {
  background: #fff;
  border-color: rgba(120,80,20,0.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
html[data-theme="light"] .ytt-card-word { color: #8b5e1a; }
html[data-theme="light"] .ytt-card-tts, html[data-theme="light"] .ytt-card-save { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #4a3728; }
html[data-theme="light"] .ytt-card-tts:hover, html[data-theme="light"] .ytt-card-save:hover { background: rgba(0,0,0,0.09); }
html[data-theme="light"] .ytt-card-hsk { background: rgba(139,94,26,0.10); border-color: rgba(139,94,26,0.28); color: #8b5e1a; }
html[data-theme="light"] .ytt-card-py { color: rgba(139,94,26,0.75); }
html[data-theme="light"] .ytt-card-hv { color: rgba(60,40,20,0.5); }
html[data-theme="light"] .ytt-card-def { color: #3a2c1e; }
html[data-theme="light"] .ytt-card-explain { color: rgba(30,90,140,0.85); background: rgba(30,90,140,0.06); }
html[data-theme="light"] .ytt-card-usage { color: rgba(139,94,26,0.85); }
html[data-theme="light"] .ytt-card-ex { color: rgba(60,40,20,0.55); }
html[data-theme="light"] .ytt-card-ai-tag { color: #7b2d8b; }
html[data-theme="light"] .ytt-card-loading,
html[data-theme="light"] .ytt-card-note { color: rgba(60,40,20,0.65); }

/* Mobile: nút nghe cần vùng chạm lớn hơn */
@media (max-width: 480px) {
  #ytt-card { max-width: calc(100vw - 24px); }
  .ytt-card-tts, .ytt-card-save { width: 30px; height: 30px; }
}