/* 0.10.2zzzz image tiles (NOTES 108). z 440 tiles, 455 large view, inside the 400-460 band. Fades 600 ms, reduced motion 400 ms. */
#imgTiles,[data-oid=imgTiles]{position:fixed;left:0;right:0;top:16vh;z-index:440;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity 600ms ease;pointer-events:none}
#imgTiles.on{opacity:1}
#imgTiles .itGrid{pointer-events:auto;touch-action:none;width:min(380px,92vw);display:grid;gap:6px;padding:6px;border-radius:20px;background:rgba(11,11,14,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 40px rgba(0,0,0,.5)}
#imgTiles .itGrid.itN1{grid-template-columns:1fr}
#imgTiles .itGrid.itN2{grid-template-columns:1fr 1fr}
#imgTiles .itGrid.itN3,#imgTiles .itGrid.itN4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
#imgTiles .itTile{display:block;padding:0;margin:0;border:0;border-radius:14px;overflow:hidden;background:#000;cursor:zoom-in;aspect-ratio:1/1;-webkit-tap-highlight-color:transparent}
#imgTiles .itN1 .itTile{aspect-ratio:auto;max-height:46vh}
#imgTiles .itN2 .itTile{aspect-ratio:3/4}
#imgTiles .itTile img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
#imgTiles .itN1 .itTile img{height:auto;max-height:46vh}
#imgTiles .itTile.itBad{opacity:.35}
#imgTiles .itHint{pointer-events:none;font-size:12px;line-height:1.4;color:rgba(255,255,255,.7);text-align:center;padding:0 16px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
#imgBig,[data-oid=imgBig]{position:fixed;inset:0;z-index:455;background:rgba(4,4,7,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 14px 28px;opacity:0;transition:opacity 600ms ease}
#imgBig.on{opacity:1}
#imgBig img{max-width:100%;max-height:74vh;object-fit:contain;border-radius:12px}
#imgBig .itX{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer}
#imgBig .itBigCap{max-width:min(560px,92vw);text-align:center}
#imgBig .itBigT{font-size:13px;line-height:1.45;color:#fff;max-height:18vh;overflow:auto}
#imgBig .itOpenL{display:inline-block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.7);text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px}
/* 0.10.2zzzzc N-171: upright phone: reply text sits below the tiles and the hint, scrolls if long. On its side the tiles sit left of the reply column (tiles0102.js). */
body.itOpen.itCapBelow #cap{top:var(--itBot,70%)!important;bottom:auto!important;max-height:max(48px,calc(100dvh - var(--itBot,70%) - 76px))!important;overflow-y:auto!important}
@media (prefers-reduced-motion:reduce){html body :is(#imgTiles,[data-oid=imgTiles],#imgBig,[data-oid=imgBig]){transition:opacity 400ms linear!important}}
@media (prefers-reduced-motion:no-preference){html body :is(#imgTiles,[data-oid=imgTiles],#imgBig,[data-oid=imgBig]){transition:opacity 600ms ease!important}}