/* Popup tra từ nhanh. Chỉ dùng token màu hệ thống (tokens.css / theme-bridge.css), nên tự theo theme sáng/tối. */
.inline-dict {
  position: fixed; z-index: 1300; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 18px;
  color: var(--color-on-surface, #1d1b20); background: var(--color-surface-lowest, #fff);
  border: 1px solid var(--color-outline-variant, #cbc4d2); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  font-family: "Inter", "Noto Sans JP", sans-serif;
}
.inline-dict[hidden] { display: none; }
.inline-dict:focus { outline: none; }
.inline-dict__word { display: flex; align-items: baseline; gap: 10px; }
.inline-dict__word strong { font-family: "Noto Sans JP", sans-serif; font-size: 26px; font-weight: 700; }
.inline-dict__word span { color: var(--color-on-surface-variant, #49454f); font-size: 14px; }
.inline-dict__word .inline-dict__jlpt {
  align-self: center; margin-left: auto; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 700;
  color: var(--color-on-primary-container, #21005d); background: var(--color-primary-container, #eaddff);
}
.inline-dict__meaning { margin: 10px 0 4px; font-size: 15px; line-height: 1.5; }
.inline-dict__type { margin: 0; color: var(--color-on-surface-variant, #49454f); font-size: 12px; }
.inline-dict__example {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-container, #f3edf7);
}
.inline-dict__example p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Hết lượt tra từ nhanh: giá và số dư trước khi mua. */
.inline-dict__paywall strong { display: block; font-size: 15px; }
.inline-dict__paywall p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.inline-dict__paywall p strong { display: inline; font-size: inherit; }
.inline-dict__auto { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.4; }
.inline-dict__auto input { margin-top: 2px; }
.inline-dict__paywall .inline-dict__hint { color: var(--color-on-surface-variant, #49454f); font-size: 12px; }
.inline-dict__example .inline-dict__example-vi { margin-top: 4px; color: var(--color-on-surface-variant, #49454f); font-size: 13px; }
.inline-dict__actions { display: flex; gap: 8px; margin-top: 16px; }
.inline-dict__actions button, .inline-dict__actions a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 9999px; font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background-color .1s, color .1s, border-color .1s;
}
/* Chưa lưu: nút chính màu primary. Đã lưu: nút tonal (nền primary nhạt), bấm lại để bỏ lưu. */
.inline-dict__actions button { color: var(--color-on-primary, #fff); background: var(--color-primary, #4f378a); }
.inline-dict__actions button:hover { filter: brightness(1.08); }
.inline-dict__actions button.is-saved {
  color: var(--color-on-primary-container, #21005d); background: var(--color-primary-container, #eaddff);
}
.inline-dict__actions a {
  color: var(--color-primary, #4f378a); background: transparent; border-color: var(--color-outline-variant, #cbc4d2);
}
.inline-dict__actions a:hover { background: var(--color-primary-soft, rgba(79, 55, 138, .08)); }
.inline-dict__status:empty { display: none; }
.inline-dict__status { margin: 8px 0 0; color: var(--color-on-surface-variant, #49454f); font-size: 12px; }
.inline-dict :focus-visible { outline: 2px solid var(--color-focus, var(--color-primary, #4f378a)); outline-offset: 2px; }
html[data-theme="dark"] .inline-dict { box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
@media (max-width: 640px) { .inline-dict { inset: auto 12px 12px; width: auto; padding: 20px; border-radius: 20px; } }
.inline-dict:not([hidden]) { animation: inline-dict-open .16s ease-out; }
@keyframes inline-dict-open { from { opacity: 0; transform: translateY(5px); } }
/* "Sổ tay" là nút phụ (viền) như "Mở từ điển"; nút yêu thích vẫn là nút chính. */
.inline-dict__actions button.inline-dict__notebook-btn {
  color: var(--color-primary, #4f378a); background: transparent; border-color: var(--color-outline-variant, #cbc4d2);
}
.inline-dict__actions button.inline-dict__notebook-btn:hover,
.inline-dict__actions button.inline-dict__notebook-btn[aria-expanded="true"] {
  filter: none; background: var(--color-primary-soft, rgba(79, 55, 138, .08));
}
/* Danh sách sổ tay để chọn (mở từ nút "Sổ tay"). */
.inline-dict__notebooks {
  display: grid; gap: 6px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--color-outline-variant, #cbc4d2);
}
.inline-dict__notebooks strong { font-size: 12px; }
.inline-dict__notebooks button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--color-outline-variant, #cbc4d2); border-radius: 12px; font: inherit; font-size: 13px;
  color: var(--color-on-surface, #1d1b20); background: var(--color-surface-container, #f3edf7); cursor: pointer; text-align: left;
}
.inline-dict__notebooks button:hover { border-color: var(--color-primary, #4f378a); }
.inline-dict__notebooks button:disabled { opacity: .6; cursor: progress; }
.inline-dict__notebooks small { color: var(--color-on-surface-variant, #49454f); }
.inline-dict__notebook-list { display: grid; gap: 6px; }
.inline-dict__notebooks [hidden] { display: none; }
.inline-dict__create { display: grid; gap: 8px; }
.inline-dict__create label { display: grid; gap: 6px; font-size: 12px; }
.inline-dict__create input {
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--color-outline-variant, #cbc4d2); border-radius: 10px;
  color: var(--color-on-surface, #1d1b20); background: var(--color-surface-lowest, #fff); font: inherit;
}
.inline-dict__create-actions { display: flex; gap: 8px; }
.inline-dict__create-actions button { flex: 1; justify-content: center; }