/* Galaxy Live 2.14.0 — responsive layout, connectivity and production-beta polish. */
:root{
  --gl214-vvh:100svh;
  --gl214-topbar:64px;
  --gl214-bottomnav:0px;
  --gl214-feedtabs:50px;
}
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
body{touch-action:pan-y;overscroll-behavior-x:none}
.app,.shell,.page,.page.active,.pageInner{width:100%;max-width:100%;overflow-x:hidden}

/* Keep content below the real sticky header instead of hiding underneath it. */
.focusDiscover{height:calc(var(--gl214-vvh) - var(--gl214-topbar) - var(--gl214-bottomnav))!important;min-height:0!important;position:relative!important;overflow:hidden!important}
.focusFeedViewport{position:relative!important;height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;scroll-snap-type:y mandatory!important;scroll-padding-top:var(--gl214-feedtabs)!important;overscroll-behavior-y:contain!important}
.focusFeedViewport>#feed{height:calc(100% - var(--gl214-feedtabs))!important;min-height:0!important;margin-top:var(--gl214-feedtabs)!important}
.focusFeedTabs{position:absolute!important;top:6px!important;left:50%!important;transform:translateX(-50%)!important;z-index:74!important;max-width:calc(100% - 126px)!important;overflow-x:auto!important;white-space:nowrap!important;background:rgba(2,7,18,.76)!important;border:1px solid rgba(70,102,155,.4)!important;backdrop-filter:blur(16px)!important}
.focusDiscover #feed>.feedCard,.focusDiscover .feedCard{height:100%!important;min-height:100%!important;max-height:100%!important;scroll-snap-align:start!important;overflow:hidden!important}
.focusDiscover .gl29FeedMedia{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:grid!important;place-items:center!important;background:#000!important}
.focusDiscover .gl29FeedMedia>img,.focusDiscover .gl29SlideStack,.focusDiscover .gl29SlideStack img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;background:#000!important}
.focusDiscover .gl29FeedVideo{width:100%!important;height:100%!important;object-fit:cover!important;background:#000!important}
.focusDiscover .gl29ExternalMedia{display:flex!important;flex-direction:column!important;justify-content:center!important;background:#000!important}
.focusDiscover .gl29ExternalMedia iframe{width:100%!important;max-height:72%!important;aspect-ratio:16/9!important}
.focusDiscover .feedHero{z-index:7!important;pointer-events:none!important;padding-bottom:calc(24px + var(--gl214-bottomnav))!important}
.focusDiscover .feedMeta,.focusDiscover .feedActions{pointer-events:auto!important}
.focusDiscover .feedActions{bottom:calc(22px + var(--gl214-bottomnav))!important}
.focusDiscover .feedSpotlight{top:calc(var(--gl214-feedtabs) + 14px)!important;left:16px!important;right:auto!important;z-index:20!important;max-width:calc(100% - 100px)!important}
.focusDiscover .gl29MediaBadge{top:calc(var(--gl214-feedtabs) + 52px)!important;left:16px!important;right:auto!important;bottom:auto!important;z-index:20!important;margin:0!important;white-space:nowrap!important}
.gl2122CompositionBadge,.gl2122SegmentBadge{top:calc(var(--gl214-feedtabs) + 52px)!important;left:16px!important;right:auto!important;z-index:21!important}

/* Posts and controls should never be cut by safe areas or the persistent nav. */
.feedMeta h2{overflow-wrap:anywhere}.feedActions button{touch-action:manipulation}
.bottomNav,.gl210BottomNav{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
.gl214Follow{pointer-events:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-top:8px!important;padding:7px 12px!important;border:1px solid #51b8ff!important;border-radius:999px!important;background:linear-gradient(135deg,#6335f2,#168cff)!important;color:#fff!important;font-weight:800!important;font-size:12px!important;box-shadow:0 6px 24px #1366a733!important}
.gl214Follow.following{background:#08162a!important;border-color:#47e0a7!important;color:#9fffe0!important}

/* Live camera: host owns the whole stage; remote guest seats float above it. */
.referenceStage{overflow:hidden!important}
.referenceHostVisual{position:relative!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;border-radius:inherit!important;overflow:hidden!important}
.referenceHostVisual .creatorVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:0!important;background:#000!important}
.referenceHostVisual.cameraOn .videoShade{opacity:.05!important;background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 26%,transparent 72%,rgba(0,0,0,.28))!important;pointer-events:none!important}
.referenceHostVisual.cameraOn:before{opacity:.04!important}
.gl24RemoteVideoDock{z-index:48!important;pointer-events:auto!important}
.gl24RemoteTile{box-shadow:0 12px 36px #000b!important;background:#030817!important}
.gl24RemoteTile video{object-fit:cover!important}

/* Dating = true two-person split screen; battle keeps its own battle implementation. */
.referenceStage.gl214DateMode .referenceHostVisual{display:grid!important;grid-template-columns:1fr 1fr!important;background:#020611!important}
.referenceStage.gl214DateMode .referenceHostVisual .creatorVideo{position:relative!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:100%!important;object-fit:cover!important}
.referenceStage.gl214DateMode .referenceHostVisual .hostHero{grid-column:1!important;grid-row:1!important;z-index:8!important}
.referenceStage.gl214DateMode .gl24RemoteVideoDock{position:absolute!important;left:50%!important;right:0!important;top:0!important;bottom:0!important;width:50%!important;height:100%!important;display:block!important;overflow:hidden!important;padding:0!important}
.referenceStage.gl214DateMode .gl24RemoteTile{display:none!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;border-radius:0!important;border:0!important}
.referenceStage.gl214DateMode .gl24RemoteTile:first-child{display:block!important}
.referenceStage.gl214DateMode .gl24RemoteTile:first-child video{width:100%!important;height:100%!important}
.referenceStage.gl214DateMode:after{content:'DATE';position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:60;border:1px solid #ff7ed5;border-radius:999px;background:#19081fcc;color:#ffd5ee;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.1em}

/* DM attachments. */
.gl214DmComposer{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:7px!important;align-items:center!important}
.gl214AttachBtn{width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;font-size:22px!important}
.gl214DmImage,.gl214DmVideo{display:block;max-width:min(420px,72vw);max-height:52svh;border-radius:12px;margin:4px 0;object-fit:contain;background:#000}
.gl214DmAudio{width:min(420px,72vw);margin:4px 0}.gl214DmLink{display:block;color:#70d9ff;overflow-wrap:anywhere;margin-top:5px}.gl214SharedPost{border:1px solid #4d74ad;background:#0a1830;color:#fff;border-radius:11px;padding:9px 11px;margin:5px 0}.gl214DmText{white-space:pre-wrap;overflow-wrap:anywhere}

/* Draft manager. */
.gl214DraftList{display:grid;gap:9px;max-height:58svh;overflow:auto}.gl214DraftRow{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid #2c4774;border-radius:13px;background:#07101f;padding:11px}.gl214DraftRow>div:first-child{min-width:0}.gl214DraftRow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gl214DraftRow small{display:block;color:#9fb1cd;margin-top:4px}.gl214DraftRow>div:last-child{display:flex;gap:6px;flex:none}

/* In-app post share sheet. */
.gl214ShareSheet{position:fixed;inset:0;z-index:10050;background:#000b;display:grid;place-items:end center;padding:14px}.gl214ShareCard{width:min(620px,100%);max-height:82svh;overflow:auto;border:1px solid #36598d;border-radius:22px;background:#06101ff5;padding:16px;box-shadow:0 20px 70px #000}.gl214ShareCard h2{margin:0 0 4px}.gl214ShareCard p{color:#9fb1cc}.gl214ShareSearch{display:flex;gap:7px}.gl214ShareSearch input{flex:1;min-height:46px;border:1px solid #38557f;border-radius:12px;background:#020817;color:#fff;padding:10px}.gl214ShareResults{display:grid;gap:6px;margin-top:10px}.gl214SharePerson{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #28446f;border-radius:12px;background:#081529;color:#fff;padding:10px;text-align:left}.gl214ShareChoices{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Auth landing page uses the approved Galaxy blueprint as the invitation, not a plain form. */
.gl213AuthGate{background:linear-gradient(90deg,rgba(0,3,10,.2),rgba(0,3,10,.82)),url('/assets/reference/approved-live-room-reference.jpg') center/cover no-repeat!important;place-items:center end!important}
.gl213AuthCard{margin-right:min(5vw,70px)!important;background:linear-gradient(155deg,rgba(4,12,27,.96),rgba(8,16,36,.9))!important;backdrop-filter:blur(18px)!important;border-color:#5276ad!important}
.gl213AuthCard:before{content:'Music · Live Rooms · Creators · Connections';display:block;color:#67e5ff;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}

/* Desktop remains desktop: left navigation + full stage. */
@media(min-width:1025px){
  :root{--gl214-bottomnav:0px}
  .focusDiscover{height:calc(var(--gl214-vvh) - var(--gl214-topbar))!important}
  .sidebar{display:flex!important;transform:none!important;visibility:visible!important;pointer-events:auto!important}
  .menuToggle{display:inline-flex!important}
  .referenceStage{min-height:calc(var(--gl214-vvh) - var(--gl214-topbar) - 32px)!important}
  .referenceHostVisual{min-height:calc(var(--gl214-vvh) - var(--gl214-topbar) - 32px)!important}
}

@media(max-width:1024px){
  :root{--gl214-bottomnav:calc(70px + env(safe-area-inset-bottom,0px))}
  .topbar{position:sticky!important;top:0!important}
  .focusFeedTabs{max-width:calc(100% - 36px)!important}
  .focusDiscover .feedHero{padding:18px 74px calc(20px + var(--gl214-bottomnav)) 16px!important}
  .focusDiscover .feedActions{right:10px!important;bottom:calc(14px + var(--gl214-bottomnav))!important}
  .focusDiscover .feedActions button{width:46px!important;height:46px!important}
  .referenceStage{height:calc(var(--gl214-vvh) - var(--gl214-topbar) - var(--gl214-bottomnav) - 8px)!important;min-height:480px!important;border-radius:0!important}
  .referenceHostVisual{height:100%!important;min-height:0!important}
  .gl24RemoteVideoDock{right:8px!important;top:76px!important;width:min(38vw,250px)!important;grid-template-columns:1fr!important}
  .gl24RemoteTile{min-width:0!important;min-height:110px!important}
  .roomPage{padding-left:0!important;padding-right:0!important}
  .gl213AuthGate{background-position:32% center!important;place-items:end center!important;padding:10px!important}
  .gl213AuthCard{margin:0!important;width:min(560px,100%)!important;max-height:88svh!important}
}

@media(max-width:680px){
  :root{--gl214-feedtabs:48px}
  .focusFeedTabs button{padding:7px 9px!important;font-size:11px!important}
  .focusDiscover .feedMeta h2{font-size:20px!important;line-height:1.12!important}
  .focusDiscover .feedMeta{max-width:calc(100% - 42px)!important}
  .focusDiscover .feedSpotlight{top:calc(var(--gl214-feedtabs) + 8px)!important}
  .focusDiscover .gl29MediaBadge,.gl2122CompositionBadge,.gl2122SegmentBadge{top:calc(var(--gl214-feedtabs) + 42px)!important}
  .gl24RemoteVideoDock{width:min(41vw,180px)!important}
  .referenceStage.gl214DateMode:after{top:52px}
  .gl214DraftRow{align-items:flex-start;flex-direction:column}.gl214DraftRow>div:last-child{width:100%}.gl214DraftRow>div:last-child button{flex:1}
  .gl213AuthGate{background-image:linear-gradient(180deg,rgba(0,3,10,.28),rgba(0,3,10,.92)),url('/assets/reference/approved-live-room-reference.jpg')!important;background-position:42% center!important}
}
.gl214DmEmbed{margin:6px 0;border:1px solid #2e4d79;border-radius:12px;overflow:hidden;background:#020611}.gl214DmEmbed iframe{display:block;width:min(430px,72vw);aspect-ratio:16/9;border:0;background:#000}.gl214DmEmbed a{display:block;padding:7px 9px;color:#72ddff;text-decoration:none;font-size:11px}
.gl214ConnectionsBody{display:grid;gap:12px;margin-top:14px}.gl214ConnectionsBody section{border:1px solid #29466f;border-radius:13px;padding:10px;background:#07101f}.gl214ConnectionsBody h3{margin:0 0 8px}.gl214ConnectionRow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #172845}.gl214ConnectionRow:first-of-type{border-top:0}.gl214ConnectionRow span:first-child{min-width:0}.gl214ConnectionRow b,.gl214ConnectionRow small{display:block}.gl214ConnectionRow small{color:#95abc9}.gl214ConnectionRow span:last-child{display:flex;gap:6px;flex:none}
@media(max-width:560px){.gl214ConnectionRow{align-items:flex-start;flex-direction:column}.gl214ConnectionRow span:last-child{width:100%}.gl214ConnectionRow span:last-child button{flex:1}}