.lightbox {
  background-color: oklch(0.16 0.01 250 / 0.97);
  block-size: 100dvh;
  border: 0;
  color: oklch(0.98 0 0);
  inline-size: 100dvw;
  inset: 0;
  margin: auto;
  max-height: unset;
  max-width: unset;
  overflow: hidden;
  padding: 0;

  --lightbox-footer-size: 110px;

  &[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr var(--lightbox-footer-size);
  }

  &::backdrop {
    background-color: oklch(0.16 0.01 250 / 0.9);
  }

  /* The strip keeps its row and the stage keeps its size: collapsing either would resize the
     picture in the middle of a wheel tick, and the point the zoom holds under the cursor would
     slide away. Zoomed, the picture is simply allowed to spill over the space instead. */
  &.is-zoomed {
    .lightbox__footer {
      visibility: hidden;
    }

    .lightbox__stage {
      overflow: visible;
    }
  }
}

.lightbox--document[open] {
  background: #202020;
  grid-template-rows: 72px 1fr var(--lightbox-footer-size);

  .lightbox__header {
    background: #1c1c1c;
    border-bottom: 1px solid #383838;
    gap: 18px;
    padding: 0 30px;
  }

  .lightbox__avatar { block-size: 50px; inline-size: 50px; }
  .lightbox__stage { padding: 0; }
  .lightbox__nav--next { inset-inline-end: calc(16px + 70px + 16px); }
  [data-lightbox-target="replyLink"], [data-lightbox-target="replyButton"],
  [data-lightbox-target="share"] { display: none; }
}

.lightbox__header {
  align-items: center;
  background: linear-gradient(oklch(0 0 0 / 0.45), transparent);
  display: flex;
  gap: 0.5rem;
  grid-row: 1;
  padding: var(--block-space) var(--inline-space);
  position: relative;
  z-index: 1;
  min-inline-size: 0;
}

.lightbox__avatar {
  block-size: 36px;
  border-radius: 50%;
  inline-size: 36px;
  object-fit: cover;
}

.lightbox__avatar--fallback {
  align-items: center;
  background: oklch(1 0 0 / 0.16);
  color: oklch(0.98 0 0 / 0.8);
  display: flex;
  justify-content: center;

  &[hidden] {
    display: none;
  }
}

.lightbox__avatar-initials {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;

  &[hidden] {
    display: none;
  }
}

.lightbox__avatar-glyph[hidden] {
  display: none;
}

.lightbox__author {
  display: flex;
  flex-direction: column;
  margin-inline-end: auto;
  min-inline-size: 0;
}

.lightbox__author-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox__timestamp {
  color: oklch(0.98 0 0 / 0.65);
  font-size: 0.8rem;
}

.lightbox__icon-btn {
  align-items: center;
  background: transparent;
  block-size: 40px;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: oklch(0.98 0 0);
  cursor: pointer;
  display: grid;
  inline-size: 40px;
  flex-shrink: 0;
  place-items: center;
  text-decoration: none;
  transition: background 0.15s;

  &:disabled {
    cursor: default;
    opacity: 0.35;

    &:hover {
      background: transparent;
    }
  }

  &:hover {
    background: oklch(1 0 0 / 0.16);
  }
}

.lightbox__stage {
  display: grid;
  grid-row: 2;
  padding: var(--block-space) var(--inline-space);
  /* A grid item refuses to shrink under its own content unless told to, so without this the stage
     grows to the picture's natural size and a big photo opens cropped instead of whole. */
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
  place-items: center;
  position: relative;
  container-type: size;
}

.lightbox__loader {
  grid-area: 1/1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 13px;
  pointer-events: none;
}
.lightbox__loader[hidden] { display: none; }
.lightbox__loader-spinner {
  inline-size: 32px;
  block-size: 32px;
  border: 3px solid #fff6;
  border-block-start-color: white;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox__loader-spinner { animation: cs-spin 0.7s linear infinite; }
}

.lightbox__image,
/* A file with no preview: the catalog's card in the middle, in the dark scheme the stage always is. */
.lightbox__file { grid-area: 1/1; max-inline-size: 100%; color-scheme: dark; }
.lightbox__file[hidden] { display: none; }

/* A text file is a white sheet, like a PDF page, framed sandboxed from our own preview endpoint. */
.lightbox__text { grid-area: 1/1; position: absolute; inset: 0; display: grid; place-items: center; padding: var(--ds-space-4); }
.lightbox__text[hidden] { display: none; }
.lightbox__text iframe { inline-size: min(100%, 52rem); block-size: 100%; border: 0; border-radius: var(--ds-radius-md); background: white; }

