/* Oct 11 (Mark 23:54 / 23:58 / 00:06): creator gallery - locked-video teasers, justified rows (own shape, no crop), floating Chat.
   Shared by the website (/css/paid-videos.css) and the Mini App (/app/, /chat/). */

/* ---- justified rows (Mark 00:06, like Google Photos / Flickr): every tile in a row has the same height, its width follows the
   video's real aspect ratio (--ar = width/height, inline), so a row is filled exactly: no crop, no bars, no filler.
   flex-basis = ar x target row height, flex-grow = ar -> all tiles of a row grow in proportion and keep one common height.
   The last row is not stretched (the ::after spacer takes the rest). Phones: ~2 portrait videos per row. ---- */
.tiles.mp-gal{display:flex !important;flex-wrap:wrap;gap:8px;--rowh:250px}
/* Oct 11 02:03 (Mark): phones - the gallery uses (almost) the full screen width with small gaps, so the video pairs are larger */
/* Oct 11 02:11 (Mark): a bit smaller, 11 px side margins, 10 px gap; row gap == gap between the two tiles of a pair (one gap value) */
@media (max-width:599px){.tiles.mp-gal{gap:10px !important;row-gap:10px !important;column-gap:10px !important;width:calc(100vw - 22px) !important;max-width:none !important;margin-left:calc(50% - 50vw + 11px) !important;margin-right:0 !important}}
@media (min-width:600px){.tiles.mp-gal{--rowh:300px;gap:12px !important;row-gap:12px !important;column-gap:12px !important}}
@media (min-width:1000px){.tiles.mp-gal{--rowh:330px}}
.tiles.mp-gal::after{content:'';flex:999 1 0;min-width:0}
.tiles.mp-gal>*{--ar:.8;flex:var(--ar) 1 calc(var(--ar) * var(--rowh));min-width:0;width:auto !important;max-width:100%;margin:0 !important;box-sizing:border-box}
.tiles.mp-gal>.mp-j,.tiles.mp-gal>.art,.tiles.mp-gal>.tile{aspect-ratio:var(--ar) !important}
.tiles.mp-gal:not(.mp-justified)>.mp-j,.tiles.mp-gal:not(.mp-justified)>.tile{height:auto !important}
.tiles.mp-gal.mp-justified>*{aspect-ratio:auto !important}
.tiles.mp-gal>div:not(.mp-j){display:flex}.tiles.mp-gal>div:not(.mp-j)>.art{flex:1 1 auto;height:100%}
.tiles.mp-gal:not(.mp-justified)>div:not(.mp-j)>.art{aspect-ratio:var(--ar) !important;width:100%}
.tiles.mp-gal.mp-justified>div:not(.mp-j)>.art{aspect-ratio:auto !important;width:100%;height:100%}
.tiles.mp-gal>.card{flex:1 1 100%}
/* media fill the tile exactly (same shape) - contain only as a guard against rounding, never a crop */
.tiles.mp-gal .mp-j>img,.tiles.mp-gal .mp-j>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain !important;background:transparent !important}
.tiles.mp-gal .mp-j{position:relative;overflow:hidden;padding:0;display:block;background:transparent}
.tiles.mp-gal .mp-j .play-btn,.tiles.mp-gal .mp-j .tile-meta,.tiles.mp-gal .mp-j>span{z-index:3}

/* ---- locked video tile ---- */
.pv-tile{position:relative;display:block;width:100%;overflow:hidden;border-radius:12px;background:#0b0c12;border:1px solid rgba(224,154,58,.22);
  padding:0;margin:0;cursor:pointer;color:#fff;font:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pv-tile .pv-poster,.pv-tile .pv-vid{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;background:transparent;
  -webkit-user-drag:none;-webkit-touch-callout:none}
.pv-tile .pv-vid{opacity:0;transition:opacity .3s}
.pv-tile.pv-live .pv-vid{opacity:1}
.pv-tile .pv-dur,.pv-tile .pv-tag{position:absolute;z-index:3;font-size:11px;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;background:rgba(12,10,6,.72);color:#fff;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;pointer-events:none}
.pv-tile .pv-dur{right:8px;bottom:8px}
.pv-tile .pv-tag{left:8px;top:8px;color:#F0C060;border:1px solid rgba(224,154,58,.45)}
.pv-tile .pv-tag svg,.pv-tile .pv-btn svg{width:12px;height:12px;flex:none}
.pv-tile .pv-tag-own{color:#5fe3a1;border-color:rgba(62,207,142,.5)}
.pv-tile .pv-play{position:absolute;z-index:3;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(12,10,6,.6);display:grid;place-items:center;pointer-events:none;transition:opacity .25s}
.pv-tile .pv-play svg{width:20px;height:20px;color:#fff;margin-left:2px}
.pv-tile.pv-own.pv-live .pv-play{opacity:.0}
/* overlay: inside the tile (= inside the visible video area), shown for 5 s between teaser plays */
.pv-tile .pv-over{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;
  background:rgba(8,9,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.pv-tile.pv-show .pv-over{opacity:1;visibility:visible;transition:opacity .3s}
.pv-tile .pv-over b{font-size:15px;line-height:1.2;color:#fff}
.pv-tile .pv-over small{font-size:12px;color:rgba(255,255,255,.78);font-weight:600}
.pv-tile .pv-btn{margin-top:4px;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-weight:800;font-size:13px;color:#1b1300;
  background:linear-gradient(135deg,#F0C060,#E09A3A)}
.pv-tile.pv-show .pv-dur,.pv-tile.pv-show .pv-tag{opacity:0}
@media (max-width:420px){.pv-tile .pv-over b{font-size:13px}.pv-tile .pv-over small{font-size:11px}.pv-tile .pv-btn{padding:8px 12px;font-size:12px}}
.pv-sheet-art{position:relative;max-width:200px;margin:12px 0;border-radius:12px;overflow:hidden}
.pv-sheet-art img{display:block;width:100%;height:auto;-webkit-touch-callout:none;-webkit-user-drag:none}
.pv-sheet-art .pv-dur{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;padding:4px 7px;border-radius:999px;background:rgba(12,10,6,.72);color:#fff}

/* ---- floating Chat button (js/float-chat.js) ---- */
.mp-chatfloat{position:fixed;z-index:60;left:0;right:0;top:var(--mp-float-top,0px);padding:8px 12px 0;pointer-events:none;
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.mp-chatfloat.on{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .2s}
.mp-chatfloat>.mp-chatbub-wrap{pointer-events:auto;max-width:560px;margin:0 auto !important;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mp-chatfloat .mp-chatbub{min-height:52px;padding-top:6px;padding-bottom:6px}
.mp-chatfloat .mp-chatbub .mp-chatbub-disc{width:36px;height:36px}
.mp-chatfloat .mp-chatbub::after{display:none}