/* Mockup family — shared root (Chat Mockup + Social Post Mockups). Loaded on the page AND inlined into the PNG export, together with
   mockup-chat.css / mockup-post.css (mockup-common.js inlines every /styles/tools/*.css link on the page).
   Designed by Kapil Pidhwani: one file instead of two ≤120-line one-offs because the export must embed exactly what the preview uses.
   No filters / backdrop-filter / external URLs here — they break foreignObject rasterisation. Platform looks = CSS variables.
   Editor-form rules (.mk-form, .mk-msg-row …) live in main.css: page-only, shared by both tools. */

/* ── mockup root ── */
.mk { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; font-size: 15px; line-height: 1.3; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); min-height: 420px; position: relative; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk.framed { border-radius: 38px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); }
.mk-credit { font-size: 10px; color: var(--meta); opacity: 0.75; text-align: right; padding: 4px 14px 6px; background: var(--bg); }
.mk-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; letter-spacing: 0.02em; }
.mk-link { color: var(--link); }
.mk-ph { opacity: 0.45; }