/* Keep the mobile navigation header close to the screen edge, including notched phones. */
@media (max-width:780px){
  .app{padding-top:0;padding-left:0;padding-right:0}
  .app .main{border-top-left-radius:0;border-top-right-radius:0}
  .app .topbar{
    top:0;
    z-index:20;
    gap:8px;
    padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));
    border-bottom:1px solid var(--line,#ffffff18);
    box-shadow:0 4px 18px #0000000a;
  }
  .app .topbar .spacer{display:none}
  .app .topbar .search{flex:1 1 0;max-width:none;min-width:0;height:38px;padding:0 10px;gap:7px;border-radius:12px}
  .app .topbar .search input{width:100%;font-size:13px}
  .app .topbar .search .i{flex-shrink:0;width:17px;height:17px}
  .app .topbar>.icon-btn,.app .topbar .tb-app{flex-shrink:0;width:36px;height:38px;padding:0;justify-content:center;border-radius:11px}
  .app .topbar .tb-pill{flex-shrink:0;height:38px;padding:0 12px;font-size:12px;border-radius:11px}
}