/* ============================================================
   Customer V2 post interactions

   Shared by compact dashboard cards and rich feed cards. All colours come
   from the V2 design tokens, so the controls and dialogs work in both themes.
   ============================================================ */

/* cards.js is shared by every customer V2 page. Keep its resolved-media
   modifiers in this globally loaded sheet rather than making compact-card
   pages download all of feed.css. A resolved photo supplies its real
   dimensions; locked and failed media retain the fail-closed 4:3 shape. */
.ppost__media--image.ppost__media--intrinsic {
  aspect-ratio: var(--ppost-media-ratio, 4 / 3);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Match V1's pointer affordances without suggesting that protected media can
   be opened directly. */
.ppost__media--image:not(.ppost__media--locked) { cursor: zoom-in; }
.ppost__media--video:not(.ppost__media--locked) { cursor: pointer; }
.ppost__media--locked { cursor: default; }

/* Compact dashboard cards use the same fullscreen affordance as rich feed
   cards. The attributes are emitted only when the backend granted access and
   the card has an authorized media contract, so locked cards stay neutral. */
.post-card__media[data-open-post][data-viewer-media="image"] { cursor: zoom-in; }
.post-card__media[data-open-post][data-viewer-media="video"] { cursor: pointer; }

/* A post can credit other performers. These chips deliberately remain small
   enough for compact cards while keeping the linked model names accessible
   in rich cards and the fullscreen viewer. */
.post-performers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 8px 0;
}

.post-performers__label {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.post-performer,
.post-performers__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 190px;
  min-height: 28px;
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-alt);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

a.post-performer:hover { color: var(--brand); }
a.post-performer:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.post-performer__avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 8px;
}

.post-performer__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-performers__more {
  justify-content: center;
  min-width: 28px;
  padding: 2px 7px;
  color: var(--ink-soft);
}

.post-card__body .post-performers { margin: 7px 0 4px; }
.ppost__body .post-performers,
.lb__body .post-performers { margin: 8px 0; }

@media (max-width: 600px) {
  .post-performer { max-width: 150px; }
}

.post-reaction {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 3px 4px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.post-reaction:hover:not(:disabled) { color: var(--ink); }
.post-reaction:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.post-reaction:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.post-reaction.is-busy { pointer-events: none; opacity: .62; }
.post-reaction.is-liked { color: var(--heart); }
.post-reaction.is-starred { color: var(--star); }

/* The modal body has its own scroll area. This keeps the composer and close
   controls reachable on small iPhone Safari viewports. */
.post-comments-modal {
  width: 560px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}

.post-comments-modal .modal__head { flex: none; }

.post-comments {
  min-height: 180px;
  max-height: min(58dvh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
}

.post-comments__state {
  margin: 26px 0;
  color: var(--ink-soft);
  text-align: center;
  font-size: var(--text-sm);
}

.post-comments__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-comment {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-alt);
}

.post-comment__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.post-comment__author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
}

.post-comment__time {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 10.5px;
  white-space: nowrap;
}

.post-comment__text {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.post-comment__delete {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--heart);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.post-comment__reply {
  margin: 9px 0 0 14px;
  padding: 8px 10px;
  border-left: 2px solid var(--brand);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
}
.post-comment__reply strong { color: var(--ink); }

.post-comments__more {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.post-comments__composer {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}

.post-comments__input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
}

.post-comments__composer-note {
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

/* The five-second paid-star escape hatch stays beside the exact star button
   that was pressed. It must not become a detached toast that can be missed
   in the opposite corner of a large screen. */
.star-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(280px, calc(100vw - 32px));
  padding: 3px 4px 3px 9px;
  border: 1px solid color-mix(in srgb, var(--star) 45%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--star) 13%, var(--card));
  color: var(--ink);
  vertical-align: middle;
}

.star-undo__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
}

.star-undo__button {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--star);
  color: #17120a;
  font-weight: 700;
  font-size: 10.5px;
}

.star-consent__price {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--star) 14%, var(--card));
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 600px) {
  .post-comments-modal {
    width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  .post-comments {
    min-height: 0;
    max-height: none;
    flex: 1;
  }
  .post-comments__composer {
    align-items: flex-end;
  }
  .post-comments__composer .btn { min-height: 42px; }
  .star-undo { max-width: min(240px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  .post-reaction,
  .star-undo { transition: none; animation: none; }
}