/* Patiyiz Social 2.0 – focused, native-feeling mobile composition.
   No changes to data access, reactions, story timing or gesture handlers.
   White profiles are intentional, including when app dark mode is selected. */

/* PROFILE – compact username/title bar, purposeful information hierarchy. */
#main-content .pati-ig-profile{
 background:#fff!important;color:#15171b!important;
 border-radius:0!important;box-shadow:none!important;
}
#main-content .pati-ig-profile :is(.pati-profile-topbar,.pati-profile-visitor-topbar){
 position:relative;display:flex!important;align-items:center!important;
 justify-content:space-between!important;
 box-sizing:border-box!important;width:100%!important;min-height:56px!important;
 padding:7px clamp(13px,3.7vw,22px)!important;margin:0!important;
 background:#fff!important;border-bottom:1px solid #f0f0f2!important;
 border-radius:0!important;overflow:visible!important;
}
#main-content .pati-ig-profile :is(.pati-profile-topbar-title,.pati-profile-visitor-username){
 display:block;min-width:0;max-width:calc(100% - 68px);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:17px!important;line-height:1.3!important;
 font-weight:820!important;letter-spacing:-.025em;
 color:#17191d!important;
}
#main-content .pati-ig-profile>.pati-profile-visitor-topbar{
 padding-right:72px!important;
}
#main-content .pati-ig-profile>.pati-profile-more-wrap{
 top:6px!important;right:clamp(13px,3.7vw,22px)!important;
}
#main-content .pati-ig-profile>.pati-profile-more-wrap>summary,
#main-content .pati-profile-menu-trigger{
 border:1px solid #eceef1!important;
 background:#f6f7f9!important;color:#202126!important;
 box-shadow:none!important;
}
#main-content .pati-ig-profile .pati-ig-summary{
 background:#fff!important;border:0!important;
 padding:19px clamp(13px,3.7vw,22px) 12px!important;
 gap:clamp(12px,3vw,22px)!important;align-items:center!important;
}
#main-content .pati-ig-profile .pati-ig-summary::before{
 display:none!important;content:none!important;
}
#main-content .pati-ig-profile .pati-ig-avatar{
 flex-shrink:0!important;border-color:#eeeef0!important;
 background:#fff!important;box-shadow:none!important;
}
#main-content .pati-ig-profile .pati-ig-handle-row{
 display:flex;align-items:center;min-width:0;gap:6px;
}
#main-content .pati-ig-profile .pati-ig-handle{
 font-size:clamp(13px,3.8vw,16px)!important;
 line-height:1.3!important;color:#1d2026!important;
 font-weight:800!important;letter-spacing:-.012em!important;
}
#main-content .pati-ig-profile .pati-ig-name{
 color:#34373d!important;line-height:1.3!important;font-size:13px!important;
 font-weight:650!important;
}
#main-content .pati-ig-profile .pati-ig-stats{
 display:flex!important;justify-content:space-between!important;
 min-width:0!important;margin-top:10px!important;gap:4px!important;
}
#main-content .pati-ig-profile .pati-ig-stats>:is(span,button){
 display:flex!important;flex-direction:column!important;align-items:center!important;
 gap:3px!important;min-width:0!important;
 padding:4px 1px!important;
 border-radius:9px!important;
}
#main-content .pati-ig-profile .pati-ig-stats b{
 font-size:clamp(14px,3.7vw,18px)!important;line-height:1.15!important;
 font-weight:840!important;color:#15171b!important;
 font-variant-numeric:tabular-nums!important;
}
#main-content .pati-ig-profile .pati-ig-stats small{
 font-size:10px!important;line-height:1.25!important;
 color:#686d75!important;font-weight:650!important;text-align:center!important;
}
#main-content .pati-ig-profile .pati-ig-about{
 margin:0!important;padding:3px clamp(13px,3.7vw,22px) 9px!important;
 background:#fff!important;
}
#main-content .pati-ig-profile .pati-profile-links{
 background:#fff!important;
}
#main-content .pati-ig-profile .pati-ig-tabs{
 margin-top:9px!important;border-top:1px solid #f1f1f3!important;
 border-bottom:1px solid #efeff1!important;gap:0!important;
}
#main-content .pati-ig-profile .pati-ig-tabs>button{
 min-height:50px!important;border-radius:0!important;
}
#main-content .pati-ig-profile .pati-ig-grid{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:2px!important;margin:0!important;padding:0!important;
 background:#fff!important;border:0!important;
}
#main-content .pati-ig-profile .pati-ig-grid>.pati-profile-tile,
#main-content .pati-ig-profile .pati-ig-grid>*{
 width:100%!important;min-width:0!important;max-width:100%!important;
 height:auto!important;aspect-ratio:3 / 4!important;
 min-height:0!important;overflow:hidden!important;
 border:0!important;border-radius:0!important;
 box-shadow:none!important;background:#eff0f2!important;
}
#main-content .pati-ig-profile .pati-ig-grid :is(img,video){
 display:block!important;position:relative;
 width:100%!important;height:100%!important;aspect-ratio:3 / 4!important;
 object-fit:cover!important;object-position:center!important;
 border:0!important;border-radius:0!important;
}
#main-content .pati-ig-profile .pati-ig-grid .pati-profile-tile:focus-visible{
 outline:3px solid #758ff0!important;outline-offset:-3px!important;
}

