/* Shared viewport surface. Each page keeps its own scrolling and safe-area controls. */
html[data-syoper-viewport="edge"]{height:100%;min-height:100%}
html[data-syoper-viewport="edge"]>body{box-sizing:border-box;min-height:100%;min-height:100dvh}
/* Keep the existing auth-header safe-area padding inside an expanded header. */
html[data-syoper-viewport="edge"] .auth-header{height:calc(76px + env(safe-area-inset-top,0px))}
/* The public seller landing has no separate safe-area header/footer. */
html[data-syoper-page="/seller-center"]>body{padding-top:max(22px,env(safe-area-inset-top,0px));padding-right:max(22px,env(safe-area-inset-right,0px));padding-bottom:max(22px,env(safe-area-inset-bottom,0px));padding-left:max(22px,env(safe-area-inset-left,0px))}

/* Profile is the reference: document flow, a percentage minimum height and
   native safe-area padding. The existing shared dock keeps its normal bottom
   anchor; no large-viewport offsets, extra strips or screen-height guesses. */
html[data-syoper-viewport="edge"]>body:has(>nav.app-tabs):not(.profile-v2){min-height:100%;overflow-x:clip}
html[data-syoper-viewport="edge"]:not(.syoper-tab-away)>body[data-surface="discovery"]{overflow-y:visible}
html[data-syoper-viewport="edge"]{
 --syoper-edge-native-bottom:env(safe-area-inset-bottom,0px);
 --syoper-dock-bottom:max(env(safe-area-inset-bottom,0px),var(--syoper-shell-safe-bottom,0px));
}
html[data-syoper-viewport="edge"] body nav.app-tabs[data-syoper-navigation="star"]{
 position:fixed;box-sizing:border-box;top:auto;bottom:0;min-height:0;max-height:none;
 height:calc(69px + var(--syoper-dock-bottom));
 padding-bottom:calc(6px + var(--syoper-dock-bottom));
}
html[data-syoper-viewport="edge"] #syoper-tab-frame{height:100%}

/* Only the two short documents that still collapse on installed iOS. Profile
   and Shop already have the correct frame and are deliberately excluded.
   Size the document itself, not a dock positioned outside its paintable view. */
@media(display-mode:standalone){
 @supports(-webkit-touch-callout:none){
  html[data-syoper-page="/discover"],
  html[data-syoper-page="/inbox"]:has(body.social-inbox .inbox-category){height:auto;min-height:100vh}
  html[data-syoper-viewport="edge"][data-syoper-page="/discover"]>body[data-surface="discovery"]:has(>nav.app-tabs),
  html[data-syoper-viewport="edge"][data-syoper-page="/inbox"]>body.social-inbox:has(.inbox-category){min-height:100vh}
  html[data-syoper-page="/discover"] .discovery-device{height:calc(100vh - 75px - var(--syoper-dock-bottom))}
 }
}

/* Reserve the complete tools row after iPhone safe-area padding. The legacy
   creator.css height:44px otherwise lets icons overflow into the summary. */
body.profile-v2 .profile-tools{height:auto}
body.profile-v2 .profile-summary{padding-top:8px}

/* Keep the full camera frame. The visual viewport positions the comment
   controls above the keyboard without resizing or moving the video. */
html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room:not([hidden]){
 top:0;bottom:0;height:auto;min-height:100dvh;
}
html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room.live-keyboard:not([hidden]){
 top:0;bottom:auto;height:var(--room-frame-height,100lvh);min-height:0;
}

html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room.live-keyboard .live-interaction-zone{
 bottom:max(0px,calc(var(--room-frame-height,100lvh) - var(--room-height,100dvh) - var(--room-top,0px)));
}
#live-room.live-keyboard #live-chat{background:#22232b66}

/* Installed iOS can report a short dynamic viewport while the full display
   remains paintable. Extend the camera canvas using the large viewport, but
   keep controls in the dynamic viewport. Keyboard sizing remains separate. */
