/* lightbox.css — the full-screen image viewer (image_lightbox.js) a chat
   thumbnail opens into. One layer above the modal overlay (9999) and the
   shell dialog, under the toasts (10001, notify.css) and the security gate
   (100000). Dark on both themes on purpose: the picture is the content, the
   chrome stays out of its way. */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 9, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ecedeb;
  animation: lb-fade-in .16s ease;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes lb-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes lb-pop-in {
  from { transform: scale(.97); opacity: 0 }
  to   { transform: none; opacity: 1 }
}

/* Top bar: file name, "n / total", then the actions at the right edge. */
.lb-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .6rem .5rem .9rem;
  min-height: 52px;
}
.lb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 600;
}
.lb-count {
  flex: 0 0 auto;
  margin-left: .5rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  opacity: .65;
  white-space: nowrap;
}
.lb-count:empty { display: none }
.lb-spacer { flex: 1 1 auto }
.lb-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #ecedeb;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .14); color: #fff }
.lb-btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}

/* The picture, fitted. Clicking the dark area around it closes. */
.lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem .75rem;
  overflow: hidden;
  cursor: zoom-out;
}
.lb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  cursor: default;
  animation: lb-pop-in .18s ease;
}
.lb-img[hidden] { display: none }
.lb-overlay.can-zoom .lb-img { cursor: zoom-in }
/* 1:1 — the stage becomes a scroll box around the file at its real size. */
.lb-overlay.is-zoomed .lb-stage {
  display: block;
  overflow: auto;
  cursor: default;
  -webkit-overflow-scrolling: touch;
}
.lb-overlay.is-zoomed .lb-img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  cursor: zoom-out;
  animation: none;
}

/* ← → over the stage's edges; hidden for a single image. */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #ecedeb;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.lb-nav:hover { background: rgba(255, 255, 255, .22) }
.lb-nav:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.lb-nav[hidden] { display: none }
.lb-prev { left: .6rem }
.lb-next { right: .6rem }

/* The file is gone (pruned upload, deleted staged file). */
.lb-missing {
  padding: .9rem 1.2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #ff8a80;
  font-size: .9rem;
}

/* No page scroll behind the viewer. */
html.lb-open, html.lb-open body { overflow: hidden }

@media (max-width: 680px) {
  .lb-bar { padding: .35rem .35rem .35rem .75rem; min-height: 48px }
  .lb-stage { padding: 0 .35rem .5rem }
  .lb-nav { width: 38px; height: 60px; font-size: 1.7rem; opacity: .85 }
  .lb-prev { left: .35rem }
  .lb-next { right: .35rem }
}
@media (prefers-reduced-motion: reduce) {
  .lb-overlay, .lb-img { animation: none }
}