/* Photos (member request): the picture button, photos in the chat, and the full-screen viewer. public/photos.js;
   app.js photoBubble draws the bubble. */

/* 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(--red); display: grid; place-items: center; }
.composer .attach svg { width: 22px; height: 22px; }
.composer .attach:active { background: var(--wall-2); }

/* in the chat: the photo sits in a thin frame of the sender's bubble colour (white, or red for yours), with a
   bubble's 16px corners and the same tail corner on the last of a run */
.msg .ph-bub { position: relative; z-index: 1; display: block; max-width: 80%; padding: 3px; border: 0; border-radius: 16px; background: var(--bubble); cursor: zoom-in; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.msg .ph-bub img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; background: var(--wall-2); -webkit-touch-callout: none; pointer-events: none; }
.msg.own .ph-bub { background: var(--red); }
.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.failed .ph-bub { outline: 2px solid var(--danger); outline-offset: 2px; }
.msg.rq-ring .ph-bub { animation: rq-ring 1.7s ease both; }
/* upload progress: a white line along the bottom of the picture */
.msg .ph-prog { position: absolute; left: 13px; right: 13px; bottom: 12px; 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; }

/* held (tapback.js): a photo too tall for the space is cropped to it */
.tb-layer .tb-lift .ph-bub { max-width: none; flex: none; }
.tb-layer .tb-lift.cut .ph-bub { height: 100%; aspect-ratio: auto !important; }

/* a reply to a photo ends with a small thumbnail of it */
.rq-ph { flex: none; width: 34px; height: 34px; margin-left: auto; border-radius: 4px; object-fit: cover; background: var(--wall-2); }
.msg .rq .rq-ph { width: 30px; height: 30px; }
.rq:has(.rq-ph) .rq-txt, .rb-q:has(.rq-ph) .rq-txt { margin-right: 4px; }

/* ---------- full-screen viewer: the photo on the 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); color: var(--letter); opacity: 0; transition: opacity .2s; touch-action: none; overscroll-behavior: contain; }
.ph-view.in { opacity: 1; }
.ph-view:not(.in) { pointer-events: none; } /* fading out: taps already reach the chat */
.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; }
.pv-face { flex: none; width: 44px; height: 44px; }
.pv-face .mface, .pv-face svg, .pv-face img { display: block; width: 100%; height: 100%; margin: 0; }
.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(74px + env(safe-area-inset-top)) 0 calc(44px + var(--sab)); }
.pv-stage img { min-width: 0; min-height: 0; max-width: 100%; max-height: calc(var(--app-h) - 118px - env(safe-area-inset-top) - var(--sab)); 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: 2px solid var(--letter); border-radius: 50%; background: var(--felt); color: var(--letter); display: grid; place-items: center; }
.pv-nav svg { width: 22px; height: 22px; }
.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 + var(--sab)); 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; }
}

/* ---------- Change photos (photos.js `ask`): pictures attached to a change request ---------- */
.kph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.kph-add { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 22px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; }
.kph-add svg { width: 22px; height: 22px; color: var(--red); }
.kph-add:active { background: var(--wall-2); }
.kph-add:disabled { opacity: .45; }
.kph-hint { font-size: 14px; color: var(--ink-2); }
.kph-ph { position: relative; width: 64px; height: 64px; flex: none; }
.kph-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--wall-2); }
.kph-ph.up img { opacity: .5; }
.kph-ph.up::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2.5px solid var(--red); border-right-color: transparent; animation: kph-spin .8s linear infinite; }
@keyframes kph-spin { to { transform: rotate(1turn); } }
.kph-x { position: absolute; right: -7px; top: -7px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--wall-2); background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.kph-x svg { width: 12px; height: 12px; }
.kph-x::before { content: ""; position: absolute; inset: -8px; } /* a finger-sized target */

/* a request's photos in the Change sheet's lists */
.job-phs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.job-phs button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--wall); cursor: zoom-in; }
.job-phs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.job-phs button:active img { opacity: .8; }