html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Lay the canvas and the bottom strip out in normal flow (a flex column) rather than positioning
   them `fixed`. Mobile Safari does not reflow `position: fixed` elements on an orientation change
   while the page cannot scroll (`overflow: hidden`), so a fixed #app kept its pre-rotation
   (landscape) width after rotating back to portrait — leaving the Compose canvas, and the
   full-width year navigator drawn on it, stretched off the right of the screen. A normal-flow flex
   child resizes with the viewport on rotation, so the canvas (sized to #app by Compose's
   ResizeObserver) tracks the new orientation. */
body {
    display: flex;
    flex-direction: column;
    background: #F5E7D7; /* Default (Warm) page background; Dark applied by the inline theme script */
}

/* Reserved strip along the bottom for the iOS home-indicator gesture. Scaled up from the raw
   safe-area inset (~34px on Face ID iPhones) so even a *fast* swipe-to-home — which can start a
   little above the very edge — begins on inert chrome, not the canvas. Resolves to 0 where there
   is no bottom inset (desktop/older devices), so those stay full-height and show no bar. */
:root {
    --ml-bottom-strip: calc(env(safe-area-inset-bottom, 0px) * 1.7);
}

/* The Compose canvas mounts here, filling all space above the reserved bottom strip. `min-height:0`
   lets the flex child shrink to its share of the height instead of overflowing; `position:relative`
   anchors the canvas Compose appends inside it. The bottom inset is still reserved (below), so the
   swipe-up-to-home gesture continues to start on inert chrome, not the canvas. */
#app {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* Visible bottom chrome bar filling the reserved strip; mirrors the top header (surfaceVariant).
   Height collapses to 0 where there is no bottom inset, so it only shows where it is needed. */
#ml-bottom-bar {
    flex: 0 0 var(--ml-bottom-strip);
    background: #E6D3BC; /* Warm surfaceVariant; Dark applied by the inline theme script */
}