/* The frame owns the device insets once, for every route and overlay.
   Page padding must not be responsible for avoiding the iOS status bar. */
body.p8-active main#main-content .p8-frame {
  position:absolute;
  inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  width:auto;
  height:auto;
  min-height:0;
}
body.p8-active .p8-root {
  --app-safe-top:0px;
  --app-safe-bottom:0px;
}
/* The outer document does not scroll while the P8 shell is mounted. */
html:has(body.p8-active) { scrollbar-gutter:auto; overflow:hidden; }
body.p8-active main#main-content { background:var(--bg-canvas,#050506); }
/* Login uses document flow instead of P8; protect its top controls too. */
html:root body.login-page { padding-top:env(safe-area-inset-top,0px); }
/* The full-screen player is already inside the safe frame. */
body.p8-active .p8-root .np { padding:0; }
/* An entry footer must follow the room header on short phones, not stick
   upward across it. The page scroll keeps the entry reachable. */
body.p8-active .p8-root .mobile-voice:not(.voice-connected) .voice-controls { position:static; }
/* Tablet room rows need two columns: icon + room. The count is already
   present in the room subtitle; reserving a third column squeezed names. */
body.p8-active .p8-root .voice-workspace:not(.mobile-voice) .voice-channel {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:6px;
  padding-inline:6px;
}
body.p8-active .p8-root .voice-workspace:not(.mobile-voice) .voice-channel-count { display:none; }
body.p8-active .p8-root .voice-workspace:not(.mobile-voice) .voice-channel-copy strong { white-space:nowrap; }
@media(max-width:1000px) {
  body.p8-active .p8-root .voice-workspace.mobile-voice .voice-entry>.voice-button {
    min-height:48px!important;height:48px;padding:5px 4px!important;gap:2px;
  }
  body.p8-active .p8-root .voice-workspace.mobile-voice .voice-entry>.voice-button>svg { display:block; }
  body.p8-active .p8-root .voice-workspace.mobile-voice .voice-entry>.primary>svg { display:none; }
  body.p8-active .p8-root.voice-chat-open .sheet {
    --voice-safe-visible:min(100cqh,calc(var(--p8-visual-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));
    top:auto;transform:none!important;max-height:var(--voice-safe-visible)!important;
    bottom:max(0px,calc(var(--p8-keyboard-bottom,0px) - env(safe-area-inset-bottom,0px)))!important;
  }
  body.p8-active .p8-root.voice-chat-open .voice-chat-dialog {
    min-height:0;height:min(680px,calc(var(--voice-safe-visible) - 100px));
  }
}