/* Photos (member request, henry: "Add photo sending"): photos in the chat and a full-screen viewer. public/photos.js */

/* the picture button, left of the message box, in the box's own outline */
.composer .attach { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--paper); color: var(--indigo); display: grid; place-items: center; }
.composer .attach svg { width: 22px; height: 22px; }
.composer .attach:active { scale: .94; }
@media (prefers-color-scheme: dark) { .composer .attach { color: var(--ink); } }

/* in the chat: the photo is mounted in a frame the colour of that person's bubbles,
   same radius as a bubble and the same tail corner */
.msg .ph-stack { display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 46px); }
.msg.own .ph-stack { align-items: flex-end; }
.msg .ph-bub { position: relative; display: block; max-width: 100%; padding: 3px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: 0 1px 0 #1d214020; }
.msg .ph-bub img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; background: var(--rule); }
.msg.own .ph-bub { background: var(--indigo); box-shadow: none; }
.msg:not(.own).last .ph-bub { border-bottom-left-radius: 5px; }
.msg:not(.own).last .ph-bub img { border-bottom-left-radius: 3px; }
.msg.own.last .ph-bub { border-bottom-right-radius: 5px; }
.msg.own.last .ph-bub img { border-bottom-right-radius: 3px; }
.msg .ph-bub:active img { opacity: .85; }
.msg.pending .ph-bub img { opacity: .55; }
.msg .ph-prog { position: absolute; left: 13px; right: 13px; bottom: 13px; height: 4px; border-radius: 2px; background: #ffffff66; overflow: hidden; }
.msg .ph-prog::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.msg.ph-failed .ph-bub { outline: 2px solid var(--danger); outline-offset: 2px; }
.msg.ph-failed .time { color: var(--danger); }

/* ---------- full-screen viewer: the photo on felt, the letterboard says who and when ---------- */
.ph-view { position: fixed; left: 0; right: 0; top: 0; height: var(--app-h); z-index: 36; background: var(--felt-groove); color: var(--letter); opacity: 0; transition: opacity .2s; touch-action: none; }
.ph-view.in { opacity: 1; }
.pv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 12px; }
.pv-face { flex: none; width: 44px; height: 44px; }
.pv-face .mface { display: block; width: 100%; height: 100%; }
.pv-face .mface img, .pv-face .mface svg { display: block; width: 100%; height: 100%; }
.pv-title { flex: 1; min-width: 0; }
.pv-title .row1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title .row2 { margin-top: 5px; }
.pv-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--letter); background: none; color: var(--letter); display: grid; place-items: center; }
.pv-x svg { width: 20px; height: 20px; }
.pv-stage { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: calc(72px + env(safe-area-inset-top)) 0 calc(44px + env(safe-area-inset-bottom)); }
.pv-stage img { min-width: 0; min-height: 0; max-width: 100%; max-height: calc(var(--app-h) - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s; -webkit-touch-callout: default; user-select: none; }
.pv-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: var(--felt); color: var(--letter); display: grid; place-items: center; }
.pv-nav svg { width: 24px; height: 24px; }
.pv-nav.prev { left: 12px; } .pv-nav.next { right: 12px; }
@media (pointer: coarse) { .pv-nav { display: none; } }
.pv-count { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; opacity: .7; pointer-events: none; }
.ph-view :focus-visible { outline: 2px solid var(--letter); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ph-view, .pv-stage img { transition: none; }
}