@supports(height:100lvh){
 @media(display-mode:standalone),(display-mode:fullscreen){
  @supports(-webkit-touch-callout:none){
   /* The physical iPhone report has a 932px room inside an 873px document.
      Size the document as well as the fixed overlay, matching the full-height
      document approach used by the accepted profile frame. */
   html[data-syoper-viewport="edge"]:has(>body.live-watching[data-surface="creator-live"]){
    height:auto;min-height:100lvh;
   }
   html[data-syoper-viewport="edge"]>body.live-watching[data-surface="creator-live"]{
    height:auto;min-height:100lvh;overflow:visible;
   }
   html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room:not([hidden]):not(.live-keyboard){
    bottom:auto;height:100lvh;min-height:100lvh;
    --live-camera-paint-tail:max(0px,calc(100lvh - 100dvh));
   }
   html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room:not([hidden]):not(.live-keyboard) .live-interaction-zone{
    bottom:var(--live-camera-paint-tail,0px);
   }
  }
 }
}

/* On-air controls only: leave the camera, profile and comment layout intact. */
#live-room.live-controls-v2 .live-room-header{gap:6px}
#live-room.live-controls-v2 .live-badge{
 position:static;inset:auto;transform:none;align-self:center;margin:0;
 display:inline-flex;align-items:center;justify-content:center;gap:5px;
 flex:0 0 auto;min-height:28px;padding:5px 8px;border:1px solid #ff86b666;
 border-radius:12px;background:#ff0063;color:#fff;font-size:11px;font-weight:800;
 box-shadow:0 3px 16px #ff00634d;white-space:nowrap;
}
#live-room.live-controls-v2[data-connection="live"] .live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
#live-room.live-controls-v2 #viewer-count{
 display:inline-flex;justify-content:center;gap:5px;min-height:34px;padding:6px 9px;
 border:1px solid #ffffff26;border-radius:16px;background:#191a20a6;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;
}
#live-room.live-controls-v2 #leave-room{
 position:relative;display:grid;place-items:center;width:44px;min-width:44px;height:44px;
 padding:0;border:0;border-radius:50%;background:none;color:#fff;isolation:isolate;
}
#live-room.live-controls-v2 #leave-room::before{
 content:"";position:absolute;inset:2px;z-index:-1;border:1px solid #ffffff30;
 border-radius:50%;background:#191a209e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#live-room.live-controls-v2 #leave-room svg{width:26px;height:26px}
#live-room.live-controls-v2 #manage-live-products,
#live-room.live-controls-v2 #end-live{display:none}
#live-room.live-controls-v2 #live-host-controls{
 top:auto;bottom:calc(100% + 26px);left:auto;right:14px;max-width:none;gap:0;
}
#live-room.live-controls-v2 #live-sound{position:absolute;top:auto;bottom:calc(100% + 26px);left:auto;right:14px}
#live-room.live-controls-v2 #live-sound span{display:none}
#live-room.live-controls-v2 #live-microphone,
#live-room.live-controls-v2 #live-sound{
 display:grid;place-items:center;width:48px;height:48px;min-height:48px;
 padding:0;border:1px solid #ffffff4d;border-radius:50%;background:#191a209e;color:#fff;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#live-room.live-controls-v2 :is(#live-microphone,#live-sound) svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#live-room.live-controls-v2 :is(#leave-room,#live-microphone,#live-sound):focus-visible{outline:2px solid #fff;outline-offset:3px}
#live-room.live-controls-v2 :is(#leave-room,#live-microphone,#live-sound):active{opacity:.75}
@media(max-width:360px){
 #live-room.live-controls-v2 .live-room-header{gap:4px}
 #live-room.live-controls-v2 .live-badge{padding:4px 6px;font-size:10px}
 #live-room.live-controls-v2 #viewer-count{padding:6px;font-size:10px}
}

/* Lower only the action row. Keep native bottom safe area and keyboard
   placement; the microphone, messages and full camera frame stay anchored. */
html[data-syoper-viewport="edge"] body.live-watching[data-surface="creator-live"] #live-room:not(.live-keyboard) .live-bottom-row{
 transform:translateY(min(24px,calc(10px + var(--live-camera-paint-tail,0px))));
}

