/* QBP v25.12.0 — Unified responsive Instagram presentation shell.
 * Layout-only layer. Deliberately does NOT style or reposition any icon class.
 * The existing in-content icon implementation from v25.11.9 remains intact.
 */
html,body{max-width:100%;}
body.qbp-social-shell{width:100%;max-width:none!important;overflow-x:hidden!important;}
body.qbp-social-shell #page,
body.qbp-social-shell #content,
body.qbp-social-shell .site-content,
body.qbp-social-shell .content-area,
body.qbp-social-shell .site-main,
body.qbp-social-shell .entry-content,
body.qbp-social-shell .qbp-page-content,
body.qbp-social-shell .qbp-social-page{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;}
body.qbp-social-shell .entry-content{padding-left:0!important;padding-right:0!important;}

/* HOME / POST — full-width responsive media surface. */
body.qbp-social-shell .qbp-home-feed,
body.qbp-social-shell .qbp-home-feed.qbp-feed-fullwidth{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:0!important;padding-right:0!important;}
body.qbp-social-shell .qbp-home-feed__posts,
body.qbp-social-shell .qbp-ig-post{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;}
body.qbp-social-shell .qbp-ig-post{border-left:0!important;border-right:0!important;border-radius:0!important;overflow:visible!important;}
body.qbp-social-shell .qbp-ig-post__media{width:100%!important;max-width:none!important;margin:0!important;overflow:hidden!important;background:#000!important;}
body.qbp-social-shell .qbp-ig-single-media{display:flex!important;align-items:center!important;justify-content:center!important;}
body.qbp-social-shell .qbp-ig-single-media > img.qbp-ig-media,
body.qbp-social-shell .qbp-ig-single-media > video.qbp-ig-media{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0 auto!important;}
body.qbp-social-shell .qbp-ig-single-media > video.qbp-ig-media{object-fit:contain!important;}
body.qbp-social-shell .qbp-ig-carousel{width:100%!important;}
body.qbp-social-shell .qbp-ig-carousel__track{width:100%!important;max-width:none!important;}
body.qbp-social-shell .qbp-ig-carousel__slide{flex:0 0 100%!important;width:100%!important;min-width:100%!important;}
body.qbp-social-shell .qbp-ig-carousel__slide img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;object-fit:contain!important;}
body.qbp-social-shell .qbp-ig-post__head,
body.qbp-social-shell .qbp-ig-post__meta{width:100%!important;max-width:none!important;}

/* Do not let a theme/content column clip a full-bleed QBP surface. */
body.qbp-social-shell #content,
body.qbp-social-shell .site-content,
body.qbp-social-shell .content-area,
body.qbp-social-shell .site-main,
body.qbp-social-shell .entry-content{overflow:visible!important;}
body.qbp-social-shell .qbp-home-feed.qbp-feed-clipped{position:relative!important;left:auto!important;right:auto!important;transform:none!important;}

/* REELS — full viewport presentation with preserved 9:16 media, matching the
 * Instagram desktop/mobile viewing model: the surface is full-width, while
 * portrait video keeps its native aspect ratio inside the black viewport.
 */
body.qbp-social-shell .qbp-reels,
body.qbp-social-shell .qbp-reels-feed,
body.qbp-social-shell .qbp-reels-single{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;}
body.qbp-social-shell .qbp-reels__stream{width:100%!important;max-width:none!important;gap:0!important;}
body.qbp-social-shell .qbp-reel{width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;min-height:0!important;aspect-ratio:auto!important;height:calc(100dvh - var(--qbp-social-chrome-height, 0px))!important;max-height:none!important;}
body.qbp-social-shell .qbp-reel__video{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;}
body.qbp-social-shell .qbp-reels-single .qbp-reel{height:calc(100dvh - var(--qbp-social-chrome-height, 0px))!important;max-height:none!important;}
body.qbp-reels-mode .qbp-reels,
body.qbp-reels-mode .qbp-reels-feed,
body.qbp-reels-mode .qbp-reels-single{width:100vw!important;max-width:none!important;margin:0!important;}
body.qbp-reels-mode .qbp-reels__stream{width:100vw!important;}
body.qbp-reels-mode .qbp-reel{height:100dvh!important;min-height:0!important;max-height:none!important;border-radius:0!important;}
body.qbp-reels-mode .qbp-reel__video{height:100%!important;width:100%!important;object-fit:contain!important;}

/* STORIES — the viewer is always the viewport. The media remains aspect-safe
 * instead of being stretched, on both desktop and mobile.
 */
body.qbp-social-shell .qbp-story-screen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;}
body.qbp-social-shell .qbp-story-stage{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;}
body.qbp-social-shell .qbp-story-slide{width:100%!important;height:100%!important;}
body.qbp-social-shell .qbp-story-slide__media{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;}

/* CREATION — one responsive studio on every device, no separate desktop
 * fixed-width shell. The inner form may stay readable, but the studio itself
 * always occupies the full viewport.
 */
body.qbp-social-shell .qbp-unified-studio,
.qbp-unified-studio{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;}
.qbp-unified-studio .qbp-creator{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;transform:none!important;border-radius:0!important;}
.qbp-unified-studio .qbp-creator__main,
.qbp-unified-studio .qbp-creator__composer{min-width:0!important;width:100%!important;}
.qbp-unified-studio .qbp-unified-form-panel>form,
.qbp-unified-studio .qbp-unified-form-panel .qbp-ig-composer,
.qbp-unified-studio .qbp-unified-form-panel .qbp-story-form,
.qbp-unified-studio .qbp-unified-form-panel .qbp-reel-form,
.qbp-unified-studio .qbp-unified-form-panel .qbp-module-form{width:100%!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important;}

/* Touch-safe sizing and safe-area handling. */
.qbp-social-shell .qbp-home-feed{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;}
.qbp-social-shell .qbp-ig-post__head{min-height:56px;}
.qbp-social-shell .qbp-ig-post__meta{padding-bottom:calc(18px + env(safe-area-inset-bottom));}

@media(min-width:768px){
  body.qbp-social-shell .qbp-home-feed__stories{padding-left:24px!important;padding-right:24px!important;}
  body.qbp-social-shell .qbp-ig-post__head{padding-left:40px!important;padding-right:40px!important;}
  body.qbp-social-shell .qbp-ig-post__meta{padding-left:40px!important;padding-right:40px!important;}
}
@media(max-width:767px){
  body.qbp-social-shell .qbp-home-feed__stories{padding-left:12px!important;padding-right:12px!important;}
  body.qbp-social-shell .qbp-ig-post__head{padding-left:12px!important;padding-right:12px!important;}
  body.qbp-social-shell .qbp-ig-post__meta{padding-left:12px!important;padding-right:12px!important;}
  .qbp-unified-studio .qbp-creator__main{padding-bottom:env(safe-area-inset-bottom);}
}

@media(prefers-reduced-motion:reduce){
  .qbp-reels__stream{scroll-behavior:auto!important;}
}
