/* Photos (member request): photos in the chat, a full-screen viewer, and each member's photo wall
   (tap their Bii in the Lobby or the face beside their messages). public/photos.js */

/* the picture button, left of the message box, in the same outline as the box */
.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 { scale: .94; }

/* in the chat: the photo is the bubble */
.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: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--rule); box-shadow: 0 0 0 1px var(--bubble-edge); }
.msg.own .ph-bub { box-shadow: none; }
.msg:not(.own).last .ph-bub { border-bottom-left-radius: 5px; }
.msg.own.last .ph-bub { border-bottom-right-radius: 5px; }
.msg .ph-bub img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msg.pending .ph-bub img { opacity: .55; }
.msg .ph-prog { position: absolute; left: 10px; right: 10px; bottom: 10px; 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); }
/* the Bii face beside every message opens that member's photos */
#list .msg .mface { cursor: pointer; }

/* ---------- a member's profile: photo wall + Recommends ---------- */
.ph-gal { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 34; display: flex; flex-direction: column; background: var(--wall);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.ph-gal.in { transform: none; }
.ph-board { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px 18px; flex: none; }
.ph-title { flex: 1; min-width: 0; }
.ph-title .row1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ph-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* their stars beside the name: a white star and the count in the board's letters, a notch smaller */
.ph-stars { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 21px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ph-stars[hidden] { display: none; }
.ph-stars svg { width: 17px; height: 17px; fill: currentColor; filter: drop-shadow(0 1px 0 #000a); transform: translateY(-1px); }
.ph-title .row2 { margin-top: 6px; }
.ph-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: none; color: #fff; display: grid; place-items: center; }
.ph-x svg { width: 20px; height: 20px; }
.ph-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(20px + var(--sab)); }
.ph-scroll > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* their Bii stands on the board, left of their name (it hung off the bottom edge until the third tab needed the width).
   The board is solid red, no felt grooves, and the page under it is white, in dark mode too (member request). */
.ph-board { position: relative; z-index: 1; padding-left: 10px; background: var(--red); }
.ph-gal { background: #fff; --wall: #fff; }
@media (prefers-color-scheme: dark) {
  .ph-gal { color-scheme: light; color: var(--ink);
    --wall-2: #fffafa; --paper: #ffffff; --ink: #2e0b0f; --ink-2: #7d4a4f; --ink-3: #a98689; --rule: #ecd2d4;
    --red: #d3121c; --focus: #d3121c; --note: #ffe6e6; --note-ink: #4a0d12; --danger: #b42318; --ok: #1f7a4d; }
}
.ph-face { order: -1; flex: none; margin: -4px -2px -8px 0; pointer-events: none; }
.ph-face .mface { display: block; width: 72px; height: 72px; }
/* Photos | Recommends | Changes (member request, Ethan): the section bar in small, edge to edge under the board. Closed
   cells felt red with white caps, the open one white inside a red frame (drawn by ::before; buttons.css strips real borders). */
.ph-tabs { flex: none; display: flex; padding: 0; border-top: 2px solid #fff; background: var(--red); }
.ph-tab { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 10px; border: 0; background: var(--red); color: #fff;
  font: 800 13px/1 "Libre Franklin", "Helvetica Neue", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ph-tab::before { content: ""; position: absolute; inset: 0; border: 5px solid var(--red); pointer-events: none; }
.ph-tab + .ph-tab::after { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: #ffffff73; }
.ph-tab[aria-selected="true"] { background: #fff; color: var(--red); }
.ph-tab[aria-selected="true"]::after, .ph-tab[aria-selected="true"] + .ph-tab::after { display: none; }
.ph-tab[aria-selected="true"]:not(:active, [data-hit], :focus-visible) { outline-color: transparent !important; }
@media (max-width: 380px) { .ph-tab { font-size: 12px; letter-spacing: .04em; padding: 0 6px; } }
@media (max-width: 330px) { .ph-tab { font-size: 11px; letter-spacing: .02em; padding: 0 4px; } }
.ph-scroll { padding-top: 16px; }
.ph-face .mface img, .ph-face .mface svg { display: block; width: 100%; height: 100%; }
.ph-month { margin: 14px 18px 8px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
@media (min-width: 600px) { .ph-grid { grid-template-columns: repeat(4, 1fr); padding: 0 12px; } }
.ph-cell { aspect-ratio: 1; padding: 0; border: 0; background: var(--rule); overflow: hidden; display: block; }
.ph-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-cell:active img { opacity: .8; }
.ph-cell:focus-visible { outline-offset: -3px; }
.ph-empty { padding: 10px 18px; color: var(--ink-2); max-width: 36ch; }

/* Recommends: what they recommend now is the sign their Bii used to hold over its head (card edged in their colour,
   a thumbs-up, tipped a little), with "since" under it; older ones are a plain dated list under hairlines. */
.rc-now { padding: 14px 18px 4px; }
.rc-sign { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; padding: 12px 16px 13px 13px;
  background: var(--paper); border: 2.5px solid var(--c); border-radius: 10px; box-shadow: inset 0 -4px 0 color-mix(in oklab, var(--c) 16%, transparent);
  font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; transform: rotate(-1.2deg); transform-origin: 0 100%; }
.rc-sign svg { flex: none; width: 24px; height: 24px; margin-top: 1px; fill: var(--c); }
.rc-since { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.rc-list { list-style: none; margin: 0; padding: 0 18px; }
.rc-list li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.rc-list li:last-child { border-bottom: 0; }
.rc-list svg { flex: none; width: 16px; height: 16px; align-self: center; fill: var(--c); opacity: .8; }
.rc-t { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.rc-list time { flex: none; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.rc-sign .blood, .rc-t .blood { font-style: normal; }
.rc-sign .grawlix, .rc-t .grawlix { font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Sans", cursive; font-weight: 700; }
@media (prefers-color-scheme: dark) { .rc-sign svg, .rc-list svg { fill: color-mix(in oklab, var(--c) 55%, white); } }

/* Changes (member request, Ethan): every change they've made, newest first under day headings. Their words hang off a
   big quote mark in their colour; the time sits on the right; 🅱️chat's reply is a pale note under each, like replies in
   the Change tab. Long ones are clamped (6 lines of request, 3 of reply); tap to read the rest. */
.cg-list { list-style: none; margin: 0; padding: 0 18px 0 34px; }
.cg-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
.cg-item:last-child { border-bottom: 0; }
.cg-item.more { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cg-item:focus-visible { outline-offset: 2px; }
.cg-ask { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.32; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.cg-q { position: absolute; left: -22px; top: 9px; font: 800 34px/1 "Libre Franklin", "Helvetica Neue", Arial, sans-serif; color: var(--c); }
.cg-item time { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; padding-top: 3px; }
.cg-reply { grid-column: 1 / -1; margin: 8px 0 0; padding: 7px 11px 8px; background: var(--note); color: var(--note-ink); border-radius: 4px;
  font-size: 15px; line-height: 1.38; overflow-wrap: anywhere; white-space: pre-line; }
.cg-reply span { display: block; }
.cg-item:not([aria-expanded="true"]) .cg-ask { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.cg-item:not([aria-expanded="true"]) .cg-reply span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (prefers-color-scheme: dark) { .cg-q { color: color-mix(in oklab, var(--c) 55%, white); } }

/* ---------- full-screen viewer ---------- */
.ph-view { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 36; background: #000; color: #fff; 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)) 14px 10px 10px; background: #000000b3; }
.pv-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #fff; text-align: left; }
.pv-who .mface { flex: none; width: 44px; height: 44px; }
.pv-who .mface img, .pv-who .mface svg { display: block; width: 100%; height: 100%; }
.pv-who span:last-child { min-width: 0; display: grid; }
.pv-who b { font-size: 16px; }
.pv-who small { font-size: 13.5px; color: #ffffffb3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-stage { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: calc(64px + env(safe-area-inset-top)) 0 calc(44px + var(--sab)); }
/* bug fix (landscape iPad): a percentage max-height alone didn't hold in the grid, so a tall photo grew past the
   bottom of a wide screen; cap it at the stage's real height too */
.pv-stage img { min-width: 0; min-height: 0; max-width: 100%; max-height: calc(var(--app-h) - 108px - 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: 0; border-radius: 50%; background: #000000a0; color: #fff; 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 + var(--sab)); text-align: center; font-size: 14px; color: #ffffffb3; pointer-events: none; }
.ph-view :focus-visible { outline-color: #fff; }

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