/* ── Fullscreen image ──────────────────────────────────────────────────────────
   The phone's answer to a picture in the chat or in the file browser: the file
   panel is a reader for TEXT, and a new tab is a way out of the app, so neither
   of them is a way to look at a screenshot. Here the picture is the screen, and
   the gestures on it are the ones a photo viewer has (public/js/lightbox.js).

   Everything about the layout exists to make scale 1 mean FIT: the picture is
   centred in a padded box with max-width/max-height 100%, so its laid-out size
   is already the largest it can be without cropping, and the transform the
   gestures write starts from there rather than from a size someone has to
   compute. */
#lightbox {
  position: fixed;
  inset: 0;
  /* Above everything the app draws (the highest elsewhere is 300, the sidebar's
     phone overlay in 02-sidebar.css). <dialog>s are in the top layer and above
     this by construction, which is right: a dialog is a question being asked. */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The safe area, as padding rather than inset: the backdrop still runs under
     the notch and the home indicator — it is a dark screen, it should reach the
     edges — while the picture at scale 1 stays inside them. */
  padding:
    env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: rgba(0, 0, 0, 0.95);
  /* A zoomed picture is bigger than its box; it is looked at by panning, not by
     scrolling anything. */
  overflow: hidden;
  /* Both halves of "the page behind must not move": touch-action hands every
     finger to the pointer handlers instead of to the scroller (without it
     Chromium takes the gesture over and sends pointercancel mid-pinch), and
     overscroll-behavior stops a pan that runs out of picture from chaining into
     whatever is underneath. */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}
#lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
  -webkit-user-drag: none;
}
/* 44px, the smallest target a finger is reliably right about, and placed inside
   the safe area rather than merely inside the screen — under a notch the top
   right corner is where the status bar is. */
#lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}
#lightbox-close:hover { background: rgba(0, 0, 0, 0.7); }