/* Transparent preparation panel; keep its controls and dimensions unchanged. */
body[data-surface="creator-live"] .live-setup-root .prelive-details{
 background:transparent!important;border-color:transparent;box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* Decorative LIVE reactions; counts remain supplied by the existing API. */
#live-room.live-controls-v2 #live-video{z-index:0}
#live-room.live-controls-v2 .live-top-shade{z-index:1}
#live-room.live-controls-v2 .live-love-layer{
 position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;
 isolation:isolate;transform:translateZ(0);
}
#live-room.live-controls-v2 .live-love{
 display:block;position:absolute;bottom:auto;right:auto;
 width:var(--love-size,28px);height:var(--love-size,28px);margin-left:-14px;
 font-size:0;line-height:0;text-shadow:none;pointer-events:none;
 filter:drop-shadow(0 2px 5px #ff006333);transform-origin:center;
 animation:syoper-live-love-rise 4.2s linear forwards;
}
#live-room.live-controls-v2 .live-love svg{display:block;width:100%;height:100%;fill:currentColor;stroke:none}
@keyframes syoper-live-love-rise{
 0%{opacity:0;transform:translate3d(0,0,0) scale(.55)}
 4%{opacity:.95;transform:translate3d(0,calc(var(--love-end-y,-700px) * .0086),0) scale(.85)}
 12%{opacity:.95;transform:translate3d(0,calc(var(--love-end-y,-700px) * .0473),0) scale(1)}
 20%{opacity:.95;transform:translate3d(0,calc(var(--love-end-y,-700px) * .1043),0) scale(1.01)}
 34%{opacity:.95;transform:translate3d(0,calc(var(--love-end-y,-700px) * .2373),0) scale(1.03)}
 56%{opacity:.95;transform:translate3d(0,calc(var(--love-end-y,-700px) * .5143),0) scale(1.06)}
 86%{opacity:.95;transform:translate3d(var(--love-drift,0px),var(--love-end-y,-700px),0) scale(1.12) rotate(var(--love-tilt,0deg))}
 100%{opacity:0;transform:translate3d(var(--love-drift,0px),var(--love-end-y,-700px),0) scale(1.12) rotate(var(--love-tilt,0deg))}
}
#live-room.live-controls-v2 .live-love.live-love-gentle{display:block;animation:syoper-live-love-gentle 1.4s linear forwards}
@keyframes syoper-live-love-gentle{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:1}100%{opacity:0;transform:translate3d(0,-60px,0)}}
@media(prefers-reduced-motion:reduce){#live-room.live-controls-v2 .live-love{display:block;animation:syoper-live-love-gentle 1.4s linear forwards}}

/* Home Screen iOS: use one document frame for all four main tabs. Do not
   change browser-tab geometry, keyboard listeners, dialogs or LIVE overlays. */
@media(display-mode:standalone){
 @supports(-webkit-touch-callout:none){
  html[data-syoper-viewport="edge"]:is([data-syoper-page="/"],[data-syoper-page="/discover"],[data-syoper-page="/inbox"],[data-syoper-page="/profile"]):has(>body>nav.app-tabs){
   height:auto;min-height:100vh;min-height:100lvh;background-color:#14151b;
  }
  html[data-syoper-viewport="edge"]:is([data-syoper-page="/"],[data-syoper-page="/discover"],[data-syoper-page="/inbox"],[data-syoper-page="/profile"])>body:has(>nav.app-tabs){
   min-height:100vh;min-height:100lvh;
  }
 }
}
/* One opaque, bottom-anchored dock, including pages with their own base CSS. */
html[data-syoper-viewport="edge"] body nav.app-tabs[data-syoper-navigation="star"]{
 position:fixed;box-sizing:border-box;top:auto;bottom:0;min-height:0;max-height:none;
 height:calc(69px + var(--syoper-dock-bottom));
 padding-bottom:calc(6px + var(--syoper-dock-bottom));
 background:#14151b!important;
}

/* User-requested whole-dock shift: 20% of its own height, installed iPhone only. */
@media (display-mode:standalone){
 @supports (-webkit-touch-callout:none){
  html[data-syoper-viewport="edge"] body nav.app-tabs[data-syoper-navigation="star"]{
   transform:translate(-50%,20%);
  }
 }
}

/* Installed iPhone feed ends at the visible top of the 20%-lowered dock.
   Child posts/media remain 100% tall; progress stays bottom:0, and captions
   and actions retain their existing 24px/23px clearance within the feed. */
@media(display-mode:standalone){
 @supports(-webkit-touch-callout:none){
  html[data-syoper-viewport="edge"][data-syoper-page="/discover"]>body[data-surface="discovery"]:has(>nav.app-tabs[data-syoper-navigation="star"]) .discovery-device{
   height:calc(100vh - (69px + var(--syoper-dock-bottom)) * .8);
  }
 }
}

/* Feed lower-left product / creator / caption / sound stack. */
body[data-surface="discovery"] .reference-post .reference-copy{
 display:flex;flex-direction:column;align-items:flex-start;gap:0;
 left:16px;right:74px;bottom:14px;
}
body[data-surface="discovery"] .reference-copy .feed-product-links.pink-bag-button{
 order:-1;display:inline-flex!important;align-items:center;gap:8px!important;
 width:auto!important;max-width:100%;min-width:44px;min-height:44px;height:auto!important;
 padding:6px 12px 6px 0!important;margin:0 0 5px!important;
 position:relative;isolation:isolate;box-sizing:border-box;
 background:transparent!important;border:0!important;border-radius:24px!important;
 color:#fff!important;box-shadow:none!important;font:500 12px/1.3 system-ui;
}
body[data-surface="discovery"] .reference-copy .feed-product-links.pink-bag-button>svg{
 flex:0 0 32px;width:32px!important;height:32px!important;box-sizing:border-box;
 padding:7px;background:#ff0063;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.6;
}
body[data-surface="discovery"] .reference-copy .feed-product-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-surface="discovery"] .reference-copy .feed-product-chevron{flex:none;font-size:21px;line-height:1}
body[data-surface="discovery"] .reference-copy .feed-author-row{width:100%;gap:8px;min-height:44px;margin:0 0 4px}
body[data-surface="discovery"] .reference-copy>p{margin:0 0 3px;font-size:13px;line-height:1.35}
body[data-surface="discovery"] .reference-copy :is(.feed-use-sound,.feed-audio-label){
 display:block;max-width:100%;min-width:0;margin:0;text-align:left;font-size:12px;font-weight:600;
 white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;color:#fff;
}
body[data-surface="discovery"] .reference-copy [hidden]{display:none!important}