.lightbox__video,
.lightbox__document {
  grid-area: 1/1;
  /* Positioned, not just placed: a percentage max-size on a grid item measures against a height the
     grid has not settled yet, so a tall photo ignored the cap and opened taller than the screen. */
  position: absolute;
  inset: 0;
  margin: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* The player takes the video's own shape, as large as the stage lets it, so its controls sit on the picture. */
.lightbox__video {
  inline-size: min(100cqi, 100cqb * var(--video-ratio, 16 / 9));
  aspect-ratio: var(--video-ratio, 16 / 9);
}

.lightbox__video[hidden] { display: none; }

/* A photo opened to be seen (a contact's, a group's) is drawn up to 70% of the screen even when it came small, keeping its
   shape; the media of a conversation keep their own size. */
.lightbox--fit .lightbox__image { min-block-size: min(70dvh, 100cqi); min-inline-size: min(70dvh, 100cqi); object-fit: contain; }

.lightbox__image {
  cursor: zoom-in;
  /* Without this the browser starts its own picture drag, which cancels the pointer gesture and
     freezes the pan after the first move. */
  -webkit-user-drag: none;
  user-select: none;

  &.is-zoomed {
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }
}

.lightbox__video { inline-size: min(900px, 100%); }

.lightbox__document {
  background: transparent;
  block-size: 100%;
  color: white;
  flex-direction: column;
  inline-size: 100%;
  overflow: hidden;
}

.lightbox__document:not([hidden]) { display: flex; }

.lightbox__pdf-search-form[hidden] { display: none; }
.lightbox__pdf-search { --hover-size: 0; background: #333; border: 1px solid #555; border-radius: 6px; color: white; padding: 0.5rem 0.7rem; max-inline-size: 220px; }
.lightbox__pdf-search:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }

.lightbox__pdf-controls {
  align-items: center;
  background: #242424;
  border: 1px solid #414141;
  border-radius: 22px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  position: absolute;
  right: 16px;
  z-index: 2;
  inline-size: 70px;
}

.lightbox__pdf-current, .lightbox__pdf-total {
  align-items: center;
  display: flex;
  justify-content: center;
  min-block-size: 50px;
  min-inline-size: 50px;
}

.lightbox__pdf-current { border: 1px solid #414141; border-radius: 12px; }
.lightbox__pdf-divider { background: #414141; block-size: 1px; inline-size: 40px; margin-block: 8px; }
.lightbox__pdf-button { --hover-size: 0; align-items: center; background: transparent; border: 0; border-radius: 10px; color: white; cursor: pointer; display: flex; justify-content: center; min-block-size: 50px; min-inline-size: 50px; }
.lightbox__pdf-button:hover { background: #383838; }
.lightbox__pdf-button:disabled { opacity: 0.35; cursor: default; }

.lightbox__pdf-scroll {
  flex: 1;
  min-block-size: 0;
  overflow: auto;
  padding: 20px 60px;
}

.lightbox__pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox__pdf-page { position: relative; flex: none; background: white; box-shadow: 0 2px 12px #0003; }
.lightbox__pdf-page canvas { display: block; background: white; }
.lightbox__pdf-text-layer {
  color-scheme: only light;
  position: absolute;
  inset: 0;
  overflow: clip;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-size-adjust: none;
  transform-origin: 0 0;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.lightbox__pdf-text-layer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0 0;
  user-select: text;
}
.lightbox__pdf-text-layer > :not(.markedContent),
.lightbox__pdf-text-layer .markedContent span:not(.markedContent) {
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.lightbox__pdf-text-layer .markedContent { display: contents; }
.lightbox__pdf-text-layer ::selection { background: #4096ff66; }
.lightbox__pdf-fallback { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 0.75rem; justify-content: center; text-align: center; }
.lightbox__pdf-fallback[hidden] { display: none; }
.lightbox__pdf-fallback-cover { background: white; box-shadow: 0 2px 12px #0003; max-height: 52vh; max-width: min(320px, 72vw); }

.lightbox__footer {
  align-items: center;
  background: linear-gradient(transparent, oklch(0 0 0 / 0.45));
  display: flex;
  gap: 0.5rem;
  grid-row: 3;
  justify-content: center;
  padding: var(--block-space) var(--inline-space);
  position: relative;
  z-index: 1;
}

.lightbox__footer[hidden] { visibility: hidden; }

.lightbox__strip {
  display: flex;
  gap: 0.5rem;
  max-inline-size: 100%;
  overflow-x: auto;
  padding: 0.25rem;
  scrollbar-width: thin;
}

.lightbox__thumbnail {
  --hover-size: 0;
  align-items: center;
  background: oklch(1 0 0 / 0.12);
  border: 2px solid transparent;
  border-radius: 0.4rem;
  color: white;
  cursor: pointer;
  display: flex;
  flex: 0 0 62px;
  font-size: 0.85rem;
  font-weight: 700;
  justify-content: center;
  overflow: hidden;
  block-size: 62px;
}

.lightbox__thumbnail:hover { background: oklch(1 0 0 / 0.25); }
.lightbox__thumbnail[aria-current="true"] { border-color: white; }
.lightbox__thumbnail { position: relative; }
.lightbox__thumbnail img,
.lightbox__thumbnail-pdf { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lightbox__thumbnail-pdf { position: absolute; inset: 0; }
.lightbox__thumbnail-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  padding: 0.2rem;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.58);
  color: white;
}

.lightbox__nav {
  --hover-size: 0;
  align-items: center;
  background: oklch(0 0 0 / 0.5);
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  block-size: 44px;
  inline-size: 44px;
  z-index: 2;
}

.lightbox__nav:hover { background: oklch(1 0 0 / 0.22); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--previous { inset-inline-start: var(--inline-space); }
.lightbox__nav--next { inset-inline-end: var(--inline-space); }

.lightbox__zoom {
  align-items: center;
  display: flex;
  gap: 0.25rem;

  &[hidden] {
    display: none;
  }

  @media (width < 600px) {
    display: none;
  }
}

@media (width < 600px) {
  .lightbox--document[open] {
    grid-template-rows: 56px 1fr var(--lightbox-footer-size);

    .lightbox__header { gap: 0.25rem; padding-inline: 0.5rem; }
    .lightbox__avatar { block-size: 36px; inline-size: 36px; }
    [data-lightbox-target="jumpButton"], [data-lightbox-target="forwardButton"] { display: none; }
  }

  .lightbox__pdf-controls { bottom: 8px; right: 8px; }
  .lightbox--document[open] .lightbox__nav { block-size: 40px; inline-size: 40px; inset-block-start: 8px; }
  .lightbox--document[open] .lightbox__nav--next { inset-inline-end: 8px; }
  .lightbox--document[open] .lightbox__nav--previous { inset-inline: auto calc(8px + 40px + 4px); }
  .lightbox__pdf-scroll { padding-inline: 12px 90px; }
}