/* =============================================================
   AllinWriter 2 — Realistic platform "preview mode" mockups.
   Renders the generated document as it would appear published on
   each platform. Loaded after app.theme.css.
   Palette: primary #7E58EB, bg #FBF9FE, fg #161726, border #E2E0E7,
   accent #EFEBFF, muted #676777, mint #65DFAF, coral #F3625D.
   ============================================================= */

.awp {
    --awp-fg: #161726;
    --awp-muted: #676777;
    --awp-border: #E2E0E7;
    --awp-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 4px;
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--awp-fg);
    -webkit-font-smoothing: antialiased;
}

.awp * { box-sizing: border-box; }

/* Hug the card so the platform badge (right:0) aligns to the mockup's right edge,
   and the whole mockup sits left-aligned under the "Preview" label. */
.awp-cardwrap { position: relative; width: 100%; }

.awp-card {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border: 1px solid var(--awp-border);
    border-radius: var(--awp-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(22, 23, 38, .28);
}

.awp-ic {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.awp-ic-sm { width: 15px; height: 15px; vertical-align: middle; }

.awp img { display: block; max-width: 100%; }

/* ---------- media helpers ---------- */
.awp-ig-media, .awp-fb-media, .awp-tw-media, .awp-li-media, .awp-em-media {
    width: 100%;
    background: #f1f0f5;
}
.awp-ig-media img, .awp-fb-media img, .awp-tw-media img, .awp-li-media img, .awp-em-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =====================================================
   INSTAGRAM
   ===================================================== */
.awp-ig-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.awp-ig-ring {
    display: inline-flex; padding: 2px; border-radius: 50%;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.awp-ig-av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.awp-ig-id { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.awp-ig-name { font-weight: 600; font-size: 14px; }
.awp-ig-loc { font-size: 11.5px; color: var(--awp-muted); }
.awp-ig-more { color: var(--awp-fg); font-size: 20px; letter-spacing: 1px; }
.awp-ig-media { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.awp-ig-media img { height: 100%; }
.awp-ig-media--empty { font-size: 46px; color: #c9c6d4; background: linear-gradient(135deg,#f6f4fb,#efeaff); }
.awp-ig-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 4px; }
.awp-ig-left { display: inline-flex; gap: 14px; }
.awp-ig-actions .awp-ic { color: #161726; }
.awp-ig-likes { padding: 2px 14px; font-weight: 600; font-size: 13.5px; }
.awp-ig-caption { padding: 3px 14px 10px; font-size: 13.5px; line-height: 1.45; }
.awp-ig-cname { font-weight: 600; margin-right: 5px; }
.awp-ig-time { padding: 4px 14px 12px; font-size: 10.5px; color: var(--awp-muted); text-transform: uppercase; letter-spacing: .3px; }

/* =====================================================
   TIKTOK (vertical 9:16 phone preview)
   ===================================================== */
.awp--tiktok .awp-card { max-width: 320px; border: none; background: transparent; box-shadow: none; }
.awp-tt-media {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 18px 48px -20px rgba(0,0,0,.55);
}
.awp-tt-media > img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.awp-tt-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,.55); background: radial-gradient(120% 90% at 50% 20%, #25252d, #000); }
.awp-tt-rail { position: absolute; right: 8px; bottom: 92px; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
.awp-tt-avwrap { position: relative; }
.awp-tt-av { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.awp-tt-plus { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 13px; font-style: normal; display: flex; align-items: center; justify-content: center; line-height: 1; }
.awp-tt-act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.awp-tt-act .awp-ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.awp-tt-info { position: absolute; left: 12px; right: 64px; bottom: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.awp-tt-user { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.awp-tt-cap { font-size: 13px; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.awp-tt-music { display: flex; align-items: center; gap: 6px; font-size: 12px; }

/* =====================================================
   FACEBOOK (post + ad)
   ===================================================== */
.awp-fb-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px 8px; }
.awp-fb-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.awp-fb-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.awp-fb-name { font-weight: 600; font-size: 14.5px; color: #050505; }
.awp-fb-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #65676b; }
.awp-fb-globe { width: 12px; height: 12px; color: #65676b; }
.awp-fb-more { color: #65676b; font-size: 20px; }
.awp-fb-text { padding: 2px 14px 20px; font-size: 14.5px; line-height: 1.5; color: #050505; white-space: pre-wrap; }
.awp-fb-media { width: 100%; }
.awp-fb-actions { display: flex; justify-content: space-around; padding: 6px 8px; border-top: 1px solid #e4e6eb; margin-top: 2px; }
.awp-fb-actions span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #65676b; padding: 6px 8px; }
.awp-fb-actions .awp-ic { width: 18px; height: 18px; }
/* facebook ad card */
.awp-fb-adcard { background: #f0f2f5; }
.awp-fb-media--ad { aspect-ratio: 1.91/1; background: #dfe3ea; }
.awp-fb-media--ad img { width: 100%; height: 100%; object-fit: cover; }
.awp-fb-media--empty { display: block; }
.awp-fb-adfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.awp-fb-adinfo { display: flex; flex-direction: column; min-width: 0; }
.awp-fb-adurl { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: #65676b; }
.awp-fb-adtitle { font-size: 15px; font-weight: 700; color: #050505; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awp-fb-cta { flex-shrink: 0; border: none; background: #e4e6eb; color: #050505; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 7px; cursor: default; }

/* =====================================================
   X / TWITTER
   ===================================================== */
.awp-tw { padding: 14px 16px; }
.awp-tw-head { display: flex; align-items: flex-start; gap: 10px; }
.awp-tw-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.awp-tw-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.awp-tw-name { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 15px; color: #0f1419; }
.awp-tw-verified { width: 16px; height: 16px; }
.awp-tw-handle { font-size: 14px; color: #536471; }
.awp-tw-logo { width: 20px; height: 20px; fill: #0f1419; }
.awp-tw-text { margin: 8px 0 4px; font-size: 15.5px; line-height: 1.5; color: #0f1419; white-space: pre-wrap; }
.awp-tw-media { border-radius: 16px; overflow: hidden; border: 1px solid var(--awp-border); margin-top: 8px; }
.awp-tw-actions { display: flex; justify-content: space-between; max-width: 360px; margin-top: 12px; color: #536471; }
.awp-tw-actions span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.awp-tw-actions .awp-ic { width: 18px; height: 18px; }

/* =====================================================
   LINKEDIN
   ===================================================== */
.awp-li-head { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px 8px; }
.awp-li-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.awp-li-id { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.awp-li-name { font-weight: 600; font-size: 14px; color: rgba(0,0,0,.9); }
.awp-li-sub { font-size: 12px; color: rgba(0,0,0,.6); }
.awp-li-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(0,0,0,.6); }
.awp-li-globe { width: 12px; height: 12px; }
.awp-li-in { width: 26px; height: 26px; background: #0a66c2; color: #fff; font-weight: 800; font-size: 13px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.awp-li-text { padding: 2px 14px 20px; font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.9); white-space: pre-wrap; }
.awp-li-actions { display: flex; justify-content: space-around; padding: 4px 8px 8px; border-top: 1px solid #e8e8e8; }
.awp-li-actions span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.6); padding: 8px; }
.awp-li-actions .awp-ic { width: 18px; height: 18px; }

/* =====================================================
   YOUTUBE
   ===================================================== */
.awp--youtube .awp-card { max-width: 420px; }
.awp-yt-thumb { position: relative; aspect-ratio: 16/9; background: #0f0f0f; }
.awp-yt-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.awp-yt-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2a2a2a,#0f0f0f); }
.awp-yt-empty svg { width: 54px; height: 54px; opacity: .5; }
.awp-yt-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
.awp-yt-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 38px; background: rgba(255,0,0,.9); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.awp-yt-play svg { width: 22px; height: 22px; }
.awp-yt-body { display: flex; gap: 12px; padding: 12px 14px 16px; }
.awp-yt-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.awp-yt-meta { flex: 1; min-width: 0; }
.awp-yt-title { font-weight: 600; font-size: 15px; line-height: 1.35; color: #0f0f0f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.awp-yt-sub { font-size: 12.5px; color: #606060; margin-top: 4px; }
.awp-yt-stats { font-size: 12.5px; color: #606060; }
.awp-yt-more { color: #606060; font-size: 18px; }

/* =====================================================
   GOOGLE AD (search result)
   ===================================================== */
.awp-ga { padding: 14px 16px; max-width: 560px; font-family: arial, sans-serif; }
.awp-ga-row { margin-bottom: 4px; }
.awp-ga-tag { font-size: 13px; font-weight: 700; color: #202124; }
.awp-ga-site { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.awp-ga-fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; border: 1px solid #e2e0e7; color: #7E58EB; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.awp-ga-siteinfo { display: flex; flex-direction: column; line-height: 1.25; }
.awp-ga-brand { font-size: 14px; color: #202124; }
.awp-ga-url { font-size: 12.5px; color: #4d5156; }
.awp-ga-headline { display: block; font-size: 20px; line-height: 1.3; color: #1a0dab; text-decoration: none; margin: 2px 0 4px; }
.awp-ga-headline:hover { text-decoration: underline; }
.awp-ga-desc { font-size: 14px; line-height: 1.5; color: #4d5156; }

/* =====================================================
   EMAIL / NEWSLETTER
   ===================================================== */
.awp-em { max-width: 560px; }
.awp-em-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #f5f4f8; border-bottom: 1px solid var(--awp-border); }
.awp-em-dot { width: 11px; height: 11px; border-radius: 50%; }
.awp-em-dot--r { background: #ff5f57; }
.awp-em-dot--y { background: #febc2e; }
.awp-em-dot--g { background: #28c840; }
.awp-em-bartitle { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--awp-muted); }
.awp-em-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.awp-em-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.awp-em-id { flex: 1; min-width: 0; }
.awp-em-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.awp-em-from { font-weight: 700; font-size: 14.5px; color: var(--awp-fg); }
.awp-em-time { font-size: 12px; color: var(--awp-muted); flex-shrink: 0; }
.awp-em-to { font-size: 12.5px; color: var(--awp-muted); }
.awp-em-star { color: #c9c6d4; font-size: 18px; }
.awp-em-subject { padding: 6px 16px 8px; font-size: 18px; font-weight: 700; color: var(--awp-fg); }
.awp-em-body { padding: 0 16px 22px; font-size: 14.5px; line-height: 1.6; color: #33343f; white-space: pre-wrap; }
.awp-em-media { padding: 0 16px 16px; }
.awp-em-media img { border-radius: 10px; }

/* =====================================================
   PUSH NOTIFICATION (iOS-style banner on wallpaper)
   ===================================================== */
.awp-push-wrap { width: 100%; max-width: 420px; margin: 0 auto; padding: 26px 18px; border-radius: var(--awp-radius); background: linear-gradient(150deg, #7E58EB 0%, #a084f0 45%, #65DFAF 120%); }
.awp--push .awp-push { max-width: 100%; }
.awp-push { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border: none; border-radius: 18px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.35); }
.awp-push-icon { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg,#7E58EB,#5a3fd0); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.awp-push-body { flex: 1; min-width: 0; }
.awp-push-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.awp-push-app { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: #3a3a44; }
.awp-push-time { font-size: 11.5px; color: #6a6a75; flex-shrink: 0; }
.awp-push-title { font-size: 14.5px; font-weight: 700; color: #161726; margin-top: 1px; }
.awp-push-text { font-size: 13.5px; line-height: 1.4; color: #33343f; margin-top: 1px; }
.awp-push-thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }

/* =====================================================
   SEO PRODUCT (e-commerce PDP)
   ===================================================== */
.awp--seo_product .awp-card { max-width: 620px; }
.awp-pr-grid { display: grid; grid-template-columns: 44% 56%; }
.awp-pr-gallery { padding: 14px; background: #faf9fc; border-right: 1px solid var(--awp-border); }
.awp-pr-main { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; background: #f1f0f5; }
.awp-pr-empty { display: flex; align-items: center; justify-content: center; font-size: 54px; color: #c9c6d4; }
.awp-pr-thumbs { display: flex; gap: 7px; margin-top: 10px; }
.awp-pr-thumbs span { flex: 1; aspect-ratio: 1/1; border-radius: 7px; background: #ece9f5; border: 1px solid var(--awp-border); }
.awp-pr-thumbs span:first-child { border-color: #7E58EB; }
.awp-pr-info { padding: 16px 18px; }
.awp-pr-brand { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; color: #7E58EB; }
.awp-pr-title { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; margin: 5px 0 8px; color: var(--awp-fg); }
.awp-pr-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.awp-pr-stars { color: #ffb400; font-size: 14px; letter-spacing: 1px; }
.awp-pr-rc { font-size: 12.5px; color: var(--awp-muted); }
.awp-pr-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.awp-pr-now { font-size: 24px; font-weight: 800; color: var(--awp-fg); }
.awp-pr-was { font-size: 14px; color: var(--awp-muted); text-decoration: line-through; }
.awp-pr-off { font-size: 12px; font-weight: 700; color: #fff; background: #F3625D; padding: 2px 7px; border-radius: 6px; }
.awp-pr-desc { font-size: 13.5px; line-height: 1.55; color: #4a4a57; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.awp-pr-buttons { display: flex; gap: 9px; margin-bottom: 12px; }
.awp-pr-cart, .awp-pr-buy { flex: 1; border: none; font-weight: 700; font-size: 13.5px; padding: 11px 10px; border-radius: 10px; cursor: default; }
.awp-pr-cart { background: #EFEBFF; color: #7E58EB; }
.awp-pr-buy { background: #7E58EB; color: #fff; }
.awp-pr-trust { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--awp-muted); }

/* =====================================================
   SEO ARTICLE (blog in browser)
   ===================================================== */
.awp--seo_article .awp-card { max-width: 640px; }
.awp-bl-browser { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #f5f4f8; border-bottom: 1px solid var(--awp-border); }
.awp-bl-addr { flex: 1; margin-left: 6px; background: #fff; border: 1px solid var(--awp-border); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--awp-muted); }
.awp-bl-article { padding: 22px 26px 26px; }
.awp-bl-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: #7E58EB; }
.awp-bl-title { font-family: 'Sora', sans-serif; font-size: 27px; font-weight: 800; line-height: 1.2; margin: 8px 0 12px; color: var(--awp-fg); }
.awp-bl-byline { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--awp-muted); margin-bottom: 16px; }
.awp-bl-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.awp-bl-dot { opacity: .6; }
.awp-bl-hero { margin: 0 0 16px; border-radius: 12px; overflow: hidden; }
.awp-bl-hero img { width: 100%; height: auto; }
.awp-bl-body { font-size: 15px; line-height: 1.7; color: #33343f; white-space: pre-wrap; }

/* =====================================================
   GENERIC DOCUMENT
   ===================================================== */
.awp--generic .awp-card { max-width: 620px; }
.awp-doc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--awp-border); background: #faf9fc; }
.awp-doc-icon svg { width: 22px; height: 22px; color: #7E58EB; }
.awp-doc-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15.5px; color: var(--awp-fg); }
.awp-doc-body { padding: 16px 18px 20px; font-size: 15px; line-height: 1.7; color: #33343f; white-space: pre-wrap; }

/* =====================================================
   Preview wrapper on /documents/{id} + generation panel
   ===================================================== */
@media (max-width: 575px) {
    .awp-pr-grid { grid-template-columns: 1fr; }
    .awp-pr-gallery { border-right: none; border-bottom: 1px solid var(--awp-border); }
    .awp-bl-title { font-size: 22px; }
    .awp-ga-headline { font-size: 18px; }
}


/* ===================== PREVIEW SHELL + PLATFORM BADGE ===================== */
.awp-preview-shell {
    position: relative;
    padding: 40px 16px 28px;
    background: transparent;
    border: 0;
}
.awp-preview-label {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A98A8;
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Badge sits on the "Preview" header row, right edge aligned to the mockup width */
.awp { position: relative; }
.awp-badge {
    position: absolute;
    top: -34px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 6px;
    background: #fff;
    border: 1px solid var(--awp-border);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(24,23,38,.10);
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    z-index: 3;
}
.awp-badge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--awp-badge-bg, #7E58EB);
    flex: 0 0 auto;
}
.awp-badge--google_ad .awp-badge-mark { background: #fff; border: 1px solid var(--awp-border); }
.awp-badge-mark svg { width: 14px; height: 14px; display: block; }
.awp-badge-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--awp-fg);
    letter-spacing: -.01em;
    padding-right: 3px;
}
.awp-badge-txt { color: #fff; font-size: 9px; font-weight: 700; }

/* Subtle floating animation (like the "AI on autopilot" hero on the website) */
@keyframes awpBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
    .awp-badge--float { animation: awpBadgeFloat 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; }
}

/* In-mockup image preloader (shown after text loads, until the image arrives) */
.awp-imgloading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    background: linear-gradient(135deg, #F6F3FE 0%, #EFEAFF 100%);
    color: #7E58EB;
}
.awp-imgloading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #E6DEF9;
    border-top-color: #7E58EB;
    border-radius: 50%;
    animation: awpSpin .9s linear infinite;
}
@keyframes awpSpin { to { transform: rotate(360deg); } }
.awp-imgloading-text { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
/* TikTok/YouTube dark video slots: keep spinner visible on dark bg */
.awp-tt-video .awp-imgloading, .awp-yt-thumb .awp-imgloading { position: absolute; inset: 0; min-height: 0; background: rgba(0,0,0,.55); color: #fff; }
.awp-tt-video .awp-imgloading-spinner, .awp-yt-thumb .awp-imgloading-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

@media (max-width: 560px) {
    .awp-badge { top: -26px; padding: 4px 9px 4px 5px; }
    .awp-badge-label { font-size: 11px; }
    .awp-badge-mark { width: 20px; height: 20px; }
}

/* =====================================================
   DOCUMENT VIEW LAYOUT — meta sidebar + borderless preview
   ===================================================== */
.awp-doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.awp-doc-side { position: sticky; top: 18px; }
.awp-side-card {
    background: #fff;
    border: 1px solid var(--awp-border);
    border-radius: 16px;
    padding: 16px 16px 6px;
}
.awp-side-tplhead { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--awp-border); }
.awp-side-tplicon { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.awp-side-tpliconbg { position: absolute; inset: 0; border-radius: 12px; opacity: .12; }
.awp-side-tplmeta { min-width: 0; }
.awp-side-tplname { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--awp-fg); }
.awp-side-tplname a { color: var(--awp-fg); }
.awp-side-item { padding: 0 0 12px; }
.awp-side-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9A98A8; margin-bottom: 2px; }
.awp-side-value { font-size: 14px; font-weight: 600; color: var(--awp-fg); word-break: break-word; }

@media (max-width: 900px) {
    .awp-doc-layout { grid-template-columns: 1fr; }
    .awp-doc-side { position: static; }
}

/* Borderless preview on page background (override old shell) */
.awp-doc-main .awp-preview-shell { padding: 34px 8px 24px; background: transparent; border: 0; }

/* =====================================================
   IMAGE ACTIONS OVERLAY (Download + AI Editor)
   ===================================================== */
.awp-media { position: relative; overflow: hidden; }
.awp-imgactions {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s cubic-bezier(0.23,1,0.32,1), transform .18s cubic-bezier(0.23,1,0.32,1);
    z-index: 4;
}
.awp-media:hover .awp-imgactions,
.awp-media:focus-within .awp-imgactions { opacity: 1; transform: translateY(0); }
.awp-imgbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: #161726;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.4);
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform .16s cubic-bezier(0.23,1,0.32,1);
}
.awp-imgbtn:hover { color: #161726; }
.awp-imgbtn:active { transform: scale(0.97); }
.awp-imgbtn svg { width: 15px; height: 15px; }
.awp-imgbtn--ai { background: #7E58EB; color: #fff; border-color: transparent; }
.awp-imgbtn--ai:hover { color: #fff; }
@media (max-width: 560px) {
    .awp-imgactions { opacity: 1; transform: none; }
    .awp-imgbtn span { display: none; }
    .awp-imgbtn { padding: 8px; }
}

/* =====================================================
   CLAMP + "…more" toggle
   ===================================================== */
.awp-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.awp-clamp--tall { -webkit-line-clamp: 9; }
.awp-clamp--open { -webkit-line-clamp: unset; display: block; overflow: visible; }
.awp-more-btn {
    display: inline-block;
    margin: 4px 0 2px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #7E58EB;
    cursor: pointer;
}
/* keep per-platform padding so the button aligns with text */
.awp-fb-text + .awp-more-btn { padding-left: 14px; margin-top: -8px; margin-bottom: 12px; }
.awp-tw-text + .awp-more-btn { padding-left: 14px; }
.awp-li-text + .awp-more-btn { padding-left: 14px; margin-top: -8px; margin-bottom: 12px; }
.awp-em-body + .awp-more-btn { padding-left: 16px; margin-top: -10px; margin-bottom: 14px; }
.awp-pr-desc + .awp-more-btn { margin-top: -6px; }
.awp-bl-body + .awp-more-btn { margin-top: 6px; }
.awp-ig-caption + .awp-more-btn { padding-left: 14px; margin-top: -4px; margin-bottom: 8px; }
.awp-push-text + .awp-more-btn { font-size: 12px; }
.awp-tt-cap + .awp-more-btn { padding-left: 0; color: #fff; }
.awp-ga-desc + .awp-more-btn { }
.awp-yt-title + .awp-more-btn { margin-top: 2px; }

/* =====================================================
   COPY TEXT BUTTON
   ===================================================== */
.awp-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--awp-border);
    color: #676777;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s ease, color .16s ease, background .16s ease;
    z-index: 5;
}
.awp-card:hover .awp-copy-btn,
.awp-tt-video:hover .awp-copy-btn,
[data-awp-copy]:hover ~ .awp-copy-btn { opacity: 1; }
@media (hover: none) { .awp-copy-btn { opacity: 1; } }
.awp-copy-btn:hover { color: #7E58EB; background: #fff; }
.awp-copy-btn svg { width: 15px; height: 15px; }
.awp-copy-btn.awp-copy-ok { color: #17a673; border-color: #65DFAF; }

/* =====================================================
   TIKTOK
   ===================================================== */
.awp--tiktok .awp-card { max-width: 320px; background: #000; border: 0; }
.awp-tt-video { position: relative; aspect-ratio: 9/16; background: #000; }
.awp-tt-video > img { width: 100%; height: 100%; object-fit: cover; }
.awp-tt-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; background: linear-gradient(160deg,#25252b,#000); }
.awp-tt-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.awp-tt-bottom { flex: 1; min-width: 0; padding-right: 10px; color: #fff; pointer-events: auto; }
.awp-tt-user { font-weight: 800; font-size: 15px; margin-bottom: 5px; }
.awp-tt-cap { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.awp-tt-music { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.awp-tt-music svg { width: 15px; height: 15px; }
.awp-tt-rail { display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: auto; }
.awp-tt-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; }
.awp-tt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.awp-tt-act { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 12px; font-weight: 600; }
.awp-tt-act svg { width: 30px; height: 30px; }
.awp--tiktok .awp-tt-video .awp-imgactions { top: 10px; bottom: auto; right: 10px; }

/* =====================================================
   GOOGLE DISPLAY (IMAGE) AD
   ===================================================== */
.awp-gd { max-width: 360px; margin-top: 16px; padding: 0; font-family: arial, sans-serif; }
.awp-gd-media { aspect-ratio: 1.91/1; background: #f1f0f5; }
.awp-gd-media img { width: 100%; height: 100%; object-fit: cover; }
.awp-gd-body { padding: 12px 14px 14px; }
.awp-gd-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.awp-gd-fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; color: #7E58EB; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.awp-gd-info { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.awp-gd-brand { font-size: 13.5px; font-weight: 600; color: #202124; }
.awp-gd-tag { font-size: 12px; color: #5f6368; }
.awp-gd-adchip { font-size: 11px; font-weight: 700; color: #5f6368; border: 1px solid #dadce0; border-radius: 5px; padding: 1px 6px; }
.awp-gd-headline { font-size: 15px; font-weight: 700; line-height: 1.3; color: #202124; margin-bottom: 10px; }
.awp-gd-cta { border: 0; background: #1a73e8; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 8px; cursor: default; }

/* When both Google ads render, stack them centered */
.awp--google_ad { flex-direction: column; align-items: center; }

#ai-results{ display: none !important; }