/* Platform mockups: each game card renders as a pixel-faithful screenshot of
   its source platform. Avatars are anonymized silhouettes, names redacted.
   Chrome is LTR (platform UI language); content text is dir=auto. */

.card-frame { width: 100%; margin-bottom: 28px; }
.sm-card {
  width: 100%;
  text-align: start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- shared anonymization --- */
.sm-avatar {
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #c7cfd8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.redact {
  display: inline-block;
  height: 0.72em;
  border-radius: 4px;
  background: #b9c0ca;
  vertical-align: baseline;
}

/* --- LinkedIn comment --- */
.sm-linkedin { background: #ffffff; padding: 12px 16px 10px; }
.sm-linkedin .li-row { display: flex; gap: 8px; direction: ltr; align-items: flex-start; }
.sm-linkedin .sm-avatar { width: 40px; height: 40px; margin-top: 2px; }
.sm-linkedin .li-main { flex: 1; min-width: 0; }
.sm-linkedin .li-head { display: flex; align-items: center; gap: 6px; }
.sm-linkedin .li-name { width: 110px; }
.sm-linkedin .li-meta { color: rgba(0,0,0,0.6); font-size: 12px; white-space: nowrap; }
.sm-linkedin .li-headline { width: 180px; margin-top: 4px; background: #d3d8de; }
.sm-linkedin .li-text {
  color: rgba(0,0,0,0.9);
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sm-linkedin .li-actions {
  direction: ltr;
  display: flex; gap: 16px;
  margin-top: 6px;
  color: rgba(0,0,0,0.6);
  font-size: 12px; font-weight: 600;
}

/* --- X post --- */
.sm-x { background: #ffffff; padding: 12px 16px 8px; }
.sm-x .x-row { display: flex; gap: 10px; direction: ltr; align-items: flex-start; }
.sm-x .sm-avatar { width: 40px; height: 40px; background-color: #cfd9de; margin-top: 2px; }
.sm-x .x-head { width: 100%; }
.sm-x .x-more { margin-inline-start: auto; color: #536471; font-weight: 700; letter-spacing: 1px; }
.sm-x .x-main { flex: 1; min-width: 0; }
.sm-x .x-head { display: flex; align-items: center; gap: 6px; }
.sm-x .x-name { width: 90px; background: #b9c0ca; }
.sm-x .x-handle { color: #536471; font-size: 14px; white-space: nowrap; }
.sm-x .x-text {
  color: #0f1419;
  font-size: 15px;
  line-height: 1.35;
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sm-x .x-actions {
  direction: ltr;
  display: flex; justify-content: space-between; align-items: center;
  max-width: 300px;
  margin-top: 10px;
  color: #536471;
  font-size: 12px;
}
.sm-x .x-actions .xa { display: inline-flex; align-items: center; gap: 5px; }
.sm-x .x-actions svg { width: 16px; height: 16px; fill: #536471; }

/* --- WhatsApp message --- */
.sm-whatsapp {
  background-color: #ece5dd;
  background-image: radial-gradient(rgba(0,0,0,0.045) 1px, transparent 1.4px);
  background-size: 22px 22px;
  padding: 14px 12px;
}
.sm-whatsapp .wa-bubble {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 8px 10px 6px;
  max-width: 85%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12);
  width: fit-content;
}
[dir="rtl"] .sm-whatsapp .wa-bubble { border-top-left-radius: 8px; border-top-right-radius: 0; margin-inline-start: auto; }
.sm-whatsapp .wa-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -7px;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-inline-end-color: #ffffff;
}
.sm-whatsapp .wa-text {
  color: #111b21;
  font-size: 14.5px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.sm-whatsapp .wa-time {
  float: inline-end;
  color: #8696a0;
  font-size: 11px;
  margin: 8px 0 0 10px;
  position: relative;
  top: 4px;
}