/* Shared preview device frames. Pure CSS — no image assets. */
.pf-frame { position: relative; background: #fff; box-sizing: border-box; }
.pf-screen { position: relative; overflow: hidden; background: #fff; }
.pf-screen > iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---- Browser ---- */
.pf-browser { border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.10); overflow: hidden; width: 100%; height: 100%; display: flex; flex-direction: column; }
.pf-browser .pf-bar { flex: 0 0 auto; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.pf-browser .pf-dots { width: 52px; height: 12px; background:
  radial-gradient(circle 6px at 6px 6px, #ff5f57 98%, transparent) 0 0/100% no-repeat,
  radial-gradient(circle 6px at 26px 6px, #febc2e 98%, transparent) 0 0/100% no-repeat,
  radial-gradient(circle 6px at 46px 6px, #28c840 98%, transparent) 0 0/100% no-repeat; }
.pf-browser .pf-addr { flex: 1; height: 24px; line-height: 24px; padding: 0 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 12px; color: #6b7280; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 360px; }
.pf-browser .pf-screen { flex: 1 1 auto; min-height: 0; }
/* Per-viewport width for the browser frame (responsive testing). Desktop fills
   the pane; tablet/mobile constrain + center. Height still flexes to the pane. */
.pf-browser.pf-vp-tablet { max-width: 834px; margin: 0 auto; }
.pf-browser.pf-vp-mobile { max-width: 414px; margin: 0 auto; }

/* ---- Phone / tablet ---- */
.pf-phone, .pf-tablet { background: #111; box-shadow: 0 10px 34px rgba(0,0,0,.28); margin: 0 auto; display: flex; flex-direction: column; }
.pf-phone { width: 393px; height: 820px; border-radius: 46px; padding: 12px; }
.pf-tablet { width: 700px; height: 940px; border-radius: 26px; padding: 14px; }
.pf-phone .pf-screen, .pf-tablet .pf-screen { flex: 1 1 auto; border-radius: 34px; background: #fff; }
.pf-tablet .pf-screen { border-radius: 16px; }
.pf-phone .pf-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #111; border-radius: 0 0 16px 16px; z-index: 2; }
.pf-tablet .pf-notch { display: none; }
.pf-statusbar { position: absolute; top: 18px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 34px; font-size: 12px; font-weight: 600; color: #111; z-index: 3; pointer-events: none; }
.pf-tablet .pf-statusbar { display: none; }
.pf-statusbar .pf-batt { width: 22px; height: 11px; border: 1px solid #111; border-radius: 3px; position: relative; }
.pf-statusbar .pf-batt::after { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 70%; background: #111; border-radius: 1px; }
.pf-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 120px; height: 5px; background: rgba(255,255,255,.9); border-radius: 3px; }
.pf-tablet .pf-home { display: none; }

/* ---- Desktop window ---- */
.pf-desktop { width: 1280px; height: 800px; border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.22); overflow: hidden; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid #d1d5db; }
.pf-desktop .pf-titlebar { flex: 0 0 auto; height: 34px; display: flex; align-items: center; padding: 0 12px; background: linear-gradient(#fbfbfd,#f1f1f4); border-bottom: 1px solid #e5e7eb; position: relative; }
.pf-desktop .pf-traffic { width: 52px; height: 12px; background:
  radial-gradient(circle 6px at 6px 6px, #ff5f57 98%, transparent) 0 0/100% no-repeat,
  radial-gradient(circle 6px at 26px 6px, #febc2e 98%, transparent) 0 0/100% no-repeat,
  radial-gradient(circle 6px at 46px 6px, #28c840 98%, transparent) 0 0/100% no-repeat; }
.pf-desktop .pf-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; color: #6b7280; pointer-events: none; }
.pf-desktop .pf-screen { flex: 1 1 auto; min-height: 0; }

/* ---- Extension ---- */
.pf-extension { width: 460px; margin: 0 auto; }
.pf-extension .pf-exttoolbar { height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px 10px 0 0; }
.pf-extension .pf-extaddr { flex: 1; height: 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; }
.pf-extension .pf-exticon { color: #4b5563; background: #e5e7eb; border-radius: 8px; padding: 4px; }
.pf-extension .pf-popup { position: relative; width: 380px; margin: 8px 0 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); overflow: hidden; }
.pf-extension .pf-caret { position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb; transform: rotate(45deg); }
.pf-extension .pf-screen { height: 560px; }

/* ---- scale-to-fit wrapper (JS sets --pf-scale) ---- */
.pf-fit { transform: scale(var(--pf-scale, 1)); transform-origin: top center; }

/* ---- Gated viewport toggle buttons (both surfaces) ---- */
.pf-vp { background: transparent; border: 0; padding: 5px; border-radius: 8px; color: #6b7280; cursor: pointer; display: inline-flex; line-height: 0; }
.pf-vp:hover { background: #f3f4f6; color: #111827; }
.pf-vp.active { background: #eef2ff; color: #1a73e8; }
.pf-vp .material-symbols-outlined { font-size: 18px; }

/* ---- Preview-notes chip ---- */
.pf-notes { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; cursor: help; }
.pf-notes .material-symbols-outlined { font-size: 16px; }
.pf-notes-pop { max-width: 320px; font-size: 12px; line-height: 1.5; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 10px 12px; }