/* facebook-preview.css — the Facebook post facsimile (js/facebook-preview.js).
 *
 * ⚠️ THIS FILE DELIBERATELY DOES NOT USE OUR DESIGN TOKENS, AND THAT IS THE
 * POINT. Every other stylesheet here is app-shell.css's tokens, and a reviewer
 * seeing raw hex in a coachbot stylesheet is right to be suspicious — so read
 * this before changing it.
 *
 * Alex asked for "an accurate Facebook post preview… so you can actually
 * preview what it really looks like on Facebook." A preview dressed in OUR
 * greys, OUR radii and OUR type is a picture of our app, not of Facebook, and
 * it cannot answer the only question it exists to answer: will this look right
 * when it goes out? So the values below are Facebook's own — the Helvetica/
 * Segoe stack, #1c1e21 body text, #65676b secondary, #f0f2f5 card fill,
 * #ced0d4 hairlines, the 15px/1.3333 message setting and the 8px card radius.
 *
 * Converting these to tokens would be a regression dressed as a tidy-up.
 *
 * It IS still ours in two respects: it is mobile-first, and it never exceeds
 * its container (the preview sits inside a .cc-expand panel that is itself
 * responsive). Facebook's own feed column is ~500px; below that the component
 * reports itself as mobile and folds the message much earlier.
 */

.fbp {
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: #fff;
  border: 1px solid #ced0d4;
  border-radius: 8px;
  max-width: 500px;
  color: #1c1e21;
  overflow: hidden;
}

/* ── Head: avatar, Page name, the time + audience line ─────────────────── */
.fbp-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; }

.fbp-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: 0 0 40px; background: #e4e6eb;
}
.fbp-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; color: #65676b;
}

.fbp-head-text { flex: 1 1 auto; min-width: 0; }
.fbp-page {
  font-size: 15px; font-weight: 600; line-height: 1.2;
  color: #050505; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fbp-meta { font-size: 13px; color: #65676b; line-height: 1.35; margin-top: 1px; }
.fbp-globe { font-size: 11px; }
.fbp-dots { color: #65676b; font-size: 18px; letter-spacing: 1px; flex: 0 0 auto; }

/* ── Message: Facebook's 15px / 1.3333 setting ─────────────────────────── */
.fbp-message {
  padding: 10px 12px 12px;
  font-size: 15px;
  line-height: 1.3333;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fbp-ellipsis { color: #1c1e21; }

/* ⚠️ A REAL <button>, RESET TO LOOK INLINE — not a span dressed as a link.
   It shipped as a span with cursor:help and Alex could not click it on a
   phone. It must read as Facebook's inline affordance while behaving like a
   control: hence the full reset, an inherited font, and a negative-margin
   vertical pad that grows the tap area without moving the text. */
.fbp-seemore {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: #65676b;
  font-weight: 600;
  cursor: pointer;
  /* ≥48px tall on a thumb (CODING-STANDARDS touch minimum) — measured at 40px
     with 10px padding, so 14px it is. The matching negative margin means the
     pad is hit area ONLY: the baseline does not shift and the fold still reads
     as one continuous sentence. Overlapping the line above is harmless, since
     the message text is not interactive. */
  padding: 14px 6px;
  margin: -14px -6px;
  border-radius: 4px;
}
.fbp-seemore:hover { text-decoration: underline; }
.fbp-seemore:focus-visible { outline: 2px solid #1877f2; outline-offset: 1px; }

/* ── Attachments ───────────────────────────────────────────────────────── */
.fbp-photo { border-top: 1px solid #ced0d4; background: #f0f2f5; }
.fbp-photo img { display: block; width: 100%; height: auto; }

/* The image failed to load. This is OUR voice, not Facebook's — it is a warning
   that the post would publish without its picture — so it uses our text tokens
   rather than Facebook's greys. See photoHtml() in js/facebook-preview.js. */
.fbp-photo-broken {
  border-top: 1px solid #ced0d4;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3, #65676b);
  background: #f0f2f5;
}

.fbp-card {
  display: block; text-decoration: none; color: inherit;
  border-top: 1px solid #ced0d4; background: #f0f2f5;
}
.fbp-card-img { background: #e4e6eb; }
.fbp-card-img img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.fbp-card-text { padding: 10px 12px; }
.fbp-card-host {
  font-size: 12px; color: #65676b; text-transform: uppercase; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fbp-card-title {
  font-size: 17px; font-weight: 600; line-height: 1.2; color: #1c1e21; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fbp-card-desc {
  font-size: 14px; color: #65676b; line-height: 1.3; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* The one piece of chrome that is OURS, because it is us talking to the coach
   about their own website rather than Facebook talking to a reader. Kept
   visually outside the card for exactly that reason. */
.fbp-card-guess {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3, #65676b);
}

/* ── Footer actions: inert, present because their absence reads as broken ─ */
.fbp-actions {
  display: flex; border-top: 1px solid #ced0d4; margin: 0 12px; padding: 4px 0;
}
.fbp-action {
  flex: 1 1 0; text-align: center; padding: 6px 0;
  font-size: 15px; font-weight: 600; color: #65676b;
}

@media (max-width: 480px) {
  .fbp-card-title { font-size: 15px; }
  .fbp-action { font-size: 14px; }
}

/* A video attachment. Facebook shows the poster with a round white play button
   over it until you press play, so that is what the preview shows.
   ⚠️ These are Facebook's own greys, like the rest of this file — this
   stylesheet deliberately does NOT use our tokens, because it is a facsimile
   of somebody else's product, not part of our chrome. The one exception stays
   the broken-image warning above, which is us speaking. */
.fbp-video { position: relative; }
.fbp-video-blank {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1c1e21;
}
.fbp-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #1c1e21;
  font-size: 20px;
  line-height: 56px;
  text-align: center;
  padding-left: 4px;   /* optically centres the triangle */
  box-sizing: border-box;
  pointer-events: none;
}