/* Three more full-screen surfaces and the iPhone status bar. In the MODE! shell the WebView already
   starts below that bar, so any env(safe-area-inset-top) inside it paints ~47px of dead space — the
   double clearance the header had (app-safe-area-v1.css). Outside the shell the document starts at
   the physical top of the screen, so those surfaces need the inset and the rules below give it back.
   Bottom insets are deliberately untouched: the shell offsets the WebView at the top only.

   css/notif-sheet.css and css/chat-ig-v2.css are pushed into the head after this file, so nothing
   here can win on load order — every rule carries one class more than the rule it answers. */

html.mtv-in-app .mtv-viewer__top { top: 10px; }

@media (max-width: 820px) {
  html.mtv-in-app .mtv-notif-sheet__bar { padding-top: 10px; }

  /* The chat thread's own inset rule (css/chat-ig-v2.css line 85) sits at a lower specificity than
     that sheet's flat `padding: 8px 6px` on the same element, so it has never applied and the head
     has always started at the very top of the screen — under the status bar. Re-asserted here at the
     specificity it needs, and only outside the shell, where the flat 8px is already correct. */
  html:not(.mtv-in-app).mtv-chat-ig .mtv-chat__thread .mtv-chat__head { padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  html.mtv-chat-ig[data-keyboard="open"] .mtv-chat__thread .mtv-chat__head { padding-top: 7px; }
}