/* FILE: static/photos.css: photos on posts, the viewer, own pictures (2.52.0). Big targets for old eyes and thumbs. */
.ph-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.ph-add { font-size: 16px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 10px;
  border: 1px solid var(--border-hairline); overflow: hidden; font-size: 13px; color: var(--text-muted); }
.ph-chip img { width: 100%; height: 100%; object-fit: cover; }
.ph-chip.is-busy { animation: ph-pulse 1.2s ease-in-out infinite; }
@keyframes ph-pulse { 50% { opacity: .55; } }
.ph-x { position: absolute; top: 3px; right: 3px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: 15px; line-height: 30px; padding: 0; }
.ph-msg:empty { display: none; }

.ph-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; max-width: 720px; }
.ph-gallery.is-one { grid-template-columns: minmax(0, 520px); }
.ph-thumb { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-hairline); aspect-ratio: 4 / 3; background: rgba(0,0,0,.2); }
.ph-gallery.is-one .ph-thumb { aspect-ratio: auto; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-gallery.is-one .ph-thumb img { height: auto; max-height: 420px; object-fit: contain; }

html.ph-open { overflow: hidden; }
.ph-view { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .86); display: flex; align-items: center; justify-content: center; padding: 12px; }
.ph-view[hidden] { display: none; }
.ph-view-card { position: relative; max-width: 100%; max-height: 100%; }
.ph-view-card img { display: block; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 8px; }
.ph-view-x, .ph-view-prev, .ph-view-next { position: absolute; border: 0; cursor: pointer; background: rgba(0, 0, 0, .65); color: #fff;
  width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 48px; padding: 0; }
.ph-view-x { top: 8px; right: 8px; font-size: 20px; }
.ph-view-prev { left: 8px; top: calc(50% - 24px); }
.ph-view-next { right: 8px; top: calc(50% - 24px); }
.ph-view-n { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.65); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 14px; }
.ph-view-n:empty { display: none; }

.ph-keep { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ph-keep-one { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.ph-keep-one img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }

.av-own { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border-hairline); border-radius: 12px; }
.av-crop { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-top: 10px; }
.av-crop[hidden] { display: none; }
.av-stage canvas { display: block; max-width: 100%; border-radius: 8px; touch-action: none; cursor: grab; }
.av-stage canvas:active { cursor: grabbing; }
.av-side { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.av-prev { border-radius: 50%; border: 2px solid var(--border-hairline); }
.av-prev-big { width: 144px; height: 144px; border-radius: 12px; }
.av-prev-small { width: 64px; height: 64px; }
.av-side input[type=range] { width: 100%; min-height: 32px; }
.fx-modbox-av { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }