/* Canonical global overlay + inspector stacking. Surface-specific geometry lives
   with the surface itself; this file only owns portal, z-index and desktop
   group-inspector layout. */
:root{
  --z-content:0;--z-sticky:100;--z-navigation:200;--z-popover:400;
  --z-inspector:500;--z-sheet:600;--z-modal:700;--z-media:800;
  --z-call:900;--z-critical:1000;
  --profile-inspector-width:360px;--group-inspector-width:370px;--min-chat-column-width:520px;
}
[hidden]{display:none!important}
#appPortalRoot{position:fixed;inset:0;z-index:var(--z-popover);pointer-events:none;isolation:isolate}
#appPortalRoot>[hidden]{display:none!important;pointer-events:none!important}
#appPortalRoot>.overlay,#appPortalRoot>.tgios-context-overlay,#appPortalRoot>.poll-modal,
#appPortalRoot>.schedule-modal,#appPortalRoot>.lumo-tools,#appPortalRoot>.group-create-overlay,
#appPortalRoot>.attachment-overlay,#appPortalRoot>.attachment-preview-overlay,
#appPortalRoot>.reaction-details-overlay,#appPortalRoot>.poll-details-overlay,#appPortalRoot>.apple-popover,
#appPortalRoot>#viewer,#appPortalRoot>#callOverlay,#appPortalRoot>#personProfileScreen,
#appPortalRoot>#groupInfoScreen{pointer-events:auto}
#appPortalRoot>.overlay,#appPortalRoot>.reaction-details-overlay,#appPortalRoot>.poll-details-overlay,#appPortalRoot>#msgContextWrap{z-index:var(--z-modal)}
#appPortalRoot>.apple-popover{z-index:var(--z-popover);pointer-events:auto}
#appPortalRoot>#chatMenuWrap{z-index:var(--z-popover)}
#appPortalRoot>#fwdWrap,#appPortalRoot>.attachment-overlay,#appPortalRoot>.attachment-preview-overlay,
#appPortalRoot>.poll-modal,#appPortalRoot>.schedule-modal,#appPortalRoot>.group-create-overlay,#appPortalRoot>#lumoTools{z-index:var(--z-sheet)}
#appPortalRoot>#personProfileScreen,#appPortalRoot>#groupInfoScreen{z-index:var(--z-inspector)}
#appPortalRoot>#confirmWrap{z-index:var(--z-modal)}
#appPortalRoot>#viewer{z-index:var(--z-media)}
#appPortalRoot>#callOverlay{z-index:var(--z-call)}

@media(min-width:900px){
  #appPortalRoot>#chatMenuWrap:not([hidden]){position:fixed!important;inset:0!important;display:block!important;background:transparent!important;padding:0!important}
  #appPortalRoot>#chatMenuWrap .sheet{position:fixed!important;width:286px!important;max-width:calc(100vw - 20px)!important;margin:0!important;padding:6px!important;border-radius:14px!important;box-shadow:0 18px 50px rgba(0,0,0,.24)!important;overflow:auto!important}
  #appPortalRoot>#groupInfoScreen{
    position:fixed!important;inset:0 0 0 auto!important;width:var(--group-inspector-width)!important;max-width:var(--group-inspector-width)!important;
    height:100vh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:0!important;
    border-left:var(--apple-hairline,1px) solid var(--separator)!important;border-radius:0!important;background:var(--background-primary,var(--bg))!important;
    box-shadow:-14px 0 34px rgba(0,0,0,.10)!important;transform:translateX(100%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:transform .20s ease,opacity .16s ease,visibility 0s linear .20s!important
  }
  #appPortalRoot>#groupInfoScreen.open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:transform .20s ease,opacity .16s ease,visibility 0s!important}
  #appPortalRoot>#groupInfoScreen .group-info-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
  body.has-app.app-inspector-open:not(.inspector-three-column) #chatScreen.open{inset:0 0 0 var(--mac-sidebar-width,356px)!important;right:0!important;width:auto!important;min-width:0!important}
  body.has-app.inspector-three-column.profile-inspector-open #chatScreen.open{inset:0 var(--profile-inspector-width) 0 var(--mac-sidebar-width,356px)!important;right:var(--profile-inspector-width)!important;width:auto!important}
  body.has-app.inspector-three-column.group-info-open #chatScreen.open{inset:0 var(--group-inspector-width) 0 var(--mac-sidebar-width,356px)!important;right:var(--group-inspector-width)!important;width:auto!important}
}
@media(max-width:899px){
  #appPortalRoot>#groupInfoScreen{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;transform:translateX(100%)!important;opacity:1!important;visibility:hidden!important;pointer-events:none!important}
  #appPortalRoot>#groupInfoScreen.open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
}