/* Clochat video bubble + PDF reader + legacy photo viewer styling.
   Consolidated from css/30-video-pdf-viewers.css's v41->v50 cascade down to
   only the rules that style markup the final JS actually produces:
     - `.video-frame` (still rendered by chat/render.js's msgHtml for
       `kind === 'video'`, unchanged since v41).
     - `.pdf.v47-reader` + `.v50-sizer` / `.v50-content` / canvas.v47-page
       (media/pdf-viewer.js's openFile — the final v50 reader; the earlier
       v42 `.pdf.v42-pdf` iframe-based reader and v43-v46's `.pdf.v43-pdf` /
       `.pdf-pages` / `.pdf-zoom-*` canvas readers, and the `.msg .pdf-card`
       bubble markup from v43/v44/v45, are all dead: no current code path
       renders those classes any more, so they are dropped rather than
       carried forward as unreachable CSS).
     - `.viewer.v50-photo-viewer` (media/photo-legacy-viewer.js's `viewer()`
       — still reachable from the profile media grid; NOT used for in-chat
       photo taps, which use photo-viewer.css instead). */

.video-frame {
  width: min(78vw, 360px);
  aspect-ratio: 16 / 9;
  max-height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  display: block;
}
.video-frame video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000 !important;
}
.msg.mine .video-frame { margin-left: auto; }

.pdfbar {
  height: calc(58px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: #10182e;
}
.pdfbar .pdfname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; }
.pdfbar button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #26345c; color: #fff; font-size: 20px; transition: transform .15s ease; }
.pdfbar button:active { transform: scale(.94); }

.pdf.v47-reader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 700 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #eef1f7 !important;
}
.pdf.v47-reader .pdfbar {
  flex: 0 0 calc(62px + env(safe-area-inset-top)) !important;
  height: calc(62px + env(safe-area-inset-top)) !important;
  box-sizing: border-box !important;
  padding: env(safe-area-inset-top) 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #10182e !important;
  color: #fff !important;
}
.pdf.v47-reader .pdfname { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: left !important; }
.pdf.v47-reader .pdfbar button { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; background: #26345c !important; color: #fff !important; font-size: 22px !important; }
.pdf.v47-reader .v47-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  background: #eef1f7 !important;
  touch-action: pan-x pan-y !important;
  padding: 0 !important;
}
.pdf.v47-reader .v50-sizer { position: relative !important; min-width: 100% !important; }
.pdf.v47-reader .v50-content { position: absolute !important; top: 0 !important; transform-origin: 0 0 !important; will-change: transform !important; }
.pdf.v47-reader canvas.v47-page { display: block !important; margin: 14px 0 0 0 !important; background: #fff !important; box-shadow: 0 2px 11px rgba(16,24,46,.18) !important; }
.pdf.v47-reader .v47-loading { min-height: 60vh; display: grid; place-items: center; color: #69738b; font-weight: 700; }
.pdf.v47-reader .v47-fallback { padding: 24px; text-align: center; color: #354060; }

/* Full-screen photo reader: controls never overlap image content (used by
   the profile media grid's viewer(), see media/photo-legacy-viewer.js). */
.viewer.v50-photo-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 800 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}
.viewer.v50-photo-viewer .v50-photo-stage { position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; touch-action: pan-x pan-y !important; overscroll-behavior: contain !important; }
.viewer.v50-photo-viewer .v50-photo-sizer { position: relative !important; min-width: 100% !important; min-height: 100% !important; }
.viewer.v50-photo-viewer .v50-photo-content { position: absolute !important; left: 0 !important; top: 0 !important; transform-origin: 0 0 !important; will-change: transform !important; }
.viewer.v50-photo-viewer img.v50-photo { display: block !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; object-fit: contain !important; }
.viewer.v50-photo-viewer .topbtn { position: absolute !important; top: calc(12px + env(safe-area-inset-top)) !important; z-index: 50 !important; pointer-events: auto !important; }