.app-update-banner{position:fixed;inset:auto 16px calc(16px + env(safe-area-inset-bottom));z-index:10000;display:flex;align-items:center;justify-content:center;gap:16px;width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;padding:12px 16px;border:1px solid var(--im-border,var(--line));border-radius:12px;background:var(--im-surface,var(--surface,#fff));color:var(--im-text,var(--ink,#15181e));font:inherit;font-size:14px;line-height:1.4}.app-update-banner .primary{flex-shrink:0;min-height:40px;padding:8px 16px;font:inherit;font-weight:600}@media(max-width:480px){.app-update-banner{justify-content:space-between;width:calc(100% - 32px);gap:12px}}

/* Keep installed-app controls clear of the notch and home indicator. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root .layout{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media(max-width:760px){
 :root .layout{min-height:100dvh}
 :root .sidebar{left:env(safe-area-inset-left);padding-top:calc(20px + env(safe-area-inset-top))!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;max-height:100dvh;overflow-y:auto}
 :root .page-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom));gap:12px;flex-wrap:wrap}
 :root .profile-menu{right:calc(12px + env(safe-area-inset-right));top:calc(66px + env(safe-area-inset-top));max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
 :root .save-bar{bottom:calc(8px + env(safe-area-inset-bottom))}
 :root #toast{bottom:calc(20px + env(safe-area-inset-bottom))}
 .app-update-banner{flex-wrap:wrap}
}
/* Rotated phones and tablets can use the desktop layout while retaining insets. */
@media(min-width:761px) and (pointer:coarse){
 :root .sidebar{left:env(safe-area-inset-left);top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 :root .profile-menu{left:calc(16px + env(safe-area-inset-left));bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
 :root .page-footer{padding-bottom:calc(23px + env(safe-area-inset-bottom));flex-wrap:wrap}
 :root .save-bar{bottom:calc(14px + env(safe-area-inset-bottom))}
 :root #toast{bottom:calc(25px + env(safe-area-inset-bottom))}
}
@media(pointer:coarse){
 .app-update-banner{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));max-width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))}
}