/* Circle composer photo tools: ✕ remove top-left, crop top-right on each
   photo, and a Reorder button + sheet. */
.circle-compose-photo { position: relative; flex: 0 0 auto; height: 100%; }
.circle-compose-photo .circle-media-item { height: 100%; }
.circle-compose-photo .circle-photo-cell-remove,
.circle-attachment-preview .circle-photo-pager-slide .circle-photo-cell-remove { left: 6px; right: auto; }
.circle-photo-reorder {
  display: block; margin: -4px 0 10px auto;
  min-height: 30px; padding: 6px 12px; border: 0; border-radius: 999px;
  color: #27312c; background: #f4f5f7;
  font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.circle-photo-reorder[hidden] { display: none; }
.circle-reorder { position: fixed; inset: 0; z-index: 2455; }
.circle-reorder-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .16s ease; }
.circle-reorder-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
  background: #F2F4F7; transform: translateY(24px); opacity: 0; transition: transform .18s ease, opacity .16s ease;
  overscroll-behavior: contain;
}
.circle-reorder.show .circle-reorder-backdrop { opacity: 1; }
.circle-reorder.show .circle-reorder-sheet { transform: none; opacity: 1; }
.circle-reorder-head { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; }
.circle-reorder-head strong { text-align: center; font-size: 15px; }
.circle-reorder-head button { min-height: 36px; border: 0; border-radius: 13px; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.circle-reorder-head button.is-primary { color: #fff; background: #1a1d1b; }
.circle-reorder-modes { display: flex; width: 200px; margin: 6px auto 12px; padding: 3px; border-radius: 999px; background: #eef0f3; }
.circle-reorder-modes button { flex: 1; height: 28px; border: 0; border-radius: 999px; background: transparent; color: #5c6560; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.circle-reorder-modes button.is-on { color: #fff; background: #1a1d1b; }
/* Like the Design collage tray: each photo whole on grey, 3 per row. */
.circle-reorder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.circle-reorder-item { position: relative; aspect-ratio: 6 / 5; border-radius: 12px; overflow: hidden; background: #dfe3e1; touch-action: none; cursor: grab; }
.circle-reorder-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.circle-reorder-item.is-dragging { z-index: 3; opacity: .9; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.circle-reorder-item.is-drop-target { outline: 3px solid #1a1d1b; outline-offset: -3px; }
.circle-reorder-item.is-focus { animation: reorderFocus 1.6s ease-out; }
@keyframes reorderFocus { 0%, 60% { box-shadow: 0 0 0 3px #1f7a4d; } 100% { box-shadow: 0 0 0 3px transparent; } }
.circle-reorder-num { position: absolute; left: 6px; bottom: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; box-sizing: border-box; color: #fff; background: rgba(0,0,0,.45); font-size: 12px; font-weight: 750; }

/* Multi-photo row: sizes are relative to the row's own width (cqw). With
   every photo's aspect known (.has-aspects), all photos share one height:
   the widest is 88% of the row (the next one peeks), at most 280px, and
   nothing is cropped. Without aspects: 280px row, but no photo wider than
   88% of the row (shown whole, letterboxed). */
.circle-media-carousel { container-type: inline-size; }
.circle-media-carousel .circle-media-item { max-width: 88cqw; object-fit: contain; }
.circle-media-carousel.has-aspects { height: auto; }
.circle-media-carousel.has-aspects .circle-media-track { height: min(280px, calc(88cqw / var(--max-aspect, 1))); }
.circle-media-carousel.has-aspects .circle-media-item { height: 100%; width: auto; aspect-ratio: var(--a, 1); }
.circle-media-carousel.has-aspects .circle-compose-photo { height: 100%; aspect-ratio: var(--a, 1); }
.circle-media-carousel.has-aspects .circle-compose-photo .circle-media-item { width: 100%; }
.circle-media-carousel.has-aspects .circle-photo-carousel-add { height: 100%; }
.circle-attachment-preview.is-photos .circle-media-carousel.has-aspects { height: auto; }
/* Composer grid cells (4 / 9): ✕ top-left, crop top-right like Row mode;
   the split-merged-cell button moves below the crop button. */
.circle-attachment-preview .circle-photo-canvas .circle-photo-cell-remove { left: 6px; right: auto; }

/* Live demo on a grid with photos (app.js syncLiveGridDemo): merge two empty
   cells, then carry a photo into the merged space. Positions are px vars set
   from the real cells. */
.circle-photo-live-demo { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.circle-photo-live-demo .ld-box {
  position: absolute; border: 2px dashed #1a1d1b; border-radius: 14px; background: rgba(26,29,27,.1);
  animation: ldBox 10s cubic-bezier(.4,0,.2,1) infinite;
}
.circle-photo-live-demo .ld-result,
.circle-photo-live-demo .ld-ghost { position: absolute; background-size: cover; background-position: center; }
.circle-photo-live-demo .ld-result {
  left: var(--ld-ml); top: var(--ld-mt); width: var(--ld-mw); height: var(--ld-mh); border-radius: 14px;
  animation: ldResult 10s cubic-bezier(.4,0,.2,1) infinite;
}
.circle-photo-live-demo .ld-ghost {
  width: var(--ld-tw); height: var(--ld-th); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
  animation: ldGhost 10s cubic-bezier(.4,0,.2,1) infinite;
}
.circle-photo-live-demo .ld-hand {
  position: absolute; z-index: 2; font-size: 22px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
  animation: ldHand 10s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ldHand {
  0%, 2% { left: var(--ld-ax); top: var(--ld-ay); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
  5% { left: var(--ld-ax); top: var(--ld-ay); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  20% { left: var(--ld-bx); top: var(--ld-by); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  24%, 28% { left: var(--ld-bx); top: var(--ld-by); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
  29% { left: var(--ld-sx); top: var(--ld-sy); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
  33% { left: var(--ld-sx); top: var(--ld-sy); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  50% { left: var(--ld-mx); top: var(--ld-my); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  54%, 100% { left: var(--ld-mx); top: var(--ld-my); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}
@keyframes ldBox {
  0%, 4% { left: var(--ld-cl); top: var(--ld-ct); width: var(--ld-cw); height: var(--ld-ch); opacity: 0; }
  5% { left: var(--ld-cl); top: var(--ld-ct); width: var(--ld-cw); height: var(--ld-ch); opacity: 1; }
  20%, 50% { left: var(--ld-ml); top: var(--ld-mt); width: var(--ld-mw); height: var(--ld-mh); opacity: 1; }
  53%, 100% { left: var(--ld-ml); top: var(--ld-mt); width: var(--ld-mw); height: var(--ld-mh); opacity: 0; }
}
@keyframes ldGhost {
  0%, 32% { left: var(--ld-sx); top: var(--ld-sy); opacity: 0; }
  34% { left: var(--ld-sx); top: var(--ld-sy); opacity: .9; }
  50% { left: var(--ld-mx); top: var(--ld-my); opacity: .9; }
  52%, 100% { left: var(--ld-mx); top: var(--ld-my); opacity: 0; }
}
@keyframes ldResult {
  0%, 50% { opacity: 0; }
  53%, 84% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
/* A post whose photos failed to upload stays with a Retry button
   (app.js data-circle-upload-retry); 💣 clears it. */
.circle-private-post.is-upload-failed { border-color: #f3c9c9; }
.circle-upload-retry {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  padding: 5px 10px; border: 0; border-radius: 999px;
  color: #fff; background: #c2413b; font-size: 11px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
/* Designed collages and 4 / 9 grids in the feed: a square as wide as the
   post's photo area (app.js circlePhotoCanvasStaticMarkup square). */
.circle-photo-canvas.is-static.is-square { height: auto; aspect-ratio: 1; }

/* Composer: a designed collage previews as a square with an Edit button. */
.circle-photo-stage:has(.circle-attachment-preview.is-collage) { height: auto; }
.circle-attachment-preview.is-collage { height: auto; overflow: visible; }
.circle-attachment-preview.is-collage .circle-photo-canvas.is-square { height: auto; aspect-ratio: 1; }
.circle-attachment-preview.is-collage { display: flex; flex-direction: column; }
.circle-photo-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.circle-photo-tools[hidden] { display: none; }
.circle-photo-tools > * { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #f4f5f7; color: #27312c; font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.circle-photo-tools .is-disabled { opacity: .45; cursor: default; }
.circle-photo-tools .circle-collage-flat[hidden] { display: none; }
.circle-collage-flat input { width: 15px; height: 15px; margin: 0; accent-color: #1f7a4d; }

/* Design collage page (app.js openCollageDesigner). */
.collage-designer {
  /* One fixed screen: nothing scrolls, so merging by dragging can't move it. */
  position: fixed; inset: 0; z-index: 2450; overflow: hidden; overscroll-behavior: none; touch-action: none;
  display: flex; flex-direction: column;
  --cd-side: min(calc(100vw - 96px), calc(100dvh - 400px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 420px);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: #F2F4F7; color: #1f2924; opacity: 0; transition: opacity .16s ease;
  box-sizing: border-box; -webkit-user-select: none; user-select: none;
}
.collage-designer.show { opacity: 1; }
.collage-designer > * { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; flex: 0 0 auto; }
.cd-head { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; margin-bottom: 10px; }
.cd-head strong { text-align: center; font-size: 15px; }
.cd-head button { min-height: 36px; border: 0; border-radius: 13px; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.cd-head button.is-primary { color: #fff; background: #1a1d1b; }
.cd-head button.is-primary.is-disabled { opacity: .35; }
.cd-main { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.cd-frame { width: var(--cd-side); flex: 0 0 auto; }
.cd-sizes { order: -1; display: flex; flex-direction: column; gap: 8px; width: 54px; }
.cd-sizes button { min-height: 44px; padding: 5px 0; border: 1px solid #d8dcda; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.cd-sizes button.is-on { color: #fff; background: #1a1d1b; border-color: #1a1d1b; }
.cd-status { height: 16px; line-height: 16px; margin: 0 0 8px; text-align: center; font-size: 12px; font-weight: 650; color: #c0392b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-status.is-ready { color: #1f7a4d; }
.cd-frame .circle-photo-canvas { height: auto; aspect-ratio: 1; border-radius: 16px; background: #fff; }
.cd-frame.is-placing .circle-photo-cell:not(.is-filled) { border-color: #1a1d1b; background: #eef0f3; }
.cd-hint { margin: 8px auto 10px; text-align: center; font-size: 12px; color: #6b746f; }
.cd-tray-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #5c6560; }
/* The tray fills the rest of the screen: a 3x3 grid, each photo shown whole
   in its real shape on grey, so landscape / portrait / square is obvious. */
.cd-tray { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cd-item { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #dfe3e1; cursor: pointer; touch-action: manipulation; }
.cd-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cd-item .circle-photo-cell-remove { left: 6px; right: auto; }
.cd-item.is-used img { opacity: .4; }
.cd-item.is-selected { outline: 3px solid #1a1d1b; outline-offset: -3px; }
.cd-check { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1a1d1b; font-size: 11px; }
.cd-add { min-height: 0; border: 2px dashed #d8dcda; border-radius: 12px; background: #fff; color: #94a3b8; font-size: 24px; cursor: pointer; }

/* Designer demo (app.js showDemo): merge two empty spaces, tap a tray
   photo, carry it into the merged space. px vars from the real layout. */
.cd-demo { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cd-demo .cdd-box { position: absolute; border: 2px dashed #1a1d1b; border-radius: 14px; background: rgba(26,29,27,.1); animation: cddBox 12s cubic-bezier(.4,0,.2,1) infinite; }
.cd-demo .cdd-pick { position: absolute; left: var(--pl); top: var(--pt); width: var(--pw); height: var(--ph); border-radius: 12px; box-shadow: 0 0 0 3px #1a1d1b inset; animation: cddPick 12s linear infinite; }
.cd-demo .cdd-result, .cd-demo .cdd-ghost { position: absolute; background-size: cover; background-position: center; }
.cd-demo .cdd-result { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); border-radius: 14px; animation: cddResult 12s cubic-bezier(.4,0,.2,1) infinite; }
.cd-demo .cdd-ghost { width: var(--gw); height: var(--gh); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: translate(-50%, -50%); animation: cddGhost 12s cubic-bezier(.4,0,.2,1) infinite; }
.cd-demo .cdd-hand { position: absolute; z-index: 2; font-size: 24px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation: cddHand 12s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cddHand {
  0%, 2% { left: var(--ax); top: var(--ay); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
  5% { left: var(--ax); top: var(--ay); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  20% { left: var(--bx); top: var(--by); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  24%, 27% { left: var(--bx); top: var(--by); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
  28% { left: var(--px); top: var(--py); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
  31% { left: var(--px); top: var(--py); transform: translate(-50%, -50%) scale(1); opacity: 1; }
  33% { left: var(--px); top: var(--py); transform: translate(-50%, -50%) scale(.8); opacity: 1; }
  35% { left: var(--px); top: var(--py); transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { left: var(--mx); top: var(--my); transform: translate(-50%, -50%) scale(1); opacity: 1; }
  52% { left: var(--mx); top: var(--my); transform: translate(-50%, -50%) scale(.8); opacity: 1; }
  56%, 100% { left: var(--mx); top: var(--my); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}
@keyframes cddBox {
  0%, 4% { left: var(--cl); top: var(--ct); width: var(--cw); height: var(--ch); opacity: 0; }
  5% { left: var(--cl); top: var(--ct); width: var(--cw); height: var(--ch); opacity: 1; }
  20%, 52% { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); opacity: 1; }
  55%, 100% { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); opacity: 0; }
}
@keyframes cddPick { 0%, 32% { opacity: 0; } 33%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes cddGhost {
  0%, 34% { left: var(--px); top: var(--py); opacity: 0; }
  36% { left: var(--px); top: var(--py); opacity: .9; }
  50% { left: var(--mx); top: var(--my); opacity: .9; }
  53%, 100% { left: var(--mx); top: var(--my); opacity: 0; }
}
@keyframes cddResult { 0%, 52% { opacity: 0; } 55%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Composer collage preview: square box (padding-top: 100%) holding the
   static collage; Edit collage keeps its small label. */
.circle-collage-square { position: relative; width: 100%; padding-top: 100%; }
.circle-collage-image .circle-photo-cell { position: absolute; inset: 0; border-radius: 0; }
.circle-collage-image .circle-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Frame drawn into the image (6 of every 297 px per side): scaled out of
   view in the feed; the full view shows it. */
.circle-collage-image .circle-photo-cell img { transform: scale(calc(297 / 285)); }
.circle-collage-square > .circle-photo-canvas { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; }
.circle-attachment-preview .circle-collage-square[data-collage-open] { cursor: pointer; }

/* Edit / Adjust photos sits next to the author's name (the actions row is
   too narrow for it next to the reactions on phones). */
.circle-private-head .circle-edit-post {
  margin-left: 8px; padding: 3px 10px; border: 0; border-radius: 999px;
  color: #1a1d1b; background: #f4f5f7; font-size: 11px; font-weight: 700; vertical-align: 2px; cursor: pointer; touch-action: manipulation;
}

/* Design collage: Fill places the remaining photos when they match the
   empty spaces; greyed out otherwise (like Done). */

/* Split (merged spaces) lives bottom-right, apart from ✕ (top-left) and
   crop (top-right). */
.circle-photo-cell-unmerge { top: auto; bottom: 6px; right: 6px; }

/* Design collage: the photo being dragged from the tray, and the space it
   would drop into. */
.cd-drag-ghost {
  position: fixed; z-index: 10; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 12px;
  background-size: cover; background-position: center; box-shadow: 0 10px 28px rgba(0,0,0,.3); opacity: .9; pointer-events: none;
}
.cd-frame .circle-photo-cell.is-drop { outline: 3px solid #1a1d1b; outline-offset: -3px; }

/* Composer: "Make a collage" tip on the Design button. */
.circle-photo-modes [data-collage-open] { position: relative; }
.circle-photo-modes [data-collage-open].is-nudge { animation: collageNudge 1.1s ease-in-out 3; }
.circle-photo-modes [data-collage-open].is-nudge::after {
  content: "Make a collage"; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 5px 9px; border-radius: 999px; white-space: nowrap; color: #fff; background: #1a1d1b;
  font-size: 11px; font-weight: 700; z-index: 5; pointer-events: none;
}
@keyframes collageNudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Chat photo preview (app.js openChatPhotoPreview): dark, like Adjust photo. */
.chat-photo-preview {
  position: fixed; inset: 0; z-index: 2450; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  color: #fff; background: #0b0d0c; opacity: 0; transition: opacity .16s ease;
  touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
}
.chat-photo-preview.show { opacity: 1; }
.cpp-head { flex: 0 0 auto; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 12px 16px 8px; }
.cpp-head strong { text-align: center; font-size: 16px; font-weight: 750; }
.cpp-head button { min-height: 36px; border: 0; border-radius: 13px; color: #fff; background: transparent; font-size: 15px; font-weight: 700; cursor: pointer; }
.cpp-head .cpp-hd { justify-self: end; min-width: 48px; padding: 0 10px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 10px; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.75); }
.cpp-head .cpp-hd.is-on { color: #0b0d0c; background: #fff; border-color: #fff; }
.cpp-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 8px 16px; }
.cpp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cpp-quality { flex: 0 0 auto; margin: 4px 0 0; text-align: center; color: rgba(255,255,255,.62); font-size: 12px; }
.cpp-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 16px; }
.cpp-actions button { height: 46px; border: 0; border-radius: 14px; color: #fff; background: rgba(255,255,255,.12); font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.cpp-actions button.is-primary { color: #111; background: #fff; }
.cpp-actions button:disabled { opacity: .5; }
.circle-photo-modes[hidden] { display: none; }
.circle-reorder-item .circle-photo-cell-remove { left: 6px; right: auto; }
.circle-reorder-add { aspect-ratio: 6 / 5; border: 2px dashed #d8dcda; border-radius: 12px; background: #fff; color: #94a3b8; font-size: 24px; cursor: pointer; touch-action: manipulation; }
.circle-reorder-spacer { aspect-ratio: 6 / 5; visibility: hidden; }
.circle-photo-reorder.is-disabled { opacity: .45; }

/* Preset 4 grid: +N over the 4th photo when there are more (all open in the
   viewer). Sidebar buttons that don't apply yet are greyed out. */
.circle-photo-more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.42); font-size: 22px; font-weight: 800; pointer-events: none; }
.circle-photo-modes button.is-disabled { opacity: .4; }

/* Design collage: Reset and Fill under the frame (sizes stay on the left).
   Fill turns green when the photos left match the empty spaces. */
/* Right under the frame: same width as the grid (the size column's 54px +
   10px gap stay empty on the left), small buttons. */
.cd-actions { display: flex; gap: 8px; margin: 8px auto 12px; width: calc(var(--cd-side) + 64px); max-width: 100%; padding-left: 64px; box-sizing: border-box; }
.cd-actions button { flex: 1 1 0; height: 30px; padding: 0 8px; border: 1px solid #d8dcda; border-radius: 999px; background: #fff; color: #5c6560; font-size: 12px; font-weight: 750; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.cd-actions .cd-fill { color: #fff; background: #1f7a4d; border-color: #1f7a4d; }
.cd-actions .cd-save.is-disabled { color: #9aa29e; background: #f4f5f7; border-color: #e3e6e4; }
.cd-actions .cd-fill.is-disabled { color: #9aa29e; background: #eef0f3; border-color: #e3e6e4; }

/* Someone just scanned your QR code: their request, on the code itself. */
.qr-request-card {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px;
  padding: 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: qrRequestIn .25s ease-out;
}
.qr-request-card p { margin: 0; font-size: 15px; color: #1a1d1b; }
.qr-request-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #28735a; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; }
.qr-request-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.qr-request-actions button { flex: 1; height: 40px; border: 1px solid #d8dcda; border-radius: 12px; background: #fff; color: #3f4843; font-size: 14px; font-weight: 700; cursor: pointer; }
.qr-request-actions .is-primary { border-color: #1a1d1b; background: #1a1d1b; color: #fff; }
@keyframes qrRequestIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Home agent thread (.conversation.agent-chat). Friend and group chats stay on .message-bubble. */
#agentNewChat { display: none; }
.agent-new-chat-button {
  width: 37px;
  height: 37px;
  padding: 0;
  border: 1px solid #e8eaed;
  border-radius: 50%;
  place-items: center;
  color: #30343a;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}
.agent-new-chat-button svg { width: 18px; height: 18px; display: block; }
.agent-new-chat-button:hover { background: #f0f2f5; }
body:has(#conversation.agent-chat) .topbar > #agentNewChat,
body:has(#homeConversation.agent-chat) .topbar > #agentNewChat {
  display: none;
}
html.is-desktop-board body:has(#conversation.agent-chat) .topbar > #agentNewChat,
html.is-desktop-board body:has(#homeConversation.agent-chat) .topbar > #agentNewChat { display: none; }
html.is-desktop-board body:has(#conversation.agent-chat) .pane-home > .pane-label,
html.is-desktop-board body:has(#homeConversation.agent-chat) .pane-home > .pane-label {
  padding-right: calc(12px + 37px + 10px);
}
html.is-desktop-board body:has(#conversation.agent-chat) .pane-home > .pane-label > #agentNewChat,
html.is-desktop-board body:has(#homeConversation.agent-chat) .pane-home > .pane-label > #agentNewChat {
  display: grid;
  position: absolute;
  z-index: 2;
  left: auto;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.agent-new-chat-button:active { transform: scale(.94); }
html.is-desktop-board .pane-home > .pane-label > #agentNewChat:active {
  transform: translateY(-50%) scale(.94);
}
.conversation.agent-chat {
  gap: 18px;
  padding-bottom: 32px;
}
.conversation.agent-chat > .message,
.conversation.agent-chat > .typing {
  margin: 0;
}
.conversation.agent-chat > .message.assistant {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  gap: 10px;
}
.conversation.agent-chat > .message.assistant .agent-reply {
  flex: 1;
  min-width: 0;
}
.conversation.agent-chat > .message.assistant > .message-avatar.agent-avatar {
  flex: 0 0 auto;
  margin-top: 2px;
}
.conversation.agent-chat .agent-reply,
.conversation.agent-chat .agent-reply-text,
.conversation.agent-chat .agent-reply-text p {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.conversation.agent-chat .agent-reply-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.conversation.agent-chat .agent-reply-text p,
.conversation.agent-chat .agent-reply-text ul,
.conversation.agent-chat .agent-reply-text ol,
.conversation.agent-chat .agent-reply-text .agent-reply-heading {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: #1a1d1b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.conversation.agent-chat .agent-reply-heading {
  font-size: 1.05em;
  font-weight: 700;
  margin: 14px 0 6px;
  white-space: normal;
}
.conversation.agent-chat .agent-reply-text > .agent-reply-heading:first-child {
  margin-top: 0;
}
.conversation.agent-chat .agent-reply-list {
  padding-left: 20px;
  list-style: disc;
}
.conversation.agent-chat .agent-reply-olist {
  list-style: decimal;
}
.conversation.agent-chat .agent-reply-list li { margin: 6px 0; }
.conversation.agent-chat .agent-reply-list .agent-reply-list {
  margin-top: 6px;
  margin-bottom: 0;
}
.conversation.agent-chat .agent-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef0f2;
}
.conversation.agent-chat .agent-key-info-saved {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.conversation.agent-chat .agent-key-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: #eef6f0;
  font-size: 12px;
  line-height: 1.35;
  color: #2f4538;
}
.conversation.agent-chat .agent-key-info-chip-label {
  min-width: 0;
}
.conversation.agent-chat .agent-key-info-chip-undo {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: #1d6b45;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.conversation.agent-chat .agent-result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.conversation.agent-chat .agent-result-card { margin-top: 0; }
.conversation.agent-chat .agent-reply-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.conversation.agent-chat .agent-reply-action {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #71717a;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.conversation.agent-chat .agent-reply-action[hidden] { display: none !important; }
.conversation.agent-chat .agent-reply-action svg { width: 16px; height: 16px; display: block; }
.conversation.agent-chat .agent-reply-action:hover { color: #3f3f46; }
.conversation.agent-chat .agent-reply-action:active { color: #27272a; }
.conversation.agent-chat .agent-icon-fill { display: none; }
.conversation.agent-chat .agent-reply-action.is-on .agent-icon-line { display: none; }
.conversation.agent-chat .agent-reply-action.is-on .agent-icon-fill { display: block; }
.conversation.agent-chat .agent-reply-action[data-feedback="down"] svg { transform: scaleY(-1); }
.conversation.agent-chat > .message.user {
  align-self: flex-end;
  flex-direction: row;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
  max-width: 78%;
}
.conversation.agent-chat .agent-user-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 20px;
  color: #1a1d1b;
  background: #f0f1ef;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.conversation.agent-chat > .typing {
  align-self: flex-start;
  padding: 6px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html.is-dark .conversation.agent-chat .agent-reply-text p,
html.is-dark .conversation.agent-chat .agent-reply-text ul,
html.is-dark .conversation.agent-chat .agent-reply-text ol,
html.is-dark .conversation.agent-chat .agent-reply-text .agent-reply-heading,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-text p,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-text ul,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-text ol,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-text .agent-reply-heading {
  color: #edf1ee;
}
html.is-dark .conversation.agent-chat .agent-reply-action,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-action {
  color: #a1a1aa;
}
html.is-dark .conversation.agent-chat .agent-reply-action:hover,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-action:hover {
  color: #d4d4d8;
}
html.is-dark .conversation.agent-chat .agent-reply-action:active,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-reply-action:active {
  color: #f4f4f5;
}
html.is-dark .conversation.agent-chat .agent-user-bubble,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-user-bubble {
  color: #edf1ee;
  background: #2a2f2c;
}
html.is-dark .conversation.agent-chat .agent-inline-code,
html[data-profile-theme="dark"] .conversation.agent-chat .agent-inline-code {
  background: #2a2f2c;
}
 .main:has(.agent-chat) { position: relative; }
 .pane-chat .main:has(.agent-chat) .composer-wrap { display: block; padding: 3px 10px calc(9px + env(safe-area-inset-bottom, 0px)) 20px; }
 html.is-keyboard-open .pane-chat .main:has(.agent-chat) .composer-wrap,
 html.is-keyboard-open .pane-chat .main:has(.agent-home) .composer-wrap {
   padding: 3px 10px 2px 20px !important;
 }
 .pane-chat .main:has(.agent-chat) .composer-dock { display: block; }
 .pane-chat .main:has(.agent-chat) .composer { min-height: 58px; padding: 6px; gap: 5px; display: flex; align-items: center; border: 1px solid #eceeea; border-radius: 30px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.075); }
 .pane-chat .main:has(.agent-chat) .composer-divider { display: none; }
 .pane-chat .main:has(.agent-chat) .composer.thread-mode #plusButton { display: none !important; }
 .pane-chat .main:has(.agent-chat) #composerHomeButton, .pane-chat .main:has(.agent-chat) #composerFriendsButton { display: grid !important; place-items: center; align-content: center; }
 .pane-chat .main:has(.agent-chat) #composerHomeButton { width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid #eceeea; border-radius: 50%; color: #171717; background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.08); }
 .pane-chat .main:has(.agent-chat) #composerHomeButton .composer-side-icon { font-size: 31px; font-weight: 350; }
 .pane-chat .main:has(.agent-chat) #composerFriendsButton { width: 52px; height: 52px; flex: 0 0 52px; border: 0; border-radius: 20px; color: #5d6470; background: #eceef2; box-shadow: none; }
 .pane-chat .main:has(.agent-chat) .composer textarea { padding-left: 4px; }
 .pane-chat .main:has(.agent-chat) .main-mode-buttons { display: none !important; }
 .pane-chat .main:has(.agent-chat) #composerFriendsButton.is-mic {
   width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%;
   color: #5d6470; background: transparent; box-shadow: none;
 }
 .pane-chat .main:has(.agent-chat) #composerFriendsButton.is-listening { color: #fff; background: #e5484d; animation: mic-listen-pulse 1.4s ease-in-out infinite; }
 .agent-results-bubble { max-width: min(390px, 86vw); }
 .agent-result-card { display: flex; gap: 9px; margin-top: 9px; color: inherit; text-decoration: none; }
 .agent-result-face { display: grid; flex: 0 0 34px; width: 34px; height: 34px; overflow: hidden; }
 .agent-result-face { border-radius: 50%; place-items: center; background: #dce9e1; }
 .agent-result-face img { width: 100%; height: 100%; object-fit: cover; }
 .agent-result-card strong, .agent-result-card small, .agent-result-card em { display: block; }
 .agent-result-card em { font-style: normal; font-size: 12px; }
 .agent-result-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
 .agent-result-tag { padding: 1px 5px; border-radius: 999px; background: #edf2ef; font-size: 11px; }
 .agent-result-tag.matched { background: #1a1d1b; color: #fff; }
html.is-dark .agent-result-tag.matched,
html[data-profile-theme="dark"] .agent-result-tag.matched {
  background: #edf1ee;
  color: #171a18;
}

/* Edit photos is a full page: Cancel · Edit photos · Done on white, then Layout (Row / 4 / 9 /
   Free style), the photos with Move | Swap, and Post as one image. */
.circle-reorder-sheet {
  top: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; border-radius: 0; background: #f4f5f7; transform: translateX(24px);
}
.circle-reorder.show .circle-reorder-sheet { transform: none; }
.circle-reorder-head {
  flex: none; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px;
  grid-template-columns: 76px 1fr 76px; background: #fff; border-bottom: 1px solid #ececea;
}
.circle-reorder-head strong { font-size: 17px; font-weight: 600; }
.circle-reorder-head button { font-size: 15px; font-weight: 500; color: #6c6d67; justify-self: start; }
.circle-reorder-head button.is-primary { justify-self: end; padding: 0 16px; border-radius: 999px; font-weight: 600; }
.circle-reorder-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.circle-reorder-label { margin: 18px 2px 10px; color: #8a8b84; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.circle-reorder-layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.circle-reorder-layouts button {
  display: grid; justify-items: center; gap: 6px; padding: 10px 0 8px; border: 0; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px #ecebe6; color: #20211f; font: inherit; font-size: 12.5px; cursor: pointer;
}
.circle-reorder-layouts button.is-on { background: #20211f; box-shadow: none; color: #fff; font-weight: 600; }
.circle-reorder-layouts button.is-disabled { opacity: .4; }
.circle-reorder-layouts svg, .circle-reorder-layouts .pcm-ico { width: 26px; height: 26px; }
.circle-reorder-title { display: flex; align-items: center; justify-content: space-between; }
.circle-reorder-title .circle-reorder-modes { width: auto; margin: 8px 0 0; background: #ecebe6; }
.circle-reorder-title .circle-reorder-modes button { padding: 0 14px; }
.circle-reorder-hint { margin: 10px 2px 0; color: #8a8b84; font-size: 12px; }
.circle-reorder-flat {
  width: 100%; margin-top: 18px; padding: 12px 14px; border: 0; border-radius: 16px; display: flex; align-items: center; gap: 12px;
  background: #fff; box-shadow: 0 0 0 1px #ecebe6; color: #20211f; font: inherit; text-align: left; cursor: pointer;
}
.circle-reorder-flat[hidden] { display: none; }
.circle-reorder-flat > span { flex: 1; display: grid; gap: 2px; }
.circle-reorder-flat strong { font-size: 15px; font-weight: 500; }
.circle-reorder-flat small { color: #6c6d67; font-size: 12px; }
.circle-reorder-flat > i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #d6d6d1; transition: background .15s; }
.circle-reorder-flat > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.circle-reorder-flat.is-on > i { background: #20211f; }
.circle-reorder-flat.is-on > i::after { transform: translateX(18px); }
.circle-reorder-flat.is-disabled { opacity: .55; }
.circle-reorder-layouts .pcm-ico { display: grid; gap: 2px; pointer-events: none; }
.circle-reorder-layouts .pcm-4 { grid-template: 1fr 1fr / 1fr 1fr; }
.circle-reorder-layouts .pcm-9 { grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; }
.circle-reorder-layouts .pcm-ico i { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.circle-reorder-layouts .circle-photo-mode-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.circle-reorder-scroll .circle-reorder-spacer { display: none; }

/* One page for photos (Row / 4 / 9): the live preview on top, the layout switch in the middle,
   your photos below. The switch is a row of four plain pills. */
.circle-reorder-preview { margin-top: 14px; }
.circle-reorder-preview .circle-photo-stage { position: relative; left: auto; top: auto; width: auto; visibility: visible; pointer-events: auto; height: 280px; margin: 0; }
.circle-reorder-preview .circle-photo-modes { display: none !important; }
.circle-reorder-note { margin: 8px 4px 0; text-align: center; color: #8a8b84; font-size: 12.5px; }
.circle-reorder-layouts {
  display: flex; gap: 2px; margin: 14px 0 0; padding: 4px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #ecebe6;
}
.circle-reorder-layouts button {
  flex: 1; display: block; padding: 9px 0; border: 0; border-radius: 999px; box-shadow: none;
  background: transparent; color: #20211f; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.circle-reorder-layouts button.is-on { background: #20211f; color: #fff; font-weight: 600; }
.circle-reorder-layouts button.is-disabled { opacity: 1; color: #b0b1aa; }
.circle-reorder-layouts svg, .circle-reorder-layouts .pcm-ico { display: none !important; }
.circle-reorder-title .circle-reorder-label { margin-top: 18px; }
.circle-reorder-scroll .circle-reorder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.circle-reorder-scroll .circle-reorder-item { aspect-ratio: 1; }

/* Free style, same page: frame on top, sizes and Reset / Save / Fill under it, the switch, your
   photos, Post as one image. One fixed screen, so the frame shrinks to leave room. */
.collage-designer { --cd-side: min(calc(100vw - 32px), calc(100dvh - 560px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 420px); }
.cd-head strong { font-size: 17px; font-weight: 600; }
.cd-head button { font-size: 15px; font-weight: 500; color: #6c6d67; }
.cd-head button.is-primary { color: #fff; border-radius: 999px; font-weight: 600; }
.cd-main { flex-direction: column; align-items: center; gap: 0; }
.cd-sizes { order: 0; flex-direction: row; width: auto; gap: 6px; margin-top: 10px; }
.cd-sizes button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.cd-actions { width: var(--cd-side); padding-left: 0; margin: 8px auto 0; }
.cd-layouts { margin-bottom: 12px; }
.cd-tray-head { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8b84; }
.cd-flat { flex: 0 0 auto; margin-top: 10px; }

/* Both photo pages share one frame that never moves: the same top bar, a one-line status, a
   fixed-size preview box, one row of controls, then the switch. Switching Row / 4 / 9 / Free
   style changes what's inside the box, not where anything is. */
.circle-reorder, .collage-designer {
  --photo-side: min(calc(100vw - 32px), max(220px, calc(100dvh - 520px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))), 400px);
}
.circle-reorder-head, .collage-designer .cd-head { height: auto; min-height: 0; }
.circle-reorder-note, .collage-designer .cd-status {
  height: 18px; line-height: 18px; margin: 12px 0 8px; padding: 0;
  text-align: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.circle-reorder-note { color: #8a8b84; }
.circle-reorder-preview { height: var(--photo-side); margin: 0; display: grid; align-items: center; overflow: hidden; }
.circle-reorder-preview .circle-photo-stage { height: var(--photo-side); }
.circle-reorder-preview .circle-attachment-preview { height: var(--photo-side) !important; margin: 0; }
.circle-reorder-preview .circle-photo-canvas { width: var(--photo-side); height: var(--photo-side); margin: 0 auto; }
.circle-reorder-controls { height: 36px; margin-top: 8px; }
.circle-reorder-layouts, .collage-designer .cd-layouts { margin: 12px 0 0; }

.collage-designer { --cd-side: var(--photo-side); padding-top: 0; }
.collage-designer .cd-head {
  margin: 0 -16px; width: auto; max-width: none; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px;
  grid-template-columns: 76px 1fr 76px; background: #fff; border-bottom: 1px solid #ececea;
}
.collage-designer .cd-head button { min-height: 36px; justify-self: start; }
.collage-designer .cd-head button.is-primary { justify-self: end; padding: 0 16px; }
.collage-designer .cd-main { height: var(--photo-side); }
.collage-designer .cd-actions { height: 36px; margin: 8px auto 0; width: 100%; max-width: 480px; align-items: center; gap: 6px; }
.collage-designer .cd-actions .cd-sizes { order: 0; flex: none; flex-direction: row; gap: 4px; margin: 0 4px 0 0; width: auto; }
.collage-designer .cd-actions .cd-sizes button { min-height: 32px; height: 32px; padding: 0 9px; font-size: 12.5px; }
.collage-designer .cd-actions > button { height: 32px; min-width: 0; padding: 0 6px; }
.circle-reorder-scroll { padding-top: 0; }
/* 4 / 9 grids in the box: a square of the box's size, centered (other rules size it from width). */
#circleReorder .circle-reorder-preview .circle-attachment-preview { justify-content: center; align-items: center; }
#circleReorder .circle-reorder-preview .circle-photo-canvas { width: var(--photo-side) !important; height: var(--photo-side) !important; max-width: 100%; margin: 0 auto; flex: none; }
#circleReorder .circle-reorder-preview { display: block; }
#circleReorder .circle-reorder-preview .circle-photo-stage { height: var(--photo-side) !important; overflow: hidden; }
#circleReorder .circle-reorder-preview .circle-collage-square { width: var(--photo-side) !important; height: var(--photo-side) !important; padding-top: 0 !important; max-width: 100%; margin: 0 auto; flex: none; }
#circleReorder .circle-reorder-preview .circle-collage-square .circle-photo-canvas { width: 100% !important; height: 100% !important; }

/* Circle feed (phone): a photo row like Threads. It runs from screen edge to screen edge (past the
   post's 58px / 14px and the feed's 12px side padding), starts with the first photo lined up under
   the name (the avatar column is clear until you scroll), and scrolls freely (no snapping one photo
   at a time). Every photo shares one height (290px, or less on a narrow phone) and keeps its shape,
   so a wide photo is simply wider. */
html:not(.is-desktop-board) .circle-feed-page .circle-private-post:not(.circle-compose-preview-post) { overflow: visible; }
html:not(.is-desktop-board) .circle-feed-page .circle-private-post:not(.circle-compose-preview-post) > .circle-media-carousel {
  width: auto;
  max-width: none;
  margin-left: -70px;
  margin-right: -26px;
  padding-left: 70px;
  scroll-padding-left: 70px;
  scroll-snap-type: none;
}
html:not(.is-desktop-board) .circle-feed-page .circle-private-post:not(.circle-compose-preview-post) > .circle-media-carousel.has-aspects .circle-media-track {
  height: min(290px, calc(92cqw - 64px));
}
html:not(.is-desktop-board) .circle-feed-page .circle-private-post:not(.circle-compose-preview-post) > .circle-media-carousel .circle-media-item {
  max-width: none;
  scroll-snap-align: none;
}
html:not(.is-desktop-board) .circle-feed-page .circle-private-post:not(.circle-compose-preview-post) > .circle-media-carousel .circle-media-track::after {
  content: "";
  flex: 0 0 12px;
}

/* Advanced = the Free style collage page only: sizes on the left of the frame, Reset / Save / Fill
   centered under it, then your photos and Post as one image. No switch and no status or hint lines
   (the status line and tray heading stay in the page, hidden; the code still fills them). */
.collage-designer { --cd-side: min(calc(100vw - 96px), calc(100dvh - 380px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 420px); }
.collage-designer .cd-status, .collage-designer .cd-tray-head, .collage-designer .cd-hint { display: none; }
.collage-designer .cd-main { height: auto; flex-direction: row; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 16px; }
.collage-designer .cd-sizes { order: -1; flex-direction: column; gap: 8px; width: 54px; margin: 0; }
.collage-designer .cd-sizes button { min-height: 40px; height: 40px; padding: 0; font-size: 13px; }
.collage-designer .cd-actions { height: auto; width: auto; max-width: none; margin: 12px auto 0; padding: 0; justify-content: center; gap: 8px; }
.collage-designer .cd-actions > button { flex: none; height: 34px; padding: 0 14px; font-size: 13.5px; }
.collage-designer .cd-tray { margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); align-content: start; }
.collage-designer .cd-tray > * { aspect-ratio: 1; }
.collage-designer .cd-tray { flex: 0 0 auto; grid-auto-rows: auto; }

/* The small question card on the photo pages (instead of the browser's confirm box). */
.circle-ask { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; background: rgb(16 17 15 / 0); transition: background .18s; }
.circle-ask.show { background: rgb(16 17 15 / .38); }
.circle-ask-card { width: min(100%, 320px); padding: 22px 20px 16px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 20px 50px rgb(0 0 0 / .22); transform: scale(.96); opacity: 0; transition: transform .18s, opacity .18s; }
.circle-ask.show .circle-ask-card { transform: none; opacity: 1; }
.circle-ask-card strong { display: block; color: #20211f; font-size: 17px; font-weight: 650; line-height: 1.3; }
.circle-ask-card p { margin: 8px 0 0; color: #6c6d67; font-size: 14px; line-height: 1.45; }
.circle-ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.circle-ask-actions button { min-height: 44px; border: 0; border-radius: 12px; background: #f0efeb; color: #20211f; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.circle-ask-actions .is-primary { background: #20211f; color: #fff; }
.circle-ask-actions .is-danger { background: #fdecea; color: #b42318; }