/* Shared gallery uses the project media tile language in both contexts. */
.wh-upload.wh-gallery-upload .wh-gallery-legacy{display:none!important}
.wh-upload.wh-gallery-upload .wh-upload-drop{display:block;padding:12px;border:1.5px dashed #b9bfd1;border-radius:16px;background:#f8f8fc;text-align:left}
.wh-upload.wh-gallery-upload .wh-shared-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;align-items:start;width:100%;margin:0}
.wh-upload.wh-gallery-upload .wh-media-tile,.wh-upload.wh-gallery-upload .wh-media-add{position:relative;aspect-ratio:1;min-width:0;border:1px solid #e1e4ed;border-radius:9px;background:#fff;overflow:hidden}
.wh-upload.wh-gallery-upload .wh-media-image{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden;color:#7052b5;font-size:25px}
.wh-upload.wh-gallery-upload .wh-media-image img{width:100%;height:100%;object-fit:cover;display:block}
.wh-upload.wh-gallery-upload .wh-media-doc-name{font-size:11px;max-width:100%;padding:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#394155}
.wh-upload.wh-gallery-upload .wh-media-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px dashed #b9bfd1;color:#6e52b4;cursor:pointer;font-size:12px}
.wh-upload.wh-gallery-upload .wh-media-add>i{font-size:25px}
.wh-upload.wh-gallery-upload .wh-media-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.wh-upload.wh-gallery-upload .wh-gallery-remove{position:absolute;top:4px;right:4px;z-index:2;width:27px;height:27px;border:0;border-radius:50%;background:#fff;color:#b83b48;box-shadow:0 1px 5px #0002;cursor:pointer}
.wh-upload.wh-gallery-upload .wh-media-tile:not(.wh-media-uploading):not(.wh-media-processing) .wh-media-curtain{display:none!important}
.wh-upload.wh-gallery-upload .wh-media-curtain{position:absolute;right:0;top:0;bottom:0;background:#ffffffa8;pointer-events:none}
.wh-upload.wh-gallery-upload .wh-media-expand{display:block;margin:10px auto 0;border:0;background:transparent;color:#7052b5;cursor:pointer}
.wh-upload.wh-gallery-upload .wh-media-tile[hidden]{display:none!important}
.wh-upload.wh-gallery-upload .wh-media-play{position:absolute;bottom:6px;left:6px;color:white;text-shadow:0 1px 4px #000}
.wh-upload.wh-gallery-upload.is-dragover .wh-upload-drop{border-color:#7657c8;background:#f0ebff}
@media(max-width:600px){.wh-upload.wh-gallery-upload .wh-shared-media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}}

/* 2.3.2: Place the play icon over the thumbnail instead of in the flex layout.
   Both the project grid and the report's shared gallery use this tile markup. */
.wh-project-media-grid .wh-media-image { position: relative; }
.wh-project-media-grid .wh-media-image .wh-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
}

/* 2.3.3: Project detail's WorkhourMedia.render() uses a different DOM from
   the editor gallery: .wh-p-gallery-play is a SIBLING of .wh-p-gallery-thumb.
   Overlay it in the image row, overriding workhour-media.css's generic icon rule. */
.wh-shared-gallery .wh-shared-view { position: relative; }
.wh-shared-gallery .wh-shared-view > i.wh-p-gallery-play {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: auto;
  width: calc(100% - 14px);
  height: auto;
  aspect-ratio: 1.15;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  z-index: 1;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 7px rgba(0,0,0,.8);
  pointer-events: none;
}