.nf-lightbox { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.nf-lightbox-stage {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #10151d;
  color: #f5f7fa;
  touch-action: pan-y pinch-zoom;
}
.nf-lightbox-image-slot { position: absolute; inset: 0; padding: var(--nf-media-frame); }
.nf-lightbox-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.nf-lightbox-image[hidden], .nf-lightbox-status[hidden], .nf-lightbox-nav[hidden], .nf-lightbox-counter[hidden] { display: none; }
.nf-lightbox-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 76px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.nf-lightbox-status::before { content: ''; width: 28px; height: 28px; border: 3px solid #58606d; border-top-color: #fff; border-radius: 50%; }
.nf-lightbox-status--error::before { display: none; }
.nf-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: rgb(15 22 32 / 80%);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.nf-lightbox-nav:hover { background: #334256; }
.nf-lightbox-nav > svg { display: block; width: 24px; height: 24px; }
.nf-lightbox-nav:focus-visible { outline-color: #fff; }
.nf-lightbox-previous { inset-inline-start: 16px; }
.nf-lightbox-next { inset-inline-end: 16px; }
[dir="rtl"] .nf-lightbox-nav > svg { transform: scaleX(-1); }
.nf-lightbox-counter {
  position: absolute;
  inset-block-end: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 20px;
  background: rgb(15 22 32 / 75%);
  color: #fff;
  direction: ltr;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.nf-dialog--media .nf-dialog-aside { flex-basis: 360px; }
.nf-lightbox-comments { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--nf-dialog-color); }
.nf-lightbox-comments-heading { flex: 0 0 auto; margin: 0; padding-block: 22px 16px; padding-inline: 16px 66px; font-size: 1rem; font-weight: 600; border-bottom: 1px solid var(--nf-dialog-border); }
.nf-lightbox-comments-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.nf-lightbox-comments-list { list-style: none; padding: 0; margin: 0; }
.nf-lightbox-comments-list > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 9px; margin-bottom: 20px; }
.nf-lightbox-comment-avatar { grid-row: span 2; border-radius: 50%; object-fit: cover; }
.nf-lightbox-comment-author { font-weight: 600; overflow-wrap: anywhere; }
.nf-lightbox-comments-list time { font-size: .75rem; color: var(--bs-secondary-color, #616d7b); }
.nf-lightbox-comment-body { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: .875rem; }
.nf-lightbox-comment-body img, .nf-lightbox-comment-body iframe, .nf-lightbox-comment-body video { max-width: 100%; }
.nf-lightbox-comment-body pre { max-width: 100%; overflow: auto; }
.nf-lightbox-comments-status { font-size: .875rem; color: var(--bs-secondary-color, #616d7b); }
.nf-lightbox-comments-status:empty { display: none; }
.nf-lightbox-comments-form { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--nf-dialog-border); }
.nf-lightbox-comments-form textarea { resize: vertical; min-height: 72px; max-height: 160px; font-size: .875rem; }
.nf-lightbox-comments-form > button { display: block; margin-block-start: 8px; margin-inline-start: auto; }
.nf-lightbox-comments-error { margin: 8px 0 0; color: var(--bs-danger, #b02a37); font-size: .875rem; }
.nf-lightbox-comments-form[hidden], .nf-lightbox-comments-more[hidden] { display: none; }
@media (max-width: 700px) {
  .nf-dialog--media .nf-dialog-aside { flex: 0 0 auto; height: min(500px, 70dvh); }
  .nf-lightbox-comments-heading { padding: 16px; }
  .nf-lightbox-previous { inset-inline-start: max(8px, env(safe-area-inset-left)); }
  .nf-lightbox-next { inset-inline-end: max(8px, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: no-preference) {
  .nf-lightbox-status::before { animation: nf-lightbox-spin 900ms linear infinite; }
  @keyframes nf-lightbox-spin { to { transform: rotate(360deg); } }
}