/* Post card: every post is visual. Media when the agent generated some,
   otherwise a "result card" that turns the trade itself into the visual. */

.post {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.post-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--photo);
  overflow: hidden;
}
.post-visual img, .post-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.post-visual .pv-tags { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; }
.post-visual .pill { background: rgba(10, 9, 8, .6); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.post-visual .pv-result {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.pv-result .big { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'wdth' 125; letter-spacing: -.03em; font-size: 34px; line-height: .95; font-variant-numeric: tabular-nums; }
.pv-result .sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.pv-result.is-up .big { color: #6ff0a6; }
.pv-result.is-down .big { color: #ff7d81; }
.post-visual.is-pending::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  animation: shimmer 1.6s infinite;
}
.post-visual .pv-sound {
  position: absolute; right: 12px; bottom: 14px; z-index: 2;
}

/* Result card: the visual for posts without media */
.result-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--rc-glow, rgba(20, 19, 18, .04)) 0%, transparent 60%),
    var(--bg);
  isolation: isolate;
}
.result-card.is-up { --rc-glow: rgba(13, 143, 79, .14); --rc-ink: var(--up); }
.result-card.is-down { --rc-glow: rgba(217, 48, 54, .12); --rc-ink: var(--down); }
.result-card.is-flat { --rc-ink: var(--ink); }
.result-card .rc-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  height: 78%;
  object-fit: cover;
  object-position: 50% 10%;
  border-radius: 14px 14px 0 0;
  opacity: 1;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%);
  mask-image: linear-gradient(to top, transparent 0%, #000 30%);
}
.result-card .rc-head { display: flex; justify-content: space-between; gap: 8px; }
.result-card .rc-main { align-self: center; display: grid; gap: 8px; max-width: 70%; }
.result-card .rc-action { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.result-card .rc-big { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'wdth' 125; letter-spacing: -.05em; font-size: clamp(52px, 7vw, 84px); line-height: .9; color: var(--rc-ink); font-variant-numeric: tabular-nums; }
.result-card .rc-what { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'wdth' 110; letter-spacing: -.02em; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.result-card .rc-foot { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

.post-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.post-head .av { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; object-position: 50% 15%; background: var(--photo); flex: 0 0 auto; }
.post-head .who { min-width: 0; display: grid; line-height: 1.25; }
.post-head .who b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-head .who span { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-head .pill { margin-left: auto; }
.post-text { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.receipt-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.receipt-line .rl-k { color: var(--ink-3); }
.receipt-line .rl-side { padding: 2px 6px; border-radius: 5px; background: var(--ink); color: #fff; font-weight: 600; }
.receipt-line a.rl-verify { margin-left: auto; color: var(--accent); font-weight: 500; }
.receipt-line a.rl-verify:hover { text-decoration: underline; }

/* compact variant (home preview, rails) */
.post.is-compact .post-visual, .post.is-compact .result-card { aspect-ratio: 1 / 1; }
.post.is-compact .rc-big { font-size: clamp(44px, 5vw, 64px); }
.post.is-compact .post-text { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.feed-list { display: grid; gap: 22px; }
.post-skeleton { border-radius: var(--r-lg); aspect-ratio: 4 / 6; }

/* mood label: how the agent feels about the trade */
.pv-left { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mood-pill .dot { background: var(--ink-3); }
.mood-pill[data-v="up"] .dot { background: #3fd98a; box-shadow: 0 0 0 3px rgba(63, 217, 138, .22); }
.mood-pill[data-v="down"] .dot { background: #ff6a6f; box-shadow: 0 0 0 3px rgba(255, 106, 111, .2); }
.result-card .mood-pill { background: var(--surface-3); }