/* FEED – readable author line, editorial spacing and content-first photos. */
#main-content .pati-feed-posts{
 min-width:0!important;
}
#main-content .pati-feed-posts>.pati-feed-card{
 width:100%!important;min-width:0!important;max-width:100%!important;
 background:var(--pati-social-surface,#fff)!important;
 border:0!important;border-bottom:1px solid var(--pati-social-line,#e9e9ec)!important;
 border-radius:0!important;box-shadow:none!important;
 margin:0!important;padding:0 0 11px!important;
 overflow:hidden!important;
}
#main-content .pati-feed-card .pati-feed-card-header{
 min-height:64px!important;box-sizing:border-box!important;
 padding:10px clamp(12px,3.7vw,20px)!important;
 display:flex!important;align-items:center!important;gap:9px!important;
 background:var(--pati-social-surface,#fff)!important;
}
#main-content .pati-feed-card .pati-feed-card-header .pati-post-more{
 width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important;
 border:0!important;border-radius:12px!important;
 font-size:24px!important;color:var(--pati-social-ink,#1c1c20)!important;
}
#main-content .pati-feed-card .pati-feed-card-header :is(strong,b){
 font-weight:800!important;letter-spacing:-.012em;
}
#main-content .pati-feed-card :is(.pati-carousel,.pati-video-frame,.pati-feed-text-content){
 border-radius:0!important;box-shadow:none!important;
}
#main-content .pati-feed-card .pati-social-actions{
 display:flex!important;justify-content:flex-start!important;
 align-items:center!important;gap:4px!important;
 margin:0!important;padding:5px clamp(9px,3vw,16px) 2px!important;
 min-height:49px!important;box-sizing:border-box!important;
 border:0!important;background:transparent!important;
}
#main-content .pati-feed-card .pati-social-actions>button{
 display:inline-flex!important;align-items:center!important;
 justify-content:center!important;gap:5px!important;
 flex:0 1 auto!important;min-width:42px!important;min-height:44px!important;
 padding:7px 6px!important;margin:0!important;
 border-radius:11px!important;background:transparent!important;
}
#main-content .pati-feed-card .pati-social-actions>button :is(svg,.icon){
 width:23px!important;height:23px!important;
}
#main-content .pati-feed-card .pati-post-details{
 display:flex!important;flex-direction:column!important;
 align-items:flex-start!important;gap:5px!important;
 margin:0!important;padding:2px clamp(13px,3.7vw,20px) 0!important;
 color:var(--pati-social-ink,#18191d)!important;
}
#main-content .pati-feed-card .pati-post-like-summary{
 font-size:13px!important;line-height:1.35!important;
 color:var(--pati-social-ink,#18191d)!important;font-weight:800!important;
}
#main-content .pati-feed-card .pati-post-caption{
 font-size:13px!important;line-height:1.56!important;
 margin:0!important;padding:0!important;
 overflow-wrap:anywhere!important;
}
#main-content .pati-feed-card .pati-post-time{
 color:var(--pati-social-secondary,#7b7e85)!important;
 font-size:11px!important;line-height:1.3!important;
 letter-spacing:0!important;text-transform:none!important;
}
#main-content .pati-feed-card.pati-feed-text-only .pati-feed-text-content{
 padding:12px clamp(13px,3.7vw,20px) 8px!important;
}

/* REELS – full-bleed video, transparent overlay actions and compact
   controls so video occupies as much of the display as possible. */
