/* RonanRx Hub — iMessage link-preview mockup
   Renders a real 1200x630 link-preview card (loaded in a scaled, same-origin
   iframe) inside a mock iPhone iMessage thread, so you can see what the texted
   link actually looks like to a patient. Consumes tokens from ronanrx.css.

   The card is shown at the size iMessage uses for a rich link preview: a
   full-bleed og:image (1200:630) with a title/domain footer below it. */

:root{
  --ios-blue:#0a84ff;
  --ios-gray-bubble:#e9e9eb;
  --ios-screen:#ffffff;
  --ios-meta:#f2f2f5;
  --ios-hair:rgba(0,0,0,.08);
  --ios-text:#1c1c1e;
  --ios-muted:#8a8a8e;
  --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  /* link-preview card geometry: --lp-scale is the single source of truth;
     width (1200) and height (630) are derived so they can never drift apart. */
  --lp-scale:0.21;                        /* card display / 1200 */
  --lp-w:calc(1200px * var(--lp-scale));  /* og:image displayed width = 252px */
  --lp-h:calc(630px  * var(--lp-scale));  /* og:image displayed height = 132.3px */
}

.preview-stage{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 16px 56px;
}
.preview-caption{
  text-align:center;color:var(--text-muted);font-family:var(--font-sans);
  font-size:.9375rem;max-width:46ch;margin:0;
}
.preview-caption a{font-weight:600}

/* ---------- iPhone shell ---------- */
.iphone{
  position:relative;width:340px;height:710px;flex:none;
  background:#0b0b0d;border-radius:54px;
  padding:13px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.10) inset,
    0 0 0 2px #2a2a2e,
    0 38px 80px -30px rgba(12,47,16,.45),
    0 16px 40px -24px rgba(0,0,0,.5);
}
.iphone__screen{
  position:relative;width:100%;height:100%;
  background:var(--ios-screen);border-radius:42px;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:var(--ios-font);
}

/* ---------- status bar + dynamic island ---------- */
.ios-statusbar{
  position:relative;flex:none;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;color:#000;
}
.ios-statusbar .clock{font-size:15px;font-weight:600;letter-spacing:.01em}
.ios-statusbar .stat-icons{display:flex;align-items:center;gap:6px}
.ios-statusbar .stat-icons svg{display:block}
.ios-island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:108px;height:30px;border-radius:16px;background:#000;
}

/* ---------- iMessage conversation header ---------- */
.imsg-header{
  position:relative;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:4px 0 12px;border-bottom:.5px solid var(--ios-hair);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(8px);
}
.imsg-header .back{
  position:absolute;left:14px;top:6px;color:var(--ios-blue);
  display:flex;align-items:center;font-size:26px;line-height:1;font-weight:300;
}
.imsg-header .facetime{position:absolute;right:16px;top:10px;color:var(--ios-blue)}
.imsg-avatar{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(180deg,#15491f,#0c2f10);
  display:flex;align-items:center;justify-content:center;
  color:#f3efe4;font-weight:700;font-size:20px;font-family:var(--font-mono);
  letter-spacing:.02em;box-shadow:0 2px 6px rgba(12,47,16,.3)}
.imsg-name{
  display:flex;align-items:center;gap:3px;
  font-size:12px;font-weight:500;color:#1c1c1e}
.imsg-name svg{opacity:.4}

/* ---------- thread ---------- */
.imsg-thread{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:14px 16px;background:var(--ios-screen)}
.imsg-day{align-self:center;margin:2px 0 6px;font-size:11px;color:var(--ios-muted)}
.imsg-day b{color:#6c6c70;font-weight:600}

.imsg-bubble{
  max-width:236px;padding:8px 13px;border-radius:18px;
  font-size:15px;line-height:1.32;letter-spacing:-.01em}
.imsg-bubble.recv{background:var(--ios-gray-bubble);color:#000;
  border-bottom-left-radius:6px}

/* ---------- the rich link-preview bubble ---------- */
.lp-card{
  position:relative;align-self:flex-start;width:var(--lp-w);
  border-radius:17px;overflow:hidden;background:var(--ios-meta);
  border:.5px solid var(--ios-hair);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  color:inherit;display:block}
/* clickable overlay — kept as a sibling of the iframe (interactive content is
   not valid inside an <a>), covering the whole card */
.lp-card__link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.lp-card__img{
  display:block;position:relative;width:var(--lp-w);height:var(--lp-h);overflow:hidden;
  background:#efe9da}
.lp-card__frame{
  width:1200px;height:630px;border:0;display:block;
  transform:scale(var(--lp-scale));transform-origin:top left;
  pointer-events:none}
.lp-card__meta{display:block;padding:7px 12px 8px;background:var(--ios-meta);line-height:1.25}
.lp-card__title{
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ios-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-card__domain{display:block;margin-top:1px;font-size:11.5px;color:var(--ios-muted)}

/* ---------- input bar + home indicator ---------- */
.imsg-input{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:8px 12px 6px;border-top:.5px solid var(--ios-hair);
  background:rgba(255,255,255,.92)}
.imsg-input .plus{
  width:30px;height:30px;flex:none;border-radius:50%;background:#e6e6e9;
  color:#8a8a8e;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:300;line-height:1}
.imsg-input .field{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  height:32px;padding:0 6px 0 13px;border-radius:16px;
  border:1px solid #d1d1d6;color:#a8a8ad;font-size:14px}
.imsg-input .send{
  width:24px;height:24px;border-radius:50%;background:#d1d1d6;
  display:flex;align-items:center;justify-content:center;color:#fff}
.ios-home{
  flex:none;height:22px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8px;background:#fff}
.ios-home::after{content:"";width:134px;height:5px;border-radius:3px;background:#000}

@media (max-width:480px){
  .iphone{width:300px;height:626px;border-radius:46px;padding:11px}
  .iphone__screen{border-radius:36px}
}