/* ===== Container ===== */
#preview-box{
  display:none; position:fixed; top:0; left:0;
  width:auto; height:auto;
  max-width:80vw; max-height:75vh;
  min-width:200px;
  overflow:auto;
  background:#f9fafb;              /* was #fff -> very light gray */
  border:1px solid #d0d0d0;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:12px; z-index:2147483647;
  font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  pointer-events:none; /* re-enable inside .pv-body */
}
#preview-box .pv-body,
#preview-box .pv-body *{
  pointer-events:auto;
}

/* Hide header entirely (no top URL/title) */
#preview-box .pv-head,
#preview-box .pv-title{
  display:none !important;
}

/* ===== Vertical layout: text first, media below ===== */
#preview-box .pv-row{
  display:flex;
  flex-direction:column;   /* stack: text, then media */
  gap:12px;
  align-items:stretch;
}
#preview-box .pv-com{
  overflow-wrap:anywhere;
}
#preview-box .pv-side{
  width:100%;
}

/* ===== Comment body inline images (NOT attachment thumbs) ===== */
#preview-box .pv-body img:not(.pv-thumb){
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  cursor:default;
}
/* Make images non-clickable even if wrapped by an anchor */
#preview-box .pv-body a:has(> img){ pointer-events:none; } /* modern browsers */
#preview-box .pv-body a img{ pointer-events:none; }        /* fallback */

/* ===== Attachments grid (below the text) — EXACTLY 2 columns ===== */
#preview-box .pv-files{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap:10px;
  align-items:start;
  align-content:start;
  justify-items:start;  /* align item boxes to the left within each cell */
}
#preview-box .pv-files .pv-file{
  position:relative;      /* enables centered spinner/overlay */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;        /* reserve space before load */
  min-height:160px;       /* reserve space before load */
  border-radius:6px;
  background:#f3f3f3;     /* subtle backdrop while loading or for small images */
  overflow:hidden;        /* keep overlays neatly clipped */
}

/* Thumbnails: natural intrinsic size (no forced width/height).
   They won't be upscaled; if larger than the cell, they’ll naturally overflow available space
   unless constrained by your JS/autosize. For a hard cap, add max-width:100%. */
#preview-box .pv-files .pv-thumb{
  display:block !important;
  width:auto !important;
  height:auto !important;
  border-radius:6px;
  background:transparent;
  cursor:default;
  user-select:none;
  -webkit-user-drag:none;
}

/* ===== PDF iframe ===== */
#preview-box .pv-pdf{
  display:block;
  width:100%;
  border:none;
  border-radius:6px;
  background:#f3f3f3;
}

/* ===== Loading spinner overlay ===== */
#preview-box .pv-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:1;
}
#preview-box .pv-loading::after{
  content:"";
  width:24px; height:24px;
  border:3px solid rgba(0,0,0,.18);
  border-top-color:rgba(0,0,0,.55);
  border-radius:50%;
  animation:pv-spin .9s linear infinite;
}

/* ===== Non-clickable play overlay for video previews ===== */
#preview-box .pv-play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;  /* purely decorative */
  z-index:2;
  opacity:0;
}
#preview-box .pv-play-overlay[data-visible="1"]{
  opacity:1;
  transition:opacity .15s ease-out;
}
#preview-box .pv-play-overlay .pv-play-btn{
  width:64px; height:64px;
  border-radius:9999px;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
#preview-box .pv-play-overlay .pv-play-btn svg{
  width:28px; height:28px;
  fill:#fff;
  transform:translateX(2px);
}

/* ===== Animations ===== */
@keyframes pv-spin{ to{ transform:rotate(360deg); } }
@keyframes pv-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}