/* صفحهٔ کتاب در چت — کارتِ بالای پاسخ + نمایشگرِ تمام‌صفحه. docs/BOOK_PAGE_IN_CHAT.md
   تمِ پیش‌فرضِ چت تیره است و روشن با [data-theme="light"] می‌آید. کاغذِ کتاب در هر دو تم
   سفید می‌ماند (همان چیزی که دانش‌آموز روی میزش دارد)؛ فقط قاب با تم عوض می‌شود. */

.nbp-card {
  --nbp-edge: rgba(255, 255, 255, 0.14);
  --nbp-cap: rgba(226, 232, 240, 0.78);
  margin: 0 0 10px;
  padding: 0;
  max-width: 100%;
  direction: rtl;
}
[data-theme="light"] .nbp-card {
  --nbp-edge: rgba(15, 23, 42, 0.12);
  --nbp-cap: rgba(51, 65, 85, 0.82);
}
.nbp-grid {
  display: flex;
  gap: 6px;
  max-width: 100%;
}
.nbp-shot {
  --nbp-ar: 1284 / 1812;
  position: relative;
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  height: min(46vh, 400px);
  max-width: 100%;
  aspect-ratio: var(--nbp-ar);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: #f6f3ec linear-gradient(100deg, #f6f3ec 30%, #fffdf8 50%, #f6f3ec 70%) 0 0 / 300% 100%;
  box-shadow: 0 0 0 1px var(--nbp-edge), 0 2px 10px rgba(0, 0, 0, 0.18);
  animation: nbp-shimmer 1.4s linear infinite;
  -webkit-tap-highlight-color: transparent;
}
.nbp-shot.is-loaded { animation: none; background: #fff; }
.nbp-card[data-count="2"] .nbp-shot,
.nbp-card[data-count="3"] .nbp-shot,
.nbp-card[data-count="4"] .nbp-shot { height: min(34vh, 290px); flex: 1 1 0; }
.nbp-card[data-count="3"] .nbp-grid,
.nbp-card[data-count="4"] .nbp-grid { flex-wrap: wrap; }
.nbp-card[data-count="3"] .nbp-shot,
.nbp-card[data-count="4"] .nbp-shot { flex: 1 1 calc(50% - 3px); height: auto; }
.nbp-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.nbp-shot:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; }
.nbp-zoom-badge {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  pointer-events: none;
}
.nbp-zoom-badge svg,
.nbp-cap svg,
.nbp-btn svg,
.nbp-ask svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.nbp-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nbp-cap);
}
.nbp-cap svg { width: 15px; height: 15px; }
.nbp-cap-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes nbp-shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .nbp-shot { animation: none; } }

/* ---------- نمایشگرِ تمام‌صفحه ---------- */
html.nbp-lock, html.nbp-lock body { overflow: hidden !important; overscroll-behavior: none; }
.nbp-viewer {
  --nbp-fade: 1;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 11, 18, calc(0.96 * var(--nbp-fade)));
  color: #f1f5f9;
  font-family: inherit;
  outline: none;
  animation: nbp-in 0.16s ease-out;
}
@keyframes nbp-in { from { opacity: 0; } }
.nbp-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  background: rgba(8, 11, 18, 0.72);
  position: relative;
  z-index: 2;
}
.nbp-top { padding-top: max(8px, env(safe-area-inset-top)); }
.nbp-bottom { justify-content: center; flex-wrap: wrap; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.nbp-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nbp-pct { flex: none; font-size: 13px; opacity: 0.75; min-width: 3.2em; text-align: center; }
.nbp-btn,
.nbp-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nbp-btn svg { width: 22px; height: 22px; }
.nbp-btn:hover, .nbp-ask:hover { background: rgba(255, 255, 255, 0.18); }
.nbp-btn:disabled { opacity: 0.35; cursor: default; }
.nbp-btn:focus-visible, .nbp-ask:focus-visible { outline: 3px solid #38bdf8; outline-offset: 1px; }
.nbp-ask { background: #0ea5e9; color: #fff; font-weight: 600; padding: 0 14px; margin-inline-start: 6px; }
.nbp-ask:hover { background: #0284c7; }
.nbp-ask:disabled { opacity: 0.6; }
.nbp-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.nbp-viewer.is-zoomed .nbp-stage { cursor: move; }
.nbp-img {
  /* flex: none — آیتمِ flex پهنا را بی‌نسبت کوچک می‌کند و صفحه کش می‌آید (دیده‌شده در ۳۷۵px). */
  flex: none;
  width: auto;
  height: auto;
  display: block;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.nbp-viewer.is-loading .nbp-img { opacity: 0.35; }
.nbp-msg {
  position: absolute;
  inset: auto 16px 50% 16px;
  text-align: center;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
}
/* گوشیِ باریک: پنج دکمهٔ آیکنی یک ردیف، «بپرس» ردیفِ خودش را تمام‌عرض می‌گیرد — برچسب هرگز حذف نمی‌شود. */
@media (max-width: 440px) {
  .nbp-ask { flex: 1 1 100%; margin-inline-start: 0; }
}