/* chrome.css — "chrome" here means browser/OS chrome, not a component.
 * Every page's <head> already declares viewport-fit=cover and an
 * apple-mobile-web-app-status-bar-style, which only matters if
 * something on the page actually pads around the notch / status bar /
 * home-indicator strip those meta tags expose — nothing did, which is
 * what this file is for.
 *
 * Additive and self-contained on purpose, same as profile.css: every
 * rule carries a var(--token, fallback) so it still renders correctly
 * if a token from base.css isn't picked up for some reason. Doesn't
 * redefine anything from base.css, buttons.css, gate.css, etc. — only
 * safe-area spacing and a couple of app-shell feel details.
 */

/* iOS Safari (and any PWA using viewport-fit=cover) draws the page
   edge-to-edge under the status bar and home-indicator strip unless
   something reserves that space explicitly. env(safe-area-inset-*) is
   0 on anything that doesn't have a notch/strip, so this is free
   everywhere else. */
:root{
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

html{
  scroll-padding-top: var(--safe-top);
}

body{
  background: var(--bg-0, #0B1330);
  overscroll-behavior-y: none; /* no rubber-band flashing the page background on iOS */
}

/* .wrap is the shared page container on every screen — give it room on
   the sides for a landscape notch, and keep top/bottom breathing room
   from the topbar and footer as-is by not touching those here. */
.wrap{
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* The topbar sits at the very top of every page. If it's ever made
   sticky/fixed in base.css, add "position:sticky; top:0;" alongside
   this rule — the safe-area padding alone doesn't pin it. */
.topbar{
  padding-top: var(--safe-top);
}

/* Bottom tab bar (phones only, settings.html + friends) is fixed to
   the viewport bottom — without this, the home-indicator strip sits
   on top of the icons instead of below them. */
.bb-tabbar{
  padding-bottom: var(--safe-bottom);
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}

/* group.html's composer is fixed to the bottom of the viewport, same
   issue as the tab bar above. */
.group-composer-bar{
  padding-bottom: var(--safe-bottom);
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* Small app-shell feel details — safe on every page regardless of
   what else is loaded. */
::selection{
  background: var(--blue-500, #4B84FF);
  color: #fff;
}