/* ════════════════════════════════════════════════════
   DESKTOP FRAMING
   The OnlyClips UI is mobile-first (430px max-width). On a desktop
   browser, this leaves a narrow centered column with awkward dark
   space around it. These rules only kick in above 768px wide and:
   1. Add a soft ambient backdrop instead of dead black space
   2. Frame the content area as a clean phone-style column
   3. Tighten focus on the actual app content
   Mobile views (under 768px) are unaffected.
   ════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(ellipse 800px 600px at 50% 20%, rgba(0,80,180,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 700px 500px at 50% 90%, rgba(0,120,200,0.10) 0%, transparent 60%),
      #03060d !important;
  }
  /* Soft column highlight behind the 430px content track */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    box-shadow:
      0 0 0 1px rgba(0,170,255,0.10),
      0 0 80px rgba(0,170,255,0.10),
      0 30px 80px rgba(0,0,0,0.6);
    background: linear-gradient(180deg, rgba(6,6,14,0.55) 0%, rgba(6,6,14,0.25) 100%);
  }
  /* Make sure the content sits above the framing backdrop */
  body > * { position: relative; z-index: 1; }

  /* Logo bar + bottom nav already use max-width:430px — looks fine.
     Pages with full-width content blocks should be constrained too. */
  .feed, .scroll, .clip-bg, .clip-overlay-top, .clip-overlay-bottom,
  .reactions-layer, .clip-progress, .clip-bottom {
    max-width: 430px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }

  /* Reduce wasted whitespace on the splash screens */
  .screen { max-width: 430px; left: 50% !important; right: auto !important; transform: translateX(-50%); }
}