/* ═══════════════════════════════════════════════════════════════
   TeamBook — pictures in the Party Log

   The log is a calm reading surface, so an image sits inside the post
   at a bounded height rather than dominating the scroll. Intrinsic
   width/height come down with the post, which lets the browser hold
   the space before the file arrives — no reflow mid-read.
   ═══════════════════════════════════════════════════════════════ */

.post-image{
  display:block;margin:9px 0 2px;max-width:100%;width:auto;
  max-height:min(52vh,340px);object-fit:contain;
  border:1px solid var(--xty-border);border-radius:14px;
  background:var(--xty-bg);cursor:zoom-in;
}
.post-image[data-loading="1"]{min-height:120px}

/* Full-size view. object-fit:contain keeps the whole frame visible
   rather than cropping to the viewport. */
.xty-image-viewer{
  width:100vw;max-width:100vw;height:100svh;max-height:100svh;
  margin:0;padding:0;border:0;background:transparent;
}
.xty-image-viewer::backdrop{background:rgba(20,17,15,.9)}
.xty-image-viewer img{
  width:100%;height:100svh;object-fit:contain;display:block;background:transparent;
}
.xty-image-viewer button{
  position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,249,233,.92);color:var(--xty-ink);
  font-size:23px;font-weight:800;line-height:1;
}

/* Attachment chip above the composer */
.xty-attach-preview{
  display:flex;align-items:center;gap:10px;
  margin:0 0 8px;padding:8px 10px;
  border:1px solid var(--xty-border);border-radius:14px;background:var(--xty-surface);
}
.xty-attach-preview img{
  width:46px;height:46px;flex:none;object-fit:cover;
  border-radius:10px;background:var(--xty-bg);
}
.xty-attach-preview div{min-width:0;flex:1}
.xty-attach-preview b{
  display:block;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.xty-attach-preview span{color:var(--xty-muted);font-size:12px}
.xty-attach-preview button{
  flex:none;width:30px;height:30px;padding:0;
  border:1px solid var(--xty-border);border-radius:50%;
  background:var(--xty-bg);color:var(--xty-muted);font-size:16px;font-weight:800;line-height:1;
}

/* The composer is a fixed row, so the picture button matches the send
   button's footprint instead of stretching it. */
.composer #msgAttachBtn{
  flex:none;width:42px;height:42px;padding:0;
  border:1px solid var(--xty-border);border-radius:50%;
  background:var(--xty-surface);font-size:18px;line-height:1;
}
.composer #msgAttachBtn[disabled]{opacity:.45}
.composer #msgAttachBtn.has-image{border-color:var(--xty-primary);background:var(--xty-paper)}

/* Picking a finished party's cover */
.xty-cover-pick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;margin:10px 0 0;
}
.xty-cover-pick button{
  padding:0;border:2px solid var(--xty-border);border-radius:12px;
  background:var(--xty-bg);overflow:hidden;aspect-ratio:var(--xty-card-aspect);
}
.xty-cover-pick button[aria-pressed="true"]{border-color:var(--xty-primary)}
.xty-cover-pick img{width:100%;height:100%;object-fit:cover;display:block}

/* Image covers stand in for a card, so they keep the 5:7 card footprint
   the rest of the shelf is built on. */
.xty-home-image-cover,.xty-image-seat{
  aspect-ratio:var(--xty-card-aspect);overflow:hidden;border-radius:14px;
  border:1px solid var(--xty-border);background:var(--xty-bg);
}
.xty-home-image-cover img,.xty-image-seat img{
  width:100%;height:100%;object-fit:cover;display:block;
}