/* A 32px visible pill aligns with the 32px bag; touch target remains 44px. */
body[data-surface="discovery"] .reference-copy .feed-product-links.pink-bag-button::before{
 content:"";position:absolute;inset:6px 0 6px 16px;z-index:-1;
 background:#8e1649b3;border-radius:0 18px 18px 0;pointer-events:none;
}

/* Shop cart: branded artwork; existing link, badge data and handlers retained. */
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link{
 position:relative;isolation:isolate;box-sizing:border-box;border-radius:13px;
 border:1.5px solid #fff1fb;color:#fff;
 background:radial-gradient(ellipse at 50% 100%,#ff46bd 0,transparent 63%),linear-gradient(145deg,#ff168c,#780031 57%,#db0069);
 box-shadow:inset 0 0 5px #ffb0e7,0 0 7px #ff159dcc,0 2px 5px #64002e66;
}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link::before{
 content:"";position:absolute;inset:3px;pointer-events:none;
 background:url("/shop-redesign/cart-glow-v1.svg") center/contain no-repeat;
 filter:drop-shadow(0 1px 1px #650034);
}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link>svg{opacity:0}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-count:not([hidden]){
 position:absolute;top:-6px;right:-6px;z-index:2;display:grid;place-items:center;
 box-sizing:border-box;min-width:19px;height:19px;padding:0 4px;border:1.5px solid #fff;
 border-radius:999px;background:linear-gradient(#ff4a57,#ed0018);color:#fff;
 font:750 11px/1 system-ui;box-shadow:0 1px 3px #78002877;
}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link:active{filter:brightness(.9)}

/* User-selected pink lightning cart; no outer square frame. */
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link{
 border:0;background:transparent;box-shadow:none;
}
html[data-syoper-viewport="edge"] body.shop-front[data-shop-redesign="pink-v1"] #shop-cart-link::before{
 inset:0;background-image:url("/shop-redesign/cart-white-user-v1.png");filter:drop-shadow(0 1px 2px #ff55b74d);
}

/* SYOPER Safari safe-area repair, 2026-11-05.
   A persistent Home/Shop iframe has zero native env() insets. Its parent
   already supplies --syoper-shell-safe-top; use the larger inset, never sum.
   Do not translate the page, infer status-bar height, or move the bottom dock. */
html[data-syoper-viewport="edge"] {
 --syoper-control-safe-top:max(env(safe-area-inset-top,0px),var(--syoper-shell-safe-top,0px));
 --syoper-control-safe-left:env(safe-area-inset-left,0px);
 --syoper-control-safe-right:env(safe-area-inset-right,0px);
}
/* Product, cart, checkout, post-payment receipt, and inline seller chat
   all use this sticky header, including Affiliate commerce. Keep its safe
   padding while scrolling: padding on the outer page would scroll away. */
html[data-syoper-viewport="edge"] #commerce-root .commerce-page > .commerce-head {
 box-sizing:border-box;height:auto;
 padding-top:calc(8px + var(--syoper-control-safe-top));
 padding-bottom:8px;
 padding-left:max(14px,var(--syoper-control-safe-left));
 padding-right:max(14px,var(--syoper-control-safe-right));
 min-height:calc(60px + var(--syoper-control-safe-top));
 flex-wrap:nowrap;
}
html[data-syoper-viewport="edge"] #commerce-root .commerce-head > button {
 display:grid;place-items:center;flex-shrink:0;
 min-width:44px;min-height:44px;width:44px;height:44px;
 padding:6px;touch-action:manipulation;
}
/* Standalone pages that previously relied only on generic header padding. */
html[data-syoper-viewport="edge"] body[data-surface="status-order"] > header {
 padding-top:calc(12px + var(--syoper-control-safe-top));
 padding-left:max(18px,var(--syoper-control-safe-left));
 padding-right:max(18px,var(--syoper-control-safe-right));
}
html[data-syoper-viewport="edge"] .creator-header {
 padding-top:calc(12px + var(--syoper-control-safe-top));
}
/* Existing full-screen surfaces retain their own spacing and take the
   inherited inset when displayed inside the persistent Shop/Home frame. */
html[data-syoper-viewport="edge"] body.profile-v2 .profile-tools {
 padding-top:calc(4px + var(--syoper-control-safe-top));height:auto;
}
html[data-syoper-viewport="edge"] dialog.syoper-drawer .sd-header {
 padding-top:calc(19px + var(--syoper-control-safe-top));
}
html[data-syoper-viewport="edge"] dialog.people-screen,
html[data-syoper-viewport="edge"] .vibes-composer {
 padding-top:var(--syoper-control-safe-top);
}
html[data-syoper-viewport="edge"] .profile-gallery-viewer .profile-gallery-close {
 top:calc(6px + var(--syoper-control-safe-top));
}
html[data-syoper-viewport="edge"] .profile-gallery-search {
 top:calc(10px + var(--syoper-control-safe-top));
}
html[data-syoper-viewport="edge"] .account-heading {
 padding-top:calc(14px + var(--syoper-control-safe-top));
}
html[data-syoper-viewport="edge"] .qr-app {padding-top:var(--syoper-control-safe-top)}
html[data-syoper-viewport="edge"] .ad-head {padding-top:calc(22px + var(--syoper-control-safe-top))}
html[data-syoper-viewport="edge"] .g-top {padding-top:calc(8px + var(--syoper-control-safe-top))}
html[data-syoper-viewport="edge"] .g-room-open #groups-root {padding-top:var(--syoper-control-safe-top)}
html[data-syoper-viewport="edge"] body.social-inbox > header {padding-top:calc(12px + var(--syoper-control-safe-top))}
/* Minimum hit areas on page-level navigation, not buttons inside receipts,
   cards or lower sheets. Existing larger controls are preserved. */
html[data-syoper-viewport="edge"] :is(.account-heading,.creator-header,.ad-head,body[data-surface="status-order"] > header) :is(button,a) {
 min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;
}