/* Viewer chrome for phone mockups: TikTok For You, Instagram Reels, YouTube Shorts.
   Layout only, drawn with generic icons. Every size is in cqw, so the overlay
   scales with whatever phone it sits in. The host must be position: relative. */

.pui {
  position: absolute; inset: 0; z-index: 15;
  container-type: inline-size;
  pointer-events: none; user-select: none;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.25; text-align: left; letter-spacing: 0;
  overflow: hidden; border-radius: inherit;
}
.pui iconify-icon { display: block; }

/* Scrims keep the chrome readable over any footage */
.pui::before, .pui::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.pui::before { top: 0; height: 22%; background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent); }
.pui::after { bottom: 0; height: 42%; background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent); }
.pui > * { position: absolute; z-index: 1; }

/* ── Top bar ── */
.pui-top { top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 9cqw 4.5cqw 0; font-size: 4.3cqw; font-weight: 600; }
.pui-top iconify-icon { font-size: 6.2cqw; }
.pui-tabs { display: flex; gap: 4.2cqw; color: rgba(255,255,255,0.62); }
.pui-tabs b { color: #fff; font-weight: 700; position: relative; }
.pui-tabs b::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -1.6cqw; height: 0.8cqw; border-radius: 1cqw; background: #fff; }
.pui-title { font-size: 5.6cqw; font-weight: 700; letter-spacing: -0.02em; }
.pui-top-icons { display: flex; gap: 4.5cqw; }

/* ── Right action rail ── */
.pui-rail { right: 2.6cqw; display: flex; flex-direction: column; align-items: center; gap: 4.4cqw; }
.pui-act { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; font-size: 2.9cqw; font-weight: 600; text-shadow: 0 0.3cqw 1cqw rgba(0,0,0,0.5); }
.pui-act i { font-style: normal; }
.pui-act iconify-icon { font-size: 8.4cqw; filter: drop-shadow(0 0.3cqw 1cqw rgba(0,0,0,0.45)); }
.pui-ava { width: 11cqw; height: 11cqw; border-radius: 50%; border: 0.6cqw solid #fff; background: #0A0A0B url('logo.svg?v=2') center / cover; position: relative; flex-shrink: 0; }
.pui-ava.sq { border-radius: 2.2cqw; width: 8cqw; height: 8cqw; }
.pui-ava.sm { width: 8.2cqw; height: 8.2cqw; border-width: 0.4cqw; }
.pui-plus::after { content: '+'; position: absolute; left: 50%; bottom: -2.6cqw; width: 5cqw; height: 5cqw; margin-left: -2.5cqw; border-radius: 50%; background: #FE2C55; color: #fff; font-size: 4cqw; font-weight: 700; line-height: 5cqw; text-align: center; }
.pui-disc { width: 10cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(circle, #0A0A0B 0 28%, #2A2A30 30% 100%); border: 1.6cqw solid #1A1A1E; animation: pui-spin 6s linear infinite; }
@keyframes pui-spin { to { transform: rotate(360deg); } }

/* ── Creator, caption, sound ── */
.pui-meta { left: 4cqw; right: 20cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 3.5cqw; text-shadow: 0 0.3cqw 1cqw rgba(0,0,0,0.55); }
.pui-who { display: flex; align-items: center; gap: 2.2cqw; font-weight: 700; font-size: 3.8cqw; }
.pui-meta p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255,255,255,0.95); }
.pui-sound { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; white-space: nowrap; overflow: hidden; }
.pui-sound iconify-icon { font-size: 3.8cqw; flex-shrink: 0; }
.pui-follow { border: 0.4cqw solid rgba(255,255,255,0.9); border-radius: 2cqw; padding: 0.8cqw 2.6cqw; font-size: 3.1cqw; font-weight: 600; }
.pui-sub { background: #fff; color: #0F0F0F; border-radius: 99cqw; padding: 1.2cqw 3.4cqw; font-size: 3.1cqw; font-weight: 600; text-shadow: none; }
.pui-pill { align-self: flex-start; display: flex; align-items: center; gap: 1.4cqw; max-width: 100%; background: rgba(255,255,255,0.16); border-radius: 99cqw; padding: 1.1cqw 2.8cqw; font-size: 3cqw; white-space: nowrap; overflow: hidden; }
.pui-pill iconify-icon { font-size: 3.6cqw; flex-shrink: 0; }

/* ── Bottom navigation ── */
.pui-nav { left: 0; right: 0; bottom: 0; height: 15cqw; display: flex; align-items: flex-start; justify-content: space-around; padding: 2.2cqw 1cqw 0; background: #000; font-size: 2.6cqw; color: rgba(255,255,255,0.7); }
.pui-nav span { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; min-width: 14cqw; }
.pui-nav iconify-icon { font-size: 6.4cqw; }
.pui-nav .on { color: #fff; }
.pui-create { width: 11.5cqw; height: 7.4cqw; margin-top: 0.4cqw; border-radius: 2.4cqw; background: #fff; color: #000; font-size: 6cqw; font-weight: 600; line-height: 7.2cqw; text-align: center; box-shadow: -1.3cqw 0 0 #25F4EE, 1.3cqw 0 0 #FE2C55; }
.pui-progress { left: 0; right: 0; height: 0.7cqw; background: rgba(255,255,255,0.25); }
.pui-progress::after { content: ''; display: block; width: 38%; height: 100%; background: #fff; }

/* ── Per-platform positions ── */
.pui-tiktok .pui-rail { bottom: 19cqw; }
.pui-tiktok .pui-meta { bottom: 19cqw; }
.pui-tiktok .pui-progress { bottom: 15cqw; }

.pui-reels .pui-rail { bottom: 20cqw; gap: 5cqw; }
.pui-reels .pui-meta { bottom: 19cqw; }
.pui-reels .pui-nav { height: 14cqw; padding-top: 3.2cqw; border-top: 0.2cqw solid rgba(255,255,255,0.12); }
.pui-reels .pui-nav iconify-icon { font-size: 7cqw; }

.pui-shorts .pui-rail { bottom: 20cqw; gap: 4.8cqw; }
.pui-shorts .pui-meta { bottom: 20cqw; }
.pui-shorts .pui-nav { background: #0F0F0F; }
.pui-shorts .pui-progress { bottom: 15cqw; background: rgba(255,255,255,0.2); }
.pui-shorts .pui-progress::after { background: #FF0033; }
.pui-shorts .pui-create { box-shadow: none; background: rgba(255,255,255,0.12); color: #fff; border-radius: 50%; width: 9cqw; height: 9cqw; line-height: 8.6cqw; margin-top: 0; }

/* ── Platform switcher shown next to a phone ── */
.pui-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.pui-switch button { padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: #A1A1AA; font: 500 0.78rem 'Inter', system-ui, sans-serif; cursor: pointer; transition: background 0.15s, color 0.15s; }
.pui-switch button:hover { color: #FAFAFA; }
.pui-switch button[aria-pressed="true"] { background: #FAFAFA; color: #0A0A0B; }

@media (prefers-reduced-motion: reduce) { .pui-disc { animation: none; } }