/* Elysium — iOS-Facebook style pass (loads after app.css). Keeps existing colours + blur. */

/* 1 · Top bar: large left wordmark, tiny tagline, round icon buttons */
#social .x-bar{gap:8px}
#social .x-brand{display:block;line-height:1.15;min-width:0}
#social .x-brand.x-bh{font-size:27px;font-weight:800;letter-spacing:-.045em;line-height:1.04;color:var(--tx);padding:1px 0 0 2px}
#social .x-bsub{display:block;font-size:10px;font-weight:500;letter-spacing:.02em;line-height:1;margin-top:2px;padding-left:2px;color:var(--mut);-webkit-text-size-adjust:none}
#social .x-bar .x-ib{width:38px;height:38px;font-size:19px;background:var(--fill);color:var(--tx)}
#social .x-bar .x-ib:hover{background:var(--fill)}
#social .x-bar #xback{width:38px;height:38px;font-size:22px;background:none;color:var(--ac);margin-left:-4px}
#social .x-bar .x-fr{color:var(--ac)}

/* 2 · Feed media: compact on mobile (4:5 cap), tap still opens full view */
#social .x-pg.n1 img{max-height:min(125vw,64dvh);object-fit:cover}
#social .x-pvd,#social .xr-rc.x-prc{max-height:min(125vw,64dvh);margin-top:6px}
#social .x-main>.x-card[id^=xp]{contain-intrinsic-size:auto 440px}

/* 3 · Cover photo: compact landscape, inset, rounded corners (mobile + desktop) */
#social .x-flush>.x-cover:not([style*="height:"]){margin:6px 8px 0;height:auto;aspect-ratio:2.7/1;max-height:132px;border-radius:12px;background-size:cover;background-position:center}
@media(min-width:700px){#social .x-flush>.x-cover:not([style*="height:"]){margin:10px 10px 0;aspect-ratio:3.2/1;max-height:210px;border-radius:16px}}
@media(max-width:380px){#social .x-flush>.x-cover:not([style*="height:"]){aspect-ratio:2.4/1;max-height:116px}}
#social .x-flush>.x-cover+.x-ph{margin-top:-38px}

/* 4 · Smooth video: ONE sound button, no extra compositing layers, no blur repaint while playing */
#social .x-pvm{display:none!important}
#social .x-pvd{width:100%;height:auto;aspect-ratio:var(--ar,4/5);contain:layout paint style}
#social .x-pvd:has(video){transform:none;isolation:auto}
#social .x-pvd video{transform:none;backface-visibility:visible;will-change:auto;transition:none;object-fit:cover;background:transparent}
#social .x-pvd img,#social .x-pvd .x-pvp{transition:none}
#social .x-pvd .xb-mu{right:8px;bottom:8px;width:30px;height:30px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#social .x-pvd .xb-mu svg{width:16px;height:16px}
html.xb-vp #social .x-bar,html.xb-vp #social .x-btm{-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);background-color:var(--bar)}
@media(hover:none){html.xb-vp #social .x-bar,html.xb-vp #social .x-btm{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--bg)}}

/* 5 · Shared (embedded) post media: edge-to-edge inside the card, never out of margin */
#social .x-emb .x-pvd,#social .x-emb .xr-rc.x-prc,#social .x-emb .x-pg{width:calc(100% + 24px);max-width:none;margin:8px -12px -10px;border-radius:0}
#social .x-emb .x-pvd{aspect-ratio:1/1;max-height:min(100vw,56dvh);background:#0b0b0d}

/* 6 · Video click-to-play: poster stays + spinner until first frame (no black flash) */
#social .x-pvd.ld .x-pvp{opacity:0}
#social .x-pvd.ld video{opacity:0}
#social .x-pvd.ld::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:xvSpin .7s linear infinite;z-index:3;pointer-events:none}
@keyframes xvSpin{to{transform:rotate(360deg)}}

/* 7 · Find-friends sheet: GPU sliding thumb, cheap rows, no layout thrash */
#social .x-bar .x-fr{touch-action:manipulation}
#social .xe-full .x-sheet{will-change:transform;contain:layout style}
#social .xe-full #xeb{contain:layout style}
#social .xe-full .x-ulist>.x-row{content-visibility:auto;contain-intrinsic-size:auto 66px}
#social #xeseg{position:relative}
#social #xeseg .xe-th{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 8px)/3);border-radius:8px;background:var(--pn);box-shadow:0 1px 5px rgba(0,0,0,.16);transform:translate3d(calc(var(--i,0)*(100% + 2px)),0,0);transition:transform .55s cubic-bezier(.34,1.35,.5,1);will-change:transform;pointer-events:none}
#social #xeseg button{position:relative;z-index:1;transition:color .25s,transform .2s;touch-action:manipulation}
#social #xeseg button.on{background:none;box-shadow:none;color:var(--tx)}
@media(prefers-reduced-motion:reduce){#social #xeseg .xe-th{transition:none}}
#social #xeseg button:active{transform:scale(.96)}

/* 8 · Autoplay smoothness: video fills the box (no layout jump when poster is swapped), fades in on first frame */
#social .x-pvd{position:relative;overflow:hidden;background:#000}
#social .x-pvd video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .18s linear;pointer-events:none}
#social .x-pvd img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover}
#social .x-pvd video{z-index:1}
#social .x-pvd .xb-mu,#social .x-pvd .x-pvp{z-index:2}

/* 9 · ONE engine (xb): poster <img> stays underneath for good; video is invisible until its first frame is painted (.pl) -> never a black box */
#social .x-pvd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#social .x-pvd video{opacity:0}
#social .x-pvd.pl video{opacity:1}
#social .x-pvd.ld video{opacity:0}
#social .x-pvd video[controls]{pointer-events:auto;object-fit:contain;background:#000}
#social .x-pvd{transition:none}

/* 10 · Facebook-style fixed video box: every feed video gets the SAME 4:5 box (black bars if needed), so nothing resizes from video to video or after load */
#social .x-pvd{aspect-ratio:4/5!important;background:#000}
#social .x-pvd img,#social .x-pvd video{object-fit:contain}