html[data-pati-view="reels"] #main-content,
html[data-pati-view="reels"] #main-content .pati-reels-viewport{
 background:#050507!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item{
 background:#050507!important;overflow:hidden!important;
 position:relative!important;isolation:isolate!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-video{
 width:100%!important;height:100%!important;
 min-width:100%!important;min-height:100%!important;
 object-fit:cover!important;object-position:center!important;
 background:#050507!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item::after{
 content:"";position:absolute;inset:51% 0 0!important;
 background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 32%,rgba(0,0,0,.67) 100%)!important;
 pointer-events:none!important;z-index:1!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{
 position:absolute!important;left:clamp(12px,3.2vw,20px)!important;
 right:71px!important;bottom:104px!important;
 padding:0!important;gap:8px!important;
 color:#fff!important;text-shadow:0 1px 5px #000b!important;
 z-index:9!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-author strong{
 font-size:14px!important;line-height:1.3!important;font-weight:810!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-author small{
 font-size:11px!important;color:#f0f0f2!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{
 position:absolute!important;left:clamp(12px,3.2vw,20px)!important;
 right:74px!important;bottom:40px!important;
 font-size:13px!important;line-height:1.44!important;
 color:#fff!important;text-shadow:0 1px 5px #000e!important;
 max-height:57px!important;overflow:auto!important;
 background:none!important;border:0!important;
 z-index:9!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{
 position:absolute!important;right:max(7px,env(safe-area-inset-right,0px))!important;
 bottom:max(39px,env(safe-area-inset-bottom,0px))!important;
 width:49px!important;gap:4px!important;z-index:12!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button{
 width:46px!important;min-width:46px!important;max-width:46px!important;
 min-height:45px!important;max-height:none!important;
 padding:5px 3px!important;gap:2px!important;
 border:1px solid #ffffff50!important;
 border-radius:18px!important;
 background:#121720a8!important;
 box-shadow:0 2px 9px #0004!important;
 backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
 color:#fff!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button svg.icon{
 width:23px!important;height:23px!important;
 stroke-width:2.2!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-reel-count{
 font-size:10px!important;font-weight:850!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool{
 width:41px!important;min-width:41px!important;max-width:41px!important;
 min-height:37px!important;border-radius:15px!important;
 padding:4px 3px!important;
 border-color:#ffffff2b!important;background:#161a22a2!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool svg.icon{
 width:19px!important;height:19px!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool .pati-reel-tool-label{
 font-size:10px!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-rail>button:focus-visible{
 outline:2px solid #fff!important;outline-offset:2px!important;
}
html[data-pati-view="reels"] #main-content .pati-reel-progress{
 bottom:max(9px,env(safe-area-inset-bottom,0px))!important;z-index:14!important;
}

/* STORY – image first, hairline progress at top, close button in the
   opposite corner, restrained header and a cohesive footer area.
   Existing swipe-up viewer activity and touch navigation are untouched. */
#story-overlay:not(.pati-story-viewers-open) .story-player{
 position:relative!important;background:#050507!important;
 color:#fff!important;overflow:hidden!important;
}
#story-overlay:not(.pati-story-viewers-open) .story-player>.story-progress{
 position:absolute!important;z-index:30!important;
 top:max(9px,env(safe-area-inset-top,0px))!important;
 left:10px!important;right:10px!important;
 display:flex!important;gap:3px!important;
 width:auto!important;height:3px!important;max-height:3px!important;
 padding:0!important;margin:0!important;
 background:none!important;
}
#story-overlay .story-progress>.story-track{
 display:block!important;flex:1 1 0!important;min-width:0!important;
 height:3px!important;border-radius:999px!important;
 background:rgba(255,255,255,.32)!important;overflow:hidden!important;
}
#story-overlay .story-progress>.story-track>.story-playing,
#story-overlay .story-progress>.story-track>span{
 display:block!important;height:100%!important;border-radius:999px!important;
}
#story-overlay:not(.pati-story-viewers-open) .story-player>.story-player-head{
 display:flex!important;align-items:center!important;gap:9px!important;
 box-sizing:border-box!important;position:absolute!important;
 top:max(20px,calc(env(safe-area-inset-top,0px) + 14px))!important;
 left:12px!important;right:11px!important;
 margin:0!important;padding:7px 2px!important;
 z-index:32!important;
 background:transparent!important;border:0!important;
 color:#fff!important;
}
#story-overlay .story-player-head .pati-story-owner-name{
 min-width:0!important;gap:2px!important;
}
#story-overlay .story-player-head .pati-story-owner-top strong{
 font-size:13px!important;font-weight:780!important;
 color:#fff!important;
}
#story-overlay .story-player-head .pati-story-upload-age{
 font-size:10px!important;background:#0006!important;
}
#story-overlay .story-player-head .story-close{
 display:grid!important;place-items:center!important;
 flex:0 0 42px!important;
 box-sizing:border-box!important;
 width:42px!important;height:42px!important;min-height:42px!important;
 margin:0!important;padding:0!important;
 border:1px solid #ffffff4b!important;border-radius:12px!important;
 background:rgba(0,0,0,.38)!important;
 color:#fff!important;font-size:26px!important;line-height:1!important;
}
#story-overlay:not(.pati-story-viewers-open) .story-player :is(.story-big-photo,.story-big-video){
 display:block;width:100%!important;height:100%!important;
 max-width:100%!important;object-fit:contain!important;
 object-position:center!important;
}
#story-overlay:not(.pati-story-viewers-open) .story-player>.story-caption{
 left:13px!important;right:13px!important;
 bottom:max(79px,calc(env(safe-area-inset-bottom,0px) + 67px))!important;
 margin:0!important;padding:10px 12px!important;
 max-height:20dvh!important;border-radius:13px!important;
 background:rgba(8,10,15,.6)!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 font-size:13px!important;line-height:1.5!important;color:#fff!important;
 box-sizing:border-box!important;overflow:auto!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-stack{
 position:absolute!important;left:0!important;right:0!important;
 bottom:max(9px,calc(env(safe-area-inset-bottom,0px) + 4px))!important;
 z-index:26!important;display:flex!important;flex-direction:column!important;
 align-items:stretch!important;gap:7px!important;
 padding:0 12px!important;box-sizing:border-box!important;
 background:transparent!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-stack>.story-caption{
 position:relative!important;inset:auto!important;
 margin:0!important;padding:9px 11px!important;
 background:rgba(7,9,13,.67)!important;
 border:1px solid #ffffff2c!important;
 border-radius:13px!important;
 font-size:13px!important;line-height:1.45!important;
 max-height:min(18dvh,160px)!important;
 overflow:auto!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer{
 position:relative!important;inset:auto!important;
 display:flex!important;flex-direction:row!important;
 align-items:center!important;justify-content:space-between!important;
 gap:9px!important;margin:0!important;padding:0!important;
 min-height:52px!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button{
 position:relative!important;inset:auto!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:flex-start!important;
 flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important;
 min-height:52px!important;max-height:56px!important;
 padding:7px 11px!important;margin:0!important;gap:7px!important;
 border:1px solid #ffffff52!important;border-radius:15px!important;
 background:rgba(8,11,17,.7)!important;color:#fff!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-label{
 font-size:13px!important;line-height:1.2!important;
 font-weight:800!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-status{
 font-size:10px!important;line-height:1.3!important;
 white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;
}
#story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-delete{
 position:relative!important;inset:auto!important;
 flex:0 0 auto!important;align-self:center!important;
 width:auto!important;min-width:68px!important;
 min-height:48px!important;
 padding:9px 12px!important;margin:0!important;
 border:1px solid #ffffff55!important;border-radius:14px!important;
 background:rgba(8,11,17,.68)!important;
 color:#fff!important;
}
#story-overlay:not(.pati-story-viewers-open) .pati-story-like,
#story-overlay:not(.pati-story-viewers-open) .pati-story-sound{
 border:1px solid #ffffff50!important;
 background:rgba(5,7,12,.58)!important;
 color:#fff!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
@media(max-width:390px){
 #main-content .pati-ig-profile .pati-ig-stats small{
  font-size:9px!important;
 }
 #main-content .pati-ig-profile .pati-ig-summary{
  gap:10px!important;
 }
 #main-content .pati-feed-card .pati-social-actions>button{
  min-width:38px!important;padding:6px 4px!important;
 }
 #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button{
  padding:7px 8px!important;gap:5px!important;
 }
 #story-overlay .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-status{
  font-size:9px!important;
 }
}
@media(max-height:650px){
 html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{
  gap:2px!important;
 }
 html[data-pati-view="reels"] #main-content .pati-reel-rail>button{
  min-height:39px!important;padding:3px 2px!important;
 }
 html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool{
  min-height:32px!important;
 }
 html[data-pati-view="reels"] #main-content .pati-reel-rail>button svg.icon{
  width:20px!important;height:20px!important;
 }
 html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{
  bottom:93px!important;
 }
 html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{
  bottom:32px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #main-content .pati-feed-card .pati-social-actions>button,
 html[data-pati-view="reels"] #main-content .pati-reel-rail>button,
 #story-overlay .story-close{
  transition:none!important;
 }
}