/* social-preview.css — the Instagram, LinkedIn and X facsimiles
 * (js/social-preview.js). Facebook keeps its own file, css/facebook-preview.css,
 * because it was written first and nothing about it changed.
 *
 * ⚠️ THIS FILE DELIBERATELY DOES NOT USE OUR DESIGN TOKENS, AND THAT IS THE
 * POINT — the same rule facebook-preview.css states at its top, now applying to
 * three more platforms. 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, 2026-09-02: *"The preview has to look authentic to the platform it's
 * on."* A preview dressed in OUR greys, OUR radii and OUR type is a picture of
 * our app, not of Instagram, and it cannot answer the only question it exists to
 * answer: will this look right when it goes out? So the values below are each
 * platform's own:
 *   · Instagram — #dbdbdb hairlines, #262626 text, #8e8e8e secondary, square
 *     media, the 14px caption, no card radius on the media itself
 *   · LinkedIn  — #ffffff card on #f4f2ee, #666666 secondary, the 14px/1.42857
 *     message setting, 8px radius, square avatar corners softened to a circle
 *   · X         — #0f1419 text, #536471 secondary, #eff3f4 hairlines, the
 *     15px/1.3125 message setting, 16px media radius, the inline name row
 *
 * Converting these to tokens would be a regression dressed as a tidy-up.
 *
 * They ARE still ours in two respects: mobile-first, and never wider than the
 * container (the preview sits inside a .cc-expand panel that is itself
 * responsive). Each platform's own feed column is ~500px; below that the
 * component reports itself as mobile and folds much earlier.
 */

/* ── Shared: the things that are OURS to say, not the platform's ──────────
   The over-limit warning and the unknown-platform notice are our messages to
   the coach, not part of any facsimile, so these two DO get plain, neutral
   styling that reads as the app talking. */
