/* shared-post.css
 * ---------------------------------------------------------------------------
 * The "publicação partilhada" card (assets/js/shared/components/shared-post.js).
 * Used by the messages thread, the checkout mini-chat and both composers.
 *
 * The card has NO viewport-relative width. The old one was min(328px, 76vw)
 * while its bubble was min(540px, 78%) of the thread column, so on a phone the
 * card came out ~45px wider than the bubble and spilled out of the thread. It
 * now fills the space it is given, up to a max.
 * ------------------------------------------------------------------------- */

.mc-post {
  --mc-post-bg: var(--theme-surface);
  --mc-post-border: var(--theme-border);
  --mc-post-text: var(--theme-text);
  --mc-post-muted: var(--theme-text-muted);
  --mc-post-media-bg: var(--theme-surface-subtle);
  --mc-post-radius: 20px;

  display: block;
  /* A stable card, not one that hugs its text: an ideal width that shrinks to
     whatever the bubble allows. `width:100%` would resolve against a
     shrink-to-fit bubble and make the card as wide as its longest line, so two
     cards in the same thread came out different sizes. */
  width: 320px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--mc-post-border);
  border-radius: var(--mc-post-radius);
  background: var(--mc-post-bg);
  color: var(--mc-post-text);
  text-align: left;
  text-decoration: none;
  box-shadow: var(--liquid-glass-shadow-soft);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Every internal is inert so a long-press, a swipe-to-reply or a context menu
   always hits the anchor, never an inner <img> (iOS raises its own "save image"
   callout otherwise — same trap the attachment stack had). */
.mc-post * { pointer-events: none; }

.mc-post:hover { box-shadow: var(--liquid-glass-shadow); }
.mc-post.is-long-press-arming { transform: scale(.985); filter: brightness(1.06); }

:root[data-theme=night] .mc-post {
  --mc-post-bg: #1c2127;
  --mc-post-border: rgba(255, 255, 255, .09);
  --mc-post-text: #f3f7fc;
  --mc-post-muted: rgba(233, 240, 249, .68);
  --mc-post-media-bg: #10151b;
}

/* ---- media --------------------------------------------------------------- */

.mc-post__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mc-post-media-bg);
}

.mc-post__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Without this the pill sat unreadable on the dark bottom edge of a photo. */
.mc-post__media.has-status::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 9, 14, .58), rgba(6, 9, 14, 0));
}

/* A coverless listing keeps the card's shape without a half-card of nothing. */
.mc-post__media.is-empty { aspect-ratio: 3 / 1; }

.mc-post__media.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(230, 30, 77, .12), transparent 70%),
    var(--mc-post-media-bg);
}

.mc-post__status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(20, 24, 33, .66);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.mc-post__status::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd24a;
}

.mc-post__status[data-state="draft"]::before { background: #b8c0cc; }
.mc-post__status[data-state="cancelled"]::before { background: #ff6b6b; }
.mc-post__status[data-state="paid"],
.mc-post__status[data-state="confirmed"] { background: rgba(122, 23, 71, .74); }
.mc-post__status[data-state="paid"]::before,
.mc-post__status[data-state="confirmed"]::before { background: #ff5f9e; }

/* ---- body ---------------------------------------------------------------- */

.mc-post__body {
  display: grid;
  gap: 3px;
  padding: 11px 13px 12px;
  min-width: 0;
}

.mc-post__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--mc-post-text);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.28;
}

.mc-post__location,
.mc-post__facts {
  min-width: 0;
  overflow: hidden;
  color: var(--mc-post-muted);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.34;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-post__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  min-width: 0;
}

.mc-post__price {
  min-width: 0;
  overflow: hidden;
  color: var(--mc-post-text);
  font-size: .8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-post__price strong { font-size: .96rem; font-weight: 800; }
.mc-post__price-unit { margin-left: 4px; }

/* The separator is a pseudo-element so it never becomes a text node the i18n
   engine would have to key on. */
.mc-post__facts span + span::before { content: " · "; }

.mc-post__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: var(--mc-post-text);
  font-size: .82rem;
  font-weight: 700;
}

.mc-post__rating svg { transform: translateY(-1px); }
.mc-post__reviews { color: var(--mc-post-muted); font-weight: 600; }

/* ---- author -------------------------------------------------------------- */

.mc-post__author {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--mc-post-border);
  min-width: 0;
}

.mc-post__handle {
  min-width: 0;
  overflow: hidden;
  color: var(--mc-post-muted);
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-post__verified {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: 0;
}

.mc-post__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--mc-post-media-bg);
  color: var(--mc-post-text);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

.mc-post__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-post__avatar.is-fallback { background: #c9a0a8; color: #fff; }
.mc-post__avatar.is-tiny { flex-basis: 20px; width: 20px; height: 20px; font-size: .62rem; }
.mc-post__avatar.is-large { flex-basis: 46px; width: 46px; height: 46px; font-size: 1.3rem; }

/* ---- profile variant ----------------------------------------------------- */

.mc-post__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  min-width: 0;
}

.mc-post__identity-copy { display: grid; gap: 2px; min-width: 0; }

.mc-post__handle-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-post__name {
  min-width: 0;
  overflow: hidden;
  color: var(--mc-post-muted);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-post__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--mc-post-border);
}

.mc-post__tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mc-post-media-bg);
}

.mc-post__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mc-post__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 1;
  padding: 16px 20px;
  background: var(--mc-post-media-bg);
  color: var(--mc-post-muted);
  font-size: .82rem;
  font-weight: 620;
  line-height: 1.35;
  text-align: center;
}

/* ---- compact variant (composer previews) --------------------------------- */

.mc-post--compact {
  width: 190px;
  --mc-post-radius: 14px;
  box-shadow: none;
}

.mc-post--compact .mc-post__body { gap: 2px; padding: 8px 10px 9px; }
.mc-post--compact .mc-post__title { -webkit-line-clamp: 1; font-size: .82rem; }
.mc-post--compact .mc-post__location { font-size: .72rem; }
.mc-post--compact .mc-post__facts,
.mc-post--compact .mc-post__author { display: none; }
.mc-post--compact .mc-post__foot { margin-top: 3px; }
.mc-post--compact .mc-post__price { font-size: .72rem; }
.mc-post--compact .mc-post__price strong { font-size: .82rem; }
.mc-post--compact .mc-post__rating { font-size: .72rem; }
.mc-post--compact .mc-post__status { left: 6px; bottom: 6px; padding: 3px 8px; font-size: .6rem; }
.mc-post--compact .mc-post__status::before { flex-basis: 5px; width: 5px; height: 5px; }
.mc-post--compact .mc-post__identity { padding: 9px 10px; gap: 8px; }
.mc-post--compact .mc-post__avatar.is-large { flex-basis: 30px; width: 30px; height: 30px; font-size: .9rem; }
.mc-post--compact .mc-post__handle-line { font-size: .82rem; }
.mc-post--compact .mc-post__name { font-size: .7rem; }
.mc-post--compact .mc-post__empty { aspect-ratio: 5 / 1; padding: 8px 10px; font-size: .66rem; }