/* The creative preview — a chat row, as the reader will actually meet it.
 *
 * THIS BLOCK IS DELIBERATELY NOT STYLED BY THE PACK, and the exception is worth
 * stating because everything else on the surface is. The preview's whole job is to
 * be accurate about somebody else's interface: an advertiser is buying a row in a
 * Telegram chat list, and painting that row in `router`'s palette would show them a
 * product that does not exist. Inside `.tg` the values are Telegram's. Outside it —
 * the frame, the label, the theme switch — they are the pack's.
 *
 * Drawn from `ads_preview.jpg`, this repository's own reference: round avatar on the
 * left, title on one line, subtitle under it, a magenta pin on the trailing edge, and
 * the row sitting BETWEEN two ordinary chats. The neighbours are the load-bearing
 * part — a row shown alone tells an advertiser nothing about how it reads in a list,
 * which is the only place it is ever seen.
 *
 * What it does NOT draw: a phone bezel, a notch, a status bar, a clock. `router` bans
 * fake window chrome by name and calls it this pack's specific occupational hazard.
 * The simulation stops at the rows.
 *
 * The theme switch above it is its own, not the app's. The advertiser's Telegram
 * setting says nothing about their audience's, and the creative ships to both.
 */

.preview {
  container-type: inline-size;
}

.preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tg {
  /* Telegram iOS, light register. */
  --tg-bg: #ffffff;
  --tg-ink: #000000;
  --tg-sub: #8e8e93;
  --tg-sep: #c8c7cc;
  --tg-time: #8e8e93;
  --tg-ad: #e844c8; /* the pin in the reference */
  --tg-avatar-fallback: #d1d1d6;

  background: var(--tg-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  /* Telegram sets its own face; ours would misrepresent the line breaks. */
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.tg[data-tg-theme="dark"] {
  --tg-bg: #000000;
  --tg-ink: #ffffff;
  --tg-sub: #8d8e93;
  --tg-sep: #1f1f1f;
  --tg-time: #8d8e93;
  --tg-avatar-fallback: #2c2c2e;
}

.tg__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 72px;
}

.tg__row + .tg__row .tg__text {
  border-top: none;
}

/* The separator starts after the avatar, the way Telegram draws it. */
.tg__row:not(:last-child) {
  box-shadow: inset 0 -0.5px 0 0 var(--tg-sep);
}

/* The neighbours are context, and they are drawn at full strength because that is
   how Telegram draws them. An earlier version dimmed them to 55% so the eye would
   land on the ad row; the contrast audit measured the result at **1.79:1** and it was
   right twice over — unreadable, and an invention. Telegram does not fade the chats
   around an ad, and `ads_preview.jpg` shows the opposite of the dimming: the
   neighbours are ordinary and the AD is the one that stands out. The pin is what
   marks it, and the pin is Telegram's own.

   So `.tg__row--neighbour` carries NO style. The class stays because the markup
   still says which rows are context, and an empty rule set would say less than
   this paragraph does. */

.tg__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tg-avatar-fallback);
  flex: none;
  display: block;
}

.tg__text {
  min-width: 0;
}

.tg__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  color: var(--tg-ink);
  /* One line. At 40 characters it fits a phone; the ellipsis is what an
     over-long title would actually get, so we show that rather than wrapping. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg__subtitle {
  margin-top: 2px;
  font-size: 15px;
  line-height: 20px;
  color: var(--tg-sub);
  /* Two lines, which is the operator's stated shape for an 80-character subtitle. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tg__meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  align-self: start;
  padding-top: 4px;
}

.tg__time {
  font-size: 15px;
  color: var(--tg-time);
}

.tg__pin {
  width: 16px;
  height: 16px;
  color: var(--tg-ad);
}

/* The placeholder is OURS, not Telegram's — it is the words "Your title", shown
   before anything has been typed. Telegram's secondary grey measures 3.26:1 and
   under AA, which is a fact about their interface that this preview reproduces
   faithfully for real content; reproducing it for our own prompt would be copying a
   flaw with no reason to. It takes the pack's muted ink instead, and it is the one
   string inside this frame that does. */
.tg__empty {
  color: var(--muted);
}

/* An advertiser on a phone gets the row at the width a phone gives it. Above that
   the frame stops growing: a chat row 900px wide is not a chat row, and letting it
   stretch would show line breaks that will never happen. */
.tg {
  max-width: 420px;
}

@media (forced-colors: active) {
  .tg {
    forced-color-adjust: none;
  }
}