.sp-overlimit {
  margin: 10px 0 0; padding: 10px 12px; max-width: 500px;
  border-radius: 8px; border: 1px solid #f0b4b4; background: #fdf2f2;
  color: #7a2020; font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sp-overlimit strong { font-weight: 700; }
/* The action-row icons. Stroke paths, currentColor, so each skin sets its own
   platform colour — see the `icon()` note in js/social-preview.js for why these
   are not emoji. */
.sp-icon { display: block; }

.sp-unknown {
  padding: 12px; border-radius: 8px; background: #f5f5f5; color: #666;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Broken images. The class swap is done in JS (brokenImageOnError) and lands
   on <prefix>-broken, which must READ as an explanation rather than look like
   a styled empty box — that was the bug it exists to fix. */
.igp-media-broken, .lip-media-broken, .xp-media-broken {
  padding: 12px; background: #fdf2f2; color: #7a2020;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  border-radius: 8px;
}

/* ══ INSTAGRAM ═══════════════════════════════════════════════════════════ */
.igp {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff; border: 1px solid #dbdbdb; border-radius: 8px;
  max-width: 470px; color: #262626; overflow: hidden;
}
.igp-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.igp-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  flex: 0 0 32px; background: #efefef;
}
.igp-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: #8e8e8e;
}
.igp-name { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igp-dots { color: #262626; letter-spacing: 1px; }

/* Square media is Instagram's default crop and the one a coach is picturing. */
.igp-media { position: relative; background: #efefef; aspect-ratio: 1 / 1; }
.igp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igp-media-blank { width: 100%; height: 100%; background: #262626; }
.igp-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 44px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
/* ⚠️ NOT AN ERROR STATE — A PRECONDITION. Instagram has no text-only post, so
   this is the skin saying what the platform requires, not reporting a fault.
   Neutral enough to read as information, present enough not to be missed. */
.igp-media-required {
  aspect-ratio: auto; background: #fafafa; border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb; padding: 20px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.igp-required-mark { font-size: 24px; line-height: 1; }
.igp-required-text { font-size: 13px; line-height: 1.5; color: #262626; }
.igp-actions { display: flex; gap: 14px; padding: 10px 12px 6px; color: #262626; }
.igp-act-end { margin-left: auto; }
.igp-caption {
  padding: 0 12px 4px; font-size: 14px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.igp-cap-name { font-weight: 600; }
.igp-cap-text { white-space: pre-wrap; }
.igp-ellipsis { color: #262626; }
.igp-more {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #8e8e8e; font: inherit;
}
.igp-when { padding: 2px 12px 12px; font-size: 11px; color: #8e8e8e;
  text-transform: uppercase; letter-spacing: .2px; }

/* ══ LINKEDIN ════════════════════════════════════════════════════════════ */
.lip {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff; border: 1px solid #e0dfdc; border-radius: 8px;
  max-width: 555px; color: rgba(0,0,0,.9); overflow: hidden;
}
.lip-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px 0; }
.lip-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  flex: 0 0 48px; background: #e9e5df;
}
.lip-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 19px; color: #666;
}
.lip-head-text { flex: 1 1 auto; min-width: 0; }
.lip-name { font-size: 14px; font-weight: 600; line-height: 1.4; }
.lip-headline { font-size: 12px; color: #666; line-height: 1.33; }
.lip-meta { font-size: 12px; color: #666; line-height: 1.33; }
.lip-dots { color: #666; letter-spacing: 1px; }
.lip-message {
  padding: 12px 16px; font-size: 14px; line-height: 1.42857;
  white-space: pre-wrap; word-break: break-word;
}
.lip-more {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  color: #666; font: inherit;
}
.lip-media { position: relative; background: #e9e5df; }
.lip-media img { width: 100%; display: block; }
.lip-media-blank { width: 100%; aspect-ratio: 16 / 9; background: #1d2226; }
.lip-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 44px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.lip-actions {
  display: flex; gap: 4px; padding: 4px 8px 8px; border-top: 1px solid #e0dfdc;
  margin-top: 8px;
}
/* ⚠️ `nowrap` AND `min-width:0` TOGETHER, AND THE 390px RENDER IS WHY. Without
   them "Comment" wrapped under its own icon and the row grew a second line that
   LinkedIn's never has. The label is what gives way on a narrow screen, exactly
   as it does on the real product. */
.lip-action {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #666; white-space: nowrap;
}
.lip-action span { overflow: hidden; text-overflow: ellipsis; }

/* ══ X ═══════════════════════════════════════════════════════════════════ */
.xp {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff; border: 1px solid #eff3f4; border-radius: 12px;
  max-width: 560px; color: #0f1419; padding: 12px 16px;
}
.xp-row { display: flex; gap: 12px; }
.xp-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  flex: 0 0 40px; background: #eff3f4;
}
.xp-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; color: #536471;
}
.xp-body { flex: 1 1 auto; min-width: 0; }
/* X puts name, handle and time on ONE line and truncates the name first —
   copying that is what makes a long coach name look the way it really will. */
.xp-head { display: flex; align-items: baseline; gap: 4px; font-size: 15px; }
/* ⚠️ THE NAME IS NOT THE FIRST THING TO GIVE WAY. A hard `max-width: 45%` cut
   "Alex Braganza" to "Alex Braga…" at 390px — a name that fits easily on the
   real product. X shrinks the HANDLE first and keeps the name whole for as long
   as it can, so the flex basis says that instead of a percentage. */
/* ⚠️ `flex-shrink: 0`, MEASURED. With shrink:1 the row overflowed by 14px, the
   handle absorbed 13.6 of it and the name gave up the remaining 0.6px — which is
   under a pixel and still enough to trip text-overflow and eat two characters.
   "Alex Braganza" rendered as "Alex Bragan…" for six tenths of a pixel. The name
   now never shrinks; max-width is the ceiling for a genuinely long one. */
.xp-name { font-weight: 700; flex: 0 0 auto; min-width: 0; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-handle, .xp-sep, .xp-when { color: #536471; }
/* shrink:20 — the handle absorbs almost all of it, so a 390px row loses
   "@alexbraganza" before it loses "Alex Braganza". Equal shrink took three
   characters off BOTH, which is the one outcome that looks like a bug rather
   than like the platform. */
.xp-handle { flex: 1 20 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-sep, .xp-when { flex: 0 0 auto; }
.xp-dots { margin-left: auto; color: #536471; letter-spacing: 1px; }
.xp-message {
  font-size: 15px; line-height: 1.3125; margin: 2px 0 0;
  white-space: pre-wrap; word-break: break-word;
}
.xp-media {
  position: relative; margin: 12px 0 0; border-radius: 16px; overflow: hidden;
  border: 1px solid #eff3f4; background: #eff3f4;
}
.xp-media img { width: 100%; display: block; }
.xp-media-blank { width: 100%; aspect-ratio: 16 / 9; background: #0f1419; }
.xp-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 44px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.xp-actions {
  display: flex; justify-content: space-between; max-width: 425px;
  margin: 12px 0 0; color: #536471;
}
/* Ours, not X's — the count is a compose-time aid and reads as one. */
.xp-count {
  margin: 10px 0 0; text-align: right; font-size: 12px; color: #536471;
  font-variant-numeric: tabular-nums;
}
.xp-count-over { color: #b4232a; font-weight: 700; }

@media (max-width: 500px) {
  /* ⚠️ ICONS ONLY, NOT SMALLER LABELS. At 390 the labels truncated to "Com…",
     which reads as a broken button; LinkedIn's own phone app drops the words
     and keeps the icons, so that is what the facsimile does. */
  .lip-action span { display: none; }
  .lip-action { gap: 0; }
  .xp { padding: 12px; }
}